@bleedingdev/modern-js-create 3.5.0-ultramodern.30 → 3.5.0-ultramodern.32

package/templates/workspace/apps/shell-super-app/src/routes/vertical-components.helpers.tsx.handlebars

@@ -0,0 +1,79 @@
+interface RemoteComponentModule {
+  default: ComponentType;
+}
+
+const loadRemoteComponent = (specifier: string) =>
+  loadRemote<RemoteComponentModule>(specifier) as Promise<RemoteComponentModule>;
+
+const createRemoteFallback = (specifier: string) =>
+  ({ error }: { error: Error }) => {
+    const { t } = useModernI18n();
+    const classification = classifyModuleFederationFallback(error);
+    const telemetryEntry =
+      typeof window === 'undefined' ? undefined : window.location.href;
+    const telemetry = createModuleFederationFallbackTelemetry({
+      appName: '{{value0}}',
+      classification,
+      ...(telemetryEntry === undefined ? {} : { entry: telemetryEntry }),
+      error,
+      eventName: 'mf.client.remote.fallback',
+      exportName: 'default',
+      phase: 'load',
+      remote: specifier,
+      status: 'degraded',
+    });
+
+    useEffect(() => {
+      void emitModuleFederationFallbackTelemetry({
+        appName: telemetry.appName,
+        classification,
+        ...(telemetry.entry === undefined ? {} : { entry: telemetry.entry }),
+        error,
+        eventName: telemetry.eventName,
+        exportName: 'default',
+        metadata: telemetry.metadata,
+        phase: telemetry.phase,
+        remote: specifier,
+        status: 'degraded',
+      });
+    }, [classification, error, telemetry]);
+
+    return <div className="{{value1}}" data-remote-error={error.name} {...toModuleFederationFallbackAttributes(telemetry)}>{t('shell.remoteUnavailable')}</div>;
+  };
+
+const createHydratedRemote =
+  (ServerComponent: ComponentType, specifier: string) =>
+  function HydratedRemote() {
+    const [hydrated, setHydrated] = useState(false);
+
+    useEffect(() => {
+      setHydrated(true);
+    }, []);
+
+    const FederatedComponent = useMemo(() => {
+      if (!hydrated) {
+        return null;
+      }
+      const instance = getInstance();
+      if (instance === null || instance === undefined) {
+        return null;
+      }
+      return createLazyComponent({
+        export: 'default',
+        fallback: createRemoteFallback(specifier),
+        instance,
+        loader: () => loadRemoteComponent(specifier),
+        loading: <ServerComponent />,
+      });
+    }, [hydrated]);
+
+    if (FederatedComponent === null) {
+      return <ServerComponent />;
+    }
+
+    return (
+      <Suspense fallback={<ServerComponent />}>
+        <FederatedComponent />
+      </Suspense>
+    );
+  };

package/templates/workspace/apps/shell-super-app/src/routes/vertical-components.imports.tsx.handlebars

@@ -0,0 +1,11 @@
+import {
+  classifyModuleFederationFallback,
+  createModuleFederationFallbackTelemetry,
+  emitModuleFederationFallbackTelemetry,
+  toModuleFederationFallbackAttributes,
+} from '@modern-js/runtime/module-federation';
+import { createLazyComponent } from '@module-federation/bridge-react';
+import { getInstance, loadRemote } from '@module-federation/modern-js-v3/runtime';
+import { Suspense, useEffect, useMemo, useState } from 'react';
+import type { ComponentType } from 'react';
+{{value0}}

package/templates/workspace/apps/shell-super-app/src/routes/vertical-components.tsx.handlebars

