@bleedingdev/modern-js-create 3.5.0-ultramodern.4 → 3.5.0-ultramodern.40

package/templates/workspace/apps/modern.config.ts.handlebars

@@ -0,0 +1,252 @@
+// @effect-diagnostics processEnv:off
+import { setTimeout as delay } from 'node:timers/promises';
+import {
+  appTools,
+  defineConfig,
+  presetUltramodern,
+} from '@modern-js/app-tools';
+{{value0}}import { i18nPlugin } from '@modern-js/plugin-i18n';
+import { tanstackRouterPlugin } from '@modern-js/plugin-tanstack';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
+import { withZephyr as withZephyrRspack } from 'zephyr-rspack-plugin';
+import { ultramodernLocalisedUrls } from './src/routes/ultramodern-route-metadata';
+
+type ZephyrRspackConfig = Parameters<ReturnType<typeof withZephyrRspack>>[0];
+
+const zephyrEnabled = process.env['ULTRAMODERN_ZEPHYR'] !== 'false';
+const cloudflareDeployEnabled =
+  process.env['MODERNJS_DEPLOY'] === 'cloudflare';
+
+const parsedZephyrTimeoutMs = Number.parseInt(
+  process.env['ULTRAMODERN_ZEPHYR_TIMEOUT_MS'] ?? '',
+  10,
+);
+const zephyrTimeoutMs =
+  Number.isFinite(parsedZephyrTimeoutMs) && parsedZephyrTimeoutMs > 0
+    ? parsedZephyrTimeoutMs
+    : 45_000;
+
+const zephyrWarn = (error: unknown) => {
+  const message = error instanceof Error ? error.message : String(error);
+  console.warn(
+    `[ultramodern] zephyr-rspack-plugin failed; continuing without Zephyr (set ULTRAMODERN_ZEPHYR=false to disable it): ${message}`,
+  );
+};
+
+const zephyrRspackPlugin = () => ({
+  name: 'ultramodern-zephyr-rspack-plugin',
+  pre: ['@modern-js/plugin-module-federation-config'],
+  setup(api: {
+    modifyRspackConfig: (
+      handler: (
+        config: ZephyrRspackConfig,
+      ) => ZephyrRspackConfig | Promise<ZephyrRspackConfig>,
+    ) => void;
+  }) {
+    if (!zephyrEnabled) {
+      return;
+    }
+    api.modifyRspackConfig(async config => {
+      try {
+        // Zephyr can not only throw/reject but also hang on a stalled network
+        // call, wedging the whole build. Race it against a watchdog so a hang
+        // degrades to an unmodified config instead of blocking indefinitely.
+        const zephyrConfig = (async () => {
+          try {
+            return await withZephyrRspack()(config);
+          } catch (error) {
+            zephyrWarn(error);
+            return config;
+          }
+        })();
+        const watchdog = async () => {
+          await delay(zephyrTimeoutMs, undefined, { ref: false });
+          zephyrWarn(
+            `timed out after ${zephyrTimeoutMs}ms (override with ULTRAMODERN_ZEPHYR_TIMEOUT_MS)`,
+          );
+          return config;
+        };
+        return await Promise.race([zephyrConfig, watchdog()]);
+      } catch (error) {
+        zephyrWarn(error);
+        return config;
+      }
+    });
+  },
+});
+
+const appId = '{{value1}}';
+const cloudflareWorkerName = '{{value2}}';
+const port = Number(process.env['{{value3}}'] ?? {{value4}});
+const envValue = (name: string) => {
+  const value = process.env[name]?.trim();
+  return value !== undefined && value.length > 0 ? value : undefined;
+};
+const configuredSiteUrl = envValue('MODERN_PUBLIC_SITE_URL');
+const configuredCloudflareUrl = envValue('{{value5}}');
+const configuredUltramodernAssetPrefix = envValue('ULTRAMODERN_ASSET_PREFIX');
+const configuredModernAssetPrefix = envValue('MODERN_ASSET_PREFIX');
+const moduleFederationDevServerOrigin =
+  envValue('ULTRAMODERN_MF_DEV_ORIGIN') || 'http://localhost:{{value6}}';
+const cloudflareWorkersDevSubdomain = envValue(
+  'ULTRAMODERN_CLOUDFLARE_WORKERS_DEV_SUBDOMAIN',
+);
+const inferredCloudflareUrl =
+  cloudflareDeployEnabled && cloudflareWorkersDevSubdomain !== undefined
+    ? `https://${cloudflareWorkerName}.${cloudflareWorkersDevSubdomain}.workers.dev`
+    : undefined;
+// Site origin (SEO: canonical/hreflang URLs) prefers the site-wide public URL;
+// the per-app deployment URL only fills in when no site origin is configured.
+const siteUrl =
+  configuredSiteUrl ||
+  configuredCloudflareUrl ||
+  inferredCloudflareUrl ||
+  `http://localhost:${port}`;
+{{value7}}
+// Asset loading is intentionally independent from the canonical site URL.
+// Module Federation remotes must publish an absolute publicPath so browsers
+// load remoteEntry.js and exposed chunks from the remote origin, not the host.
+const assetPrefix =
+  configuredModernAssetPrefix || configuredUltramodernAssetPrefix || defaultAssetPrefix;
+const buildTarget = cloudflareDeployEnabled ? 'cloudflare' : 'web';
+const buildOutputRoot = cloudflareDeployEnabled ? 'dist-cloudflare' : 'dist';
+const buildTempDirectory = `node_modules/.modern-js-${appId}-${buildTarget}`;
+const buildCacheDirectory = `node_modules/.cache/rspack-${appId}-${buildTarget}`;
+
+if (
+  cloudflareDeployEnabled &&
+  process.env['ULTRAMODERN_CLOUDFLARE_REQUIRE_PUBLIC_URLS'] === 'true' &&
+  configuredCloudflareUrl === undefined &&
+  configuredSiteUrl === undefined &&
+  inferredCloudflareUrl === undefined
+) {
+  throw new Error(
+    `Cloudflare deploy for ${appId} needs {{value8}}, MODERN_PUBLIC_SITE_URL, or ULTRAMODERN_CLOUDFLARE_WORKERS_DEV_SUBDOMAIN.`,
+  );
+}
+
+export default defineConfig(
+  presetUltramodern(
+    {
+{{value9}}{{value18}}      ...(cloudflareDeployEnabled
+        ? {
+            deploy: {
+              worker: {
+              compatibilityDate: '{{value10}}',
+              name: cloudflareWorkerName,
+              security: {{value11}},
+{{value12}}              ssr: true,
+            },
+          },
+          }
+        : {}),
+      dev: {
+{{value13}}
+      },
+      html: {
+        outputStructure: 'flat',
+      },
+      output: {
+        assetPrefix,
+        disableTsChecker: false,
+        distPath: {
+          html: './',
+          root: buildOutputRoot,
+        },
+        polyfill: 'off',
+        splitRouteChunks: true,
+        tempDir: buildTempDirectory,
+      },
+      performance: {
+        buildCache: {
+          cacheDigest: [appId, buildTarget],
+          cacheDirectory: buildCacheDirectory,
+        },
+        rsdoctor: {
+          disableClientServer: true,
+          enabled: process.env['ULTRAMODERN_RSDOCTOR'] === 'true',
+        },
+      },
+      plugins: [
+        appTools(),
+        tanstackRouterPlugin(),
+        i18nPlugin({
+          backend: {
+            enabled: true,
+            loadPath: '/locales/{{lng}}/{{ns}}.json',
+          },
+          localeDetection: {
+            fallbackLanguage: 'en',
+            ignoreRedirectRoutes: [
+              '/@mf-types',
+              '/assets',
+              '/bundles',
+              '{{value14}}',
+              '/locales',
+              '/mf-manifest.json',
+              '/mf-stats.json',
+              '/remoteEntry.js',
+              '/robots.txt',
+              '/site.webmanifest',
+              '/sitemap.xml',
+              '/static',
+              '/zephyr-manifest.json',
+            ],
+            languages: ['en', 'cs'],
+            localePathRedirect: true,
+            localisedUrls: ultramodernLocalisedUrls as Record<string, Record<string, string>>,
+          },
+          reactI18next: false,
+        }),
+{{value15}}        moduleFederationPlugin(),
+        zephyrRspackPlugin(),
+      ],
+      server: {
+        port,
+        publicDir: ['./locales', './assets'],
+        ssr: {
+          mode: 'string',
+          moduleFederationAppSSR: true,
+        },
+      },
+      source: {
+        alias: {
+          '@modern-js/plugin-i18n/runtime':
+            '@modern-js/plugin-i18n/runtime/no-react-i18next',
+        },
+        globalVars: {
+          ULTRAMODERN_SITE_URL: siteUrl,
+        },
+        mainEntryName: 'index',
+      },
+      splitChunks: {
+        chunks: 'async',
+      },
+      tools: {
+        autoprefixer: {
+          overrideBrowserslist: ['defaults'],
+        },
+        bundlerChain: chain => {
+          chain.output
+            .uniqueName('{{value16}}')
+            .chunkLoadingGlobal('{{value17}}');
+        },
+        devServer: {
+          headers: {
+            'Access-Control-Allow-Headers':
+              'Accept, Authorization, Content-Type, X-Requested-With',
+            'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+            'Access-Control-Allow-Origin': moduleFederationDevServerOrigin,
+          },
+        },
+      },
+    },
+    {
+      appId,
+      enableBffRequestId: true,
+      enableModuleFederationSSR: true,
+      enableTelemetryExporters: true,
+      telemetryFailLoudStartup: false,
+    },
+  ),
+);

