Babel config

👋 First off, thank you very much for making this! I’ve used component-playground for a while, and have found this to be a really easy transition so far.

The one finicky thing I’m running into is “how” I’m writing my components that I pass into the code param.

My .babelrc looks like this:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    "stage-0",
    "react"
  ],
  "plugins": [
    "transform-strict-mode"
  ]
}

Here’s an example I’m attempting to use:

const AlertExample = `
class Example extends React.Component {
  state = {
    toggleAlert: false,
  };

  handleToggleAlert = () => {
    this.setState({
      toggleAlert: !this.state.toggleAlert,
    });
  }

  render() {
    return (
      <Fragment>
        <Alert collapse={this.state.toggleAlert} type="primary" close>Test 1</Alert>
        <Button type="reset" onClick={this.handleToggleAlert} >Toggle Alert</Button>
      </Fragment>
    );
  }
}
`.trim();

so I’m using a few niceties when I write my own components. It looks like when passing that same type of code into <LiveProvider /> it doesn’t appear to be compiling, and blows up because of a syntax issue. Is there a way for react-live to take advantage of my babel config?

[zslabs]

I ended up using:

<LiveProvider
  scope={props.scope}
  code={props.code}
  mountStylesheet={false}
  transformCode={input => transform(input, { presets: ['stage-0', 'react'] }).code}
>
  <LiveEditor />
  <LivePreview />
  <LiveError />
</LiveProvider>

[kitten]

No, currently react-live neither uses babel-standalone nor does it allow extensive customisation of the transpilation that it performs. It currently just uses Bublé, so whatever Bublé is able to transpile, react-live will also accept.

I’ve read in another issue (not sure if GH or somewhere else?) that someone is currently simply using the transformCode prop using babel-standalone. Maybe you can give that a try?