feat: hot path 🔥🦆 (#637)

Author: ubugeeei

book/online-book/.vitepress/config/en.ts

@@ -394,6 +394,32 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         text: "Appendix",
         collapsed: false,
         items: [
+          {
+            text: "Hot Paths",
+            collapsed: false,
+            items: [
+              {
+                text: "Overview",
+                link: "/bonus/hot-paths/",
+              },
+              {
+                text: "Beginner 30-minute hands-on",
+                link: "/bonus/hot-paths/beginner-30-min-hands-on",
+              },
+              {
+                text: "Beginner 60-minute hands-on",
+                link: "/bonus/hot-paths/beginner-60-min-hands-on",
+              },
+              {
+                text: "Intermediate 60-minute hands-on",
+                link: "/bonus/hot-paths/intermediate-60-min-hands-on",
+              },
+              {
+                text: "Advanced 30-minute summary",
+                link: "/bonus/hot-paths/advanced-30-min-summary",
+              },
+            ],
+          },
           {
             text: "Writing Vue.js in 15 minutes.",
             collapsed: false,

book/online-book/.vitepress/config/ja.ts

@@ -391,6 +391,32 @@ export const jaConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         text: "付録",
         collapsed: false,
         items: [
+          {
+            text: "Hot Paths",
+            collapsed: false,
+            items: [
+              {
+                text: "概要",
+                link: "/ja/bonus/hot-paths/",
+              },
+              {
+                text: "初心者向け 30 分ハンズオン",
+                link: "/ja/bonus/hot-paths/beginner-30-min-hands-on",
+              },
+              {
+                text: "初心者向け 1 時間ハンズオン",
+                link: "/ja/bonus/hot-paths/beginner-60-min-hands-on",
+              },
+              {
+                text: "中級者向け 1 時間ハンズオン",
+                link: "/ja/bonus/hot-paths/intermediate-60-min-hands-on",
+              },
+              {
+                text: "上級者向け 30 分サマリ",
+                link: "/ja/bonus/hot-paths/advanced-30-min-summary",
+              },
+            ],
+          },
           {
             text: "15 分で Vue を作る",
             collapsed: false,

book/online-book/src/bonus/hot-paths/advanced-30-min-summary.md

@@ -0,0 +1,50 @@
+# Advanced 30-minute summary
+
+::: warning AI-generated appendix
+This appendix was drafted with GPT-5.5 from the original chibivue book content. Treat this route as a guided learning path; the original chapters and implementation code remain the source of truth.
+:::
+
+This is a compressed map for readers who want the whole book in one pass before reading source code. Spend about one minute per checkpoint. If a checkpoint is obvious, move on. If it is fuzzy, open the linked chapter.
+
+## 30 checkpoints
+
+1. [The book starts from one line of rendering](/00-introduction/010-about): the point is not to clone Vue perfectly, but to rebuild the ideas by hand.
+2. [Vue's core pieces](/00-introduction/030-vue-core-components): runtime, renderer, reactivity, compiler, and SFC tooling are separate concerns.
+3. [Project setup](/00-introduction/040-setup-project): package boundaries make the learning path visible.
+4. [createApp](/10-minimum-example/010-create-app-api): the app API wraps mounting and gives users one entry point.
+5. [Package architecture](/10-minimum-example/015-package-architecture): runtime-core stays platform-neutral; runtime-dom owns browser operations.
+6. [h and VNode](/10-minimum-example/020-simple-h-function): render output is a data structure, not DOM.
+7. [Events and attributes](/10-minimum-example/025-event-handler-and-attrs): DOM patching needs platform-specific prop handling.
+8. [Minimum reactivity](/10-minimum-example/035-try-implementing-a-minimum-reactivity-system): Proxy read means track; Proxy write means trigger.
+9. [Minimum Virtual DOM](/10-minimum-example/040-minimum-virtual-dom): patch compares old and new VNodes to update the DOM.
+10. [Minimum components](/10-minimum-example/050-minimum-component): a component VNode mounts by creating an instance and running render.
+11. [Props](/10-minimum-example/051-component-props): parent data crosses into child components through normalized inputs.
+12. [Emits](/10-minimum-example/052-component-emits): child events are just conventionally named parent handlers.
+13. [Template compiler overview](/10-minimum-example/060-template-compiler): templates become render functions.
+14. [Compiler implementation](/10-minimum-example/061-template-compiler-impl): parse, transform, and codegen form the core compiler pipeline.
+15. [Template binding](/10-minimum-example/080-template-binding): compiler output must read values from render context.
+16. [SFC parse](/10-minimum-example/091-parse-sfc): `.vue` files are split into script, template, and style blocks.
+17. [SFC template/script/style](/10-minimum-example/092-compile-sfc-template): a Vite plugin wires SFC transforms into development.
+18. [Keyed patching](/20-basic-virtual-dom/010-patch-keyed-children): stable keys let the renderer move and reuse children.
+19. [Shape flags](/20-basic-virtual-dom/020-bit-flags): bit flags make repeated type checks cheap.
+20. [Scheduler](/20-basic-virtual-dom/030-scheduler): reactive changes enqueue work so repeated updates can be batched.
+21. [ref, computed, watch](/30-basic-reactivity-system/010-ref-api): reactivity grows from objects into value containers and user-facing effects.
+22. [Reactive proxy handlers](/30-basic-reactivity-system/030-reactive-proxy-handlers): collections, refs, readonly values, and shallow values need handler nuance.
+23. [Effect cleanup and scope](/30-basic-reactivity-system/040-effect-scope): effects need lifecycle management, not just reruns.
+24. [Component lifecycle](/40-basic-component-system/010-lifecycle-hooks): component instances give the runtime places to call user hooks.
+25. [Provide/Inject and setup context](/40-basic-component-system/020-provide-inject): component trees need structured dependency and context channels.
+26. [Slots](/40-basic-component-system/040-component-slot): children can be passed as lazy render functions.
+27. [Template transforms](/50-basic-template-compiler/010-transform): directives are compiler plugins that turn syntax into VNode data.
+28. [Structural directives](/50-basic-template-compiler/040-v-if-and-structural-directive): `v-if`, `v-for`, fragments, comments, and slots shape the generated tree.
+29. [SFC compiler macros](/60-basic-sfc-compiler/010-script-setup): `script setup`, `defineProps`, `defineEmits`, scoped CSS, and type-based macros are compile-time conveniences.
+30. [Application essentials and optimizations](/90-web-application-essentials/010-plugins/010-router): router, store, SSR, built-ins, static hoisting, patch flags, tree flattening, and Vapor Mode show how the same core ideas scale.
+
+## After the summary
+
+Read one source path without stopping:
+
+```txt
+packages/reactivity -> packages/runtime-core -> packages/runtime-dom -> packages/compiler-core -> packages/compiler-sfc
+```
+
+Then read [Debugging the original source code](/bonus/debug-vuejs-core) and compare chibivue's simplified choices with `vuejs/core`.

book/online-book/src/bonus/hot-paths/beginner-30-min-hands-on.md

@@ -0,0 +1,116 @@
+# Beginner 30-minute hands-on
+
+::: warning AI-generated appendix
+This appendix was drafted with GPT-5.5 from the original chibivue book content. Treat this route as a guided learning path; the original chapters and implementation code remain the source of truth.
+:::
+
+This route is for getting one small, satisfying loop: create an app, render a button, update state, and see why a compiler is useful. It follows the spirit of [Writing Vue.js in 15 minutes](/bonus/hyper-ultimate-super-extreme-minimal-vue/) but gives you more breathing room.
+
+## Goal
+
+By the end, you should be able to explain this chain:
+
+```txt
+createApp -> render function -> VNode -> patch -> reactive state -> effect -> rerender
+```
+
+You do not need to understand every edge case. The goal is to see the moving parts touch each other.
+
+## 0-5 min: prepare the tiny mental model
+
+Read:
+
+- [chibivue, isn't it small...?](/bonus/hyper-ultimate-super-extreme-minimal-vue/)
+- [Project Setup](/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl#project-setup-0-5-min)
+
+Do:
+
+- Create or open a chibivue playground project.
+- Find the file that exports the tiny Vue-like API, usually `packages/index.ts`.
+- Keep one rule in mind: every feature in this route can be intentionally naive.
+
+Checkpoint:
+
+- You know where the public API, renderer, reactivity, and compiler code will live, even if they are all in one file.
+
+## 5-10 min: createApp and h
+
+Read:
+
+- [createApp](/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl#createapp-1-min)
+- [h Function and Virtual DOM](/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl#h-function-and-virtual-dom-0-5-min)
+- Optional deeper chapter: [First Rendering and the createApp API](/10-minimum-example/010-create-app-api)
+
+Do:
+
+- Write or inspect a `createApp` function that accepts `setup` and `render`.
+- Write or inspect an `h` function that returns a plain object.
+- Make sure the VNode includes only what the demo needs: tag, event, and children.
+
+Checkpoint:
+
+- You can say why Vue renders an object first instead of directly writing DOM code everywhere.
+
+## 10-17 min: patch the VNode into the DOM
+
+Read:
+
+- [patch rendering](/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl#patch-rendering-2-min)
+- Optional deeper chapter: [A Minimal Virtual DOM](/10-minimum-example/040-minimum-virtual-dom)
+
+Do:
+
+- Turn the VNode into an actual DOM element.
+- Attach a click handler.
+- Insert the element into the container selected by `mount`.
+
+Checkpoint:
+
+- A render function can produce a VNode, and `patch` can make that VNode visible in the browser.
+
+## 17-23 min: make state reactive
+
+Read:
+
+- The reactivity section in [Implement](/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl)
+- Optional deeper chapter: [Try Implementing a Small Reactivity System](/10-minimum-example/035-try-implementing-a-minimum-reactivity-system)
+
+Do:
+
+- Inspect the dependency store: which effect depends on which property?
+- Update state from the click handler.
+- Confirm that the render effect runs again when state changes.
+
+Checkpoint:
+
+- You can describe `track` as "remember who read this" and `trigger` as "rerun who cared about this."
+
+## 23-28 min: replace manual render with template
+
+Read:
+
+- The compiler and SFC sections in [Implement](/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl)
+- Optional deeper chapters: [Understanding the Template Compiler](/10-minimum-example/060-template-compiler), [Parse SFC](/10-minimum-example/091-parse-sfc)
+
+Do:
+
+- Inspect how a tiny template becomes a render function.
+- Keep the compiler intentionally narrow: one button, one event, one interpolation is enough.
+
+Checkpoint:
+
+- You can explain that the compiler is not a separate magic system. It creates the render function that the runtime already knows how to run.
+
+## 28-30 min: close the loop
+
+Answer these aloud or in notes:
+
+- What object does `h` return?
+- Who calls `patch`?
+- What makes `render` run again?
+- Why does SFC support need a Vite plugin in this tiny implementation?
+
+Next path:
+
+- If this felt good, continue with [Beginner 60-minute hands-on](./beginner-60-min-hands-on).
+- If the code felt too dense, read [First Rendering and the createApp API](/10-minimum-example/010-create-app-api) slowly before continuing.

book/online-book/src/bonus/hot-paths/beginner-60-min-hands-on.md

@@ -0,0 +1,123 @@
+# Beginner 60-minute hands-on
+
+::: warning AI-generated appendix
+This appendix was drafted with GPT-5.5 from the original chibivue book content. Treat this route as a guided learning path; the original chapters and implementation code remain the source of truth.
+:::
+
+This route walks through the original Minimum Example without trying to absorb every explanation. You will touch the main shape of a Vue-like framework: application API, renderer, reactivity, components, template compiler, and SFC support.
+
+## Goal
+
+By the end, you should understand why chibivue is split into packages and how a `.vue` file eventually becomes DOM updates.
+
+## 0-8 min: project shape
+
+Read:
+
+- [Approach in This Book and Setting Up the Environment](/00-introduction/040-setup-project)
+- [Package Architecture](/10-minimum-example/015-package-architecture)
+
+Do:
+
+- Locate `packages/runtime-core`, `packages/runtime-dom`, `packages/reactivity`, `packages/compiler-core`, `packages/compiler-dom`, and `packages/compiler-sfc` in an implementation snapshot under `book/impls`.
+- Write down one sentence for each package: what problem does it own?
+
+Checkpoint:
+
+- You can tell runtime code apart from compiler code.
+
+## 8-18 min: first render
+
+Read:
+
+- [First Rendering and the createApp API](/10-minimum-example/010-create-app-api)
+- [Let's Enable Rendering HTML Elements](/10-minimum-example/020-simple-h-function)
+- [Let's work on supporting event handlers and attributes.](/10-minimum-example/025-event-handler-and-attrs)
+
+Do:
+
+- Follow how `createApp(...).mount(...)` reaches the renderer.
+- Find where an element is created.
+- Find where props or event handlers are applied.
+
+Checkpoint:
+
+- You can trace one button from render function to real DOM.
+
+## 18-28 min: first reactivity
+
+Read:
+
+- [Prerequisite Knowledge for the Reactivity System](/10-minimum-example/030-prerequisite-knowledge-for-the-reactivity-system)
+- [Try Implementing a Small Reactivity System](/10-minimum-example/035-try-implementing-a-minimum-reactivity-system)
+
+Do:
+
+- Identify where an active effect is stored.
+- Identify where property reads are tracked.
+- Identify where property writes trigger effects.
+
+Checkpoint:
+
+- You understand why reactive state needs both a Proxy and an effect function.
+
+## 28-40 min: VNode and components
+
+Read:
+
+- [A Minimal Virtual DOM](/10-minimum-example/040-minimum-virtual-dom)
+- [Aspiring for Component-Oriented Development](/10-minimum-example/050-minimum-component)
+- [Component Props](/10-minimum-example/051-component-props)
+- [Component Emit](/10-minimum-example/052-component-emits)
+
+Do:
+
+- Compare an element VNode with a component VNode.
+- Find where component `setup` is called.
+- Find how props enter a component and how emit leaves it.
+
+Checkpoint:
+
+- You can explain why components are also represented as VNodes.
+
+## 40-52 min: template compiler
+
+Read:
+
+- [Understanding the Template Compiler](/10-minimum-example/060-template-compiler)
+- [Implementing the Template Compiler](/10-minimum-example/061-template-compiler-impl)
+- [Data Binding](/10-minimum-example/080-template-binding)
+
+Do:
+
+- Trace the pipeline: template string, parse result, generated render function.
+- Find where interpolation like `{{ count }}` becomes code.
+
+Checkpoint:
+
+- You can say what the compiler produces and why the runtime can execute it.
+
+## 52-60 min: SFC support
+
+Read:
+
+- [Developing with SFC (Peripheral Knowledge)](/10-minimum-example/090-prerequisite-knowledge-for-the-sfc)
+- [Parse SFC](/10-minimum-example/091-parse-sfc)
+- [SFC template block](/10-minimum-example/092-compile-sfc-template)
+- [SFC script block](/10-minimum-example/093-compile-sfc-script)
+- [SFC style block](/10-minimum-example/094-compile-sfc-style)
+
+Do:
+
+- Identify the three blocks of an SFC.
+- Find which block becomes render code.
+- Find which block becomes component options.
+- Find which block becomes CSS.
+
+Checkpoint:
+
+- You can describe `.vue` as a convenient authoring format that is split and transformed before the runtime sees it.
+
+## Stop here
+
+You now have the skeleton. The best next move is not to rush into every advanced feature. Pick one part that felt most surprising and read its full original chapter again.

book/online-book/src/bonus/hot-paths/index.md

@@ -0,0 +1,37 @@
+# Hot Paths
+
+::: warning AI-generated appendix
+This appendix was drafted with GPT-5.5 from the original chibivue book content. Treat these routes as guided learning paths; the original chapters and implementation code remain the source of truth.
+:::
+
+chibivue is intentionally incremental, but that also makes it large. This appendix gives you shorter routes through the book when you want to learn the core ideas before reading everything in order.
+
+Each route tells you what to read, what to implement or inspect, and when to stop. If a route feels too fast, jump to the linked original chapter and come back when the missing piece clicks.
+
+## Routes
+
+| Route | Time | Audience | You will understand |
+| --- | --- | --- | --- |
+| [Beginner 30-minute hands-on](./beginner-30-min-hands-on) | 30 min | First-time readers who want the smallest possible win | How `createApp`, VNode rendering, reactivity, and a tiny compiler connect |
+| [Beginner 60-minute hands-on](./beginner-60-min-hands-on) | 60 min | Beginners who can spend one focused session | The full Minimum Example flow, from first render to SFC |
+| [Intermediate 60-minute hands-on](./intermediate-60-min-hands-on) | 60 min | Readers who already know Vue or TypeScript | The runtime and compiler paths that make component updates work |
+| [Advanced 30-minute summary](./advanced-30-min-summary) | 30 min | Readers who want a compressed map before source reading | The whole book as 30 checkpoints |
+
+## How to use these paths
+
+1. Keep the original chapter open beside the route.
+2. Time-box each section. Finishing the whole route matters less than preserving the big picture.
+3. Use the implementation snapshots under `book/impls` when you want to compare your mental model with working code.
+4. After a route, choose one original chapter and read it slowly. The hot path is the map, not the territory.
+
+## Source sections covered
+
+- [Getting Started](/00-introduction/010-about)
+- [Minimum Example](/10-minimum-example/010-create-app-api)
+- [Basic Virtual DOM](/20-basic-virtual-dom/010-patch-keyed-children)
+- [Basic Reactivity System](/30-basic-reactivity-system/005-reactivity-optimization)
+- [Basic Component System](/40-basic-component-system/010-lifecycle-hooks)
+- [Basic Template Compiler](/50-basic-template-compiler/010-transform)
+- [Basic SFC Compiler](/60-basic-sfc-compiler/010-script-setup)
+- [Web Application Essentials](/90-web-application-essentials/010-plugins/010-router)
+- [Writing Vue.js in 15 minutes](/bonus/hyper-ultimate-super-extreme-minimal-vue/)