(cache)Infinite List for SvelteV4 • Playground • Svelte

App.svelte

List.svelte

data.js

useViewportAction.js

import List from './List.svelte';

import data from './data';

</script>

<List

{...$data}

key="id"

on:loadMore={data.fetchMore}

import "svelte/internal/disclose-version";

import "svelte/internal/flags/legacy";

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

import List from './List.svelte';

import data from './data';

export default function App($$anchor, $$props) {

$.push($$props, false);

const $$stores = $.setup_stores();

const $data = () => $.store_get(data, "$data", $$stores);

$.init();

List($$anchor, $.spread_props($data, {

key: "id",

$$events: {

loadMore(...$$args) {

data.fetchMore?.apply(this, $$args);

}

}));

$.pop();

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 83
end: 144
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 81
end: 83
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 83
end: 144
name: "List"
attributes: [...] (3)
  SpreadAttribute {...}
 type: "SpreadAttribute"
start: 90
end: 100
expression: Identifier {...}
 type: "Identifier"
start: 94
end: 99
loc:  {...}
 start:  {...}
 line: 7
column: 5
 }
end:  {...}
 line: 7
column: 10
 }
 }
name: "$data"
 }
 }
 Attribute {...}
 type: "Attribute"
start: 103
end: 111
name: "key"
value: [...] (1)
  Text {...}
 start: 108
end: 110
type: "Text"
raw: "id"
data: "id"
 }
 ]
 }
 OnDirective {...}
 start: 113
end: 141
type: "OnDirective"
name: "loadMore"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 126
end: 140
loc:  {...}
 start:  {...}
 line: 9
column: 14
 }
end:  {...}
 line: 9
column: 28
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 126
end: 130
loc:  {...}
 start:  {...}
 line: 9
column: 14
 }
end:  {...}
 line: 9
column: 18
 }
 }
name: "data"
 }
property: Identifier {...}
 type: "Identifier"
start: 131
end: 140
loc:  {...}
 start:  {...}
 line: 9
column: 19
 }
end:  {...}
 line: 9
column: 28
 }
 }
name: "fetchMore"
 }
computed: false
optional: false
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
options: null
instance: Script {
 type: "Script"
start: 0
end: 81
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 72
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 4
column: 0
 }
 }
body: [...] (2)
  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: 71
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 27
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 52
end: 56
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 12
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 52
end: 56
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 12
 }
 }
name: "data"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 62
end: 70
loc:  {...}
 start:  {...}
 line: 3
column: 18
 }
end:  {...}
 line: 3
column: 26
 }
 }
value: "./data"
raw: "'./data'"
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern