Advanced Runes

$inspect: debug แบบ reactive

$inspect log ค่า reactive และ log ใหม่ทุกครั้งที่เปลี่ยน — เป็นเครื่องมือ dev-only (กลายเป็น no-op ใน production build) ต่างจาก console.log ธรรมดาที่ fire ครั้งเดียว $inspect track argument ของตัวเองและรายงานทุก update

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);

  $inspect(count, doubled);   // logs on every change, dev only
</script>

คุณ chain .with(fn) เพื่อรัน logic เองในแต่ละการเปลี่ยนได้ (เช่น console.trace ว่าการเปลี่ยนมาจากไหน)

untrack: อ่านโดยไม่ depend

ภายใน $derived หรือ $effect ทุกค่า reactive ที่คุณอ่านจะกลายเป็น dependency บางครั้งคุณอยากอ่านค่า โดยไม่ สร้าง dependency นั้น — เพื่อให้ effect ไม่รันซ้ำตอนค่านั้นเปลี่ยน untrack (import จาก svelte) ทำแบบนั้น

<script>
  import { untrack } from 'svelte';

  let count = $state(0);
  let config = $state({ verbose: true });

  $effect(() => {
    // re-run when count changes, but NOT when config.verbose changes:
    const verbose = untrack(() => config.verbose);
    if (verbose) console.log(count);
  });
</script>

reactive state นอก component

runes ไม่ได้จำกัดแค่ไฟล์ .svelte ใน module แบบ .svelte.js หรือ .svelte.ts คุณใช้ $state และ $derived เพื่อเก็บ reactive state ที่ component ไหนก็ import ได้ — เป็นรากฐานของ shared state ทั้งแอปโดยไม่ต้องใช้ store

export function createCounter() {
  let count = $state(0);
  return {
    get count() { return count; },   // expose via a getter to preserve reactivity
    increment() { count++; },
  };
}

<script>
  import { createCounter } from './counter.svelte.js';
  const counter = createCounter();
</script>

<button onclick={counter.increment}>{counter.count}</button>

flowchart LR
  mod[".svelte.js module: $state + getter"] --> a["Component A import มัน"]
  mod --> b["Component B import มัน"]
  a --> sync["ทั้งคู่ sync กัน"]
  b --> sync

shared reactive state อยู่ใน .svelte.js module

จุดสำคัญ: expose การเข้าถึงผ่าน getter (หรือ object/class) ไม่ใช่ค่า primitive ที่ reassign ตรง ๆ primitive ที่ export ตรง ๆ จะถูก copy ตอน import และเสีย reactivity; getter อ่าน reactive source ตัวจริงทุกครั้ง pattern นี้ — factory หรือ class ใน .svelte.js module — คือทางเลือกยุคใหม่แทน store ซึ่งครอบคลุมเต็มในโมดูล State & Stores สั้น ๆ $host เป็น advanced rune ที่เกี่ยวข้อง ใช้เฉพาะตอน compile component เป็น custom element เพื่อเข้าถึง host element