@bleedingdev/modern-js-create 3.5.0-ultramodern.3 → 3.5.0-ultramodern.31

package/template-workspace/patches/effect-schema-error-type-id.patch

@@ -0,0 +1,18 @@
+diff --git a/dist/internal/schema/schema.d.ts b/dist/internal/schema/schema.d.ts
+index 7fbeec1a56a85ab1569f8b80e319fb4638a91615..21d38f72238f748d989d3080f77d0edfc63c0e16 100644
+--- a/dist/internal/schema/schema.d.ts
++++ b/dist/internal/schema/schema.d.ts
+@@ -3,0 +4 @@
++export declare const SchemaErrorTypeId: "~effect/Schema/SchemaError";
+diff --git a/dist/unstable/http/internal/preResponseHandler.d.ts b/dist/unstable/http/internal/preResponseHandler.d.ts
+index 81e81e744fa55db2647a8483991db403d451e7dd..040d6c97b85d0c01d4a477013010b9f54d462de8 100644
+--- a/dist/unstable/http/internal/preResponseHandler.d.ts
++++ b/dist/unstable/http/internal/preResponseHandler.d.ts
+@@ -1 +1,6 @@
+-export {};
++import type * as Effect from "../../../Effect.ts";
++import type { HttpServerError } from "../HttpServerError.ts";
++import type { HttpServerRequest } from "../HttpServerRequest.ts";
++import type { HttpServerResponse } from "../HttpServerResponse.ts";
++export declare const requestPreResponseHandlers: WeakMap<object, (request: HttpServerRequest, response: HttpServerResponse) => Effect.Effect<HttpServerResponse, HttpServerError>>;
++export declare const appendPreResponseHandlerUnsafe: (request: HttpServerRequest, handler: (request: HttpServerRequest, response: HttpServerResponse) => Effect.Effect<HttpServerResponse, HttpServerError>) => void;

package/template-workspace/pnpm-workspace.yaml.handlebars

@@ -8,6 +8,8 @@ minimumReleaseAgeStrict: true
 minimumReleaseAgeIgnoreMissingTime: false
 minimumReleaseAgeExclude:
   - '@bleedingdev/modern-js-*'
+  - 'effect@{{effectVersion}}'
+  - '@effect/opentelemetry@{{effectVersion}}'
   - '@tanstack/react-router'
   - '@tanstack/router-core'
   - 'typescript'
@@ -25,6 +27,7 @@ minimumReleaseAgeExclude:
 trustPolicy: no-downgrade
 trustPolicyIgnoreAfter: 1440
 trustPolicyExclude:
+  - 'effect@{{effectVersion}}'
   - '@effect/opentelemetry@{{effectVersion}}'
 blockExoticSubdeps: true
 engineStrict: true
@@ -45,11 +48,13 @@ peerDependencyRules:
 overrides:
   '@tanstack/react-router': {{tanstackRouterVersion}}
   '@tanstack/router-core': {{tanstackRouterCoreVersion}}
+  '@effect/opentelemetry': {{effectVersion}}
   '@effect/vitest': {{effectVitestVersion}}
   effect: {{effectVersion}}
   node-fetch: '{{nodeFetchVersion}}'
 
 allowBuilds:
+  '@parcel/watcher': true
   '@swc/core': true
   core-js: true
   esbuild: true
@@ -59,4 +64,7 @@ allowBuilds:
   workerd: true
 
 patchedDependencies:
+  '@module-federation/modern-js-v3@{{moduleFederationVersion}}': patches/@module-federation__modern-js-v3@{{moduleFederationVersion}}.patch
+  '@module-federation/bridge-react@{{moduleFederationVersion}}': patches/@module-federation__bridge-react@{{moduleFederationVersion}}.patch
   '@tanstack/router-core@{{tanstackRouterCoreVersion}}': patches/@tanstack__router-core@{{tanstackRouterCoreVersion}}.patch
