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

package/dist/index.js

@@ -2910,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) {
@@ -3242,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.45",
+  "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.45"
+    "@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.45"
+    "frameworkVersion": "3.2.0-ultramodern.46"
   }
 }