Click Outside • Playground • Svelte

App.svelte
function clickOutside(node, { enabled: initialEnabled, cb }) {
const handleOutsideClick = ({ target }) => {
if (!node.contains(target)) {
cb();
}
};
function update({enabled}) {
if (enabled) {
window.addEventListener('click', handleOutsideClick);
} else {
window.removeEventListener('click', handleOutsideClick);
}
update({ enabled: initialEnabled });
return {
update,
destroy() {
window.removeEventListener( 'click', handleOutsideClick );
}
};
}
let open = true;
</script>
<div use:clickOutside={{ enabled: open, cb: () => open = false }} style="border:solid 1px;border-color:black;width:200px">
{#if open}
<span>
Opened
</span>
{/if}
</div>
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
var root_1 = $.template(`<span>Opened</span>`);
var root = $.template(`<div style="border:solid 1px;border-color:black;width:200px"><button>Open</button> <!></div> <p>Click outside the box to close!</p>`, 1);
export default function App($$anchor) {
function clickOutside(node, { enabled: initialEnabled, cb }) {
const handleOutsideClick = ({ target }) => {
if (!node.contains(target)) {
cb();
}
};
function update({ enabled }) {
if (enabled) {
window.addEventListener('click', handleOutsideClick);
} else {
window.removeEventListener('click', handleOutsideClick);
}
update({ enabled: initialEnabled });
return {
update,
destroy() {
window.removeEventListener('click', handleOutsideClick);
}
};
}
let open = $.mutable_state(true);
var fragment = root();
var div = $.first_child(fragment);
result = svelte.compile(source, {
generate: "client" "server",
dev: false });
/* Add a <style> tag to see the CSS output */
		
			
				
					 Root {
 css: null
js: []
start: 601
end: 885
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Text {...}
 type: "Text"
start: 599
end: 601
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 601
end: 842
name: "div"
attributes: [...] (2)
  UseDirective {...}
 start: 606
end: 666
type: "UseDirective"
name: "clickOutside"
expression: ObjectExpression {...}
 type: "ObjectExpression"
start: 624
end: 665
loc:  {...}
 start:  {...}
 line: 29
column: 23
 }
end:  {...}
 line: 29
column: 64
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 626
end: 639
loc:  {...}
 start:  {...}
 line: 29
column: 25
 }
end:  {...}
 line: 29
column: 38
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 626
end: 633
loc:  {...}
 start:  {...}
 line: 29
column: 25
 }
end:  {...}
 line: 29
column: 32
 }
 }
name: "enabled"
 }
value: Identifier {...}
 type: "Identifier"
start: 635
end: 639
loc:  {...}
 start:  {...}
 line: 29
column: 34
 }
end:  {...}
 line: 29
column: 38
 }
 }
name: "open"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 641
end: 663
loc:  {...}
 start:  {...}
 line: 29
column: 40
 }
end:  {...}
 line: 29
column: 62
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 641
end: 643
loc:  {...}
 start:  {...}
 line: 29
column: 40
 }
end:  {...}
 line: 29
column: 42
 }
 }
name: "cb"
 }
value: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 645
end: 663
loc:  {...}
 start:  {...}
 line: 29
column: 44
 }
end:  {...}
 line: 29
column: 62
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 651
end: 663
loc:  {...}
 start:  {...}
 line: 29
column: 50
 }
end:  {...}
 line: 29
column: 62
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 651
end: 655
loc:  {...}
 start:  {...}
 line: 29
column: 50
 }
end:  {...}
 line: 29
column: 54
 }
 }
name: "open"
 }
right: Literal {...}
 type: "Literal"
start: 658
end: 663
loc:  {...}
 start:  {...}
 line: 29
column: 57
 }
end:  {...}
 line: 29
column: 62
 }
 }
value: false
raw: "false"
 }
 }
 }
kind: "init"
 }
 ]
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 667
end: 722
name: "style"
value: [...] (1)
  Text {...}
 start: 674
end: 721
type: "Text"
raw: "border:solid 1px;border-color:black;width:200px"
data: "border:solid 1px;border-color:black;width:200px"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 723
end: 727
raw: "\n   "
data: "\n   "
 }
 RegularElement {...}
 type: "RegularElement"
start: 727
end: 777
name: "button"
attributes: [...] (1)
  OnDirective {...}
 start: 735
end: 763
type: "OnDirective"
name: "click"
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 745
end: 762
loc:  {...}
 start:  {...}
 line: 30
