Feat: add support for loading mjs config files (#299)

.changeset/lazy-boxes-speak.md

@@ -0,0 +1,7 @@
+---
+'playroom': minor
+---
+
+Add support for loading mjs config files
+
+Consumers should now be able to write their configuration files using ES modules. By default Playroom will look for `playroom.config.js` with either a `.js`, `.mjs` or `.cjs` file extension.

.eslintrc

@@ -6,7 +6,7 @@
   },
   "overrides": [
     {
-      "files": ["bin/**/*.js", "lib/**/*.js"],
+      "files": ["bin/**/*.cjs", "lib/**/*.js"],
       "rules": {
         "no-console": 0,
         "no-process-exit": 0

README.md

@@ -194,6 +194,10 @@ module.exports = {
 };
 ```
 
+## ESM Support
+
+Playroom supports loading [ESM](https://nodejs.org/api/esm.html#introduction) configuration files. By default, Playroom will look for a playroom config file with either a `.js`, `.mjs` or `.cjs` file extension.
+
 ## Storybook Integration
 
 If you are interested in integrating Playroom into Storybook, check out [storybook-addon-playroom](https://github.com/rbardini/storybook-addon-playroom).

bin/cli.js → bin/cli.cjs

@@ -53,7 +53,10 @@ const showUsage = () => {
   const cwd = process.cwd();
   const configPath = args.config
     ? path.resolve(cwd, args.config)
-    : await findUp('playroom.config.js', { cwd });
+    : await findUp(
+        ['playroom.config.js', 'playroom.config.mjs', 'playroom.config.cjs'],
+        { cwd }
+      );
 
   if (!configPath) {
     console.error(
@@ -62,7 +65,7 @@ const showUsage = () => {
     process.exit(1);
   }
 
-  const config = require(configPath);
+  const { default: config } = await import(configPath);
 
   const playroom = lib({
     cwd: path.dirname(configPath),

package.json

@@ -5,20 +5,20 @@
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
   "bin": {
-    "playroom": "bin/cli.js"
+    "playroom": "bin/cli.cjs"
   },
   "scripts": {
     "cypress": "start-server-and-test build-and-serve:all '9000|9001|9002' 'cypress run'",
     "cypress:dev": "start-server-and-test start:all '9000|9001|9002' 'cypress open --browser chrome --e2e'",
     "cypress:verify": "cypress verify",
-    "start:basic": "./bin/cli.js start --config cypress/projects/basic/playroom.config.js",
-    "build:basic": "./bin/cli.js build --config cypress/projects/basic/playroom.config.js",
+    "start:basic": "./bin/cli.cjs start --config cypress/projects/basic/playroom.config.js",
+    "build:basic": "./bin/cli.cjs build --config cypress/projects/basic/playroom.config.js",
     "serve:basic": "PORT=9000 serve --no-request-logging cypress/projects/basic/dist",
-    "start:themed": "./bin/cli.js start --config cypress/projects/themed/playroom.config.js",
-    "build:themed": "./bin/cli.js build --config cypress/projects/themed/playroom.config.js",
+    "start:themed": "./bin/cli.cjs start --config cypress/projects/themed/playroom.config.js",
+    "build:themed": "./bin/cli.cjs build --config cypress/projects/themed/playroom.config.js",
     "serve:themed": "PORT=9001 serve --config ../serve.json --no-request-logging cypress/projects/themed/dist",
-    "start:typescript": "./bin/cli.js start --config cypress/projects/typescript/playroom.config.js",
-    "build:typescript": "./bin/cli.js build --config cypress/projects/typescript/playroom.config.js",
+    "start:typescript": "./bin/cli.cjs start --config cypress/projects/typescript/playroom.config.js",
+    "build:typescript": "./bin/cli.cjs build --config cypress/projects/typescript/playroom.config.js",
     "serve:typescript": "PORT=9002 serve --no-request-logging cypress/projects/typescript/dist",
     "start:all": "concurrently 'npm:start:*(!all)'",
     "build:all": "concurrently 'npm:build:*(!all)'",