Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Map.svelte
MapMarker.svelte
mapbox.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
›
⌄
⌄
<script>
import Map from './Map.svelte';
import MapMarker from './MapMarker.svelte';
</script>
<Map lat={35} lon={-84} zoom={3.5}>
<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials" />
<MapMarker lat={29.723} lon={-95.4189} label="Svelte Waxing Studio" />
<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC" />
<MapMarker lat={40.6986} lon={-74.41} label="Svelte Medical Systems" />
</Map>
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 Map from './Map.svelte';
import MapMarker from './MapMarker.svelte';
var root_1 = $.template(`<!> <!> <!> <!> <!> <!>`, 1);
export default function App($$anchor) {
Map($$anchor, {
lat: 35,
lon: -84,
zoom: 3.5,
children: ($$anchor, $$slotProps) => {
var fragment_1 = root_1();
var node = $.first_child(fragment_1);
MapMarker(node, {
lat: 37.8225,
lon: -122.0024,
label: 'Svelte Body Shaping'
});
var node_1 = $.sibling(node, 2);
MapMarker(node_1, {
lat: 33.8981,
lon: -118.4169,
label: 'Svelte Barbershop & Essentials'
});
var node_2 = $.sibling(node_1, 2);
MapMarker(node_2, {
lat: 29.723,
lon: -95.4189,
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 98
- end: 598
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 96
- end: 98
- raw: "\n\n"
- data: "\n\n"
} Component {...}
- type: "Component"
- start: 98
- end: 598
- name: "Map"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 103
- end: 111
- name: "lat"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 107
- end: 111
expression: Literal {...}
- type: "Literal"
- start: 108
- end: 110
loc: {...}
start: {...}
- line: 6
- column: 10
}end: {...}
- line: 6
- column: 12
}
}- value: 35
- raw: "35"
}
}
} Attribute {...}
- type: "Attribute"
- start: 112
- end: 121
- name: "lon"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 116
- end: 121
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 117
- end: 120
loc: {...}
start: {...}
- line: 6
- column: 19
}end: {...}
- line: 6
- column: 22
}
}- operator: "-"
- prefix: true
argument: Literal {...}
- type: "Literal"
- start: 118
- end: 120
loc: {...}
start: {...}
- line: 6
- column: 20
}end: {...}
- line: 6
- column: 22
}
}- value: 84
- raw: "84"
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 122
- end: 132
- name: "zoom"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 127
- end: 132
expression: Literal {...}
- type: "Literal"
- start: 128
- end: 131
loc: {...}
start: {...}
- line: 6
- column: 30
}end: {...}
- line: 6
- column: 33
}
}- value: 3.5
- raw: "3.5"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (13)
Text {...}
- type: "Text"
- start: 133
- end: 135
- raw: "\n\t"
- data: "\n\t"
} Component {...}
- type: "Component"
- start: 135
- end: 206
- name: "MapMarker"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 146
- end: 159
- name: "lat"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 150
- end: 159
expression: Literal {...}
- type: "Literal"
- start: 151
- end: 158
loc: {...}
start: {...}
- line: 7
- column: 17
}end: {...}
- line: 7
- column: 24
}
}- value: 37.8225
- raw: "37.8225"
}
}
} Attribute {...}
- type: "Attribute"
- start: 160
- end: 175
- name: "lon"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 164
- end: 175
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 165
- end: 174
loc: {...}
start: {...}
- line: 7
- column: 31
}end: {...}
- line: 7
- column: 40
}
}- operator: "-"
- prefix: true
argument: Literal {...}
- type: "Literal"
- start: 166
- end: 174
loc: {...}
start: {...}
- line: 7
- column: 32
}end: {...}
- line: 7
- column: 40
}
}- value: 122.0024
- raw: "122.0024"
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 176
- end: 203
- name: "label"
value: [...] (1)
Text {...}
- start: 183
- end: 202
- type: "Text"
- raw: "Svelte Body Shaping"
- data: "Svelte Body Shaping"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 206
- end: 208
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 208
- end: 290
- name: "MapMarker"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 219
- end: 232
- name: "lat"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 223
- end: 232
expression: Literal {...}
- type: "Literal"
- start: 224
- end: 231
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 24
}
}- value: 33.8981
- raw: "33.8981"
}
}
} Attribute {...}
- type: "Attribute"
- start: 233
- end: 248
- name: "lon"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 237
- end: 248
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 238
- end: 247
loc: {...}
start: {...}
- line: 8
- column: 31
}end: {...}
- line: 8
- column: 40
}
}- operator: "-"
- prefix: true
argument: Literal {...}
- type: "Literal"
- start: 239
- end: 247
loc: {...}
start: {...}
- line: 8
- column: 32
}end: {...}
- line: 8
- column: 40
}
}- value: 118.4169
- raw: "118.4169"
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 249
- end: 287
- name: "label"
value: [...] (1)
Text {...}
- start: 256
- end: 286
- type: "Text"
- raw: "Svelte Barbershop & Essentials"
- data: "Svelte Barbershop & Essentials"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 290
- end: 292
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 292
- end: 362
- name: "MapMarker"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 303
- end: 315
- name: "lat"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 307
- end: 315
expression: Literal {...}
- type: "Literal"
- start: 308
- end: 314
loc: {...}
start: {...}
- line: 9
- column: 17
}end: {...}
- line: 9
- column: 23
}
}- value: 29.723
- raw: "29.723"
}
}
} Attribute {...}
- type: "Attribute"
- start: 316
- end: 330
- name: "lon"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 320
- end: 330
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 321
- end: 329
loc: {...}
start: {...}
- line: 9
- column: 30
}end: {...}
- line: 9
- column: 38
}
}- operator: "-"
- prefix: true
argument: Literal {...}
- type: "Literal"
- start: 322
- end: 329
loc: {...}
start: {...}
- line: 9
- column: 31
}end: {...}
- line: 9
- column: 38
}
}- value: 95.4189
- raw: "95.4189"
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 331
- end: 359
- name: "label"
value: [...] (1)
Text {...}
- start: 338
- end: 358
- type: "Text"
- raw: "Svelte Waxing Studio"
- data: "Svelte Waxing Studio"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 362
- end: 364
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 364
- end: 448
- name: "MapMarker"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 375
- end: 388
- name: "lat"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 379
- end: 388
expression: Literal {...}
- type: "Literal"
- start: 380
- end: 387
loc: {...}
start: {...}
- line: 10
- column: 17
}end: {...}
- line: 10
- column: 24
}
}- value: 28.3378
- raw: "28.3378"
}
}
} Attribute {...}
- type: "Attribute"
- start: 389
- end: 403
- name: "lon"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 393
- end: 403
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 394
- end: 402
loc: {...}
start: {...}
- line: 10
- column: 31
}end: {...}
- line: 10
- column: 39
}
}- operator: "-"
- prefix: true
argument: Literal {...}
- type: "Literal"
- start: 395
- end: 402
loc: {...}
start: {...}
- line: 10
- column: 32
}end: {...}
- line: 10
- column: 39
}
}- value: 81.3966
- raw: "81.3966"
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 404
- end: 445
- name: "label"
value: [...] (1)
Text {...}
- start: 411
- end: 444
- type: "Text"
- raw: "Svelte 30 Nutritional Consultants"
- data: "Svelte 30 Nutritional Consultants"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 448
- end: 450
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 450
- end: 518
- name: "MapMarker"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 461
- end: 474
- name: "lat"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 465
- end: 474
expression: Literal {...}
- type: "Literal"
- start: 466
- end: 473
loc: {...}
start: {...}
- line: 11
- column: 17
}end: {...}
- line: 11
- column: 24
}
}- value: 40.6483
- raw: "40.6483"
}
}
} Attribute {...}
- type: "Attribute"
- start: 475
- end: 489
- name: "lon"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 479
- end: 489
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 480
- end: 488
loc: {...}
start: {...}
- line: 11
- column: 31
}end: {...}
- line: 11
- column: 39
}
}- operator: "-"
- prefix: true
argument: Literal {...}
- type: "Literal"
- start: 481
- end: 488
loc: {...}
start: {...}
- line: 11
- column: 32
}end: {...}
- line: 11
- column: 39
}
}- value: 74.0237
- raw: "74.0237"
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 490
- end: 515
- name: "label"
value: [...] (1)
Text {...}
- start: 497
- end: 514
- type: "Text"
- raw: "Svelte Brands LLC"
- data: "Svelte Brands LLC"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 518
- end: 520
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 520
- end: 591
- name: "MapMarker"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 531
- end: 544
- name: "lat"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 535
- end: 544
expression: Literal {...}
- type: "Literal"
- start: 536
- end: 543
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 24
}
}- value: 40.6986
- raw: "40.6986"
}
}
} Attribute {...}
- type: "Attribute"
- start: 545
- end: 557
- name: "lon"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 549
- end: 557
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 550
- end: 556
loc: {...}
start: {...}
- line: 12
- column: 31
}end: {...}
- line: 12
- column: 37
}
}- operator: "-"
- prefix: true
argument: Literal {...}
- type: "Literal"
- start: 551
- end: 556
loc: {...}
start: {...}
- line: 12
- column: 32
}end: {...}
- line: 12
- column: 37
}
}- value: 74.41
- raw: "74.41"
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 558
- end: 588
- name: "label"
value: [...] (1)
Text {...}
- start: 565
- end: 587
- type: "Text"
- raw: "Svelte Medical Systems"
- data: "Svelte Medical Systems"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 591
- end: 592
- raw: "\n"
- data: "\n"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 96
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 87
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 4
- column: 0
}
}body: [...] (2)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 41
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 32
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 20
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 11
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 20
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 11
}
}- name: "Map"
}
}
]source: Literal {...}
- type: "Literal"
- start: 26
- end: 40
loc: {...}
start: {...}
- line: 2
- column: 17
}end: {...}
- line: 2
- column: 31
}
}- value: "./Map.svelte"
- raw: "'./Map.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 43
- end: 86
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 44
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 50
- end: 59
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 17
}
}local: Identifier {...}
- type: "Identifier"
- start: 50
- end: 59
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 17
}
}- name: "MapMarker"
}
}
]source: Literal {...}
- type: "Literal"
- start: 65
- end: 85
loc: {...}
start: {...}
- line: 3
- column: 23
}end: {...}
- line: 3
- column: 43
}
}- value: "./MapMarker.svelte"
- raw: "'./MapMarker.svelte'"
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time