svelte template syntax support

[lifeart]

Resolves: #100

check: node plugins/svelte-compiler.js

// https://gist.github.com/lifeart/133d679f18a9340fa4f190bcd7caed06

Todo:

• spread in each
• runes? https://svelte.dev/blog/runes https://github.com/sveltejs/svelte/blob/9e98bb6d0f79f0aec14715d96504852b2ead2019/documentation/blog/2023-09-20-runes.md?plain=1#L2
• support rune transform? https://github.com/sveltejs/svelte/blob/9e98bb6d0f79f0aec14715d96504852b2ead2019/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js#L9

Plugin description

This Babel Abstract Syntax Tree (AST) plugin is designed for processing JavaScript code, particularly targeting the transformation of class components and variable declarations within a specific framework or library context. The plugin seems to be part of a larger build system or compiler aimed at enhancing state management and reactivity in JavaScript applications. Here's a breakdown of its functionalities and some input-output code examples to illustrate its actions.

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.

• add rune tests? https://github.com/sveltejs/svelte/blob/9e98bb6d0f79f0aec14715d96504852b2ead2019/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/main.svelte#L4
• let { width, height } = $props(); // instead of export let` ?
• slots
• style modifier
• bind: support ?
• slot params
• unstable component wrappers
• contexts
• 'AssignmentPattern' ?
• ...attributes ({...$$restProps}) on element
• component arguments

  export let f = 12;
  -->
  let f = formula(() => args['f'] ?? 12);
  -->
  Object.defineProperty(ctx, 'f', {
    get() {
        return args[f] ?? 12;
     }
  });

seems magic.update(node.start, node.end, result); should be replaced with magic.appendLeft(node.start, result);

[netlify]

✅ Deploy Preview for g-next ready!

Name	Link
🔨 Latest commit	aa2545d
🔍 Latest deploy log	https://app.netlify.com/sites/g-next/deploys/65ce81bec57bf500082c2f1f
😎 Deploy Preview	https://deploy-preview-101--g-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Code Coverage Report

Coverage after merging svelte-template-syntax-support into master

76.15%

Coverage Report

File	Lines (%)	Funcs (%)	Uncovered Lines
.../pages/page-one
Smile.ts	79.59		6, 7, 8, 9, ...
.../pages/page-two
Clock.ts	94.12	83.33	17, 26
tests
utils.ts	95.56		29, 73, 74, 75, ...
utils
benchmark.ts	69.44		19, 20, 21, 22, ...
compat.ts	96.23		28, 29, 30, 38, ...
component.ts	95.60		79, 8, 9, 97, ...
dom-api.ts	95.65		12, 21, 22, 23, ...
dom.ts	98.42	90	843, 851, 852, 922, ...
ember-inspector.ts	14.70	0	96, 97, 98, 99, ...
if.ts	65.12	66.67	88, 89, 98, 99, ...
list.ts	93.50	80	66, 70, 71, 72, ...
reactive.ts	91.47		56, 61, 66, 67, ...
rehydration-dom-api.ts	48.41		96, 97, 98, 99, ...
rehydration.ts			135, 144, 34, 37, ...
runtime.ts	95.74		11, 12, 13
shared.ts	76.70		95, 96, 97, 98, ...
vm.ts			24, 4
utils/helpers
hash.ts	81.82	66.67	14, 15, 16, 17, ...
if.ts	66.67		2, 3, 4
utils/inspector
index.ts	33.33	0	96, 97, 98, 99, ...

[github-actions]

duration phase no difference [-126ms to 119ms]
renderEnd phase no difference [0ms to 1ms]
render1000Items1End phase no difference [-1ms to 15ms]
clearItems1End phase no difference [-3ms to 4ms]
render1000Items2End phase no difference [-12ms to 1ms]
clearItems2End phase no difference [0ms to 0ms]
render5000Items1End phase no difference [-33ms to 17ms]
clearManyItems1End phase no difference [-2ms to 1ms]
render5000Items2End phase no difference [-16ms to 24ms]
clearManyItems2End phase no difference [-3ms to 4ms]
render1000Items3End phase no difference [-7ms to 17ms]
append1000Items1End phase no difference [-10ms to 26ms]
append1000Items2End phase no difference [-11ms to 24ms]
updateEvery10thItem1End phase no difference [-3ms to 0ms]
updateEvery10thItem2End phase no difference [-5ms to 17ms]
selectFirstRow1End phase no difference [-4ms to 1ms]
selectSecondRow1End phase no difference [0ms to 0ms]
removeFirstRow1End phase no difference [0ms to 0ms]
removeSecondRow1End phase no difference [0ms to 0ms]
swapRows1End phase no difference [-1ms to 3ms]
swapRows2End phase no difference [-1ms to 1ms]
clearItems4End phase no difference [-2ms to 3ms]
paint phase no difference [0ms to 0ms]

[22:15:25] Generating Benchmark Reports [started]
[22:15:30] Generating Benchmark Reports [completed]

Benchmark Reports    

JSON: /home/runner/work/glimmer-next/glimmer-next/tracerbench-results/compare.json

PDF: /home/runner/work/glimmer-next/glimmer-next/tracerbench-results/artifact-1.pdf

HTML: /home/runner/work/glimmer-next/glimmer-next/tracerbench-results/artifact-1.html