5def2de1b fix(@angular-devkit/architect): correctly handle ESM builders

Author: Angular Builds

package.json

@@ -7,7 +7,7 @@
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "github:angular/angular-devkit-architect-builds#919b56971",
+    "@angular-devkit/architect": "github:angular/angular-devkit-architect-builds#5def2de1b",
     "rxjs": "6.6.7"
   },
   "peerDependencies": {

src/utils.d.ts

@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import { Compilation, Configuration } from 'webpack';
 export interface EmittedFiles {
     id?: string;
     name?: string;
@@ -13,4 +14,5 @@ export interface EmittedFiles {
     asset?: boolean;
     extension: string;
 }
-export declare function getEmittedFiles(compilation: import('webpack').Compilation): EmittedFiles[];
+export declare function getEmittedFiles(compilation: Compilation): EmittedFiles[];
+export declare function getWebpackConfig(configPath: string): Promise<Configuration>;

src/utils.js

@@ -26,8 +26,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEmittedFiles = void 0;
+exports.getWebpackConfig = exports.getEmittedFiles = void 0;
+const fs_1 = require("fs");
 const path = __importStar(require("path"));
+const url_1 = require("url");
 function getEmittedFiles(compilation) {
     var _a;
     const files = [];
@@ -59,3 +61,49 @@ function getEmittedFiles(compilation) {
     return files;
 }
 exports.getEmittedFiles = getEmittedFiles;
+/**
+ * This uses a dynamic import to load a module which may be ESM.
+ * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+ * will currently, unconditionally downlevel dynamic import into a require call.
+ * require calls cannot load ESM code and will result in a runtime error. To workaround
+ * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+ * Once TypeScript provides support for keeping the dynamic import this workaround can
+ * be dropped.
+ *
+ * @param modulePath The path of the module to load.
+ * @returns A Promise that resolves to the dynamically imported module.
+ */
+function loadEsmModule(modulePath) {
+    return new Function('modulePath', `return import(modulePath);`)(modulePath);
+}
+async function getWebpackConfig(configPath) {
+    if (!(0, fs_1.existsSync)(configPath)) {
+        throw new Error(`Webpack configuration file ${configPath} does not exist.`);
+    }
+    switch (path.extname(configPath)) {
+        case '.mjs':
+            // Load the ESM configuration file using the TypeScript dynamic import workaround.
+            // Once TypeScript provides support for keeping the dynamic import this workaround can be
+            // changed to a direct dynamic import.
+            return (await loadEsmModule((0, url_1.pathToFileURL)(configPath))).default;
+        case '.cjs':
+            return require(configPath);
+        default:
+            // The file could be either CommonJS or ESM.
+            // CommonJS is tried first then ESM if loading fails.
+            try {
+                return require(configPath);
+            }
+            catch (e) {
+                if (e.code === 'ERR_REQUIRE_ESM') {
+                    // Load the ESM configuration file using the TypeScript dynamic import workaround.
+                    // Once TypeScript provides support for keeping the dynamic import this workaround can be
+                    // changed to a direct dynamic import.
+                    return (await loadEsmModule((0, url_1.pathToFileURL)(configPath)))
+                        .default;
+                }
+                throw e;
+            }
+    }
+}
+exports.getWebpackConfig = getWebpackConfig;

src/webpack-dev-server/index.js

@@ -6,25 +6,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -99,5 +80,5 @@ function runWebpackDevServer(config, context, options = {}) {
 exports.runWebpackDevServer = runWebpackDevServer;
 exports.default = (0, architect_1.createBuilder)((options, context) => {
     const configPath = (0, path_1.resolve)(context.workspaceRoot, options.webpackConfig);
-    return (0, rxjs_1.from)(Promise.resolve().then(() => __importStar(require(configPath)))).pipe((0, operators_1.switchMap)(({ default: config }) => runWebpackDevServer(config, context)));
+    return (0, rxjs_1.from)((0, utils_1.getWebpackConfig)(configPath)).pipe((0, operators_1.switchMap)((config) => runWebpackDevServer(config, context)));
 });

src/webpack/index.js

@@ -6,25 +6,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -104,5 +85,5 @@ function runWebpack(config, context, options = {}) {
 exports.runWebpack = runWebpack;
 exports.default = (0, architect_1.createBuilder)((options, context) => {
     const configPath = (0, path_1.resolve)(context.workspaceRoot, options.webpackConfig);
-    return (0, rxjs_1.from)(Promise.resolve().then(() => __importStar(require(configPath)))).pipe((0, operators_1.switchMap)(({ default: config }) => runWebpack(config, context)));
+    return (0, rxjs_1.from)((0, utils_1.getWebpackConfig)(configPath)).pipe((0, operators_1.switchMap)((config) => runWebpack(config, context)));
 });

uniqueId

@@ -1 +1 @@
-Mon Jan 24 2022 15:17:58 GMT+0000 (Coordinated Universal Time)
+Mon Jan 24 2022 20:13:24 GMT+0000 (Coordinated Universal Time)