Rewrote big part of the application to make it more testable.

Author: robertvansteen

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["stage-3"]
+}

.gitignore

@@ -6,3 +6,6 @@ lib
 
 # Logs
 npm-debug.log
+
+# Internal
+coverage

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+cache: yarn
+node_js:
+  - "4"
+  - "5"
+  - "6"

bin/cli.js

@@ -2,8 +2,8 @@
 const micro = require('micro');
 
 const flags = require('../lib/flags');
-const snapshotServer = require('../lib/server');
+const SnapshotServer = require('../lib/server');
 
-const server = micro(snapshotServer);
+const server = micro(new SnapshotServer(flags));
 server.listen(flags.port);
 console.log(`🌏  Server listening on port ${flags.port}`)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-snapshot-server",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A zero-configuration server that serves server-rendered snapshots of Create React App",
   "main": "lib/index.js",
   "repository": "https://github.com/scrnhq/react-snapshot-server",
@@ -10,35 +10,43 @@
     "react-snapshot-server": "./bin/cli.js"
   },
   "scripts": {
-    "compile": "async-to-gen --out-dir lib/ src/"
+    "compile": "babel src -d lib",
+    "test": "jest --forceExit",
+    "test:watch": "jest --watch"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "dependencies": {
-    "app-root-path": "^2.0.1",
     "args": "^2.3.0",
-    "async-to-gen": "^1.3.2",
+    "fs-extra": "^2.0.0",
     "fs-promise": "^2.0.0",
     "jsdom": "^9.11.0",
-    "jsonfile": "^2.4.0",
     "micro": "^7.0.6",
     "mime-types": "^2.1.14",
-    "mkpath": "^1.0.0",
     "path-type": "^2.0.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react-scripts": "0.9.0",
-    "send": "^0.14.2",
-    "shelljs": "^0.7.6"
+    "send": "^0.14.2"
   },
   "devDependencies": {
+    "babel-cli": "^6.23.0",
     "babel-eslint": "^7.0.0",
+    "babel-jest": "^19.0.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-stage-3": "^6.22.0",
     "eslint": "^3.8.1",
     "eslint-config-react-app": "^0.5.1",
     "eslint-plugin-flowtype": "^2.21.0",
     "eslint-plugin-import": "^2.0.1",
     "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.4.1"
+    "eslint-plugin-react": "^6.4.1",
+    "jest": "^19.0.2",
+    "mock-fs": "^4.0.0",
+    "react-scripts": "0.9.0",
+    "request-promise": "^4.1.1",
+    "rewire": "^2.5.2",
+    "test-listen": "^1.0.1",
+    "tmp": "^0.0.31"
   }
 }

src/.npmignore

@@ -0,0 +1,59 @@
+const React = require('react');
+const { renderToString } = require('react-dom/server');
+
+const browserConfig = {
+  features: {
+    FetchExternalResources: ['script'],
+    ProcessExternalResources: ['script'],
+    SkipExternalResources: false,
+  },
+};
+
+const Browser = function(jsdom, pathname, html) {
+  this.jsdom = jsdom;
+  this.html = html;
+  this.pathname = pathname;
+}
+
+Browser.prototype.created = function(resolve, reject, error, window) {
+  if (error) { console.error(error) }
+  this.jsdom.changeURL(window, 'http://' + this.pathname);
+}
+
+Browser.prototype.done = async function(resolve, reject, error, window) {
+  const app = window.app;
+
+  let initialProps;
+
+  if (typeof app.getInitialProps === 'function') {
+    initialProps = await app.getInitialProps();
+  } else {
+    initialProps = {};
+  }
+
+  const content = renderToString(
+    React.createElement(app, initialProps)
+  );
+
+  window.document.getElementById('root').innerHTML = content;
+
+  resolve(window.document.documentElement.outerHTML);
+}
+
+Browser.prototype.execute = function() {
+  return new Promise((resolve, reject) => {
+    this.jsdom.env({
+      html: this.html,
+      ...browserConfig,
+      virtualConsole: this.jsdom.createVirtualConsole().sendTo(console),
+      created: this.created.bind(this, resolve, reject),
+      done: this.done.bind(this, resolve, reject),
+    });
+  });
+}
+
+const BrowserFactory = function(jsdom) {
+  return Browser.bind(null, jsdom);
+};
+
+module.exports = BrowserFactory;