column: 21
 }
end:  {...}
 line: 30
column: 38
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 751
end: 762
loc:  {...}
 start:  {...}
 line: 30
column: 27
 }
end:  {...}
 line: 30
column: 38
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 751
end: 755
loc:  {...}
 start:  {...}
 line: 30
column: 27
 }
end:  {...}
 line: 30
column: 31
 }
 }
name: "open"
 }
right: Literal {...}
 type: "Literal"
start: 758
end: 762
loc:  {...}
 start:  {...}
 line: 30
column: 34
 }
end:  {...}
 line: 30
column: 38
 }
 }
value: true
raw: "true"
 }
 }
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 764
end: 768
raw: "Open"
data: "Open"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 777
end: 781
raw: " "
data: " "
 }
 IfBlock {...}
 type: "IfBlock"
elseif: false
start: 781
end: 835
test: Identifier {...}
 type: "Identifier"
start: 786
end: 790
loc:  {...}
 start:  {...}
 line: 31
column: 8
 }
end:  {...}
 line: 31
column: 12
 }
 }
name: "open"
 }
consequent: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 791
end: 796
raw: "\n    "
data: "\n    "
 }
 RegularElement {...}
 type: "RegularElement"
start: 796
end: 827
name: "span"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 802
end: 820
raw: "Opened"
data: "Opened"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 827
end: 830
raw: "\n  "
data: "\n  "
 }
 ]
 }
alternate: null
 }
 Text {...}
 type: "Text"
start: 835
end: 836
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 842
end: 844
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 844
end: 885
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 847
end: 881
raw: "Click outside the box to close!"
data: "Click outside the box to close!"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 599
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 590
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 27
column: 0
 }
 }
body: [...] (2)
  FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 9
end: 569
loc:  {...}
 start:  {...}
 line: 2
column: 0
 }
end:  {...}
 line: 24
column: 3
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 18
end: 30
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 21
 }
 }
name: "clickOutside"
 }
expression: false
generator: false
async: false
params: [...] (2)
  Identifier {...}
 type: "Identifier"
start: 31
end: 35
loc:  {...}
 start:  {...}
 line: 2
column: 22
 }
end:  {...}
 line: 2
column: 26
 }
 }
name: "node"
 }
 ObjectPattern {...}
 type: "ObjectPattern"
start: 37
end: 68
loc:  {...}
 start:  {...}
 line: 2
column: 28
 }
end:  {...}
 line: 2
column: 59
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 39
end: 62
loc:  {...}
 start:  {...}
 line: 2
column: 30
 }
end:  {...}
 line: 2
column: 53
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 39
end: 46
loc:  {...}
 start:  {...}
 line: 2
column: 30
 }
end:  {...}
 line: 2
column: 37
 }
 }
name: "enabled"
 }
value: Identifier {...}
 type: "Identifier"
start: 48
end: 62
loc:  {...}
 start:  {...}
 line: 2
column: 39
 }
end:  {...}
 line: 2
column: 53
 }
 }
name: "initialEnabled"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 64
end: 66
loc:  {...}
 start:  {...}
 line: 2
column: 55
 }
end:  {...}
 line: 2
column: 57
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 64
end: 66
loc:  {...}
 start:  {...}
 line: 2
column: 55
 }
end:  {...}
 line: 2
column: 57
 }
 }
name: "cb"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 64
end: 66
loc:  {...}
 start:  {...}
 line: 2
column: 55
 }
end:  {...}
 line: 2
column: 57
 }
 }
name: "cb"
 }
 }
 ]
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 70
end: 569
loc:  {...}
 start:  {...}
 line: 2
column: 61
 }
end:  {...}
 line: 24
column: 3
 }
 }
body: [...] (4)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 76
end: 185
loc:  {...}
 start:  {...}
 line: 3
column: 4
 }
end:  {...}
 line: 7
column: 6
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 82
end: 184
loc:  {...}
 start:  {...}
 line: 3
column: 10
 }
end:  {...}
 line: 7
column: 5
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 82
end: 100
loc:  {...}
 start:  {...}
 line: 3
column: 10
 }
end:  {...}
 line: 3
column: 28
 }
 }
name: "handleOutsideClick"
 }
init: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 103
end: 184
loc:  {...}
 start:  {...}
 line: 3
column: 31
 }
end:  {...}
 line: 7
column: 5
 }
 }
id: null
expression: false
generator: false
async: false
params: [...] (1)
  ObjectPattern {...}
 type: "ObjectPattern"
start: 104
end: 114
loc:  {...}
 start:  {...}
 line: 3
column: 32
 }
end:  {...}
 line: 3
column: 42
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 106
end: 112
loc:  {...}
 start:  {...}
 line: 3
column: 34
 }
end:  {...}
 line: 3
column: 40
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 106
end: 112
loc:  {...}
 start:  {...}
 line: 3
column: 34
 }
end:  {...}
 line: 3
column: 40
 }
 }
name: "target"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 106
end: 112
loc:  {...}
 start:  {...}
 line: 3
column: 34
 }
end:  {...}
 line: 3
column: 40
 }
 }
name: "target"
 }
 }
 ]
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 119
end: 184
loc:  {...}
 start:  {...}
 line: 3
column: 47
 }
end:  {...}
 line: 7
column: 5
 }
 }
body: [...] (1)
  IfStatement {...}
 type: "IfStatement"
start: 127
end: 178
loc:  {...}
 start:  {...}
 line: 4
column: 6
 }
end:  {...}
 line: 6
column: 7
 }
 }
test: UnaryExpression {...}
 type: "UnaryExpression"
start: 131
end: 153
loc:  {...}
 start:  {...}
 line: 4
column: 10
 }
end:  {...}
 line: 4
column: 32
 }
 }
operator: "!"
prefix: true
argument: CallExpression {...}
 type: "CallExpression"
start: 132
end: 153
loc:  {...}
 start:  {...}
 line: 4
column: 11
 }
end:  {...}
 line: 4
column: 32
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 132
end: 145
loc:  {...}
 start:  {...}
 line: 4
column: 11
 }
end:  {...}
 line: 4
column: 24
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 132
end: 136
loc:  {...}
 start:  {...}
 line: 4
column: 11
 }
end:  {...}
 line: 4
column: 15
 }
 }
name: "node"
 }
property: Identifier {...}
 type: "Identifier"
start: 137
end: 145
loc:  {...}
 start:  {...}
 line: 4
column: 16
 }
end:  {...}
 line: 4
column: 24
 }
 }
name: "contains"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 146
end: 152
loc:  {...}
 start:  {...}
 line: 4
column: 25
 }
end:  {...}
 line: 4
column: 31
 }
 }
name: "target"
 }
 ]
optional: false
 }
 }
consequent: BlockStatement {...}
 type: "BlockStatement"
start: 155
end: 178
loc:  {...}
 start:  {...}
 line: 4
column: 34
 }
end:  {...}
 line: 6
column: 7
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 165
end: 170
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 13
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 165
end: 169
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 12
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 165
end: 167
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 10
 }
 }
name: "cb"
 }
arguments: []
optional: false
 }
 }
 ]
 }
alternate: null
 }
 ]
 }
 }
 }
 ]
kind: "const"
 }
 FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 191
end: 396
loc:  {...}
 start:  {...}
 line: 9
column: 4
 }
end:  {...}
 line: 15
column: 5
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 200
end: 206
loc:  {...}
 start:  {...}
 line: 9
column: 13
 }
end:  {...}
 line: 9
column: 19
 }
 }
name: "update"
 }
expression: false
generator: false
async: false
params: [...] (1)
  ObjectPattern {...}
 type: "ObjectPattern"
start: 207
end: 216
loc:  {...}
 start:  {...}
 line: 9
column: 20
 }
end:  {...}
 line: 9
column: 29
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 208
end: 215
loc:  {...}
 start:  {...}
 line: 9
column: 21
 }
end:  {...}
 line: 9
column: 28
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 208
end: 215
loc:  {...}
 start:  {...}
 line: 9
column: 21
 }
end:  {...}
 line: 9
column: 28
 }
 }
name: "enabled"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 208
end: 215
loc:  {...}
 start:  {...}
 line: 9
column: 21
 }
end:  {...}
 line: 9
column: 28
 }
 }
name: "enabled"
 }
 }
 ]
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 218
end: 396
loc:  {...}
 start:  {...}
 line: 9
column: 31
 }
end:  {...}
 line: 15
column: 5
 }
 }
body: [...] (1)
  IfStatement {...}
 type: "IfStatement"
start: 226
end: 390
loc:  {...}
 start:  {...}
 line: 10
column: 6
 }
end:  {...}
 line: 14
column: 7
 }
 }
test: Identifier {...}
 type: "Identifier"
