@umajs/plugin-react-ssr
Version:
In umajs, React is used to develop the plug-in of SPA and MPA, which supports server-side rendering and client-side rendering
105 lines (104 loc) • 4.46 kB
JavaScript
;
var _a, _b, _c, _d;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Result = void 0;
const core_1 = require("@umajs/core");
const engineSource = require("consolidate");
const getStream = require("get-stream");
const react_1 = require("@srejs/react");
class Result extends core_1.Result {
static reactView(viewName, initProps, options) {
return new Result({
type: 'reactView',
data: {
viewName,
initProps,
options,
},
});
}
static react(viewName, initProps, options) {
return new Result({
type: 'reactView',
data: {
viewName,
initProps,
options,
},
});
}
}
exports.Result = Result;
const NODE_ENV = (process.env && process.env.NODE_ENV) || 'development';
let SrejsInstance;
let opt = ((_a = core_1.Uma.config) === null || _a === void 0 ? void 0 : _a.ssr) || {};
const reactSsrPlugin = ((_c = (_b = core_1.Uma.config) === null || _b === void 0 ? void 0 : _b.plugin) === null || _c === void 0 ? void 0 : _c.react) || ((_d = core_1.Uma.config) === null || _d === void 0 ? void 0 : _d.plugin['react-ssr']);
if (reactSsrPlugin === null || reactSsrPlugin === void 0 ? void 0 : reactSsrPlugin.options) {
opt = reactSsrPlugin.options;
}
let defaultRouter = false;
if (opt.hasOwnProperty('defaultRouter')) {
defaultRouter = opt.defaultRouter;
}
try {
SrejsInstance = new react_1.default(core_1.Uma.app, NODE_ENV === 'development', defaultRouter, opt);
}
catch (error) {
console.error(error);
}
const renderDom = async (ctx, viewName, initProps, options) => {
var _a, _b, _c, _d, _e;
const mergeProps = Object.assign(ctx.state || {}, initProps);
let html = await SrejsInstance.render(ctx, viewName, mergeProps, options);
const viewPlugin = (_a = core_1.Uma.config) === null || _a === void 0 ? void 0 : _a.plugin.views;
const ssrConfig = (_b = core_1.Uma.config) === null || _b === void 0 ? void 0 : _b.plugin['react-ssr'];
let useEngine = false;
if (typeof (options === null || options === void 0 ? void 0 : options.useEngine) === 'boolean') {
useEngine = options === null || options === void 0 ? void 0 : options.useEngine;
}
else {
useEngine = (_c = ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.options) === null || _c === void 0 ? void 0 : _c.useEngine;
}
if ((viewPlugin === null || viewPlugin === void 0 ? void 0 : viewPlugin.enable) && useEngine) {
const { opts } = viewPlugin.options;
const { map } = opts;
const engineName = map === null || map === void 0 ? void 0 : map.html;
console.assert(engineName, '@umajs/plugin-views must be setting; eg====> map:{html:"nunjucks"}');
const engine = engineSource[engineName];
const state = Object.assign(Object.assign({}, options), mergeProps);
if (typeof html === 'object' && html.readable && options.cache) {
html = await getStream(html);
}
const ssrReg = new RegExp(/<script[^>]*>window.__SSR_DATA__=([\s\S]*?)<\/script>/);
const placeholderStr = '<!--plAcehoLder-->';
const ssrScriptStr = ((_e = (_d = html.match) === null || _d === void 0 ? void 0 : _d.call(html, ssrReg)) === null || _e === void 0 ? void 0 : _e[0]) || '';
const renderHtml = html.replace(ssrReg, placeholderStr);
html = await engine.render(renderHtml, state);
html = html.replace(placeholderStr, ssrScriptStr);
}
return html;
};
const renderView = async (ctx, viewName, initProps, options) => {
const html = await renderDom(ctx, viewName, initProps, options);
ctx.type = 'text/html';
ctx.body = html;
};
exports.default = () => ({
results: {
async reactView(ctx, data) {
const { viewName, initProps = {}, options = {}, } = data;
await renderView(ctx, viewName, initProps, options);
},
},
context: {
async reactView(viewName, initProps, options) {
await renderView(this, viewName, initProps, options);
},
async react(viewName, initProps, options) {
await renderView(this, viewName, initProps, options);
},
async reactDom(viewName, initProps, options) {
return await renderDom(this, viewName, initProps, options);
},
},
});