Babel Plugin to change the syntax of React Live
npm install babel-plugin-react-liveReact 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).
Input
``tsx`
const YourComponent = () => {
const foo = 'bar'
return (
{foo}
)
}
Output
`tsx
const YourComponent = () => {
const foo = 'bar'
return (
{
}
)
}
`When used with a render callback, it is transformed to use ReactLive's
render (noInline).Input
`tsx
const YourComponent = () => {
const foo = 'bar'
return (
{() => {
const StyledDiv = styled.div
return {foo}
}}
)
}
`Output
`tsx
const YourComponent = () => {
const foo = 'bar'
return (
{
color: red;
\}
)
}
`How to use
Install
babel-plugin-react-live and add it to your Babel config.`json
{
"plugins": [
[
"babel-plugin-react-live",
{
"componentName": "YourComponent",
"filesToMatch": ["Examples.tsx"],
"prettierPath": "./.prettierrc"
}
]
]
}
``It uses Babel AST to transform related code to a string.