Main Features

1. ClassBody Transformation: It handles class properties, distinguishing between public and private properties, and processes properties initialized with special call expressions ($state, $state.frozen, $derived, $derived.by). It modifies these properties based on their initialization, generating backing private fields, getters, setters, and ensuring immutability or reactivity where necessary.

2. VariableDeclaration Transformation: It processes variable declarations, looking for specific call expressions that indicate special state or derived state creation ($state, $state.frozen, $derived, $derived.by), and transforms them accordingly. It also handles $props for destructuring component props and $effect for effect management.

3. ExpressionStatement & CallExpression Transformation: It identifies and transforms specific call expressions related to effects ($effect, $effect.root, $effect.active) and inspection utilities ($inspect).

Code Transformations Examples

Before - Class Component with State and Derived Properties

class MyComponent {
  name = $state('John Doe');
  age = $state(30);
  greeting = $derived(() => `Hello, ${this.name}!`);
}

After - Transformed Class Component

class MyComponent {
  #name = $.source($.proxy('John Doe'));
  #age = $.source($.proxy(30));
  #greeting = $.derived(() => `Hello, ${this.name}!`);

  get name() { return $.get(this.#name); }
  set name(value) { this.#name = $.set($.proxy(value)); }

  get age() { return $.get(this.#age); }
  set age(value) { this.#age = $.set($.proxy(value)); }

  get greeting() { return $.get(this.#greeting); }
}

This transformed code introduces private backing fields for stateful properties, wraps initial state values with proxy or freeze functions for reactivity or immutability, and generates getters (and setters where applicable) for accessing and updating state.

Before - Variable Declaration with State

let myState = $state(0);
let myDerived = $derived(() => myState * 2);

After - Transformed Variable Declaration

let myState = $.source($.proxy(0));
let myDerived = $.derived(() => myState * 2);

The transformation wraps the state initialization in a call to create a reactive source and wraps derived state in a derived function call, ensuring the derived state updates in response to the original state changes.

Summary

This plugin is a sophisticated tool designed to work with a specific state management and reactivity model, transforming class properties and variable declarations to introduce reactivity, immutability, and efficient updates in a JavaScript application's components. The transformations ensure the application's state is managed in a predictable and optimized manner, enhancing the development experience and runtime efficiency.