HTML templating

HTML as a language is static. However, when we start to define state data separately the HTML needs to be able to include data values as variables.

Hence the use of templates. There are many options - React and Hyperapp use JSX, I've so far stuck with Pug because I still like to keep the code and logic of state management separate from the display/UI.

Pug scripts are defined in the '/views' folder. These pseudo html files are used to create html either directly or via an intermediate compile process run by pug-vdom and that is fed into the hyperapp framework.

• App.pug is compiled by the start script in package.json using 'compilePug.js'.

  ○ The start script also copies key PWA files directly (e.g. sw.js and default.html), using the utility cpx (because parcel doesn't).

  ○ Parcel is a 'bundler' which grabs ./src/index.html and interprets the required files and their associated dependencies - it is efficient because it only includes the bits of the dependencies actually used rather than everything, making the code transferred to the user smaller. It also allows us to use the import method for including dependencies in the browser code, which is more powerful (but note is not yet supported by Node on the server - you still need to use require on the server). Parcel does not really support PWA apps at this time, and tries to rename files that shouldn't be (e.g. sw.js and default.html) which confuses the code which uses them!

• Mixins.pug is used by app.pug and provides functions (a.k.a. 'mixins') to create repeated pieces of html code. You can pass arguments to mixins to control what they do and the mixin returns Pug code which fits in directly where the mixin was called from. The Pug interpreter will then create a single complete html file based on the result of interpreting app.pug, including the result of running all its mixins. Syntax errors are reported when 'compilePug.js' is run.