Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
CodeEditor.svelte
parser.js
styler.js
utils.js
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.32.0.
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 { parseHtml, parseCss } from './parser.js';
import { getLog } from './styler.js';
import { stringify } from './utils.js';
import CodeEditor from './CodeEditor.svelte';
let html = '';
$: parsedHtml = parseHtml(html)?.data ?? [];
let css = '';
$: parsedCss = parseCss(css);
$: log = getLog(parsedHtml, parsedCss);
$: logStr = `console.log(${log.map(str => `"${str}"`).join(', ')})`;
let inputEl;
function copyLog() {
inputEl.select();
document.execCommand("copy");
}
</script>
<h1>HTML</h1>
<section>
<CodeEditor bind:value={html} />
<div>
{#each parsedHtml as block}
<div>
{stringify(block)}
</div>
{/each}
</div>
</section>
<h1>CSS</h1>
<section>
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
999
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
›
⌄
/* App.svelte generated by Svelte v3.32.0 */
import {
SvelteComponent,
add_flush_callback,
append,
attr,
bind,
binding_callbacks,
create_component,
destroy_component,
destroy_each,
detach,
element,
globals,
init,
insert,
listen,
mount_component,
safe_not_equal,
set_data,
space,
text,
transition_in,
transition_out
} from "svelte/internal";
const { document: document_1 } = globals;
import { parseHtml, parseCss } from "./parser.js";
import { getLog } from "./styler.js";
import { stringify } from "./utils.js";
import CodeEditor from "./CodeEditor.svelte";
function add_css() {
var style = element("style");
style.id = "svelte-ng29mc-style";
style.textContent = "section.svelte-ng29mc{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px}input.svelte-ng29mc{padding:10px;border-radius:8px;background:#eee}";
result = svelte.compile(source, {
generate: ,
});9
1
›
section.svelte-ng29mc{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px}input.svelte-ng29mc{padding:10px;border-radius:8px;background:#eee}
{
html: Fragment {...}
- start: 517
- end: 939
- type: "Fragment"
children: [...] (15)
Text {...}
- start: 515
- end: 517
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 517
- end: 530
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 521
- end: 525
- type: "Text"
- raw: "HTML"
- data: "HTML"
}
]
} Text {...}
- start: 530
- end: 531
- type: "Text"
- raw: "\n"
- data: "\n"
} Element {...}
- start: 531
- end: 682
- type: "Element"
- name: "section"
- attributes: []
children: [...] (5)
Text {...}
- start: 540
- end: 542
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} InlineComponent {...}
- start: 542
- end: 574
- type: "InlineComponent"
- name: "CodeEditor"
attributes: [...] (1)
Binding {...}
- start: 554
- end: 571
- type: "Binding"
- name: "value"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 566
- end: 570
loc: {...}
start: {...}
- line: 25
- column: 25
}end: {...}
- line: 25
- column: 29
}
}- name: "html"
}
}
]- children: []
} Text {...}
- start: 574
- end: 576
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 576
- end: 671
- type: "Element"
- name: "div"
- attributes: []
children: [...] (3)
Text {...}
- start: 581
- end: 584
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} EachBlock {...}
- start: 584
- end: 663
- type: "EachBlock"
expression: Identifier {...}
- type: "Identifier"
- start: 591
- end: 601
loc: {...}
start: {...}
- line: 27
- column: 9
}end: {...}
- line: 27
- column: 19
}
}- name: "parsedHtml"
}children: [...] (1)
Element {...}
- start: 615
- end: 653
- type: "Element"
- name: "div"
- attributes: []
children: [...] (3)
Text {...}
- start: 620
- end: 625
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} MustacheTag {...}
- start: 625
- end: 643
- type: "MustacheTag"
expression: CallExpression {...}
- type: "CallExpression"
- start: 626
- end: 642
loc: {...}
start: {...}
- line: 29
- column: 5
}end: {...}
- line: 29
- column: 21
}
}callee: Identifier {...}
- type: "Identifier"
- start: 626
- end: 635
loc: {...}
start: {...}
- line: 29
- column: 5
}end: {...}
- line: 29
- column: 14
}
}- name: "stringify"
}arguments: [...] (1)
MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 29
- column: 15
}end: {...}
- line: 29
- column: 20
}
}
}property: Literal {...}
- type: "Literal"
- value: 11
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "block"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}
]- optional: false
}
} Text {...}
- start: 643
- end: 647
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}
]context: Identifier {...}
- type: "Identifier"
- name: "block"
- start: 605
- end: 610
}
} Text {...}
- start: 663
- end: 665
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 671
- end: 672
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 682
- end: 684
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 684
- end: 696
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 688
- end: 691
- type: "Text"
- raw: "CSS"
- data: "CSS"
}
]
} Text {...}
- start: 696
- end: 697
- type: "Text"
- raw: "\n"
- data: "\n"
} Element {...}
- start: 697
- end: 846
- type: "Element"
- name: "section"
- attributes: []
children: [...] (5)
Text {...}
- start: 706
- end: 708
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} InlineComponent {...}
- start: 708
- end: 739
- type: "InlineComponent"
- name: "CodeEditor"
attributes: [...] (1)
Binding {...}
- start: 720
- end: 736
- type: "Binding"
- name: "value"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 732
- end: 735
loc: {...}
start: {...}
- line: 37
- column: 25
}end: {...}
- line: 37
- column: 28
}
}- name: "css"
}
}
]- children: []
} Text {...}
- start: 739
- end: 741
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 741
- end: 835
- type: "Element"
- name: "div"
- attributes: []
children: [...] (3)
Text {...}
- start: 746
- end: 749
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} EachBlock {...}
- start: 749
- end: 827
- type: "EachBlock"
expression: Identifier {...}
- type: "Identifier"
- start: 756
- end: 765
loc: {...}
start: {...}
- line: 39
- column: 9
}end: {...}
- line: 39
- column: 18
}
}- name: "parsedCss"
}children: [...] (1)
Element {...}
- start: 779
- end: 817
- type: "Element"
- name: "div"
- attributes: []
children: [...] (3)
Text {...}
- start: 784
- end: 789
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} MustacheTag {...}
- start: 789
- end: 807
- type: "MustacheTag"
expression: CallExpression {...}
- type: "CallExpression"
- start: 790
- end: 806
loc: {...}
start: {...}
- line: 41
- column: 5
}end: {...}
- line: 41
- column: 21
}
}callee: Identifier {...}
- type: "Identifier"
- start: 790
- end: 799
loc: {...}
start: {...}
- line: 41
- column: 5
}end: {...}
- line: 41
- column: 14
}
}- name: "stringify"
}arguments: [...] (1)
MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 41
- column: 15
}end: {...}
- line: 41
- column: 20
}
}
}property: Literal {...}
- type: "Literal"
- value: 11
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "block"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}
]- optional: false
}
} Text {...}
- start: 807
- end: 811
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}
]context: Identifier {...}
- type: "Identifier"
- name: "block"
- start: 769
- end: 774
}
} Text {...}
- start: 827
- end: 829
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 835
- end: 836
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 846
- end: 848
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 848
- end: 852
- type: "Element"
- name: "br"
- attributes: []
- children: []
} Text {...}
- start: 852
- end: 853
- type: "Text"
- raw: "\n"
- data: "\n"
} Element {...}
- start: 853
- end: 895
- type: "Element"
- name: "input"
attributes: [...] (2)
Attribute {...}
- start: 860
- end: 874
- type: "Attribute"
- name: "value"
value: [...] (1)
MustacheTag {...}
- start: 866
- end: 874
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 867
- end: 873
loc: {...}
start: {...}
- line: 48
- column: 14
}end: {...}
- line: 48
- column: 20
}
}- name: "logStr"
}
}
]
} Binding {...}
- start: 875
- end: 894
- type: "Binding"
- name: "this"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 886
- end: 893
loc: {...}
start: {...}
- line: 48
- column: 33
}end: {...}
- line: 48
- column: 40
}
}- name: "inputEl"
}
}
]- children: []
} Text {...}
- start: 895
- end: 896
- type: "Text"
- raw: "\n"
- data: "\n"
} Element {...}
- start: 896
- end: 939
- type: "Element"
- name: "button"
attributes: [...] (1)
EventHandler {...}
- start: 904
- end: 922
- type: "EventHandler"
- name: "click"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 914
- end: 921
loc: {...}
start: {...}
- line: 49
- column: 18
}end: {...}
- line: 49
- column: 25
}
}- name: "copyLog"
}
}
]children: [...] (1)
Text {...}
- start: 923
- end: 930
- type: "Text"
- raw: "\n\tCopy\n"
- data: "\n\tCopy\n"
}
]
} Text {...}
- start: 939
- end: 941
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
}
]
}css: Style {...}
- type: "Style"
- start: 941
- end: 1111
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "section"
- start: 950
- end: 957
}
]- start: 950
- end: 957
}
]- start: 950
- end: 957
}block: Block {...}
- type: "Block"
children: [...] (3)
Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "grid"
- start: 971
- end: 975
}
]- start: 970
- end: 975
}- start: 962
- end: 975
} Declaration {...}
- type: "Declaration"
- important: false
- property: "grid-template-columns"
value: Value {...}
- type: "Value"
children: [...] (3)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "fr"
- start: 1002
- end: 1005
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "fr"
- start: 1006
- end: 1009
}
]- start: 1001
- end: 1009
}- start: 979
- end: 1009
} Declaration {...}
- type: "Declaration"
- important: false
- property: "grid-gap"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "10"
- unit: "px"
- start: 1023
- end: 1027
}
]- start: 1022
- end: 1027
}- start: 1013
- end: 1027
}
]- start: 958
- end: 1031
}- start: 950
- end: 1031
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "input"
- start: 1033
- end: 1038
}
]- start: 1033
- end: 1038
}
]- start: 1033
- end: 1038
}block: Block {...}
- type: "Block"
children: [...] (3)
Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "10"
- unit: "px"
- start: 1052
- end: 1056
}
]- start: 1051
- end: 1056
}- start: 1043
- end: 1056
} Declaration {...}
- type: "Declaration"
- important: false
- property: "border-radius"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "8"
- unit: "px"
- start: 1075
- end: 1078
}
]- start: 1074
- end: 1078
}- start: 1060
- end: 1078
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background"
value: Value {...}
- type: "Value"
children: [...] (1)
HexColor {...}
- type: "HexColor"
- value: "eee"
- start: 1094
- end: 1098
}
]- start: 1093
- end: 1098
}- start: 1082
- end: 1098
}
]- start: 1039
- end: 1102
}- start: 1033
- end: 1102
}
]content: {...}
- start: 948
- end: 1103
- styles: "\n\tsection {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr 1fr;\n\t\tgrid-gap: 10px;\n\t}\n\tinput {\n\t\tpadding: 10px;\n\t\tborder-radius: 8px;\n\t\tbackground: #eee;\n\t}\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 515
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 506
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 21
- column: 0
}
}body: [...] (12)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 60
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 51
}
}specifiers: [...] (2)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 19
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 19
}
}- name: "parseHtml"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 19
}
}- name: "parseHtml"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 30
- end: 38
loc: {...}
start: {...}
- line: 2
- column: 21
}end: {...}
- line: 2
- column: 29
}
}imported: Identifier {...}
- type: "Identifier"
- start: 30
- end: 38
loc: {...}
start: {...}
- line: 2
- column: 21
}end: {...}
- line: 2
- column: 29
}
}- name: "parseCss"
}local: Identifier {...}
- type: "Identifier"
- start: 30
- end: 38
loc: {...}
start: {...}
- line: 2
- column: 21
}end: {...}
- line: 2
- column: 29
}
}- name: "parseCss"
}
}
]source: Literal {...}
- type: "Literal"
- start: 46
- end: 59
loc: {...}
start: {...}
- line: 2
- column: 37
}end: {...}
- line: 2
- column: 50
}
}- value: "./parser.js"
- raw: "'./parser.js'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 62
- end: 99
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 38
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 71
- end: 77
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 16
}
}imported: Identifier {...}
- type: "Identifier"
- start: 71
- end: 77
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 16
}
}- name: "getLog"
}local: Identifier {...}
- type: "Identifier"
- start: 71
- end: 77
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 16
}
}- name: "getLog"
}
}
]source: Literal {...}
- type: "Literal"
- start: 85
- end: 98
loc: {...}
start: {...}
- line: 3
- column: 24
}end: {...}
- line: 3
- column: 37
}
}- value: "./styler.js"
- raw: "'./styler.js'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 101
- end: 140
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 40
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 110
- end: 119
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 19
}
}imported: Identifier {...}
- type: "Identifier"
- start: 110
- end: 119
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 19
}
}- name: "stringify"
}local: Identifier {...}
- type: "Identifier"
- start: 110
- end: 119
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 19
}
}- name: "stringify"
}
}
]source: Literal {...}
- type: "Literal"
- start: 127
- end: 139
loc: {...}
start: {...}
- line: 4
- column: 27
}end: {...}
- line: 4
- column: 39
}
}- value: "./utils.js"
- raw: "'./utils.js'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 142
- end: 187
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 46
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 149
- end: 159
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 18
}
}local: Identifier {...}
- type: "Identifier"
- start: 149
- end: 159
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 18
}
}- name: "CodeEditor"
}
}
]source: Literal {...}
- type: "Literal"
- start: 165
- end: 186
loc: {...}
start: {...}
- line: 5
- column: 24
}end: {...}
- line: 5
- column: 45
}
}- value: "./CodeEditor.svelte"
- raw: "'./CodeEditor.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 191
- end: 205
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 15
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 195
- end: 204
loc: {...}
start: {...}
- line: 7
- column: 5
}end: {...}
- line: 7
- column: 14
}
}id: Identifier {...}
- type: "Identifier"
- start: 195
- end: 199
loc: {...}
start: {...}
- line: 7
- column: 5
}end: {...}
- line: 7
- column: 9
}
}- name: "html"
}init: Literal {...}
- type: "Literal"
- start: 202
- end: 204
loc: {...}
start: {...}
- line: 7
- column: 12
}end: {...}
- line: 7
- column: 14
}
}- value: ""
- raw: "''"
}
}
]- kind: "let"
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 207
- end: 251
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 45
}
}body: ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 210
- end: 251
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 45
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 210
- end: 250
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 44
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 210
- end: 220
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 14
}
}- name: "parsedHtml"
}right: LogicalExpression {...}
- type: "LogicalExpression"
- start: 223
- end: 250
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 44
}
}left: ChainExpression {...}
- type: "ChainExpression"
- start: 223
- end: 244
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 38
}
}expression: MemberExpression {...}
- type: "MemberExpression"
- start: 223
- end: 244
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 38
}
}object: CallExpression {...}
- type: "CallExpression"
- start: 223
- end: 238
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 32
}
}callee: Identifier {...}
- type: "Identifier"
- start: 223
- end: 232
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 26
}
}- name: "parseHtml"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 233
- end: 237
loc: {...}
start: {...}
- line: 8
- column: 27
}end: {...}
- line: 8
- column: 31
}
}- name: "html"
}
]- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 240
- end: 244
loc: {...}
start: {...}
- line: 8
- column: 34
}end: {...}
- line: 8
- column: 38
}
}- name: "data"
}- computed: false
- optional: true
}
}- operator: "??"
right: ArrayExpression {...}
- type: "ArrayExpression"
- start: 248
- end: 250
loc: {...}
start: {...}
- line: 8
- column: 42
}end: {...}
- line: 8
- column: 44
}
}- elements: []
}
}
}
}label: Identifier {...}
- type: "Identifier"
- start: 207
- end: 208
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 2
}
}- name: "$"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 255
- end: 268
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 14
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 259
- end: 267
loc: {...}
start: {...}
- line: 10
- column: 5
}end: {...}
- line: 10
- column: 13
}
}id: Identifier {...}
- type: "Identifier"
- start: 259
- end: 262
loc: {...}
start: {...}
- line: 10
- column: 5
}end: {...}
- line: 10
- column: 8
}
}- name: "css"
}init: Literal {...}
- type: "Literal"
- start: 265
- end: 267
loc: {...}
start: {...}
- line: 10
- column: 11
}end: {...}
- line: 10
- column: 13
}
}- value: ""
- raw: "''"
}
}
]- kind: "let"
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 270
- end: 299
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 11
- column: 30
}
}body: ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 273
- end: 299
loc: {...}
start: {...}
- line: 11
- column: 4
}end: {...}
- line: 11
- column: 30
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 273
- end: 298
loc: {...}
start: {...}
- line: 11
- column: 4
}end: {...}
- line: 11
- column: 29
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 273
- end: 282
loc: {...}
start: {...}
- line: 11
- column: 4
}end: {...}
- line: 11
- column: 13
}
}- name: "parsedCss"
}right: CallExpression {...}
- type: "CallExpression"
- start: 285
- end: 298
loc: {...}
start: {...}
- line: 11
- column: 16
}end: {...}
- line: 11
- column: 29
}
}callee: Identifier {...}
- type: "Identifier"
- start: 285
- end: 293
loc: {...}
start: {...}
- line: 11
- column: 16
}end: {...}
- line: 11
- column: 24
}
}- name: "parseCss"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 294
- end: 297
loc: {...}
start: {...}
- line: 11
- column: 25
}end: {...}
- line: 11
- column: 28
}
}- name: "css"
}
]- optional: false
}
}
}label: Identifier {...}
- type: "Identifier"
- start: 270
- end: 271
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 11
- column: 2
}
}- name: "$"
}
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 303
- end: 342
loc: {...}
start: {...}
- line: 13
- column: 1
}end: {...}
- line: 13
- column: 40
}
}body: ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 306
- end: 342
loc: {...}
start: {...}
- line: 13
- column: 4
}end: {...}
- line: 13
- column: 40
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 306
- end: 341
loc: {...}
start: {...}
- line: 13
- column: 4
}end: {...}
- line: 13
- column: 39
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 306
- end: 309
loc: {...}
start: {...}
- line: 13
- column: 4
}end: {...}
- line: 13
- column: 7
}
}- name: "log"
}right: CallExpression {...}
- type: "CallExpression"
- start: 312
- end: 341
loc: {...}
start: {...}
- line: 13
- column: 10
}end: {...}
- line: 13
- column: 39
}
}callee: Identifier {...}
- type: "Identifier"
- start: 312
- end: 318
loc: {...}
start: {...}
- line: 13
- column: 10
}end: {...}
- line: 13
- column: 16
}
}- name: "getLog"
}arguments: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 319
- end: 329
loc: {...}
start: {...}
- line: 13
- column: 17
}end: {...}
- line: 13
- column: 27
}
}- name: "parsedHtml"
} Identifier {...}
- type: "Identifier"
- start: 331
- end: 340
loc: {...}
start: {...}
- line: 13
- column: 29
}end: {...}
- line: 13
- column: 38
}
}- name: "parsedCss"
}
]- optional: false
}
}
}label: Identifier {...}
- type: "Identifier"
- start: 303
- end: 304
loc: {...}
start: {...}
- line: 13
- column: 1
}end: {...}
- line: 13
- column: 2
}
}- name: "$"
}
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 344
- end: 412
loc: {...}
start: {...}
- line: 14
- column: 1
}end: {...}
- line: 14
- column: 69
}
}body: ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 347
- end: 412
loc: {...}
start: {...}
- line: 14
- column: 4
}end: {...}
- line: 14
- column: 69
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 347
- end: 411
loc: {...}
start: {...}
- line: 14
- column: 4
}end: {...}
- line: 14
- column: 68
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 347
- end: 353
loc: {...}
start: {...}
- line: 14
- column: 4
}end: {...}
- line: 14
- column: 10
}
}- name: "logStr"
}right: TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 356
- end: 411
loc: {...}
start: {...}
- line: 14
- column: 13
}end: {...}
- line: 14
- column: 68
}
}expressions: [...] (1)
CallExpression {...}
- type: "CallExpression"
- start: 371
- end: 408
loc: {...}
start: {...}
- line: 14
- column: 28
}end: {...}
- line: 14
- column: 65
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 371
- end: 402
loc: {...}
start: {...}
- line: 14
- column: 28
}end: {...}
- line: 14
- column: 59
}
}object: CallExpression {...}
- type: "CallExpression"
- start: 371
- end: 397
loc: {...}
start: {...}
- line: 14
- column: 28
}end: {...}
- line: 14
- column: 54
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 371
- end: 378
loc: {...}
start: {...}
- line: 14
- column: 28
}end: {...}
- line: 14
- column: 35
}
}object: Identifier {...}
- type: "Identifier"
- start: 371
- end: 374
loc: {...}
start: {...}
- line: 14
- column: 28
}end: {...}
- line: 14
- column: 31
}
}- name: "log"
}property: Identifier {...}
- type: "Identifier"
- start: 375
- end: 378
loc: {...}
start: {...}
- line: 14
- column: 32
}end: {...}
- line: 14
- column: 35
}
}- name: "map"
}- computed: false
- optional: false
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 379
- end: 396
loc: {...}
start: {...}
- line: 14
- column: 36
}end: {...}
- line: 14
- column: 53
}
}- id: null
- expression: true
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 379
- end: 382
loc: {...}
start: {...}
- line: 14
- column: 36
}end: {...}
- line: 14
- column: 39
}
}- name: "str"
}
]body: TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 386
- end: 396
loc: {...}
start: {...}
- line: 14
- column: 43
}end: {...}
- line: 14
- column: 53
}
}expressions: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 390
- end: 393
loc: {...}
start: {...}
- line: 14
- column: 47
}end: {...}
- line: 14
- column: 50
}
}- name: "str"
}
]quasis: [...] (2)
TemplateElement {...}
- type: "TemplateElement"
- start: 387
- end: 388
loc: {...}
start: {...}
- line: 14
- column: 44
}end: {...}
- line: 14
- column: 45
}
}value: {...}
- raw: "\""
- cooked: "\""
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 394
- end: 395
loc: {...}
start: {...}
- line: 14
- column: 51
}end: {...}
- line: 14
- column: 52
}
}value: {...}
- raw: "\""
- cooked: "\""
}- tail: true
}
]
}
}
]- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 398
- end: 402
loc: {...}
start: {...}
- line: 14
- column: 55
}end: {...}
- line: 14
- column: 59
}
}- name: "join"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 403
- end: 407
loc: {...}
start: {...}
- line: 14
- column: 60
}end: {...}
- line: 14
- column: 64
}
}- value: ", "
- raw: "', '"
}
]- optional: false
}
]quasis: [...] (2)
TemplateElement {...}
- type: "TemplateElement"
- start: 357
- end: 369
loc: {...}
start: {...}
- line: 14
- column: 14
}end: {...}
- line: 14
- column: 26
}
}value: {...}
- raw: "console.log("
- cooked: "console.log("
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 409
- end: 410
loc: {...}
start: {...}
- line: 14
- column: 66
}end: {...}
- line: 14
- column: 67
}
}value: {...}
- raw: ")"
- cooked: ")"
}- tail: true
}
]
}
}
}label: Identifier {...}
- type: "Identifier"
- start: 344
- end: 345
loc: {...}
start: {...}
- line: 14
- column: 1
}end: {...}
- line: 14
- column: 2
}
}- name: "$"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 416
- end: 428
loc: {...}
start: {...}
- line: 16
- column: 1
}end: {...}
- line: 16
- column: 13
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 420
- end: 427
loc: {...}
start: {...}
- line: 16
- column: 5
}end: {...}
- line: 16
- column: 12
}
}id: Identifier {...}
- type: "Identifier"
- start: 420
- end: 427
loc: {...}
start: {...}
- line: 16
- column: 5
}end: {...}
- line: 16
- column: 12
}
}- name: "inputEl"
}- init: null
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 430
- end: 505
loc: {...}
start: {...}
- line: 17
- column: 1
}end: {...}
- line: 20
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 439
- end: 446
loc: {...}
start: {...}
- line: 17
- column: 10
}end: {...}
- line: 17
- column: 17
}
}- name: "copyLog"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 449
- end: 505
loc: {...}
start: {...}
- line: 17
- column: 20
}end: {...}
- line: 20
- column: 2
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 453
- end: 470
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 19
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 453
- end: 469
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 18
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 453
- end: 467
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 453
- end: 460
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 9
}
}- name: "inputEl"
}property: Identifier {...}
- type: "Identifier"
- start: 461
- end: 467
loc: {...}
start: {...}
- line: 18
- column: 10
}end: {...}
- line: 18
- column: 16
}
}- name: "select"
}- computed: false
- optional: false
}- arguments: []
- optional: false
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 473
- end: 502
loc: {...}
start: {...}
- line: 19
- column: 2
}end: {...}
- line: 19
- column: 31
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 473
- end: 501
loc: {...}
start: {...}
- line: 19
- column: 2
}end: {...}
- line: 19
- column: 30
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 473
- end: 493
loc: {...}
start: {...}
- line: 19
- column: 2
}end: {...}
- line: 19
- column: 22
}
}object: Identifier {...}
- type: "Identifier"
- start: 473
- end: 481
loc: {...}
start: {...}
- line: 19
- column: 2
}end: {...}
- line: 19
- column: 10
}
}- name: "document"
}property: Identifier {...}
- type: "Identifier"
- start: 482
- end: 493
loc: {...}
start: {...}
- line: 19
- column: 11
}end: {...}
- line: 19
- column: 22
}
}- name: "execCommand"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 494
- end: 500
loc: {...}
start: {...}
- line: 19
- column: 23
}end: {...}
- line: 19
- column: 29
}
}- value: "copy"
- raw: "\"copy\""
}
]- optional: false
}
}
]
}
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time