Modal HOC - visual enhancement • Playground • Svelte

App.svelte

Modal.svelte

import Modal from "./Modal.svelte";

</script>

<p>

I am just some text outside of the higher order component

</p>

<Modal>

<p>

I am some content in a slot

</p>

</Modal>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import Modal from "./Modal.svelte";

var root_1 = $.template(`<p>I am some content in a slot</p>`);

var root = $.template(`<p>I am just some text outside of the higher order component</p> <!>`, 1);

export default function App($$anchor) {

var fragment = root();

var node = $.sibling($.first_child(fragment), 2);

Modal(node, {

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

var p = root_1();

$.append($$anchor, p);

$$slots: { default: true }

});

$.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: 57
end: 182
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Text {...}
 type: "Text"
start: 55
end: 57
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 57
end: 124
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 60
end: 120
raw: "I am just some text outside of the higher order component"
data: "I am just some text outside of the higher order component"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 124
end: 125
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 125
end: 182
name: "Modal"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 132
end: 134
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 134
end: 173
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 137
end: 169
raw: "I am some content in a slot"
data: "I am some content in a slot"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 173
end: 174
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 55
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 46
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 3
column: 0
 }
 }
body: [...] (1)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 45
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 36
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 17
end: 22
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 13
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 17
end: 22
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 13
 }
 }
name: "Modal"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 28
end: 44
loc:  {...}
 start:  {...}
 line: 2
column: 19
 }
end:  {...}
 line: 2
column: 35
 }
 }
value: "./Modal.svelte"
raw: "\"./Modal.svelte\""
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern