@ethlete/core 5.0.0-next.6 → 5.0.0-next.60

package/generators/migrate-to-v5/viewport-service.js

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { logger } from '@nx/devkit';
 import * as ts from 'typescript';
 export default async function migrateViewportService(tree) {
@@ -12,7 +11,7 @@ export default async function migrateViewportService(tree) {
         for (const child of children) {
             const path = dir === '.' ? child : `${dir}/${child}`;
             if (tree.isFile(path)) {
-                if (path.endsWith('.ts') && !path.includes('node_modules') && !path.includes('.spec.ts')) {
+                if (path.endsWith('.ts') && !path.includes('node_modules')) {
                     tsFiles.push(path);
                 }
                 else if (path.endsWith('.css') ||
@@ -23,6 +22,8 @@ export default async function migrateViewportService(tree) {
                 }
             }
             else {
+                if (child === 'node_modules')
+                    continue;
                 findFiles(path);
             }
         }
@@ -45,6 +46,9 @@ export default async function migrateViewportService(tree) {
             continue;
         logger.log(`Processing: ${filePath}`);
         const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
+        const viewportPackage = getViewportServicePackage(sourceFile);
+        if (viewportPackage !== '@ethlete/core' && !viewportPackage?.startsWith('@fifa-gg/uikit'))
+            continue;
         // Check if this is a component with a template
         const templatePath = findTemplateForComponent(tree, filePath, sourceFile);
         // Track signal properties for template migration
@@ -94,7 +98,7 @@ export default async function migrateViewportService(tree) {
                 }
             });
             // Check if any replacements use toObservable or toSignal
-            for (const [original, replacement] of context.replacements) {
+            for (const [original, replacement] of [...context.replacements].sort((a, b) => b[0].length - a[0].length)) {
                 if (replacement.includes('toObservable(')) {
                     allImportsNeeded['@angular/core/rxjs-interop'].add('toObservable');
                 }
@@ -175,6 +179,7 @@ export default async function migrateViewportService(tree) {
             componentTemplateMigrations.set(filePath, templateMigrationInfo);
         }
         const updatedSourceFileForInline = ts.createSourceFile(filePath, updatedContent, ts.ScriptTarget.Latest, true);
+        const inlineTemplateEdits = [];
         updatedSourceFileForInline.forEachChild((node) => {
             if (ts.isClassDeclaration(node)) {
                 const decorators = 
@@ -193,25 +198,25 @@ export default async function migrateViewportService(tree) {
                                 let templateText = prop.initializer.getText();
                                 // Remove the surrounding quotes/backticks
                                 templateText = templateText.slice(1, -1);
-                                // For each signal property, replace usages with ()
-                                for (const propName of templateMigrationInfo.signalProperties) {
-                                    const regex = new RegExp(`\\b${propName}(?!\\s*\\()\\b`, 'g');
-                                    templateText = templateText.replace(regex, `${propName}()`);
-                                }
+                                templateText = migrateTemplateText(templateText, templateMigrationInfo.signalProperties);
                                 // Re-wrap with original quotes/backticks
                                 const quote = prop.initializer.getText()[0];
                                 const newInitializer = quote + templateText + quote;
-                                // Replace in the file content
-                                updatedContent =
-                                    updatedContent.slice(0, prop.initializer.getStart(updatedSourceFileForInline)) +
-                                        newInitializer +
-                                        updatedContent.slice(prop.initializer.getEnd());
+                                inlineTemplateEdits.push({
+                                    start: prop.initializer.getStart(updatedSourceFileForInline),
+                                    end: prop.initializer.getEnd(),
+                                    replacement: newInitializer,
+                                });
                             }
                         });
                     }
                 });
             }
         });
+        inlineTemplateEdits.sort((a, b) => b.start - a.start);
+        for (const edit of inlineTemplateEdits) {
+            updatedContent = updatedContent.slice(0, edit.start) + edit.replacement + updatedContent.slice(edit.end);
+        }
         // Write the updated content if changes were made
         if (updatedContent !== content) {
             tree.write(filePath, updatedContent);
@@ -276,28 +281,24 @@ function detectCssVariableUsage(tree, styleFiles) {
     }
     return { hasViewportVariables, hasScrollbarVariables };
 }
+const migrateTemplateExpression = (expression, signalProperties) => {
+    let migrated = expression;
+    for (const propName of signalProperties) {
+        const regex = new RegExp(`\\b${escapeRegExp(propName)}(?!\\s*\\()\\b`, 'g');
+        migrated = migrated.replace(regex, `${propName}()`);
+    }
+    return migrated;
+};
+const migrateTemplateText = (template, signalProperties) => template
+    .replace(/{{([\s\S]*?)}}/g, (_, expression) => `{{${migrateTemplateExpression(expression, signalProperties)}}}`)
+    .replace(/((?:\[[^\]]+\]|\([^)]+\)|\*[\w.-]+)\s*=\s*)(["'])([\s\S]*?)\2/g, (_, prefix, quote, expression) => `${prefix}${quote}${migrateTemplateExpression(expression, signalProperties)}${quote}`)
+    .replace(/@(if|for|switch|case|defer)\s*\(([^\n{}]*)\)/g, (_, block, expression) => `@${block} (${migrateTemplateExpression(expression, signalProperties)})`);
 function migrateTemplateFile(tree, htmlFilePath, migrationInfo) {
     const content = tree.read(htmlFilePath, 'utf-8');
     if (!content)
         return false;
-    let updatedContent = content;
-    let hasChanges = false;
-    // For each signal property, replace usages with () calls
-    for (const propName of migrationInfo.signalProperties) {
-        // Match property usage in various Angular contexts:
-        // 1. Interpolation: {{ propName }}
-        // 2. Property binding: [prop]="propName"
-        // 3. Event binding: (event)="propName === value"
-        // 4. Structural directives: *ngIf="propName"
-        // But NOT if already called: propName()
-        // Create a regex that matches the property but not if followed by (
-        const regex = new RegExp(`\\b${escapeRegExp(propName)}(?!\\s*\\()\\b`, 'g');
-        const newContent = updatedContent.replace(regex, `${propName}()`);
-        if (newContent !== updatedContent) {
-            updatedContent = newContent;
-            hasChanges = true;
-        }
-    }
+    const updatedContent = migrateTemplateText(content, migrationInfo.signalProperties);
+    const hasChanges = updatedContent !== content;
     if (hasChanges) {
         tree.write(htmlFilePath, updatedContent);
     }
@@ -340,7 +341,7 @@ function getViewportServicePackage(sourceFile) {
     sourceFile.forEachChild((node) => {
         if (ts.isImportDeclaration(node) && node.importClause?.namedBindings) {
             if (ts.isNamedImports(node.importClause.namedBindings)) {
-                const hasViewportService = node.importClause.namedBindings.elements.some((el) => el.name.text === 'ViewportService');
+                const hasViewportService = node.importClause.namedBindings.elements.some((el) => (el.propertyName?.text ?? el.name.text) === 'ViewportService');
                 if (hasViewportService && ts.isStringLiteral(node.moduleSpecifier)) {
                     packageName = node.moduleSpecifier.text;
                 }
@@ -359,7 +360,7 @@ function getPropertyMaps(packageName) {
         isLg: isEthleteCore ? 'injectIsLg' : 'injectIsXl',
         isXl: isEthleteCore ? 'injectIsXl' : 'injectIs2Xl',
         is2Xl: 'injectIs2Xl',
-        isBase: isEthleteCore ? 'injectIsBase' : 'injectIsLg',
+        isBase: 'injectIsLg',
         viewportSize: 'injectViewportDimensions',
         scrollbarSize: 'injectScrollbarDimensions',
         currentViewport: 'injectCurrentBreakpoint',
@@ -1093,7 +1094,7 @@ function findClassForViewportService(sourceFile, viewportServiceVar) {
 function findAvailableMemberName(baseName, existingMembers) {
     // baseName already has $ suffix for observables at this point
     // Try variations: name, _name, #name
-    const candidates = [baseName, `_${baseName}`, `#${baseName}`];
+    const candidates = [baseName, `_${baseName}`];
     for (const candidate of candidates) {
         if (!existingMembers.has(candidate)) {
             return candidate;
@@ -1161,29 +1162,8 @@ function migrateMonitorViewport(sourceFile, content, viewportServiceVars, cssVar
         return { content, imports };
     }
     // Determine what to add to constructor
-    const constructorStatements = [];
-    if (cssVariablesUsed.hasViewportVariables) {
-        constructorStatements.push('writeViewportSizeToCssVariables();');
-        imports.push('writeViewportSizeToCssVariables');
-    }
-    if (cssVariablesUsed.hasScrollbarVariables) {
-        constructorStatements.push('writeScrollbarSizeToCssVariables();');
-        imports.push('writeScrollbarSizeToCssVariables');
-    }
-    if (constructorStatements.length === 0) {
-        // Just remove monitorViewport calls
-        const modifications = monitorViewportCalls.map((call) => ({
-            start: call.start,
-            end: call.end,
-            replacement: '',
-        }));
-        // Apply modifications from end to start
-        modifications.sort((a, b) => b.start - a.start);
-        for (const mod of modifications) {
-            updatedContent = updatedContent.slice(0, mod.start) + mod.replacement + updatedContent.slice(mod.end);
-        }
-        return { content: updatedContent, imports };
-    }
+    const constructorStatements = ['writeViewportSizeToCssVariables();', 'writeScrollbarSizeToCssVariables();'];
+    imports.push('writeViewportSizeToCssVariables', 'writeScrollbarSizeToCssVariables');
     // Group calls by class
     const callsByClass = new Map();
     for (const call of monitorViewportCalls) {
@@ -1278,8 +1258,10 @@ function addImportsToPackage(sourceFile, content, neededImports, packageName) {
         statement.moduleSpecifier.text === packageName);
     const importsToAdd = Array.from(neededImports).sort();
     if (existingImport?.importClause?.namedBindings && ts.isNamedImports(existingImport.importClause.namedBindings)) {
-        const existingImportNames = existingImport.importClause.namedBindings.elements.map((el) => el.name.text);
-        const newImports = importsToAdd.filter((imp) => !existingImportNames.includes(imp));
+        const existingElements = existingImport.importClause.namedBindings.elements;
+        const existingImportedNames = existingElements.map((el) => el.propertyName?.text ?? el.name.text);
+        const existingImportNames = existingElements.map((el) => el.getText(sourceFile));
+        const newImports = importsToAdd.filter((imp) => !existingImportedNames.includes(imp));
         if (newImports.length > 0) {
             const allImports = [...existingImportNames, ...newImports].sort();
             const importText = existingImport.getText(sourceFile);
@@ -1675,4 +1657,3 @@ function checkIfPropertyIsUsedElsewhere(sourceFile, classNode, propertyName, pro
     });
     return isUsed;
 }
-//# sourceMappingURL=viewport-service.js.map