fix(@angular-devkit/build-optimizer): wrap ClassDeclarations in an IIFE for better treeshaking

With this change we wrap ClassDeclarations inside an IIFE, also we move some code from the class fold into the wrap-enums.

This changes the below code:
```js
export class Foo {
	method() {
	}
}
Foo.bar = 'barValue';
__decorate([
	methodDecorator
], Foo.prototype, "method", null);
```

to

```js
export const Foo = /*@__PURE__*/ (() => {
  class Foo {
    method() {
    }
  }
  Foo.bar = 'barValue';
  __decorate([
    methodDecorator
  ], Foo.prototype, "method", null);

  return Foo;
})();
```

Fixes #14610

Author: Alan Agius

packages/angular_devkit/build_optimizer/src/build-optimizer/build-optimizer.ts

@@ -11,7 +11,6 @@ import {
   TransformJavascriptOutput,
   transformJavascript,
 } from '../helpers/transform-javascript';
-import { getFoldFileTransformer } from '../transforms/class-fold';
 import { getImportTslibTransformer, testImportTslib } from '../transforms/import-tslib';
 import { getPrefixClassesTransformer, testPrefixClasses } from '../transforms/prefix-classes';
 import { getPrefixFunctionsTransformer } from '../transforms/prefix-functions';
@@ -124,14 +123,12 @@ export function buildOptimizer(options: BuildOptimizerOptions): TransformJavascr
       // getPrefixFunctionsTransformer needs to be before getFoldFileTransformer.
       getPrefixFunctionsTransformer,
       selectedGetScrubFileTransformer,
-      getFoldFileTransformer,
     );
     typeCheck = true;
   } else if (testScrubFile(content)) {
     // Always test as these require the type checker
     getTransforms.push(
       selectedGetScrubFileTransformer,
-      getFoldFileTransformer,
     );
     typeCheck = true;
   }

packages/angular_devkit/build_optimizer/src/build-optimizer/build-optimizer_spec.ts

