@bleedingdev/modern-js-create 3.2.0-ultramodern.44 → 3.2.0-ultramodern.46

package/dist/index.js

@@ -1559,6 +1559,16 @@ ${bffPluginEntry}        moduleFederationPlugin(),
 }
 function createSharedModuleFederationConfig() {
     return `  shared: {
+    '@modern-js/plugin-i18n/runtime': {
+      requiredVersion: pluginI18nVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@modern-js/plugin-tanstack/runtime': {
+      requiredVersion: pluginTanstackVersion,
+      singleton: true,
+      treeShaking: false,
+    },
     '@modern-js/runtime': {
       requiredVersion: runtimeVersion,
       singleton: true,
@@ -1620,6 +1630,8 @@ import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 import { dependencies } from './package.json';
 
 const require = createRequire(import.meta.url);
+const pluginI18nVersion = (require('@modern-js/plugin-i18n/package.json') as { version: string }).version;
+const pluginTanstackVersion = (require('@modern-js/plugin-tanstack/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;
@@ -1672,6 +1684,8 @@ import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 import { dependencies } from './package.json';
 
 const require = createRequire(import.meta.url);
+const pluginI18nVersion = (require('@modern-js/plugin-i18n/package.json') as { version: string }).version;
+const pluginTanstackVersion = (require('@modern-js/plugin-tanstack/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;
@@ -2896,40 +2910,55 @@ 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');
+    return `import { createLazyComponent } from '@module-federation/modern-js-v3/react';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
+
+const remoteFallback =
+  ({ error }: { error: Error }) =>
+    <div data-remote-error={error.name}>Remote unavailable</div>;
+
+export const Header = createLazyComponent({
+  export: 'default',
+  fallback: remoteFallback,
+  instance: getInstance(),
+  loader: () => import('explore/Header'),
+  loading: null,
+});
+export const StorePicker = createLazyComponent({
+  export: 'default',
+  fallback: remoteFallback,
+  instance: getInstance(),
+  loader: () => import('explore/StorePicker'),
+  loading: null,
+});
+export const Recommendations = createLazyComponent({
+  export: 'default',
+  fallback: remoteFallback,
+  instance: getInstance(),
+  loader: () => import('explore/Recommendations'),
+  loading: null,
+});
+export const ProductPage = createLazyComponent({
+  export: 'default',
+  fallback: remoteFallback,
+  instance: getInstance(),
+  loader: () => import('decide/ProductPage'),
+  loading: null,
+});
+export const MiniCart = createLazyComponent({
+  export: 'default',
+  fallback: remoteFallback,
+  instance: getInstance(),
+  loader: () => import('checkout/MiniCart'),
+  loading: null,
+});
+export const CartPage = createLazyComponent({
+  export: 'default',
+  fallback: remoteFallback,
+  instance: getInstance(),
+  loader: () => import('checkout/CartPage'),
+  loading: null,
+});
 `;
 }
 function createRemotePage(app) {
@@ -3228,36 +3257,27 @@ 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');
+    return `import { createLazyComponent } from '@module-federation/modern-js-v3/react';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
+
+const remoteFallback =
+  ({ error }: { error: Error }) =>
+    <div data-remote-error={error.name}>Remote unavailable</div>;
+
+export const AddToCart = createLazyComponent({
+  export: 'default',
+  fallback: remoteFallback,
+  instance: getInstance(),
+  loader: () => import('checkout/AddToCart'),
+  loading: null,
+});
+export const Recommendations = createLazyComponent({
+  export: 'default',
+  fallback: remoteFallback,
+  instance: getInstance(),
+  loader: () => import('explore/Recommendations'),
+  loading: null,
+});
 `;
 }
 function remoteComponentOutputPath(app, expose) {

package/package.json

@@ -21,7 +21,7 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "3.2.0-ultramodern.44",
+  "version": "3.2.0-ultramodern.46",
   "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.44"
+    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.46"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -54,6 +54,6 @@
     "start": "node ./dist/index.js"
   },
   "ultramodern": {
-    "frameworkVersion": "3.2.0-ultramodern.44"
+    "frameworkVersion": "3.2.0-ultramodern.46"
   }
 }