<!-- Svelte：组件函数只跑一次，编译器把赋值变成精准更新 -->
<script>
  let count = $state(0);
  console.log("这行只打印一次，点多少下都不会再打");
</script>

<button onclick={() => count++}>
  点击 {count} 次
</button>

// ── 同样的东西在 React 里 ──
function Counter() {
  const [count, setCount] = useState(0);
  console.log("这行每点一次就打印一次");   // 函数整个重跑
  return <button onClick={() => setCount(c => c + 1)}>
    点击 {count} 次
  </button>;
}

<script>
  let count = $state(0);
  let history = $state([]);

  console.log("组件函数执行了一次");  // 点三次按钮，仍然只打印一行

  // 顶层的一次性计算 —— 不需要 useMemo，因为这行本来就只跑一次
  const rows = [1, 2, 3].map((n) => n * n);

  // 不需要 useCallback：bump 不会被重建，引用天然稳定
  function bump() {
    count += 1;
    history.push(count);          // 直接 push，见 02 章
  }
</script>

<p>{count} ｜ {history.join(",")} ｜ {rows.join(",")}</p>
<button onclick={bump}>加一</button>

<!-- 初始 "0 ｜  ｜ 1,4,9"；点三次后 "3 ｜ 1,2,3 ｜ 1,4,9"
     rows 从头到尾没被重算过，控制台也只有一行日志 -->

# ① 要做网站 —— 官方脚手架 sv（不是老教程里的 npm create svelte）
npx sv@latest create my-app        # 交互式：模板 / 类型 / 附加件 / 包管理器

# 想跳过所有提问，这一行可直接跑通
npx sv@latest create --template minimal --types ts --no-add-ons --no-install my-app
cd my-app && npm i && npm run dev

# 产出的是 SvelteKit 项目：
#   src/app.html                 页面外壳，缺了直接构建失败
#   src/routes/+page.svelte      首页（还有 +layout.svelte 根布局）
#   svelte.config.js             runes 除 node_modules 外一律开

# ② 只想学语法 —— 裸 Vite + Svelte
npm create vite@latest my-app -- --template svelte-ts
# 产出 src/main.ts + src/App.svelte，没有 routes/；main.ts 有效代码就三行：
#   import { mount } from "svelte";  import App from "./App.svelte";
#   mount(App, { target: document.getElementById("app") });

<script>
  // 组件实例的初始化代码，每个实例只跑一次
  let name = $state("世界");
  let greeting = $derived(`你好，${name}！`);
</script>

<!-- 模板：script 顶层的 name / greeting 直接可见，不用 return -->
<input bind:value={name} />
<h1 class="hi">{greeting}</h1>

<style>
  /* 只作用于本组件，不需要任何配置 */
  .hi { color: rebeccapurple; }
</style>

<!-- 渲染结果（注意 input 上没有哈希 class，因为没选择器命中它）：
     <input> <h1 class="hi svelte-n50uah">你好，世界！</h1>
     产出的 CSS：.hi.svelte-n50uah { color: rebeccapurple; } -->

# ── 日常三条命令 ──
npm run dev      # vite dev，按需编译，不做全量类型检查
npm run check    # svelte-check，CI 必须跑这一条
npm run build

# ── 干净项目上跑 svelte-check，输出 ──
# svelte-check found 0 errors and 0 warnings

# ── 故意写错后，输出原文 ──
# src\lib\Bad.svelte:3:3
# Error: Type 'string' is not assignable to type 'number'. (ts)
# src\lib\Bad.svelte:6:5
# Error: Cannot find name 'titel'. Did you mean 'title'? (ts)
# ====================================
# svelte-check found 2 errors and 0 warnings in 1 file

// ── 调试用 $inspect：仅 dev 编译下存在 ──
let n = $state(0);
$inspect(n);                                  // 值一变就打印
$inspect(n).with((type, v) => console.log(type, v));
// 挂载时 init 0；n++ 之后 update 1

<script>
  let n = $state(0);              // → let n = $.state(0)
  let o = $state({ a: 1 });       // → let o = $.proxy({ a: 1 })
  let r = $state.raw({ a: 1 });   // → let r = { a: 1 }（什么都没生成）

  function bump() {
    n++;                          // → $.update(n)：写入处被改写
    o.a++;                        // → o.a++ 原样保留，靠 proxy 的 set 陷阱
  }

  // ❌ 下面三种写法都过不了编译：state_invalid_placement
  // let x; x = $state(0);            $state 不能出现在普通赋值右边
  // const y = [$state(0)];          不能出现在数组／对象字面量里
  // function f() { return $state(0); }   不能当返回值
</script>

<!-- 模板是响应式上下文：这里的 n 编译成 $.get(n)，读的同时登记依赖 -->
<p>{n} {o.a} {r.a}</p>
<button onclick={bump}>加一</button>

<script>
  let items = $state([{ name: "键盘", price: 300 }]);
  const TAX = 0.08;                       // 不会变的东西不放 $state
  let total = $derived(
    items.reduce((s, i) => s + i.price, 0) * (1 + TAX)
  );

  function add() {
    items.push({ name: "鼠标", price: 120 });  // ✅ push 直接生效
  }
  function rename() {
    items[0].name = "机械键盘";             // ✅ 改嵌套属性也生效
  }
  // ❌ Svelte 3/4 的写法，5 里纯属多余：
  //    items = [...items, x];   items.push(x); items = items;

  function save() {
    // proxy 不能直接结构化克隆，先取快照
    postMessage($state.snapshot(items));
  }
</script>

<p>{items.map((i) => i.name).join("、")} ｜ {total.toFixed(2)}</p>
<button onclick={add}>加</button>
<!-- 初始 "键盘 ｜ 324.00"；点「加」后 "键盘、鼠标 ｜ 453.60" -->

<script>
  let raw = $state.raw({ n: 0 });

  function mutate() { raw.n++; }              // 改到了，但 UI 不知道
  function replace() { raw = { n: raw.n + 1 }; } // 整体替换才通知

  // —— 该用 raw 的两个典型场景 ——
  let rows = $state.raw([]);              // 上万条，只整体换
  async function reload() {
    rows = await (await fetch("/api/rows")).json();
  }

  let chart = $state.raw(null);           // 外部库实例，绝不能被 proxy 包
