@shuvi/platform-web 0.0.1-rc.34 → 1.0.0-rc.2

package/lib/node/features/filesystem-routes/page/index.d.ts

@@ -0,0 +1,2 @@
+export { normalizeRoutes, generateRoutesContent, IPageRouteConfig } from './routes';
+export * from './store';

package/lib/node/features/filesystem-routes/page/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateRoutesContent = exports.normalizeRoutes = void 0;
+var routes_1 = require("./routes");
+Object.defineProperty(exports, "normalizeRoutes", { enumerable: true, get: function () { return routes_1.normalizeRoutes; } });
+Object.defineProperty(exports, "generateRoutesContent", { enumerable: true, get: function () { return routes_1.generateRoutesContent; } });
+__exportStar(require("./store"), exports);

package/lib/node/features/filesystem-routes/page/routes.d.ts

@@ -0,0 +1,8 @@
+import { IPageRouteConfig, IPageRouteConfigWithId } from '@shuvi/platform-shared/shared';
+export { IPageRouteConfig };
+/**
+ * returns JSON string of IRawPageRouteRecord
+ */
+export declare function serializeRoutes(routes: IPageRouteConfigWithId[]): string;
+export declare function normalizeRoutes(routes: IPageRouteConfig[], componentDir: string, parentPath?: string): IPageRouteConfigWithId[];
+export declare const generateRoutesContent: (routes: IPageRouteConfigWithId[]) => string;

package/lib/node/features/filesystem-routes/page/routes.js

@@ -0,0 +1,83 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateRoutesContent = exports.normalizeRoutes = exports.serializeRoutes = void 0;
+const crypto_1 = require("crypto");
+const constants_1 = require("@shuvi/shared/lib/constants");
+const file_1 = require("@shuvi/utils/lib/file");
+function genRouteId(filepath) {
+    return (0, crypto_1.createHash)('md4').update(filepath).digest('hex').substr(0, 4);
+}
+/**
+ * returns JSON string of IRawPageRouteRecord
+ */
+function serializeRoutes(routes) {
+    let res = '';
+    for (let index = 0; index < routes.length; index++) {
+        const _a = routes[index], { children: childRoutes } = _a, route = __rest(_a, ["children"]);
+        const id = route.id;
+        let strRoute = '';
+        const keys = Object.keys(route);
+        for (let index = 0; index < keys.length; index++) {
+            const key = keys[index];
+            if (key === 'component') {
+                const { component } = route;
+                const componentSource = component;
+                const componentSourceWithAffix = `${componentSource}?${constants_1.ROUTE_RESOURCE_QUERYSTRING}`;
+                // `webpackExports` works with production and optimization.minimize, check compiled dist
+                strRoute +=
+                    `__componentSourceWithAffix__: "${componentSourceWithAffix}",
+__componentSource__: "${componentSource}",
+__import__: () => import(
+  /* webpackChunkName: "page-${id}" */
+  /* webpackExports: "default" */
+  "${componentSourceWithAffix}"),
+__resolveWeak__: () => [require.resolveWeak("${componentSourceWithAffix}")]`.trim();
+            }
+            else {
+                strRoute += `${key}: ${JSON.stringify(route[key])}`;
+            }
+            strRoute += `,\n`;
+        }
+        if (childRoutes && childRoutes.length > 0) {
+            strRoute += `children: ${serializeRoutes(childRoutes)},\n`;
+        }
+        res += `{${strRoute}},\n`;
+    }
+    return `[${res}]`;
+}
+exports.serializeRoutes = serializeRoutes;
+function normalizeRoutes(routes, componentDir, parentPath = '') {
+    const res = [];
+    for (let index = 0; index < routes.length; index++) {
+        const route = Object.assign({}, routes[index]);
+        const pathWithoutSlash = route.path.replace(/^\//, '').replace(/\/$/, '');
+        const fullpath = parentPath + '/' + pathWithoutSlash;
+        if (route.component) {
+            route.component = (0, file_1.normalizePath)(route.component, componentDir);
+        }
+        // todo: add origin file to gen id
+        route.id = genRouteId(`${fullpath}@${route.component}`);
+        if (route.children && route.children.length > 0) {
+            route.children = normalizeRoutes(route.children, componentDir, fullpath);
+        }
+        res.push(route);
+    }
+    return res;
+}
+exports.normalizeRoutes = normalizeRoutes;
+const generateRoutesContent = (routes) => {
+    const serialized = serializeRoutes(routes);
+    return `export default ${serialized}`;
+};
+exports.generateRoutesContent = generateRoutesContent;

package/lib/node/features/filesystem-routes/page/store.d.ts

@@ -0,0 +1,3 @@
+import { IPageRouteConfigWithId } from '@shuvi/platform-shared/shared';
+export declare const setRoutes: (newRoutes: IPageRouteConfigWithId[]) => void;
+export declare const getRoutes: () => IPageRouteConfigWithId[];

package/lib/node/features/filesystem-routes/page/store.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRoutes = exports.setRoutes = void 0;
+let routes = [];
+const setRoutes = (newRoutes) => {
+    routes = newRoutes;
+};
+exports.setRoutes = setRoutes;
+const getRoutes = () => routes;
+exports.getRoutes = getRoutes;

package/lib/node/features/html-render/index.d.ts

@@ -0,0 +1,19 @@
+export { getPageMiddleware, IHtmlDocument, ITemplateData, IViewServer, IViewClient } from './lib';
+declare const _default: {
+    core: import("@shuvi/hook").IPluginInstance<{
+        extendConfig: import("@shuvi/hook").SyncWaterfallHook<import("@shuvi/service").Config, void>;
+        afterInit: import("@shuvi/hook").AsyncParallelHook<void, void, void>;
+        afterBuild: import("@shuvi/hook").AsyncParallelHook<void, void, void>;
+        afterDestroy: import("@shuvi/hook").AsyncParallelHook<void, void, void>;
+        afterBundlerDone: import("@shuvi/hook").AsyncParallelHook<import("@shuvi/service/lib/core/lifecycleTypes").BundlerDoneExtra, void, void>;
+        afterBundlerTargetDone: import("@shuvi/hook").AsyncParallelHook<import("@shuvi/service/lib/core/lifecycleTypes").BundlerTargetDoneExtra, void, void>;
+        configWebpack: import("@shuvi/hook").AsyncSeriesWaterfallHook<import("@shuvi/service/lib/core/lifecycleTypes").WebpackChainType, import("@shuvi/service/lib/core/lifecycleTypes").ConfigWebpackAssistant>;
+        addExtraTarget: import("@shuvi/hook").AsyncParallelHook<import("@shuvi/service/lib/core/lifecycleTypes").ExtraTargetAssistant, void, import("@shuvi/service/lib/core/lifecycleTypes").TargetChain>;
+        addResource: import("@shuvi/hook").AsyncParallelHook<void, void, import("@shuvi/service/lib/core/lifecycleTypes").Resources | import("@shuvi/service/lib/core/lifecycleTypes").Resources[]>;
+        addRuntimeFile: import("@shuvi/hook").AsyncParallelHook<void, import("@shuvi/service/lib/core/lifecycleTypes").AddRuntimeFileUtils, import("@shuvi/service/lib/project/index").FileOptions<any, any> | import("@shuvi/service/lib/project/index").FileOptions<any, any>[]>;
+        addRuntimeService: import("@shuvi/hook").AsyncParallelHook<void, void, import("@shuvi/service/lib/core/lifecycleTypes").RuntimeService | import("@shuvi/service/lib/core/lifecycleTypes").RuntimeService[]>;
+    } & import("@shuvi/service/lib/core/apiTypes").CustomCorePluginHooks, import("@shuvi/service").IPluginContext>;
+    server: import("@shuvi/hook").IPluginInstance<import("@shuvi/service/lib/server/plugin").BuiltInServerPluginHooks & import("@shuvi/service/lib/server/pluginTypes").CustomServerPluginHooks, import("@shuvi/service").IServerPluginContext>;
+    types: string;
+};
+export default _default;

package/lib/node/features/html-render/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPageMiddleware = void 0;
+const service_1 = require("@shuvi/service");
+const paths_1 = require("../../paths");
+const server_1 = __importDefault(require("./server"));
+var lib_1 = require("./lib");
+Object.defineProperty(exports, "getPageMiddleware", { enumerable: true, get: function () { return lib_1.getPageMiddleware; } });
+const core = (0, service_1.createPlugin)({
+    addRuntimeFile: ({ defineFile }, context) => {
+        const { config: { router: { history } } } = context;
+        const routerConfigFile = defineFile({
+            name: 'routerConfig.js',
+            content: () => {
+                return `export const historyMode = "${history}";`;
+            }
+        });
+        return [routerConfigFile];
+    }
+});
+exports.default = {
+    core,
+    server: server_1.default,
+    types: (0, paths_1.resolvePkgFile)('lib/node/features/html-render/shuvi-app.d.ts')
+};

package/lib/node/features/html-render/lib/generateFilesByRoutId.d.ts

@@ -0,0 +1,3 @@
+import { IManifest } from '@shuvi/toolpack/lib/webpack/types';
+import { IRouteRecord } from '@shuvi/router';
+export default function generateFilesByRoutId(assetMap: IManifest, routes: IRouteRecord[]): Record<string, string[]>;

package/lib/node/features/html-render/lib/generateFilesByRoutId.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function generateFilesByRoutId(assetMap, routes) {
+    let filesByRoutId = {};
+    const loadable = assetMap.loadble;
+    routes.forEach(({ id, __componentSourceWithAffix__ }) => {
+        if (id && __componentSourceWithAffix__) {
+            filesByRoutId[id] = loadable[__componentSourceWithAffix__].files;
+        }
+    });
+    return filesByRoutId;
+}
+exports.default = generateFilesByRoutId;

package/lib/node/features/html-render/lib/getPageMiddleware.d.ts

@@ -0,0 +1,2 @@
+import { IRequestHandlerWithNext, IServerPluginContext } from '@shuvi/service';
+export declare function getPageMiddleware(api: IServerPluginContext): IRequestHandlerWithNext;

package/lib/node/features/html-render/lib/getPageMiddleware.js

@@ -0,0 +1,56 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPageMiddleware = void 0;
+const utils_1 = require("@shuvi/service/lib/server/utils");
+const renderToHTML_1 = require("./renderToHTML");
+const shared_1 = require("@shuvi/platform-shared/shared");
+function createPageHandler(serverPluginContext) {
+    return function (req, res) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield (0, renderToHTML_1.renderToHTML)({
+                req: req,
+                serverPluginContext
+            });
+            if ((0, shared_1.isRedirect)(result)) {
+                const redirectResp = result;
+                res.writeHead(redirectResp.status, {
+                    Location: redirectResp.headers.get('Location')
+                });
+                res.end();
+            }
+            else if ((0, shared_1.isText)(result)) {
+                const textResp = result;
+                res.statusCode = textResp.status;
+                (0, utils_1.sendHTML)(req, res, textResp.data);
+            }
+            else {
+                // shuold never reach here
+                throw new Error('Unexpected reponse type from renderToHTML');
+            }
+        });
+    };
+}
+function getPageMiddleware(api) {
+    let pageHandler = createPageHandler(api);
+    return function (req, res, next) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                pageHandler = yield api.serverPluginRunner.handlePageRequest(pageHandler);
+                yield pageHandler(req, res);
+            }
+            catch (error) {
+                next(error);
+            }
+        });
+    };
+}
+exports.getPageMiddleware = getPageMiddleware;

