@bleedingdev/modern-js-runtime-renderer-extensions 0.0.0 → 3.9.0-ultramodern.10

package/dist/esm-node/assetPolicy.mjs

@@ -0,0 +1,49 @@
+import "node:module";
+import { getMatchedRouteChunks, orderHydrationScriptChunks } from "@modern-js/runtime-extensions";
+import { getRouterMatchedRouteIds } from "@modern-js/runtime-extensions/router-state";
+function getRendererResources(render) {
+    const resource = render.resource;
+    const context = render.runtimeContext;
+    return {
+        resource,
+        entryName: resource?.entryName ?? 'index',
+        routeManifest: 'string' === render.mode ? resource?.routeManifest : context.routeManifest
+    };
+}
+function createAssetPolicy(render) {
+    const { routeManifest, entryName } = getRendererResources(render);
+    return {
+        transformAssets (assets, info) {
+            const matchedRouteIds = getRouterMatchedRouteIds(render.runtimeContext) ?? [];
+            if ('loadable' === info.source) {
+                const matched = getMatchedRouteChunks(routeManifest, matchedRouteIds, info.createAsset);
+                if ('style' === info.kind) return [
+                    ...assets,
+                    ...matched
+                ];
+                const asyncEntryChunks = [
+                    ...info.groups.find((group)=>'async-entry' === group.name)?.assets ?? []
+                ];
+                const collectedChunks = [
+                    ...info.groups.find((group)=>'loadable' === group.name)?.assets ?? []
+                ];
+                return orderHydrationScriptChunks({
+                    asyncEntryChunks,
+                    collectedChunks,
+                    matchedRouteChunks: matched,
+                    entryName
+                });
+            }
+            if ('style' !== info.kind || 0 === matchedRouteIds.length) return assets;
+            const routeAssets = routeManifest?.routeAssets;
+            if (void 0 === routeAssets) return assets;
+            const matched = matchedRouteIds.flatMap((routeId)=>routeAssets[routeId]?.referenceCssAssets ?? []).map(info.createAsset);
+            const entry = info.groups.find((group)=>'async-entry' === group.name)?.assets ?? [];
+            return [
+                ...matched,
+                ...entry
+            ];
+        }
+    };
+}
+export { createAssetPolicy, getRendererResources };

package/dist/esm-node/federatedCss.mjs

@@ -0,0 +1,20 @@
+import "node:module";
+import { escapeHtmlAttribute } from "@modern-js/runtime-extensions";
+const createFederatedCssLinks = (assets, options, { attributesToString, hasStylesheetLink })=>{
+    if (void 0 === assets || 0 === assets.length) return '';
+    const seen = new Set(options.existingAssets || []);
+    const attributes = attributesToString(Object.fromEntries(Object.entries(options.attributes || {}).filter(([name])=>![
+            'href',
+            'rel'
+        ].includes(name.toLowerCase()))));
+    const links = [];
+    for (const asset of assets){
+        const href = escapeHtmlAttribute(asset);
+        if (!('' === asset || seen.has(asset) || hasStylesheetLink(options.template, asset) || hasStylesheetLink(options.template, href))) {
+            seen.add(asset);
+            links.push(`<link${attributes} href="${href}" rel="stylesheet" />`);
+        }
+    }
+    return links.join('');
+};
+export { createFederatedCssLinks };

package/dist/esm-node/node.mjs

@@ -0,0 +1,11 @@
+import "node:module";
+import { createNodeHeadMarkerStripper } from "@modern-js/runtime-extensions/node";
+import { createRendererHeadPlugin } from "./runtimePlugin.mjs";
+const rendererHeadPlugin = ()=>createRendererHeadPlugin({
+        processNodeStream (source, context, terminalMarker) {
+            return source.pipe(createNodeHeadMarkerStripper(context, terminalMarker));
+        }
+    });
+const node = rendererHeadPlugin;
+export default node;
+export { createRendererHeadPlugin, rendererHeadPlugin };

