@ethlete/core 5.0.0-next.7 → 5.0.0-next.70

package/generators/devtools-about/generator.js

@@ -0,0 +1,122 @@
+import { formatFiles, joinPathFragments, logger, readProjectConfiguration, updateProjectConfiguration, visitNotIgnoredFiles, } from '@nx/devkit';
+const SCRIPT_PATH = 'tools/generate-build-info.cjs';
+const SCRIPT = `const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const [, , outputPath, packageJsonPath] = process.argv;
+
+const read = (command) => {
+  try {
+    return execSync(command, { encoding: 'utf-8', stdio: ['ignore', 'pipe', 'ignore'] }).trim();
+  } catch {
+    return null;
+  }
+};
+
+const version = fs.existsSync(packageJsonPath)
+  ? JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8')).version
+  : null;
+
+const info = {
+  version: version ?? 'unknown',
+  sha: read('git rev-parse --short HEAD') ?? 'unknown',
+  branch: read('git rev-parse --abbrev-ref HEAD') ?? 'unknown',
+  builtAt: new Date().toISOString(),
+};
+
+const contents =
+  '// Generated by ' +
+  ${JSON.stringify(SCRIPT_PATH)} +
+  ' - do not edit.\\n\\nexport const APP_BUILD_INFO = ' +
+  JSON.stringify(info, null, 2) +
+  ' as const;\\n';
+
+fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+fs.writeFileSync(outputPath, contents);
+`;
+const PLACEHOLDER = `// Generated by ${SCRIPT_PATH} - do not edit.
+
+export const APP_BUILD_INFO = {
+  version: 'unknown',
+  sha: 'unknown',
+  branch: 'unknown',
+  builtAt: '1970-01-01T00:00:00.000Z',
+} as const;
+`;
+const relativeImport = (from, to) => {
+    const fromParts = from.split('/').slice(0, -1);
+    const toParts = to.replace(/\.ts$/, '').split('/');
+    while (fromParts.length && toParts.length && fromParts[0] === toParts[0]) {
+        fromParts.shift();
+        toParts.shift();
+    }
+    const up = fromParts.length ? fromParts.map(() => '..') : ['.'];
+    return [...up, ...toParts].join('/');
+};
+/** Wires the `provideQueryDevtools({ about })` call up to the generated constant, if it can be found. */
+const wireProvider = (tree, projectRoot, outputPath) => {
+    const candidates = [];
+    visitNotIgnoredFiles(tree, projectRoot, (file) => {
+        if (!file.endsWith('.ts') ||
+            file.endsWith('.spec.ts') ||
+            file.endsWith('.test.ts') ||
+            file.endsWith('.stories.ts')) {
+            return;
+        }
+        const contents = tree.read(file, 'utf-8');
+        if (!contents?.includes('provideQueryDevtools('))
+            return;
+        candidates.push({ file, contents });
+    });
+    const alreadyWired = candidates.some(({ contents }) => /provideQueryDevtools\(\s*{[\s\S]*?about\s*:\s*APP_BUILD_INFO/.test(contents));
+    if (alreadyWired)
+        return true;
+    const candidate = candidates.find(({ contents }) => contents.includes('provideQueryDevtools()'));
+    if (!candidate) {
+        for (const { file } of candidates) {
+            logger.warn(`${file} already passes options to provideQueryDevtools() - add \`about: APP_BUILD_INFO\` to them yourself.`);
+        }
+        return candidates.length > 0;
+    }
+    const importPath = relativeImport(candidate.file, outputPath);
+    tree.write(candidate.file, `import { APP_BUILD_INFO } from '${importPath}';\n` +
+        candidate.contents.replace('provideQueryDevtools()', 'provideQueryDevtools({ about: APP_BUILD_INFO })'));
+    return true;
+};
+export const devtoolsAboutGenerator = async (tree, options) => {
+    const project = readProjectConfiguration(tree, options.project);
+    const outputPath = options.outputPath ?? joinPathFragments(project.sourceRoot ?? project.root, 'build-info.ts');
+    if (!tree.exists(SCRIPT_PATH))
+        tree.write(SCRIPT_PATH, SCRIPT);
+    if (!tree.exists(outputPath))
+        tree.write(outputPath, PLACEHOLDER);
+    const gitignore = tree.read('.gitignore', 'utf-8') ?? '';
+    // Regenerated on every build, and its SHA changes with every commit - committing it would put a
+    // one-line diff in every commit that says nothing about the change.
+    if (!gitignore.includes(outputPath)) {
+        tree.write('.gitignore', `${gitignore.trimEnd()}${gitignore.trim() ? '\n' : ''}${outputPath}\n`);
+    }
+    project.targets ??= {};
+    project.targets['build-info'] = {
+        executor: 'nx:run-commands',
+        options: {
+            commands: [`node ${SCRIPT_PATH} ${outputPath} ${joinPathFragments(project.root, 'package.json')}`],
+        },
+    };
+    for (const target of ['build', 'serve']) {
+        const config = project.targets[target];
+        if (!config)
+            continue;
+        config.dependsOn ??= [];
+        if (!config.dependsOn.includes('build-info'))
+            config.dependsOn.push('build-info');
+    }
+    updateProjectConfiguration(tree, options.project, project);
+    if (!wireProvider(tree, project.root, outputPath)) {
+        logger.warn(`No provideQueryDevtools() call found in ${project.root} - pass \`about: APP_BUILD_INFO\` to it yourself.`);
+    }
+    if (!options.skipFormat)
+        await formatFiles(tree);
+};
+export default devtoolsAboutGenerator;

package/generators/devtools-about/schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "devtools-about",
+  "title": "Query devtools About generator",
+  "description": "Generates the application's build info (version, commit SHA, branch, build time) and wires it into provideQueryDevtools({ about })",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The application to wire up",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "Which application should report its build info?"
+    },
+    "outputPath": {
+      "type": "string",
+      "description": "Where to write the generated build-info file. Defaults to `<sourceRoot>/build-info.ts`."
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after generation",
+      "default": false
+    }
+  },
+  "required": ["project"]
+}

