Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Modal.svelte
runes
This component is in runes mode.
To disable runes mode, add the following to the top of your component:
<svelte:options runes={false} />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
›
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import Modal from './Modal.svelte';
let showModal = $state(false);
</script>
<button onclick={() => (showModal = true)}> show modal </button>
<Modal bind:showModal>
{#snippet header()}
<h2>
modal
<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
</h2>
{/snippet}
<ol class="definition-list">
<li>of or relating to modality in logic</li>
<li>
containing provisions as to the mode of procedure or the manner of taking effect —used of a
contract or legacy
</li>
<li>of or relating to a musical mode</li>
<li>of or relating to structure as opposed to substance</li>
<li>
of, relating to, or constituting a grammatical form or category characteristically indicating
predication
</li>
<li>of or relating to a statistical mode</li>
</ol>
<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
</Modal>
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
import Modal from './Modal.svelte';
var on_click = (_, showModal) => $.set(showModal, true);
var root_1 = $.template(`<h2>modal <small><em>adjective</em> mod·al \\ˈmō-dəl\\</small></h2>`);
var root_2 = $.template(
`<ol class="definition-list"><li>of or relating to modality in logic</li> <li>containing provisions as to the mode of procedure or the manner of taking effect —used of a
contract or legacy</li> <li>of or relating to a musical mode</li> <li>of or relating to structure as opposed to substance</li> <li>of, relating to, or constituting a grammatical form or category characteristically indicating
predication</li> <li>of or relating to a statistical mode</li></ol> <a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>`,
1
);
var root = $.template(`<button>show modal</button> <!>`, 1);
export default function App($$anchor) {
let showModal = $.state(false);
var fragment = root();
var button = $.first_child(fragment);
button.__click = [on_click, showModal];
var node = $.sibling(button, 2);
{
const header = ($$anchor) => {
var h2 = root_1();
$.append($$anchor, h2);
};
Modal(node, {
get showModal() {
return $.get(showModal);
},
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 90
- end: 882
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
Text {...}
- type: "Text"
- start: 88
- end: 90
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 90
- end: 154
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 98
- end: 132
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 106
- end: 132
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 107
- end: 131
loc: {...}
start: {...}
- line: 7
- column: 17
}end: {...}
- line: 7
- column: 41
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 114
- end: 130
loc: {...}
start: {...}
- line: 7
- column: 24
}end: {...}
- line: 7
- column: 40
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 114
- end: 123
loc: {...}
start: {...}
- line: 7
- column: 24
}end: {...}
- line: 7
- column: 33
}
}- name: "showModal"
}right: Literal {...}
- type: "Literal"
- start: 126
- end: 130
loc: {...}
start: {...}
- line: 7
- column: 36
}end: {...}
- line: 7
- column: 40
}
}- value: true
- raw: "true"
}
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 133
- end: 145
- raw: "show modal"
- data: "show modal"
}
]
}
} Text {...}
- type: "Text"
- start: 154
- end: 156
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 156
- end: 882
- name: "Modal"
attributes: [...] (1)
BindDirective {...}
- start: 163
- end: 177
- type: "BindDirective"
- name: "showModal"
expression: Identifier {...}
- start: 168
- end: 177
- type: "Identifier"
- name: "showModal"
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (7)
Text {...}
- type: "Text"
- start: 178
- end: 180
- raw: "\n\t"
- data: "\n\t"
} SnippetBlock {...}
- type: "SnippetBlock"
- start: 180
- end: 289
expression: Identifier {...}
- type: "Identifier"
- start: 190
- end: 196
- name: "header"
}- parameters: []
body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 199
- end: 202
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 202
- end: 277
- name: "h2"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 206
- end: 219
- raw: "modal "
- data: "modal "
} RegularElement {...}
- type: "RegularElement"
- start: 219
- end: 269
- name: "small"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
RegularElement {...}
- type: "RegularElement"
- start: 226
- end: 244
- name: "em"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 230
- end: 239
- raw: "adjective"
- data: "adjective"
}
]
}
} Text {...}
- type: "Text"
- start: 244
- end: 261
- raw: " mod·al \\ˈmō-dəl\\"
- data: " mod·al \\ˈmō-dəl\\"
}
]
}
} Text {...}
- type: "Text"
- start: 269
- end: 272
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 277
- end: 279
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 289
- end: 292
- raw: "\n\n\t"
- data: "\n\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 292
- end: 788
- name: "ol"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 296
- end: 319
- name: "class"
value: [...] (1)
Text {...}
- start: 303
- end: 318
- type: "Text"
- raw: "definition-list"
- data: "definition-list"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (13)
Text {...}
- type: "Text"
- start: 320
- end: 323
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 323
- end: 367
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 327
- end: 362
- raw: "of or relating to modality in logic"
- data: "of or relating to modality in logic"
}
]
}
} Text {...}
- type: "Text"
- start: 367
- end: 370
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 370
- end: 499
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 374
- end: 494
- raw: "containing provisions as to the mode of procedure or the manner of taking effect —used of a\n\t\t\tcontract or legacy"
- data: "containing provisions as to the mode of procedure or the manner of taking effect —used of a\n\t\t\tcontract or legacy"
}
]
}
} Text {...}
- type: "Text"
- start: 499
- end: 502
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 502
- end: 543
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 506
- end: 538
- raw: "of or relating to a musical mode"
- data: "of or relating to a musical mode"
}
]
}
} Text {...}
- type: "Text"
- start: 543
- end: 546
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 546
- end: 606
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 550
- end: 601
- raw: "of or relating to structure as opposed to substance"
- data: "of or relating to structure as opposed to substance"
}
]
}
} Text {...}
- type: "Text"
- start: 606
- end: 609
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 609
- end: 733
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 613
- end: 728
- raw: "of, relating to, or constituting a grammatical form or category characteristically indicating\n\t\t\tpredication"
- data: "of, relating to, or constituting a grammatical form or category characteristically indicating\n\t\t\tpredication"
}
]
}
} Text {...}
- type: "Text"
- start: 733
- end: 736
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 736
- end: 781
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 740
- end: 776
- raw: "of or relating to a statistical mode"
- data: "of or relating to a statistical mode"
}
]
}
} Text {...}
- type: "Text"
- start: 781
- end: 783
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 788
- end: 791
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 791
- end: 873
- name: "a"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 794
- end: 849
- name: "href"
value: [...] (1)
Text {...}
- start: 800
- end: 848
- type: "Text"
- raw: "https://www.merriam-webster.com/dictionary/modal"
- data: "https://www.merriam-webster.com/dictionary/modal"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 850
- end: 869
- raw: "merriam-webster.com"
- data: "merriam-webster.com"
}
]
}
} Text {...}
- type: "Text"
- start: 873
- end: 874
- raw: "\n"
- data: "\n"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 88
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 79
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 5
- column: 0
}
}body: [...] (2)
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'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 48
- end: 78
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 31
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 52
- end: 77
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 30
}
}id: Identifier {...}
- type: "Identifier"
- start: 52
- end: 61
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 14
}
}- name: "showModal"
}init: CallExpression {...}
- type: "CallExpression"
- start: 64
- end: 77
loc: {...}
start: {...}
- line: 4
- column: 17
}end: {...}
- line: 4
- column: 30
}
}callee: Identifier {...}
- type: "Identifier"
- start: 64
- end: 70
loc: {...}
start: {...}
- line: 4
- column: 17
}end: {...}
- line: 4
- column: 23
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 71
- end: 76
loc: {...}
start: {...}
- line: 4
- column: 24
}end: {...}
- line: 4
- column: 29
}
}- value: false
- raw: "false"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time