(cache)The least to understand let: • Playground • Svelte

App.svelte

Component.svelte

import Component from "./Component.svelte";

</script>

</Component>

import "svelte/internal/disclose-version";

import "svelte/internal/flags/legacy";

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

import Component from "./Component.svelte";

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

export default function App($$anchor) {

Component($$anchor, {

children: $.invalid_default_snippet,

$$slots: {

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

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

var h1 = root_1();

var text = $.child(h1, true);

$.reset(h1);

$.template_effect(() => $.set_text(text, $.get(b)));

$.append($$anchor, h1);

}

});

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 65
end: 113
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 63
end: 65
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 65
end: 113
name: "Component"
attributes: [...] (1)
  LetDirective {...}
 start: 76
end: 85
type: "LetDirective"
name: "a"
expression: Identifier {...}
 type: "Identifier"
start: 83
end: 84
loc:  {...}
 start:  {...}
 line: 5
column: 18
 }
end:  {...}
 line: 5
column: 19
 }
 }
name: "b"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 86
end: 88
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 88
end: 100
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 92
end: 95
expression: Identifier {...}
 type: "Identifier"
start: 93
end: 94
loc:  {...}
 start:  {...}
 line: 6
column: 6
 }
end:  {...}
 line: 6
column: 7
 }
 }
name: "b"
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 100
end: 101
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {
 type: "Script"
start: 0
end: 63
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 54
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 3
column: 0
 }
 }
body: [...] (1)
  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\""
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern