@bleedingdev/modern-js-runtime-renderer-extensions 3.9.0-ultramodern.8 → 3.9.0-ultramodern.9

package/dist/cjs/runtimePlugin.js

@@ -37,6 +37,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    RENDERER_HEAD_PRE_PLUGINS: ()=>RENDERER_HEAD_PRE_PLUGINS,
     createRendererHeadPlugin: ()=>createRendererHeadPlugin,
     default: ()=>runtimePlugin,
     rendererHeadPlugin: ()=>rendererHeadPlugin
@@ -57,7 +58,7 @@ function createRendererHeadPlugin(options = {}) {
             api.resolveComponent((component, { name })=>'head.Helmet' === name ? head.Head : component);
             api.transformRuntimeContext(context_projection_namespaceObject.projectRuntimeContext);
             api.wrapRoot((Root)=>{
-                const HeadRoot = (props)=>head.wrapClientRoot(external_react_default().createElement(Root, props));
+                const HeadRoot = (props)=>head.wrapClientRoot(Root ? external_react_default().createElement(Root, props) : props?.children ?? null);
                 return HeadRoot;
             });
             const createState = (runtimeContext)=>{
@@ -116,12 +117,23 @@ function createRendererHeadPlugin(options = {}) {
         }
     };
 }
-const rendererHeadPlugin = ()=>createRendererHeadPlugin();
+const RENDERER_HEAD_PRE_PLUGINS = [
+    '@modern-js/plugin-router',
+    '@modern-js/plugin-tanstack',
+    '@modern-js/plugin-state',
+    '@modern-js/plugin-i18n'
+];
+const rendererHeadPlugin = ()=>({
+        ...createRendererHeadPlugin(),
+        pre: RENDERER_HEAD_PRE_PLUGINS
+    });
 const runtimePlugin = rendererHeadPlugin;
+exports.RENDERER_HEAD_PRE_PLUGINS = __webpack_exports__.RENDERER_HEAD_PRE_PLUGINS;
 exports.createRendererHeadPlugin = __webpack_exports__.createRendererHeadPlugin;
 exports["default"] = __webpack_exports__["default"];
 exports.rendererHeadPlugin = __webpack_exports__.rendererHeadPlugin;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "RENDERER_HEAD_PRE_PLUGINS",
     "createRendererHeadPlugin",
     "default",
     "rendererHeadPlugin"

package/dist/esm/runtimePlugin.mjs

@@ -13,7 +13,7 @@ function createRendererHeadPlugin(options = {}) {
             api.resolveComponent((component, { name })=>'head.Helmet' === name ? head.Head : component);
             api.transformRuntimeContext(projectRuntimeContext);
             api.wrapRoot((Root)=>{
-                const HeadRoot = (props)=>head.wrapClientRoot(react.createElement(Root, props));
+                const HeadRoot = (props)=>head.wrapClientRoot(Root ? react.createElement(Root, props) : props?.children ?? null);
                 return HeadRoot;
             });
             const createState = (runtimeContext)=>{
@@ -72,7 +72,16 @@ function createRendererHeadPlugin(options = {}) {
         }
     };
 }
-const rendererHeadPlugin = ()=>createRendererHeadPlugin();
+const RENDERER_HEAD_PRE_PLUGINS = [
+    '@modern-js/plugin-router',
+    '@modern-js/plugin-tanstack',
+    '@modern-js/plugin-state',
+    '@modern-js/plugin-i18n'
+];
+const rendererHeadPlugin = ()=>({
+        ...createRendererHeadPlugin(),
+        pre: RENDERER_HEAD_PRE_PLUGINS
+    });
 const runtimePlugin = rendererHeadPlugin;
 export default runtimePlugin;
-export { createRendererHeadPlugin, rendererHeadPlugin };
+export { RENDERER_HEAD_PRE_PLUGINS, createRendererHeadPlugin, rendererHeadPlugin };

package/dist/esm-node/runtimePlugin.mjs

@@ -14,7 +14,7 @@ function createRendererHeadPlugin(options = {}) {
             api.resolveComponent((component, { name })=>'head.Helmet' === name ? head.Head : component);
             api.transformRuntimeContext(projectRuntimeContext);
             api.wrapRoot((Root)=>{
-                const HeadRoot = (props)=>head.wrapClientRoot(react.createElement(Root, props));
+                const HeadRoot = (props)=>head.wrapClientRoot(Root ? react.createElement(Root, props) : props?.children ?? null);
                 return HeadRoot;
             });
             const createState = (runtimeContext)=>{
@@ -73,7 +73,16 @@ function createRendererHeadPlugin(options = {}) {
         }
     };
 }
-const rendererHeadPlugin = ()=>createRendererHeadPlugin();
+const RENDERER_HEAD_PRE_PLUGINS = [
+    '@modern-js/plugin-router',
+    '@modern-js/plugin-tanstack',
+    '@modern-js/plugin-state',
+    '@modern-js/plugin-i18n'
+];
+const rendererHeadPlugin = ()=>({
+        ...createRendererHeadPlugin(),
+        pre: RENDERER_HEAD_PRE_PLUGINS
+    });
 const runtimePlugin = rendererHeadPlugin;
 export default runtimePlugin;
