fix props, update tests

Rich-Harris · Rich-Harris · commit deca6e501513 · 2018-04-04T20:40:58.000-04:00
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
   "scripts": {
     "build": "rollup -c",
     "prepublishOnly": "npm test",
-    "test": "node test/runner.js | faucet",
+    "test": "node test/runner.js | tap-dot",
     "test:browser": "npm run build && serve test/public",
     "pretest": "npm run build"
   },
@@ -17,10 +17,12 @@
     "port-authority": "^1.0.3",
     "puppeteer": "^1.2.0",
     "rollup": "^0.57.1",
+    "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-svelte": "^4.1.0",
     "serve": "^6.5.3",
     "svelte": "^1.60.1",
+    "tap-dot": "^1.0.5",
     "tape-modern": "^1.0.0"
   },
   "repository": "https://github.com/sveltejs/svelte-virtual-list",
@@ -33,5 +35,8 @@
     "src",
     "index.mjs",
     "index.js"
-  ]
+  ],
+  "dependencies": {
+    "svelte-extras": "^1.6.0"
+  }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,5 +1,6 @@
 import svelte from 'rollup-plugin-svelte';
 import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
 import pkg from './package.json';
 
 export default [
@@ -10,6 +11,7 @@ export default [
 			{ file: pkg.main, 'format': 'umd', name: 'VirtualList' }
 		],
 		plugins: [
+			resolve(),
 			svelte({
 				cascade: false,
 				store: true
@@ -25,11 +27,16 @@ export default [
 			format: 'iife'
 		},
 		plugins: [
+			resolve(),
+			commonjs({
+				namedExports: {
+					svelte: ['create', 'compile']
+				}
+			}),
 			svelte({
 				cascade: false,
 				store: true
-			}),
-			resolve()
+			})
 		]
 	}
 ];
diff --git a/src/VirtualList.html b/src/VirtualList.html
@@ -43,7 +43,7 @@
 
 			const keys = Object.keys(this.options.data).filter(key => key !== 'items' && key !== 'component');
 			if (keys.length) {
-				this.observeMany(keys, ([values]) => {
+				this.observeMany(keys, values => {
 					const _props = {};
 					keys.forEach((key, i) => {
 						_props[key] = values[i];
diff --git a/test/public/index.html b/test/public/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>svelte-virtual-list tests</head>
 <body>
-	<main></main>
+	<main style='height: 500px'></main>
 	<script src='bundle.js'></script>
 </body>
 </html>
diff --git a/test/src/index.js b/test/src/index.js
@@ -1,3 +1,4 @@
+import * as svelte from 'svelte';
 import VirtualList from '../..';
 import { assert, test, done } from 'tape-modern';
 
@@ -7,6 +8,7 @@ const target = document.querySelector('main');
 function normalize(html) {
 	const div = document.createElement('div');
 	div.innerHTML = html
+		.replace(/<!--.+?-->/g, '')
 		.replace(/svelte-ref-\w+=""/g, '')
 		.replace(/\s*svelte-\w+\s*/g, '')
 		.replace(/class=""/g, '')
@@ -40,5 +42,50 @@ test('with no data, creates two <div> elements', t => {
 	list.destroy();
 });
 
+test('props are passed to child component', t => {
+	const Row = svelte.create(`
+		<span>{{row.foo}}</span>
+		<span>{{baz}}</span>
+		<span>{{items}}</span> <!-- should be undefined -->
+	`);
+
+	const list = new VirtualList({
+		target,
+		data: {
+			items: [{ foo: 'bar'}],
+			component: Row,
+			baz: 'qux'
+		}
+	});
+
+	t.htmlEqual(target.innerHTML, `
+		<div>
+			<div style="padding-top: 0px; padding-bottom: 0px;">
+				<div class="row">
+					<span>bar</span>
+					<span>qux</span>
+					<span>undefined</span>
+				</div>
+			</div>
+		</div>
+	`);
+
+	list.set({ baz: 'changed' });
+
+	t.htmlEqual(target.innerHTML, `
+		<div>
+			<div style="padding-top: 0px; padding-bottom: 0px;">
+				<div class="row">
+					<span>bar</span>
+					<span>changed</span>
+					<span>undefined</span>
+				</div>
+			</div>
+		</div>
+	`);
+
+	list.destroy();
+});
+
 // this allows us to close puppeteer once tests have completed
 window.done = done;
diff --git a/yarn-error.log b/yarn-error.log