package/lib/node/features/html-render/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { getPageMiddleware } from './getPageMiddleware';
+export { renderToHTML } from './renderToHTML';
+export * from './renderer';
+export * from './pageLoader';

package/lib/node/features/html-render/lib/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToHTML = exports.getPageMiddleware = void 0;
+var getPageMiddleware_1 = require("./getPageMiddleware");
+Object.defineProperty(exports, "getPageMiddleware", { enumerable: true, get: function () { return getPageMiddleware_1.getPageMiddleware; } });
+var renderToHTML_1 = require("./renderToHTML");
+Object.defineProperty(exports, "renderToHTML", { enumerable: true, get: function () { return renderToHTML_1.renderToHTML; } });
+__exportStar(require("./renderer"), exports);
+__exportStar(require("./pageLoader"), exports);

package/lib/node/features/html-render/lib/pageLoader.d.ts

@@ -0,0 +1 @@
+export declare function ifComponentHasLoader(component: string): boolean;

package/lib/node/features/html-render/lib/pageLoader.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ifComponentHasLoader = void 0;
+const fs = __importStar(require("fs"));
+const file_utils_1 = require("@shuvi/service/lib/project/file-utils");
+const file_1 = require("@shuvi/utils/lib/file");
+function ifComponentHasLoader(component) {
+    const file = (0, file_1.resolveFile)(component);
+    if (file) {
+        const content = fs.readFileSync(file, 'utf-8');
+        try {
+            const exports = (0, file_utils_1.getExports)(content);
+            return exports.includes('loader');
+        }
+        catch (_a) { }
+    }
+    return false;
+}
+exports.ifComponentHasLoader = ifComponentHasLoader;

