Babel Plugin to enhance React Live syntax

React Live only supports code as a string. This Babel Plugin uses AST to transform JavaScript and TypeScript code to a string.

This allows the given "source code" to be fully typed (TypeScript).

Example

Input

const YourComponent = () => {
  const foo = 'bar'
  return (
    <LiveProvider scope={{ foo }} data-your-attributes>
      <div>{foo}</div>
    </LiveProvider>
  )
}

Output

const YourComponent = () => {
  const foo = 'bar'
  return (
    <LiveProvider scope={{ foo }} data-your-attributes>
      {`<div>{foo}</div>`}
    </LiveProvider>
  )
}

When used with a render callback, it is transformed to use ReactLive's render (noInline).

Input

const YourComponent = () => {
  const foo = 'bar'
  return (
    <LiveProvider scope={{ foo, styled }}>
      {() => {
        const StyledDiv = styled.div`
          color: red;
        `
        return <StyledDiv>{foo}</StyledDiv>
      }}
    </LiveProvider>
  )
}

Output

const YourComponent = () => {
  const foo = 'bar'
  return (
    <LiveProvider scope={{ foo, styled }} noInline>
      {`
        const StyledDiv = styled.div\`
          color: red;
        \`
        render(<StyledDiv>{foo}</StyledDiv>)
      `}
    </LiveProvider>
  )
}

How to use

Install babel-plugin-react-live and add it to your Babel config.

{
  "plugins": [
    [
      "babel-plugin-react-live",
      {
        "componentName": "YourComponent",
        "filesToMatch": ["Examples.tsx"],
        "prettierPath": "./.prettierrc"
      }
    ]
  ]
}

How it works

It uses Babel AST to transform related code to a string.