@bleedingdev/modern-js-create 3.2.0-ultramodern.10 → 3.2.0-ultramodern.12

package/dist/index.js

@@ -561,8 +561,10 @@ const TYPESCRIPT_NATIVE_PREVIEW_VERSION = '7.0.0-dev.20260518.1';
 const OXLINT_VERSION = '1.65.0';
 const OXFMT_VERSION = '0.50.0';
 const ULTRACITE_VERSION = '7.7.0';
+const I18NEXT_VERSION = '26.2.0';
 const REACT_VERSION = '^19.2.6';
 const REACT_DOM_VERSION = '^19.2.6';
+const REACT_I18NEXT_VERSION = '17.0.8';
 const WORKSPACE_PACKAGE_VERSION = 'workspace:*';
 const RSTACK_AGENT_SKILLS_COMMIT = '61c948b42512e223bad44b83af4080eba48b2677';
 const baselineAgentSkills = [
@@ -585,6 +587,7 @@ const effectTsgoTypecheckCommand = "node -e \"const fs = require('node:fs'); con
 const modernPackageNames = [
     '@modern-js/app-tools',
     '@modern-js/plugin-bff',
+    '@modern-js/plugin-i18n',
     '@modern-js/plugin-tanstack',
     '@modern-js/runtime'
 ];
@@ -631,7 +634,7 @@ const remoteApps = [
         mfName: 'remoteCommerce',
         exposes: {
             './Route': './src/remote-entry.tsx',
-            './Widget': './src/components/CommerceWidget.tsx'
+            './Widget': './src/components/commerce-widget.tsx'
         },
         ownership: {
             team: 'commerce-experience',
@@ -660,7 +663,7 @@ const remoteApps = [
         mfName: 'remoteIdentity',
         exposes: {
             './Route': './src/remote-entry.tsx',
-            './Widget': './src/components/IdentityWidget.tsx'
+            './Widget': './src/components/identity-widget.tsx'
         },
         ownership: {
             team: 'identity-platform',
@@ -688,7 +691,7 @@ const remoteApps = [
         port: 3023,
         mfName: 'remoteDesignSystem',
         exposes: {
-            './Button': './src/components/Button.tsx',
+            './Button': './src/components/button.tsx',
             './tokens': './src/tokens.ts'
         },
         ownership: {
@@ -917,6 +920,7 @@ function modernPackageSpecifier(packageName, packageSource) {
 }
 function appDependencies(scope, packageSource) {
     return {
+        '@modern-js/plugin-i18n': modernPackageSpecifier('@modern-js/plugin-i18n', packageSource),
         '@modern-js/plugin-tanstack': modernPackageSpecifier('@modern-js/plugin-tanstack', packageSource),
         '@modern-js/runtime': modernPackageSpecifier('@modern-js/runtime', packageSource),
         '@module-federation/modern-js-v3': MODULE_FEDERATION_VERSION,
@@ -924,8 +928,10 @@ function appDependencies(scope, packageSource) {
         '@tanstack/react-router': TANSTACK_ROUTER_VERSION,
         [ultramodern_workspace_packageName(scope, 'shared-contracts')]: WORKSPACE_PACKAGE_VERSION,
         [ultramodern_workspace_packageName(scope, 'shared-design-tokens')]: WORKSPACE_PACKAGE_VERSION,
+        i18next: I18NEXT_VERSION,
         react: REACT_VERSION,
-        'react-dom': REACT_DOM_VERSION
+        'react-dom': REACT_DOM_VERSION,
+        'react-i18next': REACT_I18NEXT_VERSION
     };
 }
 function appDevDependencies(packageSource) {
@@ -943,6 +949,7 @@ function createRootPackageJson(scope, packageSource) {
         private: true,
         name: scope,
         version: '0.1.0',
+        type: 'module',
         packageManager: 'pnpm@11.1.2',
         scripts: {
             dev: `pnpm --parallel --filter ${ultramodern_workspace_packageName(scope, shellApp.packageSuffix)} --filter ${ultramodern_workspace_packageName(scope, 'remote-commerce')} --filter ${ultramodern_workspace_packageName(scope, 'remote-identity')} --filter ${ultramodern_workspace_packageName(scope, 'remote-design-system')} dev`,
@@ -954,13 +961,14 @@ function createRootPackageJson(scope, packageSource) {
             build: 'pnpm -r --filter ./apps/** --filter ./services/** build',
             format: 'oxfmt .',
             'format:check': 'oxfmt --check .',
+            'i18n:check': "node ./scripts/check-i18n-strings.mjs",
             lint: 'oxlint .',
             'lint:fix': 'oxlint . --fix',
-            typecheck: 'pnpm -r --filter ./apps/** --filter ./services/** --filter ./packages/** typecheck',
+            typecheck: `pnpm -r --filter "@${scope}/*" typecheck`,
             'skills:install': "node ./scripts/bootstrap-agent-skills.mjs",
             'skills:check': "node ./scripts/bootstrap-agent-skills.mjs --check",
             'ultramodern:check': "node ./scripts/validate-ultramodern-workspace.mjs",
-            check: 'pnpm format:check && pnpm lint && pnpm typecheck && pnpm skills:check && pnpm ultramodern:check'
+            check: 'pnpm format:check && pnpm lint && pnpm typecheck && pnpm i18n:check && pnpm skills:check && pnpm ultramodern:check'
         },
         engines: {
             node: '>=20',
@@ -991,7 +999,7 @@ function createRootPackageJson(scope, packageSource) {
         }
     };
 }
-function createTsConfigBase(scope) {
+function createTsConfigBase() {
     return {
         compilerOptions: {
             target: 'ESNext',
@@ -1018,12 +1026,6 @@ function createTsConfigBase(scope) {
             noImplicitReturns: true,
             skipLibCheck: true,
             resolveJsonModule: true,
-            paths: Object.fromEntries(sharedPackages.map((sharedPackage)=>[
-                    ultramodern_workspace_packageName(scope, sharedPackage.id),
-                    [
-                        `${sharedPackage.directory}/src/index.ts`
-                    ]
-                ])),
             plugins: [
                 {
                     name: '@effect/language-service',
@@ -1051,20 +1053,6 @@ function createPackageTsConfig(packageDir, includeApi = false) {
     if (includeApi) include.push('api', 'shared');
     return {
         extends: `${relativeRootFor(packageDir)}/tsconfig.base.json`,
-        compilerOptions: {
-            baseUrl: '.',
-            paths: {
-                '@/*': [
-                    './src/*'
-                ],
-                '@api/*': [
-                    './api/*'
-                ],
-                '@shared/*': [
-                    './shared/*'
-                ]
-            }
-        },
         include
     };
 }
@@ -1145,6 +1133,7 @@ function createSharedPackage(scope, id, description) {
 function createAppModernConfig(app) {
     return `// @effect-diagnostics processEnv:off
 import { appTools, defineConfig, presetUltramodern } from '@modern-js/app-tools';
+import { i18nPlugin } from '@modern-js/plugin-i18n';
 import { tanstackRouterPlugin } from '@modern-js/plugin-tanstack';
 import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
 
@@ -1154,28 +1143,34 @@ const port = Number(process.env['${app.portEnv}'] ?? ${app.port});
 export default defineConfig(
   presetUltramodern(
     {
-      server: {
-        port,
-        ssr: {
-          mode: 'string',
-          moduleFederationAppSSR: true,
-        },
-      },
       output: {
-        polyfill: 'off',
         disableTsChecker: true,
+        polyfill: 'off',
         splitRouteChunks: false,
       },
       plugins: [
         appTools(),
+        i18nPlugin({
+          localeDetection: {
+            fallbackLanguage: 'en',
+            languages: ['en', 'cs'],
+          },
+        }),
         tanstackRouterPlugin(),
         moduleFederationPlugin(),
       ],
+      server: {
+        port,
+        ssr: {
+          mode: 'string',
+          moduleFederationAppSSR: true,
+        },
+      },
     },
     {
       appId,
-      enableModuleFederationSSR: true,
       enableBffRequestId: true,
+      enableModuleFederationSSR: true,
       enableTelemetryExporters: true,
       telemetryFailLoudStartup: false,
     },
@@ -1183,6 +1178,47 @@ export default defineConfig(
 );
 `;
 }
+function createSharedModuleFederationConfig() {
+    return `  shared: {
+    '@modern-js/runtime': {
+      requiredVersion: runtimeVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@tanstack/react-router': {
+      requiredVersion: dependencies['@tanstack/react-router'],
+      singleton: true,
+      treeShaking: false,
+    },
+    i18next: {
+      requiredVersion: dependencies.i18next,
+      singleton: true,
+      treeShaking: false,
+    },
+    react: {
+      requiredVersion: reactVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    'react-dom': {
+      requiredVersion: reactDomVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    'react-i18next': {
+      requiredVersion: dependencies['react-i18next'],
+      singleton: true,
+      treeShaking: false,
+    },
+  }`;
+}
+function formatTsObjectLiteral(value) {
+    const entries = Object.entries(value).sort(([left], [right])=>left.localeCompare(right));
+    if (0 === entries.length) return '{}';
+    return `{
+${entries.map(([key, entryValue])=>`    '${key}': '${entryValue}',`).join('\n')}
+  }`;
+}
 function createShellModuleFederationConfig() {
     return `// @effect-diagnostics nodeBuiltinImport:off processEnv:off
 import { createRequire } from 'node:module';
@@ -1190,98 +1226,47 @@ import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 import { dependencies } from './package.json';
 
 const require = createRequire(import.meta.url);
-const runtimeVersion = (
-  require('@modern-js/runtime/package.json') as { version: string }
-).version;
-const reactVersion = (require('react/package.json') as { version: string })
-  .version;
-const reactDomVersion = (
-  require('react-dom/package.json') as { version: string }
-).version;
+const runtimeVersion = (require('@modern-js/runtime/package.json') as { version: string }).version;
+const reactVersion = (require('react/package.json') as { version: string }).version;
+const reactDomVersion = (require('react-dom/package.json') as { version: string }).version;
 
 export default createModuleFederationConfig({
-  name: '${shellApp.mfName}',
   dts: false,
+  filename: 'remoteEntry.js',
+  name: '${shellApp.mfName}',
   remotes: {
     commerce:
       process.env['REMOTE_COMMERCE_MF_MANIFEST'] ??
       'remoteCommerce@http://localhost:3021/mf-manifest.json',
-    identity:
-      process.env['REMOTE_IDENTITY_MF_MANIFEST'] ??
-      'remoteIdentity@http://localhost:3022/mf-manifest.json',
     designSystem:
       process.env['REMOTE_DESIGN_SYSTEM_MF_MANIFEST'] ??
       'remoteDesignSystem@http://localhost:3023/mf-manifest.json',
+    identity:
+      process.env['REMOTE_IDENTITY_MF_MANIFEST'] ??
+      'remoteIdentity@http://localhost:3022/mf-manifest.json',
   },
-  shared: {
-    react: {
-      singleton: true,
-      requiredVersion: reactVersion,
-      treeShaking: false,
-    },
-    'react-dom': {
-      singleton: true,
-      requiredVersion: reactDomVersion,
-      treeShaking: false,
-    },
-    '@tanstack/react-router': {
-      singleton: true,
-      requiredVersion: dependencies['@tanstack/react-router'],
-      treeShaking: false,
-    },
-    '@modern-js/runtime': {
-      singleton: true,
-      requiredVersion: runtimeVersion,
-      treeShaking: false,
-    },
-  },
+${createSharedModuleFederationConfig()},
 });
 `;
 }
 function createRemoteModuleFederationConfig(app) {
-    const exposes = JSON.stringify(app.exposes ?? {}, null, 4).replace(/^/gm, '  ');
+    const exposes = formatTsObjectLiteral(app.exposes ?? {});
     return `// @effect-diagnostics nodeBuiltinImport:off
 import { createRequire } from 'node:module';
 import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 import { dependencies } from './package.json';
 
 const require = createRequire(import.meta.url);
-const runtimeVersion = (
-  require('@modern-js/runtime/package.json') as { version: string }
-).version;
-const reactVersion = (require('react/package.json') as { version: string })
-  .version;
-const reactDomVersion = (
-  require('react-dom/package.json') as { version: string }
-).version;
+const runtimeVersion = (require('@modern-js/runtime/package.json') as { version: string }).version;
+const reactVersion = (require('react/package.json') as { version: string }).version;
+const reactDomVersion = (require('react-dom/package.json') as { version: string }).version;
 
 export default createModuleFederationConfig({
-  name: '${app.mfName}',
   dts: false,
-  filename: 'remoteEntry.js',
   exposes: ${exposes},
-  shared: {
-    react: {
-      singleton: true,
-      requiredVersion: reactVersion,
-      treeShaking: false,
-    },
-    'react-dom': {
-      singleton: true,
-      requiredVersion: reactDomVersion,
-      treeShaking: false,
-    },
-    '@tanstack/react-router': {
-      singleton: true,
-      requiredVersion: dependencies['@tanstack/react-router'],
-      treeShaking: false,
-    },
-    '@modern-js/runtime': {
-      singleton: true,
-      requiredVersion: runtimeVersion,
-      treeShaking: false,
-    },
-  },
+  filename: 'remoteEntry.js',
+  name: '${app.mfName}',
+${createSharedModuleFederationConfig()},
 });
 `;
 }
@@ -1296,19 +1281,19 @@ const port = Number(process.env['${effectService.portEnv}'] ?? ${effectService.p
 export default defineConfig(
   presetUltramodern(
     {
-      server: {
-        port,
-      },
       bff: {
-        prefix: '/recommendations-api',
-        runtimeFramework: 'effect',
         effect: {
           openapi: {
             path: '/openapi.json',
           },
         },
+        prefix: '/recommendations-api',
+        runtimeFramework: 'effect',
       },
       plugins: [appTools(), bffPlugin()],
+      server: {
+        port,
+      },
     },
     {
       appId,
@@ -1320,21 +1305,64 @@ export default defineConfig(
 );
 `;
 }
+function createAppRuntimeConfig() {
+    return `import { defineRuntimeConfig } from '@modern-js/runtime';
+import { createInstance } from 'i18next';
+
+const i18nInstance = createInstance();
+
+export default defineRuntimeConfig({
+  i18n: {
+    i18nInstance,
+    initOptions: {
+      defaultNS: 'translation',
+      fallbackLng: 'en',
+      interpolation: {
+        escapeValue: false,
+      },
+      ns: ['translation'],
+      supportedLngs: ['en', 'cs'],
+    },
+  },
+  router: {
+    framework: 'tanstack',
+  },
+});
+`;
+}
 function createShellPage() {
-    return `const remotes = [
-  'remote-commerce',
-  'remote-identity',
-  'remote-design-system',
-];
+    return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import { useTranslation } from 'react-i18next';
+
+const remotes = ['remote-commerce', 'remote-identity', 'remote-design-system'];
 
 export default function ShellHome() {
+  const { t } = useTranslation();
+  const { changeLanguage, language } = useModernI18n();
+  const languageOptions = [
+    { code: 'en', label: t('language.en') },
+    { code: 'cs', label: t('language.cs') },
+  ];
+
   return (
     <main>
-      <h1>UltraModern SuperApp Shell</h1>
-      <p data-testid="ultramodern-preset">presetUltramodern workspace</p>
+      <nav aria-label={t('language.switcher')}>
+        {languageOptions.map((option) => (
+          <button
+            disabled={language === option.code}
+            key={option.code}
+            onClick={() => void changeLanguage(option.code)}
+            type="button"
+          >
+            {option.label}
+          </button>
+        ))}
+      </nav>
+      <h1>{t('shell.title')}</h1>
+      <p data-testid="ultramodern-preset">{t('shell.preset')}</p>
       <ul>
-        {remotes.map(remote => (
-          <li key={remote}>{remote}</li>
+        {remotes.map((remote) => (
+          <li key={remote}>{t(\`shell.remotes.\${remote}\`)}</li>
         ))}
       </ul>
     </main>
@@ -1343,11 +1371,15 @@ export default function ShellHome() {
 `;
 }
 function createRemotePage(app) {
-    return `export default function ${toPascalCase(app.id)}Home() {
+    return `import { useTranslation } from 'react-i18next';
+
+export default function ${toPascalCase(app.id)}Home() {
+  const { t } = useTranslation();
+
   return (
     <main>
-      <h1>${app.displayName}</h1>
-      <p data-mf-role="${app.kind}">${app.domain ?? app.kind}</p>
+      <h1>{t('remote.title')}</h1>
+      <p data-mf-role="${app.kind}">{t('remote.domain')}</p>
     </main>
   );
 }
@@ -1362,17 +1394,21 @@ export default function Layout({ children }: { children: ReactNode }) {
 `;
 }
 function createRemoteEntry(app) {
-    const componentName = 'remote-identity' === app.id ? 'IdentityWidget' : 'CommerceWidget';
-    return `export { default } from './components/${componentName}';
+    const componentFile = 'remote-identity' === app.id ? 'identity-widget' : 'commerce-widget';
+    return `export { default } from './components/${componentFile}';
 `;
 }
 function createRemoteWidget(app) {
     const componentName = 'remote-identity' === app.id ? 'IdentityWidget' : 'CommerceWidget';
-    return `export default function ${componentName}() {
+    return `import { useTranslation } from 'react-i18next';
+
+export default function ${componentName}() {
+  const { t } = useTranslation();
+
   return (
     <section data-mf-remote="${app.id}">
-      <h2>${app.displayName}</h2>
-      <p>Owns the ${app.domain} vertical route surface.</p>
+      <h2>{t('remote.widget.title')}</h2>
+      <p>{t('remote.widget.body')}</p>
     </section>
   );
 }
@@ -1381,7 +1417,7 @@ function createRemoteWidget(app) {
 function createDesignButton() {
     return `import { designTokens } from '../tokens';
 
-export default function Button({ label = 'Design System Button' }: { label?: string }) {
+export default function Button({ label }: { label: string }) {
   return (
     <button
       type="button"
@@ -1399,8 +1435,8 @@ export default function Button({ label = 'Design System Button' }: { label?: str
 function createDesignTokens() {
     return `export const designTokens = {
   color: {
-    foreground: '#133225',
     accent: '#2f8f68',
+    foreground: '#133225',
   },
   radius: {
     control: '999px',
@@ -1408,6 +1444,62 @@ function createDesignTokens() {
 } as const;
 `;
 }
+function createEnglishTranslations(app) {
+    if ('shell' === app.kind) return {
+        language: {
+            cs: 'Czech',
+            en: 'English',
+            switcher: 'Language'
+        },
+        shell: {
+            preset: 'presetUltramodern workspace',
+            remotes: {
+                'remote-commerce': 'Commerce Remote',
+                'remote-design-system': 'Design System Remote',
+                'remote-identity': 'Identity Remote'
+            },
+            title: 'UltraModern SuperApp Shell'
+        }
+    };
+    return {
+        remote: {
+            domain: app.domain ?? app.kind,
+            title: app.displayName,
+            widget: {
+                body: 'vertical' === app.kind ? `Owns the ${app.domain} vertical route surface.` : 'Provides shared UI primitives for the workspace.',
+                title: app.displayName
+            }
+        }
+    };
+}
+function createCzechTranslations(app) {
+    if ('shell' === app.kind) return {
+        language: {
+            cs: 'Cestina',
+            en: 'Anglictina',
+            switcher: 'Jazyk'
+        },
+        shell: {
+            preset: 'presetUltramodern workspace',
+            remotes: {
+                'remote-commerce': 'Commerce remote',
+                'remote-design-system': 'Design system remote',
+                'remote-identity': 'Identity remote'
+            },
+            title: 'UltraModern SuperApp shell'
+        }
+    };
+    return {
+        remote: {
+            domain: app.domain ?? app.kind,
+            title: app.displayName,
+            widget: {
+                body: 'vertical' === app.kind ? `Vlastni ${app.domain} vertical route surface.` : 'Poskytuje sdilene UI prvky pro workspace.',
+                title: app.displayName
+            }
+        }
+    };
+}
 function createEffectSharedApi() {
     return `import {
   HttpApi,
@@ -1421,9 +1513,7 @@ const recommendationSchema = Schema.Struct({
   title: Schema.String,
 });
 
-export const recommendationsEffectApi = HttpApi.make(
-  'RecommendationsEffectApi',
-).add(
+export const recommendationsEffectApi = HttpApi.make('RecommendationsEffectApi').add(
   HttpApiGroup.make('recommendations').add(
     HttpApiEndpoint.get('list', '/effect/recommendations', {
       success: Schema.Struct({
@@ -1446,7 +1536,7 @@ import { recommendationsEffectApi } from '../../shared/effect/api';
 const recommendationsLayer = HttpApiBuilder.group(
   recommendationsEffectApi,
   'recommendations',
-  handlers =>
+  (handlers) =>
     handlers.handle('list', () =>
       Effect.succeed({
         items: [
@@ -1749,16 +1839,19 @@ function writeApp(targetDir, scope, app, packageSource) {
     writeJson(targetDir, `${app.directory}/tsconfig.json`, createPackageTsConfig(app.directory));
     writeFile(targetDir, `${app.directory}/src/modern-app-env.d.ts`, "/// <reference types='@modern-js/app-tools/types' />\n");
     writeFile(targetDir, `${app.directory}/modern.config.ts`, createAppModernConfig(app));
+    writeFile(targetDir, `${app.directory}/src/modern.runtime.ts`, createAppRuntimeConfig());
+    writeJson(targetDir, `${app.directory}/config/public/locales/en/translation.json`, createEnglishTranslations(app));
+    writeJson(targetDir, `${app.directory}/config/public/locales/cs/translation.json`, createCzechTranslations(app));
     writeFile(targetDir, `${app.directory}/module-federation.config.ts`, 'shell' === app.kind ? createShellModuleFederationConfig() : createRemoteModuleFederationConfig(app));
     writeFile(targetDir, `${app.directory}/src/routes/layout.tsx`, createLayout(app.id));
     writeFile(targetDir, `${app.directory}/src/routes/page.tsx`, 'shell' === app.kind ? createShellPage() : createRemotePage(app));
     if ('vertical' === app.kind) {
         writeFile(targetDir, `${app.directory}/src/remote-entry.tsx`, createRemoteEntry(app));
-        const widgetFile = 'remote-identity' === app.id ? 'IdentityWidget.tsx' : 'CommerceWidget.tsx';
+        const widgetFile = 'remote-identity' === app.id ? 'identity-widget.tsx' : 'commerce-widget.tsx';
         writeFile(targetDir, `${app.directory}/src/components/${widgetFile}`, createRemoteWidget(app));
     }
     if ('horizontal-design-system' === app.kind) {
-        writeFile(targetDir, `${app.directory}/src/components/Button.tsx`, createDesignButton());
+        writeFile(targetDir, `${app.directory}/src/components/button.tsx`, createDesignButton());
         writeFile(targetDir, `${app.directory}/src/tokens.ts`, createDesignTokens());
     }
 }
@@ -1785,27 +1878,27 @@ function writeSharedPackages(targetDir, scope) {
         });
     }
     writeFile(targetDir, 'packages/shared-contracts/src/index.ts', `export const ultramodernWorkspaceContract = {
+  ownership: 'topology/ownership.json',
   preset: 'presetUltramodern',
   topology: 'topology/reference-topology.json',
-  ownership: 'topology/ownership.json',
 } as const;
 `);
     writeFile(targetDir, 'packages/shared-design-tokens/src/index.ts', `export const sharedDesignTokens = {
   color: {
-    surface: '#f6fbf7',
-    foreground: '#133225',
     accent: '#2f8f68',
+    foreground: '#133225',
+    surface: '#f6fbf7',
   },
 } as const;
 `);
-    writeFile(targetDir, 'packages/shared-effect-api/src/index.ts', `export type Recommendation = {
+    writeFile(targetDir, 'packages/shared-effect-api/src/index.ts', `export interface Recommendation {
   id: string;
   title: string;
-};
+}
 
 export const recommendationsApiContract = {
-  serviceId: '${effectService.id}',
   basePath: '/recommendations-api/effect/recommendations',
+  serviceId: '${effectService.id}',
 } as const;
 `);
 }
@@ -1820,7 +1913,7 @@ function generateUltramodernWorkspace(options) {
         packageScope: scope
     });
     writeJson(options.targetDir, 'package.json', createRootPackageJson(scope, packageSource));
-    writeJson(options.targetDir, 'tsconfig.base.json', createTsConfigBase(scope));
+    writeJson(options.targetDir, 'tsconfig.base.json', createTsConfigBase());
     writeJson(options.targetDir, 'topology/reference-topology.json', createTopology(scope));
     writeJson(options.targetDir, 'topology/ownership.json', createOwnership(scope));
     writeJson(options.targetDir, 'topology/local-overlays/development.json', createDevelopmentOverlay());
@@ -1904,7 +1997,7 @@ function detectBffRuntime() {
     process.exit(1);
 }
 function src_renderTemplate(template, data) {
-    const tagRegex = /\{\{(#if|#unless|\/if|\/unless)(?:\s+(\w+))?\}\}/g;
+    const tagRegex = /\{\{(~?)(#if|#unless|\/if|\/unless)(?:\s+(\w+))?(~?)\}\}/g;
     function renderConditionals(startIndex, expectedClose) {
         let rendered = '';
         let cursor = startIndex;
@@ -1915,7 +2008,7 @@ function src_renderTemplate(template, data) {
                 rendered: rendered + template.slice(cursor),
                 nextIndex: template.length
             };
-            const [raw, tag, condition] = match;
+            const [raw, , tag, condition, rightTrim] = match;
             const tagIndex = match.index;
             rendered += template.slice(cursor, tagIndex);
             cursor = tagIndex + raw.length;
@@ -1931,10 +2024,17 @@ function src_renderTemplate(template, data) {
             }
             if ('/if' === tag || '/unless' === tag) {
                 const kind = '/if' === tag ? 'if' : 'unless';
-                if (expectedClose === kind) return {
-                    rendered,
-                    nextIndex: cursor
-                };
+                if (expectedClose === kind) {
+                    let nextIndex = cursor;
+                    if ('~' === rightTrim) {
+                        const trailingWhitespace = /^\s*/u.exec(template.slice(nextIndex));
+                        nextIndex += trailingWhitespace?.[0].length ?? 0;
+                    }
+                    return {
+                        rendered,
+                        nextIndex
+                    };
+                }
                 rendered += raw;
             }
         }
@@ -2023,6 +2123,7 @@ function createBuiltinTemplateManifest(version) {
                 'AGENTS.md',
                 'README.md',
                 'api/**',
+                'config/**',
                 'modern.config.ts',
                 'oxfmt.config.ts',
                 'oxlint.config.ts',
@@ -2417,6 +2518,7 @@ async function main() {
         tsconfigVersion: singleAppModernPackageSpecifier('@modern-js/tsconfig', packageSource, useWorkspaceProtocol),
         pluginTanstackVersion: singleAppModernPackageSpecifier('@modern-js/plugin-tanstack', packageSource, useWorkspaceProtocol),
         pluginBffVersion: singleAppModernPackageSpecifier('@modern-js/plugin-bff', packageSource, useWorkspaceProtocol),
+        pluginI18nVersion: singleAppModernPackageSpecifier('@modern-js/plugin-i18n', packageSource, useWorkspaceProtocol),
         isSubproject,
         routerFramework,
         bffRuntime,
@@ -2496,6 +2598,7 @@ function copyTemplate(src, dest, options) {
                     tsconfigVersion: options.tsconfigVersion,
                     pluginTanstackVersion: options.pluginTanstackVersion,
                     pluginBffVersion: options.pluginBffVersion,
+                    pluginI18nVersion: options.pluginI18nVersion,
                     isSubproject: options.isSubproject,
                     isTanstackRouter: 'tanstack' === options.routerFramework,
                     enableBff: 'none' !== options.bffRuntime,