package/lib/node/features/html-render/lib/renderToHTML.d.ts

@@ -0,0 +1,6 @@
+import { IRequest, IServerPluginContext } from '@shuvi/service';
+import { Response } from '@shuvi/platform-shared/shared';
+export declare function renderToHTML({ req, serverPluginContext }: {
+    req: IRequest;
+    serverPluginContext: IServerPluginContext;
+}): Promise<Response>;

package/lib/node/features/html-render/lib/renderToHTML.js

@@ -0,0 +1,81 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToHTML = void 0;
+const resources_1 = require("@shuvi/service/lib/resources");
+const shared_1 = require("@shuvi/platform-shared/shared");
+const renderer_1 = require("./renderer");
+const htmlTag_1 = require("./renderer/htmlTag");
+function addEssentialTagsIfMissing(document) {
+    let hasMetaCharset = false;
+    let hasMetaViewport = false;
+    for (const { tagName, attrs } of document.headTags) {
+        if (hasMetaCharset && hasMetaViewport) {
+            break;
+        }
+        if (tagName === 'meta') {
+            if (attrs.charset) {
+                hasMetaCharset = true;
+            }
+            else if (attrs.name === 'viewport') {
+                hasMetaViewport = true;
+            }
+        }
+    }
+    if (!hasMetaCharset) {
+        document.headTags.unshift((0, htmlTag_1.tag)('meta', {
+            charset: 'utf-8'
+        }));
+    }
+    if (!hasMetaViewport) {
+        document.headTags.unshift((0, htmlTag_1.tag)('meta', {
+            name: 'viewport',
+            content: 'width=device-width,minimum-scale=1,initial-scale=1'
+        }));
+    }
+    return document;
+}
+function renderToHTML({ req, serverPluginContext }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let result;
+        const renderer = new renderer_1.Renderer({ serverPluginContext });
+        const { application } = resources_1.server;
+        const app = application.createApp({
+            req,
+            ssr: serverPluginContext.config.ssr
+        });
+        try {
+            yield app.init();
+            const publicApp = app.getPublicAPI();
+            let doc = yield renderer.renderDocument({
+                app: publicApp,
+                req
+            });
+            if ((0, shared_1.isResponse)(doc)) {
+                result = doc;
+            }
+            else {
+                addEssentialTagsIfMissing(doc);
+                yield serverPluginContext.serverPluginRunner.modifyHtml(doc, app.context);
+                const htmlStr = renderer.renderDocumentToString(doc);
+                const appError = app.error.getError;
+                result = (0, shared_1.text)(htmlStr, {
+                    status: appError && typeof appError.code !== 'undefined' ? appError.code : 200
+                });
+            }
+        }
+        finally {
+            yield app.dispose();
+        }
+        return result;
+    });
+}
+exports.renderToHTML = renderToHTML;

