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

package/tests/nativeAssetPolicy.test.tsx

@@ -0,0 +1,515 @@
+import { getGlobalInternalRuntimeContext } from '../../plugin-runtime/src/core/context';
+import { registerPlugin } from '../../plugin-runtime/src/core/plugin';
+import {
+  createSSRRenderLifecycle,
+  replaceSSRTemplateChunk,
+} from '../../plugin-runtime/src/core/server/shared';
+import { rendererHeadPlugin } from '../src/node';
+
+const lifecycleFor = (options: any, mode: 'string' | 'stream' = 'stream') => {
+  registerPlugin([rendererHeadPlugin()]);
+  const hooks = getGlobalInternalRuntimeContext().hooks;
+  const render = {
+    runtimeContext: options.runtimeContext,
+    request: options.request ?? new Request('http://localhost/'),
+    resource: options.resource ?? {
+      entryName: options.entryName,
+      routeManifest: options.routeManifest,
+      moduleFederationCssAssets: options.moduleFederationCssAssets,
+    },
+    config: options.config ?? {},
+    platform: 'node' as const,
+    mode,
+    isRsc: false,
+  };
+  return createSSRRenderLifecycle(
+    mode === 'string'
+      ? (hooks.extendStringSSRCollectors
+          .call({ chunkSet: options.chunkSet, render })
+          .filter(Boolean) as any)
+      : (hooks.extendStreamSSR
+          .call({ ...render, terminalMarker: '<!--end-->' })
+          .filter(Boolean) as any),
+  );
+};
+
+const buildShellBeforeTemplate = (template: string, options: any) =>
+  nativeBuildShellBeforeTemplate(template, {
+    ...options,
+    lifecycle: lifecycleFor(options),
+  });
+const buildWorkerShellBeforeTemplate = (template: string, options: any) =>
+  nativeBuildWorkerShellBeforeTemplate(template, {
+    ...options,
+    lifecycle: lifecycleFor(options),
+  });
+
+import { applyRouterRuntimeState } from '@modern-js/runtime-extensions/router-state';
+import { CHUNK_CSS_PLACEHOLDER } from '../../plugin-runtime/src/core/server/constants';
+import { buildShellBeforeTemplate as nativeBuildShellBeforeTemplate } from '../../plugin-runtime/src/core/server/stream/beforeTemplate';
+import { buildShellBeforeTemplate as nativeBuildWorkerShellBeforeTemplate } from '../../plugin-runtime/src/core/server/stream/beforeTemplate.worker';
+
+const withRouterSnapshot = (
+  runtimeContext: Record<string, unknown>,
+  serverSnapshot: Record<string, unknown>,
+) => {
+  applyRouterRuntimeState(runtimeContext as any, {
+    framework: 'react-router',
+    serverSnapshot,
+  });
+  return runtimeContext;
+};
+
+describe('buildShellBeforeTemplate', () => {
+  it.each([
+    ['node', buildShellBeforeTemplate],
+    ['worker', buildWorkerShellBeforeTemplate],
+  ])('preserves the complete %s CSS priority order without duplicate assets', async (_runtime, buildTemplate) => {
+    const runtimeContext = withRouterSnapshot(
+      {
+        routeManifest: {
+          routeAssets: {
+            'route-a': {
+              referenceCssAssets: ['/assets/route-a.css', '/assets/shared.css'],
+            },
+            'route-b': {
+              referenceCssAssets: ['/assets/route-b.css'],
+            },
+            'async-main': {
+              referenceCssAssets: ['/assets/async-main.css'],
+            },
+          },
+        },
+      },
+      {
+        matchedRouteIds: ['route-a', 'route-b'],
+      },
+    );
+    const helmetStylesheet =
+      '<link href="/assets/helmet.css" rel="stylesheet" data-rh="true">';
+    const helmetData = {
+      bodyAttributes: '',
+      htmlAttributes: '',
+      base: '',
+      priority: '',
+      link: helmetStylesheet,
+      meta: '',
+      noscript: '',
+      script: '',
+      style: '',
+      title: '',
+    } as any;
+
+    const styledComponentsStyleTags =
+      '<style data-styled="true">.styled{color:red}</style>';
+    const orderedFragments = [
+      '<link href="/assets/route-a.css" rel="stylesheet" />',
+      '<link href="/assets/shared.css" rel="stylesheet" />',
+      '<link href="/assets/route-b.css" rel="stylesheet" />',
+      '<link href="/assets/async-main.css" rel="stylesheet" />',
+      styledComponentsStyleTags,
+      '<link href="/assets/federated.css" rel="stylesheet" />',
+      helmetStylesheet,
+    ];
+    const expectedHtml = `<html><head>${orderedFragments
+      .slice(0, -1)
+      .join('')}  ${helmetStylesheet}\n</head><body></body></html>`;
+    const html = await buildTemplate(
+      `<html><head>${CHUNK_CSS_PLACEHOLDER}</head><body></body></html>`,
+      {
+        entryName: 'main',
+        runtimeContext: runtimeContext as any,
+        config: {} as any,
+        styledComponentsStyleTags,
+        helmetData,
+        moduleFederationCssAssets: [
+          '/assets/shared.css',
+          '/assets/federated.css',
+        ],
+      },
+    );
+
+    expect(html).toBe(expectedHtml);
+    expect(orderedFragments.map(fragment => html.indexOf(fragment))).toEqual(
+      orderedFragments.map(fragment => expectedHtml.indexOf(fragment)),
+    );
+    expect(html.split(orderedFragments[1])).toHaveLength(2);
+  });
+
+  it('should use shared matched route ids from the router snapshot for css injection', async () => {
+    for (const buildTemplate of [
+      buildShellBeforeTemplate,
+      buildWorkerShellBeforeTemplate,
+    ]) {
+      const html = await buildTemplate(
+        `<html><head>${CHUNK_CSS_PLACEHOLDER}</head><body></body></html>`,
+        {
+          entryName: 'main',
+          runtimeContext: withRouterSnapshot(
+            {
+              routeManifest: {
+                routeAssets: {
+                  'route-a': {
+                    referenceCssAssets: ['/assets/route-a.css'],
+                  },
+                },
+              },
+            },
+            {
+              matchedRouteIds: ['route-a'],
+            },
+          ) as any,
+          config: {} as any,
+        },
+      );
+
+      expect(html).toContain('/assets/route-a.css');
+    }
+  });
+
+  it('should derive css route ids from generic match snapshots', async () => {
+    const html = await buildShellBeforeTemplate(
+      `<html><head>${CHUNK_CSS_PLACEHOLDER}</head><body></body></html>`,
+      {
+        entryName: 'main',
+        runtimeContext: withRouterSnapshot(
+          {
+            routeManifest: {
+              routeAssets: {
+                'asset-route': {
+                  referenceCssAssets: ['/assets/asset-route.css'],
+                },
+                legacy: {
+                  referenceCssAssets: ['/assets/legacy.css'],
+                },
+              },
+            },
+          },
+          {
+            matches: [{ routeId: 'router-route', assetRouteId: 'asset-route' }],
+          },
+        ) as any,
+        config: {} as any,
+      },
+    );
+
+    expect(html).toContain('/assets/asset-route.css');
+    expect(html).not.toContain('/assets/legacy.css');
+  });
+});
+
+const createRouteHydrationScriptTags = (
+  runtimeContext: any,
+  entryName: string,
+  options: any = {},
+) => {
+  const lifecycle = lifecycleFor({
+    runtimeContext,
+    entryName,
+    config: options,
+  });
+  return replaceSSRTemplateChunk(
+    {
+      name: 'scripts',
+      template: `${options.template ?? ''}<!--assets-->`,
+      placeholder: '<!--assets-->',
+      content: '',
+    },
+    lifecycle,
+  ).replace(options.template ?? '', '');
+};
+const createLoadableCollector = (options: any) => {
+  const lifecycle = lifecycleFor(options, 'string');
+  const collector = new NativeLoadableCollector({ ...options, lifecycle });
+  const effect = collector.effect.bind(collector);
+  collector.effect = async () => {
+    await effect();
+    options.chunkSet.cssChunk = replaceSSRTemplateChunk(
+      {
+        name: 'styles',
+        template: `${options.template}<!--assets-->`,
+        placeholder: '<!--assets-->',
+        content: options.chunkSet.cssChunk,
+        ...collector.stylesheetInfo,
+      },
+      lifecycle,
+    ).slice(options.template.length);
+  };
+  return collector;
+};
+
+import { orderHydrationScriptChunks } from '@modern-js/runtime-extensions';
+import React from 'react';
+import { RenderLevel } from '../../plugin-runtime/src/core/constants';
+import { LoadableCollector as NativeLoadableCollector } from '../../plugin-runtime/src/core/server/string/loadable';
+
+const createRuntimeContextWithMatchedRoutes = (matchedRouteIds: string[]) => {
+  const runtimeContext = {} as any;
+  applyRouterRuntimeState(runtimeContext, {
+    framework: 'react-router',
+    serverSnapshot: { matchedRouteIds },
+  });
+  return runtimeContext;
+};
+
+const chunk = (url: string, filename = url) => ({
+  url,
+  filename,
+  path: url,
+});
+
+const scriptUrls = (chunks: Array<{ url?: string }>) =>
+  chunks.map(item => item.url).filter(Boolean);
+
+describe('createRouteHydrationScriptTags', () => {
+  it('does not treat substring matches in the template as existing scripts', () => {
+    const runtimeContext = createRuntimeContextWithMatchedRoutes(['route-a']);
+    runtimeContext.routeManifest = {
+      routeAssets: {
+        'route-a': {
+          assets: ['/static/js/route-a.js'],
+        },
+      },
+    };
+
+    const scripts = createRouteHydrationScriptTags(runtimeContext, 'index', {
+      template:
+        '<html><head><link href="/static/js/route-a.js.map" rel="prefetch" /></head></html>',
+    });
+
+    expect(scripts).toBe('<script src="/static/js/route-a.js"></script>');
+  });
+});
+
+describe('LoadableCollector federated css', () => {
+  it('appends deduped module federation css after local route css', async () => {
+    const chunkSet = {
+      renderLevel: RenderLevel.CLIENT_RENDER,
+      ssrScripts: '',
+      jsChunk: '',
+      cssChunk: '',
+    };
+
+    const collector = createLoadableCollector({
+      runtimeContext: createRuntimeContextWithMatchedRoutes(['route-a']),
+      template:
+        '<html><head><link href="https://remote.example.com/already.css" rel="stylesheet" /></head></html>',
+      entryName: 'main',
+      chunkSet,
+      config: {},
+      routeManifest: {
+        routeAssets: {
+          'route-a': {
+            assets: ['/static/css/route-a.css', '/static/css/shared.css'],
+          },
+        },
+      },
+      moduleFederationCssAssets: [
+        '/static/css/shared.css',
+        'https://remote.example.com/expose.css',
+        'https://remote.example.com/expose.css',
+        'https://remote.example.com/already.css',
+      ],
+    });
+
+    (collector as any).extractor = {
+      chunks: ['local'],
+      getChunkAssets: () => [
+        chunk('/static/css/local.css'),
+        chunk('/static/css/shared.css'),
+      ],
+      getScriptTags: () => '',
+    };
+    await collector.effect();
+
+    expect(chunkSet.cssChunk).toBe(
+      '<link href="/static/css/local.css" rel="stylesheet" /><link href="/static/css/shared.css" rel="stylesheet" /><link href="/static/css/route-a.css" rel="stylesheet" /><link href="https://remote.example.com/expose.css" rel="stylesheet" />',
+    );
+  });
+
+  it('orders matched route scripts before the async entry script', () => {
+    const ordered = orderHydrationScriptChunks({
+      entryName: 'index',
+      asyncEntryChunks: [
+        chunk('/static/js/async/vendor.js'),
+        chunk('/static/js/async/async-index-123.js'),
+      ],
+      collectedChunks: [chunk('/static/js/async/loadable-child.js')],
+      matchedRouteChunks: [
+        chunk('/static/js/async/(lang)/page.js'),
+        chunk('/static/js/async/(lang)/checkout/page.js'),
+        chunk('/static/js/async/(lang)/page.js'),
+      ],
+    });
+
+    expect(scriptUrls(ordered)).toEqual([
+      '/static/js/async/vendor.js',
+      '/static/js/async/loadable-child.js',
+      '/static/js/async/(lang)/page.js',
+      '/static/js/async/(lang)/checkout/page.js',
+      '/static/js/async/async-index-123.js',
+    ]);
+  });
+
+  it('does not fall back to runtime route manifest when options omit routeManifest', async () => {
+    const chunkSet = {
+      renderLevel: RenderLevel.CLIENT_RENDER,
+      ssrScripts: '',
+      jsChunk: '',
+      cssChunk: '',
+    };
+    const runtimeContext = createRuntimeContextWithMatchedRoutes(['route-a']);
+    runtimeContext.routeManifest = {
+      routeAssets: {
+        'route-a': {
+          assets: ['/static/css/route-a.css'],
+        },
+      },
+    };
+
+    const collector = createLoadableCollector({
+      runtimeContext,
+      template: '<html><head></head></html>',
+      entryName: 'main',
+      chunkSet,
+      config: {},
+    });
+
+    collector.collect(React.createElement('div'));
+    await collector.effect();
+
+    expect(chunkSet.cssChunk).toBe('');
+  });
+});
+
+test('registered asset policy orders native loadable output before the async entry', async () => {
+  const chunkSet = {
+    renderLevel: RenderLevel.CLIENT_RENDER,
+    ssrScripts: '',
+    jsChunk: '',
+    cssChunk: '',
+  };
+  const collector = createLoadableCollector({
+    runtimeContext: createRuntimeContextWithMatchedRoutes(['route-a']),
+    template: '',
+    entryName: 'index',
+    chunkSet,
+    config: { enableAsyncEntry: true },
+    routeManifest: { routeAssets: { 'route-a': { assets: ['/route-a.js'] } } },
+  });
+  (collector as any).extractor = {
+    chunks: ['child'],
+    getScriptTags: () => '',
+    getChunkAssets: (ids: string[]) =>
+      ids.includes('async-index')
+        ? [chunk('/vendor.js'), chunk('/async-index.js')]
+        : [chunk('/child.js')],
+  };
+  await collector.effect();
+  expect(
+    Array.from(chunkSet.jsChunk.matchAll(/src="([^"]+)"/g), match => match[1]),
+  ).toEqual(['/vendor.js', '/child.js', '/route-a.js', '/async-index.js']);
+});
+
+describe('SSR hydration helper matrix', () => {
+  const createRuntimeContext = (
+    matchedRouteIds: string[],
+    routeAssets: Record<string, { assets?: string[] }>,
+  ) => {
+    const runtimeContext = {
+      routeManifest: {
+        routeAssets,
+      },
+    } as any;
+
+    applyRouterRuntimeState(runtimeContext, {
+      framework: 'custom-router',
+      matchedRouteIds,
+    } as any);
+
+    return runtimeContext;
+  };
+
+  it('dedupes hydration script chunks and generated tags by the exact script src', () => {
+    expect(
+      orderHydrationScriptChunks({
+        entryName: 'main',
+        asyncEntryChunks: [
+          {
+            filename: 'async-main.123.js',
+            url: '/assets/async-main.123.js',
+          },
+          {
+            filename: 'vendor.js',
+            url: '/assets/vendor.js',
+          },
+          {
+            filename: 'vendor-copy.js',
+            url: '/assets/vendor.js',
+          },
+        ],
+        collectedChunks: [
+          {
+            filename: 'route.js',
+            url: '/assets/route.js',
+          },
+        ],
+        matchedRouteChunks: [
+          {
+            filename: 'route-copy.js',
+            url: '/assets/route.js',
+          },
+          {
+            filename: 'vendor-query.js',
+            url: '/assets/vendor.js?cache=1',
+          },
+        ],
+      }),
+    ).toEqual([
+      {
+        filename: 'vendor.js',
+        url: '/assets/vendor.js',
+      },
+      {
+        filename: 'route.js',
+        url: '/assets/route.js',
+      },
+      {
+        filename: 'vendor-query.js',
+        url: '/assets/vendor.js?cache=1',
+      },
+      {
+        filename: 'async-main.123.js',
+        url: '/assets/async-main.123.js',
+      },
+    ]);
+
+    const runtimeContext = createRuntimeContext(['routes/dashboard'], {
+      'routes/dashboard': {
+        assets: [
+          '/assets/dashboard.js',
+          '/assets/shared.js',
+          '/assets/dashboard.css',
+          '/assets/dashboard.js',
+        ],
+      },
+      'async-main': {
+        assets: [
+          '/assets/async-main.js',
+          '/assets/shared.js',
+          '/assets/async-main.css',
+        ],
+      },
+    });
+
+    expect(
+      createRouteHydrationScriptTags(runtimeContext, 'main', {
+        nonce: 'nonce-1',
+        template:
+          '<script defer src="/assets/dashboard.js"></script><script src="/assets/shared.js?cache=1"></script>',
+      }),
+    ).toBe(
+      '<script src="/assets/shared.js" nonce="nonce-1"></script> <script src="/assets/async-main.js" nonce="nonce-1"></script>',
+    );
+  });
+});

