Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
stores.js
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
›
⌄
⌄
⌄
<script>
import { time, elapsed } from './stores.js';
const formatter = new Intl.DateTimeFormat('en', {
hour12: true,
hour: 'numeric',
minute: '2-digit',
second: '2-digit'
});
</script>
<h1>The time is {formatter.format($time)}</h1>
<p>
This page has been open for
{$elapsed}
{$elapsed === 1 ? 'second' : 'seconds'}
</p>
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
36
›
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import { time, elapsed } from './stores.js';
var root = $.template(`<h1> </h1> <p> </p>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, false);
const [$$stores, $$cleanup] = $.setup_stores();
const $time = () => $.store_get(time, '$time', $$stores);
const $elapsed = () => $.store_get(elapsed, '$elapsed', $$stores);
const formatter = new Intl.DateTimeFormat('en', {
hour12: true,
hour: 'numeric',
minute: '2-digit',
second: '2-digit'
});
$.init();
var fragment = root();
var h1 = $.first_child(fragment);
var text = $.child(h1);
$.reset(h1);
var p = $.sibling(h1, 2);
var text_1 = $.child(p);
$.reset(p);
$.template_effect(
($0) => {
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 199
- end: 337
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
Text {...}
- type: "Text"
- start: 197
- end: 199
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 199
- end: 245
- name: "h1"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 203
- end: 215
- raw: "The time is "
- data: "The time is "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 215
- end: 240
expression: CallExpression {...}
- type: "CallExpression"
- start: 216
- end: 239
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 40
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 216
- end: 232
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 33
}
}object: Identifier {...}
- type: "Identifier"
- start: 216
- end: 225
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 26
}
}- name: "formatter"
}property: Identifier {...}
- type: "Identifier"
- start: 226
- end: 232
loc: {...}
start: {...}
- line: 12
- column: 27
}end: {...}
- line: 12
- column: 33
}
}- name: "format"
}- computed: false
- optional: false
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 233
- end: 238
loc: {...}
start: {...}
- line: 12
- column: 34
}end: {...}
- line: 12
- column: 39
}
}- name: "$time"
}
]- optional: false
}
}
]
}
} Text {...}
- type: "Text"
- start: 245
- end: 247
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 247
- end: 337
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 250
- end: 281
- raw: "This page has been open for\n\t"
- data: "This page has been open for\n\t"
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 281
- end: 291
expression: Identifier {...}
- type: "Identifier"
- start: 282
- end: 290
loc: {...}
start: {...}
- line: 16
- column: 2
}end: {...}
- line: 16
- column: 10
}
}- name: "$elapsed"
}
} Text {...}
- type: "Text"
- start: 291
- end: 293
- raw: "\n\t"
- data: "\n\t"
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 293
- end: 332
expression: ConditionalExpression {...}
- type: "ConditionalExpression"
- start: 294
- end: 331
loc: {...}
start: {...}
- line: 17
- column: 2
}end: {...}
- line: 17
- column: 39
}
}test: BinaryExpression {...}
- type: "BinaryExpression"
- start: 294
- end: 308
loc: {...}
start: {...}
- line: 17
- column: 2
}end: {...}
- line: 17
- column: 16
}
}left: Identifier {...}
- type: "Identifier"
- start: 294
- end: 302
loc: {...}
start: {...}
- line: 17
- column: 2
}end: {...}
- line: 17
- column: 10
}
}- name: "$elapsed"
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 307
- end: 308
loc: {...}
start: {...}
- line: 17
- column: 15
}end: {...}
- line: 17
- column: 16
}
}- value: 1
- raw: "1"
}
}consequent: Literal {...}
- type: "Literal"
- start: 311
- end: 319
loc: {...}
start: {...}
- line: 17
- column: 19
}end: {...}
- line: 17
- column: 27
}
}- value: "second"
- raw: "'second'"
}alternate: Literal {...}
- type: "Literal"
- start: 322
- end: 331
loc: {...}
start: {...}
- line: 17
- column: 30
}end: {...}
- line: 17
- column: 39
}
}- value: "seconds"
- raw: "'seconds'"
}
}
} Text {...}
- type: "Text"
- start: 332
- end: 333
- raw: "\n"
- data: "\n"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 197
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 188
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 10
- column: 0
}
}body: [...] (2)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 54
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 45
}
}specifiers: [...] (2)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 14
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 14
}
}- name: "time"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 14
}
}- name: "time"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 25
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 2
- column: 23
}
}imported: Identifier {...}
- type: "Identifier"
- start: 25
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 2
- column: 23
}
}- name: "elapsed"
}local: Identifier {...}
- type: "Identifier"
- start: 25
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 2
- column: 23
}
}- name: "elapsed"
}
}
]source: Literal {...}
- type: "Literal"
- start: 40
- end: 53
loc: {...}
start: {...}
- line: 2
- column: 31
}end: {...}
- line: 2
- column: 44
}
}- value: "./stores.js"
- raw: "'./stores.js'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 57
- end: 187
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 9
- column: 4
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 63
- end: 186
loc: {...}
start: {...}
- line: 4
- column: 7
}end: {...}
- line: 9
- column: 3
}
}id: Identifier {...}
- type: "Identifier"
- start: 63
- end: 72
loc: {...}
start: {...}
- line: 4
- column: 7
}end: {...}
- line: 4
- column: 16
}
}- name: "formatter"
}init: NewExpression {...}
- type: "NewExpression"
- start: 75
- end: 186
loc: {...}
start: {...}
- line: 4
- column: 19
}end: {...}
- line: 9
- column: 3
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 79
- end: 98
loc: {...}
start: {...}
- line: 4
- column: 23
}end: {...}
- line: 4
- column: 42
}
}object: Identifier {...}
- type: "Identifier"
- start: 79
- end: 83
loc: {...}
start: {...}
- line: 4
- column: 23
}end: {...}
- line: 4
- column: 27
}
}- name: "Intl"
}property: Identifier {...}
- type: "Identifier"
- start: 84
- end: 98
loc: {...}
start: {...}
- line: 4
- column: 28
}end: {...}
- line: 4
- column: 42
}
}- name: "DateTimeFormat"
}- computed: false
- optional: false
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 99
- end: 103
loc: {...}
start: {...}
- line: 4
- column: 43
}end: {...}
- line: 4
- column: 47
}
}- value: "en"
- raw: "'en'"
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 105
- end: 185
loc: {...}
start: {...}
- line: 4
- column: 49
}end: {...}
- line: 9
- column: 2
}
}properties: [...] (4)
Property {...}
- type: "Property"
- start: 109
- end: 121
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 14
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 109
- end: 115
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 8
}
}- name: "hour12"
}value: Literal {...}
- type: "Literal"
- start: 117
- end: 121
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 14
}
}- value: true
- raw: "true"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 125
- end: 140
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 17
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 125
- end: 129
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 6
}
}- name: "hour"
}value: Literal {...}
- type: "Literal"
- start: 131
- end: 140
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 17
}
}- value: "numeric"
- raw: "'numeric'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 144
- end: 161
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 19
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 144
- end: 150
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 8
}
}- name: "minute"
}value: Literal {...}
- type: "Literal"
- start: 152
- end: 161
loc: {...}
start: {...}
- line: 7
- column: 10
}end: {...}
- line: 7
- column: 19
}
}- value: "2-digit"
- raw: "'2-digit'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 165
- end: 182
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 19
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 165
- end: 171
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 8
}
}- name: "second"
}value: Literal {...}
- type: "Literal"
- start: 173
- end: 182
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 19
}
}- value: "2-digit"
- raw: "'2-digit'"
}- kind: "init"
}
]
}
]
}
}
]- kind: "const"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time