@bleedingdev/modern-js-create 3.5.0-ultramodern.9 → 3.5.0-ultramodern.90

package/dist/esm-node/ultramodern-workspace/demo-components.js

@@ -1,217 +1,198 @@
 import "node:module";
-import { appHasApi, remoteDependencyAlias, resolveApiStem, shellApp } from "./descriptors.js";
+import { appHasApi, appI18nNamespace, distributedSsrExposes, remoteDependencyAlias, resolveApiProtocol, resolveApiStem, resolveRemoteRefs } from "./descriptors.js";
+import { renderFileTemplate } from "./fs-io.js";
 import { createTw, packageName, tailwindPrefixForApp, toPascalCase } from "./naming.js";
-function createShellPage(remotes = []) {
-    const tw = createTw(tailwindPrefixForApp(shellApp));
-    const remoteCount = String(remotes.length);
-    return `import { Link, useModernI18n } from '@modern-js/plugin-i18n/runtime';
-import ShellFrame from '../shell-frame';
-import { UltramodernRouteHead } from '../ultramodern-route-head';
-import { VerticalShowcase } from '../vertical-components';
-import { ultramodernUiMarker } from '../../ultramodern-build';
-
-export default function ShellHome() {
-  const { t } = useModernI18n();
+function createFederatedI18nSetup(app, localeRoot) {
+    const namespace = appI18nNamespace(app);
+    return `import { FederatedI18nBoundary, useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import csResource from '${localeRoot}/cs/${namespace}.json';
+import enResource from '${localeRoot}/en/${namespace}.json';
 
-  return (
-    <ShellFrame>
-      <UltramodernRouteHead />
-      <section className="${tw('mx-auto grid max-w-7xl items-center gap-8 py-8 md:grid-cols-[0.9fr_1.1fr] lg:gap-14')}">
-        <div className="${tw('min-w-0')}">
-          <p className="${tw('text-xs font-black uppercase tracking-[0.18em] text-emerald-800')}">{t('shell.hero.eyebrow')}</p>
-          <h1 className="${tw('mt-3 max-w-3xl text-5xl font-black leading-none tracking-normal text-stone-950 md:text-7xl')}">{t('shell.title')}</h1>
-          <p className="${tw('mt-5 max-w-2xl text-lg leading-8 text-stone-600')}">{t('shell.hero.lede')}</p>
-          <div className="${tw('mt-7 flex flex-wrap gap-3')}">
-            <Link className="${tw('inline-flex min-h-11 items-center justify-center rounded-full bg-emerald-800 px-5 font-bold text-white shadow-lg shadow-stone-900/10')}" to="/">
-              {t('shell.hero.primary')}
-            </Link>
-            <span className="${tw('inline-flex min-h-11 items-center justify-center rounded-full border border-stone-900/15 bg-white/90 px-5 font-bold text-stone-950 shadow-lg shadow-stone-900/10')}">
-              {t('shell.hero.secondary')}
-            </span>
-          </div>
-        </div>
-        <div className="${tw('rounded-3xl bg-white/90 p-6 shadow-2xl shadow-stone-900/15')}">
-          <div className="${tw('grid gap-4 sm:grid-cols-2')}">
-            <article className="${tw('rounded-2xl bg-emerald-50 p-5')}">
-              <span className="${tw('text-sm font-black uppercase tracking-[0.16em] text-emerald-800')}">{t('shell.hero.cardOneKicker')}</span>
-              <strong className="${tw('mt-3 block text-3xl font-black text-stone-950')}">${remoteCount}</strong>
-              <p className="${tw('mt-2 text-sm font-semibold text-stone-600')}">{t('shell.hero.cardOne')}</p>
-            </article>
-            <article className="${tw('rounded-2xl bg-amber-50 p-5')}">
-              <span className="${tw('text-sm font-black uppercase tracking-[0.16em] text-amber-800')}">{t('shell.hero.cardTwoKicker')}</span>
-              <strong className="${tw('mt-3 block text-3xl font-black text-stone-950')}">SSR</strong>
-              <p className="${tw('mt-2 text-sm font-semibold text-stone-600')}">{t('shell.hero.cardTwo')}</p>
-            </article>
-          </div>
-        </div>
-      </section>
-      <VerticalShowcase />
-      <p className="${tw('sr-only')}" data-testid="ultramodern-preset">presetUltramodern workspace</p>
-      <p className="${tw('sr-only')}" data-build-marker={ultramodernUiMarker.build} data-testid="ultramodern-ui-marker">
-        {ultramodernUiMarker.appId}:{ultramodernUiMarker.version}
-      </p>
-    </ShellFrame>
-  );
+const federatedI18nLanguages = ['en', 'cs'];
+const federatedI18nResources = {
+  cs: { ${JSON.stringify(namespace)}: csResource },
+  en: { ${JSON.stringify(namespace)}: enResource },
+};`;
 }
-`;
+function createFederatedI18nBoundary(namespace, content) {
+    return `<FederatedI18nBoundary
+      defaultNamespace="${namespace}"
+      fallbackLanguage="en"
+      resources={federatedI18nResources}
+      supportedLanguages={federatedI18nLanguages}
+    >
+      ${content}
+    </FederatedI18nBoundary>`;
 }
-function createShellRemoteComponents(scope, remotes = []) {
-    const tw = createTw(tailwindPrefixForApp(shellApp));
+function createShellPage(shell, remotes = []) {
+    const tw = createTw(tailwindPrefixForApp(shell));
+    const remoteCount = String(remotes.length);
+    return renderFileTemplate('workspace/apps/shell-super-app/src/routes/[lang]/page.tsx', {
+        value0: tw('mx-auto grid max-w-7xl items-center gap-8 py-8 md:grid-cols-[0.9fr_1.1fr] lg:gap-14'),
+        value1: tw('min-w-0'),
+        value2: tw('text-xs font-black uppercase tracking-[0.18em] text-emerald-800'),
+        value3: tw('mt-3 max-w-3xl text-5xl font-black leading-none tracking-normal text-stone-950 md:text-7xl'),
+        value4: tw('mt-5 max-w-2xl text-lg leading-8 text-stone-600'),
+        value5: tw('mt-7 flex flex-wrap gap-3'),
+        value6: tw('inline-flex min-h-11 items-center justify-center rounded-full bg-emerald-800 px-5 font-bold text-white shadow-lg shadow-stone-900/10'),
+        value7: tw('inline-flex min-h-11 items-center justify-center rounded-full border border-stone-900/15 bg-white/90 px-5 font-bold text-stone-950 shadow-lg shadow-stone-900/10'),
+        value8: tw('rounded-3xl bg-white/90 p-6 shadow-2xl shadow-stone-900/15'),
+        value9: tw('grid gap-4 sm:grid-cols-2'),
+        value10: tw('rounded-2xl bg-emerald-50 p-5'),
+        value11: tw('text-sm font-black uppercase tracking-[0.16em] text-emerald-800'),
+        value12: tw('mt-3 block text-3xl font-black text-stone-950'),
+        value13: remoteCount,
+        value14: tw('mt-2 text-sm font-semibold text-stone-600'),
+        value15: tw('rounded-2xl bg-amber-50 p-5'),
+        value16: tw('text-sm font-black uppercase tracking-[0.16em] text-amber-800'),
+        value17: tw('mt-3 block text-3xl font-black text-stone-950'),
+        value18: tw('mt-2 text-sm font-semibold text-stone-600'),
+        value19: tw('sr-only'),
+        value20: tw('sr-only')
+    });
+}
+function createShellRemoteComponentsSource(shell, remotes = [], worker = false) {
+    const tw = createTw(tailwindPrefixForApp(shell));
     const widgetRemotes = remotes.filter((remote)=>Object.hasOwn(remote.exposes ?? {}, './Widget'));
-    const serverImports = widgetRemotes.map((remote)=>`import ${toPascalCase(remote.id)}WidgetServer from '${packageName(scope, remote.packageSuffix)}/Widget';`).join('\n');
-    const hydratedExports = widgetRemotes.map((remote)=>{
+    const remoteComponentExports = widgetRemotes.map((remote)=>{
         const componentName = `${toPascalCase(remote.id)}Widget`;
-        return `const ${componentName} = createHydratedRemote(${componentName}Server, '${remoteDependencyAlias(remote)}/Widget');`;
+        return worker ? `const ${componentName} = createRemoteComponent(
+  '${remote.id}',
+  './Widget',
+);` : `const ${componentName} = createRemoteComponent(
+  '${remote.id}',
+  './Widget',
+  () => import('${remoteDependencyAlias(remote)}/Widget'),
+);`;
     }).join('\n');
-    const federationImports = widgetRemotes.length > 0 ? `import {
-  classifyModuleFederationFallback,
-  createModuleFederationFallbackTelemetry,
-  emitModuleFederationFallbackTelemetry,
-  toModuleFederationFallbackAttributes,
-} from '@modern-js/runtime/module-federation';
-import { createLazyComponent } from '@module-federation/bridge-react';
-import { getInstance, loadRemote } from '@module-federation/modern-js-v3/runtime';
-import { Suspense, useEffect, useMemo, useState } from 'react';
-import type { ComponentType } from 'react';
-${serverImports}
-` : '';
-    const federationHelpers = widgetRemotes.length > 0 ? `interface RemoteComponentModule {
-  default: ComponentType;
-}
-
-const loadRemoteComponent = (specifier: string) =>
-  loadRemote<RemoteComponentModule>(specifier) as Promise<RemoteComponentModule>;
-
-const createRemoteFallback = (specifier: string) =>
-  ({ error }: { error: Error }) => {
-    const { t } = useModernI18n();
-    const classification = classifyModuleFederationFallback(error);
-    const telemetryEntry =
-      typeof window === 'undefined' ? undefined : window.location.href;
-    const telemetry = createModuleFederationFallbackTelemetry({
-      appName: '${shellApp.id}',
-      classification,
-      ...(telemetryEntry === undefined ? {} : { entry: telemetryEntry }),
-      error,
-      eventName: 'mf.client.remote.fallback',
-      exportName: 'default',
-      phase: 'load',
-      remote: specifier,
-      status: 'degraded',
-    });
-
-    useEffect(() => {
-      void emitModuleFederationFallbackTelemetry({
-        appName: telemetry.appName,
-        classification,
-        ...(telemetry.entry === undefined ? {} : { entry: telemetry.entry }),
-        error,
-        eventName: telemetry.eventName,
-        exportName: 'default',
-        metadata: telemetry.metadata,
-        phase: telemetry.phase,
-        remote: specifier,
-        status: 'degraded',
-      });
-    }, [classification, error, telemetry]);
-
-    return <div className="${tw('rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900')}" data-remote-error={error.name} {...toModuleFederationFallbackAttributes(telemetry)}>{t('shell.remoteUnavailable')}</div>;
-  };
-
-const createHydratedRemote =
-  (ServerComponent: ComponentType, specifier: string) =>
-  function HydratedRemote() {
-    const [hydrated, setHydrated] = useState(false);
-
-    useEffect(() => {
-      setHydrated(true);
-    }, []);
-
-    const FederatedComponent = useMemo(() => {
-      if (!hydrated) {
-        return null;
-      }
-      const instance = getInstance();
-      if (instance === null || instance === undefined) {
-        return null;
-      }
-      return createLazyComponent({
-        export: 'default',
-        fallback: createRemoteFallback(specifier),
-        instance,
-        loader: () => loadRemoteComponent(specifier),
-        loading: <ServerComponent />,
-      });
-    }, [hydrated]);
-
-    if (FederatedComponent === null) {
-      return <ServerComponent />;
-    }
-
-    return (
-      <Suspense fallback={<ServerComponent />}>
-        <FederatedComponent />
-      </Suspense>
-    );
-  };
-` : '';
+    const federationImports = widgetRemotes.length > 0 ? renderFileTemplate(worker ? 'workspace/apps/shell-super-app/src/routes/vertical-components.worker.imports.tsx' : 'workspace/apps/shell-super-app/src/routes/vertical-components.imports.tsx', {}) : '';
+    const federationHelpers = widgetRemotes.length > 0 ? renderFileTemplate(worker ? 'workspace/apps/shell-super-app/src/routes/vertical-components.worker.helpers.tsx' : 'workspace/apps/shell-super-app/src/routes/vertical-components.helpers.tsx', {
+        value0: shell.id,
+        value1: tw('rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900')
+    }) : '';
     const showcaseItems = widgetRemotes.map((remote)=>{
         const componentName = `${toPascalCase(remote.id)}Widget`;
         return `          <${componentName} key="${remote.id}" />`;
     }).join('\n');
+    const showcaseGridClassName = tw('grid gap-4 md:grid-cols-2');
+    const showcaseGrid = 0 === widgetRemotes.length ? `<div className="${showcaseGridClassName}" />` : `<div className="${showcaseGridClassName}">
+${showcaseItems}
+      </div>`;
     const remoteCount = String(widgetRemotes.length);
-    return `${federationImports}import { Link, useModernI18n } from '@modern-js/plugin-i18n/runtime';
-
-	const widgetCount = Number('${remoteCount}');
-
-	${federationHelpers}
-	${hydratedExports}
-
-	export const Header = () => {
-  const { t } = useModernI18n();
-
-  return (
-    <header className="${tw('flex min-w-0 flex-wrap items-center gap-x-8 gap-y-2 md:flex-1')}" data-modern-boundary-id="${shellApp.mfName}" data-modern-mf-expose="shell/Header">
-      <Link className="${tw('whitespace-nowrap text-xl font-black tracking-normal text-stone-950 no-underline')}" to="/">{t('shell.title')}</Link>
-    </header>
-  );
-};
-
-export const StatusBadge = () => {
-  const { t } = useModernI18n();
-
-  return (
-    <span className="${tw('inline-flex h-10 shrink-0 items-center justify-center rounded-full border border-stone-900/15 bg-white px-4 text-sm font-extrabold text-stone-950 shadow-lg shadow-stone-900/5')}">
-      {widgetCount} {t('shell.hero.cardOneKicker')}
-    </span>
-  );
-};
-
-export const VerticalShowcase = () => {
-  const { t } = useModernI18n();
-
-  if (widgetCount === 0) {
-    return (
-      <section className="${tw('mx-auto mt-12 max-w-7xl rounded-2xl bg-white/90 p-6 shadow-xl shadow-stone-900/10')}">
-        <p className="${tw('text-lg font-bold text-stone-700')}">{t('shell.hero.empty')}</p>
-      </section>
-    );
-  }
+    return renderFileTemplate('workspace/apps/shell-super-app/src/routes/vertical-components.tsx', {
+        value0: federationImports,
+        value1: remoteCount,
+        value2: federationHelpers,
+        value3: remoteComponentExports,
+        value4: tw('flex min-w-0 flex-wrap items-center gap-x-8 gap-y-2 md:flex-1'),
+        value5: shell.mfName,
+        value6: tw('whitespace-nowrap text-xl font-black tracking-normal text-stone-950 no-underline'),
+        value7: tw('inline-flex h-10 shrink-0 items-center justify-center rounded-full border border-stone-900/15 bg-white px-4 text-sm font-extrabold text-stone-950 shadow-lg shadow-stone-900/5'),
+        value8: tw('mx-auto mt-12 max-w-7xl rounded-2xl bg-white/90 p-6 shadow-xl shadow-stone-900/10'),
+        value9: tw('text-lg font-bold text-stone-700'),
+        value10: tw('mx-auto mt-12 max-w-7xl'),
+        value11: shell.mfName,
+        value12: showcaseGrid
+    });
+}
+function createShellRemoteComponents(shell, remotes = []) {
+    return createShellRemoteComponentsSource(shell, remotes);
+}
+function createShellWorkerRemoteComponents(shell, remotes = []) {
+    return createShellRemoteComponentsSource(shell, remotes, true);
+}
+function federatedRegistryEntries(scope, host, remotes) {
+    const referencedRemotes = resolveRemoteRefs(host, remotes);
+    const entries = referencedRemotes.flatMap((remote)=>distributedSsrExposes(remote).map((expose)=>({
+                remote,
+                expose
+            })));
+    const exposeNameCounts = new Map();
+    for (const { expose } of entries){
+        const exposeName = toPascalCase(expose.replace(/^\.\//u, ''));
+        exposeNameCounts.set(exposeName, (exposeNameCounts.get(exposeName) ?? 0) + 1);
+    }
+    return entries.map(({ remote, expose })=>{
+        const exposeName = toPascalCase(expose.replace(/^\.\//u, ''));
+        const exportName = 1 === exposeNameCounts.get(exposeName) ? exposeName : `${toPascalCase(remote.id)}${exposeName}`;
+        const exposeSubpath = expose.replace(/^\.\//u, '');
+        return {
+            expose,
+            exportName,
+            packageSpecifier: `${packageName(scope, remote.packageSuffix)}/${exposeSubpath}`,
+            remoteAlias: `${remoteDependencyAlias(remote)}/${exposeSubpath}`,
+            remoteId: remote.id
+        };
+    }).toSorted((left, right)=>left.exportName.localeCompare(right.exportName));
+}
+function createFederatedComponentsRegistry(scope, host, remotes, worker = false) {
+    const entries = federatedRegistryEntries(scope, host, remotes);
+    const typeImports = entries.map((entry)=>`import type ${entry.exportName}Component from '${entry.packageSpecifier}';`).join('\n');
+    const propTypes = entries.map((entry)=>`type ${entry.exportName}Props = RemoteComponentProps<typeof ${entry.exportName}Component>;`).join('\n');
+    const componentEntries = entries.map((entry)=>worker ? `  ${entry.exportName}: (props: ${entry.exportName}Props) => (
+    <DistributedSsrBoundary
+      expose="${entry.expose}"
+      fallback={fallback}
+      fragmentProps={props}
+      remote="${entry.remoteId}"
+    >
+      {null}
+    </DistributedSsrBoundary>
+  ),` : `  ${entry.exportName}: createDistributedSsrComponent<${entry.exportName}Props>({
+    createComponent: () =>
+      createLazyComponent<
+        RemoteComponentModule<${entry.exportName}Props>,
+        'default'
+      >({
+        export: 'default',
+        fallback,
+        instance: getInstance(),
+        loader: () =>
+          import('${entry.remoteAlias}') as Promise<
+            RemoteComponentModule<${entry.exportName}Props>
+          >,
+        loading: null,
+      }),
+    expose: '${entry.expose}',
+    fallback,
+    remote: '${entry.remoteId}',
+  }),`).join('\n');
+    const runtimeImports = worker ? "import { DistributedSsrBoundary } from '@modern-js/runtime/module-federation';\nimport type { ComponentType, ReactNode } from 'react';" : "import { createLazyComponent } from '@module-federation/modern-js-v3/react';\nimport { getInstance } from '@module-federation/modern-js-v3/runtime';\nimport { createDistributedSsrComponent } from '@modern-js/runtime/module-federation';\nimport type { ComponentType, FunctionComponent, ReactNode } from 'react';";
+    const moduleType = `
+${worker ? '' : `interface RemoteComponentModule<Props extends object> {
+  default: FunctionComponent<Props>;
+}
+`}type RemoteComponentProps<Component> =
+  Component extends ComponentType<infer Props>
+    ? Props extends object
+      ? Props
+      : Record<string, never>
+    : Record<string, never>;
+`;
+    return `${runtimeImports}
+${typeImports}
 
-  return (
-    <section className="${tw('mx-auto mt-12 max-w-7xl')}" data-modern-boundary-id="${shellApp.mfName}">
-      <div className="${tw('grid gap-4 md:grid-cols-2')}">
-${showcaseItems}
-      </div>
-    </section>
-  );
-};
+${propTypes}
+${moduleType}
+export const createFederatedComponents = (fallback: ReactNode) => ({
+${componentEntries}
+});
 `;
 }
 function createRemotePage(app) {
     const tw = createTw(tailwindPrefixForApp(app));
     const listApiItems = `list${toPascalCase(resolveApiStem(app))}`;
-    const apiImport = appHasApi(app) ? `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
+    const rpcApi = 'rpc' === resolveApiProtocol(app);
+    const apiImport = appHasApi(app) ? rpcApi ? `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import { Link } from '@modern-js/plugin-tanstack/runtime';
+import { useEffect, useState } from 'react';
+import {
+  Effect,
+  ${listApiItems}Rpc,
+} from '../../api/${resolveApiStem(app)}-rpc-client';
+import { UltramodernRouteHead } from '../ultramodern-route-head';
+import { ultramodernUiMarker } from '../../ultramodern-build';
+` : `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 import { Link } from '@modern-js/plugin-tanstack/runtime';
 import { useEffect, useState } from 'react';
 import {
@@ -226,8 +207,8 @@ import { ultramodernUiMarker } from '../../ultramodern-build';
 
   useEffect(() => {
     let cancelled = false;
-    void runEffectRequest(
-      ${listApiItems}({ limit: 1 }).pipe(
+    void ${rpcApi ? 'Effect.runPromise' : 'runEffectRequest'}(
+      ${rpcApi ? `${listApiItems}Rpc(1)` : `${listApiItems}({ limit: 1 })`}.pipe(
         Effect.match({
           onFailure: () => {
             if (cancelled) {
@@ -298,9 +279,11 @@ export default function Layout() {
 function createRemoteEntry(app) {
     const tw = createTw(tailwindPrefixForApp(app));
     const domain = app.domain ?? app.id;
-    return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
+    const namespace = appI18nNamespace(app);
+    const componentName = `${toPascalCase(domain)}Route`;
+    return `${createFederatedI18nSetup(app, '../locales')}
 
-export default function ${toPascalCase(domain)}Route() {
+const ${componentName}Content = () => {
   const { t } = useModernI18n();
 
   return (
@@ -309,6 +292,12 @@ export default function ${toPascalCase(domain)}Route() {
       <p className="${tw('mt-2 text-stone-600')}">{t('${domain}.routeSurface')}</p>
     </section>
   );
+};
+
+export default function ${componentName}() {
+  return (
+    ${createFederatedI18nBoundary(namespace, `<${componentName}Content />`)}
+  );
 }
 `;
 }
@@ -316,9 +305,10 @@ function createRemoteWidget(app) {
     const tw = createTw(tailwindPrefixForApp(app));
     const domain = app.domain ?? app.id;
     const componentName = `${toPascalCase(domain)}Widget`;
-    return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
+    const namespace = appI18nNamespace(app);
+    return `${createFederatedI18nSetup(app, '../../locales')}
 
-export default function ${componentName}() {
+const ${componentName}Content = () => {
   const { t } = useModernI18n();
 
   return (
@@ -327,6 +317,41 @@ export default function ${componentName}() {
       <p className="${tw('mt-2 text-stone-600')}">{t('${domain}.widgetBody')}</p>
     </section>
   );
+};
+
+export default function ${componentName}() {
+  return (
+    ${createFederatedI18nBoundary(namespace, `<${componentName}Content />`)}
+  );
+}
+`;
+}
+function createRemoteWidgetFragmentPage(app) {
+    return createRemoteExposeFragmentPage(app, './Widget');
+}
+function createRemoteExposeFragmentPage(app, expose) {
+    const componentPath = app.exposes?.[expose];
+    if (!componentPath?.startsWith('./src/')) throw new Error(`Cannot generate an SSR fragment route for ${app.id} ${expose}: invalid expose path`);
+    const importPath = `../../../../../${componentPath.replace(/^\.\/src\//u, '').replace(/\.[cm]?[jt]sx?$/u, '')}`;
+    const componentName = toPascalCase(expose.replace(/^\.\//u, ''));
+    const pageName = `${componentName}FragmentPage`;
+    return `import type { ComponentProps } from 'react';
+import { useDistributedSsrFragmentProps } from '@modern-js/runtime/module-federation/distributed-ssr';
+import ${componentName} from '${importPath}';
+
+export default function ${pageName}() {
+  const props = useDistributedSsrFragmentProps<ComponentProps<typeof ${componentName}>>({
+    boundaryId: '${app.mfName}',
+    expose: '${expose}',
+  });
+
+  return (
+    <>
+      <template data-modern-boundary-id="${app.mfName}" data-modern-distributed-ssr-marker="start" data-modern-mf-expose="${expose}" />
+      <${componentName} {...props} />
+      <template data-modern-boundary-id="${app.mfName}" data-modern-distributed-ssr-marker="end" data-modern-mf-expose="${expose}" />
+    </>
+  );
 }
 `;
 }
@@ -335,9 +360,10 @@ function createRemoteExposeComponent(app, expose) {
     if ('./Widget' === expose) return createRemoteWidget(app);
     const componentName = `${toPascalCase(app.domain ?? app.id)}${toPascalCase(expose.replace(/^\.\//u, ''))}`;
     const domain = app.domain ?? app.id;
-    return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
+    const namespace = appI18nNamespace(app);
+    return `${createFederatedI18nSetup(app, '../../locales')}
 
-export default function ${componentName}() {
+const ${componentName}Content = () => {
   const { t } = useModernI18n();
 
   return (
@@ -346,6 +372,12 @@ export default function ${componentName}() {
       <p className="${tw('mt-2 text-stone-600')}">{t('${domain}.federatedSurface')}</p>
     </section>
   );
+};
+
+export default function ${componentName}() {
+  return (
+    ${createFederatedI18nBoundary(namespace, `<${componentName}Content />`)}
+  );
 }
 `;
 }
@@ -354,4 +386,229 @@ function remoteComponentOutputPath(app, expose) {
     if (!exposePath?.startsWith('./src/components/')) return;
     return `${app.directory}/${exposePath.replace(/^\.\//u, '')}`;
 }
-export { createLayout, createRemoteEntry, createRemoteExposeComponent, createRemotePage, createRemoteWidget, createShellPage, createShellRemoteComponents, remoteComponentOutputPath };
+const tanstackRuntimeModule = '@modern-js/plugin-tanstack/runtime';
+function ensureNamedImport(source, moduleName, names) {
+    const importEndMarker = `from '${moduleName}';`;
+    const importEnd = source.indexOf(importEndMarker);
+    if (importEnd >= 0) {
+        const importStart = source.lastIndexOf('import ', importEnd);
+        const openBrace = source.indexOf('{', importStart);
+        const closeBrace = source.indexOf('}', openBrace);
+        if (openBrace >= 0 && closeBrace >= 0 && closeBrace < importEnd) {
+            const existingNames = source.slice(openBrace + 1, closeBrace).split(',').map((name)=>name.trim()).filter(Boolean);
+            const missingNames = names.filter((name)=>!existingNames.includes(name));
+            if (0 === missingNames.length) return source;
+            const importedNames = [
+                ...existingNames,
+                ...missingNames
+            ].toSorted((left, right)=>left.localeCompare(right));
+            return `${source.slice(0, openBrace + 1)} ${importedNames.join(', ')} ${source.slice(closeBrace)}`;
+        }
+    }
+    const firstImportEnd = source.indexOf('\n');
+    const importLine = `import { ${names.join(', ')} } from '${moduleName}';\n`;
+    return firstImportEnd < 0 ? `${importLine}${source}` : `${source.slice(0, firstImportEnd + 1)}${importLine}${source.slice(firstImportEnd + 1)}`;
+}
+function ensureNavigateHook(source) {
+    if (source.includes('const navigate = useNavigate();')) return source;
+    const functionStart = source.indexOf('export default function ');
+    const parametersEnd = source.indexOf(')', functionStart);
+    const bodyStart = source.indexOf('{', parametersEnd);
+    if (functionStart < 0 || parametersEnd < 0 || bodyStart < 0) return source;
+    return `${source.slice(0, bodyStart + 1)}\n  const navigate = useNavigate();${source.slice(bodyStart + 1)}`;
+}
+function closingParenthesis(source, openingParenthesis) {
+    let depth = 0;
+    let quote = '';
+    let escaped = false;
+    for(let index = openingParenthesis; index < source.length; index += 1){
+        const character = source[index] ?? '';
+        if ('' !== quote) {
+            if (escaped) escaped = false;
+            else if ('\\' === character) escaped = true;
+            else if (character === quote) quote = '';
+            continue;
+        }
+        if ("'" === character || '"' === character || '`' === character) quote = character;
+        else if ('(' === character) depth += 1;
+        else if (')' === character) {
+            depth -= 1;
+            if (0 === depth) return index;
+        }
+    }
+    return -1;
+}
+function removeLegacyLocationSuffixHelper(source) {
+    return source.replace(/(^|\n)const locationSuffix = \(location: \{ hash\?: unknown; search\?: unknown; searchStr\?: unknown \}\) => \{[\s\S]*?\n\};\n/u, '$1').replace('\n  const suffix = locationSuffix(location);', '');
+}
+function rewriteRouterLocationSuffix(source) {
+    let changed = false;
+    const next = source.replace(/^(\s*)to: `\$\{([^`\n]+)\}\$\{suffix\}`,/gmu, (_match, indentation, destination)=>{
+        changed = true;
+        return `${indentation}hash: true,\n${indentation}search: true,\n${indentation}to: ${destination},`;
+    });
+    return {
+        changed,
+        source: changed ? removeLegacyLocationSuffixHelper(next) : next
+    };
+}
+function rewriteWindowLocationAssignments(source) {
+    const callMarker = 'window.location.assign';
+    let next = source;
+    let searchFrom = 0;
+    let changed = false;
+    let preservesCurrentLocationState = false;
+    while(true){
+        const callStart = next.indexOf(callMarker, searchFrom);
+        if (callStart < 0) break;
+        const openingParenthesis = next.indexOf('(', callStart + callMarker.length);
+        if (openingParenthesis < 0) break;
+        const callEnd = closingParenthesis(next, openingParenthesis);
+        if (callEnd < 0) break;
+        let destination = next.slice(openingParenthesis + 1, callEnd).trim();
+        if (destination.endsWith(',')) destination = destination.slice(0, -1).trimEnd();
+        const preservesSuffix = destination.includes("${suffix}") && next.includes('const suffix = locationSuffix(location);');
+        if (preservesSuffix) {
+            destination = destination.replace("${suffix}", '');
+            if (destination.startsWith('`${') && destination.endsWith('}`')) destination = destination.slice(3, -2);
+            preservesCurrentLocationState = true;
+        }
+        const lineStart = next.lastIndexOf('\n', callStart) + 1;
+        const indentation = next.slice(lineStart, callStart);
+        const options = preservesSuffix ? `hash: true,\n${indentation}  search: true,\n${indentation}  to: ${destination},` : `to: ${destination},`;
+        const replacement = `void navigate({\n${indentation}  ${options}\n${indentation}})`;
+        next = `${next.slice(0, callStart)}${replacement}${next.slice(callEnd + 1)}`;
+        searchFrom = callStart + replacement.length;
+        changed = true;
+    }
+    if (preservesCurrentLocationState) next = removeLegacyLocationSuffixHelper(next);
+    return {
+        changed,
+        source: next
+    };
+}
+function closingJsxTag(source, openingTagStart) {
+    let braces = 0;
+    let quote = '';
+    let escaped = false;
+    for(let index = openingTagStart; index < source.length; index += 1){
+        const character = source[index] ?? '';
+        if ('' !== quote) {
+            if (escaped) escaped = false;
+            else if ('\\' === character) escaped = true;
+            else if (character === quote) quote = '';
+            continue;
+        }
+        if ("'" === character || '"' === character || '`' === character) quote = character;
+        else if ('{' === character) braces += 1;
+        else if ('}' === character) braces -= 1;
+        else if ('>' === character && 0 === braces) return index;
+    }
+    return -1;
+}
+function isInternalHref(openingTag) {
+    return openingTag.includes('href="/') || openingTag.includes("href='/") || openingTag.includes('href={`/');
+}
+function removeSyntheticClickHandler(openingTag) {
+    const onClickStart = openingTag.indexOf(' onClick=');
+    if (onClickStart < 0) return openingTag;
+    const valueStart = openingTag.indexOf('{', onClickStart);
+    if (valueStart < 0) return openingTag;
+    let depth = 0;
+    for(let index = valueStart; index < openingTag.length; index += 1){
+        const character = openingTag[index] ?? '';
+        if ('{' === character) depth += 1;
+        else if ('}' === character) {
+            depth -= 1;
+            if (0 === depth) {
+                const handler = openingTag.slice(valueStart, index + 1);
+                return handler.includes('preventDefault') ? `${openingTag.slice(0, onClickStart)}${openingTag.slice(index + 1)}` : openingTag;
+            }
+        }
+    }
+    return openingTag;
+}
+function rewriteInternalAnchors(source) {
+    let next = source;
+    let searchFrom = 0;
+    let changed = false;
+    while(true){
+        const openingTagStart = next.indexOf('<a', searchFrom);
+        if (openingTagStart < 0) break;
+        const boundary = next[openingTagStart + 2];
+        if (' ' !== boundary && '\n' !== boundary && '\t' !== boundary) {
+            searchFrom = openingTagStart + 2;
+            continue;
+        }
+        const openingTagEnd = closingJsxTag(next, openingTagStart);
+        if (openingTagEnd < 0) break;
+        const openingTag = next.slice(openingTagStart, openingTagEnd + 1);
+        if (!isInternalHref(openingTag)) {
+            searchFrom = openingTagEnd + 1;
+            continue;
+        }
+        const closingTagStart = next.indexOf('</a>', openingTagEnd + 1);
+        if (closingTagStart < 0) break;
+        const nativeOpeningTag = removeSyntheticClickHandler(openingTag).replace('<a', '<Link').replace('href=', 'to=');
+        next = `${next.slice(0, openingTagStart)}${nativeOpeningTag}${next.slice(openingTagEnd + 1, closingTagStart)}</Link>${next.slice(closingTagStart + 4)}`;
+        searchFrom = openingTagStart + nativeOpeningTag.length;
+        changed = true;
+    }
+    return {
+        changed,
+        source: next
+    };
+}
+function rewriteJsxElementName(source, elementName, componentName) {
+    const openingMarker = `<${elementName}`;
+    const closingMarker = `</${elementName}>`;
+    let next = source;
+    let searchFrom = 0;
+    let changed = false;
+    while(true){
+        const openingTagStart = next.indexOf(openingMarker, searchFrom);
+        if (openingTagStart < 0) break;
+        const boundary = next[openingTagStart + openingMarker.length];
+        if (' ' !== boundary && '\n' !== boundary && '\t' !== boundary) {
+            searchFrom = openingTagStart + openingMarker.length;
+            continue;
+        }
+        const openingTagEnd = closingJsxTag(next, openingTagStart);
+        const closingTagStart = next.indexOf(closingMarker, openingTagEnd + 1);
+        if (openingTagEnd < 0 || closingTagStart < 0) break;
+        next = `${next.slice(0, openingTagStart)}<${componentName}${next.slice(openingTagStart + openingMarker.length, closingTagStart)}</${componentName}>${next.slice(closingTagStart + closingMarker.length)}`;
+        searchFrom = openingTagStart + componentName.length + 1;
+        changed = true;
+    }
+    return {
+        changed,
+        source: next
+    };
+}
+function regenerateGeneratedNavigationSurface(source, kind) {
+    const routerLocationSuffix = rewriteRouterLocationSuffix(source);
+    const anchors = rewriteInternalAnchors(routerLocationSuffix.source);
+    const locationAssignments = rewriteWindowLocationAssignments(anchors.source);
+    const forms = 'demo-component' === kind ? rewriteJsxElementName(locationAssignments.source, 'form', 'Form') : {
+        changed: false,
+        source: locationAssignments.source
+    };
+    let next = forms.source;
+    if (anchors.changed || locationAssignments.changed || forms.changed) {
+        const imports = [
+            ...forms.changed ? [
+                'Form'
+            ] : [],
+            ...anchors.changed ? [
+                'Link'
+            ] : [],
+            ...locationAssignments.changed ? [
+                'useNavigate'
+            ] : []
+        ];
+        next = ensureNamedImport(next, tanstackRuntimeModule, imports);
+    }
+    if (locationAssignments.changed) next = ensureNavigateHook(next);
+    return next;
+}
+export { createFederatedComponentsRegistry, createLayout, createRemoteEntry, createRemoteExposeComponent, createRemoteExposeFragmentPage, createRemotePage, createRemoteWidgetFragmentPage, createShellPage, createShellRemoteComponents, createShellWorkerRemoteComponents, regenerateGeneratedNavigationSurface, remoteComponentOutputPath };