Merge pull request #295 from FormidableLabs/jp-sucrase

swap Buble for Sucrase

Author: jpdriver

.gitignore

@@ -8,3 +8,4 @@ bundle-stats.html
 .next
 .out
 .history/
+stats.html

.storybook/main.js

@@ -5,5 +5,13 @@ module.exports = {
   "addons": [
     "@storybook/addon-controls",
     // "@storybook/addon-actions"
-  ]
+  ],
+  "webpackFinal": async (config) => {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    })
+    return config
+  }
 }

package.json

@@ -25,6 +25,7 @@
     "dom-iterator": "^1.0.0",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
+    "sucrase": "^3.20.3",
     "unescape": "^1.0.1",
     "use-editable": "^2.3.3"
   },
@@ -61,6 +62,7 @@
     "rollup": "^2.55.1",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.5.4",
     "styled-components": "^4.0.0-beta.8",
     "typescript": "^2.9.2",
     "typings-tester": "^0.3.1"

rollup.config.js

@@ -4,6 +4,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import { babel } from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
 import filesize from "rollup-plugin-filesize";
+import { visualizer } from "rollup-plugin-visualizer";
 
 const plugins = [
   nodeResolve({
@@ -45,19 +46,20 @@ const prodPlugins = plugins.concat([
   }),
   terser(),
   filesize(),
+  visualizer(),
 ]);
 
 const base = {
   input: "src/index.js",
-  external: ["react", "react-dom", "prism-react-renderer", "buble"],
+  external: ["react", "react-dom", "prism-react-renderer", "sucrase"],
 };
 
 const output = {
   exports: "named",
   globals: {
     "prism-react-renderer": "Prism",
     react: "React",
-    buble: "Buble",
+    sucrase: "Sucrase",
     "react-dom": "ReactDOM",
   },
 };

src/components/Live/LiveProvider.js

@@ -12,7 +12,6 @@ function LiveProvider({
   disabled,
   scope,
   transformCode,
-  transpileOptions,
   noInline = false,
 }) {
   const [state, setState] = useState({
@@ -25,7 +24,6 @@ function LiveProvider({
     const input = {
       code: transformCode ? transformCode(newCode) : newCode,
       scope,
-      transpileOptions,
     };
 
     const errorCallback = (error) =>
@@ -47,7 +45,7 @@ function LiveProvider({
 
   useEffect(() => {
     transpile(code);
-  }, [code, scope, noInline, transformCode, transpileOptions]);
+  }, [code, scope, noInline, transformCode]);
 
   const onChange = (newCode) => transpile(newCode);
 
@@ -79,7 +77,6 @@ LiveProvider.propTypes = {
   scope: PropTypes.object,
   theme: PropTypes.object,
   transformCode: PropTypes.node,
-  transpileOptions: PropTypes.object,
 };
 
 LiveProvider.defaultProps = {

src/utils/test/transpile.test.js

@@ -59,23 +59,6 @@ describe("transpile", () => {
 
       expect(wrapper.text()).toBe("Hello World!");
     });
-
-    it("adopts code generation based on transpileOptions", () => {
-      const code = `(() => {
-        class Foo { async bar() { await Promise.resolve(1); } }
-      })();`;
-
-      expect(() => generateElement({ code })).toThrow();
-
-      expect(() =>
-        generateElement({
-          code,
-          transpileOptions: {
-            transforms: { classes: false, asyncAwait: false },
-          },
-        })
-      ).not.toThrow();
-    });
   });
 
   describe("renderElementAsync", () => {

src/utils/transpile/evalCode.js

@@ -1,5 +1,7 @@
 import React from "react";
-import { _poly } from "./transform";
+import assign from "core-js/features/object/assign";
+
+export const _poly = { assign };
 
 const evalCode = (code, scope) => {
   const scopeKeys = Object.keys(scope);

src/utils/transpile/index.js

@@ -2,24 +2,17 @@ import transform from "./transform";
 import errorBoundary from "./errorBoundary";
 import evalCode from "./evalCode";
 
-export const generateElement = (
-  { code = "", scope = {}, transpileOptions },
-  errorCallback
-) => {
+export const generateElement = ({ code = "", scope = {} }, errorCallback) => {
   // NOTE: Remove trailing semicolon to get an actual expression.
   const codeTrimmed = code.trim().replace(/;$/, "");
 
   // NOTE: Workaround for classes and arrow functions.
-  const transformed = transform(
-    `return (${codeTrimmed})`,
-    transpileOptions
-  ).trim();
-
+  const transformed = transform(`return (${codeTrimmed})`).trim();
   return errorBoundary(evalCode(transformed, scope), errorCallback);
 };
 
 export const renderElementAsync = (
-  { code = "", scope = {}, transpileOptions },
+  { code = "", scope = {} },
   resultCallback,
   errorCallback
   // eslint-disable-next-line consistent-return
@@ -38,5 +31,5 @@ export const renderElementAsync = (
     );
   }
 
-  evalCode(transform(code, transpileOptions), { ...scope, render });
+  evalCode(transform(code), { ...scope, render });
 };

src/utils/transpile/transform.js

@@ -1,18 +1,5 @@
-import { transform as _transform } from "buble";
-import assign from "core-js/features/object/assign";
+import { transform as _transform } from "sucrase";
 
-export const _poly = { assign };
+const opts = { transforms: ["jsx", "imports"] };
 
-export default (code, transpileOptions = {}) => {
-  const opts = {
-    ...transpileOptions,
-    objectAssign: "_poly.assign",
-    transforms: {
-      dangerousForOf: true,
-      dangerousTaggedTemplateString: true,
-      ...transpileOptions.transforms,
-    },
-  };
-
-  return _transform(code, opts).code;
-};
+export default (code) => _transform(code, opts).code;

typings/react-live.d.ts

@@ -1,8 +1,5 @@
 import { ComponentClass, HTMLProps, ComponentType, Context } from 'react'
 import { PrismTheme, Language } from 'prism-react-renderer';
-import { TransformOptions } from 'buble';
-
-type TranspileOptions = TransformOptions & { transforms: {asyncAwait?: boolean}}
 
 // Helper types
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
@@ -17,7 +14,6 @@ export type LiveProviderProps = Omit<DivProps, 'scope'> & {
   code?: string;
   noInline?: boolean;
   transformCode?: (code: string) => string;
-  transpileOptions?: TranspileOptions;
   language?: Language;
   disabled?: boolean;
   theme?: PrismTheme;