</script>

<p>{raw.n} ｜ {rows.length} 行</p>
<button onclick={mutate}>改属性</button>
<button onclick={replace}>整体替换</button>

<!-- 点击顺序与 DOM：
     初始 0 → 改属性 0 → 改属性 0 → 整体替换 3
     跳到 3 而不是 1，证明那两次 ++ 确实写进去了 -->

// ══ Svelte 3/4（老教程里的写法）══
<script>
  export let name;                 // 收 prop
  let count = 0;                  // 顶层 let 自动响应
  $: doubled = count * 2;         // 派生（依赖靠编译期猜）
  $: console.log(doubled);         // 副作用（写法和上一行一样！）
</script>
<button on:click={() => count++}>{name} {doubled}</button>

// ══ Svelte 5 runes（同样的功能）══
<script>
  let { name } = $props();          // 收 prop，见 05 章
  let count = $state(0);           // 显式声明这是状态
  let doubled = $derived(count * 2); // 派生：依赖运行时记录
  $effect(() => console.log(doubled)); // 副作用：和派生彻底分家
</script>
<button onclick={() => count++}>{name} {doubled}</button>

// 把上面那段旧代码放进 runes 模式，第一条错误是
// [legacy_export_invalid] Cannot use `export let` in runes mode — use $props() instead

<script>
  // ✅ 常量：不会变，放 $state 纯属浪费
  const TAX_RATE = 0.08;
  const LEVELS = ["低", "中", "高"];

  // ✅ 真正的源头状态
  let price = $state(100);
  let qty = $state(2);

  // ✅ 派生值用 $derived，不要 $state + 手动同步
  let total = $derived(price * qty * (1 + TAX_RATE));
  // ❌ let total = $state(0);  然后到处写 total = price * qty * ...
  //    多一个可能不同步的中间状态，且没人能保证每处都记得改

  // ✅ DOM 引用：不显示在界面上，普通 let 即可（无警告）
  let inputEl;

  // ✅ 外部句柄：只用来清理，永远不该进 $state
  let timer;
  function start() { timer = setInterval(() => qty++, 1000); }
  function stop() { clearInterval(timer); }
</script>

<input bind:this={inputEl} type="number" bind:value={qty} />
<p>合计 {total.toFixed(2)}</p>

<script>
  import { SvelteMap, SvelteSet } from "svelte/reactivity";

  // 状态与操作打包在一起，实例可以随便传
  class Counter {
    value = $state(0);              // 类字段里的 rune
    inc() { this.value += 1; }      // 点一下 DOM 从 0 → 1
  }
  const c = new Counter();

  const plain = new Map([["a", 1]]);   // ❌ set 后 DOM 不动
  const smap = new SvelteMap([["a", 1]]); // ✅ set 后 DOM 跟着变
  const sset = new SvelteSet([1]);

  function mutate() {
    plain.set("a", 9);      // Map 的数据在内部槽位里，proxy 拦不到
    smap.set("a", 9);
    sset.add(7);
  }
</script>

<p>{c.value} ｜ {plain.get("a")} ｜ {smap.get("a")} ｜ {[...sset].join(",")}</p>
<button onclick={() => c.inc()}>加</button>
<button onclick={mutate}>改集合</button>
<!-- 初始 "0 ｜ 1 ｜ 1 ｜ 1"，点两个按钮后 "1 ｜ 1 ｜ 9 ｜ 1,7" -->

<script>
  let n = $state(10);

  // 存的是「公式」，不是这一刻的值
  let doubled = $derived(n * 2);

  // 公式装不进一个表达式，就换 .by
  let sum = $derived.by(() => {
    let s = 0;
    for (let i = 1; i <= n; i++) s += i;
    return s;          // 忘了 return 就恒为 undefined
  });

  // 派生可以读派生，依赖图编译器自己连
  let label = $derived(`${n} → ${doubled}（前 n 项和 ${sum}）`);
</script>

<button onclick={() => n++}>n = {n}</button>
<p>{label}</p>

<!-- 挂载「10 → 20（前 n 项和 55）」，点一下变「11 → 22（前 n 项和 66）」-->

<script>
  let n = $state(10);
  let d = $derived(n * 2);   // 挂载时 d = 20

  function override() {
    d = 999;               // 5.56.7 不报错，页面立刻显示 999
  }

  function bump() {
    n++;                     // 依赖一变，999 被公式结果冲掉
  }
</script>

<p>n = {n}，d = {d}</p>
<button onclick={override}>把 d 改成 999</button>
<button onclick={bump}>n++</button>

<!-- 序列：20 →（n++）22 →（覆盖）999 →（n++）24 -->
<!-- 最后是 24 而不是 1000：999 从未进入公式，只是盖在结果上面 -->

<script>
  let last = $state("张");
  let first = $state("三");

  // ✗ 反面教材：拿 effect 去算一个派生值
  let bad = $state("");
  $effect(() => { bad = last + first; });

  // ✓ 正解：写得出公式，就交给 $derived
  let full = $derived(last + first);

  // ✓ effect 真正的活：推给 Svelte 管不到的外部世界
  $effect(() => {
    document.title = full;      // 浏览器标题不在信号图里
  });
</script>

<p>full = {full}｜bad = {bad}</p>
<button onclick={() => (first = "四")}>改名</button>

<!-- 改名后刷新前去读，full 已是「张四」，bad 还停在「张三」-->

<script>
  let n = $state(1);

  $effect.pre(() => {
    // 跑在 DOM 更新前：n 已是新值，DOM 上还是旧值
    console.log("pre    n=" + n, document.querySelector("#v")?.textContent);
  });

  $effect(() => {
    const v = n;              // 存快照，清理时才拿得到当时的值
    console.log("effect n=" + v, document.querySelector("#v").textContent);
    return () => console.log("cleanup n=" + v);
  });
</script>

<p id="v">{n}</p>
<button onclick={() => n++}>n++</button>

<!-- 输出：
     挂载  pre n=1 (undefined) ／ effect n=1 (1)
     n++   pre n=2 (1) ／ cleanup n=1 ／ effect n=2 (2)
     卸载  cleanup n=2                              -->

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

  let a = $state(0);
  let m = $state(0);
  let late = $state(0);

  $effect(() => {
    const x = a;                    // 同步读到 → 进依赖表
    const y = untrack(() => m);      // 被 untrack 包住 → 不进
    console.log("effect", x, y);

    (async () => {
      await Promise.resolve();
      console.log("await 后读 late =", late);   // 也不进依赖表
    })();
  });
