@bleedingdev/modern-js-create 3.4.0-ultramodern.2 → 3.4.0-ultramodern.4

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

@@ -10,8 +10,7 @@ import { VerticalShowcase } from '../vertical-components';
 import { ultramodernUiMarker } from '../../ultramodern-build';
 
 export default function ShellHome() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <ShellFrame>
@@ -84,8 +83,7 @@ const loadRemoteComponent = (specifier: string) =>
 
 const createRemoteFallback = (specifier: string) =>
   ({ error }: { error: Error }) => {
-    const { i18nInstance } = useModernI18n();
-    const t = i18nInstance['t'].bind(i18nInstance);
+    const { t } = useModernI18n();
     const classification = classifyModuleFederationFallback(error);
     const telemetry = createModuleFederationFallbackTelemetry({
       appName: '${shellApp.id}',
@@ -112,7 +110,7 @@ const createRemoteFallback = (specifier: string) =>
         remote: specifier,
         status: 'degraded',
       });
-    }, [classification, error, specifier, telemetry]);
+    }, [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>;
   };
@@ -167,8 +165,7 @@ const createHydratedRemote =
 	${hydratedExports}
 
 	export const Header = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  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">
@@ -178,8 +175,7 @@ const createHydratedRemote =
 };
 
 export const StatusBadge = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  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')}">
@@ -189,8 +185,7 @@ export const StatusBadge = () => {
 };
 
 export const VerticalShowcase = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   if (widgetCount === 0) {
     return (
@@ -257,8 +252,7 @@ import { ultramodernUiMarker } from '../../ultramodern-build';
 ` : '';
     return `${effectBffImport}
 export default function ${toPascalCase(app.id)}Home() {
-  const { i18nInstance, language, supportedLanguages } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { language, supportedLanguages, t } = useModernI18n();
 ${effectBffState}  return (
     <main className="${tw('min-h-screen bg-um-canvas px-4 py-6 text-um-foreground sm:px-8')}">
       <UltramodernRouteHead />
@@ -304,8 +298,7 @@ function createRemoteEntry(app) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${toPascalCase(domain)}Route() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="./Route">
@@ -323,8 +316,7 @@ function createRemoteWidget(app) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${componentName}() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="./Widget">
@@ -343,8 +335,7 @@ function createRemoteExposeComponent(app, expose) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${componentName}() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="${expose}">

package/dist/esm/ultramodern-workspace/effect-api.js

@@ -36,27 +36,51 @@ function serviceHasCheckoutCartState(service) {
 function createCheckoutCartSharedSchemas(service) {
     if (!serviceHasCheckoutCartState(service)) return '';
     return `
-export const checkoutCartLineSchema = Schema.Struct({
+export interface CheckoutCartLine {
+  readonly sku: string;
+  readonly name: string;
+  readonly quantity: number;
+  readonly unitPriceCents: number;
+}
+
+export interface CheckoutCart {
+  readonly lines: ReadonlyArray<CheckoutCartLine>;
+  readonly subtotalCents: number;
+  readonly totalQuantity: number;
+}
+
+export interface CheckoutAddCartItemPayload {
+  readonly sku: string;
+  readonly name?: string;
+  readonly quantity: number;
+  readonly unitPriceCents?: number;
+}
+
+export interface CheckoutRemoveCartItemPayload {
+  readonly sku: string;
+}
+
+export const checkoutCartLineSchema: Schema.Schema<CheckoutCartLine> = Schema.Struct({
   sku: Schema.String,
   name: Schema.String,
   quantity: Schema.Finite,
   unitPriceCents: Schema.Finite,
 });
 
-export const checkoutCartSchema = Schema.Struct({
+export const checkoutCartSchema: Schema.Schema<CheckoutCart> = Schema.Struct({
   lines: Schema.Array(checkoutCartLineSchema),
   subtotalCents: Schema.Finite,
   totalQuantity: Schema.Finite,
 });
 
-export const checkoutAddCartItemPayloadSchema = Schema.Struct({
+export const checkoutAddCartItemPayloadSchema: Schema.Schema<CheckoutAddCartItemPayload> = Schema.Struct({
   sku: Schema.String,
   name: Schema.optional(Schema.String),
   quantity: Schema.Finite,
   unitPriceCents: Schema.optional(Schema.Finite),
 });
 
-export const checkoutRemoveCartItemPayloadSchema = Schema.Struct({
+export const checkoutRemoveCartItemPayloadSchema: Schema.Schema<CheckoutRemoveCartItemPayload> = Schema.Struct({
   sku: Schema.String,
 });
 `;
@@ -209,6 +233,7 @@ function createCheckoutCartClientExports(service) {
     const pascalStem = toPascalCase(stem);
     const clientOptionsName = `${pascalStem}ClientOptions`;
     const createClientName = `create${pascalStem}Client`;
+    const clientEffectTypeName = `${pascalStem}ClientEffect`;
     return `
 export interface CheckoutCartLine {
   sku: string;
@@ -232,7 +257,7 @@ export interface CheckoutAddCartItemInput {
 
 export const getCheckoutCart = (
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<CheckoutCart> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -244,7 +269,7 @@ export const getCheckoutCart = (
 export const addCheckoutCartItem = (
   payload: CheckoutAddCartItemInput,
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<CheckoutCart> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -258,7 +283,7 @@ export const addCheckoutCartItem = (
 export const removeCheckoutCartItem = (
   sku: string,
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<CheckoutCart> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -271,7 +296,7 @@ export const removeCheckoutCartItem = (
 
 export const clearCheckoutCart = (
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<CheckoutCart> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -302,12 +327,63 @@ function createEffectSharedApiContract(service) {
     const apiName = verticalEffectApiName(service);
     const groupName = verticalEffectGroupName(service);
     const stem = effectApiStem(service);
+    const pascalStem = toPascalCase(stem);
+    const markerType = `${pascalStem}Marker`;
+    const itemType = `${pascalStem}Item`;
+    const readinessType = `${pascalStem}Readiness`;
+    const createPayloadType = `${pascalStem}CreatePayload`;
+    const createResponseType = `${pascalStem}CreateResponse`;
+    const listResponseType = `${pascalStem}ListResponse`;
     const apiPrefix = effectApiPrefix(service);
     const checkoutCartSharedSchemas = createCheckoutCartSharedSchemas(service);
     const checkoutCartSharedSchemaSection = '' === checkoutCartSharedSchemas ? '' : `${checkoutCartSharedSchemas}\n`;
     const checkoutCartOperationContexts = createCheckoutCartOperationContexts(service).trimStart();
     const checkoutCartOperationContextEntries = '' === checkoutCartOperationContexts ? '' : `${checkoutCartOperationContexts}\n`;
-    return `export const ${markerSchemaExport} = Schema.Struct({
+    return `export interface ${markerType} {
+  readonly appId: string;
+  readonly build: string;
+  readonly deployProfile: string;
+  readonly packageName: string;
+  readonly surface: string;
+  readonly version: string;
+}
+
+export interface ${itemType} {
+  readonly id: string;
+  readonly marker: ${markerType};
+  readonly title: string;
+}
+
+export interface ${readinessType} {
+  readonly checks: {
+    readonly effectBff: 'ready';
+    readonly moduleFederation: 'ready';
+    readonly ssr: 'ready';
+    readonly translations: 'ready';
+  };
+  readonly marker: ${markerType};
+  readonly status: 'ready';
+  readonly versionSkew: 'none';
+}
+
+export interface ${createPayloadType} {
+  readonly title: string;
+}
+
+export interface ${listResponseType} {
+  readonly items: ReadonlyArray<${itemType}>;
+}
+
+export interface ${createResponseType} {
+  readonly item: ${itemType};
+}
+
+export interface ${notFoundErrorExport} {
+  readonly _tag: '${notFoundErrorExport}';
+  readonly id: string;
+}
+
+export const ${markerSchemaExport}: Schema.Schema<${markerType}> = Schema.Struct({
   appId: Schema.String,
   build: Schema.String,
   deployProfile: Schema.String,
@@ -316,13 +392,13 @@ function createEffectSharedApiContract(service) {
   version: Schema.String,
 });
 
-export const ${schemaExport} = Schema.Struct({
+export const ${schemaExport}: Schema.Schema<${itemType}> = Schema.Struct({
   id: Schema.String,
   marker: ${markerSchemaExport},
   title: Schema.String,
 });
 
-export const ${readinessSchemaExport} = Schema.Struct({
+export const ${readinessSchemaExport}: Schema.Schema<${readinessType}> = Schema.Struct({
   checks: Schema.Struct({
     effectBff: Schema.Literal('ready'),
     moduleFederation: Schema.Literal('ready'),
@@ -334,18 +410,13 @@ export const ${readinessSchemaExport} = Schema.Struct({
   versionSkew: Schema.Literal('none'),
 });
 
-export const ${createPayloadSchemaExport} = Schema.Struct({
+export const ${createPayloadSchemaExport}: Schema.Schema<${createPayloadType}> = Schema.Struct({
   title: Schema.String,
 });
 
-${checkoutCartSharedSchemaSection}export class ${notFoundErrorExport} extends Schema.TaggedErrorClass<${notFoundErrorExport}>()(
-  '${notFoundErrorExport}',
-  {
-    id: Schema.String,
-  },
-) {}
-
-export const ${notFoundSchemaExport} = ${notFoundErrorExport}.pipe(
+${checkoutCartSharedSchemaSection}export const ${notFoundSchemaExport}: Schema.Schema<${notFoundErrorExport}> = Schema.TaggedStruct('${notFoundErrorExport}', {
+  id: Schema.String,
+}).pipe(
   HttpApiSchema.status(404),
 );
 
@@ -449,13 +520,20 @@ function createEffectServiceEntry(service, contractImportPath) {
   HttpApiBuilder,
   Layer,
 } from '@modern-js/plugin-bff/effect-edge';
+import type {
+  EffectBffDefinition,
+  EffectBffRuntime,
+  EffectRuntimeLayer,
+} from '@modern-js/plugin-bff/effect-edge';
 import { ultramodernApiMarker } from '../../src/ultramodern-build.ts';
 import {
   ${apiExport},
   ${groupName}OperationContexts,
+} from '${contractImportPath}';
+import type {
   ${notFoundErrorExport},
+  OperationContext,
 } from '${contractImportPath}';
-import type { OperationContext } from '${contractImportPath}';
 
 const ${groupName}Items = [
   {
@@ -516,9 +594,13 @@ const ${groupName}Layer = HttpApiBuilder.group(
         const matchedItem = ${groupName}Items.find(
           candidate => candidate.id === params.id,
         );
+        const notFound: ${notFoundErrorExport} = {
+          _tag: '${notFoundErrorExport}',
+          id: params.id,
+        };
         const result =
           matchedItem === undefined
-            ? Effect.fail(new ${notFoundErrorExport}({ id: params.id }))
+            ? Effect.fail(notFound)
             : Effect.succeed(matchedItem);
 
         return result.pipe(
@@ -549,12 +631,15 @@ const ${groupName}Layer = HttpApiBuilder.group(
 
 const layer = HttpApiBuilder.layer(${apiExport}).pipe(
   Layer.provide(${groupName}Layer),
-);
+) satisfies EffectRuntimeLayer;
 
-export default defineEffectBff({
+const effectBff: EffectBffDefinition<typeof ${apiExport}, EffectRuntimeLayer> &
+  EffectBffRuntime<typeof ${apiExport}, EffectRuntimeLayer> = defineEffectBff({
   api: ${apiExport},
   layer,
 });
+
+export default effectBff;
 `;
 }
 function createEffectClient(service, contractImportPath) {
@@ -565,25 +650,71 @@ function createEffectClient(service, contractImportPath) {
     const singular = verticalEffectErrorStem(service);
     const clientOptionsName = `${toPascalCase(stem)}ClientOptions`;
     const createClientName = `create${toPascalCase(stem)}Client`;
+    const clientTypeName = `${toPascalCase(stem)}Client`;
+    const clientEffectTypeName = `${toPascalCase(stem)}ClientEffect`;
     const listName = `list${toPascalCase(stem)}`;
     const readinessName = `get${toPascalCase(stem)}Readiness`;
     const getName = `get${toPascalCase(singular)}`;
     const createName = `create${toPascalCase(singular)}`;
+    const notFoundErrorExport = verticalEffectNotFoundErrorExport(service);
+    const pascalStem = toPascalCase(stem);
+    const itemType = `${pascalStem}Item`;
+    const readinessType = `${pascalStem}Readiness`;
+    const createResponseType = `${pascalStem}CreateResponse`;
+    const listResponseType = `${pascalStem}ListResponse`;
     const checkoutCartClientExports = createCheckoutCartClientExports(service);
     return `import {
   Effect,
   makeEffectHttpApiClient,
   runEffectRequest,
 } from '@modern-js/plugin-bff/effect-client';
+import type {
+  HttpClientError,
+  HttpApi,
+  HttpApiClient,
+  HttpApiGroup,
+  Schema,
+} from '@modern-js/plugin-bff/effect-client';
 import {
   ${contractExport}ApiContract,
   ${apiExport},
   ${groupName}OperationContexts,
 } from '${contractImportPath}';
-import type { OperationContext } from '${contractImportPath}';
+import type {
+  ${createResponseType},
+  ${itemType},
+  ${listResponseType},
+  ${notFoundErrorExport},
+  OperationContext,
+  ${readinessType},
+} from '${contractImportPath}';
 
 export { Effect, runEffectRequest };
 
+type ${pascalStem}EffectGroups = typeof ${apiExport} extends HttpApi.HttpApi<
+  infer _ApiId,
+  infer Groups
+>
+  ? Groups
+  : never;
+
+export type ${clientTypeName} = HttpApiClient.Client<
+  Extract<${pascalStem}EffectGroups, HttpApiGroup.Any>,
+  never,
+  never
+>;
+
+export type ${pascalStem}ClientError =
+  | ${notFoundErrorExport}
+  | HttpClientError.HttpClientError
+  | Schema.SchemaError;
+
+export type ${clientEffectTypeName}<Success> = Effect.Effect<
+  Success,
+  ${pascalStem}ClientError,
+  never
+>;
+
 export interface ${clientOptionsName} {
   baseUrl?: string | URL;
   locale?: string;
@@ -593,7 +724,7 @@ export interface ${clientOptionsName} {
 
 export const ${createClientName} = (
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<${clientTypeName}> =>
   makeEffectHttpApiClient(${apiExport}, {
     baseUrl: options.baseUrl ?? ${contractExport}ApiContract.apiPrefix,
     requestContext: {
@@ -609,7 +740,7 @@ export const ${createClientName} = (
 
 export const ${listName} = (
   options: ${clientOptionsName} & { limit?: number } = {},
-) =>
+): ${clientEffectTypeName}<${listResponseType}> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -622,7 +753,7 @@ export const ${listName} = (
 
 export const ${readinessName} = (
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<${readinessType}> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -634,7 +765,7 @@ export const ${readinessName} = (
 export const ${getName} = (
   id: string,
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<${itemType}> =>
   ${createClientName}({
     ...options,
     operationContext:
@@ -646,7 +777,7 @@ export const ${getName} = (
 export const ${createName} = (
   title: string,
   options: ${clientOptionsName} = {},
-) =>
+): ${clientEffectTypeName}<${createResponseType}> =>
   ${createClientName}({
     ...options,
     operationContext:

package/dist/esm/ultramodern-workspace/module-federation.js

@@ -217,12 +217,12 @@ ${bffPluginEntry}        moduleFederationPlugin(),
 }
 function createSharedModuleFederationConfig() {
     return `  shared: {
-    '@modern-js/plugin-i18n/runtime/no-react-i18next': {
+    '@modern-js/plugin-i18n/runtime': {
       requiredVersion: pluginI18nVersion,
       singleton: true,
       treeShaking: false,
     },
-    '@modern-js/plugin-i18n/runtime': {
+    '@modern-js/plugin-i18n/runtime/no-react-i18next': {
       requiredVersion: pluginI18nVersion,
       singleton: true,
       treeShaking: false,
@@ -342,7 +342,9 @@ const reactVersion = (require('react/package.json') as { version: string }).vers
 const reactDomVersion = (require('react-dom/package.json') as { version: string }).version;
 
 ${createModuleFederationRemoteUrlHelpers(shellHost, remotes)}
-export default createModuleFederationConfig({
+const moduleFederationConfig: Parameters<
+  typeof createModuleFederationConfig
+>[0] = createModuleFederationConfig({
   bridge: {
     enableBridgeRouter: false,
   },
@@ -360,6 +362,8 @@ export default createModuleFederationConfig({
 ${createModuleFederationRemotesConfig(scope, shellHost, remotes)}${createSharedModuleFederationConfig()},
   treeShakingSharedExcludePlugins: ['RspackModuleFederationPlugin'],
 });
+
+export default moduleFederationConfig;
 `;
 }
 function createBuildMarker(scope, app) {
@@ -400,7 +404,9 @@ const reactVersion = (require('react/package.json') as { version: string }).vers
 const reactDomVersion = (require('react-dom/package.json') as { version: string }).version;
 
 ${createModuleFederationRemoteUrlHelpers(app, remotes)}
-export default createModuleFederationConfig({
+const moduleFederationConfig: Parameters<
+  typeof createModuleFederationConfig
+>[0] = createModuleFederationConfig({
   bridge: {
     enableBridgeRouter: false,
   },
@@ -419,6 +425,8 @@ export default createModuleFederationConfig({
 ${createModuleFederationRemotesConfig(scope, app, remotes)}${createSharedModuleFederationConfig()},
   treeShakingSharedExcludePlugins: ['RspackModuleFederationPlugin'],
 });
+
+export default moduleFederationConfig;
 `;
 }
 export { createAppModernConfig, createBuildMarker, createModuleFederationRemoteUrlHelpers, createModuleFederationRemotesConfig, createRemoteModuleFederationConfig, createSharedModuleFederationConfig, createShellModuleFederationConfig, createUltramodernBuildModule, formatTsObjectLiteral };

package/dist/esm/ultramodern-workspace/package-json.js

@@ -255,6 +255,10 @@ function createTsBuildInfoFile(packageDir) {
     const cacheKey = packageDir.replace(/[^a-zA-Z0-9._-]+/gu, '__');
     return `${relativeRootFor(packageDir)}/node_modules/.cache/tsgo/${cacheKey}.tsbuildinfo`;
 }
+function createTsDeclarationOutDir(packageDir) {
+    const cacheKey = packageDir.replace(/[^a-zA-Z0-9._-]+/gu, '__');
+    return `${relativeRootFor(packageDir)}/node_modules/.cache/tsgo/declarations/${cacheKey}`;
+}
 function createReferences(packageDir, references) {
     return [
         ...new Set(references)
@@ -268,8 +272,10 @@ function createPackageTsConfig(packageDir, options = {}) {
     } : options;
     const include = resolvedOptions.include ?? [
         'src',
+        'locales/**/*.json',
         'modern.config.ts',
-        'module-federation.config.ts'
+        'module-federation.config.ts',
+        'package.json'
     ];
     if (resolvedOptions.includeApi) include.push('api', 'shared');
     const references = createReferences(packageDir, resolvedOptions.references ?? []);
@@ -277,7 +283,12 @@ function createPackageTsConfig(packageDir, options = {}) {
         extends: `${relativeRootFor(packageDir)}/tsconfig.base.json`,
         compilerOptions: {
             composite: true,
+            declaration: true,
+            declarationMap: false,
+            emitDeclarationOnly: true,
             incremental: true,
+            noEmit: false,
+            outDir: createTsDeclarationOutDir(packageDir),
             tsBuildInfoFile: createTsBuildInfoFile(packageDir)
         },
         include

package/dist/esm-node/ultramodern-workspace/contracts.js

@@ -669,6 +669,7 @@ function createTemplateManifest(modernVersion, packageSource) {
                 'pnpm-workspace.yaml',
                 "scripts/**",
                 'topology/**',
+                'tsconfig.json',
                 'tsconfig.base.json'
             ],
             deniedPaths: [
@@ -733,6 +734,7 @@ function createTemplateManifest(modernVersion, packageSource) {
             expectedCommands: [
                 'mise install',
                 'pnpm install',
+                'pnpm run typecheck',
                 'pnpm run i18n:boundaries',
                 'pnpm run contract:check',
                 'pnpm run performance:readiness'

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

@@ -11,8 +11,7 @@ import { VerticalShowcase } from '../vertical-components';
 import { ultramodernUiMarker } from '../../ultramodern-build';
 
 export default function ShellHome() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <ShellFrame>
@@ -85,8 +84,7 @@ const loadRemoteComponent = (specifier: string) =>
 
 const createRemoteFallback = (specifier: string) =>
   ({ error }: { error: Error }) => {
-    const { i18nInstance } = useModernI18n();
-    const t = i18nInstance['t'].bind(i18nInstance);
+    const { t } = useModernI18n();
     const classification = classifyModuleFederationFallback(error);
     const telemetry = createModuleFederationFallbackTelemetry({
       appName: '${shellApp.id}',
@@ -113,7 +111,7 @@ const createRemoteFallback = (specifier: string) =>
         remote: specifier,
         status: 'degraded',
       });
-    }, [classification, error, specifier, telemetry]);
+    }, [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>;
   };
@@ -168,8 +166,7 @@ const createHydratedRemote =
 	${hydratedExports}
 
 	export const Header = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  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">
@@ -179,8 +176,7 @@ const createHydratedRemote =
 };
 
 export const StatusBadge = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  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')}">
@@ -190,8 +186,7 @@ export const StatusBadge = () => {
 };
 
 export const VerticalShowcase = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   if (widgetCount === 0) {
     return (
@@ -258,8 +253,7 @@ import { ultramodernUiMarker } from '../../ultramodern-build';
 ` : '';
     return `${effectBffImport}
 export default function ${toPascalCase(app.id)}Home() {
-  const { i18nInstance, language, supportedLanguages } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { language, supportedLanguages, t } = useModernI18n();
 ${effectBffState}  return (
     <main className="${tw('min-h-screen bg-um-canvas px-4 py-6 text-um-foreground sm:px-8')}">
       <UltramodernRouteHead />
@@ -305,8 +299,7 @@ function createRemoteEntry(app) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${toPascalCase(domain)}Route() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="./Route">
@@ -324,8 +317,7 @@ function createRemoteWidget(app) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${componentName}() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="./Widget">
@@ -344,8 +336,7 @@ function createRemoteExposeComponent(app, expose) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${componentName}() {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   return (
     <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="${expose}">