Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Modal.svelte
runes
This component is not in runes mode.
To enable runes mode, either start using runes in your code, or add the following to the top of your component:
<svelte:options runes />
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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import Modal,{getModal} from './Modal.svelte'
let name = 'world';
let selection
// Callback function provided to the `open` function, it receives the value given to the `close` function call, or `undefined` if the Modal was closed with escape or clicking the X, etc.
function setSelection(res){
selection=res
}
</script>
<h2>Very Simple Modal Component</h2>
<ul>
<li>Sinlge .svelte file, no dependencies</li>
<li>Code is simple and commented, easy to modify to your needs</li>
<li>It will always display on top, even if placed low in the stacking context</li>
<li>Supports multiple, nested modal popups</li>
<li>Supports returning a value when closing modal popup</li>
</ul>
<!-- Simplest use: modal without an `id` or callback function -->
<button on:click={()=>getModal().open()}>
Open First Popup
</button>
<!-- the modal without an `id` -->
<Modal>
<h1>Hello {name}!</h1>
<!-- opening a model with an `id` and specifying a callback -->
<button on:click={()=>getModal('second').open(setSelection)}>
Open Nested Popup
</button>
{#if selection}
<p>
Your selection was: {selection}
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 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import Modal, { getModal } from './Modal.svelte';
var root_2 = $.template(`<p> </p>`);
var root_1 = $.template(`<h1></h1> <button>Open Nested Popup</button> <!>`, 1);
var root_3 = $.template(`Inner window <button class="green svelte-8ruzc8">Select 1</button> <button class="green svelte-8ruzc8">Select 2</button>`, 1);
var root = $.template(`<h2>Very Simple Modal Component</h2> <ul><li>Sinlge .svelte file, no dependencies</li> <li>Code is simple and commented, easy to modify to your needs</li> <li>It will always display on top, even if placed low in the stacking context</li> <li>Supports multiple, nested modal popups</li> <li>Supports returning a value when closing modal popup</li></ul> <button>Open First Popup</button> <!> <!>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, false);
let name = 'world';
let selection = $.mutable_state();
// Callback function provided to the `open` function, it receives the value given to the `close` function call, or `undefined` if the Modal was closed with escape or clicking the X, etc.
function setSelection(res) {
$.set(selection, res);
}
$.init();
var fragment = root();
var button = $.sibling($.first_child(fragment), 4);
var node = $.sibling(button, 2);
Modal(node, {
children: ($$anchor, $$slotProps) => {
var fragment_1 = root_1();
var h1 = $.first_child(fragment_1);
h1.textContent = `Hello ${name ?? ''}!`;
var button_1 = $.sibling(h1, 2);
var node_1 = $.sibling(button_1, 2);
result = svelte.compile(source, {
generate: ,
});9
1
2
3
4
5
6
›
/* The content inside the modal can be styled as usual */
.green.svelte-8ruzc8 {
background: #0f0;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 1428
- end: 1537
- attributes: []
children: [...] (1)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1497
- end: 1503
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1497
- end: 1503
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "green"
- start: 1497
- end: 1503
}
]- start: 1497
- end: 1503
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1504
- end: 1528
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1508
- end: 1524
- property: "background"
- value: "#0f0"
}
]
}- start: 1497
- end: 1528
}
]content: {...}
- start: 1435
- end: 1529
- styles: "\n\t/* The content inside the modal can be styled as usual\t */\n\t.green {\n\t\tbackground: #0f0;\n\t}\n"
- comment: null
}
}- js: []
- start: 344
- end: 1426
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (15)
Text {...}
- type: "Text"
- start: 343
- end: 344
- raw: "\n"
- data: "\n"
} RegularElement {...}
- type: "RegularElement"
- start: 344
- end: 380
- name: "h2"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 348
- end: 375
- raw: "Very Simple Modal Component"
- data: "Very Simple Modal Component"
}
]
}
} Text {...}
- type: "Text"
- start: 380
- end: 381
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 381
- end: 702
- name: "ul"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (11)
Text {...}
- type: "Text"
- start: 385
- end: 387
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 387
- end: 432
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 391
- end: 427
- raw: "Sinlge .svelte file, no dependencies"
- data: "Sinlge .svelte file, no dependencies"
}
]
}
} Text {...}
- type: "Text"
- start: 432
- end: 434
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 434
- end: 501
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 438
- end: 496
- raw: "Code is simple and commented, easy to modify to your needs"
- data: "Code is simple and commented, easy to modify to your needs"
}
]
}
} Text {...}
- type: "Text"
- start: 501
- end: 503
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 503
- end: 585
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 507
- end: 580
- raw: "It will always display on top, even if placed low in the stacking context"
- data: "It will always display on top, even if placed low in the stacking context"
}
]
}
} Text {...}
- type: "Text"
- start: 585
- end: 587
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 587
- end: 634
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 591
- end: 629
- raw: "Supports multiple, nested modal popups"
- data: "Supports multiple, nested modal popups"
}
]
}
} Text {...}
- type: "Text"
- start: 634
- end: 636
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 636
- end: 696
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 640
- end: 691
- raw: "Supports returning a value when closing modal popup"
- data: "Supports returning a value when closing modal popup"
}
]
}
} Text {...}
- type: "Text"
- start: 696
- end: 697
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 702
- end: 704
- raw: " "
- data: " "
} Comment {...}
- type: "Comment"
- start: 704
- end: 769
- data: " Simplest use: modal without an `id` or callback function "
} Text {...}
- type: "Text"
- start: 769
- end: 770
- raw: ""
- data: ""
} RegularElement {...}
- type: "RegularElement"
- start: 770
- end: 839
- name: "button"
attributes: [...] (1)
OnDirective {...}
- start: 778
- end: 810
- type: "OnDirective"
- name: "click"
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 788
- end: 809
loc: {...}
start: {...}
- line: 23
- column: 18
}end: {...}
- line: 23
- column: 39
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 792
- end: 809
loc: {...}
start: {...}
- line: 23
- column: 22
}end: {...}
- line: 23
- column: 39
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 792
- end: 807
loc: {...}
start: {...}
- line: 23
- column: 22
}end: {...}
- line: 23
- column: 37
}
}object: CallExpression {...}
- type: "CallExpression"
- start: 792
- end: 802
loc: {...}
start: {...}
- line: 23
- column: 22
}end: {...}
- line: 23
- column: 32
}
}callee: Identifier {...}
- type: "Identifier"
- start: 792
- end: 800
loc: {...}
start: {...}
- line: 23
- column: 22
}end: {...}
- line: 23
- column: 30
}
}- name: "getModal"
}- arguments: []
- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 803
- end: 807
loc: {...}
start: {...}
- line: 23
- column: 33
}end: {...}
- line: 23
- column: 37
}
}- name: "open"
}- computed: false
- optional: false
}- arguments: []
- optional: false
}
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 811
- end: 830
- raw: "Open First Popup"
- data: "Open First Popup"
}
]
}
} Text {...}
- type: "Text"
- start: 839
- end: 841
- raw: " "
- data: " "
} Comment {...}
- type: "Comment"
- start: 841
- end: 875
- data: " the modal without an `id` "
} Text {...}
- type: "Text"
- start: 875
- end: 876
- raw: ""
- data: ""
} Component {...}
- type: "Component"
- start: 876
- end: 1145
- name: "Modal"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (9)
Text {...}
- type: "Text"
- start: 883
- end: 885
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 885
- end: 907
- name: "h1"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 889
- end: 895
- raw: "Hello "
- data: "Hello "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 895
- end: 901
expression: Identifier {...}
- type: "Identifier"
- start: 896
- end: 900
loc: {...}
start: {...}
- line: 29
- column: 12
}end: {...}
- line: 29
- column: 16
}
}- name: "name"
}
} Text {...}
- type: "Text"
- start: 901
- end: 902
- raw: "!"
- data: "!"
}
]
}
} Text {...}
- type: "Text"
- start: 907
- end: 909
- raw: " "
- data: " "
} Comment {...}
- type: "Comment"
- start: 909
- end: 973
- data: " opening a model with an `id` and specifying a callback\t "
} Text {...}
- type: "Text"
- start: 973
- end: 975
- raw: ""
- data: ""
} RegularElement {...}
- type: "RegularElement"
- start: 975
- end: 1067
- name: "button"
attributes: [...] (1)
OnDirective {...}
- start: 983
- end: 1035
- type: "OnDirective"
- name: "click"
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 993
- end: 1034
loc: {...}
start: {...}
- line: 31
- column: 19
}end: {...}
- line: 31
- column: 60
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 997
- end: 1034
loc: {...}
start: {...}
- line: 31
- column: 23
}end: {...}
- line: 31
- column: 60
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 997
- end: 1020
loc: {...}
start: {...}
- line: 31
- column: 23
}end: {...}
- line: 31
- column: 46
}
}object: CallExpression {...}
- type: "CallExpression"
- start: 997
- end: 1015
loc: {...}
start: {...}
- line: 31
- column: 23
}end: {...}
- line: 31
- column: 41
}
}callee: Identifier {...}
- type: "Identifier"
- start: 997
- end: 1005
loc: {...}
start: {...}
- line: 31
- column: 23
}end: {...}
- line: 31
- column: 31
}
}- name: "getModal"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 1006
- end: 1014
loc: {...}
start: {...}
- line: 31
- column: 32
}end: {...}
- line: 31
- column: 40
}
}- value: "second"
- raw: "'second'"
}
]- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 1016
- end: 1020
loc: {...}
start: {...}
- line: 31
- column: 42
}end: {...}
- line: 31
- column: 46
}
}- name: "open"
}- computed: false
- optional: false
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 1021
- end: 1033
loc: {...}
start: {...}
- line: 31
- column: 47
}end: {...}
- line: 31
- column: 59
}
}- name: "setSelection"
}
]- optional: false
}
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 1036
- end: 1058
- raw: "Open Nested Popup"
- data: "Open Nested Popup"
}
]
}
} Text {...}
- type: "Text"
- start: 1067
- end: 1069
- raw: " "
- data: " "
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 1069
- end: 1136
test: Identifier {...}
- type: "Identifier"
- start: 1074
- end: 1083
loc: {...}
start: {...}
- line: 34
- column: 6
}end: {...}
- line: 34
- column: 15
}
}- name: "selection"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 1084
- end: 1086
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 1086
- end: 1129
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 1089
- end: 1112
- raw: "Your selection was: "
- data: "Your selection was: "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 1112
- end: 1123
expression: Identifier {...}
- type: "Identifier"
- start: 1113
- end: 1122
loc: {...}
start: {...}
- line: 36
- column: 23
}end: {...}
- line: 36
- column: 32
}
}- name: "selection"
}
} Text {...}
- type: "Text"
- start: 1123
- end: 1125
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 1129
- end: 1131
- raw: "\n\t"
- data: "\n\t"
}
]
}- alternate: null
} Text {...}
- type: "Text"
- start: 1136
- end: 1137
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 1145
- end: 1147
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 1147
- end: 1426
- name: "Modal"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 1154
- end: 1165
- name: "id"
value: [...] (1)
Text {...}
- start: 1158
- end: 1164
- type: "Text"
- raw: "second"
- data: "second"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (7)
Text {...}
- type: "Text"
- start: 1166
- end: 1182
- raw: "Inner window "
- data: "Inner window "
} Comment {...}
- type: "Comment"
- start: 1182
- end: 1237
- data: " Passing a value back to the callback function\t "
} Text {...}
- type: "Text"
- start: 1237
- end: 1239
- raw: ""
- data: ""
} RegularElement {...}
- type: "RegularElement"
- start: 1239
- end: 1326
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 1247
- end: 1260
- name: "class"
value: [...] (1)
Text {...}
- start: 1254
- end: 1259
- type: "Text"
- raw: "green"
- data: "green"
}
]
} OnDirective {...}
- start: 1261
- end: 1303
- type: "OnDirective"
- name: "click"
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 1271
- end: 1302
loc: {...}
start: {...}
- line: 44
- column: 33
}end: {...}
- line: 44
- column: 64
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 1275
- end: 1302
loc: {...}
start: {...}
- line: 44
- column: 37
}end: {...}
- line: 44
- column: 64
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 1275
- end: 1299
loc: {...}
start: {...}
- line: 44
- column: 37
}end: {...}
- line: 44
- column: 61
}
}object: CallExpression {...}
- type: "CallExpression"
- start: 1275
- end: 1293
loc: {...}
start: {...}
- line: 44
- column: 37
}end: {...}
- line: 44
- column: 55
}
}callee: Identifier {...}
- type: "Identifier"
- start: 1275
- end: 1283
loc: {...}
start: {...}
- line: 44
- column: 37
}end: {...}
- line: 44
- column: 45
}
}- name: "getModal"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 1284
- end: 1292
loc: {...}
start: {...}
- line: 44
- column: 46
}end: {...}
- line: 44
- column: 54
}
}- value: "second"
- raw: "'second'"
}
]- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 1294
- end: 1299
loc: {...}
start: {...}
- line: 44
- column: 56
}end: {...}
- line: 44
- column: 61
}
}- name: "close"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 1300
- end: 1301
loc: {...}
start: {...}
- line: 44
- column: 62
}end: {...}
- line: 44
- column: 63
}
}- value: 1
- raw: "1"
}
]- optional: false
}
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 1304
- end: 1317
- raw: "Select 1"
- data: "Select 1"
}
]
}
} Text {...}
- type: "Text"
- start: 1326
- end: 1328
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 1328
- end: 1415
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 1336
- end: 1349
- name: "class"
value: [...] (1)
Text {...}
- start: 1343
- end: 1348
- type: "Text"
- raw: "green"
- data: "green"
}
]
} OnDirective {...}
- start: 1350
- end: 1392
- type: "OnDirective"
- name: "click"
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 1360
- end: 1391
loc: {...}
start: {...}
- line: 47
- column: 33
}end: {...}
- line: 47
- column: 64
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 1364
- end: 1391
loc: {...}
start: {...}
- line: 47
- column: 37
}end: {...}
- line: 47
- column: 64
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 1364
- end: 1388
loc: {...}
start: {...}
- line: 47
- column: 37
}end: {...}
- line: 47
- column: 61
}
}object: CallExpression {...}
- type: "CallExpression"
- start: 1364
- end: 1382
loc: {...}
start: {...}
- line: 47
- column: 37
}end: {...}
- line: 47
- column: 55
}
}callee: Identifier {...}
- type: "Identifier"
- start: 1364
- end: 1372
loc: {...}
start: {...}
- line: 47
- column: 37
}end: {...}
- line: 47
- column: 45
}
}- name: "getModal"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 1373
- end: 1381
loc: {...}
start: {...}
- line: 47
- column: 46
}end: {...}
- line: 47
- column: 54
}
}- value: "second"
- raw: "'second'"
}
]- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 1383
- end: 1388
loc: {...}
start: {...}
- line: 47
- column: 56
}end: {...}
- line: 47
- column: 61
}
}- name: "close"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 1389
- end: 1390
loc: {...}
start: {...}
- line: 47
- column: 62
}end: {...}
- line: 47
- column: 63
}
}- value: 2
- raw: "2"
}
]- optional: false
}
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 1393
- end: 1406
- raw: "Select 2"
- data: "Select 2"
}
]
}
} Text {...}
- type: "Text"
- start: 1415
- end: 1418
- raw: "\n\t\n"
- data: "\n\t\n"
}
]
}
} Text {...}
- type: "Text"
- start: 1426
- end: 1428
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 343
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 334
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 12
- column: 0
}
}body: [...] (4)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 55
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 46
}
}specifiers: [...] (2)
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"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 24
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 15
}end: {...}
- line: 2
- column: 23
}
}imported: Identifier {...}
- type: "Identifier"
- start: 24
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 15
}end: {...}
- line: 2
- column: 23
}
}- name: "getModal"
}local: Identifier {...}
- type: "Identifier"
- start: 24
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 15
}end: {...}
- line: 2
- column: 23
}
}- name: "getModal"
}
}
]source: Literal {...}
- type: "Literal"
- start: 39
- end: 55
loc: {...}
start: {...}
- line: 2
- column: 30
}end: {...}
- line: 2
- column: 46
}
}- value: "./Modal.svelte"
- raw: "'./Modal.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 57
- end: 76
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 20
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 61
- end: 75
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 19
}
}id: Identifier {...}
- type: "Identifier"
- start: 61
- end: 65
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 9
}
}- name: "name"
}init: Literal {...}
- type: "Literal"
- start: 68
- end: 75
loc: {...}
start: {...}
- line: 3
- column: 12
}end: {...}
- line: 3
- column: 19
}
}- value: "world"
- raw: "'world'"
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 80
- end: 93
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 14
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 84
- end: 93
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 14
}
}id: Identifier {...}
- type: "Identifier"
- start: 84
- end: 93
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 14
}
}- name: "selection"
}- init: null
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 285
- end: 331
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 10
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 294
- end: 306
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 22
}
}- name: "setSelection"
}- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 307
- end: 310
loc: {...}
start: {...}
- line: 8
- column: 23
}end: {...}
- line: 8
- column: 26
}
}- name: "res"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 311
- end: 331
loc: {...}
start: {...}
- line: 8
- column: 27
}end: {...}
- line: 10
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 315
- end: 328
loc: {...}
start: {...}
- line: 9
- column: 2
}end: {...}
- line: 9
- column: 15
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 315
- end: 328
loc: {...}
start: {...}
- line: 9
- column: 2
}end: {...}
- line: 9
- column: 15
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 315
- end: 324
loc: {...}
start: {...}
- line: 9
- column: 2
}end: {...}
- line: 9
- column: 11
}
}- name: "selection"
}right: Identifier {...}
- type: "Identifier"
- start: 325
- end: 328
loc: {...}
start: {...}
- line: 9
- column: 12
}end: {...}
- line: 9
- column: 15
}
}- name: "res"
}
}
}
]
}leadingComments: [...] (1)
Line {...}
- type: "Line"
- value: " Callback function provided to the `open` function, it receives the value given to the `close` function call, or `undefined` if the Modal was closed with escape or clicking the X, etc."
- start: 97
- end: 283
}
]
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time