svelte dnd action generic component wrapper example • Playground • Svelte

App.svelte

List.svelte

MyItem.svelte

import List from './List.svelte';

import MyItem from './MyItem.svelte';

let items = [

{id: 1, name: "item 1"},

{id: 2, name: "item 2"}

];

function onDrop(newItems) {

items = newItems;

}

</script>

<h3>

Generic List Component

</h3>

<p>

In this example the List component is a generic drag and drop container that can accept any Svelte component that takes an item as a prop. This is an alternative to using slots to acheive similar composability. In my opinion this approach is much more readable, elegant and flexible.

</p>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import List from './List.svelte';

import MyItem from './MyItem.svelte';

var root = $.template(`<h3>Generic List Component</h3> <p>In this example the List component is a generic drag and drop container that can accept any Svelte component that takes an item as a prop. This is an alternative to using slots to acheive similar composability. In my opinion this approach is much more readable, elegant and flexible.</p> <hr><br> <!>`, 1);

export default function App($$anchor) {

let items = $.mutable_state([

{ id: 1, name: "item 1" },

{ id: 2, name: "item 2" }

]);

function onDrop(newItems) {

$.set(items, newItems);

}

var fragment = root();

var node = $.sibling($.first_child(fragment), 7);

List(node, {

get itemsData() {

return $.get(items);

itemComponent: MyItem,

onDrop

});

$.append($$anchor, fragment);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 218
end: 623
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (9)
  Text {...}
 type: "Text"
start: 216
end: 218
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 218
end: 252
name: "h3"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 222
end: 247
raw: "Generic List Component"
data: "Generic List Component"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 252
end: 253
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 253
end: 546
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 256
end: 542
raw: "In this example the List component is a generic drag and drop container that can accept any Svelte component that takes an item as a prop. This is an alternative to using slots to acheive similar composability. In my opinion this approach is much more readable, elegant and flexible."
data: "In this example the List component is a generic drag and drop container that can accept any Svelte component that takes an item as a prop. This is an alternative to using slots to acheive similar composability. In my opinion this approach is much more readable, elegant and flexible."
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 546
end: 547
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 547
end: 552
name: "hr"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 RegularElement {...}
 type: "RegularElement"
start: 552
end: 557
name: "br"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 557
end: 558
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 558
end: 623
name: "List"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 564
end: 581
name: "itemsData"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 574
end: 581
expression: Identifier {...}
 type: "Identifier"
start: 575
end: 580
loc:  {...}
 start:  {...}
 line: 20
column: 17
 }
end:  {...}
 line: 20
column: 22
 }
 }
name: "items"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 582
end: 604
name: "itemComponent"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 596
end: 604
expression: Identifier {...}
 type: "Identifier"
start: 597
end: 603
loc:  {...}
 start:  {...}
 line: 20
column: 39
 }
end:  {...}
 line: 20
column: 45
 }
 }
name: "MyItem"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 605
end: 620
name: "onDrop"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 612
end: 620
expression: Identifier {...}
 type: "Identifier"
start: 613
end: 619
loc:  {...}
 start:  {...}
 line: 20
column: 55
 }
end:  {...}
 line: 20
column: 61
 }
 }
name: "onDrop"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 216
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 207
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 11
column: 0
 }
 }
body: [...] (4)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 43
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 34
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 17
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 12
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 17
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 12
 }
 }
name: "List"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 27
end: 42
loc:  {...}
 start:  {...}
 line: 2
column: 18
 }
end:  {...}
 line: 2
column: 33
 }
 }
value: "./List.svelte"
raw: "'./List.svelte'"
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 45
end: 82
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 38
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 52
end: 58
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 14
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 52
end: 58
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 14
 }
 }
name: "MyItem"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 64
end: 81
loc:  {...}
 start:  {...}
 line: 3
column: 20
 }
end:  {...}
 line: 3
column: 37
 }
 }