package/templates/workspace/apps/shared/src/routes/ultramodern-jsonld.ts.handlebars

@@ -0,0 +1,119 @@
+export type JsonLdPrimitive = string | number | boolean | null;
+export type JsonLdValue =
+  | JsonLdPrimitive
+  | readonly JsonLdValue[]
+  | { readonly [key: string]: JsonLdValue };
+export type JsonLdObject = Readonly<Record<string, JsonLdValue>>;
+export type RouteJsonLd = JsonLdObject | readonly JsonLdObject[];
+
+const schemaContext = 'https://schema.org' as const;
+
+type SchemaObject<TType extends string> = JsonLdObject & {
+  readonly '@context': typeof schemaContext;
+  readonly '@type': TType;
+};
+
+type ThingReference =
+  | string
+  | {
+      readonly '@id'?: string;
+      readonly '@type'?: string;
+      readonly name?: string;
+      readonly url?: string;
+    };
+
+const withSchemaContext = <TType extends string, TInput extends object>(
+  type: TType,
+  input: TInput,
+): SchemaObject<TType> & TInput => ({
+  '@context': schemaContext,
+  '@type': type,
+  ...input,
+});
+
+export const defineRouteJsonLd = <TJsonLd extends RouteJsonLd>(
+  jsonLd: TJsonLd,
+): TJsonLd => jsonLd;
+
+export interface WebPageJsonLdInput {
+  readonly name: string;
+  readonly url: string;
+  readonly description?: string;
+  readonly inLanguage?: string | readonly string[];
+  readonly isPartOf?: ThingReference;
+}
+
+export const webPageJsonLd = (input: WebPageJsonLdInput) =>
+  withSchemaContext('WebPage', input);
+
+export interface WebApplicationJsonLdInput {
+  readonly name: string;
+  readonly url: string;
+  readonly applicationCategory?: string;
+  readonly browserRequirements?: string;
+  readonly description?: string;
+  readonly operatingSystem?: string;
+}
+
+export const webApplicationJsonLd = (input: WebApplicationJsonLdInput) =>
+  withSchemaContext('WebApplication', input);
+
+export interface SoftwareApplicationJsonLdInput {
+  readonly name: string;
+  readonly url: string;
+  readonly applicationCategory?: string;
+  readonly applicationSubCategory?: string;
+  readonly description?: string;
+  readonly offers?: ThingReference;
+  readonly operatingSystem?: string;
+}
+
+export const softwareApplicationJsonLd = (
+  input: SoftwareApplicationJsonLdInput,
+) => withSchemaContext('SoftwareApplication', input);
+
+export interface OrganizationJsonLdInput {
+  readonly name: string;
+  readonly url?: string;
+  readonly logo?: string;
+  readonly sameAs?: readonly string[];
+}
+
+export const organizationJsonLd = (input: OrganizationJsonLdInput) =>
+  withSchemaContext('Organization', input);
+
+export interface BreadcrumbListItemInput {
+  readonly name: string;
+  readonly item: string;
+}
+
+export const breadcrumbListJsonLd = (
+  items: readonly BreadcrumbListItemInput[],
+) =>
+  withSchemaContext('BreadcrumbList', {
+    itemListElement: items.map((entry, index) => ({
+      '@type': 'ListItem',
+      item: entry.item,
+      name: entry.name,
+      position: index + 1,
+    })),
+  });
+
+export interface FAQPageQuestionInput {
+  readonly name: string;
+  readonly acceptedAnswer: {
+    readonly text: string;
+  };
+}
+
+export const faqPageJsonLd = (questions: readonly FAQPageQuestionInput[]) =>
+  withSchemaContext('FAQPage', {
+    mainEntity: questions.map(question => ({
+      '@type': 'Question',
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: question.acceptedAnswer.text,
+      },
+      name: question.name,
+    })),
+  });

