Implement asynchronous React templater

5 years ago · 37daf9a628
parent db056bbe2f
commit 37daf9a628
3 changed files with 129 additions and 0 deletions
--- a/src/express-async-react/clear-require-cache.js
+++ b/src/express-async-react/clear-require-cache.js
@ -0,0 +1,30 @@
+"use strict";
+
+const escapeStringRegexp = require("escape-string-regexp");
+const assureArray = require("assure-array");
+
+let viewPathRegexes = new Map();
+
+function generateRegex(paths) {
+	let pathRegexes = assureArray(paths)
+		.map((path) => `^${escapeStringRegexp(path)}`)
+		.join("|");
+
+	return new RegExp(pathRegexes);
+}
+
+function clearCacheByRegex(regex) {
+	for (let [key, entry] in Object.entries(regex)) {
+		if (regex.test(entry.filename) === true) {
+			delete require.cache[key];
+		}
+	}
+}
+
+module.exports = function clearRequireCache(viewPaths) {
+	if (!viewPathRegexes.has(viewPaths)) {
+		viewPathRegexes.set(viewPathRegexes, generateRegex(viewPaths));
+	}
+
+	clearCacheByRegex(viewPathRegexes.get(viewPathRegexes));
+};
--- a/src/express-async-react/index.js
+++ b/src/express-async-react/index.js
@ -0,0 +1,79 @@
+"use strict";
+
+const Promise = require("bluebird");
+const React = require("react");
+const ReactDOMServer = require("react-dom/server");
+const defaultValue = require("default-value");
+const dotty = require("dotty");
+
+const registerBabel = require("./register-babel");
+const clearRequireCache = require("./clear-require-cache");
+
+/* FILEBUG: Express does not copy symbol-keyed properties from app.locals, but it probably should? */
+// let ExpressReact = Symbol("ExpressReact");
+let ExpressReact = "__EXPRESS_REACT_SETTINGS";
+let LocalsContext = React.createContext({});
+
+function componentAtPath(moduleRoot, componentPath) {
+	if (componentPath == null) {
+		return moduleRoot;
+	} else {
+		return dotty.get(moduleRoot, componentPath);
+	}
+}
+
+function renderComponent(component, locals, doctype = "<!DOCTYPE html>") {
+	let tree = React.createElement(LocalsContext.Provider, {value: locals},
+		React.createElement(component, locals)
+	);
+	
+	try {
+		/* TODO: Expose internals? Like koa-react */
+		return doctype + ReactDOMServer.renderToStaticMarkup(tree);
+	} catch (err) {
+		if (/Element type is invalid:/.test(err.message)) {
+			throw new Error(`Expected a React component, but got '${component}' - maybe you forgot to specify a componentPath?`);
+		} else {
+			throw err;
+		}
+	}
+}
+
+module.exports = {
+	Settings: ExpressReact,
+	LocalsContext: LocalsContext,
+	createEngine: function createEngine({ prepare } = {}) {
+		let babelRegistered = false;
+
+		return function asyncRender(filename, options, callback) {
+			return Promise.try(() => {
+				let viewPaths = options.settings.views;
+
+				if (!babelRegistered) {
+					registerBabel(viewPaths);
+					babelRegistered = true;
+				}
+
+				let {componentPath} = defaultValue(options[ExpressReact], {});
+
+				return Promise.try(() => {
+					let templateFile = require(filename);
+					let moduleRoot = defaultValue(templateFile.exports, templateFile);
+
+					return Promise.try(() => {
+						if (prepare != null) {
+							return prepare(moduleRoot, options);
+						}
+					}).then((result) => {
+						let mergedOptions = Object.assign({}, options, result);
+						return renderComponent(componentAtPath(moduleRoot, componentPath), mergedOptions);
+					});
+				}).finally(() => {
+					if (options.settings.env === "development") {
+						clearRequireCache(viewPaths);
+					}
+				});
+			}).asCallback(callback);
+		}
+	}
+};
--- a/src/express-async-react/register-babel.js
+++ b/src/express-async-react/register-babel.js
@ -0,0 +1,20 @@
+"use strict";
+
+const assureArray = require("assure-array");
+const babelRegister = require("@babel/register");
+
+module.exports = function registerBabel(viewPaths, options = {}) {
+	let babelOptions = Object.assign({
+		only: assureArray(viewPaths),
+		presets: [
+			"@babel/preset-react",
+			["@babel/preset-env", {
+				targets: {
+					node: "current"
+				}
+			}]
+		]
+	}, options);
+
+	babelRegister(babelOptions);
+};