package/dist/esm-node/runtimePlugin.mjs

@@ -0,0 +1,88 @@
+import "node:module";
+import { abortHeadRender, beginHeadRender, completeHeadRender, createConservingWebShellStream, publishHeadRender } from "@modern-js/runtime-extensions";
+import { projectRuntimeContext } from "@modern-js/runtime-extensions/context-projection";
+import { createHeadRuntime } from "@modern-js/runtime-extensions/head-runtime";
+import { ensureHelmetContext } from "@modern-js/runtime-extensions/helmet-context";
+import react from "react";
+import { createAssetPolicy } from "./assetPolicy.mjs";
+import { createTemplatePolicy } from "./templatePolicy.mjs";
+function createRendererHeadPlugin(options = {}) {
+    return {
+        name: '@modern-js/runtime-renderer-extensions',
+        setup (api) {
+            const head = createHeadRuntime();
+            api.resolveComponent((component, { name })=>'head.Helmet' === name ? head.Head : component);
+            api.transformRuntimeContext(projectRuntimeContext);
+            api.wrapRoot((Root)=>{
+                const HeadRoot = (props)=>head.wrapClientRoot(Root ? react.createElement(Root, props) : props?.children ?? null);
+                return HeadRoot;
+            });
+            const createState = (runtimeContext)=>{
+                const helmetContext = ensureHelmetContext(runtimeContext);
+                const lifecycle = {
+                    beforeReact () {
+                        beginHeadRender(runtimeContext);
+                    },
+                    completedBody (html, { phase }) {
+                        if ('complete' === phase) return completeHeadRender(runtimeContext, html);
+                        publishHeadRender(runtimeContext);
+                        return html;
+                    },
+                    getHeadData () {
+                        return helmetContext.helmet ?? void 0;
+                    },
+                    onTerminal (terminal) {
+                        if ('complete' !== terminal.status) abortHeadRender(runtimeContext);
+                    }
+                };
+                return {
+                    lifecycle,
+                    wrap (root) {
+                        return head.wrapServerRoot(root, {
+                            runtimeContext,
+                            helmetContext
+                        });
+                    }
+                };
+            };
+            api.extendStringSSRCollectors(({ render })=>{
+                const state = createState(render.runtimeContext);
+                return {
+                    ...state.lifecycle,
+                    ...createAssetPolicy(render),
+                    ...createTemplatePolicy(render),
+                    collect: state.wrap,
+                    effect () {}
+                };
+            });
+            api.extendStreamSSR((info)=>{
+                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);
+                return {
+                    ...state.lifecycle,
+                    ...createAssetPolicy(info),
+                    ...createTemplatePolicy(info),
+                    modifyRootElement: state.wrap,
+                    streamPhase: 'body',
+                    processStream: void 0 === processNodeStream ? void 0 : (source)=>processNodeStream(source, runtimeContext, terminalMarker),
+                    processReadableStream: (source)=>createConservingWebShellStream(source, runtimeContext, terminalMarker)
+                };
+            });
+        }
+    };
+}
+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 { RENDERER_HEAD_PRE_PLUGINS, createRendererHeadPlugin, rendererHeadPlugin };

package/dist/esm-node/templatePolicy.mjs

