Install

npm install babel-plugin-solid-labels

yarn add babel-plugin-solid-labels

pnpm add babel-plugin-solid-labels

Features

• 🏷 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!

Usage

• Labels
• Comments
• Compile-Time Functions
• Solid Namespace

Typescript

<any file>.d.ts

/// <reference types="babel-plugin-solid-labels" />

Babel

.babelrc

{
  "plugins": [
    ["babel-plugin-solid-labels", { "dev": false }]
  ]
}

Vite

vite-plugin-solid

// 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

// 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' }]
        ],
      },
    }),
  ],
});

Disabling features

You can disable some features by passing disabled option to the plugin options.

{
  disabled: {
    labels: {
      signal: true,
    },
    pragma: {
      '@signal': true,
    },
    ctf: {
      $signal: true,
    },
  }
}

Limitations

• Detecting shadowed identifier for signal and memo.

Sponsors

License

MIT © lxsmnsyc