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

package/src/runtimePlugin.ts

@@ -0,0 +1,141 @@
+import type {
+  Collector,
+  RuntimePlugin,
+  SSRRenderLifecycle,
+  StreamSSRExtender,
+} from '@modern-js/plugin/runtime';
+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';
+import { createTemplatePolicy } from './templatePolicy';
+
+export type RendererHeadPluginOptions = {
+  processNodeStream?: (
+    source: NodeJS.ReadWriteStream,
+    context: object,
+    terminalMarker: string,
+  ) => NodeJS.ReadWriteStream;
+};
+
+export function createRendererHeadPlugin(
+  options: RendererHeadPluginOptions = {},
+): RuntimePlugin<{}> {
+  return {
+    name: '@modern-js/runtime-renderer-extensions',
+    setup(api) {
+      const head = createHeadRuntime();
+      api.resolveComponent((component, { name }) =>
+        name === 'head.Helmet' ? head.Head : component,
+      );
+      api.transformRuntimeContext(projectRuntimeContext);
+      api.wrapRoot(Root => {
+        const HeadRoot = (props: React.ComponentProps<typeof Root>) =>
+          // 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;
+      });
+
+      const createState = (runtimeContext: object) => {
+        const helmetContext = ensureHelmetContext(runtimeContext);
+        const lifecycle: SSRRenderLifecycle = {
+          beforeReact() {
+            beginHeadRender(runtimeContext);
+          },
+          completedBody(html, { phase }) {
+            if (phase === 'complete') {
+              return completeHeadRender(runtimeContext, html);
+            }
+            publishHeadRender(runtimeContext);
+            return html;
+          },
+          getHeadData() {
+            return helmetContext.helmet ?? undefined;
+          },
+          onTerminal(terminal) {
+            if (terminal.status !== 'complete') abortHeadRender(runtimeContext);
+          },
+        };
+        return {
+          lifecycle,
+          wrap(root: React.ReactNode) {
+            return head.wrapServerRoot(root, { runtimeContext, helmetContext });
+          },
+        };
+      };
+
+      api.extendStringSSRCollectors(({ render }): Collector => {
+        const state = createState(render.runtimeContext);
+        return {
+          ...state.lifecycle,
+          ...createAssetPolicy(render),
+          ...createTemplatePolicy(render),
+          collect: state.wrap,
+          effect() {},
+        };
+      });
+      api.extendStreamSSR((info): StreamSSRExtender => {
+        const { runtimeContext, terminalMarker } = info;
+        const processNodeStream = options.processNodeStream;
+        if (info.platform === 'node' && processNodeStream === undefined) {
+          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:
+            processNodeStream === undefined
+              ? undefined
+              : source =>
+                  processNodeStream(source, runtimeContext, terminalMarker),
+          processReadableStream: source =>
+            createConservingWebShellStream(
+              source,
+              runtimeContext,
+              terminalMarker,
+            ),
+        };
+      });
+    },
+  };
+}
+
+/**
+ * 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/src/templatePolicy.ts

@@ -0,0 +1,69 @@
+import type {
+  SSRRenderInfo,
+  SSRRenderLifecycle,
+} from '@modern-js/plugin/runtime';
+import {
+  createRouteHydrationScriptTags,
+  replaceChunkJsPlaceholder,
+} from '@modern-js/runtime-extensions';
+import {
+  getRouterHydrationScripts,
+  getRouterMatchedRouteIds,
+  getRouterServerSnapshot,
+} from '@modern-js/runtime-extensions/router-state';
+import { getRendererResources } from './assetPolicy';
+import { createFederatedCssLinks } from './federatedCss';
+
+export function createTemplatePolicy(
+  render: SSRRenderInfo,
+): Pick<SSRRenderLifecycle, 'transformTemplateChunk' | 'getRouterData'> {
+  const { resource, routeManifest, entryName } = getRendererResources(render);
+  const config = render.config as { nonce?: string } | undefined;
+  return {
+    getRouterData() {
+      return (
+        getRouterServerSnapshot(render.runtimeContext)?.routerData || undefined
+      );
+    },
+    transformTemplateChunk(chunk, formatting) {
+      if (chunk.name === 'styles') {
+        return {
+          ...chunk,
+          content:
+            chunk.content +
+            createFederatedCssLinks(
+              resource?.moduleFederationCssAssets,
+              {
+                template: chunk.template,
+                attributes: chunk.attributes,
+                existingAssets: chunk.emittedAssets,
+              },
+              formatting,
+            ),
+        };
+      }
+      let content = chunk.content;
+      if (chunk.name === 'scripts' && render.mode === 'stream') {
+        content = createRouteHydrationScriptTags(
+          routeManifest,
+          getRouterMatchedRouteIds(render.runtimeContext) ?? [],
+          entryName,
+          { nonce: config?.nonce, template: chunk.template },
+        );
+      } else if (chunk.name === 'data') {
+        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,
+        ),
+      };
+    },
+  };
+}

package/tests/federatedCss.test.ts

@@ -0,0 +1,49 @@
+import {
+  attributesToString,
+  hasStylesheetLink,
+} from '../../plugin-runtime/src/core/server/utils';
+import { createFederatedCssLinks as createLinks } from '../src/federatedCss';
+
+const createFederatedCssLinks = (
+  assets: Parameters<typeof createLinks>[0],
+  options: Parameters<typeof createLinks>[1],
+) => createLinks(assets, options, { attributesToString, hasStylesheetLink });
+
+describe('createFederatedCssLinks', () => {
+  it('does not dedupe a stylesheet against a longer href substring', () => {
+    const html = createFederatedCssLinks(['/remote/theme.css'], {
+      template: '<link href="/remote/theme.css?v=next" rel="stylesheet" />',
+    });
+
+    expect(html).toBe('<link href="/remote/theme.css" rel="stylesheet" />');
+  });
+
+  it('escapes federated css asset urls before interpolating href attributes', () => {
+    const html = createFederatedCssLinks(
+      ['/remote/theme" onload="alert(1)&x=<tag>.css'],
+      {
+        template: '',
+      },
+    );
+
+    expect(html).toBe(
+      '<link href="/remote/theme&quot; onload=&quot;alert(1)&amp;x=&lt;tag&gt;.css" rel="stylesheet" />',
+    );
+    expect(html).not.toContain('onload="alert(1)');
+  });
+
+  it('escapes extra attributes and prevents duplicate renderer-owned attributes', () => {
+    const html = createFederatedCssLinks(['/remote/theme.css'], {
+      template: '',
+      attributes: {
+        nonce: 'nonce"&<value>',
+        href: 'https://attacker.example/override.css',
+        rel: 'preload',
+      },
+    });
+
+    expect(html).toBe(
+      '<link nonce="nonce&quot;&amp;&lt;value&gt;" href="/remote/theme.css" rel="stylesheet" />',
+    );
+  });
+});

package/tests/headRuntime.test.tsx

@@ -0,0 +1,163 @@
+import { getHelmetContext } from '@modern-js/runtime-extensions/helmet-context';
+import React, { useContext } from 'react';
+import { renderToReadableStream, renderToString } from 'react-dom/server';
+import {
+  getGlobalEnableRsc,
+  getGlobalInternalRuntimeContext,
+  getInitialContext,
+  InternalRuntimeContext,
+  setGlobalContext,
+  setGlobalInternalRuntimeContext,
+} from '../../plugin-runtime/src/core/context';
+import { registerPlugin } from '../../plugin-runtime/src/core/plugin';
+import {
+  wrapRuntimeContextProvider as nativeWrapRuntimeContextProvider,
+  wrapRuntimeComponentResolver,
+} from '../../plugin-runtime/src/core/react/wrapper';
+import { Helmet } from '../../plugin-runtime/src/exports/head';
+import rendererHeadPlugin from '../src/runtimePlugin';
+
+const previousRuntime = getGlobalInternalRuntimeContext();
+const previousRsc = getGlobalEnableRsc();
+beforeEach(() => {
+  setGlobalContext({ enableRsc: false });
+  registerPlugin([rendererHeadPlugin()]);
+});
+afterEach(() => {
+  setGlobalInternalRuntimeContext(previousRuntime);
+  setGlobalContext({ enableRsc: previousRsc });
+});
+
+// Exercise the unchanged native provider/head entry points through registered
+// collector providers. Transaction/lifecycle rendering is covered separately.
+function wrapRuntimeContextProvider(
+  app: React.ReactElement,
+  context: ReturnType<typeof getInitialContext>,
+) {
+  const hooks = getGlobalInternalRuntimeContext().hooks;
+  const App = hooks.wrapRoot.call(() => app);
+  let root = nativeWrapRuntimeContextProvider(<App />, context);
+  if (getGlobalEnableRsc() && !context.isBrowser) {
+    root = wrapRuntimeComponentResolver(root);
+  }
+  const collectors = hooks.extendStringSSRCollectors.call({
+    chunkSet: { renderLevel: 0, ssrScripts: '', jsChunk: '', cssChunk: '' },
+    render: {
+      runtimeContext: context,
+      request: new Request('https://example.test/tractors'),
+      platform: 'node',
+      mode: 'string',
+      isRsc: getGlobalEnableRsc() === true,
+    },
+  });
+  for (const collector of collectors) root = collector.collect?.(root) ?? root;
+  return root;
+}
+
+describe('registered native runtime/head compatibility', () => {
+  it('keeps overlapping requests on their original head contexts after projection', async () => {
+    const projectedContexts: object[] = [];
+    getGlobalInternalRuntimeContext().pluginAPI?.transformRuntimeContext(
+      (projection: any) => {
+        const internalContext = { ...projection.internalContext };
+        delete internalContext[
+          Symbol.for('@modern-js/runtime:context-extensions')
+        ];
+        projectedContexts.push(internalContext);
+        return { ...projection, internalContext };
+      },
+    );
+    const SuspendedHead = ({
+      ready,
+      title,
+    }: {
+      ready: Promise<void>;
+      title: string;
+    }) => {
+      React.use(ready);
+      return (
+        <Helmet>
+          <title>{title}</title>
+        </Helmet>
+      );
+    };
+    const requests = ['first request', 'second request'].map(title => {
+      let release = () => {};
+      const ready = new Promise<void>(resolve => {
+        release = resolve;
+      });
+      const context = getInitialContext(false);
+      return { title, ready, release, context };
+    });
+    const streams = await Promise.all(
+      requests.map(({ title, ready, context }) =>
+        renderToReadableStream(
+          wrapRuntimeContextProvider(
+            <React.Suspense fallback="pending">
+              <SuspendedHead ready={ready} title={title} />
+            </React.Suspense>,
+            context,
+          ),
+        ),
+      ),
+    );
+    requests[1].release();
+    requests[0].release();
+    await Promise.all(
+      streams.map(async stream => {
+        await stream.allReady;
+        return new Response(stream).text();
+      }),
+    );
+
+    for (const { context, title } of requests) {
+      expect(getHelmetContext(context)?.helmet?.title.toString()).toBe(
+        `<title data-rh="true">${title}</title>`,
+      );
+    }
+    expect(projectedContexts).toHaveLength(2);
+    for (const context of projectedContexts) {
+      expect(getHelmetContext(context)).toBeUndefined();
+    }
+  });
+
+  it('keeps response functions outside the RSC internal context', () => {
+    let internalValue: ReturnType<typeof getInitialContext> | undefined;
+
+    const Probe = () => {
+      internalValue = useContext(InternalRuntimeContext);
+      return null;
+    };
+
+    const response = {
+      setHeader: rstest.fn(),
+      status: rstest.fn(),
+      locals: { tenant: 'tractor-store' },
+    };
+    const context = getInitialContext(false);
+    context.ssrContext = {
+      request: {
+        params: { category: 'compact' },
+        pathname: '/tractors',
+        query: { sort: 'price' },
+        headers: { accept: 'text/html' },
+        host: 'example.test',
+        url: 'https://example.test/tractors?sort=price',
+      },
+      response,
+    };
+
+    setGlobalContext({ enableRsc: true });
+    try {
+      renderToString(wrapRuntimeContextProvider(<Probe />, context));
+    } finally {
+      setGlobalContext({ enableRsc: false });
+    }
+
+    expect(
+      Object.values(internalValue?.requestContext.response ?? {}).some(
+        value => typeof value === 'function',
+      ),
+    ).toBe(false);
+  });
+});