Fix height issue & Use puppeteer-core

VirtualList.svelte

@@ -20,7 +20,17 @@
 
 	let top = 0;
 	let bottom = 0;
-	let average_height;
+	let average_height = 0;
+
+	$: {
+		if (items.length > 0) {
+			const remaining = items.length - end;
+			if (remaining > 0) bottom = remaining * average_height;
+			else bottom = 0;
+		} else {
+			bottom = 0;
+		}
+	}
 
 	$: visible = items.slice(start, end).map((data, i) => {
 		return { index: i + start, data };
@@ -59,10 +69,8 @@
 
 		end = i;
 
-		const remaining = items.length - end;
 		average_height = (top + content_height) / end;
 
-		bottom = remaining * average_height;
 		height_map.length = items.length;
 
 	}
@@ -101,11 +109,9 @@
 
 		end = i;
 
-		const remaining = items.length - end;
 		average_height = y / end;
 
 		while (i < items.length) height_map[i++] = average_height;
-		bottom = remaining * average_height;
 
 		// TODO if we overestimated the space these
 		// rows would occupy we may need to add some
@@ -118,14 +124,26 @@
 		const _itemHeight = itemHeight || average_height;
 		const distance = itemsDelta * _itemHeight;
 		opts = {
-			left: 0,
 			top: scrollTop + distance,
-			behavior: 'smooth',
 			...opts
 		};
 		viewport.scrollTo(opts);
 	}
 
+	/**
+	 * @param node {HTMLElement}
+	 * @param _parameters {any}
+	 */
+	function bindOffsetHeight(node, _parameters) {
+		function update() {
+			viewport_height = node.offsetHeight
+		}
+		update()
+		node.addEventListener("scroll", update)
+		node.addEventListener("resize", update)
+		return {}
+	}
+
 	// trigger initial refresh
 	onMount(() => {
 		rows = contents.getElementsByTagName('svelte-virtual-list-row');
@@ -149,6 +167,7 @@
 		overflow: hidden;
 	}
 </style>
+	<!-- use:bindOffsetHeight -->
 
 <svelte-virtual-list-viewport
 	bind:this={viewport}

package.json

@@ -14,19 +14,22 @@
     "lint": "eslint src/VirtualList.svelte"
   },
   "devDependencies": {
-    "eslint": "^5.12.1",
+    "@rollup/plugin-commonjs": "^22.0.0-14",
+    "@rollup/plugin-node-resolve": "^13",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "eslint": "^6",
     "eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git",
     "port-authority": "^1.0.5",
-    "puppeteer": "^1.9.0",
-    "rollup": "^1.1.2",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
+    "puppeteer-core": "^13.6.0",
+    "rollup": "^2.68",
     "rollup-plugin-svelte": "^6.1.1",
     "sirv": "^0.2.2",
     "svelte": "^3.0.0-beta.2",
     "tap-diff": "^0.1.1",
     "tap-dot": "^2.0.0",
-    "tape-modern": "^1.1.1"
+    "tape-modern": "^1.1.1",
+    "tslib": "^2.4.0",
+    "typescript": "^3.7.0"
   },
   "repository": "https://github.com/gitbreaker222/svelte-virtual-list",
   "author": "Rich Harris",

rollup.config.js

@@ -1,17 +1,20 @@
 import svelte from 'rollup-plugin-svelte';
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
 import pkg from './package.json';
 
+const plugins = [
+	resolve(),
+	typescript(),
+	commonjs(),
+	svelte(),
+]
 export default [
 	{
 		input: 'test/src/index.js',
 		output: { file: 'test/public/bundle.js', 'format': 'iife' },
-		plugins: [
-			resolve(),
-			commonjs(),
-			svelte()
-		]
+		plugins,
 	},
 
 	// tests
@@ -21,10 +24,6 @@ export default [
 			file: 'test/public/bundle.js',
 			format: 'iife'
 		},
-		plugins: [
-			resolve(),
-			commonjs(),
-			svelte()
-		]
+		plugins,
 	}
 ];

test/runner.js

@@ -1,7 +1,7 @@
 const http = require('http');
 const ports = require('port-authority');
 const sirv = require('sirv');
-const puppeteer = require('puppeteer');
+const puppeteer = require('puppeteer-core');
 
 async function go() {
 	const port = await ports.find(1234);