start: 230
end: 237
loc:  {...}
 start:  {...}
 line: 10
column: 10
 }
end:  {...}
 line: 10
column: 17
 }
 }
name: "enabled"
 }
consequent: BlockStatement {...}
 type: "BlockStatement"
start: 239
end: 310
loc:  {...}
 start:  {...}
 line: 10
column: 19
 }
end:  {...}
 line: 12
column: 7
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 249
end: 302
loc:  {...}
 start:  {...}
 line: 11
column: 8
 }
end:  {...}
 line: 11
column: 61
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 249
end: 301
loc:  {...}
 start:  {...}
 line: 11
column: 8
 }
end:  {...}
 line: 11
column: 60
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 249
end: 272
loc:  {...}
 start:  {...}
 line: 11
column: 8
 }
end:  {...}
 line: 11
column: 31
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 249
end: 255
loc:  {...}
 start:  {...}
 line: 11
column: 8
 }
end:  {...}
 line: 11
column: 14
 }
 }
name: "window"
 }
property: Identifier {...}
 type: "Identifier"
start: 256
end: 272
loc:  {...}
 start:  {...}
 line: 11
column: 15
 }
end:  {...}
 line: 11
column: 31
 }
 }
name: "addEventListener"
 }
computed: false
optional: false
 }
arguments: [...] (2)
  Literal {...}
 type: "Literal"
start: 273
end: 280
loc:  {...}
 start:  {...}
 line: 11
column: 32
 }
end:  {...}
 line: 11
column: 39
 }
 }
value: "click"
raw: "'click'"
 }
 Identifier {...}
 type: "Identifier"
start: 282
end: 300
loc:  {...}
 start:  {...}
 line: 11
column: 41
 }
end:  {...}
 line: 11
column: 59
 }
 }
name: "handleOutsideClick"
 }
 ]
optional: false
 }
 }
 ]
 }
alternate: BlockStatement {...}
 type: "BlockStatement"
start: 316
end: 390
loc:  {...}
 start:  {...}
 line: 12
column: 13
 }
end:  {...}
 line: 14
column: 7
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 326
end: 382
loc:  {...}
 start:  {...}
 line: 13
column: 8
 }
end:  {...}
 line: 13
column: 64
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 326
end: 381
loc:  {...}
 start:  {...}
 line: 13
column: 8
 }
end:  {...}
 line: 13
column: 63
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 326
end: 352
loc:  {...}
 start:  {...}
 line: 13
column: 8
 }
end:  {...}
 line: 13
column: 34
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 326
end: 332
loc:  {...}
 start:  {...}
 line: 13
column: 8
 }
end:  {...}
 line: 13
column: 14
 }
 }
name: "window"
 }
property: Identifier {...}
 type: "Identifier"
start: 333
end: 352
loc:  {...}
 start:  {...}
 line: 13
column: 15
 }
end:  {...}
 line: 13
column: 34
 }
 }
name: "removeEventListener"
 }
computed: false
optional: false
 }
arguments: [...] (2)
  Literal {...}
 type: "Literal"
start: 353
end: 360
loc:  {...}
 start:  {...}
 line: 13
column: 35
 }
end:  {...}
 line: 13
column: 42
 }
 }
value: "click"
raw: "'click'"
 }
 Identifier {...}
 type: "Identifier"
start: 362
end: 380
loc:  {...}
 start:  {...}
 line: 13
column: 44
 }
end:  {...}
 line: 13
column: 62
 }
 }
name: "handleOutsideClick"
 }
 ]
optional: false
 }
 }
 ]
 }
 }
 ]
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 402
end: 438
loc:  {...}
 start:  {...}
 line: 17
column: 4
 }
end:  {...}
 line: 17
column: 40
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 402
end: 437
loc:  {...}
 start:  {...}
 line: 17
column: 4
 }
end:  {...}
 line: 17
column: 39
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 402
end: 408
loc:  {...}
 start:  {...}
 line: 17
column: 4
 }
end:  {...}
 line: 17
column: 10
 }
 }
name: "update"
 }
arguments: [...] (1)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 409
end: 436
loc:  {...}
 start:  {...}
 line: 17
column: 11
 }
end:  {...}
 line: 17
column: 38
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 411
end: 434
loc:  {...}
 start:  {...}
 line: 17
column: 13
 }
end:  {...}
 line: 17
column: 36
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 411
end: 418
loc:  {...}
 start:  {...}
 line: 17
column: 13
 }
end:  {...}
 line: 17
