https://github.com/lxsmnsyc/solid-labels

Simple, reactive labels for SolidJS
https://github.com/lxsmnsyc/solid-labels

babel-plugin solid-js

Last synced: 6 days ago
JSON representation

Simple, reactive labels for SolidJS

• Host: GitHub
• URL: https://github.com/lxsmnsyc/solid-labels
• Owner: lxsmnsyc
• License: mit
• Created: 2021-09-16T16:46:06.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-25T17:48:05.000Z (about 2 months ago)
• Last Synced: 2024-10-29T18:05:53.317Z (about 2 months ago)
• Topics: babel-plugin, solid-js
• Language: TypeScript
• Homepage:
• Size: 4.13 MB
• Stars: 242
• Watchers: 4
• Forks: 8
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Babel Solid Plugin - Labels - Simple, reactive labels for SolidJS (📦 Components & Libraries / DX)

README

        

# `solid-labels`

[![NPM](https://img.shields.io/npm/v/solid-labels.svg)](https://www.npmjs.com/package/solid-labels) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)



  



## Install

```bash

npm install solid-labels

```

```bash

yarn add solid-labels

```

```bash

pnpm add 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](https://github.com/LXSMNSYC/solid-labels/tree/main/docs/labels.md)

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-labels/tree/main/examples/labels)

- [Comments](https://github.com/LXSMNSYC/solid-labels/tree/main/docs/comments.md)

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-labels/tree/main/examples/comments)

- [Compile-Time Functions](https://github.com/LXSMNSYC/solid-labels/tree/main/docs/ctf.md)

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-labels/tree/main/examples/ctf)

- [Solid Namespace](https://github.com/LXSMNSYC/solid-labels/tree/main/docs/namespace.md)

### Typescript

`.d.ts`

```ts

/// 

```

### Babel

`.babelrc`

```json

{

  "plugins": [

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

  ]

}

```

[!INFO]: You don't have to use this if you're using Vite or Rollup plugins

## Integrations

- [Vite](https://github.com/lxsmnsyc/solid-labels/tree/main/packages/vite)

- [Rollup](https://github.com/lxsmnsyc/solid-labels/tree/main/packages/rollup)

- [Unplugin](https://github.com/lxsmnsyc/solid-labels/tree/main/packages/unplugin)

### Disabling features

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

```js

{

  disabled: {

    labels: {

      signal: true,

    },

    pragma: {

      '@signal': true,

    },

    ctf: {

      $signal: true,

    },

  }

}

```

## Limitations

- Detecting shadowed identifier for `signal` and `memo`.

## Sponsors

![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)