babel-plugin-reactivars-solid v0.0.4

babel-plugin-reactivars-solid

babel-plugin-reactivars-solid is a Babel plugin that lets you use a Svelte like syntax with Solid (a React version is a WIP).

import { $ } from 'babel-plugin-reactivars-solid'

const getDouble = ({ $sig }) => 
	({ $doubled: $([
		() => $sig * 2,
		newVal => $sig = newVal / 2
	])})

const CounterChild = ({ $doubleCount }) =>
   <button onClick={() => $doubleCount++}>
      {$doubleCount} (click to add 0.5 to count)
   </button>

const CounterParent = () => {
   let $count = 0
   let { $doubled: $doubleCount } = getDouble({ $sig: $count })
   const incrementCount = () => $doubleCount += 2
   return <>
      <button onClick={incrementCount}>
         {$count}
      </button>
      <CounterChild {...{ $doubleCount }} />
   </>
}

Disclaimer: this plugin doesn't have any known bugs at the moment, but is still not ready for production use. If you find any bugs please open an issue.

Getting Started

See reactivars-example

npm i -D babel-plugin-reactivars-solid @rollup/plugin-babel

Example config:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import { babel } from '@rollup/plugin-babel';

export default defineConfig({
   plugins: [
      {
         ...babel({
            plugins: [
               ["@babel/plugin-syntax-typescript", { isTSX: true }],
               "babel-plugin-reactivars-solid",
            ],
            extensions: [".tsx"]
         }),
         enforce: 'pre'
      },
      solidPlugin()
   ],
   build: {
      target: 'esnext',
      polyfillDynamicImport: false,
   },
});

Roadmap / Missing Features

• Handle batching, update functions and pending values
• $ label for effects

Under consideration

• Reactive variable factory functions (`let doubleCount = double$($count))
• Two way binding support for input elements

Other cool plugins

• https://github.com/orenelbaum/babel-plugin-solid-undestructure - This plugin lets you destructure your props without losing reactivity (also made by me).
• https://github.com/LXSMNSYC/babel-plugin-solid-labels - Solid labels is more of an all in one plugin. It has Svelte-like reactive variables (like this plugin), prop destructuring and more.
• https://github.com/LXSMNSYC/solid-sfc - An experimental SFC compiler for SolidJS.