@modern-js/runtime 2.69.7 → 3.0.0-alpha.1

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

@@ -0,0 +1,128 @@
+import { PassThrough, Transform } from "stream";
+import { createReadableStreamFromReadable, storage } from "@modern-js/runtime-utils/node";
+import isbot_0 from "isbot";
+import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
+import { RenderLevel } from "../../constants";
+import { getGlobalInternalRuntimeContext } from "../../context";
+import { getMonitors } from "../../context/monitors";
+import { enqueueFromEntries } from "./deferredScript";
+import { ShellChunkStatus, getReadableStreamFromString } from "./shared";
+import { getTemplates } from "./template";
+const defaultExtender = {
+    modifyRootElement: (rootElement)=>rootElement,
+    getStyleTags: ()=>'',
+    processStream: (stream)=>stream
+};
+const createReadableStreamFromElement = async (request, rootElement, options)=>{
+    const { renderToPipeableStream } = await import("react-dom/server");
+    const { runtimeContext, htmlTemplate, config, ssrConfig, entryName } = options;
+    let shellChunkStatus = ShellChunkStatus.START;
+    let renderLevel = RenderLevel.SERVER_RENDER;
+    const forceStream2String = Boolean(process.env.MODERN_JS_STREAM_TO_STRING);
+    const isbot = isbot_0(request.headers.get('user-agent'));
+    const isSsgRender = 'true' === request.headers.get('x-modern-ssg-render');
+    const onReady = isbot || isSsgRender || forceStream2String ? 'onAllReady' : 'onShellReady';
+    const internalRuntimeContext = getGlobalInternalRuntimeContext();
+    const hooks = internalRuntimeContext.hooks;
+    const extenders = hooks.extendStreamSSR.call() || [];
+    if (0 === extenders.length) extenders.push(defaultExtender);
+    extenders.forEach((extender)=>{
+        if (extender.init) extender.init({
+            rootElement,
+            forceStream2String
+        });
+    });
+    let processedRootElement = rootElement;
+    extenders.forEach((extender)=>{
+        if (extender.modifyRootElement) processedRootElement = extender.modifyRootElement(processedRootElement);
+    });
+    const chunkVec = [];
+    return new Promise((resolve)=>{
+        const { pipe: reactStreamingPipe } = renderToPipeableStream(processedRootElement, {
+            nonce: config.nonce,
+            [onReady] () {
+                let styledComponentsStyleTags = '';
+                extenders.forEach((extender)=>{
+                    if (extender.getStyleTags) styledComponentsStyleTags += extender.getStyleTags();
+                });
+                options[onReady]?.();
+                getTemplates(htmlTemplate, {
+                    request,
+                    ssrConfig,
+                    renderLevel,
+                    runtimeContext,
+                    config,
+                    entryName,
+                    styledComponentsStyleTags
+                }).then(({ shellAfter, shellBefore })=>{
+                    const pendingScripts = [];
+                    const body = new Transform({
+                        transform (chunk, _encoding, callback) {
+                            try {
+                                if (shellChunkStatus !== ShellChunkStatus.FINISH) {
+                                    chunkVec.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+                                    const chunkStr = chunk.toString('utf-8');
+                                    if (chunkStr.includes(ESCAPED_SHELL_STREAM_END_MARK)) {
+                                        let concatedChunk = Buffer.concat(chunkVec).toString('utf-8');
+                                        concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, '');
+                                        shellChunkStatus = ShellChunkStatus.FINISH;
+                                        this.push(`${shellBefore}${concatedChunk}${shellAfter}`);
+                                        if (pendingScripts.length > 0) for (const s of pendingScripts)this.push(s);
+                                    }
+                                } else this.push(chunk);
+                                callback();
+                            } catch (e) {
+                                e instanceof Error ? callback(e) : callback(new Error('Received unkown error when streaming'));
+                            }
+                        }
+                    });
+                    const passThrough = new PassThrough();
+                    const stream = createReadableStreamFromReadable(body);
+                    resolve(stream);
+                    let processedStream = passThrough;
+                    extenders.forEach((extender)=>{
+                        if (extender.processStream) processedStream = extender.processStream(processedStream);
+                    });
+                    reactStreamingPipe(passThrough);
+                    processedStream.pipe(body);
+                    try {
+                        const storageContext = storage.useContext?.();
+                        const activeDeferreds = storageContext?.activeDeferreds;
+                        const entries = activeDeferreds instanceof Map ? Array.from(activeDeferreds.entries()) : [];
+                        if (entries.length > 0) {
+                            const enqueueScript = (s)=>{
+                                if (shellChunkStatus === ShellChunkStatus.FINISH) body.write(s);
+                                else pendingScripts.push(s);
+                            };
+                            enqueueFromEntries(entries, config.nonce, (s)=>enqueueScript(s));
+                        }
+                    } catch (err) {
+                        const monitors = getMonitors();
+                        monitors.error("cannot inject router data script", err);
+                    }
+                });
+            },
+            onShellError (error) {
+                renderLevel = RenderLevel.CLIENT_RENDER;
+                getTemplates(htmlTemplate, {
+                    request,
+                    ssrConfig,
+                    renderLevel,
+                    runtimeContext,
+                    entryName,
+                    config
+                }).then(({ shellAfter, shellBefore })=>{
+                    const fallbackHtml = `${shellBefore}${shellAfter}`;
+                    const readableStream = getReadableStreamFromString(fallbackHtml);
+                    resolve(readableStream);
+                    options?.onShellError?.(error);
+                });
+            },
+            onError (error) {
+                renderLevel = RenderLevel.CLIENT_RENDER;
+                options?.onError?.(error);
+            }
+        });
+    });
+};
+export { createReadableStreamFromElement };

