Hello world • Playground • Svelte

App.svelte

Component.svelte

import SortableList from 'svelte-sortable-list@1.1.0';

import Component from './Component.svelte';

let list = [

{id: 1, name: 'First Item'},

{id: 2, name: 'Second Item'},

{id: 3, name: 'Third Item'}

];

const sortList = ev => {list = ev.detail};

</script>

<SortableList

{list}

key="id"

on:sort={sortList}

let:item

let:index

</SortableList>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import SortableList from 'svelte-sortable-list@1.1.0';

import Component from './Component.svelte';

export default function App($$anchor) {

let list = $.mutable_state([

{ id: 1, name: 'First Item' },

{ id: 2, name: 'Second Item' },

{ id: 3, name: 'Third Item' }

]);

const sortList = (ev) => {

$.set(list, ev.detail);

};

SortableList($$anchor, {

get list() {

return $.get(list);

key: 'id',

$$events: { sort: sortList },

children: $.invalid_default_snippet,

$$slots: {

default: ($$anchor, $$slotProps) => {

const item = $.derived_safe_equal(() => $$slotProps.item);

const index = $.derived_safe_equal(() => $$slotProps.index);

Component($$anchor, {

get item() {

return $.get(item);

get index() {

return $.get(index);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 269
end: 407
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 267
end: 269
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 269
end: 407
name: "SortableList"
attributes: [...] (5)
  Attribute {...}
 type: "Attribute"
start: 288
end: 294
name: "list"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 289
end: 293
expression: Identifier {...}
 start: 289
end: 293
type: "Identifier"
name: "list"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 300
end: 308
name: "key"
value: [...] (1)
  Text {...}
 start: 305
end: 307
type: "Text"
raw: "id"
data: "id"
 }
 ]
 }
 OnDirective {...}
 start: 314
end: 332
type: "OnDirective"
name: "sort"
expression: Identifier {...}
 type: "Identifier"
start: 323
end: 331
loc:  {...}
 start:  {...}
 line: 16
column: 13
 }
end:  {...}
 line: 16
column: 21
 }
 }
name: "sortList"
 }
modifiers: []
 }
 LetDirective {...}
 start: 337
end: 345
type: "LetDirective"
name: "item"
expression: null
modifiers: []
 }
 LetDirective {...}
 start: 348
end: 357
type: "LetDirective"
name: "index"
expression: null
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 359
end: 364
raw: "\n    "
data: "\n    "
 }
 Component {...}
 type: "Component"
start: 364
end: 391
name: "Component"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 375
end: 381
name: "item"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 376
end: 380
expression: Identifier {...}
 start: 376
end: 380
type: "Identifier"
name: "item"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 382
end: 389
name: "index"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 383
end: 388
expression: Identifier {...}
 start: 383
end: 388
type: "Identifier"
name: "index"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 391
end: 392
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 267
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 258
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 11
column: 0
 }
 }
body: [...] (4)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 9
end: 63
loc:  {...}
 start:  {...}
 line: 2
column: 0
 }
end:  {...}
 line: 2
column: 54
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 16
end: 28
loc:  {...}
 start:  {...}
 line: 2
column: 7
 }
end:  {...}
 line: 2
column: 19
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 16
end: 28
loc:  {...}
 start:  {...}
 line: 2
column: 7
 }
end:  {...}
 line: 2
column: 19
 }
 }
name: "SortableList"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 34
end: 62
loc:  {...}
 start:  {...}
 line: 2
column: 25
 }
end:  {...}
 line: 2
column: 53
 }
 }
value: "svelte-sortable-list@1.1.0"
raw: "'svelte-sortable-list@1.1.0'"
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 64
end: 107
loc:  {...}
 start:  {...}
 line: 3
column: 0
 }
end:  {...}
 line: 3
column: 43
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 71
end: 80
loc:  {...}
 start:  {...}
 line: 3
column: 7
 }
end:  {...}
 line: 3
column: 16
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 71
end: 80
loc:  {...}
 start:  {...}
 line: 3
column: 7
 }
end:  {...}
 line: 3
column: 16
 }
 }
name: "Component"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 86
end: 106
loc:  {...}
 start:  {...}
 line: 3
column: 22
 }
end:  {...}
 line: 3
column: 42
 }
 }
value: "./Component.svelte"
raw: "'./Component.svelte'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 109
end: 214
loc:  {...}
 start:  {...}
 line: 5
column: 0
 }
end:  {...}
 line: 9
column: 2
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 113
end: 213
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 9
column: 1
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 113
end: 117
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 5
column: 8
 }
 }
name: "list"
 }
init: ArrayExpression {...}
 type: "ArrayExpression"
start: 120
end: 213
loc:  {...}
 start:  {...}
 line: 5
