@bleedingdev/modern-js-create 3.2.0-ultramodern.53 → 3.2.0-ultramodern.55

package/dist/index.js

@@ -1095,6 +1095,7 @@ function appDependencies(scope, packageSource, app) {
         dependencies['@modern-js/plugin-bff'] = modernPackageSpecifier('@modern-js/plugin-bff', packageSource);
         for (const remote of verticalEffectApps())dependencies[ultramodern_workspace_packageName(scope, remote.packageSuffix)] = WORKSPACE_PACKAGE_VERSION;
     }
+    for (const remote of resolveRemoteRefs(app))dependencies[ultramodern_workspace_packageName(scope, remote.packageSuffix)] = WORKSPACE_PACKAGE_VERSION;
     if (appHasEffectApi(app)) dependencies['@modern-js/plugin-bff'] = modernPackageSpecifier('@modern-js/plugin-bff', packageSource);
     return dependencies;
 }
@@ -1305,6 +1306,10 @@ function createPackageTsConfig(packageDir, includeApi = false) {
     };
 }
 function createAppPackage(scope, app, packageSource, enableTailwind) {
+    const packageExports = Object.fromEntries(Object.entries(app.exposes ?? {}).map(([expose, source])=>[
+            expose,
+            source
+        ]));
     const packageJson = {
         private: true,
         name: ultramodern_workspace_packageName(scope, app.packageSuffix),
@@ -1332,13 +1337,14 @@ function createAppPackage(scope, app, packageSource, enableTailwind) {
         dependencies: appDependencies(scope, packageSource, app),
         devDependencies: appDevDependencies(packageSource, enableTailwind)
     };
-    if (appHasEffectApi(app)) packageJson.exports = {
+    if (appHasEffectApi(app)) Object.assign(packageExports, {
         './effect/client': `./src/effect/${app.effectApi.stem}-client.ts`,
         './shared/effect/api': './shared/effect/api.ts'
-    };
-    else if ('shell' === app.kind) packageJson.exports = {
+    });
+    else if ('shell' === app.kind) Object.assign(packageExports, {
         './effect/clients': './src/effect/recommendations-client.ts'
-    };
+    });
+    if (Object.keys(packageExports).length > 0) packageJson.exports = packageExports;
     return packageJson;
 }
 function createServicePackage(scope, packageSource, enableTailwind, service = effectService) {
@@ -2769,13 +2775,19 @@ export default function BoundaryOverlay() {
 }
 `;
 }
-function createShellRemoteComponents() {
+function createShellRemoteComponents(scope) {
     return `import { createLazyComponent } from '@module-federation/modern-js-v3/react';
 import { getInstance, loadRemote } from '@module-federation/modern-js-v3/runtime';
-import type { JSX } from 'react';
+import { Suspense, useEffect, useMemo, useState, type ComponentType } from 'react';
+import HeaderServer from '${ultramodern_workspace_packageName(scope, 'remote-explore')}/Header';
+import StorePickerServer from '${ultramodern_workspace_packageName(scope, 'remote-explore')}/StorePicker';
+import RecommendationsServer from '${ultramodern_workspace_packageName(scope, 'remote-explore')}/Recommendations';
+import ProductPageServer from '${ultramodern_workspace_packageName(scope, 'remote-decide')}/ProductPage';
+import MiniCartServer from '${ultramodern_workspace_packageName(scope, 'remote-checkout')}/MiniCart';
+import CartPageServer from '${ultramodern_workspace_packageName(scope, 'remote-checkout')}/CartPage';
 
 type RemoteComponentModule = {
-  default: () => JSX.Element;
+  default: ComponentType;
 };
 
 const loadRemoteComponent = async (specifier: string) => {
@@ -2790,69 +2802,52 @@ const remoteFallback =
   ({ error }: { error: Error }) =>
     <div className="rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900" data-remote-error={error.name}>Remote unavailable</div>;
 
-const HeaderLoading = () => (
-  <div className="flex min-w-0 flex-1 items-center gap-5" data-mf-boundary="explore">
-    <div className="h-6 w-28 rounded-full bg-stone-200" />
-    <div className="hidden h-5 w-44 rounded-full bg-stone-100 sm:block" />
-  </div>
-);
+const createHydratedRemote = (
+  ServerComponent: ComponentType,
+  specifier: string,
+) => {
+  return function HydratedRemote() {
+    const [hydrated, setHydrated] = useState(false);
 
-const MiniCartLoading = () => (
-  <div className="h-10 w-28 rounded-full bg-stone-100" data-mf-boundary="checkout" />
-);
+    useEffect(() => {
+      setHydrated(true);
+    }, []);
 
-const PanelLoading = () => (
-  <section className="mx-auto mt-10 max-w-7xl rounded-2xl bg-white/75 p-6 shadow-xl shadow-stone-900/10">
-    <div className="h-5 w-40 rounded-full bg-stone-200" />
-    <div className="mt-5 grid gap-4 md:grid-cols-2">
-      <div className="h-36 rounded-xl bg-stone-100" />
-      <div className="h-36 rounded-xl bg-stone-100" />
-    </div>
-  </section>
-);
+    const FederatedComponent = useMemo(() => {
+      if (!hydrated) {
+        return undefined;
+      }
+      const instance = getInstance();
+      if (!instance) {
+        return undefined;
+      }
+      return createLazyComponent({
+        export: 'default',
+        fallback: remoteFallback,
+        instance,
+        loader: () => loadRemoteComponent(specifier),
+        loading: <ServerComponent />,
+      });
+    }, [hydrated]);
 
-export const Header = createLazyComponent({
-  export: 'default',
-  fallback: remoteFallback,
-  instance: getInstance(),
-  loader: () => loadRemoteComponent('explore/Header'),
-  loading: <HeaderLoading />,
-});
-export const StorePicker = createLazyComponent({
-  export: 'default',
-  fallback: remoteFallback,
-  instance: getInstance(),
-  loader: () => loadRemoteComponent('explore/StorePicker'),
-  loading: <PanelLoading />,
-});
-export const Recommendations = createLazyComponent({
-  export: 'default',
-  fallback: remoteFallback,
-  instance: getInstance(),
-  loader: () => loadRemoteComponent('explore/Recommendations'),
-  loading: <PanelLoading />,
-});
-export const ProductPage = createLazyComponent({
-  export: 'default',
-  fallback: remoteFallback,
-  instance: getInstance(),
-  loader: () => loadRemoteComponent('decide/ProductPage'),
-  loading: <PanelLoading />,
-});
-export const MiniCart = createLazyComponent({
-  export: 'default',
-  fallback: remoteFallback,
-  instance: getInstance(),
-  loader: () => loadRemoteComponent('checkout/MiniCart'),
-  loading: <MiniCartLoading />,
-});
-export const CartPage = createLazyComponent({
-  export: 'default',
-  fallback: remoteFallback,
-  instance: getInstance(),
-  loader: () => loadRemoteComponent('checkout/CartPage'),
-  loading: <PanelLoading />,
-});
+    if (!FederatedComponent) {
+      return <ServerComponent />;
+    }
+
+    return (
+      <Suspense fallback={<ServerComponent />}>
+        <FederatedComponent />
+      </Suspense>
+    );
+  };
+};
+
+export const Header = createHydratedRemote(HeaderServer, 'explore/Header');
+export const StorePicker = createHydratedRemote(StorePickerServer, 'explore/StorePicker');
+export const Recommendations = createHydratedRemote(RecommendationsServer, 'explore/Recommendations');
+export const ProductPage = createHydratedRemote(ProductPageServer, 'decide/ProductPage');
+export const MiniCart = createHydratedRemote(MiniCartServer, 'checkout/MiniCart');
+export const CartPage = createHydratedRemote(CartPageServer, 'checkout/CartPage');
 `;
 }
 function createRemotePage(app) {
@@ -3161,13 +3156,15 @@ export default function ${componentName}() {
 }
 `;
 }
-function createDecideRemoteComponents() {
+function createDecideRemoteComponents(scope) {
     return `import { createLazyComponent } from '@module-federation/modern-js-v3/react';
 import { getInstance, loadRemote } from '@module-federation/modern-js-v3/runtime';
-import type { JSX } from 'react';
+import { Suspense, useEffect, useMemo, useState, type ComponentType } from 'react';
+import RecommendationsServer from '${ultramodern_workspace_packageName(scope, 'remote-explore')}/Recommendations';
+import AddToCartServer from '${ultramodern_workspace_packageName(scope, 'remote-checkout')}/AddToCart';
 
 type RemoteComponentModule = {
-  default: () => JSX.Element;
+  default: ComponentType;
 };
 
 const loadRemoteComponent = async (specifier: string) => {
@@ -3182,39 +3179,48 @@ const remoteFallback =
   ({ error }: { error: Error }) =>
     <div className="rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900" data-remote-error={error.name}>Remote unavailable</div>;
 
-const AddToCartLoading = () => (
-  <div className="mt-8 flex gap-3" data-mf-boundary="checkout">
-    <div className="h-11 w-32 rounded-full bg-stone-200" />
-    <div className="h-11 w-28 rounded-full bg-white/80" />
-  </div>
-);
+const createHydratedRemote = (
+  ServerComponent: ComponentType,
+  specifier: string,
+) => {
+  return function HydratedRemote() {
+    const [hydrated, setHydrated] = useState(false);
 
-const RecommendationsLoading = () => (
-  <section className="mx-auto mt-12 max-w-7xl" data-mf-boundary="explore">
-    <div className="h-8 w-64 rounded-full bg-stone-200" />
-    <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-      <div className="h-48 rounded-2xl bg-white/80" />
-      <div className="h-48 rounded-2xl bg-white/80" />
-      <div className="h-48 rounded-2xl bg-white/80" />
-      <div className="h-48 rounded-2xl bg-white/80" />
-    </div>
-  </section>
-);
+    useEffect(() => {
+      setHydrated(true);
+    }, []);
 
-export const AddToCart = createLazyComponent({
-  export: 'default',
-  fallback: remoteFallback,
-  instance: getInstance(),
-  loader: () => loadRemoteComponent('checkout/AddToCart'),
-  loading: <AddToCartLoading />,
-});
-export const Recommendations = createLazyComponent({
-  export: 'default',
-  fallback: remoteFallback,
-  instance: getInstance(),
-  loader: () => loadRemoteComponent('explore/Recommendations'),
-  loading: <RecommendationsLoading />,
-});
+    const FederatedComponent = useMemo(() => {
+      if (!hydrated) {
+        return undefined;
+      }
+      const instance = getInstance();
+      if (!instance) {
+        return undefined;
+      }
+      return createLazyComponent({
+        export: 'default',
+        fallback: remoteFallback,
+        instance,
+        loader: () => loadRemoteComponent(specifier),
+        loading: <ServerComponent />,
+      });
+    }, [hydrated]);
+
+    if (!FederatedComponent) {
+      return <ServerComponent />;
+    }
+
+    return (
+      <Suspense fallback={<ServerComponent />}>
+        <FederatedComponent />
+      </Suspense>
+    );
+  };
+};
+
+export const AddToCart = createHydratedRemote(AddToCartServer, 'checkout/AddToCart');
+export const Recommendations = createHydratedRemote(RecommendationsServer, 'explore/Recommendations');
 `;
 }
 function remoteComponentOutputPath(app, expose) {
@@ -5380,7 +5386,7 @@ function writeApp(targetDir, scope, app, packageSource, enableTailwind) {
     writeFile(targetDir, `${app.directory}/src/routes/[lang]/page.tsx`, 'shell' === app.kind ? createShellPage() : createRemotePage(app));
     for (const route of createRouteOwnedI18nPaths(app))if ('/' !== route.canonicalPath && 'shell' !== app.kind) writeFile(targetDir, createRoutePageFilePath(app, route.canonicalPath), createRouteAliasPage(route.canonicalPath));
     if ('shell' === app.kind) {
-        writeFile(targetDir, `${app.directory}/src/routes/remote-components.tsx`, createShellRemoteComponents());
+        writeFile(targetDir, `${app.directory}/src/routes/remote-components.tsx`, createShellRemoteComponents(scope));
         writeFile(targetDir, `${app.directory}/src/routes/shell-frame.tsx`, createShellFrameComponent());
         writeFile(targetDir, `${app.directory}/src/routes/boundary-overlay.tsx`, createShellBoundaryOverlay());
         writeFile(targetDir, `${app.directory}/src/effect/recommendations-client.ts`, createShellEffectClient(scope));
@@ -5395,7 +5401,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-decide' === app.id) writeFile(targetDir, `${app.directory}/src/components/remote-components.tsx`, createDecideRemoteComponents(scope));
         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.53",
+  "version": "3.2.0-ultramodern.55",
   "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.53"
+    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.55"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -54,6 +54,6 @@
     "start": "node ./dist/index.js"
   },
   "ultramodern": {
-    "frameworkVersion": "3.2.0-ultramodern.53"
+    "frameworkVersion": "3.2.0-ultramodern.55"
   }
 }

package/template/pnpm-workspace.yaml

@@ -1,13 +1,6 @@
 minimumReleaseAge: 1440
 minimumReleaseAgeStrict: true
 minimumReleaseAgeIgnoreMissingTime: false
-minimumReleaseAgeExclude:
-  - '@modern-js/*'
-  - '@bleedingdev/*'
-  - '@effect/tsgo'
-  - '@effect/tsgo-*'
-  - '@typescript/native-preview'
-  - '@typescript/native-preview-*'
 trustPolicy: no-downgrade
 trustPolicyIgnoreAfter: 1440
 blockExoticSubdeps: true

package/template/scripts/validate-ultramodern.mjs.handlebars

@@ -321,18 +321,8 @@ if (readPnpmConfig('minimumReleaseAgeIgnoreMissingTime') !== false) {
   console.error('pnpm minimumReleaseAgeIgnoreMissingTime must be false');
   process.exit(1);
 }
-if (
-  JSON.stringify(readPnpmConfig('minimumReleaseAgeExclude')) !==
-  JSON.stringify([
-    '@modern-js/*',
-    '@bleedingdev/*',
-    '@effect/tsgo',
-    '@effect/tsgo-*',
-    '@typescript/native-preview',
-    '@typescript/native-preview-*',
-  ])
-) {
-  console.error('pnpm minimumReleaseAgeExclude must retain framework exceptions');
+if (readPnpmConfig('minimumReleaseAgeExclude') !== undefined) {
+  console.error('pnpm minimumReleaseAgeExclude must stay unset');
   process.exit(1);
 }
 if (readPnpmConfig('trustPolicy') !== 'no-downgrade') {