ssr
Version:
cli for react/vue2/vue3 ssr deploy on serverless or tradtional web server
153 lines • 7.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateHtml = void 0;
const fs_1 = require("fs");
const path_1 = require("path");
const generateHtml = async () => {
var _a, _b;
if (!process.env.SPA) {
return;
}
// spa 模式下生成 html 文件直接部署
const { loadConfig, getCwd, judgeFramework, loadModuleFromCwd, loadModuleFromFramework, logGreen, getAsyncJsChunk, logWarning, getAsyncCssChunk, splitPageInfo, getScriptArr, getStaticConfig } = await Promise.resolve().then(() => require('ssr-common-utils'));
logGreen('Generating html file...');
const cwd = getCwd();
const { customeHeadScript, customeFooterScript, hashRouter, htmlTemplate, prefix, clientPrefix, isVite, cssOrderPriority, jsOrderPriority, rootId } = loadConfig();
const staticConfig = getStaticConfig();
const htmlStr = htmlTemplate !== null && htmlTemplate !== void 0 ? htmlTemplate : `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
cssInject
jsHeaderManifest
</head>
<body>
<div id="app"></div>
hashRouterScript
jsFooterManifest
jsManifest
</body>
</html>
`;
const mockCtx = {};
const framework = judgeFramework();
let jsHeaderManifest = '';
let jsFooterManifest = '';
const hashRouterScript = hashRouter ? '<script>window.hashRouter=true</script>' : '';
const header = customeHeadScript !== null && customeHeadScript !== void 0 ? customeHeadScript : [];
const footer = customeFooterScript !== null && customeFooterScript !== void 0 ? customeFooterScript : [];
const ssrDevInfo = { rootId };
const combine = [
{
arr: getScriptArr(header, mockCtx).concat(getScriptArr((_a = staticConfig.customeHeadScript) !== null && _a !== void 0 ? _a : [], mockCtx)),
flag: 'header'
},
{
arr: getScriptArr(footer, mockCtx).concat(getScriptArr((_b = staticConfig.customeFooterScript) !== null && _b !== void 0 ? _b : [], mockCtx)),
flag: 'footer'
}
];
const content = splitPageInfo({
'window.__USE_SSR__': false,
'window.__USE_VITE__': isVite,
'window.prefix': `"${prefix}"`,
'window.clientPrefix': `"${clientPrefix !== null && clientPrefix !== void 0 ? clientPrefix : ''}"`,
'window.ssrDevInfo': JSON.stringify(ssrDevInfo)
});
combine[0].arr = combine[0].arr.concat([
{
content
}
]);
if (framework === 'ssr-plugin-vue3') {
const { h, Fragment } = await Promise.resolve(`${loadModuleFromFramework('vue')}`).then(s => require(s));
const { renderToString } = await Promise.resolve(`${loadModuleFromCwd('@vue/server-renderer')}`).then(s => require(s));
for (const item of combine) {
const { arr, flag } = item;
const scriptArr = arr.map((item) => {
var _a;
return h('script', Object.assign({}, (_a = item.describe) !== null && _a !== void 0 ? _a : {}, {
innerHTML: item.content
}));
});
if (flag === 'header') {
jsHeaderManifest += await renderToString(h(Fragment, {}, scriptArr));
}
else {
jsFooterManifest += await renderToString(h(Fragment, {}, scriptArr));
}
}
}
if (framework === 'ssr-plugin-vue') {
const { h } = await Promise.resolve(`${loadModuleFromFramework('vue')}`).then(s => require(s));
const Vue = await Promise.resolve(`${loadModuleFromFramework('vue')}`).then(s => require(s));
const { createRenderer } = await Promise.resolve(`${loadModuleFromCwd('vue-server-renderer')}`).then(s => require(s));
const { renderToString } = createRenderer();
for (const item of combine) {
const { arr, flag } = item;
const app = new Vue({
render: () => {
const scriptArr = arr.map((item) => {
var _a;
return h('script', Object.assign({}, (_a = item.describe) !== null && _a !== void 0 ? _a : {}, {
domProps: {
innerHTML: item.content
}
}));
});
return scriptArr;
}
});
const scriptStr = await renderToString(app);
if (flag === 'header') {
jsHeaderManifest += scriptStr.replace('data-server-rendered="true"', '');
}
else {
jsFooterManifest += scriptStr.replace('data-server-rendered="true"', '');
}
}
}
if (framework === 'ssr-plugin-react') {
const { createElement: h, Fragment } = await Promise.resolve(`${loadModuleFromFramework('react')}`).then(s => require(s));
const { renderToString } = await Promise.resolve(`${loadModuleFromFramework('react-dom/server')}`).then(s => require(s));
for (const item of combine) {
const { arr, flag } = item;
const scriptArr = arr.map((item) => {
var _a;
return h('script', Object.assign({}, (_a = item.describe) !== null && _a !== void 0 ? _a : {}, {
dangerouslySetInnerHTML: {
__html: item.content
}
}));
});
if (flag === 'header') {
jsHeaderManifest += (await renderToString(h(Fragment, {}, scriptArr))).replace('data-reactroot=""', '');
}
else {
jsFooterManifest += (await renderToString(h(Fragment, {}, scriptArr))).replace('data-reactroot=""', '');
}
}
}
const manifest = require((0, path_1.join)(cwd, './build/client/asset-manifest.json'));
const jsOrder = await getAsyncJsChunk(mockCtx, '', loadConfig());
const jsManifest = jsOrder
.map((item) => manifest[item])
.filter(Boolean)
.map((item) => `<script src="${item}" ${isVite ? 'type="module"' : ''}></script>`);
const cssOrder = await getAsyncCssChunk(mockCtx, '', loadConfig());
const cssManifest = cssOrder
.map((item) => manifest[item])
.filter(Boolean)
.map((item) => `<link rel='stylesheet' href="${item}" />`);
if (typeof cssOrderPriority === 'function' || typeof jsOrderPriority === 'function') {
logWarning('Notices: orderPriority cannot get chunkName in spa html build, you will get chunkName as undefined');
}
const generateHtmlStr = htmlStr.replace('cssInject', cssManifest.join('')).replace('jsManifest', jsManifest.join('')).replace('jsHeaderManifest', jsHeaderManifest).replace('jsFooterManifest', jsFooterManifest).replace('hashRouterScript', hashRouterScript);
await fs_1.promises.writeFile((0, path_1.join)(cwd, './build/index.html'), generateHtmlStr);
};
exports.generateHtml = generateHtml;
//# sourceMappingURL=html.js.map