babel-plugin-solid-undestrcture

This babel plugin allows you to destructure your props in your Solid components without losing reactivity.

The plugin will "un-destructure" your props at build time, so the code you pass into the Solid compiler will not have destructured props. Instead the props will be accessed the normal way with props.someProp.

This plugin has two modes: TypeScript mode and vanilla JavaScript mode.

This plugin is in early development and it's not recommended for use in production.

TypeScript mode

The TypeScript mode is the mode used by default. It only transforms arrow components which are part of a variable declaration with a Component type annotation.

The type annotation must be a direct reference to the Solid Component type import, or an annotation of the form Solid.Component where Solid is a reference to the default import of Solid.

In both cases you can use the 'import as' syntax.

Examples:

import { Component } from 'solid-js'

const MyComponent: Component = // ...

import Solid from 'solid-js'

const MyComponent: Solid.Component = // ...

import { Component as ComponentAlias } from 'solid-js'

const MyComponent: ComponentAlias = // ...

This example won't work:

import { Component } from 'solid-js'

type ComponentAlias = Component

const MyComponent: ComponentAlias = // ...

In this example, MyComponent won't be transformed.

Configuring Vite

Install the plugin with

npm i -D babel-plugin-solid-undestructure

TypeScript mode

Add this to the top of the plugin list in your Vite config:

{
    ...babel({
        plugins: [
            ["@babel/plugin-syntax-typescript", { isTSX: true }],
            "babel-plugin-solid-undestructure",
        ],
        extensions: [".tsx"]
    }),
    enforce: 'pre'
},

If you want this plugin to work with .ts files as well, add this this to the top of the plugin list as well:

{
    ...babel({
        plugins: [
            "@babel/plugin-syntax-typescript",
            "babel-plugin-solid-undestructure",
        ],
        extensions: [".ts"]
    }),
    enforce: 'pre'
},

Vanilla JavaScript mode

In your Vite config, find the your vite-plugin-solid initialization.

The first argument this initialization function takes, is the options.

Add this to the initializer options:

babel: {
    plugins: [
        [
            "babel-plugin-solid-undestructure", 
            { mode: "vanilla-js" }
        ]
    ]
}

Options

mode

type: "ts" | "vanilla-js"

default: "ts"

Set the mode to TypeScript mode or vanilla JavaScript mode. See more about each mode above.