List with slot props • Playground • Svelte

App.svelte

Component.svelte

import SortableList from 'svelte-sortable-list';

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

</SortableList>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import SortableList from 'svelte-sortable-list';

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);

Component($$anchor, {

get item() {

return $.get(item);

}

});

}

});

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 263
end: 383
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 261
end: 263
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 263
end: 383
name: "SortableList"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 282
end: 288
name: "list"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 283
end: 287
expression: Identifier {...}
 start: 283
end: 287
type: "Identifier"
name: "list"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 294
end: 302
name: "key"
value: [...] (1)
  Text {...}
 start: 299
end: 301
type: "Text"
raw: "id"
data: "id"
 }
 ]
 }
 OnDirective {...}
 start: 308
end: 326
type: "OnDirective"
name: "sort"
expression: Identifier {...}
 type: "Identifier"
start: 317
end: 325
loc:  {...}
 start:  {...}
 line: 16
column: 13
 }
end:  {...}
 line: 16
column: 21
 }
 }
name: "sortList"
 }
modifiers: []
 }
 LetDirective {...}
 start: 331
end: 339
type: "LetDirective"
name: "item"
expression: null
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 342
end: 347
raw: "\n    "
data: "\n    "
 }
 Component {...}
 type: "Component"
start: 347
end: 367
name: "Component"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 358
end: 364
name: "item"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 359
end: 363
expression: Identifier {...}
 start: 359
end: 363
type: "Identifier"
name: "item"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 367
end: 368
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 261
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 252
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 11
column: 0
 }
 }
body: [...] (4)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 9
end: 57
loc:  {...}
 start:  {...}
 line: 2
column: 0
 }
end:  {...}
 line: 2
column: 48
 }
 }
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: 56
loc:  {...}
 start:  {...}
 line: 2
column: 25
 }
end:  {...}
 line: 2
column: 47
 }
 }
value: "svelte-sortable-list"
raw: "'svelte-sortable-list'"
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 58
end: 101
loc:  {...}
 start:  {...}
 line: 3
column: 0
 }
end:  {...}
 line: 3
column: 43
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 65
end: 74
loc:  {...}
 start:  {...}
 line: 3
column: 7
 }
end:  {...}
 line: 3
column: 16
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 65
end: 74
loc:  {...}
 start:  {...}
 line: 3
column: 7
 }
end:  {...}
 line: 3
column: 16
 }
 }
name: "Component"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 80
end: 100
loc:  {...}
 start:  {...}
 line: 3
column: 22
 }
end:  {...}
 line: 3
column: 42
 }
 }
value: "./Component.svelte"
raw: "'./Component.svelte'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 103
end: 208
loc:  {...}
 start:  {...}
 line: 5
column: 0
 }
end:  {...}
 line: 9
column: 2
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 107
end: 207
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 9
column: 1
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 107
end: 111
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 5
column: 8
 }
 }
name: "list"
 }
init: ArrayExpression {...}
 type: "ArrayExpression"
start: 114
end: 207
loc:  {...}
 start:  {...}
 line: 5
column: 11
 }
end:  {...}
 line: 9
column: 1
 }
 }
elements: [...] (3)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 117
end: 144
loc:  {...}
 start:  {...}
 line: 6
column: 1
 }
end:  {...}
 line: 6
column: 28
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 118
end: 123
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 118
end: 120
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 4
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 122
end: 123
loc:  {...}
 start:  {...}
 line: 6
column: 6
 }
end:  {...}
 line: 6
column: 7
 }
 }
value: 1
raw: "1"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 125
end: 143
loc:  {...}
 start:  {...}
 line: 6
column: 9
 }
end:  {...}
 line: 6
column: 27
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 125
end: 129
loc:  {...}
 start:  {...}
 line: 6
column: 9
 }
end:  {...}
 line: 6
column: 13
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 131
end: 143
loc:  {...}
 start:  {...}
 line: 6
column: 15
 }
end:  {...}
 line: 6
column: 27
 }
 }
value: "First Item"
raw: "'First Item'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 147
end: 175
loc:  {...}
 start:  {...}
 line: 7
column: 1
 }
end:  {...}
 line: 7
column: 29
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 148
end: 153
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 148
end: 150
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 4
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 152
end: 153
loc:  {...}
 start:  {...}
 line: 7
column: 6
 }
end:  {...}
 line: 7
column: 7
 }
 }
value: 2
raw: "2"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 155
end: 174
loc:  {...}
 start:  {...}
 line: 7
column: 9
 }
end:  {...}
 line: 7
column: 28
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 155
end: 159
loc:  {...}
 start:  {...}
 line: 7
column: 9
 }
end:  {...}
 line: 7
column: 13
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 161
end: 174
loc:  {...}
 start:  {...}
 line: 7
column: 15
 }
end:  {...}
 line: 7
column: 28
 }
 }
value: "Second Item"
raw: "'Second Item'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 178
end: 205
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 28
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 179
end: 184
loc:  {...}
 start:  {...}
 line: 8
column: 2
 }
end:  {...}
 line: 8
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 179
end: 181
loc:  {...}
 start:  {...}
 line: 8
column: 2
 }
end:  {...}
 line: 8
column: 4
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 183
end: 184
loc:  {...}
 start:  {...}
 line: 8
column: 6
 }
end:  {...}
 line: 8
column: 7
 }
 }
value: 3
raw: "3"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 186
end: 204
loc:  {...}
 start:  {...}
 line: 8
column: 9
 }
end:  {...}
 line: 8
column: 27
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 186
end: 190
loc:  {...}
 start:  {...}
 line: 8
column: 9
 }
end:  {...}
 line: 8
column: 13
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 192
end: 204
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: 209
end: 251
loc:  {...}
 start:  {...}
 line: 10
column: 0
 }
end:  {...}
 line: 10
column: 42
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 215
end: 250
loc:  {...}
 start:  {...}
 line: 10
column: 6
 }
end:  {...}
 line: 10
column: 41
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 215
end: 223
loc:  {...}
 start:  {...}
 line: 10
column: 6
 }
end:  {...}
 line: 10
column: 14
 }
 }
name: "sortList"
 }
init: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 226
end: 250
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: 226
end: 228
loc:  {...}
 start:  {...}
 line: 10
column: 17
 }
end:  {...}
 line: 10
column: 19
 }
 }
name: "ev"
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 232
end: 250
loc:  {...}
 start:  {...}
 line: 10
column: 23
 }
end:  {...}
 line: 10
column: 41
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 233
end: 249
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 40
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 233
end: 249
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 40
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 233
end: 237
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 28
 }
 }
name: "list"
 }
right: MemberExpression {...}
 type: "MemberExpression"
start: 240
end: 249
loc:  {...}
 start:  {...}
 line: 10
column: 31
 }
end:  {...}
 line: 10
column: 40
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 240
end: 242
loc:  {...}
 start:  {...}
 line: 10
column: 31
 }
end:  {...}
 line: 10
column: 33
 }
 }
name: "ev"
 }
property: Identifier {...}
 type: "Identifier"
start: 243
end: 249
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