update for v3

Author: Rich-Harris

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 9,
+    "sourceType": "module"
+  },
+  "plugins": ["svelte3"],
+  "settings": {
+    "svelte3/extensions": ["html"]
+  },
+  "env": {
+    "browser": true
+  }
+}

VirtualList.html

@@ -0,0 +1,169 @@
+<script>
+	import { onMount, tick } from 'svelte';
+
+	// props
+	export let items;
+	export let height = '100%';
+	export let itemHeight;
+
+	let foo;
+
+	// read-only, but visible to consumers via bind:start
+	export let start = 0;
+	export let end = 0;
+
+	// local state
+	let height_map = [];
+	let rows;
+	let viewport;
+	let contents;
+	let viewport_height = 0;
+	let visible;
+	let mounted;
+
+	let top = 0;
+	let bottom = 0;
+	let average_height;
+
+	$: visible = items.slice(start, end).map((data, i) => {
+		return { index: i + start, data };
+	});
+
+	// whenever `items` changes, invalidate the current heightmap
+	$: if (mounted) refresh(items, viewport_height);
+
+	async function refresh(items, viewport_height) {
+		const { scrollTop } = viewport;
+
+		await tick(); // wait until the DOM is up to date
+
+		let content_height = top - scrollTop;
+		let i = start;
+
+		while (content_height < viewport_height && i < items.length) {
+			let row = rows[i - start];
+
+			if (!row) {
+				end = i + 1;
+				await tick(); // render the newly visible row
+				row = rows[i - start];
+			}
+
+			const row_height = height_map[i] = itemHeight || row.offsetHeight;
+			content_height += row_height;
+			i += 1;
+		}
+
+		end = i;
+
+		const remaining = items.length - end;
+		average_height = (top + content_height) / end;
+
+		bottom = remaining * average_height;
+		height_map.length = items.length;
+	}
+
+	async function handle_scroll() {
+		const { scrollTop } = viewport;
+
+		const old_start = start;
+
+		for (let v = 0; v < rows.length; v += 1) {
+			height_map[start + v] = itemHeight || rows[v].offsetHeight;
+		}
+
+		let i = 0;
+		let y = 0;
+
+		while (i < items.length) {
+			const row_height = height_map[i] || average_height;
+			if (y + row_height > scrollTop) {
+				start = i;
+				top = y;
+
+				break;
+			}
+
+			y += row_height;
+			i += 1;
+		}
+
+		while (i < items.length) {
+			y += height_map[i] || average_height;
+			i += 1;
+
+			if (y > scrollTop + viewport_height) break;
+		}
+
+		end = i;
+
+		const remaining = items.length - end;
+		average_height = y / end;
+
+		while (i < items.length) height_map[i++] = average_height;
+		bottom = remaining * average_height;
+
+		// prevent jumping if we scrolled up into unknown territory
+		if (start < old_start) {
+			await tick();
+
+			let expected_height = 0;
+			let actual_height = 0;
+
+			for (let i = start; i < old_start; i +=1) {
+				if (rows[i - start]) {
+					expected_height += height_map[i];
+					actual_height += itemHeight || rows[i - start].offsetHeight;
+				}
+			}
+
+			const d = actual_height - expected_height;
+			viewport.scrollTo(0, scrollTop + d);
+		}
+
+		// TODO if we overestimated the space these
+		// rows would occupy we may need to add some
+		// more. maybe we can just call handle_scroll again?
+	}
+
+	// trigger initial refresh
+	onMount(() => {
+		rows = contents.getElementsByTagName('svelte-virtual-list-row');
+		mounted = true;
+	});
+</script>
+
+<style>
+	svelte-virtual-list-viewport {
+		position: relative;
+		overflow-y: auto;
+		-webkit-overflow-scrolling:touch;
+		display: block;
+	}
+
+	svelte-virtual-list-contents, svelte-virtual-list-row {
+		display: block;
+	}
+
+	svelte-virtual-list-row {
+		overflow: hidden;
+	}
+</style>
+
+<svelte-virtual-list-viewport
+	bind:this={viewport}
+	bind:offsetHeight={viewport_height}
+	on:scroll={handle_scroll}
+	style="height: {height};"
+>
+	<svelte-virtual-list-contents
+		bind:this={contents}
+		style="padding-top: {top}px; padding-bottom: {bottom}px;"
+	>
+		{#each visible as row (row.index)}
+			<svelte-virtual-list-row>
+				<slot item={row.data}>Missing template</slot>
+			</svelte-virtual-list-row>
+		{/each}
+	</svelte-virtual-list-contents>
+</svelte-virtual-list-viewport>

package.json

@@ -2,26 +2,25 @@
   "name": "@sveltejs/svelte-virtual-list",
   "version": "2.2.1",
   "description": "A <VirtualList> component for Svelte apps",
-  "svelte": "src/VirtualList.html",
-  "module": "index.mjs",
-  "main": "index.js",
+  "svelte": "VirtualList.html",
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -cw",
     "prepublishOnly": "npm test",
     "test": "node test/runner.js",
     "test:browser": "npm run build && serve test/public",
-    "pretest": "npm run build"
+    "pretest": "npm run build",
+    "lint": "eslint src/VirtualList.html"
   },
   "devDependencies": {
+    "eslint": "^5.12.1",
+    "eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git",
     "port-authority": "^1.0.5",
     "puppeteer": "^1.9.0",
-    "rollup": "^0.66.6",
+    "rollup": "^1.1.2",
     "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-svelte": "^4.3.2",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-svelte": "^5.0.1",
     "sirv": "^0.2.2",
-    "svelte": "^2.13.5",
+    "svelte": "^3.0.0-beta.2",
     "tap-diff": "^0.1.1",
     "tap-dot": "^2.0.0",
     "tape-modern": "^1.1.1"

rollup.config.js

@@ -5,13 +5,11 @@ import pkg from './package.json';
 
 export default [
 	{
-		input: 'src/VirtualList.html',
-		output: [
-			{ file: pkg.module, 'format': 'es' },
-			{ file: pkg.main, 'format': 'umd', name: 'VirtualList' }
-		],
+		input: 'test/src/index.js',
+		output: { file: 'test/public/bundle.js', 'format': 'iife' },
 		plugins: [
 			resolve(),
+			commonjs(),
 			svelte()
 		]
 	},