client/build: true template precompiling

Rather than putting templates in DOM nodes, output JS functions
themselves.

This fixes transpiling for IE11, where ES6 parts of the templates
wouldn't get passed through Babel.

client/build.js

@@ -55,42 +55,50 @@ function getConfig() {
     return config;
 }
 
-function bundleHtml(config) {
+function minifyJs(path) {
-    const minify = require('html-minifier').minify;
+    return require('uglify-js').minify(path).code;
-    const baseHtml = fs.readFileSync('./html/index.htm', 'utf-8');
+}
-    const minifyOptions = {
+
+function minifyCss(css) {
+    return require('csso').minify(css);
+}
+
+function minifyHtml(html) {
+    return require('html-minifier').minify(html, {
         removeComments: true,
         collapseWhitespace: true,
         conservativeCollapse: true,
-    };
+    }).trim();
-    glob('./html/**/*.tpl', {}, (er, files) => {
-        let templates = {};
-        for (const file of files) {
-            const name = path.basename(file, '.tpl').replace(/_/g, '-');
-            templates[name] = minify(
-                fs.readFileSync(file, 'utf-8'), minifyOptions);
 }
 
-        const templatesHolder = util.format(
+function bundleHtml(config) {
-            '<script type=\'text/javascript\'>' +
+    const lodash = require('lodash');
-            'var templates = %s;' +
+    const babelify = require('babelify');
-            '</script>',
+    const baseHtml = fs.readFileSync('./html/index.htm', 'utf-8');
-            JSON.stringify(templates));
-
     const finalHtml = baseHtml
-            .replace(/(<\/head>)/, templatesHolder + '$1')
         .replace(
             /(<title>)(.*)(<\/title>)/,
             util.format('$1%s$3', config.name));
+    fs.writeFileSync('./public/index.htm', minifyHtml(finalHtml));
 
-        fs.writeFileSync(
+    glob('./html/**/*.tpl', {}, (er, files) => {
-            './public/index.htm', minify(finalHtml, minifyOptions));
+        let compiledTemplateJs = '\'use strict\'\n';
+        compiledTemplateJs += 'let _ = require(\'lodash\');';
+        compiledTemplateJs += 'let templates = {};';
+        for (const file of files) {
+            const name = path.basename(file, '.tpl').replace(/_/g, '-');
+            const templateText = minifyHtml(fs.readFileSync(file, 'utf-8'));
+            const functionText = lodash.template(
+                templateText, {variable: 'ctx'}).source;
+            compiledTemplateJs += `templates['${name}'] = ${functionText};`;
+        }
+        compiledTemplateJs += 'module.exports = templates;';
+        fs.writeFileSync('./js/.templates.autogen.js', compiledTemplateJs);
         console.info('Bundled HTML');
     });
 }
 
 function bundleCss() {
-    const minify = require('csso').minify;
     const stylus = require('stylus');
     glob('./css/**/*.styl', {}, (er, files) => {
         let css = '';
@@ -98,24 +106,11 @@ function bundleCss() {
             css += stylus.render(
                 fs.readFileSync(file, 'utf-8'), {filename: file});
         }
-        fs.writeFileSync('./public/app.min.css', minify(css));
+        fs.writeFileSync('./public/app.min.css', minifyCss(css));
         console.info('Bundled CSS');
     });
 }
 
-function writeJsBundle(b, path, message, compress) {
-    const uglifyjs = require('uglify-js');
-    let outputFile = fs.createWriteStream(path);
-    b.bundle().pipe(outputFile);
-    outputFile.on('finish', function() {
-        if (compress) {
-            const result = uglifyjs.minify(path);
-            fs.writeFileSync(path, result.code);
-        }
-        console.info(message);
-    });
-}
-
 function bundleJs(config) {
     const browserify = require('browserify');
     const external = [
@@ -126,6 +121,18 @@ function bundleJs(config) {
         'page',
         'nprogress',
     ];
+
+    function writeJsBundle(b, path, message, compress) {
+        let outputFile = fs.createWriteStream(path);
+        b.bundle().pipe(outputFile);
+        outputFile.on('finish', function() {
+            if (compress) {
+                fs.writeFileSync(path, minifyJs(path));
+            }
+            console.info(message);
+        });
+    }
+
     glob('./js/**/*.js', {}, (er, files) => {
         if (!process.argv.includes('--no-vendor-js')) {
             let b = browserify();

client/js/.gitignore

@@ -1 +1 @@
-.config.autogen.json
+*.autogen.*

client/js/templates.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./.templates.autogen.js');

client/js/util/views.js

@@ -1,7 +1,7 @@
 'use strict';
 
 require('../util/polyfill.js');
-const lodash = require('lodash');
+const templates = require('../templates.js');
 const tags = require('../tags.js');
 const events = require('../events.js');
 const domParser = new DOMParser();
@@ -237,8 +237,7 @@ function getTemplate(templatePath) {
         console.error('Missing template: ' + templatePath);
         return null;
     }
-    const templateText = templates[templatePath].trim();
+    const templateFactory = templates[templatePath];
-    const templateFactory = lodash.template(templateText, {variable: 'ctx'});
     return ctx => {
         if (!ctx) {
             ctx = {};