src/browser.js

@@ -1,7 +1,9 @@
 const args = require('args');
+const path = require('path');
 
 args.option('port', 'The port on which the server will be running', 3000)
-    .option('snapshot_duration', 'Time in minutes that a snapshot is valid', 10);
+    .option('validity', 'Time in minutes that a snapshot is valid', 10)
+    .option('path', 'The path to the build directory', path.join(process.cwd(), 'build'));
 
 const flags = args.parse(process.argv);
 

src/flags.js

@@ -1,45 +1,44 @@
-const __dir = process.cwd();
 const path = require('path');
-const fs = require('fs-promise');
-const makePath = require('mkpath');
-const jsonfile = require('jsonfile');
 
-const MANIFEST_DIR = path.join(__dir, 'build', 'snapshots');
-const MANIFEST_PATH = path.join(MANIFEST_DIR, 'manifest.json')
+const Manifest = function(fs, date, manifestPath, validity) {
+  this.fs = fs;
+  this.date = date;
+  this.manifestPath = manifestPath;
+  this.validity = validity;
+  this.manifest = this.open(manifestPath);
+}
 
-makePath.sync(MANIFEST_DIR);
+Manifest.prototype.open = function() {
+  if (this.fs.existsSync(this.manifestPath)) {
+    return JSON.parse(this.fs.readFileSync(this.manifestPath));
+  }
 
-const manifest = boot();
+  this.write({});
+  return {};
+}
 
