@modern-js/runtime 3.9.1 → 3.9.3

package/dist/esm-node/core/server/stream/deferredScriptOutputCoordinator.mjs

@@ -0,0 +1,333 @@
+import "node:module";
+import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
+const VOID_ELEMENTS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr'
+]);
+const RAW_TEXT_ELEMENTS = new Set([
+    'iframe',
+    'noembed',
+    'noframes',
+    "script",
+    'style',
+    'textarea',
+    'title',
+    'xmp'
+]);
+const REACT_SEGMENT_ID_PATTERN = new RegExp(`^${SSR_HYDRATION_ID_PREFIX}S:[0-9a-f]+$`);
+const TABLE_SEGMENT_CHILDREN = new Set([
+    'tbody',
+    'tr',
+    'colgroup'
+]);
+function isAsciiAlpha(char) {
+    return /[A-Za-z]/.test(char);
+}
+function isWhitespace(char) {
+    return /[\t\n\f\r ]/.test(char);
+}
+function getSuffix(value, pattern) {
+    const start = Math.max(0, value.length - pattern.length);
+    for(let index = start; index < value.length; index++){
+        const suffix = value.slice(index);
+        if (pattern.startsWith(suffix)) return suffix;
+    }
+    return '';
+}
+class DeferredScriptOutputCoordinator {
+    enqueueResolver(script) {
+        if (this.closed) return;
+        this.pendingResolvers.push(script);
+        this.flushResolvers();
+    }
+    markShellFinished() {
+        if (this.closed) return;
+        this.shellFinished = true;
+        this.flushResolvers();
+    }
+    writeReact(chunk) {
+        if (this.closed || !chunk) return;
+        this.flushResolvers();
+        let emittedUntil = 0;
+        for(let index = 0; index < chunk.length; index++){
+            const wasSafe = this.isSafeBoundary();
+            this.consume(chunk[index]);
+            if (!wasSafe && this.isSafeBoundary() && this.pendingResolvers.length) {
+                this.emit(chunk.slice(emittedUntil, index + 1));
+                emittedUntil = index + 1;
+                this.flushResolvers();
+            }
+        }
+        if (emittedUntil < chunk.length) this.emit(chunk.slice(emittedUntil));
+    }
+    finish() {
+        if (this.closed) return;
+        this.flushResolvers();
+        this.closed = true;
+        if (this.pendingResolvers.length > 0) throw new Error("Cannot emit deferred resolver scripts because the React stream ended outside a safe HTML boundary.");
+    }
+    abort() {
+        this.closed = true;
+        this.pendingResolvers.length = 0;
+    }
+    isSafeBoundary() {
+        return this.shellFinished && 'data' === this.state && 0 === this.openElements.length && !this.awaitingContinuationProtocol;
+    }
+    flushResolvers() {
+        if (!this.isSafeBoundary() || 0 === this.pendingResolvers.length) return;
+        while(this.pendingResolvers.length > 0){
+            const resolver = this.pendingResolvers.shift();
+            if (resolver) this.emit(resolver);
+        }
+    }
+    consume(char) {
+        switch(this.state){
+            case 'data':
+                if ('<' === char) this.state = 'tag-open';
+                return;
+            case 'tag-open':
+                if ('/' === char) {
+                    this.currentTagName = '';
+                    this.state = 'end-tag-name';
+                } else if ('!' === char) {
+                    this.declarationPrefix = '';
+                    this.state = 'markup-declaration';
+                } else if ('?' === char) this.state = 'bogus-comment';
+                else if (isAsciiAlpha(char)) {
+                    this.startTag(char);
+                    this.state = 'start-tag-name';
+                } else this.state = 'data';
+                return;
+            case 'start-tag-name':
+                if (isWhitespace(char)) this.state = 'before-attribute-name';
+                else if ('/' === char) this.state = 'self-closing-start-tag';
+                else if ('>' === char) this.completeStartTag(false);
+                else this.currentTagName += char.toLowerCase();
+                return;
+            case 'before-attribute-name':
+                if (isWhitespace(char)) return;
+                if ('/' === char) this.state = 'self-closing-start-tag';
+                else if ('>' === char) this.completeStartTag(false);
+                else {
+                    this.startAttribute(char);
+                    this.state = 'attribute-name';
+                }
+                return;
+            case 'attribute-name':
+                if (isWhitespace(char)) this.state = 'after-attribute-name';
+                else if ('=' === char) {
+                    this.currentAttributeHasValue = true;
+                    this.state = 'before-attribute-value';
+                } else if ('/' === char) {
+                    this.completeAttribute();
+                    this.state = 'self-closing-start-tag';
+                } else if ('>' === char) this.completeStartTag(false);
+                else this.currentAttributeName += char.toLowerCase();
+                return;
+            case 'after-attribute-name':
+                if (isWhitespace(char)) return;
+                if ('=' === char) {
+                    this.currentAttributeHasValue = true;
+                    this.state = 'before-attribute-value';
+                } else if ('/' === char) {
+                    this.completeAttribute();
+                    this.state = 'self-closing-start-tag';
+                } else if ('>' === char) this.completeStartTag(false);
+                else {
+                    this.completeAttribute();
+                    this.startAttribute(char);
+                    this.state = 'attribute-name';
+                }
+                return;
+            case 'before-attribute-value':
+                if (isWhitespace(char)) return;
+                if ('"' === char) this.state = 'attribute-value-double-quoted';
+                else if ("'" === char) this.state = 'attribute-value-single-quoted';
+                else if ('>' === char) this.completeStartTag(false);
+                else {
+                    this.currentAttributeValue += char;
+                    this.state = 'attribute-value-unquoted';
+                }
+                return;
+            case 'attribute-value-double-quoted':
+                if ('"' === char) {
+                    this.completeAttribute();
+                    this.state = 'before-attribute-name';
+                } else this.currentAttributeValue += char;
+                return;
+            case 'attribute-value-single-quoted':
+                if ("'" === char) {
+                    this.completeAttribute();
+                    this.state = 'before-attribute-name';
+                } else this.currentAttributeValue += char;
+                return;
+            case 'attribute-value-unquoted':
+                if (isWhitespace(char)) {
+                    this.completeAttribute();
+                    this.state = 'before-attribute-name';
+                } else if ('>' === char) this.completeStartTag(false);
+                else this.currentAttributeValue += char;
+                return;
+            case 'self-closing-start-tag':
+                if ('>' === char) this.completeStartTag(true);
+                else if (!isWhitespace(char)) {
+                    this.startAttribute(char);
+                    this.state = 'attribute-name';
+                }
+                return;
+            case 'end-tag-name':
+                if (isWhitespace(char)) this.state = 'after-end-tag-name';
+                else if ('>' === char) this.completeEndTag();
+                else this.currentTagName += char.toLowerCase();
+                return;
+            case 'after-end-tag-name':
+                if ('>' === char) this.completeEndTag();
+                return;
+            case 'markup-declaration':
+                if (this.declarationPrefix.length < 2 && '-' === char) {
+                    this.declarationPrefix += char;
+                    if ('--' === this.declarationPrefix) {
+                        this.commentTail = '';
+                        this.state = 'comment';
+                    }
+                } else this.state = '>' === char ? 'data' : 'declaration';
+                return;
+            case 'declaration':
+                if ('>' === char) this.state = 'data';
+                return;
+            case 'comment':
+                this.commentTail = `${this.commentTail}${char}`.slice(-3);
+                if ('-->' === this.commentTail) this.state = 'data';
+                return;
+            case 'bogus-comment':
+                if ('>' === char) this.state = 'data';
+                return;
+            case 'raw-text':
+                this.consumeRawText(char);
+                return;
+            case 'raw-end-tag':
+                if ('>' === char) this.completeRawTextEndTag();
+                else if (!isWhitespace(char)) {
+                    this.state = 'raw-text';
+                    this.rawTextSearch = getSuffix(`${this.rawTextSearch}${char.toLowerCase()}`, `</${this.rawTextElement}`);
+                }
+        }
+    }
+    startTag(char) {
+        this.currentTagName = char.toLowerCase();
+        this.currentAttributes = new Map();
+        this.currentAttributeName = '';
+        this.currentAttributeValue = '';
+        this.currentAttributeHasValue = false;
+    }
+    startAttribute(char) {
+        this.currentAttributeName = char.toLowerCase();
+        this.currentAttributeValue = '';
+        this.currentAttributeHasValue = false;
+    }
+    completeAttribute() {
+        if (!this.currentAttributeName) return;
+        this.currentAttributes.set(this.currentAttributeName, this.currentAttributeHasValue ? this.currentAttributeValue : true);
+        this.currentAttributeName = '';
+        this.currentAttributeValue = '';
+        this.currentAttributeHasValue = false;
+    }
+    completeStartTag(selfClosing) {
+        this.completeAttribute();
+        const tagName = this.currentTagName;
+        const id = this.currentAttributes.get('id');
+        const hasReactSegmentId = 'string' == typeof id && REACT_SEGMENT_ID_PATTERN.test(id);
+        const hasHiddenAttribute = this.currentAttributes.has('hidden');
+        const isHiddenSegmentTable = 'table' === tagName && hasHiddenAttribute && !hasReactSegmentId;
+        const isTableSegmentChild = hasReactSegmentId && TABLE_SEGMENT_CHILDREN.has(tagName) && this.openElements[this.openElements.length - 1]?.isSegmentTableWrapper === true;
+        const isContinuationContainer = hasReactSegmentId && ('div' === tagName && hasHiddenAttribute || ('svg' === tagName || 'math' === tagName) && void 0 !== id && 'true' === this.currentAttributes.get('aria-hidden') && 'display:none' === this.currentAttributes.get('style') || 'table' === tagName && hasHiddenAttribute || isTableSegmentChild);
+        this.continuationProtocolScript = "script" === tagName && this.awaitingContinuationProtocol;
+        this.continuationProtocolTail = '';
+        this.hasContinuationProtocolCall = false;
+        if (!selfClosing && !VOID_ELEMENTS.has(tagName)) this.openElements.push({
+            tagName,
+            isContinuationContainer,
+            isSegmentTableWrapper: isHiddenSegmentTable
+        });
+        this.currentTagName = '';
+        this.currentAttributes = new Map();
+        this.currentAttributeName = '';
+        this.currentAttributeValue = '';
+        this.currentAttributeHasValue = false;
+        if (!selfClosing && RAW_TEXT_ELEMENTS.has(tagName)) {
+            this.rawTextElement = tagName;
+            this.rawTextSearch = '';
+            this.state = 'raw-text';
+        } else this.state = 'data';
+    }
+    completeEndTag() {
+        this.closeOpenElement(this.currentTagName);
+        this.currentTagName = '';
+        this.state = 'data';
+    }
+    consumeRawText(char) {
+        const rawTextElement = this.rawTextElement;
+        if (!rawTextElement) {
+            this.state = 'data';
+            return;
+        }
+        const endTagPrefix = `</${rawTextElement}`;
+        if (this.continuationProtocolScript) {
+            this.continuationProtocolTail = `${this.continuationProtocolTail}${char}`.slice(-4);
+            if (/\$(?:RC|RS|RX|RB|RR)\b/.test(this.continuationProtocolTail)) this.hasContinuationProtocolCall = true;
+        }
+        this.rawTextSearch = getSuffix(`${this.rawTextSearch}${char.toLowerCase()}`, endTagPrefix);
+        if (this.rawTextSearch === endTagPrefix) this.state = 'raw-end-tag';
+    }
+    completeRawTextEndTag() {
+        const rawTextElement = this.rawTextElement;
+        if (rawTextElement) this.closeOpenElement(rawTextElement);
+        if ("script" === rawTextElement && this.continuationProtocolScript && this.hasContinuationProtocolCall) this.awaitingContinuationProtocol = false;
+        this.rawTextElement = void 0;
+        this.rawTextSearch = '';
+        this.continuationProtocolScript = false;
+        this.continuationProtocolTail = '';
+        this.hasContinuationProtocolCall = false;
+        this.state = 'data';
+    }
+    closeOpenElement(tagName) {
+        const matchingIndex = this.openElements.map((element)=>element.tagName).lastIndexOf(tagName);
+        if (-1 === matchingIndex) return;
+        const closedElements = this.openElements.splice(matchingIndex);
+        const closedContinuation = closedElements.some((element)=>element.isContinuationContainer);
+        if (closedContinuation) this.awaitingContinuationProtocol = true;
+    }
+    constructor(emit){
+        this.emit = emit;
+        this.pendingResolvers = [];
+        this.openElements = [];
+        this.shellFinished = false;
+        this.closed = false;
+        this.state = 'data';
+        this.currentTagName = '';
+        this.currentAttributes = new Map();
+        this.currentAttributeName = '';
+        this.currentAttributeValue = '';
+        this.currentAttributeHasValue = false;
+        this.declarationPrefix = '';
+        this.commentTail = '';
+        this.rawTextSearch = '';
+        this.continuationProtocolScript = false;
+        this.continuationProtocolTail = '';
+        this.hasContinuationProtocolCall = false;
+        this.awaitingContinuationProtocol = false;
+    }
+}
+export { DeferredScriptOutputCoordinator };

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

@@ -11,8 +11,8 @@ const extname = (uri)=>{
 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);
+    else if (enableInline instanceof RegExp) return enableInline.test(chunk.url);
+    else return Boolean(enableInline);
 };
 const readAsset = async (chunk)=>{
     const fs = await import("fs/promises");
@@ -80,7 +80,7 @@ class LoadableCollector {
         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;
+            else return script;
         }));
         chunkSet.jsChunk += scripts.filter((script)=>Boolean(script)).join('');
     }
@@ -91,7 +91,7 @@ class LoadableCollector {
         const css = await Promise.all(chunks.filter((chunk)=>!hasStylesheetLink(template, 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;
+            else return link;
         }));
         chunkSet.cssChunk += css.filter((css)=>Boolean(css)).join('');
     }

package/dist/esm-node/router/cli/code/nestedRoutes.mjs

@@ -43,8 +43,7 @@ const optimizeRoute = (routeTree)=>{
                 children: optimizedChildren
             }
         ];
-    }
-    {
+    } else {
         const newRoutes = children.map((child)=>{
             const routePath = routeTree.path ? `${routeTree.path}${child.path ? `/${child.path}` : ''}` : child.path || '';
             const newRoute = {

package/dist/esm-node/router/cli/code/templates.mjs

@@ -376,7 +376,7 @@ const runtimeGlobalContext = async ({ entryName, metaName, srcDirectory, nestedR
         enableRsc: true,
       });
     `;
-    return `${imports.join('\n')}
+    else return `${imports.join('\n')}
 
     import { routes } from './routes';
 

package/dist/esm-node/router/cli/code/utils.mjs

@@ -11,7 +11,7 @@ const walkDirectory = (dir)=>fs.readdirSync(dir).reduce((previous, filename)=>{
             ...previous,
             ...walkDirectory(filePath)
         ];
-        return [
+        else return [
             ...previous,
             filePath
         ];
@@ -28,7 +28,7 @@ const isPageComponentFile = (filePath)=>{
 };
 const replaceWithAlias = (base, filePath, alias)=>{
     if (filePath.includes(base)) return normalizeToPosixPath(path.join(alias, path.relative(base, filePath)));
-    return filePath;
+    else return filePath;
 };
 const parseModule = async ({ source, filename })=>{
     let content = source;

package/dist/esm-node/router/runtime/DeferredDataScripts.node.mjs

@@ -14,7 +14,8 @@ const DeferredDataScripts = (props)=>{
     }, []);
     const deferredScripts = useMemo(()=>{
         if (!staticContext) return null;
-        const activeDeferreds = storage.useContext().activeDeferreds;
+        const requestStorage = storage.useContext();
+        const activeDeferreds = requestStorage.activeDeferreds;
         const _ROUTER_DATA = {
             loaderData: staticContext.loaderData,
             errors: serializeErrors(staticContext.errors)
@@ -27,6 +28,7 @@ const DeferredDataScripts = (props)=>{
         const deferredDataScripts = [];
         const initialScripts = Array.from(activeDeferreds.entries()).map(([routeId, deferredData])=>{
             const pendingKeys = new Set(deferredData.pendingKeys);
+            requestStorage.deferredScriptKeys?.set(routeId, Array.from(pendingKeys));
             const { deferredKeys } = deferredData;
             const deferredKeyPromiseManifests = deferredKeys.map((key)=>{
                 if (pendingKeys.has(key)) return {
@@ -37,7 +39,7 @@ const DeferredDataScripts = (props)=>{
                         serializeJson(key)
                     ]
                 };
-                {
+                else {
                     const trackedPromise = deferredData.data[key];
                     if (void 0 !== trackedPromise._error) {
                         const error = {
@@ -52,15 +54,16 @@ const DeferredDataScripts = (props)=>{
                                 serializeJson(error)
                             ]
                         };
+                    } else {
+                        if (void 0 === trackedPromise._data) throw new Error(`The deferred data for ${key} was not resolved, did you forget to return data from a deferred promise`);
+                        return {
+                            key,
+                            routerDataFnName: 'p',
+                            routerDataFnArgs: [
+                                serializeJson(trackedPromise._data)
+                            ]
+                        };
                     }
-                    if (void 0 === trackedPromise._data) throw new Error(`The deferred data for ${key} was not resolved, did you forget to return data from a deferred promise`);
-                    return {
-                        key,
-                        routerDataFnName: 'p',
-                        routerDataFnArgs: [
-                            serializeJson(trackedPromise._data)
-                        ]
-                    };
                 }
             });
             return {

package/dist/esm-node/router/runtime/plugin.node.mjs

@@ -107,7 +107,7 @@ const routerPlugin = (userConfig = {})=>({
                         }) : /*#__PURE__*/ jsx(RSCStaticRouter, {
                             basename: basename
                         });
-                        {
+                        else {
                             const routerWrapper = /*#__PURE__*/ jsxs(Fragment, {
                                 children: [
                                     /*#__PURE__*/ jsx(StaticRouterProvider, {

package/dist/types/core/server/stream/deferredScript.d.ts

@@ -12,4 +12,4 @@ export declare function toErrorInfo(error: unknown): {
     stack?: string;
 };
 export declare function buildDeferredDataScript(nonce: string | undefined, args: unknown[]): string;
-export declare function enqueueFromEntries(entries: Array<[string, unknown]>, nonce: string | undefined, emit: (script: string) => void): void;
+export declare function enqueueFromEntries(entries: Array<[string, unknown]>, deferredScriptKeys: Map<string, string[]> | undefined, nonce: string | undefined, emit: (script: string) => void): Promise<void>;

package/dist/types/core/server/stream/deferredScriptOutputCoordinator.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Serializes the router's deferred-data resolver scripts with React's Fizz
+ * output without rewriting either producer's bytes.
+ *
+ * Why this exists:
+ * - A resolver script settles the client-side Promise created for a
+ *   `defer()` key. It must be sent when that individual server Promise
+ *   settles; waiting for the whole React stream would unnecessarily delay
+ *   hydration and interactivity behind unrelated Suspense boundaries.
+ * - React and the resolver callbacks are independent stream producers. A
+ *   direct `write()` can therefore land in a partial HTML tag, a hidden Fizz
+ *   segment container, or between that container and its continuation
+ *   instruction.
+ * - React's public streaming callbacks expose shell/all-ready lifecycle
+ *   events, not a safe byte-level insertion point. React chunk sizes and
+ *   `progressiveChunkSize` are buffering heuristics, not HTML or Fizz
+ *   boundaries.
+ *
+ * The coordinator deliberately recognizes the Fizz continuation containers
+ * and instructions used by the supported React stream format. This is a
+ * compatibility boundary: when the supported React/Fizz output protocol is
+ * changed, update this recognizer and its Node, Edge, HTML, SVG, MathML, and
+ * table continuation tests together. It is not intended to be a general HTML
+ * rewriter.
+ *
+ * Shell completion only makes a resolver eligible to send. The resolver is
+ * emitted after a root-level HTML boundary and, for a continuation segment,
+ * after React's matching continuation instruction.
+ */
+export declare class DeferredScriptOutputCoordinator {
+    private readonly emit;
+    private readonly pendingResolvers;
+    private readonly openElements;
+    private shellFinished;
+    private closed;
+    private state;
+    private currentTagName;
+    private currentAttributes;
+    private currentAttributeName;
+    private currentAttributeValue;
+    private currentAttributeHasValue;
+    private declarationPrefix;
+    private commentTail;
+    private rawTextElement;
+    private rawTextSearch;
+    private continuationProtocolScript;
+    private continuationProtocolTail;
+    private hasContinuationProtocolCall;
+    private awaitingContinuationProtocol;
+    constructor(emit: (chunk: string) => void);
+    enqueueResolver(script: string): void;
+    /**
+     * Keep this separate from the ShellChunkStatus assignment. The caller sets
+     * FINISH at the existing marker position, then calls this after the marker
+     * chunk's afterMark bytes have been observed.
+     */
+    markShellFinished(): void;
+    writeReact(chunk: string): void;
+    finish(): void;
+    abort(): void;
+    private isSafeBoundary;
+    private flushResolvers;
+    private consume;
+    private startTag;
+    private startAttribute;
+    private completeAttribute;
+    private completeStartTag;
+    private completeEndTag;
+    private consumeRawText;
+    private completeRawTextEndTag;
+    private closeOpenElement;
+}

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.9.1",
+  "version": "3.9.3",
   "engines": {
     "node": ">=20"
   },
@@ -215,12 +215,12 @@
     "isbot": "3.8.0",
     "react-helmet": "^6.1.0",
     "react-is": "^18.3.1",
-    "@modern-js/plugin": "3.9.1",
-    "@modern-js/runtime-utils": "3.9.1",
-    "@modern-js/plugin-data-loader": "3.9.1",
-    "@modern-js/types": "3.9.1",
-    "@modern-js/render": "3.9.1",
-    "@modern-js/utils": "3.9.1"
+    "@modern-js/plugin": "3.9.3",
+    "@modern-js/plugin-data-loader": "3.9.3",
+    "@modern-js/render": "3.9.3",
+    "@modern-js/runtime-utils": "3.9.3",
+    "@modern-js/types": "3.9.3",
+    "@modern-js/utils": "3.9.3"
   },
   "peerDependencies": {
     "react": ">=18.3.1",
@@ -228,10 +228,10 @@
   },
   "devDependencies": {
     "@remix-run/web-fetch": "^4.1.3",
-    "@rsbuild/core": "2.2.4",
-    "@rslib/core": "1.0.0",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.2",
+    "@rsbuild/core": "2.2.9",
+    "@rslib/core": "1.0.1",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
     "@types/cookie": "0.6.0",
     "@types/invariant": "^2.2.37",
     "@types/loadable__server": "5.12.11",
@@ -240,7 +240,7 @@
     "react-dom": "^19.2.8",
     "ts-node": "^10.9.2",
     "typescript": "^5",
-    "@modern-js/app-tools": "3.9.1",
+    "@modern-js/app-tools": "3.9.3",
     "@modern-js/rslib": "2.68.10",
     "@scripts/rstest-config": "2.66.0"
   },