refactor(migrations): Port standalone migration to standalone by default (#58169)

JeanMeche · devversion · commit 9ab663e7a29d · 2024-10-15T16:05:14.000Z
With this commit, the standalone migration will only migrate code with `standalone: false` to standalone by default (without the standalone attribute) PR Close #58169
diff --git a/packages/core/schematics/ng-generate/standalone-migration/README.md b/packages/core/schematics/ng-generate/standalone-migration/README.md
@@ -40,7 +40,7 @@ listed in:
 
 ### Convert declarations to standalone
 In this mode, the migration will find all of the components, directives and pipes, and convert them
-to standalone by setting `standalone: true` and adding any dependencies to the `imports` array.
+to standalone by removing `standalone: false` and adding any dependencies to the `imports` array.
 
 **Note:** NgModules which bootstrap a component are explicitly ignored in this step, because they
 are likely to be root modules and they would have to be bootstrapped using `bootstrapApplication`
@@ -62,6 +62,7 @@ export class AppModule {}
 @Component({
   selector: 'my-comp',
   template: '<div my-dir *ngIf="showGreeting">{{ "Hello" | myPipe }}</div>',
+  standalone: false,
 })
 export class MyComp {
   public showGreeting = true;
@@ -70,13 +71,13 @@ export class MyComp {
 
 ```typescript
 // my-dir.ts
-@Directive({selector: '[my-dir]'})
+@Directive({selector: '[my-dir]', standalone: false})
 export class MyDir {}
 ```
 
 ```typescript
 // my-pipe.ts
-@Pipe({name: 'myPipe', pure: true})
+@Pipe({name: 'myPipe', pure: true, standalone: false})
 export class MyPipe {}
 ```
 
@@ -94,7 +95,6 @@ export class AppModule {}
 @Component({
   selector: 'my-comp',
   template: '<div my-dir *ngIf="showGreeting">{{ "Hello" | myPipe }}</div>',
-  standalone: true,
   imports: [NgIf, MyDir, MyPipe]
 })
 export class MyComp {
@@ -104,13 +104,13 @@ export class MyComp {
 
 ```typescript
 // my-dir.ts
-@Directive({selector: '[my-dir]', standalone: true})
+@Directive({selector: '[my-dir]'})
 export class MyDir {}
 ```
 
 ```typescript
 // my-pipe.ts
-@Pipe({name: 'myPipe', pure: true, standalone: true})
+@Pipe({name: 'myPipe', pure: true})
 export class MyPipe {}
 ```
 
@@ -244,7 +244,7 @@ export class AppModule {}
 
 ```typescript
 // ./app/app.component.ts
-@Component({selector: 'app', template: 'hello'})
+@Component({selector: 'app', template: 'hello', standalone: false})
 export class AppComponent {}
 ```
 
@@ -279,7 +279,7 @@ export class ExportedConfigClass {}
 
 ```typescript
 // ./app/app.component.ts
-@Component({selector: 'app', template: 'hello', standalone: true})
+@Component({selector: 'app', template: 'hello'})
 export class AppComponent {}
 ```
 
diff --git a/packages/core/schematics/ng-generate/standalone-migration/to-standalone.ts b/packages/core/schematics/ng-generate/standalone-migration/to-standalone.ts
@@ -125,7 +125,7 @@ export function convertNgModuleDeclarationToStandalone(
   const directiveMeta = typeChecker.getDirectiveMetadata(decl);
 
   if (directiveMeta && directiveMeta.decorator && !directiveMeta.isStandalone) {
-    let decorator = addStandaloneToDecorator(directiveMeta.decorator);
+    let decorator = removeStandaloneFalseFromDecorator(directiveMeta.decorator);
 
     if (directiveMeta.isComponent) {
       const importsToAdd = getComponentImportExpressions(
@@ -157,7 +157,10 @@ export function convertNgModuleDeclarationToStandalone(
     const pipeMeta = typeChecker.getPipeMetadata(decl);
 
     if (pipeMeta && pipeMeta.decorator && !pipeMeta.isStandalone) {
-      tracker.replaceNode(pipeMeta.decorator, addStandaloneToDecorator(pipeMeta.decorator));
+      tracker.replaceNode(
+        pipeMeta.decorator,
+        removeStandaloneFalseFromDecorator(pipeMeta.decorator),
+      );
     }
   }
 }
@@ -427,11 +430,31 @@ function moveDeclarationsToImports(
 }
 
 /** Adds `standalone: true` to a decorator node. */
-function addStandaloneToDecorator(node: ts.Decorator): ts.Decorator {
-  return setPropertyOnAngularDecorator(
-    node,
-    'standalone',
-    ts.factory.createToken(ts.SyntaxKind.TrueKeyword),
+function removeStandaloneFalseFromDecorator(node: ts.Decorator): ts.Decorator {
+  // Invalid decorator.
+  if (!ts.isCallExpression(node.expression) || node.expression.arguments.length !== 1) {
+    return node;
+  }
+
+  if (!ts.isObjectLiteralExpression(node.expression.arguments[0])) {
+    // Unsupported case (e.g. `@Component(SOME_CONST)`). Return the original node.
+    return node;
+  }
+
+  const hasTrailingComma = node.expression.arguments[0].properties.hasTrailingComma;
+
+  const properties = node.expression.arguments[0].properties;
+  const literalProperties = properties.filter((element) => !isStandaloneProperty(element));
+
+  // Use `createDecorator` instead of `updateDecorator`, because
+  // the latter ends up duplicating the node's leading comment.
+  return ts.factory.createDecorator(
+    ts.factory.createCallExpression(node.expression.expression, node.expression.typeArguments, [
+      ts.factory.createObjectLiteralExpression(
+        ts.factory.createNodeArray(literalProperties, hasTrailingComma),
+        literalProperties.length > 1,
+      ),
+    ]),
   );
 }
 
@@ -489,6 +512,11 @@ function setPropertyOnAngularDecorator(
   );
 }
 
+function isStandaloneProperty(prop: ts.Node): prop is ts.PropertyAssignment {
+  return (
+    ts.isPropertyAssignment(prop) && ts.isIdentifier(prop.name) && prop.name.text === 'standalone'
+  );
+}
 /** Checks if a node is a `PropertyAssignment` with a name. */
 function isNamedPropertyAssignment(
   node: ts.Node,
@@ -746,13 +774,13 @@ export function migrateTestDeclarations(
     const closestClass = closestNode(decorator.node, ts.isClassDeclaration);
 
     if (decorator.name === 'Pipe' || decorator.name === 'Directive') {
-      tracker.replaceNode(decorator.node, addStandaloneToDecorator(decorator.node));
+      tracker.replaceNode(decorator.node, removeStandaloneFalseFromDecorator(decorator.node));
 
       if (closestClass) {
         allDeclarations.add(closestClass);
       }
     } else if (decorator.name === 'Component') {
-      const newDecorator = addStandaloneToDecorator(decorator.node);
+      const newDecorator = removeStandaloneFalseFromDecorator(decorator.node);
       const importsToAdd = componentImports.get(decorator.node);
 
       if (closestClass) {
diff --git a/packages/core/schematics/test/standalone_migration_spec.ts b/packages/core/schematics/test/standalone_migration_spec.ts
