@modern-js/runtime 2.69.5 → 3.0.0-alpha.0

package/dist/esm/core/server/stream/shared.mjs

@@ -0,0 +1,71 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { time } from "@modern-js/runtime-utils/time";
+import { wrapRuntimeContextProvider } from "../../react/wrapper";
+import { SSRErrors, SSRTimings } from "../tracer";
+import { getSSRConfigByEntry } from "../utils";
+var shared_ShellChunkStatus = /*#__PURE__*/ function(ShellChunkStatus) {
+    ShellChunkStatus[ShellChunkStatus["START"] = 0] = "START";
+    ShellChunkStatus[ShellChunkStatus["FINISH"] = 1] = "FINISH";
+    return ShellChunkStatus;
+}({});
+let encoder;
+function encodeForWebStream(thing) {
+    if (!encoder) encoder = new TextEncoder();
+    if ('string' == typeof thing) return encoder.encode(thing);
+    return thing;
+}
+function getReadableStreamFromString(content) {
+    const readableStream = new ReadableStream({
+        start (controller) {
+            controller.enqueue(encodeForWebStream(content));
+            controller.close();
+        }
+    });
+    return readableStream;
+}
+function createRenderStreaming(createReadableStreamPromise) {
+    return async (request, serverRoot, options)=>{
+        const createReadableStreamFromElement = await createReadableStreamPromise;
+        const end = time();
+        const { runtimeContext, config, resource } = options;
+        const { onError, onTiming } = options;
+        const { htmlTemplate, entryName } = resource;
+        const ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
+        const RSCServerRoot = ({ children })=>/*#__PURE__*/ jsx(Fragment, {
+                children: children
+            });
+        let rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
+            ssr: true
+        }));
+        rootElement = /*#__PURE__*/ jsx(RSCServerRoot, {
+            children: rootElement
+        });
+        const stream = await createReadableStreamFromElement(request, rootElement, {
+            config,
+            htmlTemplate,
+            runtimeContext,
+            ssrConfig,
+            entryName,
+            rscClientManifest: options.rscClientManifest,
+            rscSSRManifest: options.rscSSRManifest,
+            rscServerManifest: options.rscServerManifest,
+            rscRoot: options.rscRoot,
+            onShellReady () {
+                const cost = end();
+                onTiming(SSRTimings.RENDER_SHELL, cost);
+            },
+            onAllReady () {
+                const cost = end();
+                onTiming(SSRTimings.RENDER_HTML, cost);
+            },
+            onShellError (error) {
+                onError(error, SSRErrors.RENDER_SHELL);
+            },
+            onError (error) {
+                onError(error, SSRErrors.RENDER_STREAM);
+            }
+        });
+        return stream;
+    };
+}
+export { shared_ShellChunkStatus as ShellChunkStatus, createRenderStreaming, encodeForWebStream, getReadableStreamFromString };

package/dist/esm/core/server/stream/template.mjs

@@ -0,0 +1,13 @@
+import { buildShellAfterTemplate } from "./afterTemplate";
+import { buildShellBeforeTemplate } from "./beforeTemplate";
+const HTML_SEPARATOR = '<!--<?- html ?>-->';
+const getTemplates = async (htmlTemplate, options)=>{
+    const [beforeAppTemplate = '', afterAppHtmlTemplate = ''] = htmlTemplate.split(HTML_SEPARATOR) || [];
+    const builtBeforeTemplate = await buildShellBeforeTemplate(beforeAppTemplate, options);
+    const builtAfterTemplate = await buildShellAfterTemplate(afterAppHtmlTemplate, options);
+    return {
+        shellBefore: builtBeforeTemplate,
+        shellAfter: builtAfterTemplate
+    };
+};
+export { getTemplates };

package/dist/esm/core/server/string/index.mjs

