@bleedingdev/modern-js-ultramodern-create 3.9.0-ultramodern.2 → 3.9.0-ultramodern.21

package/templates/packages/shared-contracts-index.ts

@@ -1,3 +1,7 @@
+import type { UltramodernPerformanceReadinessSignalId } from '@modern-js/runtime-extensions/workspace-events';
+
+export * from '@modern-js/runtime-extensions/workspace-events';
+
 export type UltramodernPublicSitemapChangeFrequency =
   | 'always'
   | 'hourly'
@@ -26,14 +30,6 @@ export interface UltramodernPublicSitemapEntry {
   priority?: number;
 }
 
-export type UltramodernPerformanceReadinessSignalId =
-  | 'bfcache'
-  | 'core-web-vitals-rum'
-  | 'duplicate-prefetch-warmup'
-  | 'cache-policy-sanity'
-  | 'save-data-behavior'
-  | 'cloudflare-ssr-cache-hints';
-
 export interface UltramodernPerformanceReadinessDiagnosticsConfig {
   /**
    * Default-on. Set to false only for an explicit local or CI fast path.
@@ -74,327 +70,3 @@ export const ultramodernWorkspaceContract = {
   preset: 'presetUltramodern',
   topology: 'topology/reference-topology.json',
 } as const;
-
-export type UltramodernWorkspaceLocale = 'en' | 'cs';
-
-export type UltramodernPerformanceReadinessSignalStatus =
-  | 'pass'
-  | 'warn'
-  | 'fail';
-
-export const ultramodernWorkspaceEventNames = {
-  navigate: 'ultramodern:navigate',
-  performanceSignal: 'ultramodern:performance-signal',
-  remoteReady: 'ultramodern:remote-ready',
-  routeSettled: 'ultramodern:route-settled',
-} as const;
-
-export type UltramodernWorkspaceEventName =
-  (typeof ultramodernWorkspaceEventNames)[keyof typeof ultramodernWorkspaceEventNames];
-
-export interface UltramodernNavigatePayload {
-  to: string;
-  replace?: boolean;
-  state?: Record<string, unknown>;
-}
-
-export interface UltramodernRouteSettledPayload {
-  pathname: string;
-  locale?: UltramodernWorkspaceLocale;
-  title?: string;
-}
-
-export interface UltramodernRemoteReadyPayload {
-  appId: string;
-  build?: string;
-  surface?: string;
-  version?: string;
-}
-
-export interface UltramodernPerformanceSignalPayload {
-  signalId: UltramodernPerformanceReadinessSignalId;
-  status: UltramodernPerformanceReadinessSignalStatus;
-  durationMs?: number;
-  detail?: Record<string, unknown>;
-}
-
-export interface UltramodernWorkspaceEventPayloadMap {
-  'ultramodern:navigate': UltramodernNavigatePayload;
-  'ultramodern:performance-signal': UltramodernPerformanceSignalPayload;
-  'ultramodern:remote-ready': UltramodernRemoteReadyPayload;
-  'ultramodern:route-settled': UltramodernRouteSettledPayload;
-}
-
-export class UltramodernWorkspaceEventValidationError {
-  readonly message: string;
-  readonly name = 'UltramodernWorkspaceEventValidationError';
-  readonly eventName: UltramodernWorkspaceEventName;
-  readonly payload: unknown;
-
-  constructor(eventName: UltramodernWorkspaceEventName, payload: unknown) {
-    this.message = `Invalid payload for UltraModern workspace event "${eventName}"`;
-    this.eventName = eventName;
-    this.payload = payload;
-  }
-}
-
-const isRecord = (value: unknown): value is Record<string, unknown> =>
-  typeof value === 'object' && value !== null && !Array.isArray(value);
-
-const isNonEmptyString = (value: unknown): value is string =>
-  typeof value === 'string' && value.trim().length > 0;
-
-const isNonNegativeNumber = (value: unknown): value is number =>
-  typeof value === 'number' && Number.isFinite(value) && value >= 0;
-
-const isUltramodernWorkspaceLocale = (
-  value: unknown,
-): value is UltramodernWorkspaceLocale => value === 'en' || value === 'cs';
-
-const isPerformanceReadinessSignalId = (
-  value: unknown,
-): value is UltramodernPerformanceReadinessSignalId =>
-  value === 'bfcache' ||
-  value === 'core-web-vitals-rum' ||
-  value === 'duplicate-prefetch-warmup' ||
-  value === 'cache-policy-sanity' ||
-  value === 'save-data-behavior' ||
-  value === 'cloudflare-ssr-cache-hints';
-
-const isPerformanceReadinessSignalStatus = (
-  value: unknown,
-): value is UltramodernPerformanceReadinessSignalStatus =>
-  value === 'pass' || value === 'warn' || value === 'fail';
-
-const hasOptionalString = (value: Record<string, unknown>, key: string) =>
-  value[key] === undefined || isNonEmptyString(value[key]);
-
-const hasOptionalBoolean = (value: Record<string, unknown>, key: string) =>
-  value[key] === undefined || typeof value[key] === 'boolean';
-
-const hasOptionalRecord = (value: Record<string, unknown>, key: string) =>
-  value[key] === undefined || isRecord(value[key]);
-
-const hasOptionalNonNegativeNumber = (
-  value: Record<string, unknown>,
-  key: string,
-) => value[key] === undefined || isNonNegativeNumber(value[key]);
-
-const hasOptionalLocale = (value: Record<string, unknown>, key: string) =>
-  value[key] === undefined || isUltramodernWorkspaceLocale(value[key]);
-
-export const isUltramodernNavigatePayload = (
-  payload: unknown,
-): payload is UltramodernNavigatePayload =>
-  isRecord(payload) &&
-  isNonEmptyString(payload['to']) &&
-  hasOptionalBoolean(payload, 'replace') &&
-  hasOptionalRecord(payload, 'state');
-
-export const isUltramodernRouteSettledPayload = (
-  payload: unknown,
-): payload is UltramodernRouteSettledPayload =>
-  isRecord(payload) &&
-  isNonEmptyString(payload['pathname']) &&
-  hasOptionalLocale(payload, 'locale') &&
-  hasOptionalString(payload, 'title');
-
-export const isUltramodernRemoteReadyPayload = (
-  payload: unknown,
-): payload is UltramodernRemoteReadyPayload =>
-  isRecord(payload) &&
-  isNonEmptyString(payload['appId']) &&
-  hasOptionalString(payload, 'build') &&
-  hasOptionalString(payload, 'surface') &&
-  hasOptionalString(payload, 'version');
-
-export const isUltramodernPerformanceSignalPayload = (
-  payload: unknown,
-): payload is UltramodernPerformanceSignalPayload =>
-  isRecord(payload) &&
-  isPerformanceReadinessSignalId(payload['signalId']) &&
-  isPerformanceReadinessSignalStatus(payload['status']) &&
-  hasOptionalNonNegativeNumber(payload, 'durationMs') &&
-  hasOptionalRecord(payload, 'detail');
-
-const ultramodernWorkspaceEventValidators: {
-  [Name in UltramodernWorkspaceEventName]: (
-    payload: unknown,
-  ) => payload is UltramodernWorkspaceEventPayloadMap[Name];
-} = {
-  [ultramodernWorkspaceEventNames.navigate]: isUltramodernNavigatePayload,
-  [ultramodernWorkspaceEventNames.performanceSignal]:
-    isUltramodernPerformanceSignalPayload,
-  [ultramodernWorkspaceEventNames.remoteReady]:
-    isUltramodernRemoteReadyPayload,
-  [ultramodernWorkspaceEventNames.routeSettled]:
-    isUltramodernRouteSettledPayload,
-};
-
-export const isUltramodernWorkspaceEventPayload = <
-  Name extends UltramodernWorkspaceEventName,
->(
-  eventName: Name,
-  payload: unknown,
-): payload is UltramodernWorkspaceEventPayloadMap[Name] =>
-  ultramodernWorkspaceEventValidators[eventName](payload);
-
-export const assertUltramodernWorkspaceEventPayload = <
-  Name extends UltramodernWorkspaceEventName,
->(
-  eventName: Name,
-  payload: unknown,
-): UltramodernWorkspaceEventPayloadMap[Name] => {
-  if (!isUltramodernWorkspaceEventPayload(eventName, payload)) {
-    throw new UltramodernWorkspaceEventValidationError(eventName, payload);
-  }
-
-  return payload;
-};
-
-export const createUltramodernWorkspaceEvent = <
-  Name extends UltramodernWorkspaceEventName,
->(
-  eventName: Name,
-  payload: UltramodernWorkspaceEventPayloadMap[Name],
-): CustomEvent<UltramodernWorkspaceEventPayloadMap[Name]> =>
-  new CustomEvent(eventName, {
-    bubbles: true,
-    composed: true,
-    detail: assertUltramodernWorkspaceEventPayload(eventName, payload),
-  });
-
-export const dispatchUltramodernWorkspaceEvent = <
-  Name extends UltramodernWorkspaceEventName,
->(
-  target: EventTarget,
-  eventName: Name,
-  payload: UltramodernWorkspaceEventPayloadMap[Name],
-) =>
-  target.dispatchEvent(
-    createUltramodernWorkspaceEvent(eventName, payload),
-  );
-
-export const onUltramodernWorkspaceEvent = <
-  Name extends UltramodernWorkspaceEventName,
->(
-  target: EventTarget,
-  eventName: Name,
-  handler: (
-    payload: UltramodernWorkspaceEventPayloadMap[Name],
-    event: CustomEvent<UltramodernWorkspaceEventPayloadMap[Name]>,
-  ) => void,
-) => {
-  const listener = (event: Event) => {
-    if (!('detail' in event)) {
-      throw new UltramodernWorkspaceEventValidationError(
-        eventName,
-        undefined,
-      );
-    }
-
-    const customEvent = event as CustomEvent<unknown>;
-    handler(
-      assertUltramodernWorkspaceEventPayload(eventName, customEvent.detail),
-      customEvent as CustomEvent<UltramodernWorkspaceEventPayloadMap[Name]>,
-    );
-  };
-
-  target.addEventListener(eventName, listener);
-
-  return () => {
-    target.removeEventListener(eventName, listener);
-  };
-};
-
-export const dispatchUltramodernNavigate = (
-  target: EventTarget,
-  payload: UltramodernNavigatePayload,
-) =>
-  dispatchUltramodernWorkspaceEvent(
-    target,
-    ultramodernWorkspaceEventNames.navigate,
-    payload,
-  );
-
-export const dispatchUltramodernRouteSettled = (
-  target: EventTarget,
-  payload: UltramodernRouteSettledPayload,
-) =>
-  dispatchUltramodernWorkspaceEvent(
-    target,
-    ultramodernWorkspaceEventNames.routeSettled,
-    payload,
-  );
-
-export const dispatchUltramodernRemoteReady = (
-  target: EventTarget,
-  payload: UltramodernRemoteReadyPayload,
-) =>
-  dispatchUltramodernWorkspaceEvent(
-    target,
-    ultramodernWorkspaceEventNames.remoteReady,
-    payload,
-  );
-
-export const dispatchUltramodernPerformanceSignal = (
-  target: EventTarget,
-  payload: UltramodernPerformanceSignalPayload,
-) =>
-  dispatchUltramodernWorkspaceEvent(
-    target,
-    ultramodernWorkspaceEventNames.performanceSignal,
-    payload,
-  );
-
-export const onUltramodernNavigate = (
-  target: EventTarget,
-  handler: (
-    payload: UltramodernNavigatePayload,
-    event: CustomEvent<UltramodernNavigatePayload>,
-  ) => void,
-) =>
-  onUltramodernWorkspaceEvent(
-    target,
-    ultramodernWorkspaceEventNames.navigate,
-    handler,
-  );
-
-export const onUltramodernRouteSettled = (
-  target: EventTarget,
-  handler: (
-    payload: UltramodernRouteSettledPayload,
-    event: CustomEvent<UltramodernRouteSettledPayload>,
-  ) => void,
-) =>
-  onUltramodernWorkspaceEvent(
-    target,
-    ultramodernWorkspaceEventNames.routeSettled,
-    handler,
-  );
-
-export const onUltramodernRemoteReady = (
-  target: EventTarget,
-  handler: (
-    payload: UltramodernRemoteReadyPayload,
-    event: CustomEvent<UltramodernRemoteReadyPayload>,
-  ) => void,
-) =>
-  onUltramodernWorkspaceEvent(
-    target,
-    ultramodernWorkspaceEventNames.remoteReady,
-    handler,
-  );
-
-export const onUltramodernPerformanceSignal = (
-  target: EventTarget,
-  handler: (
-    payload: UltramodernPerformanceSignalPayload,
-    event: CustomEvent<UltramodernPerformanceSignalPayload>,
-  ) => void,
-) =>
-  onUltramodernWorkspaceEvent(
-    target,
-    ultramodernWorkspaceEventNames.performanceSignal,
-    handler,
-  );

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

@@ -39,4 +39,14 @@
       singleton: true,
       treeShaking: false,
     },
+    'react/jsx-dev-runtime': {
+      requiredVersion: reactVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    'react/jsx-runtime': {
+      requiredVersion: reactVersion,
+      singleton: true,
+      treeShaking: false,
+    },
   }

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

@@ -1,22 +1,20 @@
+import developmentOverlay from '{{value29}}/topology/local-overlays/development.json';
+import { defineConfig } from '@modern-js/app-tools';
 import {
-  appTools,
-  defineConfig,
   presetUltramodern,
-  ultramodernReleaseEnvelopePlugin,
-} from '@modern-js/app-tools';
-import {
-  getBuildConfigEnvironment,
-  withBuildConfigEnvironment,
-} from '@modern-js/app-tools/config';
+  ultramodernAppTools,
+} from '@modern-js/ultramodern-app-tools';
 {{value0}}import { i18nPlugin } from '@modern-js/plugin-i18n';
 import { tanstackRouterPlugin } from '@modern-js/plugin-tanstack';
 {{value22}}
-const cloudflareDeployEnabled =
-  getBuildConfigEnvironment('MODERNJS_DEPLOY') === 'cloudflare';
+const cloudflareDeployEnabled = resolveDeployTarget().target === 'cloudflare';
 
 {{value23}}const appId = '{{value1}}';
 const cloudflareWorkerName = '{{value2}}';
-const port = Number(getBuildConfigEnvironment('{{value3}}') ?? {{value4}});
+const port = Number(getBuildConfigEnvironment('{{value3}}') ?? developmentOverlay.ports[appId]);
+if (!Number.isInteger(port) || port < 1 || port > 65_535) {
+  throw new Error(`Invalid development port for ${appId}: ${port}`);
+}
 const envValue = (name: string) => {
   const value = getBuildConfigEnvironment(name)?.trim();
   return value !== undefined && value.length > 0 ? value : undefined;
@@ -51,18 +49,6 @@ const buildOutputRoot = cloudflareDeployEnabled ? 'dist-cloudflare' : 'dist';
 const buildTempDirectory = `node_modules/.modern-js-${appId}-${buildTarget}`;
 const buildCacheDirectory = `node_modules/.cache/rspack-${appId}-${buildTarget}`;
 
-if (
-  cloudflareDeployEnabled &&
-  getBuildConfigEnvironment('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(
     {
@@ -79,7 +65,8 @@ export default defineConfig(
           }
         : {}),
       dev: {
-{{value13}}{{value20}}
+{{value13}}
+{{value20}}
       },
       html: {
         outputStructure: 'flat',
@@ -106,8 +93,7 @@ export default defineConfig(
         },
       },
       plugins: [
-        appTools(),
-        ultramodernReleaseEnvelopePlugin(),
+        ultramodernAppTools(),
         tanstackRouterPlugin(),
         i18nPlugin({
           backend: {
@@ -143,7 +129,7 @@ export default defineConfig(
       },
       source: {
         alias: {
-          '@modern-js/plugin-i18n/runtime':
+          '@modern-js/plugin-i18n/runtime$':
             '@modern-js/plugin-i18n/runtime/no-react-i18next',
         },
         globalVars: {

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

@@ -1,15 +1,25 @@
-// @generated by @modern-js/ultramodern-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;
+// @generated by @modern-js/plugin-tanstack from route.meta.ts files. Run routes-generate; do not edit.
+import { routeMeta as route0 } from './[lang]/route.meta';
 
+export const ultramodernRouteNamespace = route0.namespace;
+export const ultramodernRouteMetadata = [route0] as const;
+export const ultramodernLocalisedUrls = Object.fromEntries(
+  ultramodernRouteMetadata
+    .filter((route: { canonicalPath: string }) => route.canonicalPath !== '/')
+    .map((route) => [route.canonicalPath, route.localisedPaths]),
+);
+export const ultramodernPublicRoutes = ultramodernRouteMetadata
+  .filter((route) => route.public && route.indexable)
+  .map((route) => ({
+    canonicalPath: route.canonicalPath,
+    descriptionKey: route.descriptionKey,
+    id: route.id,
+    localisedPaths: route.localisedPaths,
+    namespace: route.namespace,
+    ownerAppId: route.ownerAppId,
+    titleKey: route.titleKey,
+    ...('jsonLd' in route ? { jsonLd: route.jsonLd } : {}),
+  }));
 export const ultramodernRouteConfig = {
   authoring: 'colocated-route-meta',
   generatedManifest: true,

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

@@ -10,38 +10,38 @@ export default function ShellHome() {
   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="/">
+      <section className="{{heroClassName}}">
+        <div className="{{heroContentClassName}}">
+          <p className="{{eyebrowClassName}}">{t('shell.hero.eyebrow')}</p>
+          <h1 className="{{titleClassName}}">{t('shell.title')}</h1>
+          <p className="{{ledeClassName}}">{t('shell.hero.lede')}</p>
+          <div className="{{actionsClassName}}">
+            <Link className="{{primaryActionClassName}}" to="/">
               {t('shell.hero.primary')}
             </Link>
-            <span className="{{value7}}">
+            <span className="{{secondaryActionClassName}}">
               {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>
+        <div className="{{cardsClassName}}">
+          <div className="{{cardsGridClassName}}">
+            <article className="{{remoteCardClassName}}">
+              <span className="{{remoteCardKickerClassName}}">{t('shell.hero.cardOneKicker')}</span>
+              <strong className="{{cardValueClassName}}">{{remoteCount}}</strong>
+              <p className="{{cardBodyClassName}}">{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 className="{{ssrCardClassName}}">
+              <span className="{{ssrCardKickerClassName}}">{t('shell.hero.cardTwoKicker')}</span>
+              <strong className="{{cardValueClassName}}">SSR</strong>
+              <p className="{{cardBodyClassName}}">{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">
+      <p className="{{hiddenClassName}}" data-testid="ultramodern-preset">presetUltramodern workspace</p>
+      <p className="{{hiddenClassName}}" 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

@@ -1,10 +1,10 @@
 interface RemoteComponentModule {
-  default: ComponentType;
+  default: FunctionComponent;
 }
 
 const RemoteUnavailable = () => {
   const { t } = useModernI18n();
-  return <div className="{{value1}}">{t('shell.remoteUnavailable')}</div>;
+  return <div className="{{unavailableClassName}}">{t('shell.remoteUnavailable')}</div>;
 };
 
 const createRemoteComponent = (
@@ -13,13 +13,11 @@ const createRemoteComponent = (
   loader: () => Promise<RemoteComponentModule>,
 ) =>
   createDistributedSsrComponent({
-    createComponent: () =>
+    createComponent: options =>
       createLazyComponent({
-        export: 'default',
-        fallback: <RemoteUnavailable />,
+        ...options,
         instance: getInstance(),
         loader,
-        loading: null,
       }),
     expose,
     fallback: <RemoteUnavailable />,

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

@@ -1,4 +1,4 @@
 import { createLazyComponent } from '@module-federation/modern-js-v3/react';
 import { getInstance } from '@module-federation/modern-js-v3/runtime';
-import { createDistributedSsrComponent } from '@modern-js/runtime/module-federation';
-import type { ComponentType } from 'react';
+import { createDistributedSsrComponent } from '@modern-js/federation-runtime';
+import type { FunctionComponent } from 'react';

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

@@ -1,16 +1,16 @@
-{{value0}}import { Link, useModernI18n } from '@modern-js/plugin-i18n/runtime';
+{{federationImports}}import { Link, useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
-	const widgetCount = Number('{{value1}}');
+	const widgetCount = Number('{{widgetCount}}');
 
-	{{value2}}
-	{{value3}}
+	{{federationHelpers}}
+	{{remoteComponentExports}}
 
 	export const Header = () => {
   const { t } = useModernI18n();
 
   return (
-    <header className="{{value4}}" data-modern-boundary-id="{{value5}}" data-modern-mf-expose="shell/Header">
-      <Link className="{{value6}}" to="/">{t('shell.title')}</Link>
+    <header className="{{headerClassName}}" data-modern-boundary-id="{{boundaryId}}" data-modern-mf-expose="shell/Header">
+      <Link className="{{titleClassName}}" to="/">{t('shell.title')}</Link>
     </header>
   );
 };
@@ -19,7 +19,7 @@ export const StatusBadge = () => {
   const { t } = useModernI18n();
 
   return (
-    <span className="{{value7}}">
+    <span className="{{statusBadgeClassName}}">
       {widgetCount} {t('shell.hero.cardOneKicker')}
     </span>
   );
@@ -30,15 +30,15 @@ export const VerticalShowcase = () => {
 
   if (widgetCount === 0) {
     return (
-      <section className="{{value8}}">
-        <p className="{{value9}}">{t('shell.hero.empty')}</p>
+      <section className="{{emptyShowcaseClassName}}">
+        <p className="{{emptyMessageClassName}}">{t('shell.hero.empty')}</p>
       </section>
     );
   }
 
   return (
-    <section className="{{value10}}" data-modern-boundary-id="{{value11}}">
-      {{value12}}
+    <section className="{{showcaseClassName}}" data-modern-boundary-id="{{boundaryId}}">
+      {{showcaseGrid}}
     </section>
   );
 };

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

@@ -1,6 +1,6 @@
 const RemoteUnavailable = () => {
   const { t } = useModernI18n();
-  return <div className="{{value1}}">{t('shell.remoteUnavailable')}</div>;
+  return <div className="{{unavailableClassName}}">{t('shell.remoteUnavailable')}</div>;
 };
 
 const createRemoteComponent = (remote: string, expose: string) =>

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

@@ -1 +1 @@
-import { DistributedSsrBoundary } from '@modern-js/runtime/module-federation';
+import { DistributedSsrBoundary } from '@modern-js/federation-runtime';