package/dist/esm/core/server/stream/createReadableStream.worker.mjs

@@ -0,0 +1,109 @@
+import { renderSSRStream } from "@modern-js/render/ssr";
+import { storage } from "@modern-js/runtime-utils/node";
+import isbot_0 from "isbot";
+import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
+import { RenderLevel } from "../../constants";
+import { enqueueFromEntries } from "./deferredScript";
+import { ShellChunkStatus, encodeForWebStream, getReadableStreamFromString } from "./shared";
+import { getTemplates } from "./template";
+const createReadableStreamFromElement = async (request, rootElement, options)=>{
+    let shellChunkStatus = ShellChunkStatus.START;
+    const chunkVec = [];
+    const { htmlTemplate, runtimeContext, config, ssrConfig, entryName, rscRoot } = options;
+    const { shellBefore, shellAfter } = await getTemplates(htmlTemplate, {
+        renderLevel: RenderLevel.SERVER_RENDER,
+        runtimeContext,
+        ssrConfig,
+        request,
+        config,
+        entryName
+    });
+    try {
+        const readableOriginal = await renderSSRStream(rootElement, {
+            request,
+            clientManifest: options.rscClientManifest,
+            ssrManifest: options.rscSSRManifest,
+            nonce: config.nonce,
+            rscRoot: rscRoot,
+            onError (error) {
+                options.onError?.(error);
+            }
+        });
+        options.onShellReady?.();
+        readableOriginal.allReady.then(()=>{
+            options?.onAllReady?.();
+        });
+        const isbot = isbot_0(request.headers.get('user-agent'));
+        const isSsgRender = 'true' === request.headers.get('x-modern-ssg-render');
+        if (isbot || isSsgRender) await readableOriginal.allReady;
+        const reader = readableOriginal.getReader();
+        const stream = new ReadableStream({
+            start (controller) {
+                const pendingScripts = [];
+                let isClosed = false;
+                const safeEnqueue = (chunk)=>{
+                    if (isClosed) return;
+                    try {
+                        controller.enqueue(chunk);
+                    } catch  {
+                        isClosed = true;
+                    }
+                };
+                const closeController = ()=>{
+                    if (!isClosed) {
+                        isClosed = true;
+                        try {
+                            controller.close();
+                        } catch  {}
+                    }
+                };
+                const flushPendingScripts = ()=>{
+                    for (const s of pendingScripts)safeEnqueue(encodeForWebStream(s));
+                    pendingScripts.length = 0;
+                };
+                const enqueueScript = (script)=>{
+                    if (shellChunkStatus === ShellChunkStatus.FINISH) safeEnqueue(encodeForWebStream(script));
+                    else pendingScripts.push(script);
+                };
+                const storageContext = storage.useContext?.();
+                const activeDeferreds = storageContext?.activeDeferreds;
+                const entries = activeDeferreds instanceof Map ? Array.from(activeDeferreds.entries()) : [];
+                if (entries.length > 0) enqueueFromEntries(entries, config.nonce, enqueueScript);
+                async function push() {
+                    try {
+                        const { done, value } = await reader.read();
+                        if (done) return void closeController();
+                        if (isClosed) return;
+                        if (shellChunkStatus !== ShellChunkStatus.FINISH) {
+                            chunkVec.push(new TextDecoder().decode(value));
+                            const concatedChunk = chunkVec.join('');
+                            if (concatedChunk.includes(ESCAPED_SHELL_STREAM_END_MARK)) {
+                                shellChunkStatus = ShellChunkStatus.FINISH;
+                                safeEnqueue(encodeForWebStream(`${shellBefore}${concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, '')}${shellAfter}`));
+                                flushPendingScripts();
+                            }
+                        } else safeEnqueue(value);
+                        if (!isClosed) push();
+                    } catch (error) {
+                        if (!isClosed) {
+                            isClosed = true;
+                            try {
+                                controller.error(error);
+                            } catch  {}
+                        }
+                    }
+                }
+                push();
+            },
+            cancel (reason) {
+                reader.cancel(reason).catch(()=>{});
+            }
+        });
+        return stream;
+    } catch (e) {
+        const fallbackHtml = `${shellBefore}${shellAfter}`;
+        const stream = getReadableStreamFromString(fallbackHtml);
+        return stream;
+    }
+};
+export { createReadableStreamFromElement };

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

