From d5f51f00b341c0c0a2c85c55bb039e5d5ddd712e Mon Sep 17 00:00:00 2001 From: Adam Skoufis Date: Sun, 12 Nov 2023 14:54:07 +1100 Subject: [PATCH] Replace `@babel/standalone` with `sucrase` for jsx compilation --- .changeset/tough-swans-laugh.md | 5 +++ @types/babel__standalone.d.ts | 12 ------- package.json | 2 +- pnpm-lock.yaml | 64 ++++++++++++++++++++++++++++----- src/index.d.ts | 1 + src/utils/compileJsx.ts | 6 ++-- tsconfig.json | 2 +- 7 files changed, 68 insertions(+), 24 deletions(-) create mode 100644 .changeset/tough-swans-laugh.md delete mode 100644 @types/babel__standalone.d.ts diff --git a/.changeset/tough-swans-laugh.md b/.changeset/tough-swans-laugh.md new file mode 100644 index 00000000..bedc73ee --- /dev/null +++ b/.changeset/tough-swans-laugh.md @@ -0,0 +1,5 @@ +--- +'playroom': minor +--- + +Replace `@babel/standalone` with `sucrase` for JSX compilation diff --git a/@types/babel__standalone.d.ts b/@types/babel__standalone.d.ts deleted file mode 100644 index e4dded23..00000000 --- a/@types/babel__standalone.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -interface TransformResponse { - code: string; -} - -declare module '@babel/standalone' { - import type { TransformOptions } from '@babel/core'; - - function transform( - code: string, - options: TransformOptions - ): TransformResponse; -} diff --git a/package.json b/package.json index c45628c9..38b3b4f7 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a5a2dc05..bf326ba0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,7 +7,6 @@ specifiers: '@babel/preset-env': ^7.20.2 '@babel/preset-react': ^7.18.6 '@babel/preset-typescript': ^7.18.6 - '@babel/standalone': ^7.20.6 '@changesets/cli': ^2.25.2 '@octokit/rest': ^19.0.5 '@soda/friendly-errors-webpack-plugin': ^1.8.1 @@ -65,6 +64,7 @@ specifiers: scope-eval: ^1.0.0 serve: ^14.1.2 start-server-and-test: ^1.15.2 + sucrase: ^3.34.0 surge: ^0.23.1 typescript: '>=5.0.0' use-debounce: ^9.0.2 @@ -78,7 +78,6 @@ dependencies: '@babel/preset-env': 7.20.2_@babel+core@7.20.5 '@babel/preset-react': 7.18.6_@babel+core@7.20.5 '@babel/preset-typescript': 7.18.6_@babel+core@7.20.5 - '@babel/standalone': 7.20.6 '@soda/friendly-errors-webpack-plugin': 1.8.1_webpack@5.75.0 '@types/base64-url': 2.2.0 '@types/codemirror': 5.60.5 @@ -122,6 +121,7 @@ dependencies: react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y read-pkg-up: 7.0.1 scope-eval: 1.0.0 + sucrase: 3.34.0 typescript: 5.0.4 use-debounce: 9.0.2_react@18.2.0 webpack: 5.75.0 @@ -1643,11 +1643,6 @@ packages: dependencies: regenerator-runtime: 0.13.11 - /@babel/standalone/7.20.6: - resolution: {integrity: sha512-u5at/CbBLETf7kx2LOY4XdhseD79Y099WZKAOMXeT8qvd9OSR515my2UNBBLY4qIht/Qi9KySeQHQwQwxJN4Sw==} - engines: {node: '>=6.9.0'} - dev: false - /@babel/template/7.18.10: resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==} engines: {node: '>=6.9.0'} @@ -3363,6 +3358,10 @@ packages: engines: {node: '>=12'} dev: true + /any-promise/1.3.0: + resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} + dev: false + /anymatch/3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} engines: {node: '>= 8'} @@ -5718,6 +5717,17 @@ packages: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} dev: false + /glob/7.1.6: + resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 3.1.2 + once: 1.4.0 + path-is-absolute: 1.0.1 + dev: false + /glob/7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} dependencies: @@ -7473,6 +7483,14 @@ packages: resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==} dev: true + /mz/2.7.0: + resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} + dependencies: + any-promise: 1.3.0 + object-assign: 4.1.1 + thenify-all: 1.6.0 + dev: false + /nano-css/5.3.5_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==} peerDependencies: @@ -7912,7 +7930,6 @@ packages: /pirates/4.0.5: resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==} engines: {node: '>= 6'} - dev: true /pkg-dir/4.2.0: resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==} @@ -9214,6 +9231,20 @@ packages: resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==} dev: false + /sucrase/3.34.0: + resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==} + engines: {node: '>=8'} + hasBin: true + dependencies: + '@jridgewell/gen-mapping': 0.3.2 + commander: 4.1.1 + glob: 7.1.6 + lines-and-columns: 1.2.4 + mz: 2.7.0 + pirates: 4.0.5 + ts-interface-checker: 0.1.13 + dev: false + /supports-color/5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -9352,6 +9383,19 @@ packages: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true + /thenify-all/1.6.0: + resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==} + engines: {node: '>=0.8'} + dependencies: + thenify: 3.3.1 + dev: false + + /thenify/3.3.1: + resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + dependencies: + any-promise: 1.3.0 + dev: false + /throttle-debounce/3.0.1: resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==} engines: {node: '>=10'} @@ -9439,6 +9483,10 @@ packages: resolution: {integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==} dev: false + /ts-interface-checker/0.1.13: + resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + dev: false + /tsconfig-paths/3.14.1: resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==} dependencies: diff --git a/src/index.d.ts b/src/index.d.ts index 80a6683a..263808f2 100644 --- a/src/index.d.ts +++ b/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 { diff --git a/src/utils/compileJsx.ts b/src/utils/compileJsx.ts index 97aa4737..a8c99f68 100644 --- a/src/utils/compileJsx.ts +++ b/src/utils/compileJsx.ts @@ -1,11 +1,13 @@ -import { transform } from '@babel/standalone'; +import { transform } from 'sucrase'; +import playroomConfig from '../config'; export const openFragmentTag = ''; export const closeFragmentTag = ''; export const compileJsx = (code: string) => transform(`${openFragmentTag}${code.trim() || ''}${closeFragmentTag}`, { - presets: ['react'], + transforms: ['jsx'], + production: playroomConfig.production, }).code; export const validateCode = (code: string) => { diff --git a/tsconfig.json b/tsconfig.json index 723c85cd..6f01e5bd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,6 @@ "lib": ["dom", "es2022"], "target": "es2022" }, - "include": ["src", "@types"], + "include": ["src"], "exclude": ["cypress", "node_modules"] }