babel-plugin-exp123

Reactivars

Reactivars is a Babel plugin that lets you use a Svelte like syntax with Solid (a React version is a WIP).

const CounterChild = props =>
   <button onClick={() => props.$count++}>
      {props.$count}
   </button>

const CounterParent = () => {
   let $count = 0
   const incrementCount = () => $count++
   return <CounterChild {...{ $count }} />
}

//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

import { createSignal } from 'solid-js'

const CounterChild = props => {
   <button onClick={() => props.$count[1](val => ++val)}>
      {props.$count[0]()}
   </button>

const CounterParent = () => {
   const $count = createSignal(0)
   const incrementCount = () => $count[1](val => ++val)
   return <CounterChild {...{ $count }} />
}

This is how it looks when used in conjunction with babel-plugin-solid-undestructure:

const CounterChild = ({ $count }) =>
   <button onClick={() => $count++}>
      {$count}
   </button>

const CounterParent = () => {
   let $count = 0
   const incrementCount = () => $count++
   return <CounterChild {...{ $count }} />
}

//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

import { createSignal } from 'solid-js'

const CounterChild = ({ $count }) => {
   <button onClick={() => $count[1](val => ++val)}>
      {$count[0]()}
   </button>

const CounterParent = () => {
   const $count = createSignal(0)
   const incrementCount = () => $count[1](val => ++val)
   return <CounterChild {...{ $count }} />
}

Getting Started

npm i -D @reactivars/solid

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: ["@reactivars/solid"]
}