Derby 2

.eslintrc

@@ -0,0 +1,44 @@
+{
+  "env": {
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
+  "globals": {
+    "window": false,
+    "document": false
+  },
+  "rules": {
+    "comma-style": [
+      2,
+      "last"
+    ],
+    "eqeqeq": ["error", "always", {"null": "ignore"}],
+    "indent": [
+      2,
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "new-cap": 2,
+    "quotes": [
+      2,
+      "single"
+    ],
+    "no-undef": 2,
+    "no-shadow": 0,
+    "no-unused-expressions": 2,
+    "no-cond-assign": [
+      2,
+      "except-parens"
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["test/**/*.mocha.js", "test/browser/*.js"],
+      "env": {"mocha": true, "node": true}
+    }
+  ]
+}

.github/workflows/test.yml

@@ -17,8 +17,9 @@ jobs:
     strategy:
       matrix:
         node:
-          - 12
           - 14
+          - 16
+          - 18
     timeout-minutes: 10
     steps:
       - uses: actions/checkout@v2
@@ -28,4 +29,4 @@ jobs:
       - name: Install
         run: npm install
       - name: Test
-        run: npm run test
+        run: npm run checks

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 *.swp
 node_modules
+.vscode

lib/App.js

@@ -18,6 +18,17 @@ var serializedViews = require('./_views');
 
 module.exports = App;
 
+globalThis.APPS = globalThis.APPS || new Map();
+
+App.register = function register(name) {
+  if (!globalThis.APPS.has(name)) {
+    globalThis.APPS.set(name, {
+      attached: false,
+      initialState: null,
+    });
+  }
+}
+
 function App(derby, name, filename, options) {
   EventEmitter.call(this);
   this.derby = derby;
@@ -33,6 +44,7 @@ function App(derby, name, filename, options) {
   this.page = null;
   this._pendingComponentMap = {};
   this._init(options);
+  App.register(name);
 }
 
 function createAppPage(derby) {
@@ -58,9 +70,10 @@ App.prototype._init = function() {
   // Must also wait for content ready so that bundle is fully downloaded.
   this._contentReady();
 };
+
 App.prototype._finishInit = function() {
-  var script = this._getScript();
-  var data = App._parseInitialData(script.nextSibling.innerHTML);
+  var script = this._getAppStateScript();
+  var data = App._parseInitialData(script.textContent);
   this.model.createConnection(data);
   this.emit('model', this.model);
   util.isProduction = data.nodeEnv === 'production';
@@ -72,7 +85,7 @@ App.prototype._finishInit = function() {
   this._waitForAttach = false;
   // Instead of attaching, do a route and render if a link was clicked before
   // the page finished attaching
-  if (this._cancelAttach) {
+  if (this._cancelAttach || this._isAttached()) {
     this.history.refresh();
     return;
   }
@@ -91,6 +104,27 @@ App.prototype._finishInit = function() {
   }
   this.emit('load', page);
 };
+
+App.prototype._isAttached = function isInitialized() {
+  var attached = globalThis.APPS.get(this.name).attached;
+  return attached;
+}
+
+App.prototype._persistInitialState = function persistInitialState(state) {
+  if (this._isAttached()) {
+    return;
+  }
+  globalThis.APPS.set(this.name, {
+    attached: true,
+    initialState: state,
+  });
+}
+
+App.prototype._initialState = function initialState() {
+  var initialState = globalThis.APPS.get(this.name).initialState;
+  return initialState;
+}
+
 // Modified from: https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js
 App.prototype._contentReady = function() {
   // Is the DOM ready to be used? Set to true once it occurs.
@@ -166,8 +200,8 @@ App.prototype._contentReady = function() {
   }
 };
 
-App.prototype._getScript = function() {
-  return document.querySelector('script[data-derby-app]');
+App.prototype._getAppStateScript = function() {
+  return document.querySelector('script[data-derby-app-state]');
 };
 
 App.prototype.use = util.use;

lib/AppForServer.js

@@ -26,8 +26,8 @@ if (module.require) {
 var STYLE_EXTENSIONS = ['.css'];
 var VIEW_EXTENSIONS = ['.html'];
 var COMPILERS = {
-  '.css': cssCompiler
-, '.html': htmlCompiler
+  '.css': cssCompiler,
+  '.html': htmlCompiler
 };
 function cssCompiler(file, filename, options) {
   return {css: file, files: [filename]};
@@ -116,102 +116,21 @@ AppForServer.prototype.createPage = function(req, res, next) {
 };
 
 AppForServer.prototype.bundle = function(backend, options, cb) {
-  var app = this;
-  if (typeof options === 'function') {
-    cb = options;
-    options = null;
-  }
-  options || (options = {});
-  if (options.minify == null) options.minify = util.isProduction;
-  // Turn all of the app's currently registered views into a javascript
-  // function that can recreate them in the client
-  var viewsSource = this._viewsSource(options);
-  var bundleFiles = [];
-  backend.once('bundle', function(bundle) {
-    bundle.require(path.dirname(__dirname), {expose: 'derby'});
-    // Hack to inject the views script into the Browserify bundle by replacing
-    // the empty _views.js file with the generated source
-    var viewsFilename = require.resolve('./_views');
-    bundle.transform(function(filename) {
-      if (filename !== viewsFilename) return through();
-      return through(
-        function write() {}
-      , function end() {
-          this.queue(viewsSource);
-          this.queue(null);
-        }
-      );
-    }, {global: true});
-    bundle.on('file', function(filename) {
-      bundleFiles.push(filename);
-    });
-    app.emit('bundle', bundle);
-  });
-  backend.bundle(app.filename, options, function(err, source, map) {
-    if (err) return cb(err);
-    app.scriptHash = crypto.createHash('md5').update(source).digest('hex');
-    source = source.replace('{{DERBY_SCRIPT_HASH}}', app.scriptHash);
-    source = source.replace(/['"]{{DERBY_BUNDLED_AT}}['"]/, Date.now());
-    if (app.watchFiles) {
-      app._autoRefresh(backend);
-      app._watchBundle(bundleFiles);
-    }
-    cb(null, source, map);
-  });
+  throw new Error(
+    'bundle implementation missing; use racer-bundler for implementation, or remove call to this method and use another bundler',
+  );
 };
 
 AppForServer.prototype.writeScripts = function(backend, dir, options, cb) {
-  var app = this;
-  this.bundle(backend, options, function(err, source, map) {
-    if (err) return cb(err);
-    dir = path.join(dir, 'derby');
-    if (!fs.existsSync(dir)) fs.mkdirSync(dir);
-    var filename = app.name + '-' + app.scriptHash;
-    var base = path.join(dir, filename);
-    app.scriptUrl = app.scriptBaseUrl + '/derby/' + filename + '.js';
-
-    // Write current map and bundle files
-    if (!(options && options.disableScriptMap)) {
-      app.scriptMapUrl = app.scriptMapBaseUrl +  '/derby/' + filename + '.map.json';
-      source += '\n//# sourceMappingURL=' + app.scriptMapUrl;
-      app.scriptMapFilename = base + '.map.json';
-      fs.writeFileSync(app.scriptMapFilename, map, 'utf8');
-    }
-    app.scriptFilename = base + '.js';
-    fs.writeFileSync(app.scriptFilename, source, 'utf8');
-
-    // Delete app bundles with same name in development so files don't
-    // accumulate. Don't do this automatically in production, since there could
-    // be race conditions with multiple processes intentionally running
-    // different versions of the app in parallel out of the same directory,
-    // such as during a rolling restart.
-    if (app.watchFiles) {
-      var appPrefix = app.name + '-';
-      var currentBundlePrefix = appPrefix + app.scriptHash;
-      var filenames = fs.readdirSync(dir);
-      for (var i = 0; i < filenames.length; i++) {
-        var filename = filenames[i];
-        if (filename.indexOf(appPrefix) !== 0) {
-          // Not a bundle for this app, skip.
-          continue;
-        }
-        if (filename.indexOf(currentBundlePrefix) === 0) {
-          // Current (newly written) bundle for this app, skip.
-          continue;
-        }
-        // Older bundle for this app, clean it up.
-        var oldFilename = path.join(dir, filename);
-        fs.unlinkSync(oldFilename);
-      }
-    }
-    cb && cb();
-  });
+  throw new Error(
+    'writeScripts implementation missing; use racer-bundler for implementation, or remove call to this method and use another bundler',
+  );
 };
 
 AppForServer.prototype._viewsSource = function(options) {
-  return '/*DERBY_SERIALIZED_VIEWS*/' +
-    'module.exports = ' + this.views.serialize(options) + ';' +
-    '/*DERBY_SERIALIZED_VIEWS_END*/';
+  return `/*DERBY_SERIALIZED_VIEWS ${this.name}*/\n` +
+    'module.exports = ' + this.views.serialize(options) + ';\n' +
+    `/*DERBY_SERIALIZED_VIEWS_END ${this.name}*/\n`;
 };
 
 AppForServer.prototype.serialize = function() {
@@ -229,10 +148,10 @@ AppForServer.prototype.serialize = function() {
     this.scriptMapUrl.slice(this.scriptMapBaseUrl.length) :
     this.scriptMapUrl;
   var serialized = JSON.stringify({
-    scriptBaseUrl: this.scriptBaseUrl
-  , scriptMapBaseUrl: this.scriptMapBaseUrl
-  , scriptUrl: scriptUrl
-  , scriptMapUrl: scriptMapUrl
+    scriptBaseUrl: this.scriptBaseUrl,
+    scriptMapBaseUrl: this.scriptMapBaseUrl,
+    scriptUrl: scriptUrl,
+    scriptMapUrl: scriptMapUrl
   });
   fs.writeFileSync(this.serializedBase + '.json', serialized, 'utf8');
 };

lib/Dom.js

@@ -35,7 +35,7 @@ Dom.prototype.addListener = function(type, target, listener, useCapture) {
   }
   var domListener =
     (type === 'destroy') ? new DestroyListener(target, listener) :
-    new DomListener(type, target, listener, useCapture);
+      new DomListener(type, target, listener, useCapture);
   if (-1 === this._listenerIndex(domListener)) {
     var listeners = this._listeners || this._initListeners();
     listeners.push(domListener);

lib/Page.js

@@ -126,7 +126,9 @@ Page.prototype.destroy = function() {
   silentModel.destroy('_page');
   silentModel.destroy('$components');
   // Unfetch and unsubscribe from all queries and documents
-  silentModel.unloadAll && silentModel.unloadAll();
+  if (silentModel.unloadAll) {
+    silentModel.unloadAll();
+  }
 };
 
 Page.prototype._addModelListeners = function(eventModel) {

lib/PageForServer.js

@@ -29,23 +29,9 @@ PageForServer.prototype.render = function(status, ns) {
   this._setRenderParams(ns);
   var pageHtml = this.get('Page', ns);
   this.res.write(pageHtml);
+  this.app.emit('htmlDone', this);
 
-  var bundleScriptTag = '<script async data-derby-app src="' + this.app.scriptUrl + '"';
-  if (this.app.scriptCrossOrigin) {
-    // Scripts loaded from a different origin (such as a CDN) won't report
-    // much information to the host page's window.onerror. Adding the
-    // "crossorigin" attribute to the script tag allows reporting of detailed
-    // error info to the host page.
-    // HOWEVER - if the "crossorigin" attribute is present for a script tag
-    // with a cross-origin "src", then the script's HTTP response MUST have
-    // an appropriate "Access-Control-Allow-Origin" header set. Otherwise,
-    // the browser will refuse to load the script.
-    bundleScriptTag += ' crossorigin';
-  }
-  bundleScriptTag += '></script>';
-  this.res.write(bundleScriptTag);
-
-  this.res.write('<script type="application/json">');
+  this.res.write('<script data-derby-app-state type="application/json">');
   var tailHtml = this.get('Tail', ns);
 
   this.model.destroy('$components');
@@ -96,9 +82,9 @@ function stringifyBundle(bundle) {
 // TODO: Cleanup; copied from tracks
 function pageParams(req) {
   var params = {
-    url: req.url
-  , body: req.body
-  , query: req.query
+    url: req.url,
+    body: req.body,
+    query: req.query,
   };
   for (var key in req.params) {
     params[key] = req.params[key];

lib/eventmodel.js

@@ -256,8 +256,13 @@ EventModel.prototype._removeItemContext = function(context) {
 };
 
 EventModel.prototype._addBinding = function(binding) {
-  var bindings = this.bindings || (this.bindings = new BindingsMap());
-  binding.eventModels || (binding.eventModels = new EventModelsMap());
+  if (this.bindings == null) {
+    this.bindings = new BindingsMap();
+  }
+  var bindings = this.bindings;
+  if (binding.eventModels == null) {
+    binding.eventModels = new EventModelsMap();
+  }
   bindings[binding.id] = binding;
   binding.eventModels[this.id] = this;
 };

lib/files.js

@@ -54,7 +54,9 @@ function loadViewsSync(app, sourceFilename, namespace) {
 }
 
 function loadStylesSync(app, sourceFilename, options) {
-  options || (options = {compress: util.isProduction});
+  if (options == null) {
+    options = { compress: util.isProduction };
+  }
   var resolved = resolve.sync(sourceFilename, {
     extensions: app.styleExtensions,
     packageFilter: deleteMain}