Skip to content

Commit cda1006

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #8 from sveltejs/props
Pass props down to row components
2 parents 9a4b458 + deca6e5 commit cda1006

File tree

6 files changed

+1869
-7
lines changed

6 files changed

+1869
-7
lines changed

‎package.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"scripts": {
99
"build": "rollup -c",
1010
"prepublishOnly": "npm test",
11-
"test": "node test/runner.js | faucet",
11+
"test": "node test/runner.js | tap-dot",
1212
"test:browser": "npm run build && serve test/public",
1313
"pretest": "npm run build"
1414
},
@@ -17,10 +17,12 @@
1717
"port-authority": "^1.0.3",
1818
"puppeteer": "^1.2.0",
1919
"rollup": "^0.57.1",
20+
"rollup-plugin-commonjs": "^9.1.0",
2021
"rollup-plugin-node-resolve": "^3.3.0",
2122
"rollup-plugin-svelte": "^4.1.0",
2223
"serve": "^6.5.3",
2324
"svelte": "^1.60.1",
25+
"tap-dot": "^1.0.5",
2426
"tape-modern": "^1.0.0"
2527
},
2628
"repository": "https://github.com/sveltejs/svelte-virtual-list",
@@ -33,5 +35,8 @@
3335
"src",
3436
"index.mjs",
3537
"index.js"
36-
]
38+
],
39+
"dependencies": {
40+
"svelte-extras": "^1.6.0"
41+
}
3742
}

‎rollup.config.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import svelte from 'rollup-plugin-svelte';
22
import resolve from 'rollup-plugin-node-resolve';
3+
import commonjs from 'rollup-plugin-commonjs';
34
import pkg from './package.json';
45

56
export default [
@@ -10,6 +11,7 @@ export default [
1011
{ file: pkg.main, 'format': 'umd', name: 'VirtualList' }
1112
],
1213
plugins: [
14+
resolve(),
1315
svelte({
1416
cascade: false,
1517
store: true
@@ -25,11 +27,16 @@ export default [
2527
format: 'iife'
2628
},
2729
plugins: [
30+
resolve(),
31+
commonjs({
32+
namedExports: {
33+
svelte: ['create', 'compile']
34+
}
35+
}),
2836
svelte({
2937
cascade: false,
3038
store: true
31-
}),
32-
resolve()
39+
})
3340
]
3441
}
3542
];

‎src/VirtualList.html

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div ref:container style='padding-top: {{top}}px; padding-bottom: {{bottom}}px;'>
33
{{#each visible as item @index}}
44
<div class='row'>
5-
<:Component {component} row={{item.data}} />
5+
<:Component {component} {{..._props}} row={{item.data}} />
66
</div>
77
{{/each}}
88
</div>
@@ -21,9 +21,11 @@
2121
</style>
2222

2323
<script>
24+
import { observeMany } from 'svelte-extras';
25+
2426
export default {
2527
data() {
26-
return { top: 0, bottom: 0, start: 0, end: 0 };
28+
return { top: 0, bottom: 0, start: 0, end: 0, _props: {} };
2729
},
2830

2931
computed: {
@@ -39,6 +41,17 @@
3941
const { viewport, container } = this.refs;
4042
const viewportHeight = viewport.offsetHeight;
4143

44+
const keys = Object.keys(this.options.data).filter(key => key !== 'items' && key !== 'component');
45+
if (keys.length) {
46+
this.observeMany(keys, values => {
47+
const _props = {};
48+
keys.forEach((key, i) => {
49+
_props[key] = values[i];
50+
});
51+
this.set({ _props });
52+
});
53+
}
54+
4255
this.rows = container.getElementsByClassName('row');
4356
this.heightMap = [];
4457

@@ -65,6 +78,8 @@
6578
},
6679

6780
methods: {
81+
observeMany,
82+
6883
handleScroll() {
6984
const { items, start, end } = this.get();
7085
const { offsetHeight, scrollTop } = this.refs.viewport;

‎test/public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>svelte-virtual-list tests</head>
44
<body>
5-
<main></main>
5+
<main style='height: 500px'></main>
66
<script src='bundle.js'></script>
77
</body>
88
</html>

‎test/src/index.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import * as svelte from 'svelte';
12
import VirtualList from '../..';
23
import { assert, test, done } from 'tape-modern';
34

@@ -7,6 +8,7 @@ const target = document.querySelector('main');
78
function normalize(html) {
89
const div = document.createElement('div');
910
div.innerHTML = html
11+
.replace(/<!--.+?-->/g, '')
1012
.replace(/svelte-ref-\w+=""/g, '')
1113
.replace(/\s*svelte-\w+\s*/g, '')
1214
.replace(/class=""/g, '')
@@ -40,5 +42,50 @@ test('with no data, creates two <div> elements', t => {
4042
list.destroy();
4143
});
4244

45+
test('props are passed to child component', t => {
46+
const Row = svelte.create(`
47+
<span>{{row.foo}}</span>
48+
<span>{{baz}}</span>
49+
<span>{{items}}</span> <!-- should be undefined -->
50+
`);
51+
52+
const list = new VirtualList({
53+
target,
54+
data: {
55+
items: [{ foo: 'bar'}],
56+
component: Row,
57+
baz: 'qux'
58+
}
59+
});
60+
61+
t.htmlEqual(target.innerHTML, `
62+
<div>
63+
<div style="padding-top: 0px; padding-bottom: 0px;">
64+
<div class="row">
65+
<span>bar</span>
66+
<span>qux</span>
67+
<span>undefined</span>
68+
</div>
69+
</div>
70+
</div>
71+
`);
72+
73+
list.set({ baz: 'changed' });
74+
75+
t.htmlEqual(target.innerHTML, `
76+
<div>
77+
<div style="padding-top: 0px; padding-bottom: 0px;">
78+
<div class="row">
79+
<span>bar</span>
80+
<span>changed</span>
81+
<span>undefined</span>
82+
</div>
83+
</div>
84+
</div>
85+
`);
86+
87+
list.destroy();
88+
});
89+
4390
// this allows us to close puppeteer once tests have completed
4491
window.done = done;

0 commit comments

Comments
 (0)