@bleedingdev/modern-js-create 3.2.0-ultramodern.12 → 3.2.0-ultramodern.121

package/dist/esm/ultramodern-workspace/add-vertical.js

@@ -0,0 +1,252 @@
+import node_fs from "node:fs";
+import node_path from "node:path";
+import { WORKSPACE_PACKAGE_VERSION } from "../ultramodern-package-source.js";
+import { createAppEnvDts, createAppRuntimeConfig, createShellFrameComponent } from "./app-files.js";
+import { createGeneratedContract } from "./contracts.js";
+import { createShellPage, createShellRemoteComponents } from "./demo-components.js";
+import { GENERATED_CONTRACT_PATH, appHasEffectApi, appI18nNamespace, createModuleFederationRemoteContracts, createNeutralOwnership, createShellHost, createVerticalDescriptor, effectApiPrefix, remoteDependencyAlias, shellApp, zephyrRemoteDependency } from "./descriptors.js";
+import { createShellEffectClient, effectApiTopologyMetadata } from "./effect-api.js";
+import { readJsonFile, writeFileReplacing, writeJsonFile } from "./fs-io.js";
+import { createAppPublicLocaleMessages } from "./locales.js";
+import { createShellModuleFederationConfig } from "./module-federation.js";
+import { assertUniqueTailwindPrefixes, packageName, toEnvSegment, toKebabCase, toPackageScope, toPascalCase } from "./naming.js";
+import { createAppPackage, createRootPackageJson } from "./package-json.js";
+import { resolvePackageSource } from "./package-source.js";
+import { createCloudflareDeployContract } from "./policy.js";
+import { createPublicWebAppArtifacts, rewriteWorkspaceAssetsForApp } from "./public-surface.js";
+import { isRecord } from "./types.js";
+import { writeGeneratedWorkspaceScripts } from "./workspace-scripts.js";
+import { writeApp } from "./write-workspace.js";
+const FIRST_VERTICAL_PORT = 4101;
+function existingPackageSource(workspaceRoot, modernVersion, packageSource) {
+    if (packageSource) return resolvePackageSource({
+        targetDir: workspaceRoot,
+        packageName: node_path.basename(workspaceRoot),
+        modernVersion,
+        packageSource
+    });
+    const metadataPath = node_path.join(workspaceRoot, '.modernjs/ultramodern-package-source.json');
+    if (!node_fs.existsSync(metadataPath)) return resolvePackageSource({
+        targetDir: workspaceRoot,
+        packageName: node_path.basename(workspaceRoot),
+        modernVersion
+    });
+    const metadata = readJsonFile(metadataPath);
+    const aliases = metadata.modernPackages?.aliases ?? {};
+    const firstAlias = Object.values(aliases).find((value)=>'string' == typeof value);
+    const firstPackage = Object.keys(aliases)[0];
+    const aliasScope = firstAlias?.match(/^@([^/]+)\//)?.[1];
+    const unscopedName = firstPackage?.split('/').at(-1) ?? '';
+    const aliasUnscopedName = firstAlias?.split('/').at(-1) ?? '';
+    const aliasPackageNamePrefix = aliasUnscopedName && unscopedName && aliasUnscopedName.endsWith(unscopedName) ? aliasUnscopedName.slice(0, -unscopedName.length) : void 0;
+    return {
+        strategy: 'install' === metadata.strategy ? 'install' : 'workspace',
+        modernPackageVersion: 'string' == typeof metadata.modernPackages?.specifier ? metadata.modernPackages.specifier : modernVersion,
+        registry: metadata.modernPackages?.registry,
+        aliasScope,
+        aliasPackageNamePrefix
+    };
+}
+function existingTailwindEnabled(workspaceRoot) {
+    const contractPath = node_path.join(workspaceRoot, GENERATED_CONTRACT_PATH);
+    if (!node_fs.existsSync(contractPath)) return true;
+    const contract = readJsonFile(contractPath);
+    const apps = isRecord(contract) && Array.isArray(contract.apps) ? contract.apps : [];
+    const shell = apps.find((app)=>isRecord(app) && app.id === shellApp.id);
+    return shell?.styling && isRecord(shell.styling) ? false !== shell.styling.tailwind : true;
+}
+function assertValidVerticalName(name) {
+    const normalized = toKebabCase(name);
+    if (!normalized || normalized !== name) throw new Error(`Invalid Vertical name "${name}". Use lowercase kebab-case.`);
+    return normalized;
+}
+function nextAvailablePort(ports) {
+    const numericPorts = Object.values(ports).filter((value)=>'number' == typeof value && Number.isFinite(value));
+    return Math.max(FIRST_VERTICAL_PORT - 1, ...numericPorts) + 1;
+}
+function assertCanCreate(workspaceRoot, relativePath) {
+    if (node_fs.existsSync(node_path.join(workspaceRoot, relativePath))) throw new Error(`Refusing to overwrite existing path: ${relativePath}`);
+}
+function updateRootWorkspaceScripts(workspaceRoot, scope, packageSource, remotes) {
+    const packagePath = node_path.join(workspaceRoot, 'package.json');
+    const rootPackage = readJsonFile(packagePath);
+    const generatedRootPackage = createRootPackageJson(scope, packageSource, remotes);
+    rootPackage.scripts = generatedRootPackage.scripts;
+    writeJsonFile(packagePath, rootPackage);
+}
+function rewriteShellAppFiles(workspaceRoot, scope, packageSource, enableTailwind, remotes) {
+    const shellHost = createShellHost(remotes);
+    const publicWeb = createPublicWebAppArtifacts(shellHost);
+    writeJsonFile(node_path.join(workspaceRoot, `${shellApp.directory}/package.json`), createAppPackage(scope, shellHost, packageSource, enableTailwind, remotes));
+    writeFileReplacing(workspaceRoot, `${shellApp.directory}/src/modern-app-env.d.ts`, createAppEnvDts(shellHost, remotes));
+    writeFileReplacing(workspaceRoot, publicWeb.jsonLdHelperFile.path, publicWeb.jsonLdHelperFile.content);
+    writeFileReplacing(workspaceRoot, publicWeb.routeMetadataFile.path, publicWeb.routeMetadataFile.content);
+    writeFileReplacing(workspaceRoot, publicWeb.routeHeadFile.path, publicWeb.routeHeadFile.content);
+    for (const generatedFile of publicWeb.routeMetaFiles)writeFileReplacing(workspaceRoot, generatedFile.path, generatedFile.content);
+    rewriteWorkspaceAssetsForApp(workspaceRoot, shellHost);
+    writeFileReplacing(workspaceRoot, `${shellApp.directory}/src/modern.runtime.ts`, createAppRuntimeConfig(shellHost, scope, remotes));
+    writeJsonFile(node_path.join(workspaceRoot, `${shellApp.directory}/locales/en/translation.json`), createAppPublicLocaleMessages(shellHost, 'en', remotes));
+    writeJsonFile(node_path.join(workspaceRoot, `${shellApp.directory}/locales/en/${appI18nNamespace(shellHost)}.json`), createAppPublicLocaleMessages(shellHost, 'en', remotes));
+    writeJsonFile(node_path.join(workspaceRoot, `${shellApp.directory}/locales/cs/translation.json`), createAppPublicLocaleMessages(shellHost, 'cs', remotes));
+    writeJsonFile(node_path.join(workspaceRoot, `${shellApp.directory}/locales/cs/${appI18nNamespace(shellHost)}.json`), createAppPublicLocaleMessages(shellHost, 'cs', remotes));
+    writeFileReplacing(workspaceRoot, `${shellApp.directory}/module-federation.config.ts`, createShellModuleFederationConfig(scope, remotes));
+    writeFileReplacing(workspaceRoot, `${shellApp.directory}/src/routes/[lang]/page.tsx`, createShellPage(remotes));
+    writeFileReplacing(workspaceRoot, `${shellApp.directory}/src/routes/vertical-components.tsx`, createShellRemoteComponents(scope, remotes));
+    writeFileReplacing(workspaceRoot, `${shellApp.directory}/src/routes/shell-frame.tsx`, createShellFrameComponent());
+    writeFileReplacing(workspaceRoot, `${shellApp.directory}/src/effect/vertical-clients.ts`, createShellEffectClient(scope, remotes));
+}
+function addShellZephyrDependency(workspaceRoot, scope, remote) {
+    const packagePath = node_path.join(workspaceRoot, shellApp.directory, 'package.json');
+    const shellPackage = readJsonFile(packagePath);
+    shellPackage['zephyr:dependencies'] ??= {};
+    shellPackage['zephyr:dependencies'][remoteDependencyAlias(remote)] = zephyrRemoteDependency(scope, remote);
+    writeJsonFile(packagePath, shellPackage);
+}
+function addShellWorkspaceDependency(workspaceRoot, scope, remote) {
+    if (!appHasEffectApi(remote)) return;
+    const packagePath = node_path.join(workspaceRoot, shellApp.directory, 'package.json');
+    const shellPackage = readJsonFile(packagePath);
+    shellPackage.dependencies ??= {};
+    shellPackage.dependencies[packageName(scope, remote.packageSuffix)] = WORKSPACE_PACKAGE_VERSION;
+    writeJsonFile(packagePath, shellPackage);
+}
+function verticalTopologyEntry(scope, vertical, remotes = []) {
+    return {
+        id: vertical.id,
+        kind: vertical.kind,
+        domain: vertical.domain,
+        package: packageName(scope, vertical.packageSuffix),
+        path: vertical.directory,
+        moduleFederation: {
+            role: 'remote',
+            name: vertical.mfName,
+            manifestUrl: `http://localhost:${vertical.port}/mf-manifest.json`,
+            exposes: Object.keys(vertical.exposes ?? {}),
+            ...vertical.verticalRefs?.length ? {
+                verticalRefs: vertical.verticalRefs,
+                remotes: createModuleFederationRemoteContracts(vertical, remotes)
+            } : {},
+            ssr: true,
+            fallbackTelemetryEvent: 'modernjs:mv-runtime-parity',
+            sharedContractVersion: 'mf-ssr-contract-v1'
+        },
+        ...effectApiTopologyMetadata(vertical) ? {
+            api: effectApiTopologyMetadata(vertical)
+        } : {},
+        cloudflare: createCloudflareDeployContract(scope, vertical),
+        ownership: vertical.ownership
+    };
+}
+function ownershipEntry(scope, owner) {
+    return {
+        id: owner.id,
+        package: packageName(scope, owner.packageSuffix),
+        path: owner.directory,
+        ownership: owner.ownership
+    };
+}
+function verticalsFromTopology(topology, ports) {
+    return (topology.verticals ?? []).map((vertical)=>{
+        const domain = vertical.domain ?? String(vertical.id);
+        const packageSuffix = vertical.package?.split('/').at(-1) ?? domain;
+        const effectApi = vertical.api?.effect ? {
+            stem: 'string' == typeof vertical.api.effect.basePath ? vertical.api.effect.basePath.split('/').filter(Boolean).at(-1) ?? domain : domain,
+            prefix: vertical.api.effect.bff?.prefix ?? `/${domain}-api`,
+            consumedBy: Array.isArray(vertical.api.effect.consumedBy) ? vertical.api.effect.consumedBy : [
+                shellApp.id,
+                vertical.id
+            ]
+        } : void 0;
+        return {
+            id: vertical.id,
+            directory: 'string' == typeof vertical.path ? vertical.path : `verticals/${domain}`,
+            packageSuffix,
+            displayName: vertical.displayName ?? `${toPascalCase(domain)} Vertical`,
+            kind: 'vertical',
+            domain,
+            portEnv: `VERTICAL_${toEnvSegment(domain)}_PORT`,
+            port: 'number' == typeof ports[vertical.id] ? ports[vertical.id] : 0,
+            mfName: vertical.moduleFederation?.name ?? `vertical${toPascalCase(domain)}`,
+            ...Array.isArray(vertical.moduleFederation?.exposes) ? {
+                exposes: Object.fromEntries(vertical.moduleFederation.exposes.map((expose)=>[
+                        expose,
+                        './Route' === expose ? './src/federation-entry.tsx' : './Widget' === expose ? `./src/components/${domain}-widget.tsx` : ''
+                    ]))
+            } : {},
+            ...Array.isArray(vertical.moduleFederation?.verticalRefs) ? {
+                verticalRefs: vertical.moduleFederation.verticalRefs
+            } : Array.isArray(vertical.moduleFederation?.remotes) ? {
+                verticalRefs: vertical.moduleFederation.remotes.map((entry)=>entry.id).filter((id)=>'string' == typeof id)
+            } : {},
+            ...effectApi ? {
+                effectApi
+            } : {},
+            ownership: vertical.ownership ?? createNeutralOwnership(vertical.id)
+        };
+    });
+}
+function addUltramodernVertical(options) {
+    const name = assertValidVerticalName(options.name);
+    const rootPackage = readJsonFile(node_path.join(options.workspaceRoot, 'package.json'));
+    const scope = toPackageScope(String(rootPackage.name ?? node_path.basename(options.workspaceRoot)));
+    const topologyPath = node_path.join(options.workspaceRoot, 'topology/reference-topology.json');
+    const ownershipPath = node_path.join(options.workspaceRoot, 'topology/ownership.json');
+    const overlayPath = node_path.join(options.workspaceRoot, 'topology/local-overlays/development.json');
+    for (const requiredPath of [
+        topologyPath,
+        ownershipPath,
+        overlayPath
+    ])if (!node_fs.existsSync(requiredPath)) throw new Error(`Missing UltraModern workspace file: ${requiredPath}`);
+    const topology = readJsonFile(topologyPath);
+    const ownership = readJsonFile(ownershipPath);
+    const overlay = readJsonFile(overlayPath);
+    overlay.ports ??= {};
+    const packageSource = existingPackageSource(options.workspaceRoot, options.modernVersion, options.packageSource);
+    const enableTailwind = options.enableTailwind ?? existingTailwindEnabled(options.workspaceRoot);
+    const port = nextAvailablePort(overlay.ports);
+    const vertical = createVerticalDescriptor(name, port);
+    assertCanCreate(options.workspaceRoot, vertical.directory);
+    if ((topology.verticals ?? []).some((entry)=>entry.id === vertical.id)) throw new Error(`Topology already contains ${vertical.id}`);
+    if (Object.values(overlay.ports).includes(vertical.port)) throw new Error(`Development port ${vertical.port} is already in use`);
+    writeApp(options.workspaceRoot, scope, vertical, packageSource, enableTailwind);
+    topology.shell ??= {};
+    topology.shell.verticalRefs ??= [];
+    topology.shell.verticalRefs.push(vertical.id);
+    topology.shell.moduleFederation ??= {};
+    topology.shell.moduleFederation.remotes ??= [];
+    topology.shell.moduleFederation.remotes.push({
+        id: vertical.id,
+        name: vertical.mfName,
+        manifestUrl: `http://localhost:${vertical.port}/mf-manifest.json`
+    });
+    topology.verticals ??= [];
+    topology.verticals.push(verticalTopologyEntry(scope, vertical));
+    ownership.owners ??= [];
+    ownership.owners.push(ownershipEntry(scope, vertical));
+    overlay.ports[vertical.id] = vertical.port;
+    overlay.manifests ??= {};
+    overlay.manifests[vertical.id] = `http://localhost:${vertical.port}/mf-manifest.json`;
+    overlay.apis ??= {};
+    overlay.apis[vertical.id] = `http://localhost:${vertical.port}${effectApiPrefix(vertical)}`;
+    writeJsonFile(topologyPath, topology);
+    writeJsonFile(ownershipPath, ownership);
+    writeJsonFile(overlayPath, overlay);
+    const updatedVerticals = verticalsFromTopology(topology, overlay.ports);
+    assertUniqueTailwindPrefixes([
+        shellApp,
+        ...updatedVerticals
+    ]);
+    writeJsonFile(node_path.join(options.workspaceRoot, GENERATED_CONTRACT_PATH), createGeneratedContract(scope, [
+        {
+            ...shellApp,
+            verticalRefs: updatedVerticals.map((vertical)=>vertical.id)
+        },
+        ...updatedVerticals
+    ], enableTailwind));
+    rewriteShellAppFiles(options.workspaceRoot, scope, packageSource, enableTailwind, updatedVerticals);
+    writeGeneratedWorkspaceScripts(options.workspaceRoot, scope, enableTailwind, updatedVerticals);
+    addShellZephyrDependency(options.workspaceRoot, scope, vertical);
+    addShellWorkspaceDependency(options.workspaceRoot, scope, vertical);
+    updateRootWorkspaceScripts(options.workspaceRoot, scope, packageSource, updatedVerticals);
+}
+export { addShellWorkspaceDependency, addShellZephyrDependency, addUltramodernVertical, assertCanCreate, assertValidVerticalName, existingPackageSource, existingTailwindEnabled, nextAvailablePort, ownershipEntry, rewriteShellAppFiles, updateRootWorkspaceScripts, verticalTopologyEntry, verticalsFromTopology };

package/dist/esm/ultramodern-workspace/app-files.js

@@ -0,0 +1,149 @@
+import { appI18nNamespace, remoteDependencyAlias, resolveRemoteRefs, shellApp } from "./descriptors.js";
+import { readFileTemplate, renderFileTemplate } from "./fs-io.js";
+import { packageName, tailwindPrefixForApp } from "./naming.js";
+function createBoundaryDebugMetadata(scope, remotes = []) {
+    return {
+        appId: shellApp.id,
+        boundaries: [
+            shellApp,
+            ...remotes
+        ].map((app)=>({
+                appId: app.id,
+                label: app.displayName,
+                mfName: app.mfName,
+                ownerTeam: app.ownership.team,
+                packageName: packageName(scope, app.packageSuffix),
+                role: 'shell' === app.kind ? 'host' : 'vertical'
+            })),
+        schemaVersion: 1
+    };
+}
+function createAppEnvDts(app, remotes = []) {
+    const remoteModuleDeclarations = resolveRemoteRefs(app, remotes).flatMap((remote)=>Object.keys(remote.exposes ?? {}).filter((expose)=>'./Route' !== expose).map((expose)=>{
+            const moduleName = `${remoteDependencyAlias(remote)}/${expose.replace(/^\.\//u, '')}`;
+            return `declare module '${moduleName}' {
+  const Component: React.ComponentType<Record<string, never>>;
+  export default Component;
+}
+`;
+        })).join('\n');
+    const reactTypeReference = remoteModuleDeclarations ? "/// <reference types='react' />\n" : '';
+    const siteUrlDeclaration = 'declare const ULTRAMODERN_SITE_URL: string;';
+    return `${reactTypeReference}/// <reference types='@modern-js/app-tools/types' />
+
+${siteUrlDeclaration}
+declare module '*.svg' {
+  const url: string;
+  export default url;
+}
+declare module '*.css';
+${remoteModuleDeclarations ? `\n${remoteModuleDeclarations}` : ''}`;
+}
+function createAppRuntimeConfig(app, scope, remotes = []) {
+    const pluginsConfig = 'shell' === app.kind ? `  plugins: [
+    ultramodernBoundaryDebuggerPlugin({
+      metadata: ${JSON.stringify(createBoundaryDebugMetadata(scope, remotes), null, 6).split('\n').join('\n      ')},
+    }),
+  ],
+` : '';
+    return `import { defineRuntimeConfig } from '@modern-js/runtime';
+${'shell' === app.kind ? "import { ultramodernBoundaryDebuggerPlugin } from '@modern-js/runtime/boundary-debugger';\n" : ''}import { createInstance } from 'i18next';
+import csResource from '../locales/cs/${appI18nNamespace(app)}.json';
+import enResource from '../locales/en/${appI18nNamespace(app)}.json';
+import { ultramodernRouteNamespace } from './routes/ultramodern-route-metadata';
+
+type LocaleResource = string | { readonly [key: string]: LocaleResource };
+
+const flattenLocaleResource = (
+  resource: LocaleResource,
+  prefix = '',
+): Record<string, string> => {
+  if (typeof resource === 'string') {
+    return prefix.length > 0 ? { [prefix]: resource } : {};
+  }
+
+  return Object.fromEntries(
+    Object.entries(resource).flatMap(([key, value]) => {
+      const nextKey = prefix.length > 0 ? \`\${prefix}.\${key}\` : key;
+      return typeof value === 'string'
+        ? [[nextKey, value]]
+        : Object.entries(flattenLocaleResource(value, nextKey));
+    }),
+  );
+};
+
+const i18nInstance = createInstance();
+const resources = {
+  cs: { [ultramodernRouteNamespace]: flattenLocaleResource(csResource) },
+  en: { [ultramodernRouteNamespace]: flattenLocaleResource(enResource) },
+} as const;
+
+export default defineRuntimeConfig({
+  i18n: {
+    i18nInstance,
+    initOptions: {
+      defaultNS: ultramodernRouteNamespace,
+      fallbackLng: 'en',
+      interpolation: {
+        escapeValue: false,
+      },
+      ns: [ultramodernRouteNamespace, 'translation'],
+      resources,
+      supportedLngs: ['en', 'cs'],
+    },
+  },
+${pluginsConfig}
+  router: {
+    framework: 'tanstack',
+  },
+});
+`;
+}
+function createCssTokenImport(scope) {
+    return `@import '${packageName(scope, 'shared-design-tokens')}/tokens.css';\n`;
+}
+function createTailwindImport(prefix) {
+    return `@import 'tailwindcss' prefix(${prefix}) source(none);\n@source '..';\n`;
+}
+function createShellStyles(enableTailwind, scope) {
+    return `${enableTailwind ? createTailwindImport(tailwindPrefixForApp(shellApp)) : ''}${createCssTokenImport(scope)}`;
+}
+function createRemoteStyles(enableTailwind, scope, app) {
+    return `${enableTailwind ? createTailwindImport(tailwindPrefixForApp(app)) : ''}${createCssTokenImport(scope)}`;
+}
+function createAppStyles(enableTailwind, scope, app) {
+    return 'shell' === app.kind ? createShellStyles(enableTailwind, scope) : createRemoteStyles(enableTailwind, scope, app);
+}
+function createPostcssConfig() {
+    return `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+`;
+}
+function createTailwindConfig() {
+    return `import type { Config } from 'tailwindcss';
+
+export default {} satisfies Config;
+`;
+}
+function createSharedDesignTokensCss() {
+    return `@theme {
+  --color-um-accent: #2f8f68;
+  --color-um-canvas: #f1eadc;
+  --color-um-foreground: #133225;
+  --color-um-link: #166b4b;
+  --color-um-surface: #f6fbf7;
+}
+`;
+}
+function createRouteHeadModule(app) {
+    return renderFileTemplate('app/ultramodern-route-head.tsx', {
+        appDisplayNameJson: JSON.stringify(app.displayName)
+    });
+}
+function createShellFrameComponent() {
+    return readFileTemplate('app/shell-frame.tsx');
+}
+export { createAppEnvDts, createAppRuntimeConfig, createAppStyles, createBoundaryDebugMetadata, createCssTokenImport, createPostcssConfig, createRemoteStyles, createRouteHeadModule, createSharedDesignTokensCss, createShellFrameComponent, createShellStyles, createTailwindConfig, createTailwindImport };