@@ -0,0 +1,101 @@
+import { time } from "@modern-js/runtime-utils/time";
+import server from "react-dom/server";
+import react_helmet from "react-helmet";
+import { RenderLevel } from "../../constants";
+import { getGlobalInternalRuntimeContext } from "../../context";
+import { wrapRuntimeContextProvider } from "../../react/wrapper";
+import { CHUNK_CSS_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants";
+import { createReplaceHelemt } from "../helmet";
+import { buildHtml } from "../shared";
+import { SSRErrors, SSRTimings } from "../tracer";
+import { getSSRConfigByEntry, safeReplace } from "../utils";
+import { LoadableCollector } from "./loadable";
+import { SSRDataCollector } from "./ssrData";
+const renderString = async (request, serverRoot, options)=>{
+    const { resource, runtimeContext, config, onError, onTiming } = options;
+    const tracer = {
+        onError,
+        onTiming
+    };
+    const routerContext = runtimeContext.routerContext;
+    const { htmlTemplate, entryName, loadableStats, routeManifest } = resource;
+    const ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
+    const chunkSet = {
+        renderLevel: RenderLevel.CLIENT_RENDER,
+        ssrScripts: '',
+        jsChunk: '',
+        cssChunk: ''
+    };
+    const collectors = [
+        new LoadableCollector({
+            stats: loadableStats,
+            nonce: config.nonce,
+            routeManifest,
+            template: htmlTemplate,
+            entryName,
+            chunkSet,
+            config
+        }),
+        new SSRDataCollector({
+            runtimeContext,
+            request,
+            ssrConfig,
+            ssrContext: runtimeContext.ssrContext,
+            chunkSet,
+            routerContext,
+            nonce: config.nonce,
+            useJsonScript: config.useJsonScript
+        })
+    ];
+    const internalRuntimeContext = getGlobalInternalRuntimeContext();
+    const hooks = internalRuntimeContext.hooks;
+    const extraCollectors = hooks.extendStringSSRCollectors.call({
+        chunkSet
+    });
+    for (const c of extraCollectors)if (c) collectors.unshift(c);
+    const rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
+        ssr: true
+    }));
+    const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, runtimeContext.ssrContext?.htmlModifiers || [], tracer);
+    return html;
+};
+async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifiers, { onError, onTiming }) {
+    let html = '';
+    let helmetData;
+    const finalApp = collectors.reduce((pre, creator)=>creator.collect?.(pre) || pre, App);
+    try {
+        const end = time();
+        html = server.renderToString(finalApp);
+        chunkSet.renderLevel = RenderLevel.SERVER_RENDER;
+        helmetData = react_helmet.renderStatic();
+        const cost = end();
+        onTiming(SSRTimings.RENDER_HTML, cost);
+    } catch (e) {
+        chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
+        onError(e, SSRErrors.RENDER_HTML);
+    }
+    await Promise.all(collectors.map((component)=>component.effect()));
+    const { ssrScripts, cssChunk, jsChunk } = chunkSet;
+    const finalHtml = await buildHtml(htmlTemplate, [
+        createReplaceHtml(html),
+        createReplaceChunkJs(jsChunk),
+        createReplaceChunkCss(cssChunk),
+        createReplaceSSRDataScript(ssrScripts),
+        createReplaceHelemt(helmetData),
+        ...htmlModifiers
+    ]);
+    return finalHtml;
+}
+function createReplaceHtml(html) {
+    return (template)=>safeReplace(template, HTML_PLACEHOLDER, html);
+}
+function createReplaceSSRDataScript(data) {
+    return (template)=>safeReplace(template, SSR_DATA_PLACEHOLDER, data);
+}
+function createReplaceChunkJs(js) {
+    return (template)=>safeReplace(template, CHUNK_JS_PLACEHOLDER, js);
+}
+function createReplaceChunkCss(css) {
+    return (template)=>safeReplace(template, CHUNK_CSS_PLACEHOLDER, css);
+}
+export { renderString };

package/dist/esm/core/server/string/loadable.mjs

