1.4.2 • Published 12 months ago
babel-plugin-react-live v1.4.2
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.