Babel Plugin Solid Labels Versions Save

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: https://github.com/lxsmnsyc/solid-labels/compare/v0.15.1...v0.16.0

• Add unplugin
• Add $catchError CTF

• 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: https://github.com/lxsmnsyc/solid-labels/compare/v0.13.0...v0.14.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.

• 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,
    },
  }
}

• 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"
  });
}

• 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.

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.

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

This release adds support for comments as labels.

// @signal
let count = 0;

// @memo 
let message = `Count: ${count}`;

becomes

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

// @signal
let [_count, _setcount] = _createSignal(0, {
  name: "count"
}); // @memo


let _message = _createMemo(() => `Count: ${_count()}`, {
  name: "message"
});