@@ -0,0 +1,112 @@
+import { ChunkExtractor } from "@loadable/server";
+import { attributesToString, checkIsNode } from "../utils";
+const extname = (uri)=>{
+    if ('string' != typeof uri || !uri.includes('.')) return '';
+    return `.${uri?.split('.').pop()}` || '';
+};
+const generateChunks = (chunks, ext)=>chunks.filter((chunk)=>Boolean(chunk.url)).filter((chunk)=>extname(chunk.url).slice(1) === ext);
+const checkIsInline = (chunk, enableInline)=>{
+    if ('production' !== process.env.NODE_ENV) return false;
+    if (enableInline instanceof RegExp) return enableInline.test(chunk.url);
+    return Boolean(enableInline);
+};
+const readAsset = async (chunk)=>{
+    const fs = await import("fs/promises");
+    const path = await import("path");
+    const filepath = path.resolve(__dirname, chunk.filename);
+    return fs.readFile(filepath, 'utf-8');
+};
+class LoadableCollector {
+    get existsAssets() {
+        const { routeManifest, entryName } = this.options;
+        return routeManifest?.routeAssets?.[entryName]?.assets;
+    }
+    collect(comopnent) {
+        const { stats, entryName } = this.options;
+        if (!stats) return comopnent;
+        this.extractor = new ChunkExtractor({
+            stats,
+            entrypoints: [
+                entryName
+            ]
+        });
+        return this.extractor.collectChunks(comopnent);
+    }
+    async effect() {
+        if (!this.extractor) return;
+        const { extractor, options } = this;
+        const { entryName, config } = options;
+        const asyncChunks = [];
+        if (config.enableAsyncEntry) try {
+            asyncChunks.push(...extractor.getChunkAssets([
+                `async-${entryName}`
+            ]));
+        } catch (e) {}
+        const chunks = [].concat(asyncChunks).concat(extractor.getChunkAssets(extractor.chunks));
+        const scriptChunks = generateChunks(chunks, 'js');
+        const styleChunks = generateChunks(chunks, 'css');
+        this.emitLoadableScripts(extractor);
+        await this.emitScriptAssets(scriptChunks);
+        await this.emitStyleAssets(styleChunks);
+    }
+    emitLoadableScripts(extractor) {
+        const check = (scripts)=>(scripts || '').includes('__LOADABLE_REQUIRED_CHUNKS___ext');
+        const scripts = extractor.getScriptTags();
+        if (!check(scripts)) return;
+        const { chunkSet } = this.options;
+        const s = scripts.split("<\/script>").slice(0, 2).map((i)=>`${i}</script>`).join('');
+        chunkSet.jsChunk += s;
+    }
+    async emitScriptAssets(chunks) {
+        const { template, nonce, chunkSet, config } = this.options;
+        const { scriptLoading = 'defer', inlineStyles } = config;
+        const scriptLoadingAtr = {
+            defer: 'defer' === scriptLoading ? true : void 0,
+            type: 'module' === scriptLoading ? 'module' : void 0,
+            async: 'async' === scriptLoading ? true : void 0
+        };
+        const attributes = attributesToString(this.generateAttributes({
+            nonce,
+            ...scriptLoadingAtr
+        }));
+        const jsScriptRegExp = /<script .*?src="([^"]+)".*?>/g;
+        const matchs = template.matchAll(jsScriptRegExp);
+        const existedScript = [];
+        for (const match of matchs)existedScript.push(match[1]);
+        const scripts = await Promise.all(chunks.filter((chunk)=>!existedScript.includes(chunk.url) && !this.existsAssets?.includes(chunk.path)).map(async (chunk)=>{
+            const script = `<script${attributes} src="${chunk.url}"></script>`;
+            if (checkIsNode() && checkIsInline(chunk, inlineStyles)) return readAsset(chunk).then((content)=>`<script>${content}</script>`).catch((_)=>script);
+            return script;
+        }));
+        chunkSet.jsChunk += scripts.filter((script)=>Boolean(script)).join('');
+    }
+    async emitStyleAssets(chunks) {
+        const { template, chunkSet, config, entryName } = this.options;
+        const { inlineStyles } = config;
+        const atrributes = attributesToString(this.generateAttributes());
+        const linkRegExp = /<link .*?href="([^"]+)".*?>/g;
+        const matchs = template.matchAll(linkRegExp);
+        const existedLinks = [];
+        for (const match of matchs)existedLinks.push(match[1]);
+        const css = await Promise.all(chunks.filter((chunk)=>!existedLinks.includes(chunk.url) && !this.existsAssets?.includes(chunk.path)).map(async (chunk)=>{
+            const link = `<link${atrributes} href="${chunk.url}" rel="stylesheet" />`;
+            if (checkIsNode() && checkIsInline(chunk, inlineStyles)) return readAsset(chunk).then((content)=>`<style>${content}</style>`).catch((_)=>link);
+            return link;
+        }));
+        chunkSet.cssChunk += css.filter((css)=>Boolean(css)).join('');
+    }
+    generateAttributes(extraAtr = {}) {
+        const { config } = this.options;
+        const { crossorigin } = config;
+        const attributes = {};
+        if (crossorigin) attributes.crossorigin = true === crossorigin ? 'anonymous' : crossorigin;
+        return {
+            ...attributes,
+            ...extraAtr
+        };
+    }
+    constructor(options){
+        this.options = options;
+    }
+}
+export { LoadableCollector };