</script>

<button onclick={() => a++}>a++（effect 重跑）</button>
<button onclick={() => m++}>m++（不重跑）</button>
<button onclick={() => late++}>late++（不重跑）</button>

<!-- 只有点第一个按钮才会看到 effect 输出 -->

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

  let src = $state(1);
  let log = $state([]);

  // ✗ 这样写直接抛 Error: https://svelte.dev/e/effect_update_depth_exceeded
  //    push 里的 items.length 是「读」，push 本身是「写」，自己触发自己
  // $effect(() => { log.push(log.length); });

  // ✓ untrack 掐断「读 log」这条边，环就断了
  $effect(() => {
    const v = src;                  // 只有 src 是依赖
    untrack(() => log.push(v));
  });
</script>

<p>log 长度 = {log.length}</p>
<button onclick={() => src++}>src++</button>

<!-- 挂载后长度 1，每点一次 +1；放开上面那行注释则立刻抛错 -->

<script>
  let user = $state({ name: "小明", age: 7 });
  let value = $state("简写");
  // 来自后端／用户的 HTML，未经清洗
  let raw = $state('<img src=x onerror="alert(1)"><b>粗体</b>');
</script>

<p>{user.name} 今年 {user.age} 岁，明年 {user.age + 1} 岁</p>

<!-- 属性简写：{value} 就是 value={value} -->
<input {value} />

<!-- @html 原样插入，零清洗 -->
<div>{@html raw}</div>