package/lib/node/features/html-render/lib/renderer/base.d.ts

@@ -0,0 +1,17 @@
+import { IAppData, Response } from '@shuvi/platform-shared/shared';
+import { IServerPluginContext } from '@shuvi/service';
+import { IHtmlDocument, IHtmlTag, IApplication } from './types';
+import { IRendererConstructorOptions, IRenderDocumentOptions } from './types';
+export declare type AppData = Omit<IAppData, 'filesByRoutId' | 'publicPath'>;
+export declare abstract class BaseRenderer {
+    protected _serverPluginContext: IServerPluginContext;
+    protected _app?: IApplication;
+    constructor({ serverPluginContext }: IRendererConstructorOptions);
+    abstract renderDocument({ app, req }: IRenderDocumentOptions): Promise<IHtmlDocument | Response> | IHtmlDocument | Response;
+    protected _getMainAssetTags(): {
+        styles: IHtmlTag<any>[];
+        scripts: IHtmlTag<any>[];
+    };
+    protected _getAppContainerTag(html?: string): IHtmlTag<'div'>;
+    protected _getInlineAppData(app: IApplication, appData: AppData): IHtmlTag;
+}

package/lib/node/features/html-render/lib/renderer/base.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseRenderer = void 0;
+const htmlescape_1 = require("@shuvi/utils/lib/htmlescape");
+const service_1 = require("@shuvi/service");
+const constants_1 = require("@shuvi/shared/lib/constants");
+const resources_1 = require("@shuvi/service/lib/resources");
+const generateFilesByRoutId_1 = __importDefault(require("../generateFilesByRoutId"));
+const htmlTag_1 = require("./htmlTag");
+class BaseRenderer {
+    constructor({ serverPluginContext }) {
+        this._serverPluginContext = serverPluginContext;
+    }
+    _getMainAssetTags() {
+        const styles = [];
+        const scripts = [];
+        const entrypoints = resources_1.clientManifest.entries[service_1.BUILD_CLIENT_RUNTIME_MAIN];
+        const polyfill = resources_1.clientManifest.bundles[service_1.BUILD_CLIENT_RUNTIME_POLYFILL];
+        scripts.push((0, htmlTag_1.tag)('script', {
+            src: this._serverPluginContext.getAssetPublicUrl(polyfill)
+        }));
+        entrypoints.js.forEach((asset) => {
+            scripts.push((0, htmlTag_1.tag)('script', {
+                src: this._serverPluginContext.getAssetPublicUrl(asset)
+            }));
+        });
+        if (entrypoints.css) {
+            entrypoints.css.forEach((asset) => {
+                styles.push((0, htmlTag_1.tag)('link', {
+                    rel: 'stylesheet',
+                    href: this._serverPluginContext.getAssetPublicUrl(asset)
+                }));
+            });
+        }
+        if (this._serverPluginContext.mode === 'development') {
+            styles.push((0, htmlTag_1.tag)('style', {
+                [constants_1.DEV_STYLE_HIDE_FOUC]: true
+            }, 'body{display:none}'), 
+            /**
+             * this element is used to mount development styles so the
+             * ordering matches production
+             * (by default, style-loader injects at the bottom of <head />)
+             */
+            (0, htmlTag_1.tag)('style', {
+                id: constants_1.DEV_STYLE_ANCHOR_ID
+            }));
+        }
+        return {
+            styles,
+            scripts
+        };
+    }
+    _getAppContainerTag(html = '') {
+        return (0, htmlTag_1.tag)('div', {
+            id: constants_1.CLIENT_CONTAINER_ID
+        }, html);
+    }
+    _getInlineAppData(app, appData) {
+        const routes = app.router.routes || [];
+        const data = JSON.stringify(Object.assign(Object.assign({}, appData), { filesByRoutId: (0, generateFilesByRoutId_1.default)(resources_1.clientManifest, routes), publicPath: this._serverPluginContext.getAssetPublicUrl() }));
+        return (0, htmlTag_1.tag)('script', {
+            id: constants_1.CLIENT_APPDATA_ID,
+            type: 'application/json'
+        }, (0, htmlescape_1.htmlEscapeJsonString)(data));
+    }
+}
+exports.BaseRenderer = BaseRenderer;