@@ -0,0 +1,39 @@
+import "node:module";
+import { createRouteHydrationScriptTags, replaceChunkJsPlaceholder } from "@modern-js/runtime-extensions";
+import { getRouterHydrationScripts, getRouterMatchedRouteIds, getRouterServerSnapshot } from "@modern-js/runtime-extensions/router-state";
+import { getRendererResources } from "./assetPolicy.mjs";
+import { createFederatedCssLinks } from "./federatedCss.mjs";
+function createTemplatePolicy(render) {
+    const { resource, routeManifest, entryName } = getRendererResources(render);
+    const config = render.config;
+    return {
+        getRouterData () {
+            return getRouterServerSnapshot(render.runtimeContext)?.routerData || void 0;
+        },
+        transformTemplateChunk (chunk, formatting) {
+            if ('styles' === chunk.name) return {
+                ...chunk,
+                content: chunk.content + createFederatedCssLinks(resource?.moduleFederationCssAssets, {
+                    template: chunk.template,
+                    attributes: chunk.attributes,
+                    existingAssets: chunk.emittedAssets
+                }, formatting)
+            };
+            let content = chunk.content;
+            if ("scripts" === chunk.name && 'stream' === render.mode) content = createRouteHydrationScriptTags(routeManifest, getRouterMatchedRouteIds(render.runtimeContext) ?? [], entryName, {
+                nonce: config?.nonce,
+                template: chunk.template
+            });
+            else if ('data' === chunk.name) {
+                const scripts = getRouterHydrationScripts(render.runtimeContext);
+                if (scripts.length > 0) content += `\n${scripts.join('\n')}`;
+            }
+            return {
+                ...chunk,
+                content: '',
+                template: replaceChunkJsPlaceholder(chunk.template, content, entryName, chunk.placeholder)
+            };
+        }
+    };
+}
+export { createTemplatePolicy };

package/dist/types/assetPolicy.d.ts

@@ -0,0 +1,19 @@
+import type { SSRRenderInfo, SSRRenderLifecycle } from '@modern-js/plugin/runtime';
+export type RendererRouteManifest = {
+    routeAssets?: Record<string, {
+        assets?: string[];
+        referenceCssAssets?: string[];
+    } | undefined>;
+};
+export type RendererResource = {
+    entryName?: string;
+    htmlTemplate?: string;
+    routeManifest?: RendererRouteManifest;
+    moduleFederationCssAssets?: string[];
+};
+export declare function getRendererResources(render: SSRRenderInfo): {
+    resource: RendererResource | undefined;
+    entryName: string;
+    routeManifest: RendererRouteManifest | undefined;
+};
+export declare function createAssetPolicy(render: SSRRenderInfo): Pick<SSRRenderLifecycle, 'transformAssets'>;

package/dist/types/federatedCss.d.ts

@@ -0,0 +1,6 @@
+import type { SSRHtmlFormatting } from '@modern-js/plugin/runtime';
+export declare const createFederatedCssLinks: (assets: string[] | undefined, options: {
+    template: string;
+    attributes?: Readonly<Record<string, unknown>>;
+    existingAssets?: Iterable<string>;
+}, { attributesToString, hasStylesheetLink }: SSRHtmlFormatting) => string;

package/dist/types/node.d.ts

@@ -0,0 +1,3 @@
+export { createRendererHeadPlugin, type RendererHeadPluginOptions, } from './runtimePlugin.js';
+export declare const rendererHeadPlugin: () => import("@modern-js/plugin/runtime").RuntimePlugin<{}>;
+export default rendererHeadPlugin;

package/dist/types/runtimePlugin.d.ts

@@ -0,0 +1,13 @@
+import type { RuntimePlugin } from '@modern-js/plugin/runtime';
+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/dist/types/templatePolicy.d.ts

@@ -0,0 +1,2 @@
+import type { SSRRenderInfo, SSRRenderLifecycle } from '@modern-js/plugin/runtime';
+export declare function createTemplatePolicy(render: SSRRenderInfo): Pick<SSRRenderLifecycle, 'transformTemplateChunk' | 'getRouterData'>;

package/package.json