@@ -0,0 +1,46 @@
+{{value0}}import { Link, useModernI18n } from '@modern-js/plugin-i18n/runtime';
+
+	const widgetCount = Number('{{value1}}');
+
+	{{value2}}
+	{{value3}}
+
+	export const Header = () => {
+  const { t } = useModernI18n();
+
+  return (
+    <header className="{{value4}}" data-modern-boundary-id="{{value5}}" data-modern-mf-expose="shell/Header">
+      <Link className="{{value6}}" to="/">{t('shell.title')}</Link>
+    </header>
+  );
+};
+
+export const StatusBadge = () => {
+  const { t } = useModernI18n();
+
+  return (
+    <span className="{{value7}}">
+      {widgetCount} {t('shell.hero.cardOneKicker')}
+    </span>
+  );
+};
+
+export const VerticalShowcase = () => {
+  const { t } = useModernI18n();
+
+  if (widgetCount === 0) {
+    return (
+      <section className="{{value8}}">
+        <p className="{{value9}}">{t('shell.hero.empty')}</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="{{value10}}" data-modern-boundary-id="{{value11}}">
+      <div className="{{value12}}">
+{{value13}}
+      </div>
+    </section>
+  );
+};

package/templates/workspace/packages/shared-design-tokens/tokens.css.handlebars

@@ -0,0 +1,7 @@
+@theme {
+  --color-um-accent: #2f8f68;
+  --color-um-canvas: #f1eadc;
+  --color-um-foreground: #133225;
+  --color-um-link: #166b4b;
+  --color-um-surface: #f6fbf7;
+}

package/templates/workspace/postcss.config.mjs.handlebars

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/templates/workspace/tailwind.config.ts.handlebars

@@ -0,0 +1,3 @@
+import type { Config } from 'tailwindcss';
+
+export default {} satisfies Config;

package/templates/workspace/verticals/server/checkout-cart-handlers.ts.handlebars

@@ -0,0 +1,49 @@
+
+      .handle('getCart', () =>
+        Effect.sync(() => createCheckoutCartSnapshot()).pipe(
+          Effect.withSpan('ultramodern.api.{{value0}}.checkout.getCart', {
+            attributes: operationAttributes({{value1}}OperationContexts.getCart),
+            kind: 'server',
+          }),
+        ),
+      )
+      .handle('addCartItem', ({ payload }) =>
+        Effect.sync(() => {
+          const existingLine = checkoutCartLines.get(payload.sku);
+          checkoutCartLines.set(payload.sku, {
+            sku: payload.sku,
+            name: payload.name ?? existingLine?.name ?? payload.sku,
+            quantity: (existingLine?.quantity ?? 0) + payload.quantity,
+            unitPriceCents:
+              payload.unitPriceCents ?? existingLine?.unitPriceCents ?? 0,
+          });
+          return createCheckoutCartSnapshot();
+        }).pipe(
+          Effect.withSpan('ultramodern.api.{{value2}}.checkout.addCartItem', {
+            attributes: operationAttributes({{value3}}OperationContexts.addCartItem),
+            kind: 'server',
+          }),
+        ),
+      )
+      .handle('removeCartItem', ({ payload }) =>
+        Effect.sync(() => {
+          checkoutCartLines.delete(payload.sku);
+          return createCheckoutCartSnapshot();
+        }).pipe(
+          Effect.withSpan('ultramodern.api.{{value4}}.checkout.removeCartItem', {
+            attributes: operationAttributes({{value5}}OperationContexts.removeCartItem),
+            kind: 'server',
+          }),
+        ),
+      )
+      .handle('clearCart', () =>
+        Effect.sync(() => {
+          checkoutCartLines.clear();
+          return createCheckoutCartSnapshot();
+        }).pipe(
+          Effect.withSpan('ultramodern.api.{{value6}}.checkout.clearCart', {
+            attributes: operationAttributes({{value7}}OperationContexts.clearCart),
+            kind: 'server',
+          }),
+        ),
+      )

package/templates/workspace/verticals/server/checkout-cart-state.ts.handlebars

@@ -0,0 +1,23 @@
+
+type CheckoutCartLine = {
+  sku: string;
+  name: string;
+  quantity: number;
+  unitPriceCents: number;
+};
+
+const checkoutCartLines = new Map<string, CheckoutCartLine>();
+
+const createCheckoutCartSnapshot = () => {
+  const lines = [...checkoutCartLines.values()].sort((left, right) =>
+    left.sku.localeCompare(right.sku),
+  );
+  return {
+    lines,
+    subtotalCents: lines.reduce(
+      (total, line) => total + line.quantity * line.unitPriceCents,
+      0,
+    ),
+    totalQuantity: lines.reduce((total, line) => total + line.quantity, 0),
+  };
+};

package/templates/workspace/verticals/shared/api.checkout-cart-contract-fields.ts.handlebars

@@ -0,0 +1 @@
+  checkoutCartPath: '{{value0}}/checkout/cart',

package/templates/workspace/verticals/shared/api.checkout-cart-endpoints.ts.handlebars

@@ -0,0 +1,23 @@
+
+    .add(
+      HttpApiEndpoint.get('getCart', '/checkout/cart', {
+        success: checkoutCartSchema,
+      }),
+    )
+    .add(
+      HttpApiEndpoint.post('addCartItem', '/checkout/cart/items', {
+        payload: checkoutAddCartItemPayloadSchema,
+        success: checkoutCartSchema,
+      }),
+    )
+    .add(
+      HttpApiEndpoint.post('removeCartItem', '/checkout/cart/remove', {
+        payload: checkoutRemoveCartItemPayloadSchema,
+        success: checkoutCartSchema,
+      }),
+    )
+    .add(
+      HttpApiEndpoint.post('clearCart', '/checkout/cart/clear', {
+        success: checkoutCartSchema,
+      }),
+    )

package/templates/workspace/verticals/shared/api.checkout-cart-operation-contexts.ts.handlebars

@@ -0,0 +1,25 @@
+
+  addCartItem: {
+    method: 'POST',
+    operationId: '{{value0}}:{{value1}}:addCartItem',
+    routePath: '/checkout/cart/items',
+    source: 'generated-client',
+  },
+  clearCart: {
+    method: 'POST',
+    operationId: '{{value2}}:{{value3}}:clearCart',
+    routePath: '/checkout/cart/clear',
+    source: 'generated-client',
+  },
+  getCart: {
+    method: 'GET',
+    operationId: '{{value4}}:{{value5}}:getCart',
+    routePath: '/checkout/cart',
+    source: 'generated-client',
+  },
+  removeCartItem: {
+    method: 'POST',
+    operationId: '{{value6}}:{{value7}}:removeCartItem',
+    routePath: '/checkout/cart/remove',
+    source: 'generated-client',
+  },

package/templates/workspace/verticals/shared/api.checkout-cart-schemas.ts.handlebars

@@ -0,0 +1,48 @@
+
+export interface CheckoutCartLine {
+  readonly sku: string;
+  readonly name: string;
+  readonly quantity: number;
+  readonly unitPriceCents: number;
+}
+
+export interface CheckoutCart {
+  readonly lines: readonly CheckoutCartLine[];
+  readonly subtotalCents: number;
+  readonly totalQuantity: number;
+}
+
+export interface CheckoutAddCartItemPayload {
+  readonly sku: string;
+  readonly name?: string;
+  readonly quantity: number;
+  readonly unitPriceCents?: number;
+}
+
+export interface CheckoutRemoveCartItemPayload {
+  readonly sku: string;
+}
+
+export const checkoutCartLineSchema: Schema.Codec<CheckoutCartLine> = Schema.Struct({
+  sku: Schema.String,
+  name: Schema.String,
+  quantity: Schema.Finite,
+  unitPriceCents: Schema.Finite,
+});
+
+export const checkoutCartSchema: Schema.Codec<CheckoutCart> = Schema.Struct({
+  lines: Schema.Array(checkoutCartLineSchema),
+  subtotalCents: Schema.Finite,
+  totalQuantity: Schema.Finite,
+});
+
+export const checkoutAddCartItemPayloadSchema: Schema.Codec<CheckoutAddCartItemPayload> = Schema.Struct({
+  sku: Schema.String,
+  name: Schema.optional(Schema.String),
+  quantity: Schema.Finite,
+  unitPriceCents: Schema.optional(Schema.Finite),
+});
+
+export const checkoutRemoveCartItemPayloadSchema: Schema.Codec<CheckoutRemoveCartItemPayload> = Schema.Struct({
+  sku: Schema.String,
+});

package/templates/workspace/verticals/src/api/checkout-cart-client-exports.ts.handlebars

@@ -0,0 +1,70 @@
+
+export interface CheckoutCartLine {
+  sku: string;
+  name: string;
+  quantity: number;
+  unitPriceCents: number;
+}
+
+export interface CheckoutCart {
+  lines: readonly CheckoutCartLine[];
+  subtotalCents: number;
+  totalQuantity: number;
+}
+
+export interface CheckoutAddCartItemInput {
+  sku: string;
+  name?: string;
+  quantity: number;
+  unitPriceCents?: number;
+}
+
+export const getCheckoutCart = (
+  options: {{value0}} = {},
+): {{value1}}<CheckoutCart> =>
+  {{value2}}({
+    ...options,
+    operationContext:
+      options.operationContext ?? {{value3}}OperationContexts.getCart,
+  }).pipe(
+    Effect.flatMap(client => client.{{value4}}.getCart({})),
+  );
+
+export const addCheckoutCartItem = (
+  payload: CheckoutAddCartItemInput,
+  options: {{value5}} = {},
+): {{value6}}<CheckoutCart> =>
+  {{value7}}({
+    ...options,
+    operationContext:
+      options.operationContext ?? {{value8}}OperationContexts.addCartItem,
+  }).pipe(
+    Effect.flatMap(client =>
+      client.{{value9}}.addCartItem({ payload }),
+    ),
+  );
+
+export const removeCheckoutCartItem = (
+  sku: string,
+  options: {{value10}} = {},
+): {{value11}}<CheckoutCart> =>
+  {{value12}}({
+    ...options,
+    operationContext:
+      options.operationContext ?? {{value13}}OperationContexts.removeCartItem,
+  }).pipe(
+    Effect.flatMap(client =>
+      client.{{value14}}.removeCartItem({ payload: { sku } }),
+    ),
+  );
+
+export const clearCheckoutCart = (
+  options: {{value15}} = {},
+): {{value16}}<CheckoutCart> =>
+  {{value17}}({
+    ...options,
+    operationContext:
+      options.operationContext ?? {{value18}}OperationContexts.clearCart,
+  }).pipe(
+    Effect.flatMap(client => client.{{value19}}.clearCart({})),
+  );

package/templates/workspace-scripts/generate-node-backend-federation.mjs

@@ -8,6 +8,9 @@ const workspaceRoot = path.resolve(
     path.join(path.dirname(fileURLToPath(import.meta.url)), '../..'),
 );
 const configPath = path.join(workspaceRoot, '.modernjs/ultramodern.json');
+// Keep these constants/checks in sync with
+// @modern-js/utils/universal backend-federation-contract. Generated workspace
+// scripts do not currently import @modern-js/utils directly.
 const contractVersion = 'microvertical-server-effect-v1';
 const nodeAdapterVersion = 'backend-mf-effect-v1';
 
@@ -16,6 +19,23 @@ function readJson(filePath) {
 }
 
 function readBuildIdentity(app) {
+  const buildArtifactPath = path.join(
+    workspaceRoot,
+    app.path,
+    'shared/ultramodern-build.json',
+  );
+  if (fs.existsSync(buildArtifactPath)) {
+    const artifact = readJson(buildArtifactPath);
+    const deliveryUnit = artifact.deliveryUnit ?? {};
+    return {
+      buildVersion: deliveryUnit.buildMarker ?? deliveryUnit.build,
+      packageName: deliveryUnit.packageName,
+      version: deliveryUnit.version,
+      unitId: deliveryUnit.unitId,
+      sourceRevision: deliveryUnit.sourceRevision,
+    };
+  }
+
   const buildModulePath = path.join(
     workspaceRoot,
     app.path,
@@ -24,6 +44,15 @@ function readBuildIdentity(app) {
   if (!fs.existsSync(buildModulePath)) {
     return {};
   }
+  console.warn(
+    `[backend-federation] ${path.relative(
+      workspaceRoot,
+      buildArtifactPath,
+    )} missing; falling back to legacy regex parsing of ${path.relative(
+      workspaceRoot,
+      buildModulePath,
+    )}.`,
+  );
 
   const source = fs.readFileSync(buildModulePath, 'utf8');
   return {

package/templates/workspace-scripts/proof-node-backend-federation.mjs

@@ -12,6 +12,9 @@ const defaultOut = path.join(
   '.codex/reports/node-backend-federation-proof/proof.json',
 );
 
+// Keep these constants/checks in sync with
+// @modern-js/utils/universal backend-federation-contract. Generated workspace
+// scripts do not currently import @modern-js/utils directly.
 const contractVersion = 'microvertical-server-effect-v1';
 const nodeAdapterVersion = 'backend-mf-effect-v1';
 const backendExpose = './effect-api';
@@ -25,6 +28,23 @@ function readJson(filePath) {
 }
 
 function readBuildIdentity(app) {
+  const buildArtifactPath = path.join(
+    workspaceRoot,
+    app.directory,
+    'shared/ultramodern-build.json',
+  );
+  if (fs.existsSync(buildArtifactPath)) {
+    const artifact = readJson(buildArtifactPath);
+    const deliveryUnit = artifact.deliveryUnit ?? {};
+    return {
+      buildVersion: deliveryUnit.buildMarker ?? deliveryUnit.build,
+      packageName: deliveryUnit.packageName,
+      version: deliveryUnit.version,
+      unitId: deliveryUnit.unitId,
+      sourceRevision: deliveryUnit.sourceRevision,
+    };
+  }
+
   const buildModulePath = path.join(
     workspaceRoot,
     app.directory,
@@ -33,6 +53,15 @@ function readBuildIdentity(app) {
   if (!fs.existsSync(buildModulePath)) {
     return {};
   }
+  console.warn(
+    `[backend-federation-proof] ${path.relative(
+      workspaceRoot,
+      buildArtifactPath,
+    )} missing; falling back to legacy regex parsing of ${path.relative(
+      workspaceRoot,
+      buildModulePath,
+    )}.`,
+  );
 
   const source = fs.readFileSync(buildModulePath, 'utf8');
   return {
@@ -567,11 +596,13 @@ async function proveBackend(app, backendRuntime, target) {
       entry: localRuntimeEntry,
     },
     expected: {
+      buildMarker: buildIdentity.buildVersion,
       buildVersion: buildIdentity.buildVersion,
       contractVersion,
       nodeAdapterVersion,
       packageName: buildIdentity.packageName,
       remoteName: app.backendName,
+      unitId: buildIdentity.unitId,
     },
   });
   const backendContract = loaded.backendFederationContract;