column: 20
 }
 }
name: "enabled"
 }
value: Identifier {...}
 type: "Identifier"
start: 420
end: 434
loc:  {...}
 start:  {...}
 line: 17
column: 22
 }
end:  {...}
 line: 17
column: 36
 }
 }
name: "initialEnabled"
 }
kind: "init"
 }
 ]
 }
 ]
optional: false
 }
 }
 ReturnStatement {...}
 type: "ReturnStatement"
start: 443
end: 565
loc:  {...}
 start:  {...}
 line: 18
column: 4
 }
end:  {...}
 line: 23
column: 6
 }
 }
argument: ObjectExpression {...}
 type: "ObjectExpression"
start: 450
end: 564
loc:  {...}
 start:  {...}
 line: 18
column: 11
 }
end:  {...}
 line: 23
column: 5
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 458
end: 464
loc:  {...}
 start:  {...}
 line: 19
column: 6
 }
end:  {...}
 line: 19
column: 12
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 458
end: 464
loc:  {...}
 start:  {...}
 line: 19
column: 6
 }
end:  {...}
 line: 19
column: 12
 }
 }
name: "update"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 458
end: 464
loc:  {...}
 start:  {...}
 line: 19
column: 6
 }
end:  {...}
 line: 19
column: 12
 }
 }
name: "update"
 }
 }
 Property {...}
 type: "Property"
start: 472
end: 558
loc:  {...}
 start:  {...}
 line: 20
column: 6
 }
end:  {...}
 line: 22
column: 7
 }
 }
method: true
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 472
end: 479
loc:  {...}
 start:  {...}
 line: 20
column: 6
 }
end:  {...}
 line: 20
column: 13
 }
 }
name: "destroy"
 }
kind: "init"
value: FunctionExpression {...}
 type: "FunctionExpression"
start: 479
end: 558
loc:  {...}
 start:  {...}
 line: 20
column: 13
 }
end:  {...}
 line: 22
column: 7
 }
 }
id: null
expression: false
generator: false
async: false
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 482
end: 558
loc:  {...}
 start:  {...}
 line: 20
column: 16
 }
end:  {...}
 line: 22
column: 7
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 492
end: 550
loc:  {...}
 start:  {...}
 line: 21
column: 8
 }
end:  {...}
 line: 21
column: 66
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 492
end: 549
loc:  {...}
 start:  {...}
 line: 21
column: 8
 }
end:  {...}
 line: 21
column: 65
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 492
end: 518
loc:  {...}
 start:  {...}
 line: 21
column: 8
 }
end:  {...}
 line: 21
column: 34
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 492
end: 498
loc:  {...}
 start:  {...}
 line: 21
column: 8
 }
end:  {...}
 line: 21
column: 14
 }
 }
name: "window"
 }
property: Identifier {...}
 type: "Identifier"
start: 499
end: 518
loc:  {...}
 start:  {...}
 line: 21
column: 15
 }
end:  {...}
 line: 21
column: 34
 }
 }
name: "removeEventListener"
 }
computed: false
optional: false
 }
arguments: [...] (2)
  Literal {...}
 type: "Literal"
start: 520
end: 527
loc:  {...}
 start:  {...}
 line: 21
column: 36
 }
end:  {...}
 line: 21
column: 43
 }
 }
value: "click"
raw: "'click'"
 }
 Identifier {...}
 type: "Identifier"
start: 529
end: 547
loc:  {...}
 start:  {...}
 line: 21
column: 45
 }
end:  {...}
 line: 21
column: 63
 }
 }
name: "handleOutsideClick"
 }
 ]
optional: false
 }
 }
 ]
 }
 }
 }
 ]
 }
 }
 ]
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 573
end: 589
loc:  {...}
 start:  {...}
 line: 26
column: 2
 }
end:  {...}
 line: 26
column: 18
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 577
end: 588
loc:  {...}
 start:  {...}
 line: 26
column: 6
 }
end:  {...}
 line: 26
column: 17
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 577
end: 581
loc:  {...}
 start:  {...}
 line: 26
column: 6
 }
end:  {...}
 line: 26
column: 10
 }
 }
name: "open"
 }
init: Literal {...}
 type: "Literal"
start: 584
end: 588
loc:  {...}
 start:  {...}
 line: 26
column: 13
 }
end:  {...}
 line: 26
column: 17
 }
 }
value: true
raw: "true"
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }
The AST is not public API and may change at any point in time
modern