@bleedingdev/modern-js-create 3.2.0-ultramodern.49 → 3.2.0-ultramodern.50

package/dist/index.js

@@ -2734,23 +2734,52 @@ 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 { useEffect, useState, type ComponentType } from 'react';
 import { ultramodernLocalisedUrls } from '../ultramodern-route-metadata';
-import { Header, MiniCart, StorePicker } from '../remote-components';
 import { ultramodernUiMarker } from '../../ultramodern-build';
 
 const languageCodes = ['en', 'cs'] as const;
 
 ${createLocalizedHeadComponent()}
+type HomeRouteRemotes = {
+  Header: ComponentType;
+  MiniCart: ComponentType;
+  StorePicker: ComponentType;
+};
+
+const useHomeRouteRemotes = () => {
+  const [remotes, setRemotes] = useState<HomeRouteRemotes | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    import('../remote-components').then(({ Header, MiniCart, StorePicker }) => {
+      if (mounted) {
+        setRemotes({ Header, MiniCart, StorePicker });
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return remotes;
+};
+
 export default function ShellHome() {
   const { i18nInstance, language } = useModernI18n();
   const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
+  const remotes = useHomeRouteRemotes();
+  const Header = remotes?.Header;
+  const MiniCart = remotes?.MiniCart;
+  const StorePicker = remotes?.StorePicker;
 
   return (
     <main className="commerce-shell">
       <LocalizedHead />
-      <Header />
+      {Header ? <Header /> : null}
       <div className="commerce-shell-actions">
         <nav aria-label={t('shell.language.switcher')} className="commerce-language">
           {languageCodes.map(code => (
@@ -2764,7 +2793,7 @@ export default function ShellHome() {
             </a>
           ))}
         </nav>
-        <MiniCart />
+        {MiniCart ? <MiniCart /> : null}
       </div>
       <section className="commerce-page commerce-hero">
         <p className="commerce-eyebrow">{t('shell.hero.eyebrow')}</p>
@@ -2779,7 +2808,7 @@ export default function ShellHome() {
           </a>
         </div>
       </section>
-      <StorePicker />
+      {StorePicker ? <StorePicker /> : null}
       <p data-testid="ultramodern-preset">presetUltramodern workspace</p>
       <p data-build-marker={ultramodernUiMarker.build} data-testid="ultramodern-ui-marker">
         {ultramodernUiMarker.appId}:{ultramodernUiMarker.version}
@@ -2793,22 +2822,51 @@ 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 { useEffect, useState, type ComponentType } from 'react';
 import { ultramodernLocalisedUrls } from '../../ultramodern-route-metadata';
-import { Header, MiniCart, Recommendations } from '../../remote-components';
 
 const languageCodes = ['en', 'cs'] as const;
 
 ${createLocalizedHeadComponent()}
+type TractorsRouteRemotes = {
+  Header: ComponentType;
+  MiniCart: ComponentType;
+  Recommendations: ComponentType;
+};
+
+const useTractorsRouteRemotes = () => {
+  const [remotes, setRemotes] = useState<TractorsRouteRemotes | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    import('../../remote-components').then(({ Header, MiniCart, Recommendations }) => {
+      if (mounted) {
+        setRemotes({ Header, MiniCart, Recommendations });
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return remotes;
+};
+
 export default function ShellTractorsPage() {
   const { i18nInstance, language } = useModernI18n();
   const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
+  const remotes = useTractorsRouteRemotes();
+  const Header = remotes?.Header;
+  const MiniCart = remotes?.MiniCart;
+  const Recommendations = remotes?.Recommendations;
 
   return (
     <main className="commerce-shell">
       <LocalizedHead />
-      <Header />
+      {Header ? <Header /> : null}
       <div className="commerce-shell-actions">
         <nav aria-label={t('shell.language.switcher')} className="commerce-language">
           {languageCodes.map(code => (
@@ -2822,9 +2880,9 @@ export default function ShellTractorsPage() {
             </a>
           ))}
         </nav>
-        <MiniCart />
+        {MiniCart ? <MiniCart /> : null}
       </div>
-      <Recommendations />
+      {Recommendations ? <Recommendations /> : null}
     </main>
   );
 }
@@ -2834,22 +2892,53 @@ 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 { useEffect, useState, type ComponentType } from 'react';
 import { ultramodernLocalisedUrls } from '../../../ultramodern-route-metadata';
-import { Header, MiniCart, ProductPage } from '../../../remote-components';
 
 const languageCodes = ['en', 'cs'] as const;
 
 ${createLocalizedHeadComponent()}
+type ProductRouteRemotes = {
+  Header: ComponentType;
+  MiniCart: ComponentType;
+  ProductPage: ComponentType;
+};
+
+const useProductRouteRemotes = () => {
+  const [remotes, setRemotes] = useState<ProductRouteRemotes | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    import('../../../remote-components').then(
+      ({ Header, MiniCart, ProductPage }) => {
+        if (mounted) {
+          setRemotes({ Header, MiniCart, ProductPage });
+        }
+      },
+    );
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return remotes;
+};
+
 export default function ShellProductPage() {
   const { i18nInstance, language } = useModernI18n();
   const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
+  const remotes = useProductRouteRemotes();
+  const Header = remotes?.Header;
+  const MiniCart = remotes?.MiniCart;
+  const ProductPage = remotes?.ProductPage;
 
   return (
     <main className="commerce-shell">
       <LocalizedHead />
-      <Header />
+      {Header ? <Header /> : null}
       <div className="commerce-shell-actions">
         <nav aria-label={t('shell.language.switcher')} className="commerce-language">
           {languageCodes.map(code => (
@@ -2863,9 +2952,9 @@ export default function ShellProductPage() {
             </a>
           ))}
         </nav>
-        <MiniCart />
+        {MiniCart ? <MiniCart /> : null}
       </div>
-      <ProductPage />
+      {ProductPage ? <ProductPage /> : null}
     </main>
   );
 }
@@ -2875,22 +2964,49 @@ 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 { useEffect, useState, type ComponentType } from 'react';
 import { ultramodernLocalisedUrls } from '../../ultramodern-route-metadata';
-import { CartPage, Header } from '../../remote-components';
 
 const languageCodes = ['en', 'cs'] as const;
 
 ${createLocalizedHeadComponent()}
+type CartRouteRemotes = {
+  CartPage: ComponentType;
+  Header: ComponentType;
+};
+
+const useCartRouteRemotes = () => {
+  const [remotes, setRemotes] = useState<CartRouteRemotes | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    import('../../remote-components').then(({ CartPage, Header }) => {
+      if (mounted) {
+        setRemotes({ CartPage, Header });
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return remotes;
+};
+
 export default function ShellCartPage() {
   const { i18nInstance, language } = useModernI18n();
   const t = i18nInstance['t'].bind(i18nInstance);
   const location = useLocation();
   const suffix = locationSuffix(location);
+  const remotes = useCartRouteRemotes();
+  const Header = remotes?.Header;
+  const CartPage = remotes?.CartPage;
 
   return (
     <main className="commerce-shell">
       <LocalizedHead />
-      <Header />
+      {Header ? <Header /> : null}
       <div className="commerce-shell-actions">
         <nav aria-label={t('shell.language.switcher')} className="commerce-language">
           {languageCodes.map(code => (
@@ -2905,7 +3021,7 @@ export default function ShellCartPage() {
           ))}
         </nav>
       </div>
-      <CartPage />
+      {CartPage ? <CartPage /> : null}
     </main>
   );
 }
@@ -2938,6 +3054,7 @@ export const Header = createLazyComponent({
   instance: getInstance(),
   loader: () => loadRemoteComponent('explore/Header'),
   loading: null,
+  noSSR: true,
 });
 export const StorePicker = createLazyComponent({
   export: 'default',
@@ -2945,6 +3062,7 @@ export const StorePicker = createLazyComponent({
   instance: getInstance(),
   loader: () => loadRemoteComponent('explore/StorePicker'),
   loading: null,
+  noSSR: true,
 });
 export const Recommendations = createLazyComponent({
   export: 'default',
@@ -2952,6 +3070,7 @@ export const Recommendations = createLazyComponent({
   instance: getInstance(),
   loader: () => loadRemoteComponent('explore/Recommendations'),
   loading: null,
+  noSSR: true,
 });
 export const ProductPage = createLazyComponent({
   export: 'default',
@@ -2959,6 +3078,7 @@ export const ProductPage = createLazyComponent({
   instance: getInstance(),
   loader: () => loadRemoteComponent('decide/ProductPage'),
   loading: null,
+  noSSR: true,
 });
 export const MiniCart = createLazyComponent({
   export: 'default',
@@ -2966,6 +3086,7 @@ export const MiniCart = createLazyComponent({
   instance: getInstance(),
   loader: () => loadRemoteComponent('checkout/MiniCart'),
   loading: null,
+  noSSR: true,
 });
 export const CartPage = createLazyComponent({
   export: 'default',
@@ -2973,6 +3094,7 @@ export const CartPage = createLazyComponent({
   instance: getInstance(),
   loader: () => loadRemoteComponent('checkout/CartPage'),
   loading: null,
+  noSSR: true,
 });
 `;
 }
@@ -3298,6 +3420,7 @@ export const AddToCart = createLazyComponent({
   instance: getInstance(),
   loader: () => loadRemoteComponent('checkout/AddToCart'),
   loading: null,
+  noSSR: true,
 });
 export const Recommendations = createLazyComponent({
   export: 'default',
@@ -3305,6 +3428,7 @@ export const Recommendations = createLazyComponent({
   instance: getInstance(),
   loader: () => loadRemoteComponent('explore/Recommendations'),
   loading: null,
+  noSSR: true,
 });
 `;
 }

package/package.json

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