Simple, reactive labels for SolidJS
npm install babel-plugin-solid-labels 
alt="Example"
style="width: 80%; height: auto;"
/>
``bash`
npm install babel-plugin-solid-labels
`bash`
yarn add babel-plugin-solid-labels
`bash`
pnpm add babel-plugin-solid-labels
- 🏷 Labels: Turn labels into SolidJS utility calls!
- 💬 Comments: Turn comments into SolidJS utility calls, too!
- ⏱ Compile-time Functions: Use functions that are evaluated during compile-time!
- 📦 Auto Imports: No need to import SolidJS utilities, explicitly!
- 🤝 JS and TS Friendly!
- Labels
- Comments
- Compile-Time Functions
- Solid Namespace
`ts`
///
.babelrc
`json`
{
"plugins": [
["babel-plugin-solid-labels", { "dev": false }]
]
}
vite-plugin-solid
`js
// vite.config.js
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import solidLabels from 'babel-plugin-solid-labels';
export default defineConfig({
plugins: [
solidPlugin({
babel: {
plugins: [
[solidLabels, { dev: process.env.NODE_ENV !== 'production' }]
],
},
}),
],
});
`
solid-start
`js
// vite.config.js
import { defineConfig } from 'vite';
import solidStart from 'solid-start';
import solidLabels from 'babel-plugin-solid-labels';
export default defineConfig({
plugins: [
solidStart({
babel: {
plugins: [
[solidLabels, { dev: process.env.NODE_ENV !== 'production' }]
],
},
}),
],
});
`
You can disable some features by passing disabled option to the plugin options.
`js`
{
disabled: {
labels: {
signal: true,
},
pragma: {
'@signal': true,
},
ctf: {
$signal: true,
},
}
}
- Detecting shadowed identifier for signal and memo`.
MIT © lxsmnsyc