@bleedingdev/modern-js-ultramodern-create 3.8.3-ultramodern.2

package/templates/app/shell-frame.tsx

@@ -0,0 +1,49 @@
+import { useLocalizedLocation, useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import { useNavigate } from '@modern-js/plugin-tanstack/runtime';
+import type { ReactNode } from 'react';
+import { Header, StatusBadge } from './vertical-components';
+
+interface ShellFrameProps {
+  children: ReactNode;
+}
+
+export default function ShellFrame({ children }: ShellFrameProps) {
+  const { language, t } = useModernI18n();
+  const { alternates } = useLocalizedLocation();
+  const navigate = useNavigate();
+
+  return (
+    <main className="shell:min-h-screen shell:bg-um-canvas shell:px-4 shell:py-5 shell:text-um-foreground shell:sm:px-6 shell:lg:px-12">
+      <div className="shell:mx-auto shell:flex shell:min-h-20 shell:max-w-7xl shell:flex-col shell:items-start shell:gap-3 shell:bg-white/90 shell:px-4 shell:py-3 shell:shadow-xl shell:shadow-stone-900/10 shell:sm:px-6 shell:md:flex-row shell:md:flex-wrap shell:md:items-center shell:md:justify-between">
+        <Header />
+        <div className="shell:flex shell:min-w-0 shell:flex-wrap shell:items-center shell:gap-2 shell:md:ml-auto">
+          <label className="shell:sr-only" htmlFor="ultramodern-language">
+            {t('shell.language.switcher')}
+          </label>
+          <select
+            aria-label={t('shell.language.switcher')}
+            className="shell:h-10 shell:w-10 shell:cursor-pointer shell:appearance-none shell:border-0 shell:bg-transparent shell:p-0 shell:text-center shell:text-3xl shell:font-black shell:leading-none shell:text-stone-950 shell:shadow-none shell:[appearance:none] shell:[text-align-last:center] shell:focus-visible:rounded-md shell:focus-visible:outline-3 shell:focus-visible:outline-offset-2 shell:focus-visible:outline-emerald-700/40 shell:[&::-ms-expand]:hidden shell:[&::picker-icon]:hidden shell:[&_option]:text-xl"
+            id="ultramodern-language"
+            name="language"
+            onChange={event => {
+              const target = alternates[event.currentTarget.value];
+              if (target !== undefined) {
+                void navigate({ to: target });
+              }
+            }}
+            value={language}
+          >
+            <option aria-label={t('shell.language.en')} value="en">
+              🇬🇧
+            </option>
+            <option aria-label={t('shell.language.cs')} value="cs">
+              🇨🇿
+            </option>
+          </select>
+          <StatusBadge />
+        </div>
+      </div>
+      {children}
+    </main>
+  );
+}

package/templates/app/ultramodern-route-head.tsx.handlebars

@@ -0,0 +1,153 @@
+import { useLocalizedLocation, useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import { Helmet } from '@modern-js/runtime/head';
+import {
+  ultramodernRouteMetadata,
+} from './ultramodern-route-metadata';
+import type { RouteJsonLd } from './ultramodern-jsonld';
+
+const appName = {{appDisplayNameJson}};
+const fallbackLanguage = 'en';
+const supportedLanguages = ['en', 'cs'] as const;
+type SupportedLanguage = (typeof supportedLanguages)[number];
+type GeneratedRouteMetadata = (typeof ultramodernRouteMetadata)[number];
+type RouteMetadata = Omit<
+  GeneratedRouteMetadata,
+  'indexable' | 'jsonLd' | 'public'
+> & {
+  readonly indexable: boolean;
+  readonly jsonLd?: RouteJsonLd;
+  readonly public: boolean;
+};
+
+const routeMetadata: readonly RouteMetadata[] = ultramodernRouteMetadata;
+
+const isSupportedLanguage = (value: string): value is SupportedLanguage =>
+  supportedLanguages.includes(value as SupportedLanguage);
+
+const normalisePath = (pathname: string) => {
+  const normalised = pathname.replaceAll(/\/+/gu, '/').replace(/\/+$/u, '');
+  return normalised.length > 0 ? normalised : '/';
+};
+
+const stripLanguagePrefix = (pathname: string) => {
+  const segments = normalisePath(pathname).split('/').filter(Boolean);
+  if (segments.length > 0 && isSupportedLanguage(segments[0] ?? '')) {
+    segments.shift();
+  }
+  return `/${segments.join('/')}`;
+};
+
+const escapeRegExp = (value: string) =>
+  value.replaceAll(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+
+const paramName = (segment: string) => segment.slice(1).replace(/\?$/u, '');
+
+const matchPattern = (pathname: string, pattern: string) => {
+  const names: string[] = [];
+  const source = normalisePath(pattern)
+    .split('/')
+    .filter(Boolean)
+    .map(segment => {
+      if (segment.startsWith(':')) {
+        names.push(paramName(segment));
+        return segment.endsWith('?') ? '(?:/([^/]+))?' : '/([^/]+)';
+      }
+      return `/${escapeRegExp(segment)}`;
+    })
+    .join('');
+  const match = new RegExp(`^${source || '/'}$`, 'u').exec(
+    normalisePath(pathname),
+  );
+
+  if (match === null) {
+    return;
+  }
+
+  const params: Record<string, string> = {};
+  for (const [index, name] of names.entries()) {
+    params[name] = decodeURIComponent(match[index + 1] ?? '');
+  }
+  return params;
+};
+
+const resolveRouteMetadata = (pathname: string) => {
+  const pathWithoutLanguage = stripLanguagePrefix(pathname);
+
+  for (const route of routeMetadata) {
+    const canonicalParams = matchPattern(pathWithoutLanguage, route.canonicalPath);
+    if (canonicalParams !== undefined) {
+      return route;
+    }
+
+    for (const language of supportedLanguages) {
+      const params = matchPattern(pathWithoutLanguage, route.localisedPaths[language]);
+      if (params !== undefined) {
+        return route;
+      }
+    }
+  }
+
+  return routeMetadata[0];
+};
+
+const isPublicIndexableRoute = (
+  route: RouteMetadata | undefined,
+): route is RouteMetadata =>
+  route !== undefined && route.public && route.indexable;
+
+const absoluteUrl = (pathname: string) => {
+  const origin = ULTRAMODERN_SITE_URL.replace(/\/+$/u, '');
+  return `${origin}${pathname}`;
+};
+
+const sanitiseJsonLd = (value: RouteJsonLd) =>
+  JSON.stringify(value).replaceAll('<', '\\u003c');
+
+export const UltramodernRouteHead = () => {
+  const { language, t } = useModernI18n();
+  const { canonical, alternates } = useLocalizedLocation();
+  const route = resolveRouteMetadata(canonical);
+  const title = route === undefined ? appName : t(route.titleKey);
+  const description =
+    route === undefined ? appName : t(route.descriptionKey);
+  const canonicalUrl = absoluteUrl(alternates[fallbackLanguage] ?? `/${fallbackLanguage}`);
+  const indexable = isPublicIndexableRoute(route);
+  const jsonLd = route?.jsonLd;
+
+  return (
+    <Helmet htmlAttributes={{ lang: language ?? fallbackLanguage }}>
+      <title>{title}</title>
+      <meta content={description} name="description" />
+      <meta content={indexable ? 'index, follow' : 'noindex, nofollow'} name="robots" />
+      {indexable && (
+        <>
+          <link rel="canonical" href={canonicalUrl} />
+          {supportedLanguages.map(code => (
+            <link
+              href={absoluteUrl(alternates[code] ?? `/${code}`)}
+              hrefLang={code}
+              key={code}
+              rel="alternate"
+            />
+          ))}
+          <link
+            href={absoluteUrl(alternates[fallbackLanguage] ?? `/${fallbackLanguage}`)}
+            hrefLang="x-default"
+            rel="alternate"
+          />
+          <meta content={title} property="og:title" />
+          <meta content={description} property="og:description" />
+          <meta content={canonicalUrl} property="og:url" />
+          <meta content="website" property="og:type" />
+          <meta content={language ?? fallbackLanguage} property="og:locale" />
+          <meta content="summary_large_image" name="twitter:card" />
+          <meta content={title} name="twitter:title" />
+          <meta content={description} name="twitter:description" />
+          {jsonLd === undefined ? null : (
+            <script type="application/ld+json">{sanitiseJsonLd(jsonLd)}</script>
+          )}
+        </>
+      )}
+    </Helmet>
+  );
+};

package/templates/packages/shared-contracts-index.ts

@@ -0,0 +1,400 @@
+export type UltramodernPublicSitemapChangeFrequency =
+  | 'always'
+  | 'hourly'
+  | 'daily'
+  | 'weekly'
+  | 'monthly'
+  | 'yearly'
+  | 'never';
+
+export interface UltramodernPublicSitemapEntry {
+  /**
+   * Params used to expand every localized route pattern, for example
+   * { slug: 'platform-story' } for /talks/:slug.
+   */
+  params: Record<string, string | number | boolean>;
+  /**
+   * Per-locale overrides when translated URLs use translated params.
+   */
+  localeParams?: Partial<
+    Record<'en' | 'cs', Record<string, string | number | boolean>>
+  >;
+  draft?: boolean;
+  indexable?: boolean;
+  lastModified?: string;
+  changeFrequency?: UltramodernPublicSitemapChangeFrequency;
+  priority?: number;
+}
+
+export type UltramodernPerformanceReadinessSignalId =
+  | 'bfcache'
+  | 'core-web-vitals-rum'
+  | 'duplicate-prefetch-warmup'
+  | 'cache-policy-sanity'
+  | 'save-data-behavior'
+  | 'cloudflare-ssr-cache-hints';
+
+export interface UltramodernPerformanceReadinessDiagnosticsConfig {
+  /**
+   * Default-on. Set to false only for an explicit local or CI fast path.
+   */
+  enabled?: boolean;
+  /**
+   * Diagnostics may fail objective generated/framework invariants, or never
+   * fail and only emit the deterministic report.
+   */
+  failOn?: 'framework-invariant' | 'never';
+  reportPath?: string;
+  signals?: Partial<
+    Record<
+      UltramodernPerformanceReadinessSignalId,
+      {
+        enabled?: boolean;
+      }
+    >
+  >;
+}
+
+export const ultramodernWorkspaceContract = {
+  ownership: 'topology/ownership.json',
+  performanceReadiness: {
+    defaultOn: true,
+    optOut: 'scripts/ultramodern-performance-readiness.config.mjs#enabled=false',
+    report:
+      '.codex/reports/performance-readiness/ultramodern-performance-readiness.json',
+    signals: [
+      'bfcache',
+      'core-web-vitals-rum',
+      'duplicate-prefetch-warmup',
+      'cache-policy-sanity',
+      'save-data-behavior',
+      'cloudflare-ssr-cache-hints',
+    ],
+  },
+  preset: 'presetUltramodern',
+  topology: 'topology/reference-topology.json',
+} as const;
+
+export type UltramodernWorkspaceLocale = 'en' | 'cs';
+
+export type UltramodernPerformanceReadinessSignalStatus =
+  | 'pass'
+  | 'warn'
+  | 'fail';
+
+export const ultramodernWorkspaceEventNames = {
+  navigate: 'ultramodern:navigate',
+  performanceSignal: 'ultramodern:performance-signal',
+  remoteReady: 'ultramodern:remote-ready',
+  routeSettled: 'ultramodern:route-settled',
+} as const;
+
+export type UltramodernWorkspaceEventName =
+  (typeof ultramodernWorkspaceEventNames)[keyof typeof ultramodernWorkspaceEventNames];
+
+export interface UltramodernNavigatePayload {
+  to: string;
+  replace?: boolean;
+  state?: Record<string, unknown>;
+}
+
+export interface UltramodernRouteSettledPayload {
+  pathname: string;
+  locale?: UltramodernWorkspaceLocale;
+  title?: string;
+}
+
+export interface UltramodernRemoteReadyPayload {
+  appId: string;
+  build?: string;
+  surface?: string;
+  version?: string;
+}
+
+export interface UltramodernPerformanceSignalPayload {
+  signalId: UltramodernPerformanceReadinessSignalId;
+  status: UltramodernPerformanceReadinessSignalStatus;
+  durationMs?: number;
+  detail?: Record<string, unknown>;
+}
+
+export interface UltramodernWorkspaceEventPayloadMap {
+  'ultramodern:navigate': UltramodernNavigatePayload;
+  'ultramodern:performance-signal': UltramodernPerformanceSignalPayload;
+  'ultramodern:remote-ready': UltramodernRemoteReadyPayload;
+  'ultramodern:route-settled': UltramodernRouteSettledPayload;
+}
+
+export class UltramodernWorkspaceEventValidationError {
+  readonly message: string;
+  readonly name = 'UltramodernWorkspaceEventValidationError';
+  readonly eventName: UltramodernWorkspaceEventName;
+  readonly payload: unknown;
+
+  constructor(eventName: UltramodernWorkspaceEventName, payload: unknown) {
+    this.message = `Invalid payload for UltraModern workspace event "${eventName}"`;
+    this.eventName = eventName;
+    this.payload = payload;
+  }
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const isNonEmptyString = (value: unknown): value is string =>
+  typeof value === 'string' && value.trim().length > 0;
+
+const isNonNegativeNumber = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value) && value >= 0;
+
+const isUltramodernWorkspaceLocale = (
+  value: unknown,
+): value is UltramodernWorkspaceLocale => value === 'en' || value === 'cs';
+
+const isPerformanceReadinessSignalId = (
+  value: unknown,
+): value is UltramodernPerformanceReadinessSignalId =>
+  value === 'bfcache' ||
+  value === 'core-web-vitals-rum' ||
+  value === 'duplicate-prefetch-warmup' ||
+  value === 'cache-policy-sanity' ||
+  value === 'save-data-behavior' ||
+  value === 'cloudflare-ssr-cache-hints';
+
+const isPerformanceReadinessSignalStatus = (
+  value: unknown,
+): value is UltramodernPerformanceReadinessSignalStatus =>
+  value === 'pass' || value === 'warn' || value === 'fail';
+
+const hasOptionalString = (value: Record<string, unknown>, key: string) =>
+  value[key] === undefined || isNonEmptyString(value[key]);
+
+const hasOptionalBoolean = (value: Record<string, unknown>, key: string) =>
+  value[key] === undefined || typeof value[key] === 'boolean';
+
+const hasOptionalRecord = (value: Record<string, unknown>, key: string) =>
+  value[key] === undefined || isRecord(value[key]);
+
+const hasOptionalNonNegativeNumber = (
+  value: Record<string, unknown>,
+  key: string,
+) => value[key] === undefined || isNonNegativeNumber(value[key]);
+
+const hasOptionalLocale = (value: Record<string, unknown>, key: string) =>
+  value[key] === undefined || isUltramodernWorkspaceLocale(value[key]);
+
+export const isUltramodernNavigatePayload = (
+  payload: unknown,
+): payload is UltramodernNavigatePayload =>
+  isRecord(payload) &&
+  isNonEmptyString(payload['to']) &&
+  hasOptionalBoolean(payload, 'replace') &&
+  hasOptionalRecord(payload, 'state');
+
+export const isUltramodernRouteSettledPayload = (
+  payload: unknown,
+): payload is UltramodernRouteSettledPayload =>
+  isRecord(payload) &&
+  isNonEmptyString(payload['pathname']) &&
+  hasOptionalLocale(payload, 'locale') &&
+  hasOptionalString(payload, 'title');
+
+export const isUltramodernRemoteReadyPayload = (
+  payload: unknown,
+): payload is UltramodernRemoteReadyPayload =>
+  isRecord(payload) &&
+  isNonEmptyString(payload['appId']) &&
+  hasOptionalString(payload, 'build') &&
+  hasOptionalString(payload, 'surface') &&
+  hasOptionalString(payload, 'version');
+
+export const isUltramodernPerformanceSignalPayload = (
+  payload: unknown,
+): payload is UltramodernPerformanceSignalPayload =>
+  isRecord(payload) &&
+  isPerformanceReadinessSignalId(payload['signalId']) &&
+  isPerformanceReadinessSignalStatus(payload['status']) &&
+  hasOptionalNonNegativeNumber(payload, 'durationMs') &&
+  hasOptionalRecord(payload, 'detail');
+
+const ultramodernWorkspaceEventValidators: {
+  [Name in UltramodernWorkspaceEventName]: (
+    payload: unknown,
+  ) => payload is UltramodernWorkspaceEventPayloadMap[Name];
+} = {
+  [ultramodernWorkspaceEventNames.navigate]: isUltramodernNavigatePayload,
+  [ultramodernWorkspaceEventNames.performanceSignal]:
+    isUltramodernPerformanceSignalPayload,
+  [ultramodernWorkspaceEventNames.remoteReady]:
+    isUltramodernRemoteReadyPayload,
+  [ultramodernWorkspaceEventNames.routeSettled]:
+    isUltramodernRouteSettledPayload,
+};
+
+export const isUltramodernWorkspaceEventPayload = <
+  Name extends UltramodernWorkspaceEventName,
+>(
+  eventName: Name,
+  payload: unknown,
+): payload is UltramodernWorkspaceEventPayloadMap[Name] =>
+  ultramodernWorkspaceEventValidators[eventName](payload);
+
+export const assertUltramodernWorkspaceEventPayload = <
+  Name extends UltramodernWorkspaceEventName,
+>(
+  eventName: Name,
+  payload: unknown,
+): UltramodernWorkspaceEventPayloadMap[Name] => {
+  if (!isUltramodernWorkspaceEventPayload(eventName, payload)) {
+    throw new UltramodernWorkspaceEventValidationError(eventName, payload);
+  }
+
+  return payload;
+};
+
+export const createUltramodernWorkspaceEvent = <
+  Name extends UltramodernWorkspaceEventName,
+>(
+  eventName: Name,
+  payload: UltramodernWorkspaceEventPayloadMap[Name],
+): CustomEvent<UltramodernWorkspaceEventPayloadMap[Name]> =>
+  new CustomEvent(eventName, {
+    bubbles: true,
+    composed: true,
+    detail: assertUltramodernWorkspaceEventPayload(eventName, payload),
+  });
+
+export const dispatchUltramodernWorkspaceEvent = <
+  Name extends UltramodernWorkspaceEventName,
+>(
+  target: EventTarget,
+  eventName: Name,
+  payload: UltramodernWorkspaceEventPayloadMap[Name],
+) =>
+  target.dispatchEvent(
+    createUltramodernWorkspaceEvent(eventName, payload),
+  );
+
+export const onUltramodernWorkspaceEvent = <
+  Name extends UltramodernWorkspaceEventName,
+>(
+  target: EventTarget,
+  eventName: Name,
+  handler: (
+    payload: UltramodernWorkspaceEventPayloadMap[Name],
+    event: CustomEvent<UltramodernWorkspaceEventPayloadMap[Name]>,
+  ) => void,
+) => {
+  const listener = (event: Event) => {
+    if (!('detail' in event)) {
+      throw new UltramodernWorkspaceEventValidationError(
+        eventName,
+        undefined,
+      );
+    }
+
+    const customEvent = event as CustomEvent<unknown>;
+    handler(
+      assertUltramodernWorkspaceEventPayload(eventName, customEvent.detail),
+      customEvent as CustomEvent<UltramodernWorkspaceEventPayloadMap[Name]>,
+    );
+  };
+
+  target.addEventListener(eventName, listener);
+
+  return () => {
+    target.removeEventListener(eventName, listener);
+  };
+};
+
+export const dispatchUltramodernNavigate = (
+  target: EventTarget,
+  payload: UltramodernNavigatePayload,
+) =>
+  dispatchUltramodernWorkspaceEvent(
+    target,
+    ultramodernWorkspaceEventNames.navigate,
+    payload,
+  );
+
+export const dispatchUltramodernRouteSettled = (
+  target: EventTarget,
+  payload: UltramodernRouteSettledPayload,
+) =>
+  dispatchUltramodernWorkspaceEvent(
+    target,
+    ultramodernWorkspaceEventNames.routeSettled,
+    payload,
+  );
+
+export const dispatchUltramodernRemoteReady = (
+  target: EventTarget,
+  payload: UltramodernRemoteReadyPayload,
+) =>
+  dispatchUltramodernWorkspaceEvent(
+    target,
+    ultramodernWorkspaceEventNames.remoteReady,
+    payload,
+  );
+
+export const dispatchUltramodernPerformanceSignal = (
+  target: EventTarget,
+  payload: UltramodernPerformanceSignalPayload,
+) =>
+  dispatchUltramodernWorkspaceEvent(
+    target,
+    ultramodernWorkspaceEventNames.performanceSignal,
+    payload,
+  );
+
+export const onUltramodernNavigate = (
+  target: EventTarget,
+  handler: (
+    payload: UltramodernNavigatePayload,
+    event: CustomEvent<UltramodernNavigatePayload>,
+  ) => void,
+) =>
+  onUltramodernWorkspaceEvent(
+    target,
+    ultramodernWorkspaceEventNames.navigate,
+    handler,
+  );
+
+export const onUltramodernRouteSettled = (
+  target: EventTarget,
+  handler: (
+    payload: UltramodernRouteSettledPayload,
+    event: CustomEvent<UltramodernRouteSettledPayload>,
+  ) => void,
+) =>
+  onUltramodernWorkspaceEvent(
+    target,
+    ultramodernWorkspaceEventNames.routeSettled,
+    handler,
+  );
+
+export const onUltramodernRemoteReady = (
+  target: EventTarget,
+  handler: (
+    payload: UltramodernRemoteReadyPayload,
+    event: CustomEvent<UltramodernRemoteReadyPayload>,
+  ) => void,
+) =>
+  onUltramodernWorkspaceEvent(
+    target,
+    ultramodernWorkspaceEventNames.remoteReady,
+    handler,
+  );
+
+export const onUltramodernPerformanceSignal = (
+  target: EventTarget,
+  handler: (
+    payload: UltramodernPerformanceSignalPayload,
+    event: CustomEvent<UltramodernPerformanceSignalPayload>,
+  ) => void,
+) =>
+  onUltramodernWorkspaceEvent(
+    target,
+    ultramodernWorkspaceEventNames.performanceSignal,
+    handler,
+  );

package/templates/workspace/apps/modern.config.shared-module-federation.ts.handlebars

@@ -0,0 +1,42 @@
+  shared: {
+    '@modern-js/plugin-i18n/runtime/no-react-i18next': {
+      requiredVersion: pluginI18nVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@modern-js/plugin-i18n/runtime/no-react-i18next/consumer': {
+      requiredVersion: pluginI18nVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@modern-js/plugin-tanstack/runtime': {
+      requiredVersion: pluginTanstackVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@modern-js/runtime': {
+      requiredVersion: runtimeVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    '@tanstack/react-router': {
+      requiredVersion: dependencies['@tanstack/react-router'],
+      singleton: true,
+      treeShaking: false,
+    },
+    react: {
+      requiredVersion: reactVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    'react-dom': {
+      requiredVersion: reactDomVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+    'react-dom/client': {
+      requiredVersion: reactDomVersion,
+      singleton: true,
+      treeShaking: false,
+    },
+  }