Implement asynchronous React templater

feature/node-rewrite
Sven Slootweg 6 years ago
parent db056bbe2f
commit 37daf9a628

@ -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));
};

@ -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);
}
}
};

@ -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);
};
Loading…
Cancel
Save