fix(@angular-devkit/build-optimizer): add tslib replacement at top of file

Fixes #12568

Author: alan-agius4

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

@@ -58,8 +58,8 @@ describe('build-optimizer', () => {
       `;
       // tslint:disable:max-line-length
       const output = tags.oneLine`
-        ${imports}
         import { __extends } from "tslib";
+        ${imports}
         var ChangeDetectionStrategy = /*@__PURE__*/ (function (ChangeDetectionStrategy) {
           ChangeDetectionStrategy[ChangeDetectionStrategy["OnPush"] = 0] = "OnPush";
           ChangeDetectionStrategy[ChangeDetectionStrategy["Default"] = 1] = "Default";

packages/angular_devkit/build_optimizer/src/transforms/import-tslib.ts

@@ -11,7 +11,7 @@ import * as ts from 'typescript';
  * @deprecated From 0.9.0
  */
 export function testImportTslib(content: string) {
-  const regex = /var (__extends|__decorate|__metadata|__param) = \(.*\r?\n(    .*\r?\n)*\};/;
+  const regex = /var (__extends|__decorate|__metadata|__param) = \(.*\r?\n\s+(.*\r?\n)*\s*\};/;
 
   return regex.test(content);
 }
@@ -21,10 +21,12 @@ export function getImportTslibTransformer(): ts.TransformerFactory<ts.SourceFile
 
     const transformer: ts.Transformer<ts.SourceFile> = (sf: ts.SourceFile) => {
 
+      const tslibImports: (ts.VariableStatement | ts.ImportDeclaration)[] = [];
+
       // Check if module has CJS exports. If so, use 'require()' instead of 'import'.
       const useRequire = /exports.\S+\s*=/.test(sf.getText());
 
-      const visitor: ts.Visitor = (node: ts.Node): ts.Node => {
+      const visitor: ts.Visitor = (node: ts.Node): ts.Node | undefined => {
 
         // Check if node is a TS helper declaration and replace with import if yes
         if (ts.isVariableStatement(node)) {
@@ -35,23 +37,36 @@ export function getImportTslibTransformer(): ts.TransformerFactory<ts.SourceFile
 
             if (isHelperName(name)) {
               // TODO: maybe add a few more checks, like checking the first part of the assignment.
+              const tslibImport = createTslibImport(name, useRequire);
+              tslibImports.push(tslibImport);
 
-              return createTslibImport(name, useRequire);
+              return undefined;
             }
           }
         }
 
         return ts.visitEachChild(node, visitor, context);
       };
 
-      return ts.visitEachChild(sf, visitor, context);
+      const sfUpdated = ts.visitEachChild(sf, visitor, context);
+
+      // Add tslib imports before any other statement
+      return tslibImports.length > 0
+        ? ts.updateSourceFileNode(sfUpdated, [
+          ...tslibImports,
+          ...sfUpdated.statements,
+        ])
+        : sfUpdated;
     };
 
     return transformer;
   };
 }
 
-function createTslibImport(name: string, useRequire = false): ts.Node {
+function createTslibImport(
+  name: string,
+  useRequire = false,
+): ts.VariableStatement | ts.ImportDeclaration {
   if (useRequire) {
     // Use `var __helper = /*@__PURE__*/ require("tslib").__helper`.
     const requireCall = ts.createCall(ts.createIdentifier('require'), undefined,

packages/angular_devkit/build_optimizer/src/transforms/import-tslib_spec.ts

@@ -31,6 +31,26 @@ describe('import-tslib', () => {
     expect(tags.oneLine`${transform(input)}`).toEqual(tags.oneLine`${output}`);
   });
 
+  it('replaces wrapped __extends', () => {
+    // tslint:disable:max-line-length
+    const input = tags.stripIndent`
+    export default function appGlobal() {
+        var __extends = (this && this.__extends) || function (d, b) {
+          for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+          function __() { this.constructor = d; }
+          d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+        };
+    }
+    `;
+    const output = tags.stripIndent`
+      import { __extends } from "tslib";
+      export default function appGlobal() { }
+    `;
+
+    expect(testImportTslib(input)).toBeTruthy();
+    expect(tags.oneLine`${transform(input)}`).toEqual(tags.oneLine`${output}`);
+  });
+
   it('replaces __decorate', () => {
     // tslint:disable:max-line-length
     const input = tags.stripIndent`
@@ -98,18 +118,4 @@ describe('import-tslib', () => {
     expect(tags.oneLine`${transform(input)}`).toEqual(tags.oneLine`${output}`);
   });
 
-  it('tests false for files using __webpack_require__', () => {
-    const input = tags.stripIndent`
-      function __webpack_require__(moduleId) {
-          var __extends = (this && this.__extends) || function (d, b) {
-              for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
-              function __() { this.constructor = d; }
-              d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-          };
-          exports.meaning = 42;
-      }
-    `;
-
-    expect(testImportTslib(input)).toBeFalsy();
-  });
 });