@@ -1,16 +1,69 @@
 {
   "name": "@bleedingdev/modern-js-runtime-renderer-extensions",
-  "version": "0.0.0",
-  "description": "Package-name registration for the forthcoming UltraModern.js release. This setup version contains no runtime implementation.",
-  "license": "MIT",
+  "description": "UltraModern.js head rendering plugin registered through native runtime hooks.",
+  "homepage": "https://github.com/BleedingDev/ultramodern.js#readme",
+  "bugs": {
+    "url": "https://github.com/BleedingDev/ultramodern.js/issues"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/BleedingDev/ultramodern.js.git"
+    "url": "git+https://github.com/BleedingDev/ultramodern.js.git",
+    "directory": "packages/runtime/renderer-extensions"
+  },
+  "license": "MIT",
+  "version": "3.9.0-ultramodern.10",
+  "engines": {
+    "node": ">=26.7.0"
+  },
+  "types": "./dist/types/runtimePlugin.d.ts",
+  "main": "./dist/cjs/node.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/runtimePlugin.d.ts",
+      "node": {
+        "import": "./dist/esm-node/node.mjs",
+        "require": "./dist/cjs/node.js"
+      },
+      "default": "./dist/esm/runtimePlugin.mjs"
+    }
   },
-  "files": [
-    "README.md"
-  ],
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/runtimePlugin.d.ts",
+        "./src/runtimePlugin.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.9.0-ultramodern.10",
+    "@modern-js/runtime-extensions": "npm:@bleedingdev/modern-js-runtime-extensions@3.9.0-ultramodern.10"
+  },
+  "devDependencies": {
+    "@modern-js/render": "npm:@bleedingdev/modern-js-render@3.9.0-ultramodern.10",
+    "@modern-js/tsconfig": "npm:@bleedingdev/modern-js-tsconfig@3.9.0-ultramodern.10",
+    "@rslib/core": "1.0.0",
+    "@scripts/rstest-config": "2.66.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^26.4.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@typescript/native-preview": "7.0.0-dev.20260707.2",
+    "esbuild": "^0.28.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^7.0.2"
+  },
+  "peerDependencies": {
+    "react": "^19.2.8"
+  },
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "test": "rstest"
   }
 }

package/rslib.config.mts

@@ -0,0 +1,19 @@
+import { RSLIB_CODE_ENTRY_GLOB, rslibConfig } from '@modern-js/rslib';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  ...rslibConfig,
+  lib: rslibConfig.lib.map(lib =>
+    lib.id === 'esm-web'
+      ? {
+          ...lib,
+          source: {
+            ...lib.source,
+            entry: {
+              index: [RSLIB_CODE_ENTRY_GLOB, '!./src/node.ts'],
+            },
+          },
+        }
+      : lib,
+  ),
+});

package/rstest.config.mts

@@ -0,0 +1,29 @@
+import type { ProjectConfig } from '@rstest/core';
+import { withTestPreset } from '@scripts/rstest-config';
+
+const commonConfig: ProjectConfig = {
+  root: __dirname,
+  globals: true,
+  setupFiles: ['@scripts/rstest-config/setup.ts'],
+  tools: {
+    swc: {
+      jsc: {
+        transform: {
+          react: {
+            runtime: 'automatic',
+          },
+        },
+      },
+    },
+  },
+};
+
+export default {
+  projects: [
+    withTestPreset({
+      name: 'renderer-extensions-node',
+      testEnvironment: 'node',
+      extends: commonConfig,
+    }),
+  ],
+};

package/src/assetPolicy.ts

