feat: add "buble" prop to LiveProvider component

Author: aleclarson

src/components/Live/LiveProvider.js

@@ -20,47 +20,51 @@ export default class LiveProvider extends Component {
     noInline: PropTypes.bool,
     scope: PropTypes.object,
     theme: PropTypes.object,
+    buble: PropTypes.object,
     transformCode: PropTypes.node
   };
 
   // eslint-disable-next-line camelcase
   UNSAFE_componentWillMount() {
-    const { code, scope, transformCode, noInline } = this.props;
+    const { code, scope, buble, transformCode, noInline } = this.props;
 
-    this.transpile({ code, scope, transformCode, noInline });
+    this.transpile({ code, scope, buble, transformCode, noInline });
   }
 
   componentDidUpdate({
     code: prevCode,
     scope: prevScope,
+    buble: prevBuble,
     noInline: prevNoInline,
     transformCode: prevTransformCode
   }) {
-    const { code, scope, noInline, transformCode } = this.props;
+    const { code, scope, buble, noInline, transformCode } = this.props;
     if (
       code !== prevCode ||
       scope !== prevScope ||
+      buble !== prevBuble ||
       noInline !== prevNoInline ||
       transformCode !== prevTransformCode
     ) {
-      this.transpile({ code, scope, transformCode, noInline });
+      this.transpile({ code, scope, buble, transformCode, noInline });
     }
   }
 
   onChange = code => {
-    const { scope, transformCode, noInline } = this.props;
-    this.transpile({ code, scope, transformCode, noInline });
+    const { scope, buble, transformCode, noInline } = this.props;
+    this.transpile({ code, scope, buble, transformCode, noInline });
   };
 
   onError = error => {
     this.setState({ error: error.toString() });
   };
 
-  transpile = ({ code, scope, transformCode, noInline = false }) => {
+  transpile = ({ code, scope, buble, transformCode, noInline = false }) => {
     // Transpilation arguments
     const input = {
       code: transformCode ? transformCode(code) : code,
-      scope
+      scope,
+      buble
     };
 
     const errorCallback = err =>

src/utils/transpile/evalCode.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { _poly } from './transform';
+import { _poly } from './polyfills';
 
 const evalCode = (code, scope) => {
   const scopeKeys = Object.keys(scope);

src/utils/transpile/index.js

@@ -1,13 +1,26 @@
-import transform from './transform';
+import { transform } from 'buble';
 import errorBoundary from './errorBoundary';
 import evalCode from './evalCode';
 
-export const generateElement = ({ code = '', scope = {} }, errorCallback) => {
+export const generateElement = (
+  { code = '', scope = {}, buble = {} },
+  errorCallback
+) => {
   // NOTE: Remove trailing semicolon to get an actual expression.
   const codeTrimmed = code.trim().replace(/;$/, '');
 
+  const bubleOptions = {
+    objectAssign: '_poly.assign',
+    ...buble,
+    transforms: {
+      dangerousForOf: true,
+      dangerousTaggedTemplateString: true,
+      ...buble.transforms
+    }
+  };
+
   // NOTE: Workaround for classes and arrow functions.
-  const transformed = transform(`return (${codeTrimmed})`).trim();
+  const transformed = transform(`return (${codeTrimmed})`, bubleOptions).trim();
   return errorBoundary(evalCode(transformed, scope), errorCallback);
 };
 

src/utils/transpile/polyfills.js

@@ -0,0 +1,3 @@
+import assign from 'core-js/fn/object/assign';
+
+export const _poly = { assign };