@@ -0,0 +1,62 @@
+import { runRouterDataFnStr } from "../../../router/runtime/constants";
+const HTML_ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+};
+function escapeAttr(value) {
+    return value.replace(/[&<>"']/g, (ch)=>HTML_ESCAPE_MAP[ch]);
+}
+function isRecord(v) {
+    return 'object' == typeof v && null !== v;
+}
+function isDeferredDataLike(v) {
+    if (!isRecord(v)) return false;
+    const hasPending = 'pendingKeys' in v && Array.isArray(v.pendingKeys);
+    const hasData = 'data' in v && isRecord(v.data);
+    return hasPending && hasData;
+}
+function isPromiseLike(value) {
+    return !!value && 'function' == typeof value.then;
+}
+function toErrorInfo(error) {
+    if (error && 'object' == typeof error) {
+        const maybeMsg = error.message;
+        const maybeStack = error.stack;
+        return {
+            message: 'string' == typeof maybeMsg ? maybeMsg : String(maybeMsg ?? error),
+            stack: 'production' !== process.env.NODE_ENV ? maybeStack : void 0
+        };
+    }
+    return {
+        message: String(error)
+    };
+}
+function buildDeferredDataScript(nonce, args) {
+    const payload = JSON.stringify(args);
+    const escaped = escapeAttr(payload);
+    const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
+    return `<script async${nonceAttr} data-fn-name="r" data-script-src="modern-run-router-data-fn" data-fn-args='${escaped}' suppressHydrationWarning>${runRouterDataFnStr}</script>`;
+}
+function enqueueFromEntries(entries, nonce, emit) {
+    entries.forEach(([routeId, value])=>{
+        if (!isDeferredDataLike(value)) return;
+        const pendingKeys = new Set(value.pendingKeys ?? []);
+        pendingKeys.forEach((key)=>{
+            const tracked = value.data?.[key];
+            if (isPromiseLike(tracked)) tracked.then((val)=>emit(buildDeferredDataScript(nonce, [
+                    routeId,
+                    key,
+                    val
+                ])), (err)=>emit(buildDeferredDataScript(nonce, [
+                    routeId,
+                    key,
+                    void 0,
+                    toErrorInfo(err)
+                ])));
+        });
+    });
+}
+export { buildDeferredDataScript, enqueueFromEntries, escapeAttr, isDeferredDataLike, isPromiseLike, isRecord, toErrorInfo };

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

@@ -0,0 +1,4 @@
+import { createRenderStreaming } from "./shared";
+const createReadableStreamFromElement = 'edge' === process.env.MODERN_SSR_ENV ? import("./createReadableStream.worker.mjs").then((m)=>m.createReadableStreamFromElement) : import("./createReadableStream").then((m)=>m.createReadableStreamFromElement);
+const renderStreaming = createRenderStreaming(createReadableStreamFromElement);
+export { renderStreaming };

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

@@ -0,0 +1,75 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { time } from "@modern-js/runtime-utils/time";
+import { JSX_SHELL_STREAM_END_MARK } from "../../../common";
+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 StreamServerRootWrapper = ({ children })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    children,
+                    JSX_SHELL_STREAM_END_MARK
+                ]
+            });
+        let rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
+            ssr: true
+        }));
+        rootElement = /*#__PURE__*/ jsx(StreamServerRootWrapper, {
+            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 };