Compiler AST & CodeGen

// Svelte 5 Client Compiler Output (ESM)
import * as $ from "svelte/internal/client";

export default function App($$anchor) {
  // 1. Reactive Sources & Signals
  let name = $.source("Svelte");
  let count = $.source(0);
  let double = $.derive(() => $.get(count) * 2);

  // 2. Surgical DOM Template Creation
  var div = $.element("div", "svelte-1b2c3d");
  var h1 = $.element("h1");
  $.append(h1, $.text("Hello "));
  $.append(h1, $.derive(() => $.get(name)));
  $.append(h1, $.text("!"));
  $.append(div, h1);

  // 3. Event Listener Binding
  var button = $.element("button");
  $.append(button, $.text("Count: "));
  $.append(button, $.derive(() => $.get(count)));
  $.append(button, $.text(" (2x = "));
  $.append(button, $.derive(() => $.get(double)));
  $.append(button, $.text(")"));

  $.on(button, "click", () => $.set(count, $.get(count) + 1));
  $.append(div, button);

  // 4. Mount to Host Anchor (0 VDOM passes)
  $.append($$anchor, div);
}