package/lib/node/features/html-render/lib/renderer/htmlTag.d.ts

@@ -0,0 +1,4 @@
+import { IHtmlAttrs, IHtmlTag } from './types';
+export declare function stringifyAttrs(attrs: IHtmlAttrs): string;
+export declare function stringifyTag(tag: IHtmlTag): string;
+export declare function tag<T extends string>(tagName: T, attrs: IHtmlAttrs, innerHTML?: string): IHtmlTag<T>;

package/lib/node/features/html-render/lib/renderer/htmlTag.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tag = exports.stringifyTag = exports.stringifyAttrs = void 0;
+const htmlescape_1 = require("@shuvi/utils/lib/htmlescape");
+/**
+ * All html tag elements which must not contain innerHTML
+ * @see https://www.w3.org/TR/html5/syntax.html#void-elements
+ */
+const voidTags = [
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'keygen',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr'
+];
+// the result will have an extra leading space
+function stringifyAttrs(attrs) {
+    var _a;
+    const attrNames = Object.keys(attrs);
+    const res = [''];
+    for (let index = 0; index < attrNames.length; index++) {
+        const attributeName = attrNames[index];
+        if (attributeName === 'textContent')
+            continue;
+        if (attrs[attributeName] === false) {
+            continue;
+        }
+        if (attrs[attributeName] === true) {
+            res.push((0, htmlescape_1.htmlEscapeContent)(attributeName));
+        }
+        else {
+            res.push(`${(0, htmlescape_1.htmlEscapeContent)(attributeName)}="${(0, htmlescape_1.htmlEscapeContent)(((_a = attrs[attributeName]) === null || _a === void 0 ? void 0 : _a.toString()) || '')}"`);
+        }
+    }
+    return res.join(' ');
+}
+exports.stringifyAttrs = stringifyAttrs;
+function stringifyTag(tag) {
+    const attr = stringifyAttrs(tag.attrs);
+    const voidTag = voidTags.indexOf(tag.tagName) !== -1;
+    let res = `<${tag.tagName}${attr}`;
+    if (voidTag) {
+        return `${res} />`;
+    }
+    res += '>';
+    res +=
+        tag.innerHTML ||
+            (tag.attrs.textContent ? (0, htmlescape_1.htmlEscapeContent)(tag.attrs.textContent) : '');
+    res += '</' + tag.tagName + '>';
+    return res;
+}
+exports.stringifyTag = stringifyTag;
+function tag(tagName, attrs, innerHTML) {
+    return {
+        tagName: tagName,
+        attrs: attrs || {},
+        innerHTML
+    };
+}
+exports.tag = tag;

package/lib/node/features/html-render/lib/renderer/index.d.ts

@@ -0,0 +1,15 @@
+import { IRendererConstructorOptions, IRenderDocumentOptions } from './types';
+import { IHtmlDocument } from './types';
+export * from './types';
+export interface ITemplateData {
+    [x: string]: any;
+}
+export declare class Renderer {
+    private _documentTemplate;
+    private _serverPluginContext;
+    private _ssrRenderer;
+    private _spaRenderer;
+    constructor(options: IRendererConstructorOptions);
+    renderDocument(options: IRenderDocumentOptions): import("@shuvi/platform-shared/shared").Response | IHtmlDocument | Promise<import("@shuvi/platform-shared/shared").Response | IHtmlDocument>;
+    renderDocumentToString(document: IHtmlDocument, templateData?: ITemplateData): string;
+}