+  'effect@{{effectVersion}}': patches/effect-schema-error-type-id.patch

package/template-workspace/scripts/bootstrap-agent-skills.mjs

@@ -7,8 +7,14 @@ import { fileURLToPath } from 'node:url';
 const root = process.cwd();
 const scriptDir = path.dirname(fileURLToPath(import.meta.url));
 const templateWorkspaceDir = path.resolve(scriptDir, '..');
+// Vendored skills always ship under template-workspace/.codex/skills; the
+// workspace-side lockfile may live under .agents/ (agents-standard layout) or
+// .codex/ (legacy default).
 const vendoredSkillsDir = path.join(templateWorkspaceDir, '.codex/skills');
-const lockPath = path.join(root, '.codex/skills-lock.json');
+const lockRoot = fs.existsSync(path.join(root, '.agents/skills-lock.json'))
+  ? '.agents'
+  : '.codex';
+const lockPath = path.join(root, `${lockRoot}/skills-lock.json`);
 const checkOnly = process.argv.includes('--check');
 const postinstall = process.argv.includes('--postinstall');
 const truthy = value => /^(1|true|yes|on)$/i.test(String(value ?? ''));
@@ -175,12 +181,14 @@ const resolveSkillDir = (sourceRoot, skillName) => {
 };
 
 if (!fs.existsSync(lockPath)) {
-  console.error('Missing .codex/skills-lock.json');
+  console.error(
+    'Missing skills-lock.json: expected .agents/skills-lock.json or .codex/skills-lock.json',
+  );
   process.exit(1);
 }
 
 const lock = readJson(lockPath);
-const installDir = path.join(root, lock.installDir ?? '.codex/skills');
+const installDir = path.join(root, lock.installDir ?? `${lockRoot}/skills`);
 const sources = lock.sources ?? [];
 const vendoredSources = sources.filter(source => source.install === 'vendored');
 const cloneSources = sources.filter(source => source.install === 'clone');

package/templates/workspace/apps/modern.config.shared-module-federation.ts.handlebars

@@ -0,0 +1,37 @@
+  shared: {
+    '@modern-js/plugin-i18n/runtime/no-react-i18next': {
+      requiredVersion: pluginI18nVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@modern-js/plugin-tanstack/runtime': {
+      requiredVersion: pluginTanstackVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@modern-js/runtime': {
+      requiredVersion: runtimeVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@tanstack/react-router': {
+      requiredVersion: dependencies['@tanstack/react-router'],
+      singleton: true,
+      treeShaking: false,
+    },
+    react: {
+      requiredVersion: reactVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    'react-dom': {
+      requiredVersion: reactDomVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    'react-dom/client': {
+      requiredVersion: reactDomVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+  }

package/templates/workspace/apps/modern.config.ts.handlebars

@@ -0,0 +1,252 @@
+// @effect-diagnostics processEnv:off
+import { setTimeout as delay } from 'node:timers/promises';
+import {
+  appTools,
+  defineConfig,
+  presetUltramodern,
+} from '@modern-js/app-tools';
+{{value0}}import { i18nPlugin } from '@modern-js/plugin-i18n';
+import { tanstackRouterPlugin } from '@modern-js/plugin-tanstack';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
+import { withZephyr as withZephyrRspack } from 'zephyr-rspack-plugin';
+import { ultramodernLocalisedUrls } from './src/routes/ultramodern-route-metadata';
+
+type ZephyrRspackConfig = Parameters<ReturnType<typeof withZephyrRspack>>[0];
+
+const zephyrEnabled = process.env['ULTRAMODERN_ZEPHYR'] !== 'false';
+const cloudflareDeployEnabled =
+  process.env['MODERNJS_DEPLOY'] === 'cloudflare';
+
+const parsedZephyrTimeoutMs = Number.parseInt(
+  process.env['ULTRAMODERN_ZEPHYR_TIMEOUT_MS'] ?? '',
+  10,
+);
+const zephyrTimeoutMs =
+  Number.isFinite(parsedZephyrTimeoutMs) && parsedZephyrTimeoutMs > 0
+    ? parsedZephyrTimeoutMs
+    : 45_000;
+
+const zephyrWarn = (error: unknown) => {
+  const message = error instanceof Error ? error.message : String(error);
+  console.warn(
+    `[ultramodern] zephyr-rspack-plugin failed; continuing without Zephyr (set ULTRAMODERN_ZEPHYR=false to disable it): ${message}`,
+  );
+};
+
+const zephyrRspackPlugin = () => ({
+  name: 'ultramodern-zephyr-rspack-plugin',
+  pre: ['@modern-js/plugin-module-federation-config'],
+  setup(api: {
+    modifyRspackConfig: (
+      handler: (
+        config: ZephyrRspackConfig,
+      ) => ZephyrRspackConfig | Promise<ZephyrRspackConfig>,
+    ) => void;
+  }) {
+    if (!zephyrEnabled) {
+      return;
+    }
+    api.modifyRspackConfig(async config => {
+      try {
+        // Zephyr can not only throw/reject but also hang on a stalled network
+        // call, wedging the whole build. Race it against a watchdog so a hang
+        // degrades to an unmodified config instead of blocking indefinitely.
+        const zephyrConfig = (async () => {
+          try {
+            return await withZephyrRspack()(config);
+          } catch (error) {
+            zephyrWarn(error);
+            return config;
+          }
+        })();
+        const watchdog = async () => {
+          await delay(zephyrTimeoutMs, undefined, { ref: false });
+          zephyrWarn(
+            `timed out after ${zephyrTimeoutMs}ms (override with ULTRAMODERN_ZEPHYR_TIMEOUT_MS)`,
+          );
+          return config;
+        };
+        return await Promise.race([zephyrConfig, watchdog()]);
+      } catch (error) {
+        zephyrWarn(error);
+        return config;
+      }
+    });
+  },
+});
+
+const appId = '{{value1}}';
+const cloudflareWorkerName = '{{value2}}';
+const port = Number(process.env['{{value3}}'] ?? {{value4}});
+const envValue = (name: string) => {
+  const value = process.env[name]?.trim();
+  return value !== undefined && value.length > 0 ? value : undefined;
+};
+const configuredSiteUrl = envValue('MODERN_PUBLIC_SITE_URL');
+const configuredCloudflareUrl = envValue('{{value5}}');
+const configuredUltramodernAssetPrefix = envValue('ULTRAMODERN_ASSET_PREFIX');
+const configuredModernAssetPrefix = envValue('MODERN_ASSET_PREFIX');
+const moduleFederationDevServerOrigin =
+  envValue('ULTRAMODERN_MF_DEV_ORIGIN') || 'http://localhost:{{value6}}';
+const cloudflareWorkersDevSubdomain = envValue(
+  'ULTRAMODERN_CLOUDFLARE_WORKERS_DEV_SUBDOMAIN',
+);
+const inferredCloudflareUrl =
+  cloudflareDeployEnabled && cloudflareWorkersDevSubdomain !== undefined
+    ? `https://${cloudflareWorkerName}.${cloudflareWorkersDevSubdomain}.workers.dev`
+    : undefined;
+// Site origin (SEO: canonical/hreflang URLs) prefers the site-wide public URL;
+// the per-app deployment URL only fills in when no site origin is configured.
+const siteUrl =
+  configuredSiteUrl ||
+  configuredCloudflareUrl ||
+  inferredCloudflareUrl ||
+  `http://localhost:${port}`;
+{{value7}}
+// Asset loading is intentionally independent from the canonical site URL.
+// Module Federation remotes must publish an absolute publicPath so browsers
+// load remoteEntry.js and exposed chunks from the remote origin, not the host.
+const assetPrefix =
+  configuredModernAssetPrefix || configuredUltramodernAssetPrefix || defaultAssetPrefix;
+const buildTarget = cloudflareDeployEnabled ? 'cloudflare' : 'web';
+const buildOutputRoot = cloudflareDeployEnabled ? 'dist-cloudflare' : 'dist';
+const buildTempDirectory = `node_modules/.modern-js-${appId}-${buildTarget}`;
+const buildCacheDirectory = `node_modules/.cache/rspack-${appId}-${buildTarget}`;
+
+if (
+  cloudflareDeployEnabled &&
+  process.env['ULTRAMODERN_CLOUDFLARE_REQUIRE_PUBLIC_URLS'] === 'true' &&
+  configuredCloudflareUrl === undefined &&
+  configuredSiteUrl === undefined &&
+  inferredCloudflareUrl === undefined
+) {
+  throw new Error(
+    `Cloudflare deploy for ${appId} needs {{value8}}, MODERN_PUBLIC_SITE_URL, or ULTRAMODERN_CLOUDFLARE_WORKERS_DEV_SUBDOMAIN.`,
+  );
+}
+
+export default defineConfig(
+  presetUltramodern(
+    {
+{{value9}}      ...(cloudflareDeployEnabled
+        ? {
+            deploy: {
+              worker: {
+              compatibilityDate: '{{value10}}',
+              name: cloudflareWorkerName,
+              security: {{value11}},
+{{value12}}              ssr: true,
+            },
+          },
+          }
+        : {}),
+      dev: {
+{{value13}}
+      },
+      html: {
+        outputStructure: 'flat',
+      },
+      output: {
+        assetPrefix,
+        disableTsChecker: false,
+        distPath: {
+          html: './',
+          root: buildOutputRoot,
+        },
+        polyfill: 'off',
+        splitRouteChunks: true,
+        tempDir: buildTempDirectory,
+      },
+      performance: {
+        buildCache: {
+          cacheDigest: [appId, buildTarget],
+          cacheDirectory: buildCacheDirectory,
+        },
+        rsdoctor: {
+          disableClientServer: true,
+          enabled: process.env['ULTRAMODERN_RSDOCTOR'] === 'true',
+        },
+      },
+      plugins: [
+        appTools(),
+        tanstackRouterPlugin(),
+        i18nPlugin({
+          backend: {
+            enabled: true,
+            loadPath: '/locales/{{lng}}/{{ns}}.json',
+          },
+          localeDetection: {
+            fallbackLanguage: 'en',
+            ignoreRedirectRoutes: [
+              '/@mf-types',
+              '/assets',
+              '/bundles',
+              '{{value14}}',
+              '/locales',
+              '/mf-manifest.json',
+              '/mf-stats.json',
+              '/remoteEntry.js',
+              '/robots.txt',
+              '/site.webmanifest',
+              '/sitemap.xml',
+              '/static',
+              '/zephyr-manifest.json',
+            ],
+            languages: ['en', 'cs'],
+            localePathRedirect: true,
+            localisedUrls: ultramodernLocalisedUrls as Record<string, Record<string, string>>,
+          },
+          reactI18next: false,
+        }),
+{{value15}}        moduleFederationPlugin(),
+        zephyrRspackPlugin(),
+      ],
+      server: {
+        port,
+        publicDir: ['./locales', './assets'],
+        ssr: {
+          mode: 'string',
+          moduleFederationAppSSR: true,
+        },
+      },
+      source: {
+        alias: {
+          '@modern-js/plugin-i18n/runtime':
+            '@modern-js/plugin-i18n/runtime/no-react-i18next',
+        },
+        globalVars: {
+          ULTRAMODERN_SITE_URL: siteUrl,
+        },
+        mainEntryName: 'index',
+      },
+      splitChunks: {
+        chunks: 'async',
+      },
+      tools: {
+        autoprefixer: {
+          overrideBrowserslist: ['defaults'],
+        },
+        bundlerChain: chain => {
+          chain.output
+            .uniqueName('{{value16}}')
+            .chunkLoadingGlobal('{{value17}}');
+        },
+        devServer: {
+          headers: {
+            'Access-Control-Allow-Headers':
+              'Accept, Authorization, Content-Type, X-Requested-With',
+            'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+            'Access-Control-Allow-Origin': moduleFederationDevServerOrigin,
+          },
+        },
+      },
+    },
+    {
+      appId,
+      enableBffRequestId: true,
+      enableModuleFederationSSR: true,
+      enableTelemetryExporters: true,
+      telemetryFailLoudStartup: false,
+    },
+  ),
+);

package/templates/workspace/apps/shared/src/routes/ultramodern-jsonld.ts.handlebars

@@ -0,0 +1,119 @@
+export type JsonLdPrimitive = string | number | boolean | null;
+export type JsonLdValue =
+  | JsonLdPrimitive
+  | readonly JsonLdValue[]
+  | { readonly [key: string]: JsonLdValue };
+export type JsonLdObject = Readonly<Record<string, JsonLdValue>>;
+export type RouteJsonLd = JsonLdObject | readonly JsonLdObject[];
+
+const schemaContext = 'https://schema.org' as const;
+
+type SchemaObject<TType extends string> = JsonLdObject & {
+  readonly '@context': typeof schemaContext;
+  readonly '@type': TType;
+};
+
+type ThingReference =
+  | string
+  | {
+      readonly '@id'?: string;
+      readonly '@type'?: string;
+      readonly name?: string;
+      readonly url?: string;
+    };
+
+const withSchemaContext = <TType extends string, TInput extends object>(
+  type: TType,
+  input: TInput,
+): SchemaObject<TType> & TInput => ({
+  '@context': schemaContext,
+  '@type': type,
+  ...input,
+});
+
+export const defineRouteJsonLd = <TJsonLd extends RouteJsonLd>(
+  jsonLd: TJsonLd,
+): TJsonLd => jsonLd;
+
+export interface WebPageJsonLdInput {
+  readonly name: string;
+  readonly url: string;
+  readonly description?: string;
+  readonly inLanguage?: string | readonly string[];
+  readonly isPartOf?: ThingReference;
+}
+
+export const webPageJsonLd = (input: WebPageJsonLdInput) =>
+  withSchemaContext('WebPage', input);
+
+export interface WebApplicationJsonLdInput {
+  readonly name: string;
+  readonly url: string;
+  readonly applicationCategory?: string;
+  readonly browserRequirements?: string;
+  readonly description?: string;
+  readonly operatingSystem?: string;
+}
+
+export const webApplicationJsonLd = (input: WebApplicationJsonLdInput) =>
+  withSchemaContext('WebApplication', input);
+
+export interface SoftwareApplicationJsonLdInput {
+  readonly name: string;
+  readonly url: string;
+  readonly applicationCategory?: string;
+  readonly applicationSubCategory?: string;
+  readonly description?: string;
+  readonly offers?: ThingReference;
+  readonly operatingSystem?: string;
+}
+
+export const softwareApplicationJsonLd = (
+  input: SoftwareApplicationJsonLdInput,
+) => withSchemaContext('SoftwareApplication', input);
+
+export interface OrganizationJsonLdInput {
+  readonly name: string;
+  readonly url?: string;
+  readonly logo?: string;
+  readonly sameAs?: readonly string[];
+}
+
+export const organizationJsonLd = (input: OrganizationJsonLdInput) =>
+  withSchemaContext('Organization', input);
+
+export interface BreadcrumbListItemInput {
+  readonly name: string;
+  readonly item: string;
+}
+
+export const breadcrumbListJsonLd = (
+  items: readonly BreadcrumbListItemInput[],
+) =>
+  withSchemaContext('BreadcrumbList', {
+    itemListElement: items.map((entry, index) => ({
+      '@type': 'ListItem',
+      item: entry.item,
+      name: entry.name,
+      position: index + 1,
+    })),
+  });
+
+export interface FAQPageQuestionInput {
+  readonly name: string;
+  readonly acceptedAnswer: {
+    readonly text: string;
+  };
+}
+
+export const faqPageJsonLd = (questions: readonly FAQPageQuestionInput[]) =>
+  withSchemaContext('FAQPage', {
+    mainEntity: questions.map(question => ({
+      '@type': 'Question',
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: question.acceptedAnswer.text,
+      },
+      name: question.name,
+    })),
+  });

package/templates/workspace/apps/shared/src/routes/ultramodern-route-metadata.ts.handlebars

@@ -0,0 +1,21 @@
+// @generated by @modern-js/create.
+// Author route metadata in colocated src/routes/**/route.meta.ts files.
+// This compatibility manifest is regenerated from route-owned metadata.
+
+export const ultramodernRouteNamespace = '{{value0}}' as const;
+
+export const ultramodernRouteMetadata = {{value1}} as const;
+
+export const ultramodernLocalisedUrls = {{value2}} as const;
+
+export const ultramodernPublicRoutes = {{value3}} as const;
+
+export const ultramodernRouteConfig = {
+  authoring: 'colocated-route-meta',
+  generatedManifest: true,
+  localisedUrls: ultramodernLocalisedUrls,
+  namespace: ultramodernRouteNamespace,
+  publicRoutes: ultramodernPublicRoutes,
+  routes: ultramodernRouteMetadata,
+  source: 'route-owned',
+} as const;

package/templates/workspace/apps/shell-super-app/src/routes/[lang]/page.tsx.handlebars

@@ -0,0 +1,49 @@
+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();
+
+  return (
+    <ShellFrame>
+      <UltramodernRouteHead />
+      <section className="{{value0}}">
+        <div className="{{value1}}">
+          <p className="{{value2}}">{t('shell.hero.eyebrow')}</p>
+          <h1 className="{{value3}}">{t('shell.title')}</h1>
+          <p className="{{value4}}">{t('shell.hero.lede')}</p>
+          <div className="{{value5}}">
+            <Link className="{{value6}}" to="/">
+              {t('shell.hero.primary')}
+            </Link>
+            <span className="{{value7}}">
+              {t('shell.hero.secondary')}
+            </span>
+          </div>
+        </div>
+        <div className="{{value8}}">
+          <div className="{{value9}}">
+            <article className="{{value10}}">
+              <span className="{{value11}}">{t('shell.hero.cardOneKicker')}</span>
+              <strong className="{{value12}}">{{value13}}</strong>
+              <p className="{{value14}}">{t('shell.hero.cardOne')}</p>
+            </article>
+            <article className="{{value15}}">
+              <span className="{{value16}}">{t('shell.hero.cardTwoKicker')}</span>
+              <strong className="{{value17}}">SSR</strong>
+              <p className="{{value18}}">{t('shell.hero.cardTwo')}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+      <VerticalShowcase />
+      <p className="{{value19}}" data-testid="ultramodern-preset">presetUltramodern workspace</p>
+      <p className="{{value20}}" data-build-marker={ultramodernUiMarker.build} data-testid="ultramodern-ui-marker">
+        {ultramodernUiMarker.appId}:{ultramodernUiMarker.version}
+      </p>
+    </ShellFrame>
+  );
+}

package/templates/workspace/apps/shell-super-app/src/routes/vertical-components.helpers.tsx.handlebars

@@ -0,0 +1,79 @@
+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: '{{value0}}',
+      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="{{value1}}" 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>
+    );
+  };

package/templates/workspace/apps/shell-super-app/src/routes/vertical-components.imports.tsx.handlebars

@@ -0,0 +1,11 @@
+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';
+{{value0}}