package/dist/esm/core/server/string/ssrData.mjs

@@ -0,0 +1,104 @@
+import { serializeJson } from "@modern-js/runtime-utils/node";
+import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "../../constants";
+import { attributesToString, serializeErrors } from "../utils";
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) return descriptor.get.call(receiver);
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) descriptor.set.call(receiver, value);
+    else {
+        if (!descriptor.writable) throw new TypeError("attempted to set read only private field");
+        descriptor.value = value;
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) throw new TypeError("attempted to " + action + " private field on non-instance");
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+function _class_private_method_get(receiver, privateSet, fn) {
+    if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
+    return fn;
+}
+function _class_private_method_init(obj, privateSet) {
+    _check_private_redeclaration(obj, privateSet);
+    privateSet.add(obj);
+}
+var _options = /*#__PURE__*/ new WeakMap(), _getSSRData = /*#__PURE__*/ new WeakSet(), _getSSRDataScripts = /*#__PURE__*/ new WeakSet();
+class SSRDataCollector {
+    effect() {
+        const { routerContext, chunkSet } = _class_private_field_get(this, _options);
+        const ssrData = _class_private_method_get(this, _getSSRData, getSSRData).call(this);
+        const routerData = routerContext ? {
+            loaderData: routerContext.loaderData,
+            errors: serializeErrors(routerContext.errors)
+        } : void 0;
+        const ssrDataScripts = _class_private_method_get(this, _getSSRDataScripts, getSSRDataScripts).call(this, ssrData, routerData);
+        chunkSet.ssrScripts = ssrDataScripts;
+    }
+    constructor(options){
+        _class_private_method_init(this, _getSSRData);
+        _class_private_method_init(this, _getSSRDataScripts);
+        _class_private_field_init(this, _options, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_set(this, _options, options);
+    }
+}
+function getSSRData() {
+    const { chunkSet, ssrConfig, ssrContext, runtimeContext } = _class_private_field_get(this, _options);
+    const { reporter, request } = ssrContext;
+    const headers = 'object' == typeof ssrConfig && ssrConfig.unsafeHeaders ? Object.fromEntries(Object.entries(request.headers).filter(([key, _])=>ssrConfig.unsafeHeaders?.map((header)=>header.toLowerCase())?.includes(key.toLowerCase()))) : void 0;
+    return {
+        data: {
+            initialData: runtimeContext.initialData,
+            i18nData: runtimeContext.__i18nData__
+        },
+        context: {
+            request: {
+                params: request.params,
+                query: request.query,
+                pathname: request.pathname,
+                host: request.host,
+                url: request.url,
+                headers: headers
+            },
+            reporter: {
+                sessionId: reporter?.sessionId
+            }
+        },
+        mode: 'string',
+        renderLevel: chunkSet.renderLevel
+    };
+}
+function getSSRDataScripts(ssrData, routerData) {
+    const { nonce, useJsonScript = false } = _class_private_field_get(this, _options);
+    const serializeSSRData = serializeJson(ssrData);
+    const attrsStr = attributesToString({
+        nonce
+    });
+    let ssrDataScripts = useJsonScript ? `<script type="application/json" id="${SSR_DATA_JSON_ID}">${serializeSSRData}</script>` : `<script${attrsStr}>window._SSR_DATA = ${serializeSSRData}</script>`;
+    if (routerData) {
+        const serializedRouterData = serializeJson(routerData);
+        ssrDataScripts += useJsonScript ? `\n<script type="application/json" id="${ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>` : `\n<script${attrsStr}>window._ROUTER_DATA = ${serializedRouterData}</script>`;
+    }
+    return ssrDataScripts;
+}
+export { SSRDataCollector };

package/dist/esm/core/server/tracer.mjs

@@ -0,0 +1,15 @@
+var tracer_SSRTimings = /*#__PURE__*/ function(SSRTimings) {
+    SSRTimings["PRERENDER"] = "ssr-prerender";
+    SSRTimings["RENDER_HTML"] = "ssr-render-html";
+    SSRTimings["RENDER_SHELL"] = "ssr-render-shell";
+    return SSRTimings;
+}({});
+var tracer_SSRErrors = /*#__PURE__*/ function(SSRErrors) {
+    SSRErrors["PRERENDER"] = "App Prerender";
+    SSRErrors["RENDER_HTML"] = "App Render To HTML";
+    SSRErrors["RENDER_STREAM"] = "An error occurs during streaming SSR";
+    SSRErrors["RENDER_SHELL"] = "An error occurs during streaming render shell";
+    SSRErrors["LOADER_ERROR"] = "App error occurs during data loader";
+    return SSRErrors;
+}({});
+export { tracer_SSRErrors as SSRErrors, tracer_SSRTimings as SSRTimings };

package/dist/esm/core/server/utils.mjs

@@ -0,0 +1,39 @@
+import { isRouteErrorResponse } from "@modern-js/runtime-utils/router";
+function attributesToString(attributes) {
+    return Object.entries(attributes).reduce((str, [key, value])=>void 0 === value ? str : `${str} ${key}="${value}"`, '');
+}
+function safeReplace(source, searchValue, replaceValue) {
+    return source.replace(searchValue, ()=>replaceValue);
+}
+function checkIsNode() {
+    return "u" > typeof process && process.release?.name === 'node';
+}
+function serializeErrors(errors) {
+    if (!errors) return null;
+    const entries = Object.entries(errors);
+    const serialized = {};
+    for (const [key, val] of entries)if (isRouteErrorResponse(val)) serialized[key] = {
+        ...val,
+        __type: 'RouteErrorResponse'
+    };
+    else if (val instanceof Error) serialized[key] = {
+        message: val.message,
+        stack: val.stack,
+        __type: 'Error'
+    };
+    else serialized[key] = val;
+    return serialized;
+}
+function getSSRConfigByEntry(entryName, ssr, ssrByEntries) {
+    if (ssrByEntries?.[entryName]) return ssrByEntries[entryName];
+    return ssr || true;
+}
+function getSSRMode(ssrConfig) {
+    if ('boolean' == typeof ssrConfig) {
+        const result = ssrConfig ? 'stream' : false;
+        return result;
+    }
+    const result = ssrConfig?.mode === 'string' ? 'string' : 'stream';
+    return result;
+}
+export { attributesToString, checkIsNode, getSSRConfigByEntry, getSSRMode, safeReplace, serializeErrors };

package/dist/esm/document/Body.mjs

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { DocumentStructureContext } from "./DocumentStructureContext";
+import { DefaultRoot } from "./Root";
+import { BODY_PARTICALS_SEPARATOR, DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER } from "./constants";
+function Body(props) {
+    const { hasSetRoot } = useContext(DocumentStructureContext);
+    const { children, ...rest } = props;
+    return /*#__PURE__*/ jsxs("body", {
+        ...rest,
+        children: [
+            hasSetRoot ? null : /*#__PURE__*/ jsx(DefaultRoot, {}),
+            children,
+            `${BODY_PARTICALS_SEPARATOR}`,
+            `${DOCUMENT_CHUNKSMAP_PLACEHOLDER}`,
+            `${DOCUMENT_SSRDATASCRIPT_PLACEHOLDER}`
+        ]
+    });
+}
+export { Body };

package/dist/esm/document/Comment.mjs

@@ -0,0 +1,15 @@
+import { Fragment, jsxs } from "react/jsx-runtime";
+import "react";
+import { DOCUMENT_COMMENT_PLACEHOLDER_END, DOCUMENT_COMMENT_PLACEHOLDER_START } from "./constants";
+function Comment(props) {
+    const { comment, children } = props;
+    const commentStr = encodeURIComponent(children || comment || '');
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            `${DOCUMENT_COMMENT_PLACEHOLDER_START}`,
+            `${commentStr}`,
+            `${DOCUMENT_COMMENT_PLACEHOLDER_END}`
+        ]
+    });
+}
+export { Comment };

