(cache)Understanding the let: directive • Playground • Svelte

App.svelte

Component.svelte

Component2.svelte

import Component from "./Component.svelte";

import Component2 from "./Component2.svelte";

let b = "GTFO"; //this will be rewritten by "let:a={b}"

</script>

<h1>{b} from Component</h1>

</Component>

<h1>{c} from Component2</h1>

</Component2>

import "svelte/internal/disclose-version";

import "svelte/internal/flags/legacy";

import * as $ from "svelte/internal/client";

import Component from "./Component.svelte";

import Component2 from "./Component2.svelte";

var root_1 = $.template(`<h1> </h1>`);

var root_2 = $.template(`<h1> </h1>`);

var root = $.template(`<!> <!>`, 1);

export default function App($$anchor) {

let b = "GTFO"; //this will be rewritten by "let:a={b}"

var fragment = root();

var node = $.first_child(fragment);

Component(node, {

children: $.invalid_default_snippet,

$$slots: {

default: ($$anchor, $$slotProps) => {

const b = $.derived_safe_equal(() => $$slotProps.a);

var h1 = root_1();

var text = $.child(h1);

$.reset(h1);

$.template_effect(() => $.set_text(text, `${$.get(b) ?? ""} from Component`));

$.append($$anchor, h1);

}

});

var node_1 = $.sibling(node, 2);

Component2(node_1, {

children: $.invalid_default_snippet,

$$slots: {

default: ($$anchor, $$slotProps) => {

const c = $.derived_safe_equal(() => $$slotProps.c);

var h1_1 = root_2();

var text_1 = $.child(h1_1);

$.reset(h1_1);

$.template_effect(() => $.set_text(text_1, `${$.get(c) ?? ""} from Component2`));

$.append($$anchor, h1_1);

}

});

$.append($$anchor, fragment);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 169
end: 361
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (6)
  Text {...}
 type: "Text"
start: 167
end: 169
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 169
end: 232
name: "Component"
attributes: [...] (1)
  LetDirective {...}
 start: 180
end: 189
type: "LetDirective"
name: "a"
expression: Identifier {...}
 type: "Identifier"
start: 187
end: 188
loc:  {...}
 start:  {...}
 line: 7
column: 18
 }
end:  {...}
 line: 7
column: 19
 }
 }
name: "b"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 190
end: 192
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 192
end: 219
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 196
end: 199
expression: Identifier {...}
 type: "Identifier"
start: 197
end: 198
loc:  {...}
 start:  {...}
 line: 8
column: 6
 }
end:  {...}
 line: 8
column: 7
 }
 }
name: "b"
 }
 }
 Text {...}
 type: "Text"
start: 199
end: 214
raw: " from Component"
data: " from Component"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 219
end: 220
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 232
end: 234
raw: " "
data: " "
 }
 Comment {...}
 type: "Comment"
start: 234
end: 298
data: " Another Component using the shorthand of let: directive "
 }
 Text {...}
 type: "Text"
start: 298
end: 299
raw: ""
data: ""
 }
 Component {...}
 type: "Component"
start: 299
end: 361
name: "Component2"
attributes: [...] (1)
  LetDirective {...}
 start: 311
end: 316
type: "LetDirective"
name: "c"
expression: null
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 317
end: 319
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 319
end: 347
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 323
end: 326
expression: Identifier {...}
 type: "Identifier"
start: 324
end: 325
loc:  {...}
 start:  {...}
 line: 13
column: 6
 }
end:  {...}
 line: 13
column: 7
 }
 }
name: "c"
 }
 }
 Text {...}
 type: "Text"
start: 326
end: 342
raw: " from Component2"
data: " from Component2"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 347
end: 348
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 167
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 158
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 5
column: 0
 }
 }
body: [...] (3)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 53
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 44
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 17
end: 26
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 17
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 17
end: 26
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 17
 }
 }
name: "Component"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 32
end: 52
loc:  {...}
 start:  {...}
 line: 2
column: 23
 }
end:  {...}
 line: 2
column: 43
 }
 }
value: "./Component.svelte"
raw: "\"./Component.svelte\""
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 55
end: 100
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 46
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 62
end: 72
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 18
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 62
end: 72
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 18
 }
 }
name: "Component2"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 78
end: 99
loc:  {...}
 start:  {...}
 line: 3
column: 24
 }
end:  {...}
 line: 3
column: 45
 }
 }
value: "./Component2.svelte"
raw: "\"./Component2.svelte\""
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 102
end: 117
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 4
column: 16
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 106
end: 116
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 15
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 106
end: 107
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 6
 }
 }
name: "b"
 }
init: Literal {...}
 type: "Literal"
start: 110
end: 116
loc:  {...}
 start:  {...}
 line: 4
column: 9
 }
end:  {...}
 line: 4
column: 15
 }
 }
value: "GTFO"
raw: "\"GTFO\""
 }
 }
 ]
kind: "let"
trailingComments: [...] (1)
  Line {...}
 type: "Line"
value: "this will be rewritten by \"let:a={b}\""
start: 118
end: 157
 }
 ]
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern