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

package/dist/cjs/ultramodern-workspace/contracts.cjs

@@ -719,6 +719,7 @@ function createTemplateManifest(modernVersion, packageSource) {
                 'pnpm-workspace.yaml',
                 "scripts/**",
                 'topology/**',
+                'tsconfig.json',
                 'tsconfig.base.json'
             ],
             deniedPaths: [
@@ -783,6 +784,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/cjs/ultramodern-workspace/demo-components.cjs

@@ -49,8 +49,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>
@@ -123,8 +122,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: '${external_descriptors_cjs_namespaceObject.shellApp.id}',
@@ -206,8 +204,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="${external_descriptors_cjs_namespaceObject.shellApp.mfName}" data-modern-mf-expose="shell/Header">
@@ -217,8 +214,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')}">
@@ -228,8 +224,7 @@ export const StatusBadge = () => {
 };
 
 export const VerticalShowcase = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { t } = useModernI18n();
 
   if (widgetCount === 0) {
     return (
@@ -296,8 +291,7 @@ import { ultramodernUiMarker } from '../../ultramodern-build';
 ` : '';
     return `${effectBffImport}
 export default function ${(0, external_naming_cjs_namespaceObject.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 />
@@ -343,8 +337,7 @@ function createRemoteEntry(app) {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 
 export default function ${(0, external_naming_cjs_namespaceObject.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">
@@ -362,8 +355,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">
@@ -382,8 +374,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/contracts.js

@@ -668,6 +668,7 @@ function createTemplateManifest(modernVersion, packageSource) {
                 'pnpm-workspace.yaml',
                 "scripts/**",
                 'topology/**',
+                'tsconfig.json',
                 'tsconfig.base.json'
             ],
             deniedPaths: [
@@ -732,6 +733,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/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}',
@@ -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-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}',
@@ -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}">

package/package.json

@@ -21,7 +21,7 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "3.4.0-ultramodern.2",
+  "version": "3.4.0-ultramodern.3",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/esm-node/index.js",
   "bin": {
@@ -75,7 +75,7 @@
   ],
   "dependencies": {
     "@modern-js/codesmith": "2.6.9",
-    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.4.0-ultramodern.2"
+    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.4.0-ultramodern.3"
   },
   "devDependencies": {
     "@rslib/core": "0.23.0",
@@ -97,6 +97,6 @@
     "test": "rm -rf dist && rslib build -c rslibconfig.mts && rstest --passWithNoTests"
   },
   "ultramodern": {
-    "frameworkVersion": "3.4.0-ultramodern.2"
+    "frameworkVersion": "3.4.0-ultramodern.3"
   }
 }

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

@@ -14,6 +14,14 @@ minimumReleaseAgeExclude:
   - '@typescript/native-preview'
   - '@typescript/native-preview-*'
   - '@types/react'
+  - '@rsbuild/core'
+  - '@rsbuild/plugin-react'
+  - '@rsbuild/plugin-type-check'
+  - '@rspack/binding'
+  - '@rspack/binding-*'
+  - '@rspack/core'
+  - '@rspack/plugin-react-refresh'
+  - 'ts-checker-rspack-plugin'
 trustPolicy: no-downgrade
 trustPolicyIgnoreAfter: 1440
 blockExoticSubdeps: true

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

@@ -20,13 +20,30 @@ const cloneTimeoutMs = Number.parseInt(
 
 const readJson = filePath => JSON.parse(fs.readFileSync(filePath, 'utf-8'));
 
-const run = (command, args, options = {}) =>
-  execFileSync(command, args, {
+const commandOverrideEnv = {
+  gh: 'ULTRAMODERN_GH_BIN',
+  git: 'ULTRAMODERN_GIT_BIN',
+  lefthook: 'ULTRAMODERN_LEFTHOOK_BIN',
+};
+
+const resolveCommand = command => {
+  const overrideEnv = commandOverrideEnv[command];
+  return overrideEnv ? (process.env[overrideEnv] ?? command) : command;
+};
+
+const requiresCommandShell = command =>
+  process.platform === 'win32' && /\.(?:bat|cmd)$/iu.test(command);
+
+const run = (command, args, options = {}) => {
+  const resolvedCommand = resolveCommand(command);
+  return execFileSync(resolvedCommand, args, {
     cwd: options.cwd ?? root,
     encoding: 'utf-8',
+    shell: requiresCommandShell(resolvedCommand),
     stdio: options.stdio ?? ['ignore', 'pipe', 'pipe'],
     timeout: options.timeout,
   });
+};
 
 const commandExists = command => {
   try {

package/templates/app/shell-frame.tsx

@@ -7,8 +7,7 @@ interface ShellFrameProps {
 }
 
 export default function ShellFrame({ children }: ShellFrameProps) {
-  const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { language, t } = useModernI18n();
   const { alternates } = useLocalizedLocation();
 
   return (

package/templates/app/ultramodern-route-head.tsx.handlebars

@@ -104,8 +104,7 @@ const sanitiseJsonLd = (value: RouteJsonLd) =>
   JSON.stringify(value).replaceAll('<', '\\u003c');
 
 export const UltramodernRouteHead = () => {
-  const { i18nInstance } = useModernI18n();
-  const t = i18nInstance['t'].bind(i18nInstance);
+  const { language, t } = useModernI18n();
   const { canonical, alternates } = useLocalizedLocation();
   const route = resolveRouteMetadata(canonical);
   const title = route === undefined ? appName : t(route.titleKey);
@@ -116,7 +115,7 @@ export const UltramodernRouteHead = () => {
   const jsonLd = route?.jsonLd;
 
   return (
-    <Helmet htmlAttributes={{ lang: i18nInstance.language ?? fallbackLanguage }}>
+    <Helmet htmlAttributes={{ lang: language ?? fallbackLanguage }}>
       <title>{title}</title>
       <meta content={description} name="description" />
       <meta content={indexable ? 'index, follow' : 'noindex, nofollow'} name="robots" />
@@ -140,7 +139,7 @@ export const UltramodernRouteHead = () => {
           <meta content={description} property="og:description" />
           <meta content={canonicalUrl} property="og:url" />
           <meta content="website" property="og:type" />
-          <meta content={i18nInstance.language ?? fallbackLanguage} property="og:locale" />
+          <meta content={language ?? fallbackLanguage} property="og:locale" />
           <meta content="summary_large_image" name="twitter:card" />
           <meta content={title} name="twitter:title" />
           <meta content={description} name="twitter:description" />

package/templates/workspace-scripts/validate-ultramodern-workspace.mjs.handlebars

@@ -390,6 +390,67 @@ const assertMicroVerticalContractGraph = ({
     );
   }
 };
+const toPosixPath = value => value.split(path.sep).join('/');
+const referenceFrom = (fromPath, toPath) => ({
+  path: toPosixPath(path.relative(fromPath, toPath)),
+});
+const sharedPackagePaths = [
+  'packages/shared-contracts',
+  'packages/shared-design-tokens',
+];
+const assertTsConfigReferenceGraph = () => {
+  const rootTsConfig = readJson('tsconfig.json');
+  const shellTsConfig = readJson('apps/shell-super-app/tsconfig.json');
+  const expectedRootReferences = [
+    ...sharedPackagePaths,
+    'apps/shell-super-app',
+    ...fullStackVerticals.map(vertical => vertical.path),
+  ].map(referencePath => ({ path: referencePath }));
+  const expectedShellReferences = [
+    ...sharedPackagePaths,
+    ...fullStackVerticals.map(vertical => vertical.path),
+  ].map(referencePath =>
+    referenceFrom('apps/shell-super-app', referencePath),
+  );
+
+  assertSameJson(
+    rootTsConfig.files,
+    [],
+    'tsconfig.json files',
+    'restore the generated root project-reference tsconfig',
+  );
+  assertSameJson(
+    rootTsConfig.references ?? [],
+    expectedRootReferences,
+    'tsconfig.json references',
+    'restore the generated root project-reference graph',
+  );
+  assertSameJson(
+    shellTsConfig.references ?? [],
+    expectedShellReferences,
+    'apps/shell-super-app/tsconfig.json references',
+    'restore the generated shell project-reference graph',
+  );
+
+  for (const vertical of fullStackVerticals) {
+    const verticalTsConfig = readJson(`${vertical.path}/tsconfig.json`);
+    const expectedVerticalReferences = [
+      ...sharedPackagePaths,
+      ...(vertical.verticalRefs ?? [])
+        .map(verticalRef =>
+          fullStackVerticals.find(candidate => candidate.id === verticalRef),
+        )
+        .filter(Boolean)
+        .map(referencedVertical => referencedVertical.path),
+    ].map(referencePath => referenceFrom(vertical.path, referencePath));
+    assertSameJson(
+      verticalTsConfig.references ?? [],
+      expectedVerticalReferences,
+      `${vertical.path}/tsconfig.json references`,
+      'restore the generated MicroVertical project-reference graph',
+    );
+  }
+};
 const packageJsonFiles = startDir => {
   const files = [];
   const queue = [startDir];
@@ -734,6 +795,7 @@ assertMicroVerticalContractGraph({
   overlay,
   shellPackage,
 });
+assertTsConfigReferenceGraph();
 
 assert(rootPackage.private === true, 'Root package must be private');
 assert(typeof rootPackage.packageManager === 'string', 'Root must declare packageManager');