Merge remote-tracking branch 'origin/master' into smaller-react-pragmas

.changeset/tough-swans-laugh.md

@@ -0,0 +1,5 @@
+---
+'playroom': minor
+---
+
+Replace `@babel/standalone` with `sucrase` for JSX compilation

.eslintrc

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

CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

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

@@ -1,24 +1,24 @@
 {
   "name": "playroom",
-  "version": "0.32.1",
+  "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"
   },
   "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)'",
@@ -60,7 +60,6 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/standalone": "^7.20.6",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
@@ -104,6 +103,7 @@
     "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
+    "sucrase": "^3.34.0",
     "typescript": ">=5.0.0",
     "use-debounce": "^9.0.2",
     "webpack": "^5.75.0",

src/utils/compileJsx.ts

@@ -1,4 +1,4 @@
-import { transform } from '@babel/standalone';
+import { transform } from 'sucrase';
 
 export const ReactFragmentPragma = 'R_F';
 export const ReactCreateElementPragma = 'R_cE';
@@ -8,15 +8,10 @@ export const closeFragmentTag = '</>';
 
 export const compileJsx = (code: string) =>
   transform(`${openFragmentTag}${code.trim()}${closeFragmentTag}`, {
-    presets: [
-      [
-        'react',
-        {
-          pragma: ReactCreateElementPragma,
-          pragmaFrag: ReactFragmentPragma,
-        },
-      ],
-    ],
+    transforms: ['jsx'],
+    jsxPragma: ReactCreateElementPragma,
+    jsxFragmentPragma: ReactFragmentPragma,
+    production: true,
   }).code;
 
 export const validateCode = (code: string) => {

tsconfig.json

@@ -15,6 +15,6 @@
     "lib": ["dom", "es2022"],
     "target": "es2022"
   },
-  "include": ["src", "@types"],
+  "include": ["src"],
   "exclude": ["cypress", "node_modules"]
 }