Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.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>
let styles = {
'note-bg-color': '#f4ed2a',
'note-color': '#FF5555',
'bg': '#AAAAAA',
};
$: cssVarStyles = Object.entries(styles)
.map(([key, value]) => `--${key}:${value}`)
.join(';');
// Or just this is fine too.
// let noteBgColor = '#f4ed2a';
// let noteColor = '#FF5555';
// $: cssVarStyles = `--note-color:${noteColor};--note-bg-color:${noteBgColor}`;
</script>
<style>
#top {
background-color: var(--bg, lightgray);
height: 100%;
}
.note {
color: var(--note-color, tomato);
background-color: var(--note-bg-color, lightgray);
}
.yellow-theme {
--note-color: black;
--note-bg-color: khaki;
}
.purple-note-text {
--note-color: rebeccapurple;
}
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';
var root = $.template(`<div id="top" class="svelte-15prkoc"><h1 class="note svelte-15prkoc" style="font-weight:600">Some text!</h1> <p>But the variables we manually set below can still override the dynamic ones.</p> <div class="yellow-theme svelte-15prkoc"><p class="note svelte-15prkoc">For that yellow notepad look.</p> <p class="note purple-note-text svelte-15prkoc">Or with purple</p></div> <label><input style="padding:0" type="color"> Note Text Color</label> <label><input style="padding:0" type="color"> Note Background Color</label> <label><input style="padding:0" type="color"> Page Background Color</label></div>`);
export default function App($$anchor, $$props) {
$.push($$props, false);
const cssVarStyles = $.mutable_state();
let styles = $.mutable_state({
'note-bg-color': '#f4ed2a',
'note-color': '#FF5555',
'bg': '#AAAAAA'
});
$.legacy_pre_effect(() => ($.get(styles)), () => {
$.set(cssVarStyles, Object.entries($.get(styles)).map(([key, value]) => `--${key}:${value}`).join(';'));
});
$.legacy_pre_effect_reset();
$.init();
var div = root();
var label = $.sibling($.child(div), 6);
var input = $.child(label);
$.remove_input_defaults(input);
$.next();
$.reset(label);
var label_1 = $.sibling(label, 2);
var input_1 = $.child(label_1);
$.remove_input_defaults(input_1);
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
20
›
#top.svelte-15prkoc {
background-color: var(--bg, lightgray);
height: 100%;
}
.note.svelte-15prkoc {
color: var(--note-color, tomato);
background-color: var(--note-bg-color, lightgray);
}
.yellow-theme.svelte-15prkoc {
--note-color: black;
--note-bg-color: khaki;
}
.purple-note-text.svelte-15prkoc {
--note-color: rebeccapurple;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 398
- end: 715
- attributes: []
children: [...] (4)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 407
- end: 411
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 407
- end: 411
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
IdSelector {...}
- type: "IdSelector"
- name: "top"
- start: 407
- end: 411
}
]- start: 407
- end: 411
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 412
- end: 474
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 416
- end: 454
- property: "background-color"
- value: "var(--bg, lightgray)"
} Declaration {...}
- type: "Declaration"
- start: 458
- end: 470
- property: "height"
- value: "100%"
}
]
}- start: 407
- end: 474
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 478
- end: 483
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 478
- end: 483
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "note"
- start: 478
- end: 483
}
]- start: 478
- end: 483
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 484
- end: 577
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 488
- end: 520
- property: "color"
- value: "var(--note-color, tomato)"
} Declaration {...}
- type: "Declaration"
- start: 524
- end: 573
- property: "background-color"
- value: "var(--note-bg-color, lightgray)"
}
]
}- start: 478
- end: 577
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 580
- end: 593
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 580
- end: 593
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "yellow-theme"
- start: 580
- end: 593
}
]- start: 580
- end: 593
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 594
- end: 647
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 598
- end: 617
- property: "--note-color"
- value: "black"
} Declaration {...}
- type: "Declaration"
- start: 621
- end: 643
- property: "--note-bg-color"
- value: "khaki"
}
]
}- start: 580
- end: 647
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 650
- end: 667
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 650
- end: 667
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "purple-note-text"
- start: 650
- end: 667
}
]- start: 650
- end: 667
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 668
- end: 705
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 672
- end: 699
- property: "--note-color"
- value: "rebeccapurple"
}
]
}- start: 650
- end: 705
}
]content: {...}
- start: 405
- end: 707
- styles: "\n\t#top {\n\t\tbackground-color: var(--bg, lightgray);\n\t\theight: 100%;\n\t}\n\t\n\t.note {\n\t\tcolor: var(--note-color, tomato);\n\t\tbackground-color: var(--note-bg-color, lightgray);\n\t}\n\n\t.yellow-theme {\n\t\t--note-color: black;\n\t\t--note-bg-color: khaki;\n\t}\n\n\t.purple-note-text {\n\t\t--note-color: rebeccapurple;\n } \n"
- comment: null
}
}- js: []
- start: 398
- end: 1421
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 396
- end: 398
- raw: "\n\n"
- data: "\n\n"
} Text {...}
- type: "Text"
- start: 715
- end: 717
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 717
- end: 1421
- name: "div"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 722
- end: 730
- name: "id"
value: [...] (1)
Text {...}
- start: 726
- end: 729
- type: "Text"
- raw: "top"
- data: "top"
}
]
} Attribute {...}
- type: "Attribute"
- start: 731
- end: 753
- name: "style"
value: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 738
- end: 752
expression: Identifier {...}
- type: "Identifier"
- start: 739
- end: 751
loc: {...}
start: {...}
- line: 39
- column: 22
}end: {...}
- line: 39
- column: 34
}
}- name: "cssVarStyles"
}
}
]
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: ""
- raw: ""
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (13)
Text {...}
- type: "Text"
- start: 754
- end: 756
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 756
- end: 812
- name: "h1"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 760
- end: 772
- name: "class"
value: [...] (1)
Text {...}
- start: 767
- end: 771
- type: "Text"
- raw: "note"
- data: "note"
}
]
} Attribute {...}
- type: "Attribute"
- start: 773
- end: 796
- name: "style"
value: [...] (1)
Text {...}
- start: 780
- end: 795
- type: "Text"
- raw: "font-weight:600"
- data: "font-weight:600"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 797
- end: 807
- raw: "Some text!"
- data: "Some text!"
}
]
}
} Text {...}
- type: "Text"
- start: 812
- end: 815
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 815
- end: 903
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 818
- end: 899
- raw: "But the variables we manually set below can still override the dynamic ones."
- data: "But the variables we manually set below can still override the dynamic ones."
}
]
}
} Text {...}
- type: "Text"
- start: 903
- end: 905
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 905
- end: 1053
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 910
- end: 930
- name: "class"
value: [...] (1)
Text {...}
- start: 917
- end: 929
- type: "Text"
- raw: "yellow-theme"
- data: "yellow-theme"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 931
- end: 937
- raw: "\n "
- data: "\n "
} RegularElement {...}
- type: "RegularElement"
- start: 937
- end: 986
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 940
- end: 952
- name: "class"
value: [...] (1)
Text {...}
- start: 947
- end: 951
- type: "Text"
- raw: "note"
- data: "note"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 953
- end: 982
- raw: "For that yellow notepad look."
- data: "For that yellow notepad look."
}
]
}
} Text {...}
- type: "Text"
- start: 986
- end: 993
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 993
- end: 1044
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 996
- end: 1025
- name: "class"
value: [...] (1)
Text {...}
- start: 1003
- end: 1024
- type: "Text"
- raw: "note purple-note-text"
- data: "note purple-note-text"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 1026
- end: 1040
- raw: "Or with purple"
- data: "Or with purple"
}
]
}
} Text {...}
- type: "Text"
- start: 1044
- end: 1047
- raw: "\n "
- data: "\n "
}
]
}
} Text {...}
- type: "Text"
- start: 1053
- end: 1056
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 1056
- end: 1169
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 1063
- end: 1066
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 1066
- end: 1140
- name: "input"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 1073
- end: 1090
- name: "style"
value: [...] (1)
Text {...}
- start: 1080
- end: 1089
- type: "Text"
- raw: "padding:0"
- data: "padding:0"
}
]
} Attribute {...}
- type: "Attribute"
- start: 1091
- end: 1103
- name: "type"
value: [...] (1)
Text {...}
- start: 1097
- end: 1102
- type: "Text"
- raw: "color"
- data: "color"
}
]
} BindDirective {...}
- start: 1104
- end: 1137
- type: "BindDirective"
- name: "value"
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 1116
- end: 1136
loc: {...}
start: {...}
- line: 52
- column: 52
}end: {...}
- line: 52
- column: 72
}
}object: Identifier {...}
- type: "Identifier"
- start: 1116
- end: 1122
loc: {...}
start: {...}
- line: 52
- column: 52
}end: {...}
- line: 52
- column: 58
}
}- name: "styles"
}property: Literal {...}
- type: "Literal"
- start: 1123
- end: 1135
loc: {...}
start: {...}
- line: 52
- column: 59
}end: {...}
- line: 52
- column: 71
}
}- value: "note-color"
- raw: "'note-color'"
}- computed: true
- optional: false
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 1140
- end: 1161
- raw: " Note Text Color"
- data: " Note Text Color"
}
]
}
} Text {...}
- type: "Text"
- start: 1169
- end: 1172
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 1172
- end: 1294
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 1179
- end: 1182
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 1182
- end: 1259
- name: "input"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 1189
- end: 1206
- name: "style"
value: [...] (1)
Text {...}
- start: 1196
- end: 1205
- type: "Text"
- raw: "padding:0"
- data: "padding:0"
}
]
} Attribute {...}
- type: "Attribute"
- start: 1207
- end: 1219
- name: "type"
value: [...] (1)
Text {...}
- start: 1213
- end: 1218
- type: "Text"
- raw: "color"
- data: "color"
}
]
} BindDirective {...}
- start: 1220
- end: 1256
- type: "BindDirective"
- name: "value"
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 1232
- end: 1255
loc: {...}
start: {...}
- line: 57
- column: 52
}end: {...}
- line: 57
- column: 75
}
}object: Identifier {...}
- type: "Identifier"
- start: 1232
- end: 1238
loc: {...}
start: {...}
- line: 57
- column: 52
}end: {...}
- line: 57
- column: 58
}
}- name: "styles"
}property: Literal {...}
- type: "Literal"
- start: 1239
- end: 1254
loc: {...}
start: {...}
- line: 57
- column: 59
}end: {...}
- line: 57
- column: 74
}
}- value: "note-bg-color"
- raw: "'note-bg-color'"
}- computed: true
- optional: false
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 1259
- end: 1286
- raw: " Note Background Color"
- data: " Note Background Color"
}
]
}
} Text {...}
- type: "Text"
- start: 1294
- end: 1299
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 1299
- end: 1412
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 1306
- end: 1309
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 1309
- end: 1375
- name: "input"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 1316
- end: 1333
- name: "style"
value: [...] (1)
Text {...}
- start: 1323
- end: 1332
- type: "Text"
- raw: "padding:0"
- data: "padding:0"
}
]
} Attribute {...}
- type: "Attribute"
- start: 1334
- end: 1346
- name: "type"
value: [...] (1)
Text {...}
- start: 1340
- end: 1345
- type: "Text"
- raw: "color"
- data: "color"
}
]
} BindDirective {...}
- start: 1347
- end: 1372
- type: "BindDirective"
- name: "value"
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 1359
- end: 1371
loc: {...}
start: {...}
- line: 62
- column: 52
}end: {...}
- line: 62
- column: 64
}
}object: Identifier {...}
- type: "Identifier"
- start: 1359
- end: 1365
loc: {...}
start: {...}
- line: 62
- column: 52
}end: {...}
- line: 62
- column: 58
}
}- name: "styles"
}property: Literal {...}
- type: "Literal"
- start: 1366
- end: 1370
loc: {...}
start: {...}
- line: 62
- column: 59
}end: {...}
- line: 62
- column: 63
}
}- value: "bg"
- raw: "'bg'"
}- computed: true
- optional: false
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 1375
- end: 1404
- raw: " Page Background Color"
- data: " Page Background Color"
}
]
}
} Text {...}
- type: "Text"
- start: 1412
- end: 1415
- raw: "\n\t\n"
- data: "\n\t\n"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 396
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 387
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 16
- column: 0
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 104
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 6
- column: 3
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 103
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 6
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 20
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 11
}
}- name: "styles"
}init: ObjectExpression {...}
- type: "ObjectExpression"
- start: 23
- end: 103
loc: {...}
start: {...}
- line: 2
- column: 14
}end: {...}
- line: 6
- column: 2
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 27
- end: 53
loc: {...}
start: {...}
- line: 3
- column: 2
}end: {...}
- line: 3
- column: 28
}
}- method: false
- shorthand: false
- computed: false
key: Literal {...}
- type: "Literal"
- start: 27
- end: 42
loc: {...}
start: {...}
- line: 3
- column: 2
}end: {...}
- line: 3
- column: 17
}
}- value: "note-bg-color"
- raw: "'note-bg-color'"
}value: Literal {...}
- type: "Literal"
- start: 44
- end: 53
loc: {...}
start: {...}
- line: 3
- column: 19
}end: {...}
- line: 3
- column: 28
}
}- value: "#f4ed2a"
- raw: "'#f4ed2a'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 57
- end: 80
loc: {...}
start: {...}
- line: 4
- column: 2
}end: {...}
- line: 4
- column: 25
}
}- method: false
- shorthand: false
- computed: false
key: Literal {...}
- type: "Literal"
- start: 57
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 2
}end: {...}
- line: 4
- column: 14
}
}- value: "note-color"
- raw: "'note-color'"
}value: Literal {...}
- type: "Literal"
- start: 71
- end: 80
loc: {...}
start: {...}
- line: 4
- column: 16
}end: {...}
- line: 4
- column: 25
}
}- value: "#FF5555"
- raw: "'#FF5555'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 84
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 17
}
}- method: false
- shorthand: false
- computed: false
key: Literal {...}
- type: "Literal"
- start: 84
- end: 88
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 6
}
}- value: "bg"
- raw: "'bg'"
}value: Literal {...}
- type: "Literal"
- start: 90
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 17
}
}- value: "#AAAAAA"
- raw: "'#AAAAAA'"
}- kind: "init"
}
]
}
}
]- kind: "let"
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 108
- end: 208
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 10
- column: 13
}
}body: ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 111
- end: 208
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 10
- column: 13
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 111
- end: 207
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 10
- column: 12
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 111
- end: 123
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 16
}
}- name: "cssVarStyles"
}right: CallExpression {...}
- type: "CallExpression"
- start: 126
- end: 207
loc: {...}
start: {...}
- line: 8
- column: 19
}end: {...}
- line: 10
- column: 12
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 126
- end: 202
loc: {...}
start: {...}
- line: 8
- column: 19
}end: {...}
- line: 10
- column: 7
}
}object: CallExpression {...}
- type: "CallExpression"
- start: 126
- end: 194
loc: {...}
start: {...}
- line: 8
- column: 19
}end: {...}
- line: 9
- column: 45
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 126
- end: 155
loc: {...}
start: {...}
- line: 8
- column: 19
}end: {...}
- line: 9
- column: 6
}
}object: CallExpression {...}
- type: "CallExpression"
- start: 126
- end: 148
loc: {...}
start: {...}
- line: 8
- column: 19
}end: {...}
- line: 8
- column: 41
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 126
- end: 140
loc: {...}
start: {...}
- line: 8
- column: 19
}end: {...}
- line: 8
- column: 33
}
}object: Identifier {...}
- type: "Identifier"
- start: 126
- end: 132
loc: {...}
start: {...}
- line: 8
- column: 19
}end: {...}
- line: 8
- column: 25
}
}- name: "Object"
}property: Identifier {...}
- type: "Identifier"
- start: 133
- end: 140
loc: {...}
start: {...}
- line: 8
- column: 26
}end: {...}
- line: 8
- column: 33
}
}- name: "entries"
}- computed: false
- optional: false
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 141
- end: 147
loc: {...}
start: {...}
- line: 8
- column: 34
}end: {...}
- line: 8
- column: 40
}
}- name: "styles"
}
]- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 152
- end: 155
loc: {...}
start: {...}
- line: 9
- column: 3
}end: {...}
- line: 9
- column: 6
}
}- name: "map"
}- computed: false
- optional: false
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 156
- end: 193
loc: {...}
start: {...}
- line: 9
- column: 7
}end: {...}
- line: 9
- column: 44
}
}- id: null
- expression: true
- generator: false
- async: false
params: [...] (1)
ArrayPattern {...}
- type: "ArrayPattern"
- start: 157
- end: 169
loc: {...}
start: {...}
- line: 9
- column: 8
}end: {...}
- line: 9
- column: 20
}
}elements: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 158
- end: 161
loc: {...}
start: {...}
- line: 9
- column: 9
}end: {...}
- line: 9
- column: 12
}
}- name: "key"
} Identifier {...}
- type: "Identifier"
- start: 163
- end: 168
loc: {...}
start: {...}
- line: 9
- column: 14
}end: {...}
- line: 9
- column: 19
}
}- name: "value"
}
]
}
]body: TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 174
- end: 193
loc: {...}
start: {...}
- line: 9
- column: 25
}end: {...}
- line: 9
- column: 44
}
}expressions: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 179
- end: 182
loc: {...}
start: {...}
- line: 9
- column: 30
}end: {...}
- line: 9
- column: 33
}
}- name: "key"
} Identifier {...}
- type: "Identifier"
- start: 186
- end: 191
loc: {...}
start: {...}
- line: 9
- column: 37
}end: {...}
- line: 9
- column: 42
}
}- name: "value"
}
]quasis: [...] (3)
TemplateElement {...}
- type: "TemplateElement"
- start: 175
- end: 177
loc: {...}
start: {...}
- line: 9
- column: 26
}end: {...}
- line: 9
- column: 28
}
}value: {...}
- raw: "--"
- cooked: "--"
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 183
- end: 184
loc: {...}
start: {...}
- line: 9
- column: 34
}end: {...}
- line: 9
- column: 35
}
}value: {...}
- raw: ":"
- cooked: ":"
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 192
- end: 192
loc: {...}
start: {...}
- line: 9
- column: 43
}end: {...}
- line: 9
- column: 43
}
}value: {...}
- raw: ""
- cooked: ""
}- tail: true
}
]
}
}
]- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 198
- end: 202
loc: {...}
start: {...}
- line: 10
- column: 3
}end: {...}
- line: 10
- column: 7
}
}- name: "join"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 203
- end: 206
loc: {...}
start: {...}
- line: 10
- column: 8
}end: {...}
- line: 10
- column: 11
}
}- value: ";"
- raw: "';'"
}
]- optional: false
}
}
}label: Identifier {...}
- type: "Identifier"
- start: 108
- end: 109
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 2
}
}- name: "$"
}trailingComments: [...] (4)
Line {...}
- type: "Line"
- value: " Or just this is fine too."
- start: 212
- end: 240
} Line {...}
- type: "Line"
- value: " let noteBgColor = '#f4ed2a';"
- start: 242
- end: 273
} Line {...}
- type: "Line"
- value: " let noteColor = '#FF5555';"
- start: 275
- end: 304
} Line {...}
- type: "Line"
- value: " $: cssVarStyles = `--note-color:${noteColor};--note-bg-color:${noteBgColor}`;"
- start: 306
- end: 386
}
]
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time