A babel for SolidJS that gives you an <If> and <Else> components which provide an alternative syntax to the <Show> component.
babel-plugin-solid-if-component
is a Babel for SolidJS plugin that gives you an <If>
and <Else>
component macros. It compiles to Solid's <Show>
component (<Else>
goes to the fallback prop) and it gives you an altrnative syntax to the <Show>
component that achieve the same conditional rendering behavior.
Note This plugin is WIP.
import { If, Else } from 'babel-plugin-solid-if-component';
const MyComp = () => {
return (
<>
<If cond={hello}>
<div>Hello</div>
</If>
<Else>
<div>Goodbye</div>
</Else>
</>
)
}
// ↓ ↓ ↓ ↓ Compiles to ↓ ↓ ↓ ↓
import { Show as _Show } from "solid-js";
const MyComp = () => {
return (
<>
<_Show
when={hello}
fallback={<div>Goodbye</div>}
>
<div>Hello</div>
</_Show>
</>
)
}
<If>
component can be used by itself.<Else>
component has to always follow an <If>
component.npm i -D babel-plugin-solid-if-component
In your Vite config, find the your vite-plugin-solid initialization (in the default Solid template it will be imported as solidPlugin).
The first argument this initialization function takes, is the options object.
Add this field to the initializer options:
{
babel: {
plugins: ['babel-plugin-solid-if-component']
}
}
<ElseIf>
/ <Elif>
component<m:if>
and <m:else>
(under considaration)