package/dist/esm/document/DocumentContext.mjs

@@ -0,0 +1,7 @@
+import react from "react";
+const DocumentContext = /*#__PURE__*/ react.createContext({
+    config: {},
+    templateParams: {},
+    processEnv: {}
+});
+export { DocumentContext };

package/dist/esm/document/DocumentStructureContext.mjs

@@ -0,0 +1,10 @@
+import react from "react";
+const DocumentStructureContext = /*#__PURE__*/ react.createContext({
+    hasSetHead: false,
+    hasSetScripts: false,
+    hasSetBody: false,
+    hasSetRoot: false,
+    hasSetLinks: false,
+    hasSetTitle: false
+});
+export { DocumentStructureContext };

package/dist/esm/document/Head.mjs

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { DocumentStructureContext } from "./DocumentStructureContext";
+import { Links } from "./Links";
+import { Scripts } from "./Scripts";
+import { Title } from "./Title";
+import { DOCUMENT_META_PLACEHOLDER, HEAD_PARTICALS_SEPARATOR, TOP_PARTICALS_SEPARATOR } from "./constants";
+function Head(props) {
+    const { hasSetScripts, hasSetLinks, hasSetTitle } = useContext(DocumentStructureContext);
+    const { children, ...rest } = props;
+    return /*#__PURE__*/ jsxs("head", {
+        ...rest,
+        children: [
+            TOP_PARTICALS_SEPARATOR,
+            DOCUMENT_META_PLACEHOLDER,
+            !hasSetTitle && /*#__PURE__*/ jsx(Title, {}),
+            !hasSetLinks && /*#__PURE__*/ jsx(Links, {}),
+            !hasSetScripts && /*#__PURE__*/ jsx(Scripts, {}),
+            HEAD_PARTICALS_SEPARATOR,
+            children
+        ]
+    });
+}
+function DefaultHead() {
+    return /*#__PURE__*/ jsx("head", {
+        children: DOCUMENT_META_PLACEHOLDER
+    });
+}
+export { DefaultHead, Head };

