diff --git a/.travis.yml b/.travis.yml
index 8524235..5ae4894 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,3 +1,3 @@
language: node_js
node_js:
- - 4
+ - 10
diff --git a/example/assets/favicon.ico b/example/assets/favicon.ico
new file mode 100644
index 0000000..0741914
Binary files /dev/null and b/example/assets/favicon.ico differ
diff --git a/example/assets/icon.png b/example/assets/icon.png
new file mode 100644
index 0000000..52d1623
Binary files /dev/null and b/example/assets/icon.png differ
diff --git a/example/index.js b/example/index.js
new file mode 100644
index 0000000..9c3463a
--- /dev/null
+++ b/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 => {row}
;
+
+export default class App extends Component {
+ render() {
+ return (
+
+
preact-virtual-list-example
+
+
+ );
+ }
+}
diff --git a/example/manifest.json b/example/manifest.json
new file mode 100644
index 0000000..30f1f3d
--- /dev/null
+++ b/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"
+ }
+ ]
+}
diff --git a/example/style.css b/example/style.css
new file mode 100644
index 0000000..b6d29e3
--- /dev/null
+++ b/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;
+}
diff --git a/package.json b/package.json
index 2423250..1d68594 100644
--- a/package.json
+++ b/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": "*"
diff --git a/rollup.config.js b/rollup.config.js
deleted file mode 100644
index 89325e2..0000000
--- a/rollup.config.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import babel from 'rollup-plugin-babel';
-import preset from 'babel-preset-es2015-minimal-rollup';
-
-export default {
- plugins: [
- babel({
- babelrc: false,
- sourceMap: true,
- exclude: 'node_modules/**',
- presets: ['stage-0'],
- plugins: [
- 'transform-class-properties',
- ['transform-react-jsx', { pragma:'h' }]
- ].concat(preset.plugins)
-
- // Waiting on https://github.com/rollup/rollup-plugin-babel/issues/47
- // presets: [
- // 'stage-0',
- // 'es2015-minimal-rollup'
- // ],
- // plugins: [
- // 'transform-class-properties',
- // ['transform-react-jsx', { pragma:'h' }]
- // ]
- })
- ]
-};
diff --git a/test/e2e.test.js b/test/e2e.test.js
new file mode 100644
index 0000000..a940131
--- /dev/null
+++ b/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');
+ });
+});
diff --git a/test/index.js b/test/index.js
deleted file mode 100644
index 3135292..0000000
--- a/test/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { expect } from 'chai';
-import VirtualList from '../src';
-/**@jsx h */
-
-/*eslint-env mocha*/
-
-describe('preact-virtual-list', () => {
- it('should export a class', () => {
- expect(VirtualList).to.be.a('function');
- });
-
- xit('should have proper tests', () => {});
-});
diff --git a/test/jest-puppeteer.config.js b/test/jest-puppeteer.config.js
new file mode 100644
index 0000000..d8956d1
--- /dev/null
+++ b/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
+ }
+};
diff --git a/test/unit.test.js b/test/unit.test.js
new file mode 100644
index 0000000..743d8f7
--- /dev/null
+++ b/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(
+ {row}
}
+ 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, `
+
+ `);
+ });
+});