value: "./MyItem.svelte"
raw: "'./MyItem.svelte'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 84
end: 154
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 7
column: 3
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 88
end: 153
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 7
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 88
end: 93
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 10
 }
 }
name: "items"
 }
init: ArrayExpression {...}
 type: "ArrayExpression"
start: 96
end: 153
loc:  {...}
 start:  {...}
 line: 4
column: 13
 }
end:  {...}
 line: 7
column: 2
 }
 }
elements: [...] (2)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 100
end: 123
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 25
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 101
end: 106
loc:  {...}
 start:  {...}
 line: 5
column: 3
 }
end:  {...}
 line: 5
column: 8
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 101
end: 103
loc:  {...}
 start:  {...}
 line: 5
column: 3
 }
end:  {...}
 line: 5
column: 5
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 105
end: 106
loc:  {...}
 start:  {...}
 line: 5
column: 7
 }
end:  {...}
 line: 5
column: 8
 }
 }
value: 1
raw: "1"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 108
end: 122
loc:  {...}
 start:  {...}
 line: 5
column: 10
 }
end:  {...}
 line: 5
column: 24
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 108
end: 112
loc:  {...}
 start:  {...}
 line: 5
column: 10
 }
end:  {...}
 line: 5
column: 14
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 114
end: 122
loc:  {...}
 start:  {...}
 line: 5
column: 16
 }
end:  {...}
 line: 5
column: 24
 }
 }
value: "item 1"
raw: "\"item 1\""
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 127
end: 150
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 25
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 128
end: 133
loc:  {...}
 start:  {...}
 line: 6
column: 3
 }
end:  {...}
 line: 6
column: 8
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 128
end: 130
loc:  {...}
 start:  {...}
 line: 6
column: 3
 }
end:  {...}
 line: 6
column: 5
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 132
end: 133
loc:  {...}
 start:  {...}
 line: 6
column: 7
 }
end:  {...}
 line: 6
column: 8
 }
 }
value: 2
raw: "2"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 135
end: 149
loc:  {...}
 start:  {...}
 line: 6
column: 10
 }
end:  {...}
 line: 6
column: 24
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 135
end: 139
loc:  {...}
 start:  {...}
 line: 6
column: 10
 }
end:  {...}
 line: 6
column: 14
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 141
end: 149
loc:  {...}
 start:  {...}
 line: 6
column: 16
 }
end:  {...}
 line: 6
column: 24
 }
 }
value: "item 2"
raw: "\"item 2\""
 }
kind: "init"
 }
 ]
 }
 ]
 }
 }
 ]
kind: "let"
 }
 FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 156
end: 206
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 10
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 165
end: 171
loc:  {...}
 start:  {...}
 line: 8
column: 10
 }
end:  {...}
 line: 8
column: 16
 }
 }
name: "onDrop"
 }
expression: false
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 172
end: 180
loc:  {...}
 start:  {...}
 line: 8
column: 17
 }
end:  {...}
 line: 8
column: 25
 }
 }
name: "newItems"
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 182
end: 206
loc:  {...}
 start:  {...}
 line: 8
column: 27
 }
end:  {...}
 line: 10
column: 2
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 186
end: 203
loc:  {...}
 start:  {...}
 line: 9
column: 2
 }
end:  {...}
 line: 9
column: 19
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 186
end: 202
loc:  {...}
 start:  {...}
 line: 9
column: 2
 }
end:  {...}
 line: 9
column: 18
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 186
end: 191
loc:  {...}
 start:  {...}
 line: 9
column: 2
 }
end:  {...}
 line: 9
column: 7
 }
 }
name: "items"
 }
right: Identifier {...}
 type: "Identifier"
start: 194
end: 202
loc:  {...}
 start:  {...}
 line: 9
column: 10
 }
end:  {...}
 line: 9
column: 18
 }
 }
name: "newItems"
 }
 }
 }
 ]
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern