Components & Composition

ประกอบเกินกว่าแค่ props

props ส่ง ค่า ลงไป แต่ UI จริงต้องส่ง markup ลงไปด้วย (เช่น card ที่ห่อ content อะไรก็ได้) ต้องแชร์ข้อมูลข้าม subtree โดยไม่ต้อง drill props ผ่านทุกชั้น และต้อง run setup ตอน component mount โมดูลนี้ครอบคลุมเครื่องมือ composition เหล่านั้น:

Snippets ({#snippet} / {@render}) — ก้อน markup ที่ reuse ได้ และเป็นตัวแทน <slot> เดิมใน Svelte 5
การส่ง UI — parent ส่ง markup ให้ child ผ่าน children snippet และ named snippet props
Context (setContext / getContext) — แชร์ข้อมูลลง component tree โดยไม่ต้อง prop drilling
Lifecycle (onMount / onDestroy / tick) — run code ในจังหวะที่กำหนด

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่จะได้เรียน
Snippets & render	`{#snippet}` และ `{@render}` แทน `<slot>`
Passing UI & children	`children` snippet และ named snippet props
The context API	`setContext` / `getContext` โดยไม่ต้อง prop drilling
Lifecycle	`onMount`, `onDestroy`, `tick` และ `$effect`

flowchart TB
  comp["composing components"] --> snip["snippets: markup ที่ reuse ได้"]
  comp --> children["ส่ง UI ลงไปเป็น children"]
  comp --> ctx["context: ข้อมูลลง subtree"]
  comp --> life["lifecycle: code ตอน mount / destroy"]

เครื่องมือ composition