{#each [user] as u}
  <!-- @const 只能待在块里面，给长表达式起个名 -->
  {@const initial = u.name.slice(0, 1)}
  <span>{initial}</span>
{/each}

<!-- onerror 属性原封不动留在 DOM 上 -->

<script>
  let items = $state([
    { id: 1, name: "甲" }, { id: 2, name: "乙" }, { id: 3, name: "丙" }
  ]);
</script>

{#if items.length > 2}
  <p>还有不少</p>
{:else if items.length > 0}
  <p>快没了</p>
{:else}
  <p>空了</p>
{/if}

<ul>
  <!-- 圆括号里的 (item.id) 才是 key；不写它＝用下标当 key -->
  {#each items as item, i (item.id)}
    <li>{i + 1}. {item.name}<input /></li>
  {:else}
    <li>暂无数据</li>       <!-- 数组为空时的分支 -->
  {/each}
</ul>

<button onclick={() => items.shift()}>删掉第一个</button>

<!-- 先往三个输入框打字再点删除。带 key 时剩下两行的字跟着数据走；-->
<!-- 去掉 (item.id) 再试，标签往前挪了，输入框里的字却留在原位 -->

<script>
  let page = $state(1);
  // 让 Promise 本身是派生的，page 一变就是个新 Promise → 重走三态
  let promise = $derived(
    fetch(`/api/page/${page}`).then((r) => r.json())
  );
</script>

<!-- key 块：page 一变，里面整个销毁重建（节点全等为 false）-->
{#key page}
  <article>第 {page} 页</article>
{/key}
<button onclick={() => page++}>下一页</button>

<!-- await 块：把 Promise 的三个状态摊平写在模板里 -->
{#await promise}
  <p>加载中</p>
{:then data}
  <p>你好 {data.name}</p>
{:catch error}
  <p>出错：{error.message}</p>   <!-- 别省这一段 -->
{/await}

<!-- 只关心成功态可以简写成 {#await promise then data} -->

<script>
  let items = $state(["甲", "乙"]);
</script>

<!-- snippet：一段可复用的模板，编译后就是个函数 -->
{#snippet row(text, i)}
  <li>{i + 1}. {text}</li>
{/snippet}

<ul>
  {#each items as it, i}
    <!-- @render 调用它，参数按位置传 -->
    {@render row(it, i)}
  {/each}
</ul>

<!-- 渲染出 <ul><li>1. 甲</li><li>2. 乙</li></ul> -->

<!-- 它也能当 props 传给子组件，那是取代 Svelte 4 <slot> 的正统写法；-->
<!-- 调用时用可选链更稳：{@render children?.()} -->

<script>
  let box;                       // 挂载前是 undefined
  let color = $state("red");

  // action：老写法，靠 update 钩子接收新参数
  function paintAction(node, arg) {
    node.setAttribute("data-color", arg);
    return {
      update: (next) => node.setAttribute("data-color", next),
      destroy: () => {}
    };
  }

  // attachment：新写法，自动追踪函数体里读到的响应式值
  function paint(node) {
    node.setAttribute("data-color", color);  // 读了 color → 跟着它重跑
    return () => {};                        // 返回值即清理函数
  }

  $effect(() => { console.log("真实节点：", box.tagName); });
</script>

<div bind:this={box} use:paintAction={color}>老写法</div>
<div {@attach paint}>新写法</div>
<button onclick={() => (color = "blue")}>换色</button>

// 你写的：
//   <ul>{#each items as it (it.id)}<li>{it.name}</li>{/each}</ul>
// 编译器吐出来的（compile(src).js.code 节选）：

import * as $ from 'svelte/internal/client';

// 静态结构在模块顶层做成模板，运行时靠克隆产出节点
var root = $.from_html(`<li> </li>`);   // 空格＝给动态文本预留的位置
var root_1 = $.from_html(`<ul></ul>`);

export default function List($$anchor, $$props) {
  var ul = root_1();

  // 你写的 (it.id) 原样变成第四个参数；21 是编译期算好的标志位
  $.each(ul, 21, () => $$props.items, (it) => it.id, ($$anchor, it) => {
    var li = root();
    var text = $.child(li, true);
    $.reset(li);
    // 全篇唯一的「更新」逻辑，精确到那一个文本节点
    $.template_effect(() => $.set_text(text, $.get(it).name));
    $.append($$anchor, li);
  });

  $.reset(ul);
  $.append($$anchor, ul);
}

// 去掉 key 再编译：第四个参数变成 $.index —— 不写 key ＝ 按下标做 key

// 子组件 Button.svelte —— 在原生 button 外面包一层
<script>
  let {
    label,
    variant = "primary",  // 只在父组件没传时生效
    class: klass = "",     // class 是保留字，解构时必须改名
    onclick,             // 回调 prop：这就是 Svelte 5 的「事件」
    ...rest              // 其余属性照单全收，原样转发给 DOM
  } = $props();
</script>

<button class="btn btn-{variant} {klass}" {onclick} {...rest}>
  {label}
</button>

<!-- 父组件：aria-label 没在解构里列出，
     它会顺着 rest 落到真实的 button 元素上 -->
<Button label="提交 {count}" variant="danger" class="wide"
        onclick={() => count++} aria-label="提交表单" />

// Child.svelte —— 三种「改 props」的下场完全不同
<script>
  let { count, user, ...rest } = $props();
</script>

<!-- ① 重新赋值：本地临时覆盖。父组件看不到，
     而且父组件下次改 count 时这份覆盖直接作废 -->
<button onclick={() => count++}>子内部 {count}</button>

<!-- ② 改对象属性：user 就是父组件那个 $state proxy，
     父子会一起变，但 dev 模式会警告 -->
<button onclick={() => user.name = "改了"}>{user.name}</button>

<!-- ③ 改 rest：当场抛 props_rest_readonly -->
<button onclick={() => rest.id = "x"}>改 rest</button>

// 正确姿势：把「我想改」变成「我请父组件改」
// let { count, onIncrement } = $props();
// <button onclick={onIncrement}>{count}</button>

// Editor.svelte —— 事件是属性，向上通信靠回调 prop
<script>
  let { onsave } = $props();   // 回调 prop 就是「自定义事件」
  let count = $state(0);

  function submit(e) {
    e.preventDefault();          // 修饰符没了，自己动手
    onsave?.({ count });          // 参数直接给，不用包 CustomEvent
  }
</script>

<!-- 值是函数引用，属性名全小写；不是 on:click -->
<button onclick={() => count++}>点了 {count} 次</button>

<!-- 捕获阶段：属性名加 capture 后缀 -->
<div onclickcapture={() => log("先于子元素触发")}>
  <form onsubmit={submit}>
    <button type="submit">保存</button>
  </form>
</div>

<!-- 父组件：自定义事件和原生事件写法完全一致 -->
<!-- <Editor onsave={(d) => saved = d.count} /> -->

<script>
  let name = $state("");
  let agreed = $state(false);
  let color = $state("blue");   // radio 组：共享一个值
  let tags = $state(["a"]);      // checkbox 组：共享一个数组
  let el = $state();

  // bind:this 挂载后才有值，所以只能在 effect 里用
  $effect(() => { el?.focus(); });
</script>

<input bind:value={name} bind:this={el}>
<input type="checkbox" bind:checked={agreed}>

<input type="radio" bind:group={color} value="blue">
<input type="radio" bind:group={color} value="red">

<input type="checkbox" bind:group={tags} value="a">
<input type="checkbox" bind:group={tags} value="b">

<p>{name} · {agreed} · {color} · {tags.join("+")}</p>

// Rating.svelte —— 评分组件，代表「一个分数」
<script>
  // 括号里是父组件没传时的回退值，不是固定初始值
  let { value = $bindable(0), max = 5 } = $props();
</script>

{#each Array(max) as _, i}
  <button onclick={() => value = i + 1}>
    {i < value ? "★" : "☆"}
  </button>
{/each}
<button onclick={() => value = 0}>清零</button>

// App.svelte —— 父组件绑上去，两边永远同步
<script>
  import Rating from "./Rating.svelte";
  let score = $state(2);
</script>

<p>父组件的 score = {score}</p>
<Rating bind:value={score} max={3} />

<!-- 不绑也能用：这时它就是个非受控组件 -->
<!-- <Rating max={3} /> -->

// theme.svelte.js —— 用了 runes，文件名必须带 .svelte.js
import { getContext, setContext } from "svelte";

// Symbol 做 key：拼错字符串这种错误直接不可能发生
const KEY = Symbol("theme");

export function provideTheme() {
  let theme = $state("light");
  const ctx = {
    // 关键：存 getter 而不是值，读取才会发生在后代的渲染里
    get theme() { return theme; },
    toggle() { theme = theme === "light" ? "dark" : "light"; }
  };
  setContext(KEY, ctx);
  return ctx;
}

export const useTheme = () => getContext(KEY);

// App.svelte（顶层）：const t = provideTheme();
// Deep.svelte（任意深度）：
//   const t = useTheme();          <-- 必须在 script 顶层调
//   <button onclick={t.toggle}>{t.theme}</button>

<script>
  let items = $state([{ name: "笔", n: 3 }, { name: "本", n: 12 }]);
  let unit = $state("件");
</script>

<!-- 参数列表和 JS 函数一样；unit 是闭包读的，没当参数传 -->
{#snippet row(item, index)}
  <li class:even={index % 2 === 0}>
    {index + 1}. {item.name} —— {item.n}{unit}
  </li>
{/snippet}

{#snippet empty()}
  <li class="empty">还没有东西</li>
{/snippet}

<ul>
  {#each items as item, i}
    {@render row(item, i)}
  {:else}
    {@render empty()}
  {/each}
</ul>

// Svelte 3/4 的老写法（Card.svelte，现在会告警）
// <h3><slot name="title" /></h3>
// <div><slot /></div>
// <footer><slot name="foot" item={data} /></footer>

// Svelte 5：三种插槽全变成普通 prop
<script>
  let { title, children, actions, item } = $props();
</script>

<article>
  <h3>{title}</h3>
  {@render children?.()}

  <!-- 原来的 $$slots.foot：现在就是判个空 -->
  {#if actions}
    <footer>{@render actions(item)}</footer>
  {/if}
</article>

<!-- 父组件：具名插槽写成 snippet，let:item 变成函数参数 -->
<!-- <Card title="商品" item={it}>
       <p>这段自动变成 children</p>
       {#snippet actions(x)}<button>删除 {x.name}</button>{/snippet}
     </Card> -->

// Card.svelte —— children 是自动来的，actions 是具名的
<script>
  let { title, children, actions, item } = $props();
</script>

<article>
  <h3>{title}</h3>
  <!-- ?. 不能省：没写内容时 children 是 undefined -->
  {@render children?.()}
  {#if actions}
    <footer>{@render actions(item)}</footer>
  {/if}
</article>

// App.svelte —— 散落内容归 children，具名的各归各名
<script>
  import Card from "./Card.svelte";
  let it = $state({ id: 7, name: "笔记本" });
</script>

<Card title="商品" item={it}>
  <p>这段自动变成 children</p>
  {#snippet actions(x)}
    <!-- x 就是父组件那个 $state proxy，改得动 -->
    <button onclick={() => x.name += "!"}>改 #{x.id}</button>
  {/snippet}
</Card>

// Table.svelte —— 列的「怎么渲染」是数据的一部分
<script>
  let { rows, columns } = $props();
</script>

<table><tbody>
  {#each rows as row}
    <tr>
      <!-- col.cell 是个存在对象里的 snippet -->
      {#each columns as col}<td>{@render col.cell(row)}</td>{/each}
    </tr>
  {/each}
</tbody></table>

// App.svelte
<script>
  import Table from "./Table.svelte";
  let unit = $state("元");
  let rows = $state([{ name: "笔", price: 3 }]);
</script>

{#snippet nameCell(r)}<b>{r.name}</b>{/snippet}
<!-- unit 是闭包读的：在这里改，表格里立刻跟着变 -->
{#snippet priceCell(r)}<i>{r.price}{unit}</i>{/snippet}

<Table {rows} columns={[{ cell: nameCell }, { cell: priceCell }]} />

// DataList.svelte —— 只管结构和状态，不管长什么样
<script>
  let { items, item, empty, header } = $props();
</script>

<section>
  <!-- 把自己知道的东西当参数递出去，不猜调用方要什么 -->
  {#if header}<header>{@render header(items.length)}</header>{/if}

  {#if items.length === 0}
    {@render empty?.()}
  {:else}
    <ul>
      {#each items as it, i}<li>{@render item(it, i)}</li>{/each}
    </ul>
  {/if}
</section>

// App.svelte —— 四个 prop 就够了，再多需求也不用改组件
<DataList items={users}>
  {#snippet header(n)}<b>共 {n} 人</b>{/snippet}
  {#snippet item(u, i)}<a href="/u/{u.id}">{i + 1}. {u.name}</a>{/snippet}
  {#snippet empty()}<p>一个人都没有</p>{/snippet}
</DataList>

<div class="card">
  <p>作用域样式</p>
</div>

<style>
  p { color: blue; }
  .card p { margin: 0; }
  .nope { color: red; }    /* 模板里根本没有 .nope */
</style>

// ── 以上组件的真实产物（compile(src) · svelte 5.56.7）──
// css.code：
//   p.svelte-n50uah { color: blue; }
//   .card.svelte-n50uah p:where(.svelte-n50uah) { margin: 0; }
//   「(unused) .nope { color: red; }」被整条包成 CSS 注释留在产物里
//
// 渲染出的 DOM：
//   <div class="card svelte-n50uah"><p class="svelte-n50uah">…</p></div>
//
// warnings：css_unused_selector — Unused CSS selector ".nope"

<style>
  /* 1) 整条全局：产物就是 body { margin: 0; }，一点哈希都没有 */
  :global(body) { margin: 0; }

  /* 2) 局部锚点 + 全局后代 —— 优先用这种 */
  /*    产物：.a.svelte-1lj1c2n .b { color: blue; } 左边仍被限定 */
  .a :global(.b) { color: blue; }

  /* 3) :global 块：整块原样输出，且不做未使用检查 */
  :global {
    .markdown h2 { font-size: 1.4rem; }
    .markdown p  { line-height: 1.8; }
  }
</style>

<!-- @html 出来的节点拿不到哈希类，只能靠上面第 2/3 条兜住 -->
<div class="markdown">{@html rendered}</div>

// 产物里 :global 块长这样（注释掉了首尾两行，中间原样）：
//   /* :global {*/
//     .markdown h2 { font-size: 1.4rem; }
//   /*}*/

<script>
  let on = $state(true);
  let color = $state("red");
  let { class: cls = "" } = $props();   // 外部传进来的 class
</script>

<!-- 对象形式：键是类名，值为真才加上 -->
<p class={{ base: true, off: !on }}>对象</p>

<!-- 数组形式：拍平并忽略 falsy，最适合合并外部 class -->
<p class={[cls, on && "active", { big: on }]}>数组</p>

<!-- class={} 与 class: 指令并存，合并成 class="base extra" -->
<p class={{ base: true }} class:extra={on}>并存</p>

<!-- style: 同名属性会顶掉 style="" 里的写法 -->
<!-- 产物：style="font-weight: bold; color: red;" -->
<p style="color: blue; font-weight: bold" style:color={color}>样式</p>

<!-- 给子组件传 CSS 变量，子组件里用 var(--bg, white) 取 -->
<Child --bg={color} --pad="8px" />

<script>
  import { fade, fly, slide } from "svelte/transition";
  let visible = $state(false);
  let text = $state("a");
</script>

<button onclick={() => visible = !visible}>开关</button>
<button onclick={() => text += "!"}>只改文字</button>

{#if visible}
  <!-- 进出同一套，且可逆 -->
  <div transition:fade={{ duration: 200 }}>{text}</div>

  <!-- 进出分开，不可逆；|global 让父块销毁时也播 -->
  <div in:fly={{ y: -20 }} out:slide|global>飞入滑出</div>
{/if}

// ── （svelte 5.56.7 · jsdom + WAAPI 垫片）──
// 点「只改文字」：节点没进出 DOM，文字 a → a!，不播任何过渡
// 点「开关」关闭后立刻查询：节点仍在 DOM 里
// 再等 350ms：节点才真正被移除

<script>
  import { flip } from "svelte/animate";
  import { fade } from "svelte/transition";

  let items = $state([
    { id: 1, n: "甲" }, { id: 2, n: "乙" }, { id: 3, n: "丙" },
  ]);
  const shuffle = () =>
    items = items.toSorted(() => Math.random() - 0.5);
</script>

<button onclick={shuffle}>打乱</button>

<ul>
  <!-- 圆括号里的 (item.id) 是硬性要求，少了直接编译失败 -->
  {#each items as item (item.id)}
    <!-- li 必须是 each 的唯一子元素；animate 与 transition 可同时写 -->
    <!-- d 是本次位移的像素距离，默认 (d) => Math.sqrt(d) * 120 -->
    <li animate:flip={{ duration: (d) => Math.sqrt(d) * 60 }}
        transition:fade>{item.n}</li>
  {/each}
</ul>

// 去掉 (item.id) 的报错（svelte 5.56.7）：
// animation_missing_key — An element that uses the `animate:` directive
// must be the only child of a keyed `{#each ...}` block.

// counter.svelte.js —— 关键是文件名里那段 .svelte. ，它是给编译器的信号
let n = $state(0);

export function inc() { n++; }
export function reset() { n = 0; }

// 不能直接 export n（下一张卡讲为什么），用带 getter 的对象转一手
export const counter = {
  get value() { return n; },
};

// 组件里：
//   import { counter, inc } from "./counter.svelte.js";
//   <button onclick={inc}>{counter.value}</button>
// 两个不同组件同时 import，点任何一个，两边都会更新
// —— store 的全部功能，到这里就已经实现完了

// ── 把同样的代码存成 counter.js（没有 .svelte.）的结果 ──
// npx vite build ：静悄悄通过，一条报错都没有
// 访问页面      ：HTTP 500
//                 ReferenceError: $state is not defined

// ✗ 编译期直接失败：state_invalid_export
export let count = $state(0);
export function inc() { count++; }   // 有这行重新赋值，就报错

// ✓ 写法一：导出带 getter 的对象，值本身是模块私有的 let
let n = $state(0);
export const counter = {
  get value() { return n; },  // 读取推迟到调用方，追踪才跟得上
  bump() { n++; },
};

// ✓ 写法二：导出对象本身，只改属性、永不整体重新赋值
export const box = $state({ v: 0, list: [] });
export function bump() {
  box.v++;                // OK：深层代理，改属性/push 都响应
  box.list.push(box.v);   // OK
  // box = { v: 0, list: [] };  ← 一写这行就变成编译错误
}

// 报错原文（compileModule · svelte 5.56.7 · state_invalid_export）：
// Cannot export state from a module if it is reassigned.
// Either export a function returning the state value
// or only mutate the state value's properties

// cart.svelte.js
export class Cart {
  items = $state([]);
  coupon = $state(0);

  // $derived 字段里可以用 this，依赖自动追踪到 this.items
  total = $derived(
    this.items.reduce((s, i) => s + i.price, 0) - this.coupon
  );

  add(item) { this.items.push(item); }   // 原型方法：this 靠调用点

  // 箭头函数字段：this 构造时绑死，可以直接当 onclick 传
  clear = () => { this.items = []; };
}

// 单例：导出的是实例引用、从不重新赋值，所以不触发 state_invalid_export
export const cart = new Cart();

// 组件里（行为）：
//   <button onclick={() => cart.add({ price: 10 })}>加购</button>   ✓
//   <button onclick={cart.clear}>清空</button>                     ✓ 箭头字段
//   <button onclick={cart.add}>                                    ✗
//     TypeError: Cannot read properties of undefined (reading 'items')
//   new Cart() 出来的另一个实例与单例互不干扰

<script>
  import { writable, derived, get } from "svelte/store";
  import { fromStore, toStore } from "svelte/store";

  // 老 API 原样可用，5.56.7 无任何弃用告警
  const count = writable(0);
  const doubled = derived(count, ($c) => $c * 2);

  // store → rune：读 .current 就是响应式的
  const mirrored = fromStore(count);

  // rune → store：交给只认 store 契约的第三方代码
  let n = $state(5);
  const asStore = toStore(() => n, (v) => (n = v));
</script>

<button onclick={() => count.update((c) => c + 1)}>+1</button>

<!-- $ 前缀自动订阅在 runes 模式下照常工作 -->
<p>{$count} / {$doubled} / {mirrored.current} / {get(asStore)}</p>

// 初始「0 / 0 / 0 / 5」，点一下变「1 / 2 / 1 / 5」
// 编译告警：[] —— 空数组

// ✗ user.svelte.js —— 模块级：Node 进程只有一份，SSR 下会跨请求串号
export const session = $state({ name: "未登录" });
export function setUser(n) { session.name = n; }

// （kit 2.70.1 + adapter-node + vite preview）：
//   GET /leak?u=alice      → session.name = alice
//   GET /read（另一个人）  → session.name = alice   ← 串号，且无任何告警

// ✓ 正确做法：数据由 load 带下来，在 layout 里注入 context
// +layout.svelte
<script>
  import { setContext } from "svelte";
  let { children, data } = $props();
  setContext("user", { get name() { return data.user; } });
</script>
{@render children()}

// 任意后代组件
<script>
  import { getContext } from "svelte";
  const user = getContext("user");
</script>
<p>{user.name}</p>

// 同样场景改用 context 的?u=alice → alice；随后无参请求 → 匿名，不串

// package.json 里把检查变成一条命令，别指望 dev/build 帮你查
// "check": "svelte-check --tsconfig ./tsconfig.json"
// "check:watch": "svelte-check --watch"

<script lang="ts">
  // 下面这行类型是错的，但 vite dev / vite build 都不会吭声
  let n: number = $state(0);
  let s: string = n;

  // interface 与 as 断言在产物里会被整个删掉，只剩 let 声明
  interface P { a: string }
  const p = { a: 1 } as unknown as P;
</script>

<p>{s}{p.a}</p>

// $ npx svelte-check
// src/App.svelte:3:7
// Error: Type 'number' is not assignable to type 'string'. (ts)
// svelte-check found 1 error and 0 warnings in 1 file

<script lang="ts">
  import type { Snippet } from 'svelte';

  // props 类型抽成一个 type，可选性由 ? 决定而非默认值
  type Props = {
    title: string;
    level?: 1 | 2 | 3;
    body: Snippet;                            // 无参 snippet
    footer?: Snippet<[{ count: number }]>;    // 参数列表是元组，别漏方括号
    onclose?: () => void;                     // 事件就是普通函数 prop
  };

  // 默认值照写，组件内 level 被收窄成 1|2|3 而非可能 undefined
  let { title, level = 2, body, footer, onclose }: Props = $props();
</script>

<section>
  <h2>{title}（{level}）</h2>
  {@render body()}
  {#if footer}{@render footer({ count: 3 })}{/if}
  <button onclick={onclose}>关闭</button>
</section>

// List.svelte —— generics 属性是 .svelte 独有的，普通 .ts 里没有
<script lang="ts" generics="T">
  import type { Snippet } from 'svelte';

  // 组件自己不碰 T 的任何字段，只负责摆位置
  let { items, row }: { items: T[]; row: Snippet<[T, number]> } = $props();
</script>

<ul>
  {#each items as item, i}
    <li>{@render row(item, i)}</li>
  {/each}
</ul>

// App.svelte —— 调用方一个类型都不用写
<script lang="ts">
  import List from './List.svelte';
  const users = [{ id: 1, nick: 'a' }];
</script>

<List items={users}>
  {#snippet row(u, i)}<b>{i}{u.nick}</b>{/snippet}
</List>
// 把 u.nick 改成 u.nope，svelte-check 报错：
// Property 'nope' does not exist on type '{ id: number; nick: string; }'.

<script lang="ts">
  import { shared } from './counter.svelte';   // .svelte.ts 导入时省掉 .ts

  // 能推断就别标：这里 keyword 已经是 string
  let keyword = $state('');

  // 初值撑不出完整类型才标。不给初值的 $state() 类型是 unknown
  let user = $state<{ id: number; nick: string } | null>(null);

  // bind:this 挂载前是 null，类型必须带 | null
  let input: HTMLInputElement | null = $state(null);

  // 用交集类型收窄 currentTarget，才能安全读 .value
  function onInput(e: Event & { currentTarget: HTMLInputElement }) {
    keyword = e.currentTarget.value;
  }

  function focus() { input?.focus(); }
</script>

<input bind:this={input} value={keyword} oninput={onInput} />
<button onclick={focus}>聚焦</button>
<p>{keyword}{user?.nick ?? '未登录'}{shared.double}</p>

// vite.config.js —— conditions 必须在顶层，放进 test 里不生效
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  resolve: { conditions: ['browser'] },
  test: { environment: 'jsdom', setupFiles: ['./setup.js'] }
});

// setup.js
import '@testing-library/jest-dom/vitest';

// counter.test.js —— 只碰用户看得见的东西
import { it, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import Counter from './Counter.svelte';

it('点击后计数增加', async () => {
  render(Counter, { start: 3 });          // 第二个参数就是 props
  expect(screen.getByTestId('out')).toHaveTextContent('3 / 6');

  // userEvent 内部会等一轮微任务，必须 await
  await userEvent.click(screen.getByRole('button', { name: '加一' }));
  expect(screen.getByTestId('out')).toHaveTextContent('4 / 8');
});

import { it } from 'vitest';
import { mount, unmount, flushSync, tick } from 'svelte';
import Counter from './Counter.svelte';

it('不 flush 会读到旧值', async () => {
  const target = document.createElement('div');
  document.body.appendChild(target);
  const app = mount(Counter, { target, props: { start: 0 } });
  flushSync();                       // 挂载本身也要 flush 一次

  const out = () => target.querySelector('[data-testid=out]').textContent;
  console.log('挂载后:', out());                // 0 / 0

  target.querySelector('button').click();
  console.log('未 flush:', out());               // 0 / 0 ← 事件跑了，DOM 没动

  flushSync();
  console.log('flushSync 后:', out());           // 1 / 2

  target.querySelector('button').click();
  await tick();                          // tick 是异步的，漏 await 等于没写
  console.log('await tick 后:', out());          // 2 / 4

  unmount(app);
});

<script>
  let a = $state(1);
  let b = $state(10);
  let sum = $derived(a + b);

  // 默认形态：打印值本身 + 一组可折叠的 stack trace（初次挂载没有堆栈）
  $inspect(a, sum);

  // .with 接管打印，回调第一个参数是 'init' / 'update'
  $inspect(sum).with((type, v) => console.log('[sum]', type, v));

  $effect(() => {
    // 必须是 effect 里的第一句，回答「我为什么又跑了」
    $inspect.trace('我的effect');
    console.log('sum =', sum);
  });
</script>

<button onclick={() => a++}>go</button>

// dev 构建输出（点击一次后）：
//   sum = 12
//   我的effect (2.84ms)
//     $derived sum 12
//       $state a 2
// 同一份代码用 dev:false 编译，则一行都不打印

// 1) state_invalid_placement —— $state 不是普通函数调用
let n = 0;
n = $state(1);          // ✗ 只能出现在声明的初始化位置

// 2) rune_outside_svelte —— 由文件名决定，不由代码决定
// store.js       里写 $state → 运行时抛错
// store.svelte.js 里写 $state → 正常

// 3) state_invalid_export —— 导出的是值的拷贝
let count = $state(0);
export { count };                // ✗ 因为下面重新赋值了它
export function bump() { count = count + 1; }

// 改成导出对象、只改属性，就合法了
export const box = $state({ v: 0 });
export function bumpBox() { box.v++; }

// 4) effect_update_depth_exceeded —— 报错里只有一个 URL
let list = $state([]);
$effect(() => {
  list.push(list.length);       // ✗ 读了 list 又改 list，自我触发
});

// 5) 静默失败：bind 到非 bindable 的 prop，5.56.7 不报错也不生效
// 子组件必须写：let { v = $bindable() } = $props();

// 裸 Vite + Svelte：入口自己写，路由这个概念根本不存在
import { mount } from "svelte";
import App from "./App.svelte";
mount(App, { target: document.getElementById("app") });
// 想要 /about？自己听 popstate、自己匹配路径、自己拦 <a> 的点击

// SvelteKit：上面这些换成目录约定，构建期生成路由表
// src/routes/+page.svelte        → /
// src/routes/about/+page.svelte  → /about
// 入口、路由表、SSR、代码分割、链接预取，全部由构建期产出

// svelte.config.js —— 唯一要你拍板的是「最后部署到哪」
import adapter from "@sveltejs/adapter-node";
export default { kit: { adapter: adapter() } };
// 换成 adapter-static 就是纯静态站，换 adapter-cloudflare 就是 Workers
// 业务代码一行不用改——这是 adapter 存在的全部意义

// src/routes/ 的目录结构就是 URL 结构
//   +layout.svelte           → 包住下面所有页面
//   +page.svelte             → /
//   about/+page.svelte       → /about
//   blog/+page.svelte        → /blog
//   blog/PostCard.svelte     → 不进路由，就近放着即可
//   api/hello/+server.js     → /api/hello（返回 Response，不是页面）

<!-- src/routes/about/+page.svelte —— 就是一个普通组件 -->
<script>
  import PostCard from "../blog/PostCard.svelte";
</script>
<h1>关于我们</h1>

<!-- src/app.html —— 必需；删掉构建直接报 src\app.html does not exist -->
<!doctype html>
<html lang="zh">
  <head>%sveltekit.head%</head>
  <!-- body 里再包一层 div，挡住浏览器扩展塞进来的节点 -->
  <body><div>%sveltekit.body%</div></body>
</html>

<!-- src/routes/+layout.svelte —— 根布局，包住所有页面 -->
<script>
  // Svelte 5 里子内容是一个 snippet prop，不再是 <slot>
  let { children } = $props();
</script>

<nav>
  <a href="/">首页</a> <a href="/blog">博客</a>
</nav>
<main>{@render children()}</main>
<!-- 导航切页面时，这个 nav 的组件实例原地保留，不重建 -->

// 嵌套自动生效，无需任何声明：
//   +layout.svelte             ← 最外层
//   nested/+layout.svelte      ← 中间层
//   nested/deep/+page.svelte   ← 最里层

// 想跳出祖先布局，文件名加 @ 后缀：
//   checkout/+page@.svelte        → 只保留根布局（不是「全都不要」）
//   blog/x/+page@blog.svelte      → 挂到 blog 那一层的布局上
//   reset/inner/+layout@.svelte   → 整个 inner 子树跳出 reset 布局

// src/params/integer.js —— 匹配器，match 返回 false 就当这条路由不存在
export function match(param) {
  return /^\d+$/.test(param);
}

// 目录形态与结果：
//   blog/[slug]/+page.svelte          /blog/hello   → params.slug = "hello"
//   files/[...rest]/+page.svelte      /files/a/b/c  → params.rest = "a/b/c"
//   opt/[[lang]]/+page.svelte         /opt 和 /opt/zh 都命中
//   (marketing)/pricing/+page.svelte  /pricing      → 组名不进 URL
//   nums/[id=integer]/+page.svelte    /nums/42 命中；/nums/abc 直接 404

<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  import { page } from "$app/state";
  // params 也会作为 load 的入参传进来，取数据时用那个更合适
</script>
<h1>文章：{page.params.slug}</h1>

<!-- opt/[[lang]]：可选段没命中时是 undefined，记得给默认值 -->
<p>语言：{page.params.lang ?? "zh"}</p>

<script>
  import { goto } from "$app/navigation";
  import { page, navigating } from "$app/state";
  // $app/state 是符文驱动的对象，直接读属性，没有 $ 前缀
</script>

<!-- 普通 a 标签就是客户端导航；JS 没加载完它也还是能点的原生链接 -->
<nav data-sveltekit-preload-data="hover">
  <a href="/about" class:active={page.url.pathname === "/about"}>关于</a>
  <!-- 需要整页刷新时才显式退回原生行为 -->
  <a href="/legacy" data-sveltekit-reload>老系统</a>
</nav>

{#if navigating.to}<p>正在前往 {navigating.to.url.pathname}</p>{/if}

<button onclick={async () => {
  await goto("/dashboard", { replaceState: true });
}}>去面板</button>

// 站外链接 goto 会抛错，必须用 window.location
// window.location = "https://example.com";

// src/routes/blog/[slug]/+page.server.js
import { error, redirect } from "@sveltejs/kit";

export async function load({ params, locals }) {
  // SvelteKit 2 起不必写 throw，内部会抛；千万别 try/catch 包住
  if (!locals.user) redirect(303, "/login");

  const post = await db.getPost(params.slug);
  // 主动抛的错：消息原样送到用户面前
  if (!post) error(404, "这篇文章不存在或已下架");
  return { post };
  // 而这里若冒出未捕获异常，用户只会看到 Internal Error
}

<!-- src/routes/blog/+error.svelte：只接管 /blog 子树 -->
<script>
  import { page } from "$app/state";
</script>
<h1>{page.status}</h1>
<p>{page.error.message}</p>

// src/routes/about/+page.js —— 页面选项，写在 +layout.js 上则整树生效
export const prerender = true;   // 构建期生成静态 html
export const csr = false;       // 产物里一个 script 标签都没有

// src/routes/posts/+page.server.js —— 只进服务端产物
import { DATABASE_URL } from "$env/static/private";

export async function load({ locals, cookies }) {
  // 密钥、DB、cookie 只有这里能碰
  const rows = await db.query("select id, title from posts");
  return { rows };   // 走 devalue 序列化：Date/Map/Set 可以，函数不行
}

// src/routes/posts/+page.js —— 两边都会跑
export async function load({ data, fetch }) {
  const extra = await (await fetch("/api/stats")).json();
  // 不写 ...data 的话，服务端返回的 rows 会整个丢失
  return { ...data, extra };
}

// src/routes/posts/+page.svelte
// let { data } = $props();  → data.rows 和 data.extra 都在

// 执行位置：
//   首屏 SSR    两个 load 都在服务端终端打日志
//   客户端导航  +page.js 在浏览器里重跑
//               +page.server.js 改为请求 /posts/__data.json

<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  // Svelte 5 写法；export let data 是 Svelte 4 的，符文模式下无效
  /** @type {import("./$types").PageProps} */
  let { data } = $props();

  // data 每次导航整体替换，别直接改它
  // 要本地编辑就派生一份自己的状态出来
  let draft = $state("");
  const wordCount = $derived(data.post.body.length);
</script>

<h1>{data.post.title}</h1>
<p>共 {wordCount} 字</p>
<textarea bind:value={draft}></textarea>

// src/routes/blog/[slug]/+page.js —— load 侧也有生成好的类型
/** @type {import("./$types").PageLoad} */
export async function load({ params }) {
  // params.slug 有提示，因为类型是按这个目录名生成的
  return { post: await getPost(params.slug) };
}