@bleedingdev/modern-js-create 3.5.0-ultramodern.9 → 3.5.0-ultramodern.90

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

@@ -0,0 +1,191 @@
+import {
+  appTools,
+  defineConfig,
+  presetUltramodern,
+} from '@modern-js/app-tools';
+import {
+  getBuildConfigEnvironment,
+  withBuildConfigEnvironment,
+} from '@modern-js/app-tools/config';
+{{value0}}import { i18nPlugin } from '@modern-js/plugin-i18n';
+import { tanstackRouterPlugin } from '@modern-js/plugin-tanstack';
+{{value22}}
+const cloudflareDeployEnabled =
+  getBuildConfigEnvironment('MODERNJS_DEPLOY') === 'cloudflare';
+
+{{value23}}const appId = '{{value1}}';
+const cloudflareWorkerName = '{{value2}}';
+const port = Number(getBuildConfigEnvironment('{{value3}}') ?? {{value4}});
+const envValue = (name: string) => {
+  const value = getBuildConfigEnvironment(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');
+{{value19}}
+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 &&
+  getBuildConfigEnvironment('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}}{{value20}}
+      },
+      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: getBuildConfigEnvironment('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,
+{{value24}}          },
+          reactI18next: false,
+        }),
+{{value15}}{{value25}}      ],
+      server: {
+        port,
+        publicDir: ['./locales', './assets'],
+        ssr: {
+          mode: 'stream',
+          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',
+            {{value21}}
+          },
+        },
+      },
+    },
+    {
+      appId,
+      deliveryUnit: {
+        buildMarker: '{{value27}}',
+        unitId: '{{value26}}',
+        version: '{{value28}}',
+      },
+      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,27 @@
+interface RemoteComponentModule {
+  default: ComponentType;
+}
+
+const RemoteUnavailable = () => {
+  const { t } = useModernI18n();
+  return <div className="{{value1}}">{t('shell.remoteUnavailable')}</div>;
+};
+
+const createRemoteComponent = (
+  remote: string,
+  expose: string,
+  loader: () => Promise<RemoteComponentModule>,
+) =>
+  createDistributedSsrComponent({
+    createComponent: () =>
+      createLazyComponent({
+        export: 'default',
+        fallback: <RemoteUnavailable />,
+        instance: getInstance(),
+        loader,
+        loading: null,
+      }),
+    expose,
+    fallback: <RemoteUnavailable />,
+    remote,
+  });

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

@@ -0,0 +1,4 @@
+import { createLazyComponent } from '@module-federation/modern-js-v3/react';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
+import { createDistributedSsrComponent } from '@modern-js/runtime/module-federation';
+import type { ComponentType } from 'react';

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

@@ -0,0 +1,44 @@
+{{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}}">
+      {{value12}}
+    </section>
+  );
+};

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

@@ -0,0 +1,17 @@
+const RemoteUnavailable = () => {
+  const { t } = useModernI18n();
+  return <div className="{{value1}}">{t('shell.remoteUnavailable')}</div>;
+};
+
+const createRemoteComponent = (remote: string, expose: string) =>
+  function WorkerRemoteComponent() {
+    return (
+      <DistributedSsrBoundary
+        expose={expose}
+        fallback={<RemoteUnavailable />}
+        remote={remote}
+      >
+        {null}
+      </DistributedSsrBoundary>
+    );
+  };

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

@@ -0,0 +1 @@
+import { DistributedSsrBoundary } from '@modern-js/runtime/module-federation';

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, {
+            name: payload.name ?? existingLine?.name ?? payload.sku,
+            quantity: (existingLine?.quantity ?? 0) + payload.quantity,
+            sku: payload.sku,
+            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 @@
+
+interface CheckoutCartLine {
+  name: string;
+  quantity: number;
+  sku: string;
+  unitPriceCents: number;
+}
+
+const checkoutCartLines = new Map<string, CheckoutCartLine>();
+
+const createCheckoutCartSnapshot = () => {
+  const lines = [...checkoutCartLines.values()].toSorted((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,29 @@
+
+  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',
+  },
+{{createOperationContext}}
+{{getOperationContext}}
+  getCart: {
+    method: 'GET',
+    operationId: '{{value4}}:{{value5}}:getCart',
+    routePath: '/checkout/cart',
+    source: 'generated-client',
+  },
+{{listOperationContext}}
+{{readinessOperationContext}}
+  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 name: string;
+  readonly quantity: number;
+  readonly sku: string;
+  readonly unitPriceCents: number;
+}
+
+export interface CheckoutCart {
+  readonly lines: readonly CheckoutCartLine[];
+  readonly subtotalCents: number;
+  readonly totalQuantity: number;
+}
+
+export interface CheckoutAddCartItemPayload {
+  readonly name?: string;
+  readonly quantity: number;
+  readonly sku: string;
+  readonly unitPriceCents?: number;
+}
+
+export interface CheckoutRemoveCartItemPayload {
+  readonly sku: string;
+}
+
+export const checkoutCartLineSchema: Schema.Codec<CheckoutCartLine> = Schema.Struct({
+  name: Schema.String,
+  quantity: Schema.Finite,
+  sku: Schema.String,
+  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({
+  name: Schema.optional(Schema.String),
+  quantity: Schema.Finite,
+  sku: Schema.String,
+  unitPriceCents: Schema.optional(Schema.Finite),
+});
+
+export const checkoutRemoveCartItemPayloadSchema: Schema.Codec<CheckoutRemoveCartItemPayload> = Schema.Struct({
+  sku: Schema.String,
+});