package/dist/esm/document/Html.mjs

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Body } from "./Body";
+import { DocumentStructureContext } from "./DocumentStructureContext";
+import { Head } from "./Head";
+function findTargetChildByName(tag, children) {
+    return children.find((item)=>getEleType(item) === tag);
+}
+function findTargetChildByComponent(component, children) {
+    return children.find((item)=>item?.type === component);
+}
+function getEleType(ele) {
+    return 'function' == typeof ele?.type ? ele.type.name : ele?.type;
+}
+function findTargetElement(tag, children) {
+    if (0 === children.length) return null;
+    let nextChildren = [];
+    for (const item of children){
+        if (tag === getEleType(item)) return item;
+        if (item?.props?.children) nextChildren = nextChildren.concat(item.props.children);
+    }
+    return findTargetElement(tag, nextChildren);
+}
+function Html(props) {
+    const { children, ...rest } = props;
+    const hasSetHead = Boolean(findTargetChildByComponent(Head, children) || findTargetChildByName('Head', children));
+    const hasSetScripts = Boolean(findTargetElement('Scripts', children));
+    const hasSetLinks = Boolean(findTargetElement('Links', children));
+    const hasSetBody = Boolean(findTargetChildByComponent(Body, children) || findTargetChildByName('Body', children));
+    const hasSetRoot = Boolean(findTargetElement('Root', children));
+    const hasSetTitle = Boolean(findTargetElement('title', children));
+    const notMissMustChild = [
+        hasSetHead,
+        hasSetBody
+    ].every((item)=>item);
+    if (!notMissMustChild) return /*#__PURE__*/ jsx("html", {
+        children: /*#__PURE__*/ jsxs("body", {
+            style: {
+                color: 'red'
+            },
+            children: [
+                "Miss the ",
+                [
+                    hasSetHead,
+                    hasSetBody
+                ].map((item, index)=>item ? null : [
+                        'Head',
+                        'Body'
+                    ][index]),
+                " Element"
+            ]
+        })
+    });
+    return /*#__PURE__*/ jsx("html", {
+        ...rest,
+        children: /*#__PURE__*/ jsxs(DocumentStructureContext.Provider, {
+            value: {
+                hasSetHead,
+                hasSetScripts,
+                hasSetLinks,
+                hasSetRoot,
+                hasSetBody,
+                hasSetTitle,
+                docChild: children
+            },
+            children: [
+                !hasSetHead && /*#__PURE__*/ jsx(Head, {}),
+                !hasSetBody && /*#__PURE__*/ jsx(Body, {}),
+                children
+            ]
+        })
+    });
+}
+export { Html };

