@bigcommerce/stencil-cli 9.0.3 → 9.1.0

package/lib/BuildConfigManager.js

@@ -2,10 +2,9 @@ import { once } from 'lodash-es';
 import { fork } from 'child_process';
 import path from 'path';
 import fsModule from 'fs';
-import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
 import { THEME_PATH } from '../constants.js';
 
-const require = createRequire(import.meta.url);
 const isJest = typeof process !== 'undefined' && 'JEST_WORKER_ID' in process.env;
 
 const cornerstoneConfigLink = isJest
@@ -16,8 +15,10 @@ class BuildConfigManager {
     constructor({ workDir = THEME_PATH, fs = fsModule, timeout = 20000 } = {}) {
         this.oldConfigFileName = 'stencil.conf.js';
         this.configFileName = 'stencil.conf.cjs';
+        this.esmConfigFileName = 'stencil.conf.mjs';
         this._workDir = workDir;
         this._buildConfigPath = path.join(workDir, this.configFileName);
+        this._esmBuildConfigPath = path.join(workDir, this.esmConfigFileName);
         this._oldBuildConfigPath = path.join(workDir, this.oldConfigFileName);
         this._fs = fs;
         this._onReadyCallbacks = [];
@@ -27,15 +28,19 @@ class BuildConfigManager {
     }
 
     async initConfig() {
-        const config = await this._getConfig(this._buildConfigPath, this._oldBuildConfigPath);
+        const config = await this._getConfig(
+            this._resolveBuildConfigPath(),
+            this._oldBuildConfigPath,
+        );
         this.development = config.development || this._devWorker;
         this.production = config.production || this._prodWorker;
         this.watchOptions = config.watchOptions;
     }
 
     initWorker() {
-        if (this._fs.existsSync(this._buildConfigPath)) {
-            this._worker = fork(this._buildConfigPath, [], { cwd: this._workDir });
+        const buildConfigPath = this._resolveBuildConfigPath();
+        if (this._fs.existsSync(buildConfigPath)) {
+            this._worker = fork(buildConfigPath, [], { cwd: this._workDir });
             this._worker.on('message', (message) => {
                 if (message === 'ready') {
                     this._workerIsReady = true;
@@ -50,23 +55,38 @@ class BuildConfigManager {
         this._worker.kill(signal);
     }
 
+    // Prefer an ESM stencil.conf.mjs when the theme provides one; otherwise
+    // use the CommonJS stencil.conf.cjs (which legacy stencil.conf.js files
+    // get renamed to)
+    _resolveBuildConfigPath() {
+        if (this._fs.existsSync(this._esmBuildConfigPath)) {
+            return this._esmBuildConfigPath;
+        }
+        return this._buildConfigPath;
+    }
+
     async _getConfig(configPath, oldConfigPath) {
         if (this._fs.existsSync(configPath)) {
-            // eslint-disable-next-line import/no-dynamic-require
-            return require(configPath);
+            return this._importConfig(configPath);
         }
         if (this._fs.existsSync(oldConfigPath)) {
             this._moveOldConfig(configPath, oldConfigPath);
-            // eslint-disable-next-line import/no-dynamic-require
-            return require(configPath);
+            return this._importConfig(configPath);
         }
 
         // Fallback to cornerstone default stencil.conf.cjs
         const content = await this.downloadFileFromGitHub(cornerstoneConfigLink);
         this._fs.writeFileSync(configPath, content);
 
-        // eslint-disable-next-line import/no-dynamic-require
-        return require(configPath);
+        return this._importConfig(configPath);
+    }
+
+    // Dynamic import() loads both ESM and CommonJS configs. CommonJS exposes
+    // module.exports as the default export; ESM configs use named exports
+    async _importConfig(configPath) {
+        // eslint-disable-next-line node/no-unsupported-features/es-syntax
+        const configModule = await import(pathToFileURL(configPath).href);
+        return configModule.default ?? configModule;
     }
 
     async downloadFileFromGitHub(rawUrl) {

package/lib/stencil-bundle.js

@@ -34,6 +34,7 @@ const PATHS_TO_ZIP = [
     { pattern: '.scss-lint.yml' },
     { pattern: 'stencil.conf.cjs' },
     { pattern: 'stencil.conf.js' },
+    { pattern: 'stencil.conf.mjs' },
     { pattern: 'templates/**/*' },
     { pattern: 'webpack.*.js' },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "9.0.3",
+  "version": "9.1.0",
   "type": "module",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",