-/**
- * Boot the manifest, create if necessary, and return the contents.
- *
- * @return {Object}
- */
-function boot() {
-  if (fs.existsSync(MANIFEST_PATH)) {
-    return jsonfile.readFileSync(MANIFEST_PATH);
-  }
+Manifest.prototype.write = function(manifest) {
+  const dirname = path.dirname(this.manifestPath)
 
-  jsonfile.writeFile(MANIFEST_PATH, {}, function (err) {
-    if (err) { console.error(err) }
-  });
+  if (!this.fs.existsSync(dirname)) {
+    this.fs.mkdirSync(dirname);
+  }
 
-  return {};
+  const manifestToWrite = JSON.stringify(manifest);
+  this.fs.writeFile(this.manifestPath, manifestToWrite)
+    .catch(error => console.error(error));
 }
 
 /**
- * Add a snapshot to the manifest.
+ * Add an entry to the manifest.
  *
  * @param {String} path
  * @param {Number} expirationDate
  */
-function add(path, expirationDate) {
-  manifest[path] = expirationDate;
+Manifest.prototype.add = function(path) {
+  this.manifest[path] = this.calculateValidity();
 
-  jsonfile.writeFile(MANIFEST_PATH, manifest, function (err) {
-    if (err) { console.error(err) }
-  });
+  this.write(this.manifest);
 }
 
 /**
@@ -48,8 +47,8 @@ function add(path, expirationDate) {
  * @param  {String} path
  * @return {Boolean}
  */
-function exists(path) {
-  return (path in manifest);
+Manifest.prototype.exists = function(path) {
+  return (path in this.manifest);
 }
 
 /**
@@ -59,18 +58,18 @@ function exists(path) {
  * @param  {String} path
  * @return {Boolean}
  */
-function valid(path) {
-  if (!exists(path)) {
+Manifest.prototype.isValid = function(path) {
+  if (!this.exists(path)) {
     return false;
   }
 
-  const expirationDate = manifest[path];
+  const expirationDate = this.manifest[path];
 
-  return Date.now() < expirationDate;
+  return this.date.now() < expirationDate;
 }
 
-module.exports = {
-  add,
-  valid,
-  exists,
+Manifest.prototype.calculateValidity = function(validity) {
+  return this.date.now() + (this.validity * 60 * 1000);
 }
+
+module.exports = Manifest;

src/manifest.js

@@ -1,41 +1,67 @@
 const path = require('path');
-const { parse } = require('url');
-
-const __dir = process.cwd();
-
 const stream = require('send');
+const jsdom = require('jsdom');
+const { parse } = require('url');
 const fs = require('fs-promise');
+const { send } = require('micro');
 const mime = require('mime-types');
-const snapshot = require('./snapshot');
-
-module.exports = async (req, res) => {
-  const url = req.headers.host + req.url;
-  const { pathname } = parse(req.url);
-  const filepath = path.join(__dir, 'build', pathname);
-  const dirname = path.dirname(pathname);
-  const extname = path.extname(pathname);
-
-  if (extname !== '' && (dirname === '/' || dirname.startsWith('/static'))) {
-    if (fs.existsSync(filepath)) {
-      res.setHeader('Content-Type', mime.contentType(extname));
-      return stream(req, filepath).pipe(res);
-    }
-  }
 
-  if (!snapshot.exists(pathname)) {
-    const snap = await snapshot.create(url);
-    await snapshot.save(pathname, snap);
-    console.log(`📝  Created a fresh new snapshot for ${pathname}`);
-    return snap;
-  }
+const Manifest = require('./manifest');
+const Snapshot = require('./snapshot');
+const BrowserFactory = require('./browser');
+const browser = new BrowserFactory(jsdom);
 
-  if (!snapshot.valid(pathname)) {
-    const snap = await snapshot.create(url);
-    await snapshot.save(pathname, snap);
-    console.log(`⏰  Snapshot expired, creating a fresh new snapshot for ${pathname}`);
-    return snap;
+const handleErrors = fn => async (req, res, ...other) => {
+  try {
+    return await fn(req, res, ...other);
+  } catch (err) {
+    console.error(err.stack);
+    send(res, 500, 'Internal server error');
   }
+}
+
+const Server = function(flags) {
+  const BUILD_DIRECTORY = flags.path;
+  const SNAPSHOT_DIRECTORY = path.join(BUILD_DIRECTORY, 'snapshots');
+  const MANIFEST_PATH = path.join(SNAPSHOT_DIRECTORY, 'manifest.json');
+  const APPLICATION_PATH = path.join(BUILD_DIRECTORY, 'index.html');
+
+  const manifest = new Manifest(fs, Date, MANIFEST_PATH, flags.validity);
+  const snapshot = new Snapshot(manifest, fs, browser, SNAPSHOT_DIRECTORY, APPLICATION_PATH);
+
+  return handleErrors(async (req, res) => {
+    const url = req.headers.host + req.url;
+    const { pathname } = parse(req.url);
+    const filepath = path.join(BUILD_DIRECTORY, pathname);
+    const extname = path.extname(pathname);
+
+    if (extname !== '') {
+      if (fs.existsSync(filepath)) {
+        res.setHeader('Content-Type', mime.contentType(extname));
+        return stream(req, filepath).pipe(res);
+      } else {
+        return send(res, 404);
+      }
+    }
+
+    if (!snapshot.exists(pathname)) {
+      const snap = await snapshot.create(url);
+      await snapshot.save(pathname, snap);
+      console.log(`📝  Created a fresh new snapshot for ${pathname}`);
+      return snap;
+    }
+
+    if (!snapshot.isValid(pathname)) {
+      const snap = await snapshot.create(url);
+      await snapshot.save(pathname, snap);
+      console.log(`⏰  Snapshot expired, creating a fresh new snapshot for ${pathname}`);
+      return snap;
+    }
+
+    console.log(`🔍  Found snapshot for ${pathname}`);
+    res.setHeader('Content-Type', 'text/html');
+    return stream(req, snapshot.getPath(pathname)).pipe(res);
+  });
+}
 
-  console.log(`🔍  Found snapshot for ${pathname}`);
-  return snapshot.send(req, res, pathname);
-};
+module.exports = Server;