Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
click_outside.js
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
›
⌄
⌄
⌄
⌄
<script>
import { clickOutside } from './click_outside.js';
let showModal = $state(true);
</script>
<button onclick={() => (showModal = true)}>Show Modal</button>
{#if showModal}
<div class="box" use:clickOutside onoutclick={() => (showModal = false)}>Click outside me!</div>
{/if}
<style>
.box {
--width: 100px;
--height: 100px;
position: absolute;
width: var(--width);
height: var(--height);
left: calc(50% - var(--width) / 2);
top: calc(50% - var(--height) / 2);
display: flex;
align-items: center;
padding: 8px;
border-radius: 4px;
background-color: #ff3e00;
color: #fff;
text-align: center;
font-weight: bold;
}
</style>
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
›
⌄
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
import { clickOutside } from './click_outside.js';
var on_click = (_, showModal) => $.set(showModal, true);
var root_1 = $.template(`<div class="box svelte-130wll1">Click outside me!</div>`);
var root = $.template(`<button>Show Modal</button> <!>`, 1);
export default function App($$anchor) {
let showModal = $.state(true);
var fragment = root();
var button = $.first_child(fragment);
button.__click = [on_click, showModal];
var node = $.sibling(button, 2);
{
var consequent = ($$anchor) => {
var div = root_1();
$.action(div, ($$node) => clickOutside?.($$node));
$.event('outclick', div, () => $.set(showModal, false));
$.append($$anchor, div);
};
$.if(node, ($$render) => {
if ($.get(showModal)) $$render(consequent);
});
}
$.append($$anchor, fragment);
}
$.delegate(['click']);
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
›
.box.svelte-130wll1 {
--width: 100px;
--height: 100px;
position: absolute;
width: var(--width);
height: var(--height);
left: calc(50% - var(--width) / 2);
top: calc(50% - var(--height) / 2);
display: flex;
align-items: center;
padding: 8px;
border-radius: 4px;
background-color: #ff3e00;
color: #fff;
text-align: center;
font-weight: bold;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 288
- end: 663
- attributes: []
children: [...] (1)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 297
- end: 301
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 297
- end: 301
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "box"
- start: 297
- end: 301
}
]- start: 297
- end: 301
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 302
- end: 654
children: [...] (15)
Declaration {...}
- type: "Declaration"
- start: 306
- end: 320
- property: "--width"
- value: "100px"
} Declaration {...}
- type: "Declaration"
- start: 324
- end: 339
- property: "--height"
- value: "100px"
} Declaration {...}
- type: "Declaration"
- start: 343
- end: 361
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 365
- end: 384
- property: "width"
- value: "var(--width)"
} Declaration {...}
- type: "Declaration"
- start: 388
- end: 409
- property: "height"
- value: "var(--height)"
} Declaration {...}
- type: "Declaration"
- start: 413
- end: 447
- property: "left"
- value: "calc(50% - var(--width) / 2)"
} Declaration {...}
- type: "Declaration"
- start: 451
- end: 485
- property: "top"
- value: "calc(50% - var(--height) / 2)"
} Declaration {...}
- type: "Declaration"
- start: 489
- end: 502
- property: "display"
- value: "flex"
} Declaration {...}
- type: "Declaration"
- start: 506
- end: 525
- property: "align-items"
- value: "center"
} Declaration {...}
- type: "Declaration"
- start: 529
- end: 541
- property: "padding"
- value: "8px"
} Declaration {...}
- type: "Declaration"
- start: 545
- end: 563
- property: "border-radius"
- value: "4px"
} Declaration {...}
- type: "Declaration"
- start: 567
- end: 592
- property: "background-color"
- value: "#ff3e00"
} Declaration {...}
- type: "Declaration"
- start: 596
- end: 607
- property: "color"
- value: "#fff"
} Declaration {...}
- type: "Declaration"
- start: 611
- end: 629
- property: "text-align"
- value: "center"
} Declaration {...}
- type: "Declaration"
- start: 633
- end: 650
- property: "font-weight"
- value: "bold"
}
]
}- start: 297
- end: 654
}
]content: {...}
- start: 295
- end: 655
- styles: "\n\t.box {\n\t\t--width: 100px;\n\t\t--height: 100px;\n\t\tposition: absolute;\n\t\twidth: var(--width);\n\t\theight: var(--height);\n\t\tleft: calc(50% - var(--width) / 2);\n\t\ttop: calc(50% - var(--height) / 2);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tborder-radius: 4px;\n\t\tbackground-color: #ff3e00;\n\t\tcolor: #fff;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t}\n"
- comment: null
}
}- js: []
- start: 104
- end: 286
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 102
- end: 104
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 104
- end: 166
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 112
- end: 146
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 120
- end: 146
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 121
- end: 145
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: 128
- end: 144
loc: {...}
start: {...}
- line: 7
- column: 24
}end: {...}
- line: 7
- column: 40
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 128
- end: 137
loc: {...}
start: {...}
- line: 7
- column: 24
}end: {...}
- line: 7
- column: 33
}
}- name: "showModal"
}right: Literal {...}
- type: "Literal"
- start: 140
- end: 144
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: 147
- end: 157
- raw: "Show Modal"
- data: "Show Modal"
}
]
}
} Text {...}
- type: "Text"
- start: 166
- end: 167
- raw: " "
- data: " "
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 167
- end: 286
test: Identifier {...}
- type: "Identifier"
- start: 172
- end: 181
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 14
}
}- name: "showModal"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 182
- end: 184
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 184
- end: 280
- name: "div"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 189
- end: 200
- name: "class"
value: [...] (1)
Text {...}
- start: 196
- end: 199
- type: "Text"
- raw: "box"
- data: "box svelte-130wll1"
}
]
} UseDirective {...}
- start: 201
- end: 217
- type: "UseDirective"
- name: "clickOutside"
- expression: null
- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 218
- end: 256
- name: "onoutclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 229
- end: 256
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 230
- end: 255
loc: {...}
start: {...}
- line: 9
- column: 47
}end: {...}
- line: 9
- column: 72
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 237
- end: 254
loc: {...}
start: {...}
- line: 9
- column: 54
}end: {...}
- line: 9
- column: 71
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 237
- end: 246
loc: {...}
start: {...}
- line: 9
- column: 54
}end: {...}
- line: 9
- column: 63
}
}- name: "showModal"
}right: Literal {...}
- type: "Literal"
- start: 249
- end: 254
loc: {...}
start: {...}
- line: 9
- column: 66
}end: {...}
- line: 9
- column: 71
}
}- value: false
- raw: "false"
}
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 257
- end: 274
- raw: "Click outside me!"
- data: "Click outside me!"
}
]
}
} Text {...}
- type: "Text"
- start: 280
- end: 281
- raw: "\n"
- data: "\n"
}
]
}- alternate: null
} Text {...}
- type: "Text"
- start: 286
- end: 288
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 102
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 93
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 5
- column: 0
}
}body: [...] (2)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 60
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 51
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 22
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 22
}
}- name: "clickOutside"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 22
}
}- name: "clickOutside"
}
}
]source: Literal {...}
- type: "Literal"
- start: 39
- end: 59
loc: {...}
start: {...}
- line: 2
- column: 30
}end: {...}
- line: 2
- column: 50
}
}- value: "./click_outside.js"
- raw: "'./click_outside.js'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 63
- end: 92
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 30
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 67
- end: 91
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 29
}
}id: Identifier {...}
- type: "Identifier"
- start: 67
- end: 76
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 14
}
}- name: "showModal"
}init: CallExpression {...}
- type: "CallExpression"
- start: 79
- end: 91
loc: {...}
start: {...}
- line: 4
- column: 17
}end: {...}
- line: 4
- column: 29
}
}callee: Identifier {...}
- type: "Identifier"
- start: 79
- end: 85
loc: {...}
start: {...}
- line: 4
- column: 17
}end: {...}
- line: 4
- column: 23
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 86
- end: 90
loc: {...}
start: {...}
- line: 4
- column: 24
}end: {...}
- line: 4
- column: 28
}
}- value: true
- raw: "true"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time