v0.17.0

It's been a long time since my last release, here's to keep things fresh:

• Add function expression support for $memo and $
  • This means you can now do const foo = $memo(() => someStuff())
• Fix binding replacement to properly support variable shadowing
• Optimize compilation

In the future, I plan on deprecating the rollup and vite plugins they are just basically wrappers to the unplugin package. Also, since Solid 2.0 is near, expect some Solid Labels 1.0 soon.

v0.16.0

Changes

• Add solid-labels (#19)
  • This change separates the global type definition from the babel plugin.
  • This addition deprecates babel-plugin-solid-labels in favor of solid-labels/babel.
• Add solid-labels as peer dependencies for the plugins.
• Add prototype optimization for $getter, $setter and $property. (#18)
  • This optimization was inspired by Svelte 5 runes.

Migration

• babelrc
  • Change target plugin from babel-plugin-solid-labels to solid-labels/babel
• unplugin-solid-labels, rollup-plugin-solid-labels and vite-plugin-solid-labels
  • Add solid-labels as devDependency
• Typescript
  • Change babel-plugin-solid-labels into solid-labels for <reference types> and types in tsconfig.

Full Changelog: v0.15.1...v0.16.0

v0.15.0

• Add unplugin
• Add $catchError CTF

v0.14.0

• Adds the following integrations:
  • Vite
  • Rollup
• Remove support of AssignmentExpression, Identifier or a sequence of either expressions, for signal, memo and $ labels
  • You can no longer do signal: x = 0 for declaring variables. Use VariableDeclaration instead (signal: var x = 0)
• Remove support of VariableDeclaration for $ labels. Use memo label instead.
• Remove $ auto-import components in favor of Solid's actual built-in component's name.
  • You can now use Solid's built-in components globally (e.g. previously you'd do <$for .../> but now you can do <For .../>)
• Remove some useless solid namespace types
  • Since JSX doesn't support generics, some solid:* components do not benefit to this (e.g. For). The types are now removed, but the compiler still supports it.
• Add $useTransition and $startTransition
• Add $owner and $runWithOwner
• Fix destructure variants to work with $property, $getter, $refMemo and $get
• Fix Typescript-related issues when trying to use CTF
• Fix global types

Full Changelog: v0.13.0...v0.14.0

v0.12.0

• Adds the Solid Namespace
• Deprecates the use of auto-imports for the Solid components (ie using $show for Show). The feature is going to be removed in the next release.

v0.10.0

• Adds $component CTF. This CTF is used for defining Solid components, and allows the component's props to be implicitly destructured, much like $destructure.

$component(({ [x]: { y, ...z } = { y: 10 }, ...a }) => (
  <>
    {y}
    {z}
    {a}
  </>
))

import { mergeProps as _mergeProps } from "solid-js";
import { splitProps as _splitProps } from "solid-js";
import { createMemo as _createMemo } from "solid-js";

_props => {
  const _def = _createMemo(() => ({
    y: 10
  })),
        _prop = () => {
    const _value = _props[x];
    return _value == null ? _def() : _value;
  },
        _prop2 = () => _prop().y,
        _other = _splitProps(_props, [x])[1],
        _other2 = _splitProps(_mergeProps(_prop(), _def), ["y"])[1];

  return <>
    {_prop2()}
    {_other2}
    {_other}
  </>;
};

• Adds support for default values in $destructure.
• Adds disabled option to the plugin.

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

v0.8.0

• Adds $getter, $setter and $property CTFs. These CTFs allows retaining reactivity and tracking for signals and memo refs when being assigned to objects.

let count = $signal(0);
const message = $memo(`Count: ${count}`);

const obj = {
  count: $property(count),
  message: $property(message),
};

import { createMemo as _createMemo } from "solid-js";
import { createSignal as _createSignal } from "solid-js";

let [_count, _setcount] = _createSignal(0);

const _message = _createMemo(() => `Count: ${_count()}`);

const obj = {
  get count() {
    return _count();
  },

  set count(_value) {
    return _setcount(() => _value);
  },

  get message() {
    return _message();
  }

};

You can read more about it here: https://github.com/LXSMNSYC/babel-plugin-solid-labels/blob/main/docs/ctf.md#reactive-properties

• Fix auto-arrow expressions (e.g. $memo) to inline function calls of zero arity. Previously, $memo(someCall()) produces createMemo(() => someCall()), now it produces createMemo(someCall).
• Add names to @effect, @computed and @renderEffect. Strings that comes after the pragma are treated as their debug names, respectively.

// @signal
let x = 0;

/* @effect Effect Log */ {
  console.log('Count', x);
}
/* @computed Computed Log */ {
  console.log('Count', x);
}
/* @renderEffect Render Effect Log */ {
  console.log('Count', x);
}

import { createRenderEffect as _createRenderEffect } from "solid-js";
import { createComputed as _createComputed } from "solid-js";
import { createEffect as _createEffect } from "solid-js";
import { createSignal as _createSignal } from "solid-js";

//
let [_x, _setx] = _createSignal(0);
/**/


_createEffect(() => {
  console.log('Count', _x());
}, undefined, {
  name: "Effect Log"
});
/**/


_createComputed(() => {
  console.log('Count', _x());
}, undefined, {
  name: "Computed Log"
});
/**/


_createRenderEffect(() => {
  console.log('Count', _x());
}, undefined, {
  name: "Render Effect Log"
});

• Add names to effect, computed and renderEffect labels. To name them, simply add another labeled statement directly after the labels.

function Counter() {
  signal: x = 0;

  effect: effectLog: {
    console.log('Count', x);
  }
  computed: computedLog: {
    console.log('Count', x);
  }
  renderEffect: renderEffectLog: {
    console.log('Count', x);
  }
}

import { createRenderEffect as _createRenderEffect } from "solid-js";
import { createComputed as _createComputed } from "solid-js";
import { createEffect as _createEffect } from "solid-js";
import { createSignal as _createSignal } from "solid-js";

function Counter() {
  const [_x, _setx] = _createSignal(0);

  _createEffect(() => {
    console.log('Count', _x());
  }, undefined, {
    name: "effectLog"
  });

  _createComputed(() => {
    console.log('Count', _x());
  }, undefined, {
    name: "computedLog"
  });

  _createRenderEffect(() => {
    console.log('Count', _x());
  }, undefined, {
    name: "renderEffectLog"
  });
}

v0.7.0

• Adds $destructure CTF, @destructure comment pragma and destructure label. This utility compiles to splitProps and also allows destructuring while retaining reactivity.
• Adds $merge. Compiles to mergeProps.
• Compile-time errors are now better and descriptive.
• Introduces the plugin option dev which enables name fields for signal and memo.

v0.6.0

New features

CTFs

Adds the following CTFs:

• $lazy = lazy: Arrow function and auto import is automatically injected.
• $createContext = createContext: auto import.
• $useContext = useContext: auto import.
• $effect = createEffect: auto import
• $uid = createUniqueId: auto import
• $mapArray = mapArray: auto-import, auto-arrow for source. Auto-memo variable.
• $indexArray = indexArray: auto-import, auto-arrow for source. Auto-memo variable.
• $selector = createSelector: auto-import, auto-arrow for source.
• $children = children: auto-import, auto-arrow. Auto-memo variable
• $observable = observable: auto-import, auto-arrow. Requires Observable interface declaration for global definition.
• $from = from: auto-import. memo variable.
• $root = createRoot: auto import.
• $computed = createComputed: auto import.
• $renderEffect = createRenderEffect: auto import.
• $on = on: auto import, auto arrow.
• $deferred = createDeferred: auto import and arrow function is automatically injected.

In addition:

• $signal can now accept zero inputs or 2 inputs (for the options).
• $memo can now accept up to 3 inputs which includes the initial value and options.

Check out the docs for compile-time functions

Labels

• Adds deferred and children variable labels.
• Adds transition block label.

Check out the docs for labels

Comments

• Adds @deferred and @children variable comment.
• Adds @transition block comment.

Check out the docs for comments

Other updates

• Some major core improvements
• Fixes all memo variants to output options value to the 3rd argument of createMemo.
• Adds solid-js as peer dependency.

v0.5.0

• Adds compile-time functions and its type definitions. Check out the example.
• Adds $: label.
• Adds support for SequentialExpressions for signal and memo.