@ethlete/core 4.30.0 → 5.0.0-beta.11

package/generators/generators.json

@@ -0,0 +1,19 @@
+{
+  "generators": {
+    "migrate-to-v5": {
+      "factory": "./migrate-to-v5/migration",
+      "schema": "./migrate-to-v5/schema.json",
+      "description": "Migrate to v5"
+    },
+    "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,173 @@
+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]='],
+];
+/**
+ * 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/create-provider.js

@@ -0,0 +1,158 @@
+import { logger } from '@nx/devkit';
+import * as ts from 'typescript';
+export default async function migrateCreateProvider(tree) {
+    logger.log('\n🔄 Migrating createProvider imports from @ethlete/cdk to @ethlete/core...\n');
+    const tsFiles = [];
+    // Recursively find all TypeScript files
+    function findTsFiles(dir) {
+        const children = tree.children(dir);
+        for (const child of children) {
+            const path = dir === '.' ? child : `${dir}/${child}`;
+            if (tree.isFile(path)) {
+                if (path.endsWith('.ts') && !path.includes('node_modules') && !path.endsWith('.spec.ts')) {
+                    tsFiles.push(path);
+                }
+            }
+            else {
+                findTsFiles(path);
+            }
+        }
+    }
+    findTsFiles('.');
+    let filesModified = 0;
+    for (const filePath of tsFiles) {
+        const wasModified = migrateCreateProviderInFile(tree, filePath);
+        if (wasModified) {
+            filesModified++;
+            logger.log(`  ✓ ${filePath}`);
+        }
+    }
+    if (filesModified > 0) {
+        logger.log(`\n✅ Successfully migrated createProvider in ${filesModified} file(s)\n`);
+    }
+    else {
+        logger.log('\nℹ️  No files needed migration\n');
+    }
+}
+function migrateCreateProviderInFile(tree, filePath) {
+    const content = tree.read(filePath, 'utf-8');
+    if (!content || !content.includes('createProvider'))
+        return false;
+    const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
+    let cdkImport;
+    let coreImport;
+    let hasCreateProviderInCdk = false;
+    // Find relevant imports
+    for (const statement of sourceFile.statements) {
+        if (ts.isImportDeclaration(statement) && ts.isStringLiteral(statement.moduleSpecifier)) {
+            const modulePath = statement.moduleSpecifier.text;
+            if (modulePath === '@ethlete/cdk') {
+                cdkImport = statement;
+                if (statement.importClause?.namedBindings && ts.isNamedImports(statement.importClause.namedBindings)) {
+                    hasCreateProviderInCdk = statement.importClause.namedBindings.elements.some((element) => element.name.text === 'createProvider');
+                }
+            }
+            else if (modulePath === '@ethlete/core') {
+                coreImport = statement;
+            }
+        }
+    }
+    // If createProvider is not imported from @ethlete/cdk, nothing to do
+    if (!hasCreateProviderInCdk)
+        return false;
+    let updatedContent = content;
+    // Remove createProvider from @ethlete/cdk import
+    if (cdkImport && cdkImport.importClause?.namedBindings && ts.isNamedImports(cdkImport.importClause.namedBindings)) {
+        const namedBindings = cdkImport.importClause.namedBindings;
+        const otherImports = namedBindings.elements.filter((element) => element.name.text !== 'createProvider');
+        const importStart = cdkImport.getStart(sourceFile);
+        const importEnd = cdkImport.getEnd();
+        if (otherImports.length === 0) {
+            // Remove entire import line including newline
+            let lineStart = importStart;
+            while (lineStart > 0 && content[lineStart - 1] !== '\n') {
+                lineStart--;
+            }
+            let lineEnd = importEnd;
+            while (lineEnd < content.length && content[lineEnd] !== '\n') {
+                lineEnd++;
+            }
+            if (content[lineEnd] === '\n') {
+                lineEnd++;
+            }
+            updatedContent = content.slice(0, lineStart) + content.slice(lineEnd);
+        }
+        else {
+            // Keep other imports
+            const newImports = otherImports.map((el) => el.name.text).join(', ');
+            const newImportText = `import { ${newImports} } from '@ethlete/cdk';`;
+            updatedContent = content.slice(0, importStart) + newImportText + content.slice(importEnd);
+        }
+    }
+    // Re-parse after first modification
+    const intermediateSourceFile = ts.createSourceFile(filePath, updatedContent, ts.ScriptTarget.Latest, true);
+    // Find @ethlete/core import in the updated content
+    let updatedCoreImport;
+    for (const statement of intermediateSourceFile.statements) {
+        if (ts.isImportDeclaration(statement) && ts.isStringLiteral(statement.moduleSpecifier)) {
+            if (statement.moduleSpecifier.text === '@ethlete/core') {
+                updatedCoreImport = statement;
+                break;
+            }
+        }
+    }
+    // Add createProvider to @ethlete/core import
+    if (updatedCoreImport?.importClause?.namedBindings &&
+        ts.isNamedImports(updatedCoreImport.importClause.namedBindings)) {
+        const namedBindings = updatedCoreImport.importClause.namedBindings;
+        // Check if createProvider already exists
+        const hasCreateProvider = namedBindings.elements.some((element) => element.name.text === 'createProvider');
+        if (!hasCreateProvider) {
+            const importStart = updatedCoreImport.getStart(intermediateSourceFile);
+            const importEnd = updatedCoreImport.getEnd();
+            const existingImports = namedBindings.elements.map((el) => el.name.text);
+            const allImports = [...existingImports, 'createProvider'].sort();
+            const newImportText = `import { ${allImports.join(', ')} } from '@ethlete/core';`;
+            updatedContent = updatedContent.slice(0, importStart) + newImportText + updatedContent.slice(importEnd);
+        }
+    }
+    else {
+        // Add new import from @ethlete/core at the top
+        const firstImportIndex = updatedContent.indexOf('import');
+        if (firstImportIndex !== -1) {
+            // Add after other imports
+            let insertPosition;
+            let lastImportEnd = firstImportIndex;
+            for (const statement of intermediateSourceFile.statements) {
+                if (ts.isImportDeclaration(statement)) {
+                    lastImportEnd = statement.getEnd();
+                }
+                else {
+                    break;
+                }
+            }
+            insertPosition = lastImportEnd;
+            // Find end of line
+            while (insertPosition < updatedContent.length && updatedContent[insertPosition] !== '\n') {
+                insertPosition++;
+            }
+            if (updatedContent[insertPosition] === '\n') {
+                insertPosition++;
+            }
+            updatedContent =
+                updatedContent.slice(0, insertPosition) +
+                    "import { createProvider } from '@ethlete/core';\n" +
+                    updatedContent.slice(insertPosition);
+        }
+        else {
+            // No imports, add at the beginning
+            updatedContent = "import { createProvider } from '@ethlete/core';\n\n" + updatedContent;
+        }
+    }
+    if (updatedContent !== content) {
+        tree.write(filePath, updatedContent);
+        return true;
+    }
+    return false;
+}
+//# sourceMappingURL=create-provider.js.map

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

@@ -0,0 +1,34 @@
+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';
+export default async function migrate(tree, schema) {
+    console.log('\n🔄 Starting core v5 migration...');
+    const shouldMigrateViewportService = schema.migrateViewportService !== false;
+    const shouldMigrateCreateProvider = schema.migrateCreateProvider !== false;
+    const shouldMigrateRouterStateService = schema.migrateRouterStateService !== false;
+    if (shouldMigrateViewportService) {
+        console.log('  • Migrating viewport service...');
+        await migrateViewportService(tree);
+    }
+    if (shouldMigrateCreateProvider) {
+        console.log('  • Migrating create provider...');
+        await migrateCreateProvider(tree);
+    }
+    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);
+    }
+    console.log('\n✅ Migration completed successfully!');
+}
+//#endregion
+//# sourceMappingURL=migration.js.map