package/generators/generators.json

@@ -1,14 +1,50 @@
 {
+  "$schema": "https://json.schemastore.org/nx-generators",
   "generators": {
     "migrate-to-v5": {
-      "factory": "./migrate-to-v5/migration",
+      "implementation": "./migrate-to-v5/migration",
       "schema": "./migrate-to-v5/schema.json",
       "description": "Migrate to v5"
     },
-    "tailwind-4-theme": {
-      "factory": "./tailwind-4-theme/generator",
-      "schema": "./tailwind-4-theme/schema.json",
-      "description": "Generate theming for Tailwind CSS v4"
+    "migrate-provider-shape": {
+      "implementation": "./migrate-provider-shape/migration",
+      "schema": "./migrate-provider-shape/schema.json",
+      "description": "Rewrite destructured provider tuples into the tree-shakeable definition shape"
+    },
+    "migrate-create-destroy": {
+      "implementation": "./migrate-create-destroy/migration",
+      "schema": "./migrate-create-destroy/schema.json",
+      "description": "Rewrite takeUntil(this.destroy$) on a createDestroy() field into takeUntilDestroyed()"
+    },
+    "migrate-surface-interaction-swatch": {
+      "implementation": "./migrate-surface-interaction-swatch/migration",
+      "schema": "./migrate-surface-interaction-swatch/schema.json",
+      "description": "Rewrite surface theme interactionColor maps into the { color, onColor, inkColor } swatch shape"
+    },
+    "migrate-color-theme-variants": {
+      "implementation": "./migrate-color-theme-variants/migration",
+      "schema": "./migrate-color-theme-variants/schema.json",
+      "description": "Rewrite surface theme colorTheme and semanticColorThemes into colorThemeVariants"
+    },
+    "migrate-legacy-color-themes": {
+      "implementation": "./migrate-legacy-color-themes/migration",
+      "schema": "./migrate-legacy-color-themes/schema.json",
+      "description": "Rewrite provideColorThemes into provideColorThemesWithTailwind4 and list the Tailwind 4 setup that is left"
+    },
+    "tailwind-4-color-theme": {
+      "implementation": "./tailwind-4-color-theme/generator",
+      "schema": "./tailwind-4-color-theme/schema.json",
+      "description": "Generate color theming for Tailwind CSS v4"
+    },
+    "tailwind-4-surface-theme": {
+      "implementation": "./tailwind-4-surface-theme/generator",
+      "schema": "./tailwind-4-surface-theme/schema.json",
+      "description": "Generate surface theming for Tailwind CSS v4"
+    },
+    "devtools-about": {
+      "implementation": "./devtools-about/generator",
+      "schema": "./devtools-about/schema.json",
+      "description": "Generate the app's build info and wire it into provideQueryDevtools({ about })"
     }
   }
 }

package/generators/migrate-color-theme-variants/color-theme-variants.js

@@ -0,0 +1,136 @@
+import { Project, SyntaxKind } from 'ts-morph';
+const createProject = () => new Project({
+    useInMemoryFileSystem: true,
+    compilerOptions: {
+        target: 99,
+        module: 99,
+    },
+});
+const findProperty = (literal, name) => {
+    const property = literal.getProperty(name);
+    return property?.isKind(SyntaxKind.PropertyAssignment) ? property : undefined;
+};
+const stringValue = (property) => {
+    const initializer = property?.getInitializer();
+    return initializer?.isKind(SyntaxKind.StringLiteral) || initializer?.isKind(SyntaxKind.NoSubstitutionTemplateLiteral)
+        ? initializer.getLiteralText()
+        : undefined;
+};
+const literalsOf = (sourceFile) => sourceFile.getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression);
+export const collectColorThemesInFile = (filePath, content) => {
+    if (!content.includes('primary'))
+        return [];
+    return literalsOf(createProject().createSourceFile(filePath, content)).flatMap((literal) => {
+        const name = stringValue(findProperty(literal, 'name'));
+        if (!name || !literal.getProperty('primary'))
+            return [];
+        return [
+            {
+                name,
+                type: stringValue(findProperty(literal, 'type')),
+                isDefault: findProperty(literal, 'isDefault')?.getInitializer()?.getText() === 'true',
+            },
+        ];
+    });
+};
+const uniqueName = (names) => {
+    const unique = [...new Set(names)];
+    return unique.length === 1 ? unique[0] : undefined;
+};
+const quote = (value) => (/^[A-Za-z_$][\w$]*$/.test(value) ? value : `'${value}'`);
+/**
+ * Rewrites a surface theme's deprecated `colorTheme` and `semanticColorThemes` into `colorThemeVariants`, keyed by
+ * the `isDefault` theme and the theme of each `type` in `themes`. Existing `colorThemeVariants` entries win, then
+ * `semanticColorThemes`, then `colorTheme`, the same order the runtime resolves them in.
+ */
+export const migrateColorThemeVariantsInFile = (filePath, content, themes) => {
+    if (!content.includes('colorTheme') && !content.includes('semanticColorThemes')) {
+        return { changed: false, content, unresolved: [] };
+    }
+    const defaultName = uniqueName(themes.filter((theme) => theme.isDefault).map((theme) => theme.name));
+    const nameOfType = (type) => uniqueName(themes.filter((theme) => theme.type === type).map((theme) => theme.name));
+    const sourceFile = createProject().createSourceFile(filePath, content);
+    const unresolved = [];
+    let changed = false;
+    const surfaces = literalsOf(sourceFile).filter((literal) => literal.getProperty('elevation'));
+    for (const literal of surfaces) {
+        const colorTheme = findProperty(literal, 'colorTheme');
+        const semantic = findProperty(literal, 'semanticColorThemes');
+        if (!colorTheme && !semantic)
+            continue;
+        const surfaceName = stringValue(findProperty(literal, 'name')) ?? '<unnamed surface>';
+        const variants = findProperty(literal, 'colorThemeVariants');
+        const variantsLiteral = variants?.getInitializer();
+        if (variants && !variantsLiteral?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+            unresolved.push(`${surfaceName}: colorThemeVariants is not an object literal`);
+            continue;
+        }
+        const existingKeys = new Set(variantsLiteral?.isKind(SyntaxKind.ObjectLiteralExpression)
+            ? variantsLiteral
+                .getProperties()
+                .flatMap((property) => property.isKind(SyntaxKind.PropertyAssignment) ? [property.getName().replace(/['"]/g, '')] : [])
+            : []);
+        const additions = new Map();
+        const toRemove = [];
+        const add = (key, value) => {
+            if (!existingKeys.has(key) && !additions.has(key))
+                additions.set(key, value);
+        };
+        let semanticResolved = true;
+        if (semantic) {
+            const semanticLiteral = semantic.getInitializer();
+            if (!semanticLiteral?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+                semanticResolved = false;
+                unresolved.push(`${surfaceName}: semanticColorThemes is not an object literal`);
+            }
+            else {
+                const pending = [];
+                for (const property of semanticLiteral.getProperties()) {
+                    const type = property.isKind(SyntaxKind.PropertyAssignment) ? property.getName().replace(/['"]/g, '') : '';
+                    const value = property.isKind(SyntaxKind.PropertyAssignment) ? stringValue(property) : undefined;
+                    const key = type ? nameOfType(type) : undefined;
+                    if (!value || !key) {
+                        semanticResolved = false;
+                        unresolved.push(`${surfaceName}: semanticColorThemes entry ${property.getText()} has no single color theme of that type or no string value`);
+                        continue;
+                    }
+                    pending.push([key, value]);
+                }
+                if (semanticResolved)
+                    pending.forEach(([key, value]) => add(key, value));
+            }
+        }
+        let colorThemeResolved = true;
+        if (colorTheme) {
+            const value = stringValue(colorTheme);
+            if (!value || !defaultName) {
+                colorThemeResolved = false;
+                unresolved.push(`${surfaceName}: colorTheme ${colorTheme.getInitializer()?.getText()} needs a string value and exactly one isDefault color theme`);
+            }
+            else if (value !== defaultName) {
+                add(defaultName, value);
+            }
+        }
+        const added = [...additions];
+        if (semantic && semanticResolved) {
+            toRemove.push(semantic);
+        }
+        if (colorTheme && colorThemeResolved) {
+            toRemove.push(colorTheme);
+        }
+        if (toRemove.length === 0)
+            continue;
+        if (added.length > 0) {
+            const text = added.map(([key, value]) => `${quote(key)}: '${value}'`).join(', ');
+            if (variantsLiteral?.isKind(SyntaxKind.ObjectLiteralExpression)) {
+                variantsLiteral.addPropertyAssignments(added.map(([key, value]) => ({ name: quote(key), initializer: `'${value}'` })));
+            }
+            else {
+                toRemove.shift()?.replaceWithText(`colorThemeVariants: { ${text} }`);
+            }
+        }
+        toRemove.forEach((property) => property.remove());
+        changed = true;
+    }
+    return { changed, content: changed ? sourceFile.getFullText() : content, unresolved };
+};

package/generators/migrate-color-theme-variants/migration.js

@@ -0,0 +1,46 @@
+import { formatFiles, visitNotIgnoredFiles } from '@nx/devkit';
+import { createMigrationScope } from '../migrate-provider-shape/migration-scope.js';
+import { collectColorThemesInFile, migrateColorThemeVariantsInFile } from './color-theme-variants.js';
+const isSource = (filePath) => filePath.endsWith('.ts') && !filePath.endsWith('.d.ts');
+export default async function migrateColorThemeVariants(tree, schema) {
+    console.log('\n🔄 Migrating surface colorTheme and semanticColorThemes to colorThemeVariants...');
+    const themes = [];
+    visitNotIgnoredFiles(tree, '', (filePath) => {
+        if (!isSource(filePath))
+            return;
+        const content = tree.read(filePath, 'utf-8');
+        if (content)
+            themes.push(...collectColorThemesInFile(filePath, content));
+    });
+    const defaults = themes.filter((theme) => theme.isDefault).map((theme) => theme.name);
+    console.log(`   Color themes found: ${themes.map((theme) => theme.name).join(', ') || 'none'}`);
+    console.log(`   Default color theme: ${defaults.join(', ') || 'none'}`);
+    const scope = createMigrationScope(tree, schema);
+    console.log(`   Scope: ${scope.describe()}`);
+    let filesChanged = 0;
+    let unresolvedCount = 0;
+    scope.visit(tree, (filePath) => {
+        if (!isSource(filePath))
+            return;
+        const before = tree.read(filePath, 'utf-8');
+        if (!before)
+            return;
+        const result = migrateColorThemeVariantsInFile(filePath, before, themes);
+        for (const message of result.unresolved) {
+            unresolvedCount++;
+            console.warn(`   ⚠ ${filePath}: ${message}`);
+        }
+        if (!result.changed)
+            return;
+        tree.write(filePath, result.content);
+        filesChanged++;
+        console.log(`   ✓ ${filePath}`);
+    });
+    console.log(filesChanged === 0 ? '   Nothing to migrate.\n' : `\n✅ Migrated ${filesChanged} file(s).\n`);
+    if (unresolvedCount > 0) {
+        console.warn(`   Review ${unresolvedCount} unresolved value(s) manually. They keep working until the next major.\n`);
+    }
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+}

package/generators/migrate-color-theme-variants/schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "migrate-color-theme-variants",
+  "title": "Migrate surface colorTheme and semanticColorThemes to colorThemeVariants",
+  "type": "object",
+  "properties": {
+    "projects": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Nx projects to migrate. Defaults to every project in the workspace.",
+      "alias": "project"
+    },
+    "include": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Path prefixes to migrate, relative to the workspace root (e.g. 'apps/web'). Unioned with `projects`. Defaults to the whole workspace.",
+      "alias": "includePath"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after migration",
+      "default": false
+    }
+  },
+  "required": []
+}