package/templates/workspace/apps/shared/src/routes/ultramodern-route-metadata.ts.handlebars

@@ -0,0 +1,21 @@
+// @generated by @modern-js/create.
+// Author route metadata in colocated src/routes/**/route.meta.ts files.
+// This compatibility manifest is regenerated from route-owned metadata.
+
+export const ultramodernRouteNamespace = '{{value0}}' as const;
+
+export const ultramodernRouteMetadata = {{value1}} as const;
+
+export const ultramodernLocalisedUrls = {{value2}} as const;
+
+export const ultramodernPublicRoutes = {{value3}} as const;
+
+export const ultramodernRouteConfig = {
+  authoring: 'colocated-route-meta',
+  generatedManifest: true,
+  localisedUrls: ultramodernLocalisedUrls,
+  namespace: ultramodernRouteNamespace,
+  publicRoutes: ultramodernPublicRoutes,
+  routes: ultramodernRouteMetadata,
+  source: 'route-owned',
+} as const;

package/templates/workspace/apps/shell-super-app/src/routes/[lang]/page.tsx.handlebars

@@ -0,0 +1,49 @@
+import { Link, useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import ShellFrame from '../shell-frame';
+import { UltramodernRouteHead } from '../ultramodern-route-head';
+import { VerticalShowcase } from '../vertical-components';
+import { ultramodernUiMarker } from '../../ultramodern-build';
+
+export default function ShellHome() {
+  const { t } = useModernI18n();
+
+  return (
+    <ShellFrame>
+      <UltramodernRouteHead />
+      <section className="{{value0}}">
+        <div className="{{value1}}">
+          <p className="{{value2}}">{t('shell.hero.eyebrow')}</p>
+          <h1 className="{{value3}}">{t('shell.title')}</h1>
+          <p className="{{value4}}">{t('shell.hero.lede')}</p>
+          <div className="{{value5}}">
+            <Link className="{{value6}}" to="/">
+              {t('shell.hero.primary')}
+            </Link>
+            <span className="{{value7}}">
+              {t('shell.hero.secondary')}
+            </span>
+          </div>
+        </div>
+        <div className="{{value8}}">
+          <div className="{{value9}}">
+            <article className="{{value10}}">
+              <span className="{{value11}}">{t('shell.hero.cardOneKicker')}</span>
+              <strong className="{{value12}}">{{value13}}</strong>
+              <p className="{{value14}}">{t('shell.hero.cardOne')}</p>
+            </article>
+            <article className="{{value15}}">
+              <span className="{{value16}}">{t('shell.hero.cardTwoKicker')}</span>
+              <strong className="{{value17}}">SSR</strong>
+              <p className="{{value18}}">{t('shell.hero.cardTwo')}</p>
+            </article>
+          </div>
+        </div>
+      </section>
+      <VerticalShowcase />
+      <p className="{{value19}}" data-testid="ultramodern-preset">presetUltramodern workspace</p>
+      <p className="{{value20}}" data-build-marker={ultramodernUiMarker.build} data-testid="ultramodern-ui-marker">
+        {ultramodernUiMarker.appId}:{ultramodernUiMarker.version}
+      </p>
+    </ShellFrame>
+  );
+}

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/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',