@bleedingdev/modern-js-ultramodern-create 3.9.0-ultramodern.2 → 3.9.0-ultramodern.21

package/dist/esm-node/ultramodern-workspace/demo-components.js

@@ -2,54 +2,28 @@ import "node:module";
 import { appHasApi, appI18nNamespace, distributedSsrExposes, remoteDependencyAlias, resolveApiProtocol, resolveApiStem, resolveRemoteRefs } from "./descriptors.js";
 import { renderFileTemplate } from "./fs-io.js";
 import { createTw, packageName, tailwindPrefixForApp, toPascalCase } from "./naming.js";
-function createFederatedI18nSetup(app, localeRoot) {
-    const namespace = appI18nNamespace(app);
-    return `import type { JSX } from 'react';
-import { FederatedI18nBoundary, useModernI18n } from '@modern-js/plugin-i18n/runtime/consumer';
-import csResource from '${localeRoot}/cs/${namespace}.json';
-import enResource from '${localeRoot}/en/${namespace}.json';
-
-const federatedI18nLanguages = ['en', 'cs'];
-const federatedI18nResources = {
-  cs: { ${JSON.stringify(namespace)}: csResource },
-  en: { ${JSON.stringify(namespace)}: enResource },
-};`;
-}
-function createFederatedI18nBoundary(namespace, content) {
-    return `<FederatedI18nBoundary
-      defaultNamespace="${namespace}"
-      fallbackLanguage="en"
-      resources={federatedI18nResources}
-      supportedLanguages={federatedI18nLanguages}
-    >
-      ${content}
-    </FederatedI18nBoundary>`;
-}
 function createShellPage(shell, remotes = []) {
     const tw = createTw(tailwindPrefixForApp(shell));
     const remoteCount = String(remotes.length);
     return renderFileTemplate('workspace/apps/shell-super-app/src/routes/[lang]/page.tsx', {
-        value0: tw('mx-auto grid max-w-7xl items-center gap-8 py-8 md:grid-cols-[0.9fr_1.1fr] lg:gap-14'),
-        value1: tw('min-w-0'),
-        value2: tw('text-xs font-black uppercase tracking-[0.18em] text-emerald-800'),
-        value3: tw('mt-3 max-w-3xl text-5xl font-black leading-none tracking-normal text-stone-950 md:text-7xl'),
-        value4: tw('mt-5 max-w-2xl text-lg leading-8 text-stone-600'),
-        value5: tw('mt-7 flex flex-wrap gap-3'),
-        value6: tw('inline-flex min-h-11 items-center justify-center rounded-full bg-emerald-800 px-5 font-bold text-white shadow-lg shadow-stone-900/10'),
-        value7: tw('inline-flex min-h-11 items-center justify-center rounded-full border border-stone-900/15 bg-white/90 px-5 font-bold text-stone-950 shadow-lg shadow-stone-900/10'),
-        value8: tw('rounded-3xl bg-white/90 p-6 shadow-2xl shadow-stone-900/15'),
-        value9: tw('grid gap-4 sm:grid-cols-2'),
-        value10: tw('rounded-2xl bg-emerald-50 p-5'),
-        value11: tw('text-sm font-black uppercase tracking-[0.16em] text-emerald-800'),
-        value12: tw('mt-3 block text-3xl font-black text-stone-950'),
-        value13: remoteCount,
-        value14: tw('mt-2 text-sm font-semibold text-stone-600'),
-        value15: tw('rounded-2xl bg-amber-50 p-5'),
-        value16: tw('text-sm font-black uppercase tracking-[0.16em] text-amber-800'),
-        value17: tw('mt-3 block text-3xl font-black text-stone-950'),
-        value18: tw('mt-2 text-sm font-semibold text-stone-600'),
-        value19: tw('sr-only'),
-        value20: tw('sr-only')
+        heroClassName: tw('mx-auto grid max-w-7xl items-center gap-8 py-8 md:grid-cols-[0.9fr_1.1fr] lg:gap-14'),
+        heroContentClassName: tw('min-w-0'),
+        eyebrowClassName: tw('text-xs font-black uppercase tracking-[0.18em] text-emerald-800'),
+        titleClassName: tw('mt-3 max-w-3xl text-5xl font-black leading-none tracking-normal text-stone-950 md:text-7xl'),
+        ledeClassName: tw('mt-5 max-w-2xl text-lg leading-8 text-stone-600'),
+        actionsClassName: tw('mt-7 flex flex-wrap gap-3'),
+        primaryActionClassName: tw('inline-flex min-h-11 items-center justify-center rounded-full bg-emerald-800 px-5 font-bold text-white shadow-lg shadow-stone-900/10'),
+        secondaryActionClassName: tw('inline-flex min-h-11 items-center justify-center rounded-full border border-stone-900/15 bg-white/90 px-5 font-bold text-stone-950 shadow-lg shadow-stone-900/10'),
+        cardsClassName: tw('rounded-3xl bg-white/90 p-6 shadow-2xl shadow-stone-900/15'),
+        cardsGridClassName: tw('grid gap-4 sm:grid-cols-2'),
+        remoteCardClassName: tw('rounded-2xl bg-emerald-50 p-5'),
+        remoteCardKickerClassName: tw('text-sm font-black uppercase tracking-[0.16em] text-emerald-800'),
+        cardValueClassName: tw('mt-3 block text-3xl font-black text-stone-950'),
+        remoteCount,
+        cardBodyClassName: tw('mt-2 text-sm font-semibold text-stone-600'),
+        ssrCardClassName: tw('rounded-2xl bg-amber-50 p-5'),
+        ssrCardKickerClassName: tw('text-sm font-black uppercase tracking-[0.16em] text-amber-800'),
+        hiddenClassName: tw('sr-only')
     });
 }
 function createShellRemoteComponentsSource(shell, remotes = [], worker = false) {
@@ -68,8 +42,7 @@ function createShellRemoteComponentsSource(shell, remotes = [], worker = false)
     }).join('\n');
     const federationImports = widgetRemotes.length > 0 ? renderFileTemplate(worker ? 'workspace/apps/shell-super-app/src/routes/vertical-components.worker.imports.tsx' : 'workspace/apps/shell-super-app/src/routes/vertical-components.imports.tsx', {}) : '';
     const federationHelpers = widgetRemotes.length > 0 ? renderFileTemplate(worker ? 'workspace/apps/shell-super-app/src/routes/vertical-components.worker.helpers.tsx' : 'workspace/apps/shell-super-app/src/routes/vertical-components.helpers.tsx', {
-        value0: shell.id,
-        value1: tw('rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900')
+        unavailableClassName: tw('rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900')
     }) : '';
     const showcaseItems = widgetRemotes.map((remote)=>{
         const componentName = `${toPascalCase(remote.id)}Widget`;
@@ -81,19 +54,18 @@ ${showcaseItems}
       </div>`;
     const remoteCount = String(widgetRemotes.length);
     return renderFileTemplate('workspace/apps/shell-super-app/src/routes/vertical-components.tsx', {
-        value0: federationImports,
-        value1: remoteCount,
-        value2: federationHelpers,
-        value3: remoteComponentExports,
-        value4: tw('flex min-w-0 flex-wrap items-center gap-x-8 gap-y-2 md:flex-1'),
-        value5: shell.mfName,
-        value6: tw('whitespace-nowrap text-xl font-black tracking-normal text-stone-950 no-underline'),
-        value7: tw('inline-flex h-10 shrink-0 items-center justify-center rounded-full border border-stone-900/15 bg-white px-4 text-sm font-extrabold text-stone-950 shadow-lg shadow-stone-900/5'),
-        value8: tw('mx-auto mt-12 max-w-7xl rounded-2xl bg-white/90 p-6 shadow-xl shadow-stone-900/10'),
-        value9: tw('text-lg font-bold text-stone-700'),
-        value10: tw('mx-auto mt-12 max-w-7xl'),
-        value11: shell.mfName,
-        value12: showcaseGrid
+        federationImports,
+        widgetCount: remoteCount,
+        federationHelpers,
+        remoteComponentExports,
+        headerClassName: tw('flex min-w-0 flex-wrap items-center gap-x-8 gap-y-2 md:flex-1'),
+        boundaryId: shell.mfName,
+        titleClassName: tw('whitespace-nowrap text-xl font-black tracking-normal text-stone-950 no-underline'),
+        statusBadgeClassName: tw('inline-flex h-10 shrink-0 items-center justify-center rounded-full border border-stone-900/15 bg-white px-4 text-sm font-extrabold text-stone-950 shadow-lg shadow-stone-900/5'),
+        emptyShowcaseClassName: tw('mx-auto mt-12 max-w-7xl rounded-2xl bg-white/90 p-6 shadow-xl shadow-stone-900/10'),
+        emptyMessageClassName: tw('text-lg font-bold text-stone-700'),
+        showcaseClassName: tw('mx-auto mt-12 max-w-7xl'),
+        showcaseGrid
     });
 }
 function createShellRemoteComponents(shell, remotes = []) {
@@ -140,25 +112,23 @@ function createFederatedComponentsRegistry(scope, host, remotes, worker = false)
       {null}
     </DistributedSsrBoundary>
   ),` : `  ${entry.exportName}: createDistributedSsrComponent<${entry.exportName}Props>({
-    createComponent: () =>
+    createComponent: options =>
       createLazyComponent<
         RemoteComponentModule<${entry.exportName}Props>,
         'default'
       >({
-        export: 'default',
-        fallback,
+        ...options,
         instance: getInstance(),
         loader: () =>
           import('${entry.remoteAlias}') as Promise<
             RemoteComponentModule<${entry.exportName}Props>
           >,
-        loading: null,
       }),
     expose: '${entry.expose}',
     fallback,
     remote: '${entry.remoteId}',
   }),`).join('\n');
-    const runtimeImports = worker ? "import { DistributedSsrBoundary } from '@modern-js/runtime/module-federation';\nimport type { ComponentType, ReactNode } from 'react';" : "import { createLazyComponent } from '@module-federation/modern-js-v3/react';\nimport { getInstance } from '@module-federation/modern-js-v3/runtime';\nimport { createDistributedSsrComponent } from '@modern-js/runtime/module-federation';\nimport type { ComponentType, FunctionComponent, ReactNode } from 'react';";
+    const runtimeImports = worker ? "import { DistributedSsrBoundary } from '@modern-js/federation-runtime';\nimport type { ComponentType, ReactNode } from 'react';" : "import { createLazyComponent } from '@module-federation/modern-js-v3/react';\nimport { getInstance } from '@module-federation/modern-js-v3/runtime';\nimport { createDistributedSsrComponent } from '@modern-js/federation-runtime';\nimport type { ComponentType, FunctionComponent, ReactNode } from 'react';";
     const moduleType = `
 ${worker ? '' : `interface RemoteComponentModule<Props extends object> {
   default: FunctionComponent<Props>;
@@ -278,46 +248,35 @@ export default function Layout() {
 `;
 }
 function createRemoteEntry(app) {
+    return createRemoteSurface(app, {
+        expose: './Route',
+        localeRoot: '../locales',
+        bodyTranslationKey: 'routeSurface'
+    });
+}
+function createRemoteSurface(app, { expose, localeRoot, bodyTranslationKey }) {
     const tw = createTw(tailwindPrefixForApp(app));
     const domain = app.domain ?? app.id;
     const namespace = appI18nNamespace(app);
-    const componentName = `${toPascalCase(domain)}Route`;
-    return `${createFederatedI18nSetup(app, '../locales')}
-
-const ${componentName}Content = () => {
-  const { t } = useModernI18n();
+    const componentName = `${toPascalCase(domain)}${toPascalCase(expose.replace(/^\.\//u, ''))}`;
+    return `import type { JSX } from 'react';
+import { FederatedI18nBoundary, useModernI18n } from '@modern-js/plugin-i18n/runtime/consumer';
+import csResource from '${localeRoot}/cs/${namespace}.json';
+import enResource from '${localeRoot}/en/${namespace}.json';
 
-  return (
-    <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="./Route">
-      <h2 className="${tw('text-2xl font-black')}">{t('${domain}.title')}</h2>
-      <p className="${tw('mt-2 text-stone-600')}">{t('${domain}.routeSurface')}</p>
-    </section>
-  );
+const federatedI18nLanguages = ['en', 'cs'];
+const federatedI18nResources = {
+  cs: { ${JSON.stringify(namespace)}: csResource },
+  en: { ${JSON.stringify(namespace)}: enResource },
 };
 
-export default function ${componentName}(props: Record<string, never>): JSX.Element {
-  void props;
-
-  return (
-    ${createFederatedI18nBoundary(namespace, `<${componentName}Content />`)}
-  );
-}
-`;
-}
-function createRemoteWidget(app) {
-    const tw = createTw(tailwindPrefixForApp(app));
-    const domain = app.domain ?? app.id;
-    const componentName = `${toPascalCase(domain)}Widget`;
-    const namespace = appI18nNamespace(app);
-    return `${createFederatedI18nSetup(app, '../../locales')}
-
 const ${componentName}Content = () => {
   const { t } = useModernI18n();
 
   return (
-    <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="./Widget">
+    <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="${expose}">
       <h2 className="${tw('text-2xl font-black')}">{t('${domain}.title')}</h2>
-      <p className="${tw('mt-2 text-stone-600')}">{t('${domain}.widgetBody')}</p>
+      <p className="${tw('mt-2 text-stone-600')}">{t('${domain}.${bodyTranslationKey}')}</p>
     </section>
   );
 };
@@ -326,7 +285,14 @@ export default function ${componentName}(props: Record<string, never>): JSX.Elem
   void props;
 
   return (
-    ${createFederatedI18nBoundary(namespace, `<${componentName}Content />`)}
+    <FederatedI18nBoundary
+      defaultNamespace="${namespace}"
+      fallbackLanguage="en"
+      resources={federatedI18nResources}
+      supportedLanguages={federatedI18nLanguages}
+    >
+      <${componentName}Content />
+    </FederatedI18nBoundary>
   );
 }
 `;
@@ -338,7 +304,7 @@ function createRemoteExposeFragmentPage(app, expose) {
     const componentName = toPascalCase(expose.replace(/^\.\//u, ''));
     const pageName = `${componentName}FragmentPage`;
     return `import type { ComponentProps } from 'react';
-import { useDistributedSsrFragmentProps } from '@modern-js/runtime/module-federation/distributed-ssr';
+import { useDistributedSsrFragmentProps } from '@modern-js/federation-runtime/distributed-ssr';
 import ${componentName} from '${importPath}';
 
 export default function ${pageName}() {
@@ -358,342 +324,15 @@ export default function ${pageName}() {
 `;
 }
 function createRemoteExposeComponent(app, expose) {
-    const tw = createTw(tailwindPrefixForApp(app));
-    if ('./Widget' === expose) return createRemoteWidget(app);
-    const componentName = `${toPascalCase(app.domain ?? app.id)}${toPascalCase(expose.replace(/^\.\//u, ''))}`;
-    const domain = app.domain ?? app.id;
-    const namespace = appI18nNamespace(app);
-    return `${createFederatedI18nSetup(app, '../../locales')}
-
-const ${componentName}Content = () => {
-  const { t } = useModernI18n();
-
-  return (
-    <section className="${tw('rounded-2xl bg-white/90 p-5 shadow-xl shadow-stone-900/10')}" data-modern-boundary-id="${app.mfName}" data-modern-mf-expose="${expose}">
-      <h2 className="${tw('text-2xl font-black')}">{t('${domain}.title')}</h2>
-      <p className="${tw('mt-2 text-stone-600')}">{t('${domain}.federatedSurface')}</p>
-    </section>
-  );
-};
-
-export default function ${componentName}(props: Record<string, never>): JSX.Element {
-  void props;
-
-  return (
-    ${createFederatedI18nBoundary(namespace, `<${componentName}Content />`)}
-  );
-}
-`;
+    return createRemoteSurface(app, {
+        expose,
+        localeRoot: '../../locales',
+        bodyTranslationKey: './Widget' === expose ? 'widgetBody' : 'federatedSurface'
+    });
 }
 function remoteComponentOutputPath(app, expose) {
     const exposePath = app.exposes?.[expose];
     if (!exposePath?.startsWith('./src/components/')) return;
     return `${app.directory}/${exposePath.replace(/^\.\//u, '')}`;
 }
-const tanstackRuntimeModule = '@modern-js/plugin-tanstack/runtime';
-function ensureNamedImport(source, moduleName, names) {
-    const importEndMarker = `from '${moduleName}';`;
-    const importEnd = source.indexOf(importEndMarker);
-    if (importEnd >= 0) {
-        const importStart = source.lastIndexOf('import ', importEnd);
-        const openBrace = source.indexOf('{', importStart);
-        const closeBrace = source.indexOf('}', openBrace);
-        if (openBrace >= 0 && closeBrace >= 0 && closeBrace < importEnd) {
-            const existingNames = source.slice(openBrace + 1, closeBrace).split(',').map((name)=>name.trim()).filter(Boolean);
-            const missingNames = names.filter((name)=>!existingNames.includes(name));
-            if (0 === missingNames.length) return source;
-            const importedNames = [
-                ...existingNames,
-                ...missingNames
-            ].toSorted((left, right)=>left.localeCompare(right));
-            return `${source.slice(0, openBrace + 1)} ${importedNames.join(', ')} ${source.slice(closeBrace)}`;
-        }
-    }
-    const firstImportEnd = source.indexOf('\n');
-    const importLine = `import { ${names.join(', ')} } from '${moduleName}';\n`;
-    return firstImportEnd < 0 ? `${importLine}${source}` : `${source.slice(0, firstImportEnd + 1)}${importLine}${source.slice(firstImportEnd + 1)}`;
-}
-function removeNamedImport(source, moduleName, name) {
-    const importEndMarker = `from '${moduleName}';`;
-    const importEnd = source.indexOf(importEndMarker);
-    if (importEnd < 0) return source;
-    const importStart = source.lastIndexOf('import ', importEnd);
-    const openBrace = source.indexOf('{', importStart);
-    const closeBrace = source.indexOf('}', openBrace);
-    if (openBrace < 0 || closeBrace < 0 || closeBrace > importEnd) return source;
-    const names = source.slice(openBrace + 1, closeBrace).split(',').map((importName)=>importName.trim()).filter((importName)=>'' !== importName && importName !== name);
-    if (0 === names.length) {
-        const lineEnd = source.indexOf('\n', importEnd + importEndMarker.length);
-        return `${source.slice(0, importStart)}${source.slice(lineEnd < 0 ? source.length : lineEnd + 1)}`;
-    }
-    return `${source.slice(0, openBrace + 1)} ${names.join(', ')} ${source.slice(closeBrace)}`;
-}
-function ensureNavigateHook(source) {
-    if (source.includes('const navigate = useNavigate();')) return source;
-    const functionStart = source.indexOf('export default function ');
-    const parametersEnd = source.indexOf(')', functionStart);
-    const bodyStart = source.indexOf('{', parametersEnd);
-    if (functionStart < 0 || parametersEnd < 0 || bodyStart < 0) return source;
-    return `${source.slice(0, bodyStart + 1)}\n  const navigate = useNavigate();${source.slice(bodyStart + 1)}`;
-}
-function closingParenthesis(source, openingParenthesis) {
-    let depth = 0;
-    let quote = '';
-    let escaped = false;
-    for(let index = openingParenthesis; index < source.length; index += 1){
-        const character = source[index] ?? '';
-        if ('' !== quote) {
-            if (escaped) escaped = false;
-            else if ('\\' === character) escaped = true;
-            else if (character === quote) quote = '';
-            continue;
-        }
-        if ("'" === character || '"' === character || '`' === character) quote = character;
-        else if ('(' === character) depth += 1;
-        else if (')' === character) {
-            depth -= 1;
-            if (0 === depth) return index;
-        }
-    }
-    return -1;
-}
-function removeLegacyLocationSuffixHelper(source) {
-    return source.replace(/(^|\n)const locationSuffix = \(location: \{ hash\?: unknown; search\?: unknown; searchStr\?: unknown \}\) => \{[\s\S]*?\n\};\n/u, '$1').replace('\n  const suffix = locationSuffix(location);', '');
-}
-function rewriteRouterLocationSuffix(source) {
-    let changed = false;
-    const next = source.replace(/^(\s*)to: `\$\{([^`\n]+)\}\$\{suffix\}`,/gmu, (_match, indentation, destination)=>{
-        changed = true;
-        return `${indentation}hash: true,\n${indentation}search: true,\n${indentation}to: ${destination},`;
-    });
-    return {
-        changed,
-        source: changed ? removeLegacyLocationSuffixHelper(next) : next
-    };
-}
-function rewriteWindowLocationAssignments(source) {
-    const callMarker = 'window.location.assign';
-    let next = source;
-    let searchFrom = 0;
-    let changed = false;
-    let preservesCurrentLocationState = false;
-    while(true){
-        const callStart = next.indexOf(callMarker, searchFrom);
-        if (callStart < 0) break;
-        const openingParenthesis = next.indexOf('(', callStart + callMarker.length);
-        if (openingParenthesis < 0) break;
-        const callEnd = closingParenthesis(next, openingParenthesis);
-        if (callEnd < 0) break;
-        let destination = next.slice(openingParenthesis + 1, callEnd).trim();
-        if (destination.endsWith(',')) destination = destination.slice(0, -1).trimEnd();
-        const preservesSuffix = destination.includes("${suffix}") && next.includes('const suffix = locationSuffix(location);');
-        if (preservesSuffix) {
-            destination = destination.replace("${suffix}", '');
-            if (destination.startsWith('`${') && destination.endsWith('}`')) destination = destination.slice(3, -2);
-            preservesCurrentLocationState = true;
-        }
-        const lineStart = next.lastIndexOf('\n', callStart) + 1;
-        const indentation = next.slice(lineStart, callStart);
-        const options = preservesSuffix ? `hash: true,\n${indentation}  search: true,\n${indentation}  to: ${destination},` : `to: ${destination},`;
-        const replacement = `void navigate({\n${indentation}  ${options}\n${indentation}})`;
-        next = `${next.slice(0, callStart)}${replacement}${next.slice(callEnd + 1)}`;
-        searchFrom = callStart + replacement.length;
-        changed = true;
-    }
-    if (preservesCurrentLocationState) next = removeLegacyLocationSuffixHelper(next);
-    return {
-        changed,
-        source: next
-    };
-}
-function closingJsxTag(source, openingTagStart) {
-    let braces = 0;
-    let quote = '';
-    let escaped = false;
-    for(let index = openingTagStart; index < source.length; index += 1){
-        const character = source[index] ?? '';
-        if ('' !== quote) {
-            if (escaped) escaped = false;
-            else if ('\\' === character) escaped = true;
-            else if (character === quote) quote = '';
-            continue;
-        }
-        if ("'" === character || '"' === character || '`' === character) quote = character;
-        else if ('{' === character) braces += 1;
-        else if ('}' === character) braces -= 1;
-        else if ('>' === character && 0 === braces) return index;
-    }
-    return -1;
-}
-function isInternalHref(openingTag) {
-    return openingTag.includes('href="/') || openingTag.includes("href='/") || openingTag.includes('href={`/');
-}
-function removeSyntheticClickHandler(openingTag) {
-    const onClickStart = openingTag.indexOf(' onClick=');
-    if (onClickStart < 0) return openingTag;
-    const valueStart = openingTag.indexOf('{', onClickStart);
-    if (valueStart < 0) return openingTag;
-    let depth = 0;
-    for(let index = valueStart; index < openingTag.length; index += 1){
-        const character = openingTag[index] ?? '';
-        if ('{' === character) depth += 1;
-        else if ('}' === character) {
-            depth -= 1;
-            if (0 === depth) {
-                const handler = openingTag.slice(valueStart, index + 1);
-                return handler.includes('preventDefault') ? `${openingTag.slice(0, onClickStart)}${openingTag.slice(index + 1)}` : openingTag;
-            }
-        }
-    }
-    return openingTag;
-}
-function rewriteCheckoutCartLink(source) {
-    let changed = false;
-    const next = source.replace(/^(\s*)to=\{`\/\$\{language\}\/cart\?sku=\$\{sku\}`\},?$/gmu, (_match, indentation)=>{
-        changed = true;
-        return `${indentation}params={{ lang: language }}\n${indentation}search={{ sku }}\n${indentation}to="/$lang/cart"`;
-    });
-    return {
-        changed,
-        source: next
-    };
-}
-function rewriteCrossRemoteTractorsLink(source) {
-    let next = source;
-    let searchFrom = 0;
-    let changed = false;
-    while(true){
-        const openingTagStart = next.indexOf('<Link', searchFrom);
-        if (openingTagStart < 0) break;
-        const openingTagEnd = closingJsxTag(next, openingTagStart);
-        if (openingTagEnd < 0) break;
-        const openingTag = next.slice(openingTagStart, openingTagEnd + 1);
-        if (!openingTag.includes("to={`/${language}/tractors`}")) {
-            searchFrom = openingTagEnd + 1;
-            continue;
-        }
-        const closingTagStart = next.indexOf('</Link>', openingTagEnd + 1);
-        if (closingTagStart < 0) break;
-        const nativeOpeningTag = openingTag.replace('<Link', '<a').replace('to=', 'href=');
-        next = `${next.slice(0, openingTagStart)}${nativeOpeningTag}${next.slice(openingTagEnd + 1, closingTagStart)}</a>${next.slice(closingTagStart + 7)}`;
-        searchFrom = openingTagStart + nativeOpeningTag.length;
-        changed = true;
-    }
-    return {
-        changed,
-        source: next
-    };
-}
-function rewriteInternalAnchors(source) {
-    let next = source;
-    let searchFrom = 0;
-    let changed = false;
-    while(true){
-        const openingTagStart = next.indexOf('<a', searchFrom);
-        if (openingTagStart < 0) break;
-        const boundary = next[openingTagStart + 2];
-        if (' ' !== boundary && '\n' !== boundary && '\t' !== boundary) {
-            searchFrom = openingTagStart + 2;
-            continue;
-        }
-        const openingTagEnd = closingJsxTag(next, openingTagStart);
-        if (openingTagEnd < 0) break;
-        const openingTag = next.slice(openingTagStart, openingTagEnd + 1);
-        if (!isInternalHref(openingTag)) {
-            searchFrom = openingTagEnd + 1;
-            continue;
-        }
-        const closingTagStart = next.indexOf('</a>', openingTagEnd + 1);
-        if (closingTagStart < 0) break;
-        const nativeOpeningTag = removeSyntheticClickHandler(openingTag).replace('<a', '<Link').replace('href=', 'to=');
-        next = `${next.slice(0, openingTagStart)}${nativeOpeningTag}${next.slice(openingTagEnd + 1, closingTagStart)}</Link>${next.slice(closingTagStart + 4)}`;
-        searchFrom = openingTagStart + nativeOpeningTag.length;
-        changed = true;
-    }
-    return {
-        changed,
-        source: next
-    };
-}
-function rewriteJsxElementName(source, elementName, componentName) {
-    const openingMarker = `<${elementName}`;
-    const closingMarker = `</${elementName}>`;
-    let next = source;
-    let searchFrom = 0;
-    let changed = false;
-    while(true){
-        const openingTagStart = next.indexOf(openingMarker, searchFrom);
-        if (openingTagStart < 0) break;
-        const boundary = next[openingTagStart + openingMarker.length];
-        if (' ' !== boundary && '\n' !== boundary && '\t' !== boundary) {
-            searchFrom = openingTagStart + openingMarker.length;
-            continue;
-        }
-        const openingTagEnd = closingJsxTag(next, openingTagStart);
-        const closingTagStart = next.indexOf(closingMarker, openingTagEnd + 1);
-        if (openingTagEnd < 0 || closingTagStart < 0) break;
-        next = `${next.slice(0, openingTagStart)}<${componentName}${next.slice(openingTagStart + openingMarker.length, closingTagStart)}</${componentName}>${next.slice(closingTagStart + closingMarker.length)}`;
-        searchFrom = openingTagStart + componentName.length + 1;
-        changed = true;
-    }
-    return {
-        changed,
-        source: next
-    };
-}
-function ensureNoPropsComponentContract(source) {
-    let changed = false;
-    let next = source.replace(/export default function ([A-Za-z_$][\w$]*)\(\) \{/u, (_match, componentName)=>{
-        changed = true;
-        return `export default function ${componentName}(\n  props: Record<string, never>\n): JSX.Element {\n  void props;`;
-    });
-    if (changed) next = ensureNamedImport(next, 'react', [
-        'JSX'
-    ]);
-    return {
-        changed,
-        source: next
-    };
-}
-function regenerateGeneratedProductRouteAdapter(source) {
-    let next = source.replaceAll('search.sku', "search['sku']");
-    next = next.replace(/<(DecideProductPage|ProductPage) sku=\{sku\} slug=\{slug\} \/>/u, `<$1\n        {...(sku === undefined ? {} : { sku })}\n        {...(slug === undefined ? {} : { slug })}\n      />`);
-    return next;
-}
-function regenerateGeneratedNavigationSurface(source, kind) {
-    const routerLocationSuffix = rewriteRouterLocationSuffix(source);
-    const anchors = 'checkout-page' === kind ? rewriteCrossRemoteTractorsLink(routerLocationSuffix.source) : rewriteInternalAnchors(routerLocationSuffix.source);
-    const cartLink = 'checkout-add-to-cart' === kind ? rewriteCheckoutCartLink(anchors.source) : {
-        changed: false,
-        source: anchors.source
-    };
-    const locationAssignments = rewriteWindowLocationAssignments(cartLink.source);
-    const forms = 'demo-component' === kind || 'checkout-page' === kind ? rewriteJsxElementName(locationAssignments.source, 'form', 'Form') : {
-        changed: false,
-        source: locationAssignments.source
-    };
-    const noProps = 'checkout-page' === kind ? ensureNoPropsComponentContract(forms.source) : {
-        changed: false,
-        source: forms.source
-    };
-    let next = noProps.source;
-    const usesLink = next.includes('<Link');
-    if (forms.changed || anchors.changed && usesLink || locationAssignments.changed) {
-        const imports = [
-            ...forms.changed ? [
-                'Form'
-            ] : [],
-            ...anchors.changed && usesLink ? [
-                'Link'
-            ] : [],
-            ...locationAssignments.changed ? [
-                'useNavigate'
-            ] : []
-        ];
-        next = ensureNamedImport(next, tanstackRuntimeModule, imports);
-    }
-    if (!usesLink) next = removeNamedImport(next, tanstackRuntimeModule, 'Link');
-    if (locationAssignments.changed) next = ensureNavigateHook(next);
-    return next;
-}
-export { createFederatedComponentsRegistry, createLayout, createRemoteEntry, createRemoteExposeComponent, createRemoteExposeFragmentPage, createRemotePage, createShellPage, createShellRemoteComponents, createShellWorkerRemoteComponents, regenerateGeneratedNavigationSurface, regenerateGeneratedProductRouteAdapter, remoteComponentOutputPath };
+export { createFederatedComponentsRegistry, createLayout, createRemoteEntry, createRemoteExposeComponent, createRemoteExposeFragmentPage, createRemotePage, createShellPage, createShellRemoteComponents, createShellWorkerRemoteComponents, remoteComponentOutputPath };

package/dist/esm-node/ultramodern-workspace/descriptors.js

@@ -1,6 +1,5 @@
 import "node:module";
 import { packageName, toCamelCase, toEnvSegment, toKebabCase, toPascalCase } from "./naming.js";
-const ULTRAMODERN_CONFIG_PATH = '.modernjs/ultramodern.json';
 function distributedSsrExposes(app) {
     return Object.keys(app.exposes ?? {}).filter((expose)=>'./Route' !== expose).toSorted();
 }
@@ -189,4 +188,4 @@ function createCloudflarePublicUrlEnv(app) {
 function appI18nNamespace(app) {
     return 'shell' === app.kind ? 'shell' : app.domain ?? app.id;
 }
-export { ULTRAMODERN_CONFIG_PATH, appEmitsBrowserUi, appHasApi, appI18nNamespace, createBackendFederationContainerEntry, createBackendFederationManifestEnv, createBackendFederationManifestUrl, createBackendFederationName, createCloudflarePublicUrlEnv, createCloudflareWorkerName, createModuleFederationRemoteContracts, createNeutralOwnership, createRemoteManifestEnv, createShellHost, createVerticalDescriptor, distributedSsrExposes, distributedSsrFragmentRoute, distributedSsrFragmentSlug, remoteDependencyAlias, resolveApiPrefix, resolveApiProtocol, resolveApiStem, resolveRemoteRefs, sharedPackages, shellApp, verticalApiApps, zephyrRemoteDependency };
+export { appEmitsBrowserUi, appHasApi, appI18nNamespace, createBackendFederationContainerEntry, createBackendFederationManifestEnv, createBackendFederationManifestUrl, createBackendFederationName, createCloudflarePublicUrlEnv, createCloudflareWorkerName, createModuleFederationRemoteContracts, createNeutralOwnership, createRemoteManifestEnv, createShellHost, createVerticalDescriptor, distributedSsrExposes, distributedSsrFragmentRoute, distributedSsrFragmentSlug, remoteDependencyAlias, resolveApiPrefix, resolveApiProtocol, resolveApiStem, resolveRemoteRefs, sharedPackages, shellApp, verticalApiApps, zephyrRemoteDependency };

package/dist/esm-node/ultramodern-workspace/fs-io.js

@@ -25,7 +25,8 @@ const workspaceOxfmtIgnorePatterns = [
     '.modern',
     '.modernjs',
     '**/modern-tanstack/**',
-    '**/routeTree.gen.*'
+    '**/routeTree.gen.*',
+    '**/src/routes/ultramodern-route-metadata.ts'
 ];
 const formattableExtensions = new Set([
     '.cjs',
@@ -100,7 +101,39 @@ function writeFileReplacing(targetDir, relativePath, content) {
 function writeJson(targetDir, relativePath, value) {
     writeFile(targetDir, relativePath, `${JSON.stringify(value, null, 2)}\n`);
 }
-function formatGeneratedSourceCandidates(sources) {
+function formatGeneratedSourceCandidates(sources, formattingWorkspaceRoot) {
+    if (formattingWorkspaceRoot) {
+        const oxfmtBin = resolveOxfmtBin();
+        return sources.map(([relativePath, source])=>{
+            assertSafeRelativePath(relativePath);
+            if (!formattableExtensions.has(node_path.extname(relativePath))) return source;
+            const result = spawnSync(process.execPath, [
+                oxfmtBin,
+                '--stdin-filepath',
+                node_path.resolve(formattingWorkspaceRoot, relativePath)
+            ], {
+                cwd: formattingWorkspaceRoot,
+                input: source,
+                encoding: 'utf-8',
+                env: {
+                    ...process.env,
+                    FORCE_COLOR: '0'
+                }
+            });
+            if (0 !== result.status) {
+                const detail = [
+                    result.error?.message,
+                    result.stderr?.trim(),
+                    result.stdout?.trim()
+                ].filter(Boolean).join('\n');
+                throw new Error([
+                    'Failed to format generated UltraModern workspace output.',
+                    detail
+                ].filter(Boolean).join('\n'));
+            }
+            return result.stdout;
+        });
+    }
     const temporaryRoot = node_fs.mkdtempSync(node_path.join(node_os.tmpdir(), 'ultramodern-format-'));
     try {
         sources.forEach(([relativePath, source])=>writeFileReplacing(temporaryRoot, relativePath, source));
@@ -167,7 +200,9 @@ function writePreformatConfig(targetDir) {
         '  ignorePatterns: [',
         ...workspaceOxfmtIgnorePatterns.map((pattern)=>`    ${JSON.stringify(pattern)},`),
         '  ],',
+        '  printWidth: 120,',
         '  singleQuote: true,',
+        "  trailingComma: 'all',",
         '});',
         ''
     ].join('\n'), 'utf-8');