Mixin loader and client-side mixin running

plugins/lfa-userspace/tasks/jade-fast-compiler.js → plugins/lfa-compilation/lib/jade-fast-compiler.js

@@ -14,8 +14,6 @@ function extractMixins(r) {
 JadeFastCompiler.newContext = function newContext() {
   return {
     jade: jade,
-    jade_mixins: {},
-    self: {},
   };
 };
 
@@ -28,13 +26,14 @@ JadeFastCompiler.shimmedContext = function shimmedContext() {
 JadeFastCompiler.extensibleBundle = function extensibleBundle(code) {
   var template = [
     '(function template(context, locals, use_buf) {',
-      'var buf = [];',
+      'var buf = context.buf = context.buf || [];',
+      'buf.length = 0;',
       'var jade = context.jade;',
       'var jade_mixins = context.jade_mixins = context.jade_mixins || {};',
       'var jade_interp;',
-      'var self = context.self = ((locals === false) ? context.self : (locals || {}));',
-      code,
-      'if (use_buf === false) { return buf.join(""); }',
+      'context.self = ((locals === false) ? context.self : locals) || {};',
+      code.replace(/self/g, 'context.self'),
+      'if (use_buf !== false) { return buf.join(""); }',
     '})'
   ].join('\n');
   return template;

plugins/lfa-compilation/web_modules/mixin-loader.js

@@ -0,0 +1,23 @@
+var JadeFastCompiler = require('../lib/jade-fast-compiler');
+
+module.exports = function (content) {
+  this.cacheable(true);
+  var next = this.async();
+
+  var opts = { filename: this.resourcePath };
+
+  JadeFastCompiler.compileBundle(content, opts)
+    .then(function (bundle) {
+      var newContent = [
+        'var lfaMixins = window.lfaMixins = window.lfaMixins || [];\n',
+        'var mixins = ', bundle, ';\n',
+        'lfaMixins.push(mixins);\n',
+        'module.exports = mixins;\n',
+      ].join('');
+
+      next(null, newContent);
+    })
+    .catch(function (err) {
+      next(err);
+    });
+};

plugins/lfa-core/frontend/js/mixin-compiler.js

@@ -0,0 +1,36 @@
+var jadeRuntime = require('jade/lib/runtime');
+var _ = require('lodash');
+
+var jadeContext = null;
+
+function buildContext() {
+  jadeContext = {
+    jade: jadeRuntime,
+  };
+
+  _.each(window.lfaMixins || [], function (mixins) {
+    mixins(jadeContext, false, false);
+  });
+}
+
+module.exports = function (template) {
+  try {
+    if (!jadeContext) {
+      buildContext();
+    }
+
+    return template(jadeContext);
+  } catch (ex) {
+    var trace = ex.stack || ex.toString();
+    return [
+      '<div class=".jade-error">',
+        '<h2 class=".jade-error-title">',
+          'Chapter loading error',
+        '</h2>',
+        '<pre class=".jade-error-trace">',
+          trace,
+        '</pre>',
+      '</div>',
+    ].join('');
+  }
+};

plugins/lfa-core/frontend/js/views/chapter.js

@@ -5,6 +5,7 @@ require('stacktable');
 require('fluidbox');
 
 var templates = require('templates');
+var mixinCompiler = require('../mixin-compiler');
 var Chapters = require('../chapters');
 var Prefetcher = require('../prefetcher');
 var App = require('../app');
@@ -119,7 +120,7 @@ var ChapterView = Backbone.View.extend({
     Chapters.asyncLoad(chapter, this.chapterLoaded.bind(this, chapter));
   },
 
-  chapterLoaded: function(chapter, error, htmlData) {
+  chapterLoaded: function(chapter, error, template) {
     // For when the chapters come in the wrong order
     if (App.book.currentChapter !== chapter) { return; }
 
@@ -128,7 +129,7 @@ var ChapterView = Backbone.View.extend({
     });
 
     var front, back;
-    var data = htmlData();
+    var data = mixinCompiler(template);
     if (data && data.indexOf("<section>") !== -1) {
       front = "<article>";
       back = "</article>";

plugins/lfa-userspace/frontend/js/index.js

@@ -1,5 +1,10 @@
+require('!!../../loaders/replace-project-path.js!./mixins.js');
+require('!!mixin-loader!../mixins/index.jade');
+
 module.exports = {
   BuildInfo: require('build-info'),
   HotChapterReload: require('./hot-chapter-reload'),
-  UserJS: require('!!../../loaders/replace-loader.js!./userjs.js'),
+  UserJS: require('!!../../loaders/replace-project-path.js!./userjs.js'),
 };
+
+console.log(module.exports);

plugins/lfa-userspace/frontend/js/mixins.js

@@ -0,0 +1,8 @@
+var projectMixinsModuleId = null;
+try {
+  projectMixinsModuleId = require.resolve('!!mixin-loader!__PROJ_PATH__/mixins/index.jade');
+} catch (ex) {}
+
+if (projectMixinsModuleId !== null) {
+  __webpack_require__(projectMixinsModuleId);
+}

plugins/lfa-userspace/frontend/js/userjs.js

@@ -1,9 +1,9 @@
 var userModuleId = null;
 
 try {
-  var userModuleId = resolve('__REPLACE__');
+  var userModuleId = require.resolve('__PROJ_PATH__/js');
 } catch (ex) {}
 
 if (userModuleId !== null) {
-  __webpack_require__(userModuleId);
+  module.exports = __webpack_require__(userModuleId);
 }

plugins/lfa-userspace/frontend/mixins/index.jade

@@ -1,12 +1,15 @@
+mixin meta(key, value)
+  - if (self.meta) {
+  -   self.meta[key] = value;
+  - }
+
 mixin title(title, subtitle)
-  - self.meta.title = title;
-  - if (subtitle) { self.meta.subtitle = subtitle; }
+  +meta('title', title)
+  if (subtitle)
+    +meta('subtitle', subtitle)
 
 mixin subtitle(subtitle)
-  - self.meta.subtitle = subtitle;
-
-mixin meta(key, value)
-  - self.meta[key] = value;
+  +meta('subtitle', subtitle)
 
 mixin hidden_from_toc()
   +meta('noToC', true)

plugins/lfa-userspace/loaders/replace-loader.js → plugins/lfa-userspace/loaders/replace-project-path.js

@@ -3,6 +3,5 @@ var path = require('path');
 module.exports = function (content) {
   this.cacheable(true);
   var lfa = this.options.lfa;
-  var userJsPath = path.join(lfa.config.projectPath, 'js');
-  return content.replace(/__REPLACE__/, userJsPath);
+  return content.replace(/__PROJ_PATH__/, lfa.config.projectPath);
 };

plugins/lfa-userspace/tasks/safe-eval.js

@@ -0,0 +1,5 @@
+module.exports = function (f) {
+  var x;
+  eval('x = ' + f);
+  return x;
+};

plugins/lfa-userspace/tasks/text-jade.js

@@ -1,4 +1,4 @@
-var JadeFastCompiler = require('./jade-fast-compiler');
+var JadeFastCompiler = require('../../lfa-compilation/lib/jade-fast-compiler');
 var through = require('through2');
 var gutil = require('gulp-util');
 var path = require('path');
@@ -7,6 +7,7 @@ var _ = require('lodash');
 var when = require('when');
 var nodefn = require('when/node');
 var fs = require('fs');
+var safeEval = require('./safe-eval');
 
 var PLUGIN_NAME = 'text-jade';
 var boilerplate = [
@@ -24,7 +25,7 @@ function escapeRegExp(string) {
 // minimal jade context, loaded only with the +meta mixins
 var jadeContext = null;
 function getJadeContext() {
-  if (jadeContext) { return jadeContext; }
+  if (jadeContext) { return when(jadeContext); }
 
   jadeContext = JadeFastCompiler.shimmedContext();
 
@@ -34,8 +35,7 @@ function getJadeContext() {
       return JadeFastCompiler.compileBundle(contents.toString('utf8'), { filename: fpath });
     })
     .then(function (template) {
-      var mixins;
-      eval('mixins = ' + template);
+      var mixins = safeEval(template);
       mixins(jadeContext, false, false);
       return jadeContext;
     });
@@ -61,9 +61,7 @@ module.exports = function textJadeTasks(lfa) {
 
         when
           .try(function () {
-            return JadeFastCompiler.compileBundle(
-              file.contents.toString('utf8'),
-              { filename: file.path });
+            return JadeFastCompiler.compileBundle(file.contents.toString('utf8'), { filename: file.path });
           })
           .then(function (template) {
             // We're now trying to extract the +meta calls from the template
@@ -73,28 +71,32 @@ module.exports = function textJadeTasks(lfa) {
 
             var shimmedFunction = function () {};
             try {
-              eval('shimmedFunction = ' + template);
+              shimmedFunction = safeEval(template);
             } catch (err) {
               err.fileName = file.path;
               throw err;
             }
 
-            // Running the jade file now will probably fail, especially since
-            // there are no mixins loaded, but +meta calls are usually at the start
-            // of the file and we will reach them without failing
-            try {
-              shimmedFunction(getJadeContext(), locals, false);
-            } catch (ex) {}
-
-            boilerplate[1] = url;
-            boilerplate[3] = template;
-            var newFile = new File({
-              base: '',
-              history: file.history.concat([path.join('chapters', url + '.js')]),
-              contents: new Buffer(boilerplate.join(''), 'utf8'),
-            });
-            newFile.textMeta = locals.meta;
-            cb(null, newFile);
+            return getJadeContext()
+              .then(function (context) {
+                // Running the jade file now will probably fail, especially since
+                // there are no mixins loaded, but +meta calls are usually at the start
+                // of the file and we will reach them without failing
+                try { shimmedFunction(context, locals, false); } catch (ex) {}
+              })
+              .then(function () {
+                boilerplate[1] = url;
+                boilerplate[3] = template;
+
+                var newFile = new File({
+                  base: '',
+                  history: file.history.concat([path.join('chapters', url + '.js')]),
+                  contents: new Buffer(boilerplate.join(''), 'utf8'),
+                });
+
+                newFile.textMeta = locals.meta;
+                cb(null, newFile);
+              });
           })
           .catch(function(err) {
             return cb(new gutil.PluginError(PLUGIN_NAME, err));