Add webpack and webpack-dev-server to build and run the examples
Add screenshot generation via puppeteer (timeout if window.dispatchEvent(new CustomEvent('pex-screenshot')) is not called by the example)
Add screenshot-diff via pixelmatch
Typical dev workflow:
Working on/checking the current status of examples: npm start
Updating live examples on gh-pages (probably on every release):
# Start server
npm start
Generate all screenshots
npm run screenshots
Build/optimise examples via webpack
npm run build
- Compare code updates via image diff:
```bash
# Generate all (about 1 to 2 minutes)
npm run screenshots
# or one screenshot(s)
npm run screenshots -- example-name
# Run diff between newly generated screenshot and version on master
npm run diff -- example-name
# See generated file in examples/screenshot/example-name-diff.png
PS: diff testable by changing https://raw.githubusercontent.com/pex-gl/pex-renderer/master/examples/screenshots/${currentExample}.png to https://raw.githubusercontent.com/pex-gl/pex-renderer/examples-screenshot/examples/screenshots/${currentExample}.png
window.dispatchEvent(new CustomEvent('pex-screenshot'))
is not called by the example)Typical dev workflow:
npm start
Generate all screenshots
npm run screenshots
Build/optimise examples via webpack
npm run build
PS: diff testable by changing
https://raw.githubusercontent.com/pex-gl/pex-renderer/master/examples/screenshots/${currentExample}.png
tohttps://raw.githubusercontent.com/pex-gl/pex-renderer/examples-screenshot/examples/screenshots/${currentExample}.png