Microbundle

.travis.yml

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - 4
+  - 10

example/index.js

@@ -0,0 +1,20 @@
+import { Component } from 'preact';
+
+import VirtualList from '../src';
+import './style';
+
+const DATA = [];
+for (let x=1e5; x--; ) DATA[x] = `Item #${x+1}`;
+
+const Row = row => <div class="row">{row}</div>;
+
+export default class App extends Component {
+	render() {
+		return (
+			<div>
+				<h1>preact-virtual-list-example</h1>
+				<VirtualList data={DATA} rowHeight={30} renderRow={Row} class="list" id="vl" />
+			</div>
+		);
+	}
+}

example/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "preact-virtual-list-example",
+  "short_name": "preact-virtual-list-example",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
+  "icons": [
+    {
+      "src": "/assets/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}

example/style.css

@@ -0,0 +1,30 @@
+html, body {
+	font: 14px/1.21 'Helvetica Neue', arial, sans-serif;
+	font-weight: 400;
+}
+
+h1 {
+	text-align: center;
+}
+
+.list {
+	position: absolute;
+	top: 20%;
+	left: 20%;
+	height: 60%;
+	width: 60%;
+	border: 1px solid #CCC;
+	background: #FFF;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+.row {
+	position: relative;
+	display: block;
+	height: 30px;
+	line-height: 30px;
+	padding: 0 20px;
+	box-shadow: inset 0 -1px 0 #DDD;
+	overflow: hidden;
+}

package.json

@@ -1,35 +1,66 @@
 {
   "name": "preact-virtual-list",
-  "amdName": "VirtualList",
-  "version": "0.3.1",
+  "version": "0.3.1b",
   "description": "Virtual list, renders only visible items.",
+  "source": "src",
+  "module": "dist/preact-virtual-list.es.js",
   "main": "dist/preact-virtual-list.js",
-  "minified:main": "dist/preact-virtual-list.min.js",
-  "jsnext:main": "src/index.js",
+  "umd:main": "dist/preact-virtual-list.umd.js",
   "scripts": {
-    "build": "npm-run-all transpile optimize minify",
-    "transpile": "rollup -c rollup.config.js -m ${npm_package_main}.map -f umd -n $npm_package_amdName $npm_package_jsnext_main -o $npm_package_main",
-    "optimize": "uglifyjs $npm_package_main -bc -o $npm_package_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_main}.map",
-    "minify": "uglifyjs $npm_package_main -cm -o $npm_package_minified_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_minified_main}.map",
-    "test": "eslint {src,test} && mocha --compilers js:babel-register test/**/*.js",
-    "prepublish": "npm run build",
-    "release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
+    "build": "npm-run-all --silent -p build:main -s size",
+    "build:main": "microbundle",
+    "size": "strip-json-comments --no-whitespace dist/preact-virtual-list.js | gzip-size && bundlesize",
+    "fixreadme": "node -e 'var fs=require(\"fs\");fs.writeFileSync(\"README.md\", fs.readFileSync(\"README.md\", \"utf8\").replace(/^-   /gm, \"- \"))'",
+    "lint": "eslint src",
+    "prepare": "npm t",
+    "release": "npm t && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
+    "test": " npm run build && JEST_PUPPETEER_CONFIG=test/jest-puppeteer.config.js jest --runInBand && bundlesize",
+    "example": "npx preact watch --src=./example"
   },
+  "eslintconfig": {
+    "extends": "eslint-config-developit",
+    "rules": {
+      "prefer-rest-params": 0
+    }
+  },
+  "bundlesize": [
+    {
+      "path": "./dist/preact-virtual-list.js",
+      "maxSize": "744B"
+    }
+  ],
   "babel": {
+    "env": {
+      "test": {
+        "plugins": [
+          "@babel/plugin-transform-runtime"
+        ]
+      }
+    },
     "presets": [
-      "es2015-minimal",
-      "stage-0"
+      "@babel/preset-env"
     ],
     "plugins": [
-      "transform-class-properties",
       [
-        "transform-react-jsx",
+        "@babel/plugin-transform-react-jsx",
         {
           "pragma": "h"
         }
+      ],
+      [
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
       ]
     ]
   },
+  "jest": {
+    "preset": "jest-puppeteer"
+  },
+  "files": [
+    "src"
+  ],
   "keywords": [
     "preact",
     "virtual",
@@ -46,24 +77,27 @@
   },
   "homepage": "https://github.com/developit/preact-virtual-list",
   "devDependencies": {
-    "babel": "^6.5.2",
-    "babel-eslint": "^6.0.2",
-    "babel-plugin-transform-class-properties": "^6.6.0",
-    "babel-plugin-transform-react-jsx": "^6.7.5",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-es2015-minimal": "^1.1.0",
-    "babel-preset-es2015-minimal-rollup": "^2.0.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.7.2",
-    "chai": "^3.5.0",
-    "eslint": "^2.8.0",
-    "eslint-plugin-react": "^4.3.0",
-    "mocha": "^2.4.5",
-    "npm-run-all": "^1.7.0",
-    "preact": "^4.6.2",
-    "rollup": "^0.25.8",
-    "rollup-plugin-babel": "^2.4.0",
-    "uglify-js": "^2.6.2"
+    "@babel/core": "^7.0.0-0",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "7.5.5",
+    "babel-jest": "^24.8.0",
+    "bundlesize": "^0.17.1",
+    "eslint": "^4.16.0",
+    "eslint-config-developit": "^1.1.1",
+    "gzip-size-cli": "^2.1.0",
+    "html-looks-like": "^1.0.3",
+    "jest": "^24.3.1",
+    "jest-puppeteer": "^4.3.0",
+    "microbundle": "^0.11.0",
+    "npm-run-all": "^4.1.2",
+    "preact": "^8.4.2",
+    "preact-cli": "^2.2.1",
+    "preact-render-to-string": "^4.1.0",
+    "puppeteer": "^1.18.1",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "strip-json-comments-cli": "^1.0.1"
   },
   "peerDependencies": {
     "preact": "*"

test/e2e.test.js

@@ -0,0 +1,19 @@
+
+// eslint-disable-next-line no-undef
+jest.setTimeout(10000);
+
+// eslint-disable-next-line no-undef
+describe('preact-virtual-list', () => {
+
+	// eslint-disable-next-line no-undef
+	beforeAll(async () => {
+		// eslint-disable-next-line no-undef
+		await page.goto('http://localhost:8080');
+	});
+
+	// eslint-disable-next-line no-undef
+	it('should be able to retrieve example page', async () => {
+		// eslint-disable-next-line no-undef
+		await expect(page.title()).resolves.toMatch('preact-virtual-list-example');
+	});
+});

test/jest-puppeteer.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	launch: {
+		headless: process.env.HEADLESS !== 'false',
+		devtools: process.env.HEADLESS === 'false'
+	},
+	server: {
+		command: 'npm run example',
+		port: 8080
+	}
+};

test/unit.test.js

@@ -0,0 +1,39 @@
+import { h } from 'preact';
+import render from 'preact-render-to-string';
+import htmlLooksLike from 'html-looks-like';
+
+import VirtualList from '../src';
+
+// eslint-disable-next-line no-undef
+describe('preact-virtual-list', () => {
+	// eslint-disable-next-line no-unused-vars
+	const instance = render(
+		<VirtualList
+			data={['a', 'b', 'c']}
+			renderRow={ row => <div>{row}</div> }
+			rowHeight={22}
+			overscanCount={10}
+			sync
+		/>);
+
+	// eslint-disable-next-line no-undef
+	it('should export a class', () => {
+		// eslint-disable-next-line no-undef
+		expect(VirtualList).toBeInstanceOf(Function);
+	});
+
+	// eslint-disable-next-line no-undef
+	it('should render a simple list', () => {
+		htmlLooksLike(instance, `
+			<div>
+				<div style="position:relative; overflow:hidden; width:100%; min-height:100%; height:66px;">
+					<div style="position:absolute; top:0; left:0; height:100%; width:100%; overflow:visible; top:0px;">
+						<div>a</div>
+						<div>b</div>
+						<div>c</div>
+					</div>
+				</div>
+			</div>
+		`);
+	});
+});