Package Exports

babel-plugin-react-live
babel-plugin-react-live/babelPluginReactLive.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-react-live) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.