package/tests/nativeStreamHead.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+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';
+import { rendererHeadPlugin } from '../src/node';
+
+const createRuntimeContext = () => ({
+  isBrowser: false,
+  requestContext: {},
+  context: {},
+  initialData: {},
+  __i18nData__: {},
+  routeManifest: {},
+  ssrContext: {
+    request: {
+      params: {},
+      query: {},
+      pathname: '/',
+      host: 'localhost',
+      url: 'http://localhost/',
+      headers: {},
+    },
+    reporter: { sessionId: 'session-1' },
+  },
+});
+
+describe('streaming Helmet collection', () => {
+  it('publishes only Helmet markers present in the completed shell', async () => {
+    registerPlugin([rendererHeadPlugin()]);
+
+    const AbandonPrimary = (): null => {
+      throw new Error('abandon primary');
+    };
+    const runtimeContext = createRuntimeContext();
+    const stream = await renderStreaming(
+      new Request('http://localhost/'),
+      <>
+        <Helmet>
+          <meta name="outside" content="committed" />
+        </Helmet>
+        <React.Suspense
+          fallback={
+            <>
+              <Helmet>
+                <meta name="fallback" content="committed" />
+              </Helmet>
+              fallback rendered
+            </>
+          }
+        >
+          <Helmet>
+            <meta name="abandoned-unique" content="ghost" />
+          </Helmet>
+          <AbandonPrimary />
+        </React.Suspense>
+      </>,
+      {
+        resource: {
+          entryName: 'index',
+          htmlTemplate:
+            '<html><head></head><body><!--<?- html ?>--></body></html>',
+          routeManifest: {},
+        },
+        runtimeContext,
+        config: {},
+        onError: () => {},
+        onTiming: () => {},
+      } as any,
+    );
+
+    const html = await new Response(stream).text();
+    expect(html).toContain('name="outside" content="committed"');
+    expect(html).toContain('name="fallback" content="committed"');
+    expect(html).not.toContain('abandoned-unique');
+    expect(html).not.toContain('data-modern-helmet');
+  });
+});