package/dist/esm/document/Links.mjs

@@ -0,0 +1,9 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import { DOCUMENT_LINKS_PLACEHOLDER } from "./constants";
+function Links() {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: DOCUMENT_LINKS_PLACEHOLDER
+    });
+}
+export { Links };

package/dist/esm/document/Root.mjs

@@ -0,0 +1,29 @@
+import { jsxs } from "react/jsx-runtime";
+import { omit } from "@modern-js/utils/lodash";
+import { useContext } from "react";
+import { DocumentContext } from "./DocumentContext";
+import { DOCUMENT_SSR_PLACEHOLDER } from "./constants";
+function Root(props) {
+    const { rootId, children, ...rest } = props;
+    const legalProperties = omit(rest, 'id');
+    const { templateParams: { mountId = 'root' } } = useContext(DocumentContext);
+    return /*#__PURE__*/ jsxs("div", {
+        id: `${rootId || mountId}`,
+        ...legalProperties,
+        children: [
+            `${DOCUMENT_SSR_PLACEHOLDER}`,
+            children
+        ]
+    });
+}
+function DefaultRoot(props) {
+    const { templateParams: { mountId = 'root' } } = useContext(DocumentContext);
+    return /*#__PURE__*/ jsxs("div", {
+        id: `${mountId}`,
+        children: [
+            `${DOCUMENT_SSR_PLACEHOLDER}`,
+            props.children
+        ]
+    });
+}
+export { DefaultRoot, Root };