playroom 0.32.0 → 0.33.0

package/.eslintrc

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

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # playroom
 
+## 0.33.0
+
+### Minor Changes
+
+- 2d3571b: 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.
+
+## 0.32.1
+
+### Patch Changes
+
+- a044864: Allow overriding Webpack module rules
+
+  Consumers may have complex Webpack configurations that can clash with Playroom's.
+  In this case, it's useful to be able to override the module rules that Playroom defines.
+  For example, overriding loaders defined for CSS files:
+
+  ```js
+  // playroom.config.js
+  module.exports = {
+    webpackConfig: () => ({
+      module: {
+        rules: [
+          // use your own CSS loaders
+          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+        ],
+      },
+    }),
+  };
+  ```
+
 ## 0.32.0
 
 ### Minor Changes

package/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).

package/bin/{cli.js → 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/lib/makeWebpackConfig.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
-const { merge } = require('webpack-merge');
+const { mergeWithRules } = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
 const getStaticTypes = require('./getStaticTypes');
@@ -199,5 +199,14 @@ module.exports = async (playroomConfig, options) => {
     ? await playroomConfig.webpackConfig()
     : makeDefaultWebpackConfig(playroomConfig);
 
-  return merge(ourConfig, theirConfig);
+  const mergedConfig = mergeWithRules({
+    module: {
+      rules: {
+        test: 'match',
+        use: 'replace',
+      },
+    },
+  })(ourConfig, theirConfig);
+
+  return mergedConfig;
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "playroom",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
   "bin": {
-    "playroom": "bin/cli.js"
+    "playroom": "bin/cli.cjs"
   },
   "lint-staged": {
     "**/*.{js,ts,tsx}": [
@@ -111,14 +111,14 @@
     "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)'",