Replace @babel/standalone with sucrase for jsx compilation

.changeset/tough-swans-laugh.md

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

package.json

@@ -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/index.d.ts

@@ -15,6 +15,7 @@ interface PlayroomConfig {
   iframeSandbox?: string;
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   reactDocgenTypescriptConfig?: import('react-docgen-typescript').ParserOptions;
+  production?: boolean;
 }
 
 interface InternalPlayroomConfig extends PlayroomConfig {

src/utils/compileJsx.ts

@@ -1,11 +1,13 @@
-import { transform } from '@babel/standalone';
+import { transform } from 'sucrase';
+import playroomConfig from '../config';
 
 export const openFragmentTag = '<React.Fragment>';
 export const closeFragmentTag = '</React.Fragment>';
 
 export const compileJsx = (code: string) =>
   transform(`${openFragmentTag}${code.trim() || ''}${closeFragmentTag}`, {
-    presets: ['react'],
+    transforms: ['jsx'],
+    production: playroomConfig.production,
   }).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"]
 }