refactor(@angular-devkit/build-angular): add a loose mode for build optimizer enum pass

The `adjust-typescript-enums` plugin now includes an optional loose mode. This mode generates less code for an adjusted enum but differs from the canonical TypeScript enum structure emitted by the TypeScript compiler. This mode is only enabled for packages validated to operate correctly with this structure and is currently limited to first-party Angular packages. The adjusted structure is a variation of the previous build optimizer pass structure but better reflects the runtime behavior of the TypeScript emit structure.

Author: clydin

packages/angular_devkit/build_angular/src/babel/plugins/adjust-typescript-enums.ts

@@ -76,6 +76,12 @@ export default function (): PluginObj {
           return;
         }
 
+        // Loose mode rewrites the enum to a shorter but less TypeScript-like form
+        let enumAssignments: types.ExpressionStatement[] | undefined;
+        if (loose) {
+          enumAssignments = [];
+        }
+
         // Check if all enum member values are pure.
         // If not, leave as-is due to potential side efects
         let hasElements = false;
@@ -93,6 +99,7 @@ export default function (): PluginObj {
           }
 
           hasElements = true;
+          enumAssignments?.push(enumStatement.node);
         }
 
         // If there are no enum elements then there is nothing to wrap
@@ -104,11 +111,33 @@ export default function (): PluginObj {
         const enumInitializer = nextExpression.node;
         nextExpression.remove();
 
+        // Create IIFE block contents
+        let blockContents;
+        if (enumAssignments) {
+          // Loose mode
+          blockContents = [
+            types.expressionStatement(
+              types.assignmentExpression(
+                '=',
+                types.cloneNode(declarationId),
+                types.logicalExpression(
+                  '||',
+                  types.cloneNode(declarationId),
+                  types.objectExpression([]),
+                ),
+              ),
+            ),
+            ...enumAssignments,
+          ];
+        } else {
+          blockContents = [types.expressionStatement(enumInitializer)];
+        }
+
         // Wrap existing enum initializer in a pure annotated IIFE
         const container = types.arrowFunctionExpression(
           [],
           types.blockStatement([
-            types.expressionStatement(enumInitializer),
+            ...blockContents,
             types.returnStatement(types.cloneNode(declarationId)),
           ]),
         );

packages/angular_devkit/build_angular/src/babel/plugins/adjust-typescript-enums_spec.ts

@@ -12,11 +12,19 @@ import { default as adjustTypeScriptEnums } from './adjust-typescript-enums';
 // eslint-disable-next-line import/no-extraneous-dependencies
 const prettier = require('prettier');
 
-function testCase({ input, expected }: { input: string; expected: string }): void {
+function testCase({
+  input,
+  expected,
+  options,
+}: {
+  input: string;
+  expected: string;
+  options?: { loose?: boolean };
+}): void {
   const result = transform(input, {
     configFile: false,
     babelrc: false,
-    plugins: [adjustTypeScriptEnums],
+    plugins: [[adjustTypeScriptEnums, options]],
   });
   if (!result) {
     fail('Expected babel to return a transform result.');
@@ -211,4 +219,25 @@ describe('adjust-typescript-enums Babel plugin', () => {
       RendererStyleFlags3[RendererStyleFlags3.Important] = 'Important';
     `);
   });
+
+  it('wraps TypeScript enums in loose mode', () => {
+    testCase({
+      input: `
+        var ChangeDetectionStrategy;
+        (function (ChangeDetectionStrategy) {
+            ChangeDetectionStrategy[ChangeDetectionStrategy["OnPush"] = 0] = "OnPush";
+            ChangeDetectionStrategy[ChangeDetectionStrategy["Default"] = 1] = "Default";
+        })(ChangeDetectionStrategy || (ChangeDetectionStrategy = {}));
+      `,
+      expected: `
+        var ChangeDetectionStrategy = /*#__PURE__*/ (() => {
+          ChangeDetectionStrategy = ChangeDetectionStrategy || {};
+          ChangeDetectionStrategy[(ChangeDetectionStrategy["OnPush"] = 0)] = "OnPush";
+          ChangeDetectionStrategy[(ChangeDetectionStrategy["Default"] = 1)] = "Default";
+          return ChangeDetectionStrategy;
+        })();
+      `,
+      options: { loose: true },
+    });
+  });
 });

packages/angular_devkit/build_angular/src/babel/webpack-loader.ts

@@ -15,6 +15,7 @@ interface AngularCustomOptions extends Pick<ApplicationPresetOptions, 'angularLi
   forceAsyncTransformation: boolean;
   forceES5: boolean;
   optimize?: {
+    looseEnums: boolean;
     pureTopLevel: boolean;
     wrapDecorators: boolean;
   };
@@ -85,10 +86,12 @@ export default custom<AngularCustomOptions>(() => {
       }
 
       if (optimize) {
+        const angularPackage = /[\\\/]node_modules[\\\/]@angular[\\\/]/.test(this.resourcePath);
         customOptions.optimize = {
           // Angular packages provide additional tested side effects guarantees and can use
           // otherwise unsafe optimizations.
-          pureTopLevel: /[\\\/]node_modules[\\\/]@angular[\\\/]/.test(this.resourcePath),
+          looseEnums: angularPackage,
+          pureTopLevel: angularPackage,
           // JavaScript modules that are marked as side effect free are considered to have
           // no decorators that contain non-local effects.
           wrapDecorators: !!this._module?.factoryMeta?.sideEffectFree,
@@ -126,7 +129,10 @@ export default custom<AngularCustomOptions>(() => {
 
         plugins.push(
           require('./plugins/elide-angular-metadata').default,
-          require('./plugins/adjust-typescript-enums').default,
+          [
+            require('./plugins/adjust-typescript-enums').default,
+            { loose: customOptions.optimize.looseEnums },
+          ],
           [
             require('./plugins/adjust-static-class-members').default,
             { wrapDecorators: customOptions.optimize.wrapDecorators },