-export { createRendererHeadPlugin, rendererHeadPlugin };
+export { RENDERER_HEAD_PRE_PLUGINS, createRendererHeadPlugin, rendererHeadPlugin };

package/dist/types/runtimePlugin.d.ts

@@ -3,5 +3,11 @@ export type RendererHeadPluginOptions = {
     processNodeStream?: (source: NodeJS.ReadWriteStream, context: object, terminalMarker: string) => NodeJS.ReadWriteStream;
 };
 export declare function createRendererHeadPlugin(options?: RendererHeadPluginOptions): RuntimePlugin<{}>;
+/**
+ * The plugins whose root this one wraps. Declaring them keeps the head
+ * provider outside their trees no matter what order the CLI emitted the
+ * runtime descriptors in.
+ */
+export declare const RENDERER_HEAD_PRE_PLUGINS: string[];
 export declare const rendererHeadPlugin: () => RuntimePlugin<{}>;
 export default rendererHeadPlugin;

package/package.json

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

package/src/runtimePlugin.ts

@@ -39,7 +39,15 @@ export function createRendererHeadPlugin(
       api.transformRuntimeContext(projectRuntimeContext);
       api.wrapRoot(Root => {
         const HeadRoot = (props: React.ComponentProps<typeof Root>) =>
-          head.wrapClientRoot(React.createElement(Root, props));
+          // A root is only defined once the plugin that owns it (the router,
+          // for a file-system routes entry) has run. This plugin must keep
+          // working when it is registered before that one: it then wraps the
+          // children the later plugin hands it instead of a missing root.
+          head.wrapClientRoot(
+            Root
+              ? React.createElement(Root, props)
+              : ((props as { children?: React.ReactNode })?.children ?? null),
+          );
         return HeadRoot;
       });
 
@@ -113,7 +121,21 @@ export function createRendererHeadPlugin(
   };
 }
 
-export const rendererHeadPlugin = (): RuntimePlugin<{}> =>
-  createRendererHeadPlugin();
+/**
+ * The plugins whose root this one wraps. Declaring them keeps the head
+ * provider outside their trees no matter what order the CLI emitted the
+ * runtime descriptors in.
+ */
+export const RENDERER_HEAD_PRE_PLUGINS = [
+  '@modern-js/plugin-router',
+  '@modern-js/plugin-tanstack',
+  '@modern-js/plugin-state',
+  '@modern-js/plugin-i18n',
+];
+
+export const rendererHeadPlugin = (): RuntimePlugin<{}> => ({
+  ...createRendererHeadPlugin(),
+  pre: RENDERER_HEAD_PRE_PLUGINS,
+});
 
 export default rendererHeadPlugin;

package/tests/rootWrapOrder.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import {
+  getGlobalInternalRuntimeContext,
+  setGlobalContext,
+  setGlobalInternalRuntimeContext,
+} from '../../plugin-runtime/src/core/context';
+import { registerPlugin } from '../../plugin-runtime/src/core/plugin';
+import rendererHeadPlugin, {
+  RENDERER_HEAD_PRE_PLUGINS,
+} from '../src/runtimePlugin';
+
+const previousRuntime = getGlobalInternalRuntimeContext();
+
+afterEach(() => {
+  setGlobalInternalRuntimeContext(previousRuntime);
+});
+
+/** A stand-in for the router: it owns the root for a file-system routes entry. */
+const routerLikePlugin = (content: React.ReactNode) => ({
+  name: '@modern-js/plugin-router',
+  setup(api: any) {
+    api.wrapRoot((App: React.ComponentType<any> | undefined) => {
+      const RouterWrapper = (props: any) =>
+        App
+          ? React.createElement(App, props, content)
+          : React.createElement(React.Fragment, null, content);
+      return RouterWrapper;
+    });
+  },
+});
+
+const renderRoot = () => {
+  const hooks = getGlobalInternalRuntimeContext().hooks;
+  // `App` is undefined for a routes entry until the router defines it.
+  const Root = hooks.wrapRoot.call(undefined as any);
+  return renderToString(React.createElement(Root));
+};
+
+describe('renderer head root wrapping', () => {
+  beforeEach(() => {
+    setGlobalContext({ enableRsc: false });
+  });
+
+  it('declares the runtime plugins it must wrap', () => {
+    expect(RENDERER_HEAD_PRE_PLUGINS).toContain('@modern-js/plugin-router');
+    expect(rendererHeadPlugin().pre).toEqual(RENDERER_HEAD_PRE_PLUGINS);
+  });
+
+  it('renders the router root when it is registered after the router', () => {
+    registerPlugin([
+      routerLikePlugin(React.createElement('main', null, 'routed')),
+      rendererHeadPlugin(),
+    ]);
+
+    expect(renderRoot()).toContain('routed');
+  });
+
+  it('still renders when its descriptor is emitted before the router', () => {
+    // The CLI appends the renderer descriptor first for a plain `appTools()`
+    // app. Without an undefined-root fallback this threw
+    // "Element type is invalid ... but got: undefined" during SSR.
+    registerPlugin([
+      rendererHeadPlugin(),
+      routerLikePlugin(React.createElement('main', null, 'routed')),
+    ]);
+
+    expect(renderRoot()).toContain('routed');
+  });
+});