@@ -0,0 +1,86 @@
+import type {
+  SSRRenderInfo,
+  SSRRenderLifecycle,
+} from '@modern-js/plugin/runtime';
+import {
+  getMatchedRouteChunks,
+  orderHydrationScriptChunks,
+} from '@modern-js/runtime-extensions';
+import { getRouterMatchedRouteIds } from '@modern-js/runtime-extensions/router-state';
+
+export type RendererRouteManifest = {
+  routeAssets?: Record<
+    string,
+    | {
+        assets?: string[];
+        referenceCssAssets?: string[];
+      }
+    | undefined
+  >;
+};
+
+export type RendererResource = {
+  entryName?: string;
+  htmlTemplate?: string;
+  routeManifest?: RendererRouteManifest;
+  moduleFederationCssAssets?: string[];
+};
+
+export function getRendererResources(render: SSRRenderInfo) {
+  const resource = render.resource as RendererResource | undefined;
+  const context = render.runtimeContext as {
+    routeManifest?: RendererRouteManifest;
+  };
+  return {
+    resource,
+    entryName: resource?.entryName ?? 'index',
+    // String mode deliberately honors an explicitly omitted resource manifest.
+    routeManifest:
+      render.mode === 'string'
+        ? resource?.routeManifest
+        : context.routeManifest,
+  };
+}
+
+export function createAssetPolicy(
+  render: SSRRenderInfo,
+): Pick<SSRRenderLifecycle, 'transformAssets'> {
+  const { routeManifest, entryName } = getRendererResources(render);
+  return {
+    transformAssets(assets, info) {
+      const matchedRouteIds =
+        getRouterMatchedRouteIds(render.runtimeContext) ?? [];
+      if (info.source === 'loadable') {
+        const matched = getMatchedRouteChunks(
+          routeManifest,
+          matchedRouteIds,
+          info.createAsset,
+        );
+        if (info.kind === 'style') return [...assets, ...matched];
+        const asyncEntryChunks = [
+          ...(info.groups.find(group => group.name === 'async-entry')?.assets ??
+            []),
+        ];
+        const collectedChunks = [
+          ...(info.groups.find(group => group.name === 'loadable')?.assets ??
+            []),
+        ];
+        return orderHydrationScriptChunks({
+          asyncEntryChunks,
+          collectedChunks,
+          matchedRouteChunks: matched,
+          entryName,
+        });
+      }
+      if (info.kind !== 'style' || matchedRouteIds.length === 0) return assets;
+      const routeAssets = routeManifest?.routeAssets;
+      if (routeAssets === undefined) return assets;
+      const matched = matchedRouteIds
+        .flatMap(routeId => routeAssets[routeId]?.referenceCssAssets ?? [])
+        .map(info.createAsset);
+      const entry =
+        info.groups.find(group => group.name === 'async-entry')?.assets ?? [];
+      return [...matched, ...entry];
+    },
+  };
+}

package/src/federatedCss.ts

@@ -0,0 +1,43 @@
+import type { SSRHtmlFormatting } from '@modern-js/plugin/runtime';
+import { escapeHtmlAttribute } from '@modern-js/runtime-extensions';
+
+export const createFederatedCssLinks = (
+  assets: string[] | undefined,
+  options: {
+    template: string;
+    attributes?: Readonly<Record<string, unknown>>;
+    existingAssets?: Iterable<string>;
+  },
+  { attributesToString, hasStylesheetLink }: SSRHtmlFormatting,
+) => {
+  if (assets === undefined || assets.length === 0) {
+    return '';
+  }
+
+  const seen = new Set(options.existingAssets || []);
+  const attributes = attributesToString(
+    Object.fromEntries(
+      Object.entries(options.attributes || {}).filter(
+        ([name]) => !['href', 'rel'].includes(name.toLowerCase()),
+      ),
+    ),
+  );
+  const links: string[] = [];
+
+  for (const asset of assets) {
+    const href = escapeHtmlAttribute(asset);
+    if (
+      asset === '' ||
+      seen.has(asset) ||
+      hasStylesheetLink(options.template, asset) ||
+      hasStylesheetLink(options.template, href)
+    ) {
+      continue;
+    }
+
+    seen.add(asset);
+    links.push(`<link${attributes} href="${href}" rel="stylesheet" />`);
+  }
+
+  return links.join('');
+};

package/src/node.ts

@@ -0,0 +1,16 @@
+import { createNodeHeadMarkerStripper } from '@modern-js/runtime-extensions/node';
+import { createRendererHeadPlugin } from './runtimePlugin';
+
+export {
+  createRendererHeadPlugin,
+  type RendererHeadPluginOptions,
+} from './runtimePlugin';
+
+export const rendererHeadPlugin = () =>
+  createRendererHeadPlugin({
+    processNodeStream(source, context, terminalMarker) {
+      return source.pipe(createNodeHeadMarkerStripper(context, terminalMarker));
+    },
+  });
+
+export default rendererHeadPlugin;