@bleedingdev/modern-js-runtime-renderer-extensions 3.9.0-ultramodern.17 → 3.9.0-ultramodern.18

package/dist/cjs/runtimePlugin.js

@@ -61,11 +61,12 @@ function createRendererHeadPlugin(options = {}) {
                 const HeadRoot = (props)=>head.wrapClientRoot(Root ? external_react_default().createElement(Root, props) : props?.children ?? null);
                 return HeadRoot;
             });
-            const createState = (runtimeContext)=>{
+            const createState = ({ runtimeContext, monitors })=>{
                 const helmetContext = (0, helmet_context_namespaceObject.ensureHelmetContext)(runtimeContext);
+                const reportLateHead = 'production' === process.env.NODE_ENV ? (message)=>monitors.warn(message) : (message)=>monitors.error(message);
                 const lifecycle = {
                     beforeReact () {
-                        (0, runtime_extensions_namespaceObject.beginHeadRender)(runtimeContext);
+                        (0, runtime_extensions_namespaceObject.beginHeadRender)(runtimeContext, reportLateHead);
                     },
                     completedBody (html, { phase }) {
                         if ('complete' === phase) return (0, runtime_extensions_namespaceObject.completeHeadRender)(runtimeContext, html);
@@ -90,7 +91,7 @@ function createRendererHeadPlugin(options = {}) {
                 };
             };
             api.extendStringSSRCollectors(({ render })=>{
-                const state = createState(render.runtimeContext);
+                const state = createState(render);
                 return {
                     ...state.lifecycle,
                     ...(0, external_assetPolicy_js_namespaceObject.createAssetPolicy)(render),
@@ -103,7 +104,7 @@ function createRendererHeadPlugin(options = {}) {
                 const { runtimeContext, terminalMarker } = info;
                 const processNodeStream = options.processNodeStream;
                 if ('node' === info.platform && void 0 === processNodeStream) throw new Error('Node head rendering requires the Node runtime-renderer-extensions entry');
-                const state = createState(runtimeContext);
+                const state = createState(info);
                 return {
                     ...state.lifecycle,
                     ...(0, external_assetPolicy_js_namespaceObject.createAssetPolicy)(info),

package/dist/esm/runtimePlugin.mjs

@@ -16,11 +16,12 @@ function createRendererHeadPlugin(options = {}) {
                 const HeadRoot = (props)=>head.wrapClientRoot(Root ? react.createElement(Root, props) : props?.children ?? null);
                 return HeadRoot;
             });
-            const createState = (runtimeContext)=>{
+            const createState = ({ runtimeContext, monitors })=>{
                 const helmetContext = ensureHelmetContext(runtimeContext);
+                const reportLateHead = 'production' === process.env.NODE_ENV ? (message)=>monitors.warn(message) : (message)=>monitors.error(message);
                 const lifecycle = {
                     beforeReact () {
-                        beginHeadRender(runtimeContext);
+                        beginHeadRender(runtimeContext, reportLateHead);
                     },
                     completedBody (html, { phase }) {
                         if ('complete' === phase) return completeHeadRender(runtimeContext, html);
@@ -45,7 +46,7 @@ function createRendererHeadPlugin(options = {}) {
                 };
             };
             api.extendStringSSRCollectors(({ render })=>{
-                const state = createState(render.runtimeContext);
+                const state = createState(render);
                 return {
                     ...state.lifecycle,
                     ...createAssetPolicy(render),
@@ -58,7 +59,7 @@ function createRendererHeadPlugin(options = {}) {
                 const { runtimeContext, terminalMarker } = info;
                 const processNodeStream = options.processNodeStream;
                 if ('node' === info.platform && void 0 === processNodeStream) throw new Error('Node head rendering requires the Node runtime-renderer-extensions entry');
-                const state = createState(runtimeContext);
+                const state = createState(info);
                 return {
                     ...state.lifecycle,
                     ...createAssetPolicy(info),

package/dist/esm-node/runtimePlugin.mjs

@@ -17,11 +17,12 @@ function createRendererHeadPlugin(options = {}) {
                 const HeadRoot = (props)=>head.wrapClientRoot(Root ? react.createElement(Root, props) : props?.children ?? null);
                 return HeadRoot;
             });
-            const createState = (runtimeContext)=>{
+            const createState = ({ runtimeContext, monitors })=>{
                 const helmetContext = ensureHelmetContext(runtimeContext);
+                const reportLateHead = 'production' === process.env.NODE_ENV ? (message)=>monitors.warn(message) : (message)=>monitors.error(message);
                 const lifecycle = {
                     beforeReact () {
-                        beginHeadRender(runtimeContext);
+                        beginHeadRender(runtimeContext, reportLateHead);
                     },
                     completedBody (html, { phase }) {
                         if ('complete' === phase) return completeHeadRender(runtimeContext, html);
@@ -46,7 +47,7 @@ function createRendererHeadPlugin(options = {}) {
                 };
             };
             api.extendStringSSRCollectors(({ render })=>{
-                const state = createState(render.runtimeContext);
+                const state = createState(render);
                 return {
                     ...state.lifecycle,
                     ...createAssetPolicy(render),
@@ -59,7 +60,7 @@ function createRendererHeadPlugin(options = {}) {
                 const { runtimeContext, terminalMarker } = info;
                 const processNodeStream = options.processNodeStream;
                 if ('node' === info.platform && void 0 === processNodeStream) throw new Error('Node head rendering requires the Node runtime-renderer-extensions entry');
-                const state = createState(runtimeContext);
+                const state = createState(info);
                 return {
                     ...state.lifecycle,
                     ...createAssetPolicy(info),

package/package.json

@@ -11,7 +11,7 @@
     "directory": "packages/runtime/renderer-extensions"
   },
   "license": "MIT",
-  "version": "3.9.0-ultramodern.17",
+  "version": "3.9.0-ultramodern.18",
   "engines": {
     "node": ">=26.7.0"
   },
@@ -36,12 +36,12 @@
     }
   },
   "dependencies": {
-    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.9.0-ultramodern.17",
-    "@modern-js/runtime-extensions": "npm:@bleedingdev/modern-js-runtime-extensions@3.9.0-ultramodern.17"
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.9.0-ultramodern.18",
+    "@modern-js/runtime-extensions": "npm:@bleedingdev/modern-js-runtime-extensions@3.9.0-ultramodern.18"
   },
   "devDependencies": {
-    "@modern-js/render": "npm:@bleedingdev/modern-js-render@3.9.0-ultramodern.17",
-    "@modern-js/tsconfig": "npm:@bleedingdev/modern-js-tsconfig@3.9.0-ultramodern.17",
+    "@modern-js/render": "npm:@bleedingdev/modern-js-render@3.9.0-ultramodern.18",
+    "@modern-js/tsconfig": "npm:@bleedingdev/modern-js-tsconfig@3.9.0-ultramodern.18",
     "@rslib/core": "1.0.2",
     "@scripts/rstest-config": "2.66.0",
     "@testing-library/dom": "^10.4.2",

package/rstest.config.mts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import type { ProjectConfig } from '@rstest/core';
 import { withTestPreset } from '@scripts/rstest-config';
 
@@ -5,6 +6,17 @@ const commonConfig: ProjectConfig = {
   root: __dirname,
   globals: true,
   setupFiles: ['@scripts/rstest-config/setup.ts'],
+  resolve: {
+    alias: {
+      // The plugin-runtime sources under test reach their contexts through the
+      // package self-reference; resolve it to the same source module the tests
+      // import, as plugin-runtime's own tsconfig paths do.
+      '@modern-js/runtime/context$': path.join(
+        __dirname,
+        '../plugin-runtime/src/core/context/index.ts',
+      ),
+    },
+  },
   tools: {
     swc: {
       jsc: {

package/src/runtimePlugin.ts

@@ -1,6 +1,7 @@
 import type {
   Collector,
   RuntimePlugin,
+  SSRRenderInfo,
   SSRRenderLifecycle,
   StreamSSRExtender,
 } from '@modern-js/plugin/runtime';
@@ -51,11 +52,15 @@ export function createRendererHeadPlugin(
         return HeadRoot;
       });
 
-      const createState = (runtimeContext: object) => {
+      const createState = ({ runtimeContext, monitors }: SSRRenderInfo) => {
         const helmetContext = ensureHelmetContext(runtimeContext);
+        const reportLateHead =
+          process.env.NODE_ENV === 'production'
+            ? (message: string) => monitors.warn(message)
+            : (message: string) => monitors.error(message);
         const lifecycle: SSRRenderLifecycle = {
           beforeReact() {
-            beginHeadRender(runtimeContext);
+            beginHeadRender(runtimeContext, reportLateHead);
           },
           completedBody(html, { phase }) {
             if (phase === 'complete') {
@@ -80,7 +85,7 @@ export function createRendererHeadPlugin(
       };
 
       api.extendStringSSRCollectors(({ render }): Collector => {
-        const state = createState(render.runtimeContext);
+        const state = createState(render);
         return {
           ...state.lifecycle,
           ...createAssetPolicy(render),
@@ -97,7 +102,7 @@ export function createRendererHeadPlugin(
             'Node head rendering requires the Node runtime-renderer-extensions entry',
           );
         }
-        const state = createState(runtimeContext);
+        const state = createState(info);
         return {
           ...state.lifecycle,
           ...createAssetPolicy(info),

package/tests/headRuntime.test.tsx

@@ -48,6 +48,7 @@ function wrapRuntimeContextProvider(
       platform: 'node',
       mode: 'string',
       isRsc: getGlobalEnableRsc() === true,
+      monitors: console,
     },
   });
   for (const collector of collectors) root = collector.collect?.(root) ?? root;

package/tests/nativeAssetPolicy.test.tsx

@@ -21,6 +21,7 @@ const lifecycleFor = (options: any, mode: 'string' | 'stream' = 'stream') => {
     platform: 'node' as const,
     mode,
     isRsc: false,
+    monitors: console,
   };
   return createSSRRenderLifecycle(
     mode === 'string'

package/tests/nativeStreamHead.test.tsx

@@ -1,4 +1,7 @@
+import { LATE_HEAD_MESSAGE } from '@modern-js/runtime-extensions';
 import React from 'react';
+import { storage } from '../../../toolkit/runtime-utils/src/node';
+import { defaultMonitors } from '../../plugin-runtime/src/core/context/monitors/default';
 import { registerPlugin } from '../../plugin-runtime/src/core/plugin';
 import { renderStreaming } from '../../plugin-runtime/src/core/server/stream';
 import { Helmet } from '../../plugin-runtime/src/exports/head';
@@ -24,20 +27,40 @@ const createRuntimeContext = () => ({
   },
 });
 
-const renderDocument = async (root: React.ReactElement) => {
+const renderDocument = async (
+  root: React.ReactElement,
+  {
+    headers = {},
+    onShell,
+  }: { headers?: Record<string, string>; onShell?: () => void } = {},
+) => {
   registerPlugin([rendererHeadPlugin()]);
-  const stream = await renderStreaming(new Request('http://localhost/'), root, {
-    resource: {
-      entryName: 'index',
-      htmlTemplate: '<html><head></head><body><!--<?- html ?>--></body></html>',
-      routeManifest: {},
-    },
-    runtimeContext: createRuntimeContext(),
-    config: {},
-    onError: () => {},
-    onTiming: () => {},
-  } as any);
-  return new Response(stream).text();
+  return storage.run({}, async () => {
+    const stream = await renderStreaming(
+      new Request('http://localhost/', { headers }),
+      root,
+      {
+        resource: {
+          entryName: 'index',
+          htmlTemplate:
+            '<html><head></head><body><!--<?- html ?>--></body></html>',
+          routeManifest: {},
+        },
+        runtimeContext: createRuntimeContext(),
+        config: {},
+        onError: () => {},
+        onTiming: () => {},
+      } as any,
+    );
+    const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
+    let html = '';
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) return html;
+      if (html === '') onShell?.();
+      html += value;
+    }
+  });
 };
 
 describe('streaming Helmet collection', () => {
@@ -98,4 +121,74 @@ describe('streaming Helmet collection', () => {
     );
     expect(html).toContain('<main>Route content. ');
   });
+
+  describe('a Helmet in a boundary that completes after the shell', () => {
+    const createLateTree = () => {
+      let resolve!: () => void;
+      const ready = new Promise<void>(done => {
+        resolve = done;
+      });
+      let settled = false;
+      ready.then(() => {
+        settled = true;
+      });
+      const Late = () => {
+        if (!settled) throw ready;
+        return (
+          <Helmet>
+            <title>Late title</title>
+          </Helmet>
+        );
+      };
+      // A root-level Suspense could hold the document preamble, so React
+      // would wait for it; apps render routes inside a container.
+      const tree = (
+        <div id="app">
+          <Helmet>
+            <meta name="shell" content="committed" />
+          </Helmet>
+          <React.Suspense fallback="loading">
+            <Late />
+          </React.Suspense>
+        </div>
+      );
+      return { tree, resolve };
+    };
+
+    afterEach(() => {
+      rstest.restoreAllMocks();
+    });
+
+    it('reports the dropped head tags', async () => {
+      const error = rstest
+        .spyOn(defaultMonitors, 'error')
+        .mockImplementation(() => {});
+      const { tree, resolve } = createLateTree();
+      const html = await renderDocument(tree, { onShell: resolve });
+
+      const head = html.slice(0, html.indexOf('</head>'));
+      expect(head).toContain('name="shell" content="committed"');
+      expect(html).toContain('loading');
+      expect(head).not.toContain('Late title');
+      expect(error).toHaveBeenCalledTimes(1);
+      expect(error).toHaveBeenCalledWith(LATE_HEAD_MESSAGE);
+      expect(LATE_HEAD_MESSAGE).toContain('<Helmet>');
+    });
+
+    it('gives a bot the full head', async () => {
+      const error = rstest.spyOn(defaultMonitors, 'error');
+      const warn = rstest.spyOn(defaultMonitors, 'warn');
+      const { tree, resolve } = createLateTree();
+      setTimeout(resolve, 0);
+      const html = await renderDocument(tree, {
+        headers: { 'user-agent': 'Googlebot/2.1' },
+      });
+
+      const head = html.slice(0, html.indexOf('</head>'));
+      expect(head).toContain('name="shell" content="committed"');
+      expect(head).toMatch(/<title[^>]*>Late title<\/title>/);
+      expect(error).not.toHaveBeenCalled();
+      expect(warn).not.toHaveBeenCalled();
+    });
+  });
 });

package/tests/nativeTemplatePolicy.test.tsx

@@ -21,6 +21,7 @@ const lifecycleFor = (options: any, mode: 'string' | 'stream' = 'stream') => {
     platform: 'node' as const,
     mode,
     isRsc: false,
+    monitors: console,
   };
   return createSSRRenderLifecycle(
     mode === 'string'