@@ -16,11 +16,10 @@ import { buildOptimizer } from './build-optimizer';
 describe('build-optimizer', () => {
   const imports = 'import { Injectable, Input, Component } from \'@angular/core\';';
   const clazz = 'var Clazz = (function () { function Clazz() { } return Clazz; }());';
-  const staticProperty = 'Clazz.prop = 1;';
   const decorators = 'Clazz.decorators = [ { type: Injectable } ];';
 
   describe('basic functionality', () => {
-    it('applies class-fold, scrub-file and prefix-functions to side-effect free modules', () => {
+    it('applies scrub-file and prefix-functions to side-effect free modules', () => {
       const input = tags.stripIndent`
         ${imports}
         var __extends = (this && this.__extends) || function (d, b) {
@@ -34,7 +33,6 @@ describe('build-optimizer', () => {
           ChangeDetectionStrategy[ChangeDetectionStrategy["Default"] = 1] = "Default";
         })(ChangeDetectionStrategy || (ChangeDetectionStrategy = {}));
         ${clazz}
-        ${staticProperty}
         ${decorators}
         Clazz.propDecorators = { 'ngIf': [{ type: Input }] };
         Clazz.ctorParameters = function () { return [{type: Injectable}]; };
@@ -65,7 +63,7 @@ describe('build-optimizer', () => {
           ChangeDetectionStrategy[ChangeDetectionStrategy["Default"] = 1] = "Default";
           return ChangeDetectionStrategy;
         })({});
-        var Clazz = /*@__PURE__*/ (function () { function Clazz() { } ${staticProperty} return Clazz; }());
+        var Clazz = /*@__PURE__*/ (function () { function Clazz() { } return Clazz; }());
         var ComponentClazz = /*@__PURE__*/ (function () {
           function ComponentClazz() { }
           return ComponentClazz;
@@ -202,7 +200,6 @@ describe('build-optimizer', () => {
     xit('doesn\'t produce sourcemaps when emitting was skipped', () => {
       const ignoredInput = tags.oneLine`
         var Clazz = (function () { function Clazz() { } return Clazz; }());
-        ${staticProperty}
       `;
       const invalidInput = tags.oneLine`
         ))))invalid syntax

packages/angular_devkit/build_optimizer/src/transforms/class-fold.ts

@@ -20,6 +20,7 @@ interface StatementData {
   hostClass: ClassData;
 }
 
+/** @deprecated Since version 8 */
 export function getFoldFileTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile> {
   const checker = program.getTypeChecker();
 

packages/angular_devkit/build_optimizer/src/transforms/wrap-enums.ts

@@ -63,6 +63,8 @@ function visitBlockStatements(
   // 'oIndex' is the original statement index; 'uIndex' is the updated statement index
   for (let oIndex = 0, uIndex = 0; oIndex < statements.length - 1; oIndex++, uIndex++) {
     const currentStatement = statements[oIndex];
+    let newStatement: ts.Statement | undefined;
+    let oldStatementsLength = 0;
 
     // these can't contain an enum declaration
     if (currentStatement.kind === ts.SyntaxKind.ImportDeclaration) {
@@ -79,53 +81,47 @@ function visitBlockStatements(
     //   * not be last statement
     //   * be a variable statement
     //   * have only one declaration
-    //   * have an ClassExpression as a initializer
+    //   * have an ClassExpression or BinaryExpression and a right
+    //     of kind ClassExpression as a initializer
     if (ts.isVariableStatement(currentStatement)
       && currentStatement.declarationList.declarations.length === 1) {
 
       const variableDeclaration = currentStatement.declarationList.declarations[0];
+      const initializer = variableDeclaration.initializer;
       if (ts.isIdentifier(variableDeclaration.name)) {
         const name = variableDeclaration.name.text;
 
-        if (!variableDeclaration.initializer) {
+        if (!initializer) {
           const iife = findTs2_3EnumIife(name, statements[oIndex + 1]);
           if (iife) {
-            // found an enum
-            if (!updatedStatements) {
-              updatedStatements = statements.slice();
-            }
             // update IIFE and replace variable statement and old IIFE
-            updatedStatements.splice(uIndex, 2, updateEnumIife(
+            oldStatementsLength = 2;
+            newStatement = updateEnumIife(
               currentStatement,
               iife[0],
               iife[1],
-            ));
+            );
             // skip IIFE statement
             oIndex++;
-            continue;
           }
-        } else if (ts.isObjectLiteralExpression(variableDeclaration.initializer)
-                   && variableDeclaration.initializer.properties.length === 0) {
+        } else if (ts.isObjectLiteralExpression(initializer)
+                   && initializer.properties.length === 0) {
           const enumStatements = findTs2_2EnumStatements(name, statements, oIndex + 1);
           if (enumStatements.length > 0) {
-            // found an enum
-            if (!updatedStatements) {
-              updatedStatements = statements.slice();
-            }
             // create wrapper and replace variable statement and enum member statements
-            updatedStatements.splice(uIndex, enumStatements.length + 1, createWrappedEnum(
+            oldStatementsLength = enumStatements.length + 1;
+            newStatement = createWrappedEnum(
               name,
               currentStatement,
               enumStatements,
-              variableDeclaration.initializer,
-            ));
+              initializer,
+            );
             // skip enum member declarations
             oIndex += enumStatements.length;
-            continue;
           }
-        } else if (ts.isObjectLiteralExpression(variableDeclaration.initializer)
-          && variableDeclaration.initializer.properties.length !== 0) {
-          const literalPropertyCount = variableDeclaration.initializer.properties.length;
+        } else if (ts.isObjectLiteralExpression(initializer)
+          && initializer.properties.length !== 0) {
+          const literalPropertyCount = initializer.properties.length;
 
           // tsickle es2015 enums first statement is an export declaration
           const isPotentialEnumExport = ts.isExportDeclaration(statements[oIndex + 1]);
@@ -136,42 +132,61 @@ function visitBlockStatements(
 
           const enumStatements = findEnumNameStatements(name, statements, oIndex + 1);
           if (enumStatements.length === literalPropertyCount) {
-            // found an enum
-            if (!updatedStatements) {
-              updatedStatements = statements.slice();
-            }
             // create wrapper and replace variable statement and enum member statements
-            const deleteCount = enumStatements.length + (isPotentialEnumExport ? 2 : 1);
-            updatedStatements.splice(uIndex, deleteCount, createWrappedEnum(
+            oldStatementsLength = enumStatements.length + (isPotentialEnumExport ? 2 : 1);
+            newStatement = createWrappedEnum(
               name,
               currentStatement,
               enumStatements,
-              variableDeclaration.initializer,
+              initializer,
               isPotentialEnumExport,
-            ));
+            );
             // skip enum member declarations
             oIndex += enumStatements.length;
-            continue;
           }
-        } else if (ts.isClassExpression(variableDeclaration.initializer)) {
-          const classStatements = findClassExpressionStatements(name, statements, oIndex);
+        } else if (
+          ts.isClassExpression(initializer)
+          || (
+            ts.isBinaryExpression(initializer)
+            && ts.isClassExpression(initializer.right)
+          )
+        ) {
+          const classStatements = findClassStatements(name, statements, oIndex);
           if (!classStatements) {
             continue;
           }
 
-          if (!updatedStatements) {
-            updatedStatements = [...statements];
-          }
-
-          updatedStatements.splice(uIndex, classStatements.length, createWrappedClass(
-            name,
+          oldStatementsLength = classStatements.length;
+          newStatement = createWrappedClass(
+            variableDeclaration,
             classStatements,
-          ));
+          );
 
           oIndex += classStatements.length - 1;
-          continue;
         }
       }
+    } else if (ts.isClassDeclaration(currentStatement)) {
+      const name = (currentStatement.name as ts.Identifier).text;
+      const classStatements = findClassStatements(name, statements, oIndex);
+      if (!classStatements) {
+        continue;
+      }
+
+      oldStatementsLength = classStatements.length;
+      newStatement = createWrappedClass(
+        currentStatement,
+        classStatements,
+      );
+
+      oIndex += classStatements.length - 1;
+    }
+
+    if (newStatement) {
+      if (!updatedStatements) {
+        updatedStatements = [...statements];
+      }
+
+      updatedStatements.splice(uIndex, oldStatementsLength, newStatement);
     }
 
     const result = ts.visitNode(currentStatement, visitor);
@@ -433,7 +448,7 @@ function updateHostNode(
 }
 
 /**
- * Find class expression statements.
+ * Find class expression or declaration statements.
  *
  * The classExpressions block to wrap in an iife must
  * - end with an ExpressionStatement
@@ -445,36 +460,63 @@ function updateHostNode(
  Foo = __decorate([]);
  ```
  */
-function findClassExpressionStatements(
+function findClassStatements(
   name: string,
   statements: ts.NodeArray<ts.Statement>,
   statementIndex: number,
 ): ts.Statement[] | undefined {
-  let index = statementIndex + 1;
-  let statement = statements[index];
+  let count = 1;
+
+  for (let index = statementIndex + 1; index < statements.length; ++index) {
+    const statement = statements[index];
+    if (!ts.isExpressionStatement(statement)) {
+      break;
+    }
 
-  while (ts.isExpressionStatement(statement)) {
     const expression = statement.expression;
+
     if (ts.isCallExpression(expression)) {
-      // Ex:
-      // __decorate([propDecorator()], FooClass, "propertyName", void 0);
-      // __decorate$1([propDecorator()], FooClass, "propertyName", void 0);
-      const callExpression = expression.expression;
-      if (!ts.isIdentifier(callExpression) || !/^__decorate(\$\d+)?$/.test(callExpression.text)) {
-        break;
+    // Ex:
+    // setClassMetadata(FooClass, [{}], void 0);
+    // __decorate([propDecorator()], FooClass.prototype, "propertyName", void 0);
+    // __decorate([propDecorator()], FooClass, "propertyName", void 0);
+    // __decorate$1([propDecorator()], FooClass, "propertyName", void 0);
+      const args = expression.arguments;
+
+      if (args.length > 2) {
+        const isReferenced = args.some(arg => {
+          const potentialIdentifier = ts.isPropertyAccessExpression(arg) ? arg.expression : arg;
+
+          return ts.isIdentifier(potentialIdentifier) && potentialIdentifier.text === name;
+        });
+
+        if (isReferenced) {
+          count++;
+          continue;
+        }
+      }
+    } else if (ts.isBinaryExpression(expression)) {
+      const node = ts.isBinaryExpression(expression.left)
+        ? expression.left.left
+        : expression.left;
+
+      const leftExpression = ts.isPropertyAccessExpression(node)
+        // Static Properties // Ex: Foo.bar = 'value';
+        ? node.expression
+        // Ex: FooClass = __decorate([Component()], FooClass);
+        : node;
+
+      if (ts.isIdentifier(leftExpression) && leftExpression.text === name) {
+        count++;
+        continue;
       }
     }
 
-    if (
-      ts.isBinaryExpression(expression)
-      && ts.isIdentifier(expression.left)
-      && expression.left.getText() === name
-    ) {
-      // Ex: FooClass = __decorate([Component()], FooClass);
-      return statements.slice(statementIndex, index + 1);
-    }
+    break;
+  }
 
-    statement = statements[++index];
+  if (count > 1) {
+    return statements.slice(statementIndex, statementIndex + count);
   }
 
   return undefined;
@@ -573,18 +615,33 @@ function createWrappedEnum(
 }
 
 function createWrappedClass(
-  name: string,
+  hostNode: ts.ClassDeclaration | ts.VariableDeclaration,
   statements: ts.Statement[],
 ): ts.Statement {
+  const name = (hostNode.name as ts.Identifier).text;
+
+  const updatedStatements = [...statements];
+
+  if (ts.isClassDeclaration(hostNode)) {
+    updatedStatements[0] = ts.createClassDeclaration(
+      hostNode.decorators,
+      undefined,
+      hostNode.name,
+      hostNode.typeParameters,
+      hostNode.heritageClauses,
+      hostNode.members,
+    );
+  }
+
   const pureIife = addPureComment(
     ts.createImmediatelyInvokedArrowFunction([
-      ...statements,
+      ...updatedStatements,
       ts.createReturn(ts.createIdentifier(name)),
     ]),
   );
 
   return ts.createVariableStatement(
-    undefined,
+    hostNode.modifiers,
     ts.createVariableDeclarationList([
       ts.createVariableDeclaration(name, undefined, pureIife),
     ],