@ethlete/core 5.0.0-next.3 → 5.0.0-next.31

package/generators/generators.json

@@ -5,10 +5,15 @@
       "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"
+    "tailwind-4-color-theme": {
+      "factory": "./tailwind-4-color-theme/generator",
+      "schema": "./tailwind-4-color-theme/schema.json",
+      "description": "Generate color theming for Tailwind CSS v4"
+    },
+    "tailwind-4-surface-theme": {
+      "factory": "./tailwind-4-surface-theme/generator",
+      "schema": "./tailwind-4-surface-theme/schema.json",
+      "description": "Generate surface theming for Tailwind CSS v4"
     }
   }
 }

package/generators/migrate-to-v5/color-naming.js

@@ -0,0 +1,175 @@
+import { logger } from '@nx/devkit';
+/**
+ * Symbol renames in TypeScript files (imports + usage).
+ */
+const TS_SYMBOL_RENAMES = {
+    ProvideThemeDirective: 'ProvideColorDirective',
+    THEME_PROVIDER: 'COLOR_PROVIDER',
+    ColorThemedDirective: 'ColoredDirective',
+    ColorThemedStylesComponent: 'ColoredStylesComponent',
+    SurfaceThemedDirective: 'SurfacedDirective',
+    SurfaceThemedStylesComponent: 'SurfacedStylesComponent',
+    injectThemesPrefix: 'injectColorThemesPrefix',
+    createCssThemeName: 'createCssColorThemeName',
+};
+/**
+ * String replacements applied to HTML templates and inline templates.
+ */
+const TEMPLATE_REPLACEMENTS = [
+    ['[etProvideTheme]', '[etProvideColor]'],
+    ['etProvideTheme', 'etProvideColor'],
+    ['[etProvideAltTheme]', '[etProvideAltColor]'],
+    ['etProvideAltTheme', 'etProvideAltColor'],
+    ['[etColorThemed]', '[etColored]'],
+    ['etColorThemed', 'etColored'],
+    ['[etSurfaceThemed]', '[etSurfaced]'],
+    ['etSurfaceThemed', 'etSurfaced'],
+    ['[theme]=', '[color]='],
+    ['[altTheme]=', '[altColor]='],
+    ['et-theme-alt--', 'et-color-alt--'],
+    ['et-theme--', 'et-color--'],
+];
+/**
+ * CSS class name replacements.
+ */
+const CSS_REPLACEMENTS = [
+    ['.et-color-themed', '.et-colored'],
+    ['.et-surface-themed', '.et-surfaced'],
+    ['.et-theme--', '.et-color--'],
+    ['.et-theme-alt--', '.et-color-alt--'],
+];
+/**
+ * Host directive input alias replacements in TypeScript files.
+ */
+const HOST_DIRECTIVE_REPLACEMENTS = [
+    ["'etProvideTheme:theme'", "'etProvideColor:color'"],
+    ["'etProvideAltTheme:altTheme'", "'etProvideAltColor:altColor'"],
+    ["'etProvideTheme:color'", "'etProvideColor:color'"],
+    ["'etProvideAltTheme:altColor'", "'etProvideAltColor:altColor'"],
+    ['"etProvideTheme:theme"', '"etProvideColor:color"'],
+    ['"etProvideAltTheme:altTheme"', '"etProvideAltColor:altColor"'],
+    ['"etProvideTheme"', '"etProvideColor"'],
+    ['"etProvideAltTheme"', '"etProvideAltColor"'],
+];
+export default async function migrateColorNaming(tree) {
+    logger.log('\n🔄 Migrating theme → color naming...\n');
+    const tsFiles = [];
+    const htmlFiles = [];
+    const cssFiles = [];
+    findFiles('.', tree, tsFiles, htmlFiles, cssFiles);
+    let filesModified = 0;
+    for (const filePath of tsFiles) {
+        const wasModified = migrateTypeScriptFile(tree, filePath);
+        if (wasModified) {
+            filesModified++;
+            logger.log(`  ✓ ${filePath}`);
+        }
+    }
+    for (const filePath of htmlFiles) {
+        const wasModified = migrateTemplateFile(tree, filePath);
+        if (wasModified) {
+            filesModified++;
+            logger.log(`  ✓ ${filePath}`);
+        }
+    }
+    for (const filePath of cssFiles) {
+        const wasModified = migrateCssFile(tree, filePath);
+        if (wasModified) {
+            filesModified++;
+            logger.log(`  ✓ ${filePath}`);
+        }
+    }
+    if (filesModified > 0) {
+        logger.log(`\n✅ Successfully migrated color naming in ${filesModified} file(s)\n`);
+    }
+    else {
+        logger.log('\nℹ️  No files needed migration\n');
+    }
+}
+function findFiles(dir, tree, tsFiles, htmlFiles, cssFiles) {
+    const children = tree.children(dir);
+    for (const child of children) {
+        const path = dir === '.' ? child : `${dir}/${child}`;
+        if (tree.isFile(path)) {
+            if (path.includes('node_modules'))
+                continue;
+            if (path.endsWith('.ts') && !path.endsWith('.spec.ts')) {
+                tsFiles.push(path);
+            }
+            else if (path.endsWith('.html')) {
+                htmlFiles.push(path);
+            }
+            else if (path.endsWith('.css') || path.endsWith('.scss')) {
+                cssFiles.push(path);
+            }
+        }
+        else {
+            if (child === 'node_modules')
+                continue;
+            findFiles(path, tree, tsFiles, htmlFiles, cssFiles);
+        }
+    }
+}
+function migrateTypeScriptFile(tree, filePath) {
+    let content = tree.read(filePath, 'utf-8');
+    if (!content)
+        return false;
+    const original = content;
+    // Rename symbols
+    for (const [oldName, newName] of Object.entries(TS_SYMBOL_RENAMES)) {
+        content = replaceWholeWord(content, oldName, newName);
+    }
+    // Rename host directive input aliases
+    for (const [oldStr, newStr] of HOST_DIRECTIVE_REPLACEMENTS) {
+        content = content.replaceAll(oldStr, newStr);
+    }
+    // Handle inline templates in TypeScript files
+    for (const [oldStr, newStr] of TEMPLATE_REPLACEMENTS) {
+        content = content.replaceAll(oldStr, newStr);
+    }
+    // Handle CSS in TypeScript files
+    for (const [oldStr, newStr] of CSS_REPLACEMENTS) {
+        content = content.replaceAll(oldStr, newStr);
+    }
+    if (content !== original) {
+        tree.write(filePath, content);
+        return true;
+    }
+    return false;
+}
+function migrateTemplateFile(tree, filePath) {
+    let content = tree.read(filePath, 'utf-8');
+    if (!content)
+        return false;
+    const original = content;
+    for (const [oldStr, newStr] of TEMPLATE_REPLACEMENTS) {
+        content = content.replaceAll(oldStr, newStr);
+    }
+    if (content !== original) {
+        tree.write(filePath, content);
+        return true;
+    }
+    return false;
+}
+function migrateCssFile(tree, filePath) {
+    let content = tree.read(filePath, 'utf-8');
+    if (!content)
+        return false;
+    const original = content;
+    for (const [oldStr, newStr] of CSS_REPLACEMENTS) {
+        content = content.replaceAll(oldStr, newStr);
+    }
+    if (content !== original) {
+        tree.write(filePath, content);
+        return true;
+    }
+    return false;
+}
+function replaceWholeWord(content, oldWord, newWord) {
+    const regex = new RegExp(`\\b${escapeRegex(oldWord)}\\b`, 'g');
+    return content.replace(regex, newWord);
+}
+function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+//# sourceMappingURL=color-naming.js.map

package/generators/migrate-to-v5/migration.js

@@ -1,4 +1,5 @@
 import { formatFiles } from '@nx/devkit';
+import migrateColorNaming from './color-naming.js';
 import migrateCreateProvider from './create-provider.js';
 import migrateRouterStateService from './router-state-service.js';
 import migrateViewportService from './viewport-service.js';
@@ -18,6 +19,11 @@ export default async function migrate(tree, schema) {
     if (shouldMigrateRouterStateService) {
         await migrateRouterStateService(tree);
     }
+    const shouldMigrateColorNaming = schema.migrateColorNaming !== false;
+    if (shouldMigrateColorNaming) {
+        console.log('  • Migrating theme → color naming...');
+        await migrateColorNaming(tree);
+    }
     if (!schema.skipFormat) {
         console.log('  • Formatting files...');
         await formatFiles(tree);

package/generators/migrate-to-v5/schema.json

@@ -23,6 +23,11 @@
       "type": "boolean",
       "description": "Migrate router state service to v5",
       "default": true
+    },
+    "migrateColorNaming": {
+      "type": "boolean",
+      "description": "Migrate theme naming to color naming (ProvideThemeDirective -> ProvideColorDirective, etc.)",
+      "default": true
     }
   },
   "required": []