@bleedingdev/modern-js-create 3.2.0-ultramodern.38 → 3.2.0-ultramodern.39

package/dist/index.js

@@ -2712,10 +2712,8 @@ function createShellPage() {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 import { Helmet } from '@modern-js/runtime/head';
 import { useLocation } from '@modern-js/plugin-tanstack/runtime';
-import Header from 'explore/Header';
-import StorePicker from 'explore/StorePicker';
-import MiniCart from 'checkout/MiniCart';
 import { ultramodernLocalisedUrls } from '../ultramodern-route-metadata';
+import { Header, MiniCart, StorePicker } from '../remote-components';
 import { ultramodernUiMarker } from '../../ultramodern-build';
 
 const languageCodes = ['en', 'cs'] as const;
@@ -2723,7 +2721,7 @@ const languageCodes = ['en', 'cs'] as const;
 ${createLocalizedHeadComponent()}
 export default function ShellHome() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
 
@@ -2773,17 +2771,15 @@ function createShellTractorsPage() {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 import { Helmet } from '@modern-js/runtime/head';
 import { useLocation } from '@modern-js/plugin-tanstack/runtime';
-import Header from 'explore/Header';
-import Recommendations from 'explore/Recommendations';
-import MiniCart from 'checkout/MiniCart';
 import { ultramodernLocalisedUrls } from '../../ultramodern-route-metadata';
+import { Header, MiniCart, Recommendations } from '../../remote-components';
 
 const languageCodes = ['en', 'cs'] as const;
 
 ${createLocalizedHeadComponent()}
 export default function ShellTractorsPage() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
 
@@ -2816,17 +2812,15 @@ function createShellProductPage() {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 import { Helmet } from '@modern-js/runtime/head';
 import { useLocation } from '@modern-js/plugin-tanstack/runtime';
-import Header from 'explore/Header';
-import ProductPage from 'decide/ProductPage';
-import MiniCart from 'checkout/MiniCart';
 import { ultramodernLocalisedUrls } from '../../../ultramodern-route-metadata';
+import { Header, MiniCart, ProductPage } from '../../../remote-components';
 
 const languageCodes = ['en', 'cs'] as const;
 
 ${createLocalizedHeadComponent()}
 export default function ShellProductPage() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
 
@@ -2859,16 +2853,15 @@ function createShellCartPage() {
     return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 import { Helmet } from '@modern-js/runtime/head';
 import { useLocation } from '@modern-js/plugin-tanstack/runtime';
-import Header from 'explore/Header';
-import CartPage from 'checkout/CartPage';
 import { ultramodernLocalisedUrls } from '../../ultramodern-route-metadata';
+import { CartPage, Header } from '../../remote-components';
 
 const languageCodes = ['en', 'cs'] as const;
 
 ${createLocalizedHeadComponent()}
 export default function ShellCartPage() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
 
@@ -2896,6 +2889,43 @@ export default function ShellCartPage() {
 }
 `;
 }
+function createShellRemoteComponents() {
+    return `import { loadRemote } from '@module-federation/modern-js-v3/runtime';
+import * as React from 'react';
+
+type RemoteComponent = React.ComponentType<Record<string, never>>;
+
+const lazyRemote = (moduleId: string) => {
+  const Component = React.lazy(async () => {
+    const module = await loadRemote(moduleId);
+    const remote = (module as { default?: unknown }).default;
+
+    if (typeof remote !== 'function') {
+      throw new Error(\`Remote "\${moduleId}" did not expose a React component.\`);
+    }
+
+    return {
+      default: remote as RemoteComponent,
+    };
+  });
+
+  return function RemoteComponent() {
+    return (
+      <React.Suspense fallback={null}>
+        <Component />
+      </React.Suspense>
+    );
+  };
+};
+
+export const Header = lazyRemote('explore/Header');
+export const StorePicker = lazyRemote('explore/StorePicker');
+export const Recommendations = lazyRemote('explore/Recommendations');
+export const ProductPage = lazyRemote('decide/ProductPage');
+export const MiniCart = lazyRemote('checkout/MiniCart');
+export const CartPage = lazyRemote('checkout/CartPage');
+`;
+}
 function createRemotePage(app) {
     const effectBffImport = appHasEffectApi(app) ? `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
 import { Helmet } from '@modern-js/runtime/head';
@@ -2934,7 +2964,7 @@ import { ultramodernUiMarker } from '../../ultramodern-build';
 ${createLocalizedHeadComponent()}
 export default function ${toPascalCase(app.id)}Home() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
 ${effectBffState}  return (
@@ -3007,7 +3037,7 @@ function createRemoteExposeComponent(app, expose) {
 
 export default function Header() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
 
   return (
     <header className="commerce-header" data-mf-boundary="explore">
@@ -3031,7 +3061,7 @@ const tractors = [
 
 export default function Recommendations() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
 
   return (
     <section className="commerce-page" data-mf-boundary="explore">
@@ -3052,7 +3082,7 @@ export default function Recommendations() {
 
 export default function StorePicker() {
   const { i18nInstance } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
 
   return (
     <section className="commerce-page" data-mf-boundary="explore">
@@ -3078,12 +3108,11 @@ export default function StorePicker() {
     if ('./Widget' === expose) return createRemoteWidget(app);
     const componentName = `${toPascalCase(app.domain ?? app.id)}${toPascalCase(expose.replace(/^\.\//u, ''))}`;
     if ('remote-decide' === app.id && './ProductPage' === expose) return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
-import AddToCart from 'checkout/AddToCart';
-import Recommendations from 'explore/Recommendations';
+import { AddToCart, Recommendations } from './remote-components';
 
 export default function ${componentName}() {
   const { i18nInstance } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
 
   return (
     <>
@@ -3111,7 +3140,7 @@ import { useCartLines } from '../cart-store';
 
 export default function ${componentName}() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
   const cart = useCartLines();
 
   return (
@@ -3131,7 +3160,7 @@ import { useCartLines } from '../cart-store';
 
 export default function ${componentName}() {
   const { i18nInstance, language } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
   const cart = useCartLines();
   const count = cart.lines.reduce((sum, line) => sum + line.quantity, 0);
 
@@ -3147,7 +3176,7 @@ import { useCartLines } from '../cart-store';
 
 export default function ${componentName}() {
   const { i18nInstance } = useModernI18n();
-  const t = i18nInstance.t.bind(i18nInstance);
+  const t = i18nInstance['t'].bind(i18nInstance);
   const cart = useCartLines();
 
   return (
@@ -3192,6 +3221,39 @@ export default function ${componentName}() {
 }
 `;
 }
+function createDecideRemoteComponents() {
+    return `import { loadRemote } from '@module-federation/modern-js-v3/runtime';
+import * as React from 'react';
+
+type RemoteComponent = React.ComponentType<Record<string, never>>;
+
+const lazyRemote = (moduleId: string) => {
+  const Component = React.lazy(async () => {
+    const module = await loadRemote(moduleId);
+    const remote = (module as { default?: unknown }).default;
+
+    if (typeof remote !== 'function') {
+      throw new Error(\`Remote "\${moduleId}" did not expose a React component.\`);
+    }
+
+    return {
+      default: remote as RemoteComponent,
+    };
+  });
+
+  return function RemoteComponent() {
+    return (
+      <React.Suspense fallback={null}>
+        <Component />
+      </React.Suspense>
+    );
+  };
+};
+
+export const AddToCart = lazyRemote('checkout/AddToCart');
+export const Recommendations = lazyRemote('explore/Recommendations');
+`;
+}
 function remoteComponentOutputPath(app, expose) {
     const exposePath = app.exposes?.[expose];
     if (!exposePath?.startsWith('./src/components/')) return;
@@ -5319,6 +5381,7 @@ function writeApp(targetDir, scope, app, packageSource, enableTailwind) {
         for (const routePath of routePaths)if ('/' !== routePath) writeFile(targetDir, createRoutePageFilePath(app, routePath), createRouteAliasPage(routePath));
     }
     if ('shell' === app.kind) {
+        writeFile(targetDir, `${app.directory}/src/routes/remote-components.tsx`, createShellRemoteComponents());
         writeFile(targetDir, `${app.directory}/src/effect/recommendations-client.ts`, createShellEffectClient(scope));
         writeFile(targetDir, `${app.directory}/src/routes/[lang]/tractors/page.tsx`, createShellTractorsPage());
         writeFile(targetDir, `${app.directory}/src/routes/[lang]/traktory/page.tsx`, createShellTractorsPage());
@@ -5334,6 +5397,7 @@ function writeApp(targetDir, scope, app, packageSource, enableTailwind) {
     }
     if ('vertical' === app.kind || 'horizontal-remote' === app.kind) {
         writeFile(targetDir, `${app.directory}/src/remote-entry.tsx`, createRemoteEntry(app));
+        if ('remote-decide' === app.id) writeFile(targetDir, `${app.directory}/src/components/remote-components.tsx`, createDecideRemoteComponents());
         if ('remote-checkout' === app.id) writeFile(targetDir, `${app.directory}/src/cart-store.ts`, createCheckoutCartStore());
         for (const expose of Object.keys(app.exposes ?? {})){
             const outputPath = remoteComponentOutputPath(app, expose);

package/package.json

@@ -21,7 +21,7 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "3.2.0-ultramodern.38",
+  "version": "3.2.0-ultramodern.39",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/index.js",
   "bin": {
@@ -41,7 +41,7 @@
     "@types/node": "^25.9.1",
     "@typescript/native-preview": "7.0.0-dev.20260527.2",
     "tsx": "^4.22.3",
-    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.38"
+    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.39"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -54,6 +54,6 @@
     "start": "node ./dist/index.js"
   },
   "ultramodern": {
-    "frameworkVersion": "3.2.0-ultramodern.38"
+    "frameworkVersion": "3.2.0-ultramodern.39"
   }
 }

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

@@ -17,6 +17,14 @@ const run = (command, args, options = {}) =>
     stdio: options.stdio ?? ['ignore', 'pipe', 'pipe'],
   });
 
+const removeTree = (dir) =>
+  fs.rmSync(dir, {
+    force: true,
+    maxRetries: 5,
+    recursive: true,
+    retryDelay: 100,
+  });
+
 const cloneSource = (source, targetDir) => {
   const repo = source.repository.replace(/^https:\/\/github.com\//u, '');
   try {
@@ -84,12 +92,12 @@ for (const source of privateSources) {
           console.log(`Skipping existing ${skill.name}`);
           continue;
         }
-        fs.rmSync(targetSkillDir, { force: true, recursive: true });
+        removeTree(targetSkillDir);
       }
       fs.cpSync(sourceSkillDir, targetSkillDir, { recursive: true });
       console.log(`Installed ${skill.name}`);
     }
   } finally {
-    fs.rmSync(tempDir, { force: true, recursive: true });
+    removeTree(tempDir);
   }
 }

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

@@ -17,6 +17,14 @@ const run = (command, args, options = {}) =>
     stdio: options.stdio ?? ['ignore', 'pipe', 'pipe'],
   });
 
+const removeTree = dir =>
+  fs.rmSync(dir, {
+    force: true,
+    maxRetries: 5,
+    recursive: true,
+    retryDelay: 100,
+  });
+
 const cloneSource = (source, targetDir) => {
   const repo = source.repository.replace(/^https:\/\/github.com\//u, '');
   try {
@@ -144,12 +152,12 @@ for (const source of [...requiredCloneSources, ...optionalCloneSources]) {
           console.log(`Skipping existing ${skill.name}`);
           continue;
         }
-        fs.rmSync(targetSkillDir, { force: true, recursive: true });
+        removeTree(targetSkillDir);
       }
       fs.cpSync(sourceSkillDir, targetSkillDir, { recursive: true });
       console.log(`Installed ${skill.name}`);
     }
   } finally {
-    fs.rmSync(tempDir, { force: true, recursive: true });
+    removeTree(tempDir);
   }
 }