column: 11
 }
end:  {...}
 line: 9
column: 1
 }
 }
elements: [...] (3)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 123
end: 150
loc:  {...}
 start:  {...}
 line: 6
column: 1
 }
end:  {...}
 line: 6
column: 28
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 124
end: 129
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 124
end: 126
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 4
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 128
end: 129
loc:  {...}
 start:  {...}
 line: 6
column: 6
 }
end:  {...}
 line: 6
column: 7
 }
 }
value: 1
raw: "1"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 131
end: 149
loc:  {...}
 start:  {...}
 line: 6
column: 9
 }
end:  {...}
 line: 6
column: 27
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 131
end: 135
loc:  {...}
 start:  {...}
 line: 6
column: 9
 }
end:  {...}
 line: 6
column: 13
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 137
end: 149
loc:  {...}
 start:  {...}
 line: 6
column: 15
 }
end:  {...}
 line: 6
column: 27
 }
 }
value: "First Item"
raw: "'First Item'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 153
end: 181
loc:  {...}
 start:  {...}
 line: 7
column: 1
 }
end:  {...}
 line: 7
column: 29
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 154
end: 159
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 154
end: 156
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 4
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 158
end: 159
loc:  {...}
 start:  {...}
 line: 7
column: 6
 }
end:  {...}
 line: 7
column: 7
 }
 }
value: 2
raw: "2"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 161
end: 180
loc:  {...}
 start:  {...}
 line: 7
column: 9
 }
end:  {...}
 line: 7
column: 28
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 161
end: 165
loc:  {...}
 start:  {...}
 line: 7
column: 9
 }
end:  {...}
 line: 7
column: 13
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 167
end: 180
loc:  {...}
 start:  {...}
 line: 7
column: 15
 }
end:  {...}
 line: 7
column: 28
 }
 }
value: "Second Item"
raw: "'Second Item'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 184
end: 211
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 28
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 185
end: 190
loc:  {...}
 start:  {...}
 line: 8
column: 2
 }
end:  {...}
 line: 8
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 185
end: 187
loc:  {...}
 start:  {...}
 line: 8
column: 2
 }
end:  {...}
 line: 8
column: 4
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 189
end: 190
loc:  {...}
 start:  {...}
 line: 8
column: 6
 }
end:  {...}
 line: 8
column: 7
 }
 }
value: 3
raw: "3"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 192
end: 210
loc:  {...}
 start:  {...}
 line: 8
column: 9
 }
end:  {...}
 line: 8
column: 27
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 192
end: 196
loc:  {...}
 start:  {...}
 line: 8
column: 9
 }
end:  {...}
 line: 8
column: 13
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 198
end: 210
loc:  {...}
 start:  {...}
 line: 8
column: 15
 }
end:  {...}
 line: 8
column: 27
 }
 }
value: "Third Item"
raw: "'Third Item'"
 }
kind: "init"
 }
 ]
 }
 ]
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 215
end: 257
loc:  {...}
 start:  {...}
 line: 10
column: 0
 }
end:  {...}
 line: 10
column: 42
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 221
end: 256
loc:  {...}
 start:  {...}
 line: 10
column: 6
 }
end:  {...}
 line: 10
column: 41
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 221
end: 229
loc:  {...}
 start:  {...}
 line: 10
column: 6
 }
end:  {...}
 line: 10
column: 14
 }
 }
name: "sortList"
 }
init: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 232
end: 256
loc:  {...}
 start:  {...}
 line: 10
column: 17
 }
end:  {...}
 line: 10
column: 41
 }
 }
id: null
expression: false
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 232
end: 234
loc:  {...}
 start:  {...}
 line: 10
column: 17
 }
end:  {...}
 line: 10
column: 19
 }
 }
name: "ev"
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 238
end: 256
loc:  {...}
 start:  {...}
 line: 10
column: 23
 }
end:  {...}
 line: 10
column: 41
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 239
end: 255
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 40
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 239
end: 255
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 40
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 239
end: 243
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 28
 }
 }
name: "list"
 }
right: MemberExpression {...}
 type: "MemberExpression"
start: 246
end: 255
loc:  {...}
 start:  {...}
 line: 10
column: 31
 }
end:  {...}
 line: 10
column: 40
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 246
end: 248
loc:  {...}
 start:  {...}
 line: 10
column: 31
 }
end:  {...}
 line: 10
column: 33
 }
 }
name: "ev"
 }
property: Identifier {...}
 type: "Identifier"
start: 249
end: 255
loc:  {...}
 start:  {...}
 line: 10
column: 34
 }
end:  {...}
 line: 10
column: 40
 }
 }
name: "detail"
 }
computed: false
optional: false
 }
 }
 }
 ]
 }
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern