(cache)Render props • Playground • Svelte

App.svelte

Box.svelte

import Box from './Box.svelte';

</script>

<Box>

<h2>Hello!</h2>

<p>This is a box. It can contain anything.</p>

</Box>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import Box from './Box.svelte';

var root_1 = $.from_html(`<h2>Hello!</h2> <p>This is a box. It can contain anything.</p>`, 1);

export default function App($$anchor) {

Box($$anchor, {

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

var fragment_1 = root_1();

$.next(2);

$.append($$anchor, fragment_1);

$$slots: { default: true }

});

}

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

		
			
				
					 Root {
 css: null
js: []
start: 53
end: 130
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 51
end: 53
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 53
end: 130
name: "Box"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 58
end: 60
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 60
end: 75
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 64
end: 70
raw: "Hello!"
data: "Hello!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 75
end: 77
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 77
end: 123
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 80
end: 119
raw: "This is a box. It can contain anything."
data: "This is a box. It can contain anything."
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 123
end: 124
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 51
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 42
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 3
column: 0
 }
 }
body: [...] (1)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 41
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 32
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 17
end: 20
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 11
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 17
end: 20
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 11
 }
 }
name: "Box"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 26
end: 40
loc:  {...}
 start:  {...}
 line: 2
column: 17
 }
end:  {...}
 line: 2
column: 31
 }
 }
value: "./Box.svelte"
raw: "'./Box.svelte'"
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern