pzprjs icon indicating copy to clipboard operation
pzprjs copied to clipboard

use ES6 modules

Open alicebob opened this issue 4 years ago • 0 comments

This changes the pzpr module to hang together using import ... from ... (the modern way to do imports nowadays, it seems).

Previously the pzpr module was build by concating all files together, and then use Grunt to uglify the result. Now there is a single /src/pzpr.js which imports all required modules. It's converted to something the browser can use via rollup. The pzpr.js file still builds a global pzpr object, since the UI module and rules.html expect that. The idea is that nothing changes in the final JS file.

You can kinda use this directly from nodejs now, but support for the ES6 modules seems iffy. mocha uses the esm module which works nicely.

notes

  • ~~All variants must still be ported. I only did 2 of them so far. Until then tests will break~~ edit: done, and tests pass
  • I didn't expand the git.version string in pzpr/core.js yet
  • rollup can do "chunks", if you prefer smaller files over something huge.
  • modules are in 'strict' mode, which gave some problems with code changing "frozen" objects (which is allowed, but ignored, in non-strict mode). c0158cbd6c9 deals with that
  • I had to upgrade travis to use a less ancient node version. I used 10 because that's what I have locally
  • I didn't run prettify, since it'll mess up almost every file

deploy

  • I made the rollup action a makefile target, but there is a rolllup grunt module, so that could be used instead ~~(I had some troubles with it, will try again later)~~ edit: I tried again and fails. Makefile it is.
  • All variants code is now bundled right in the main pzpr.js, so there is no need to copy them in dist
  • Somewhere along the line the candle file doesn't get bundled, so that's an explicit copy to ./dist/ now

ES6 modules crash course

Either there are multiple things exported:

var color = "green";
var foo = "bar";
export {color: color, foo: foo}
import {foo} from './library.js'

Or there is a single thing:

var colors = ["green", "red", "infra"];
export default colors
import colors from './colors.js';

Evaluation

I do think using the ES6 modules is a good goal. It's a nice modernization step. It's unfortunately way too many changes for a single PR. What I can do is break this up in smaller PRs, which would still use some concatenation, and then work towards the state in this PR in a few separate, smaller, steps.

alicebob avatar Apr 12 '20 10:04 alicebob