Advanced 30-minute summary

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: the point is not to clone Vue perfectly, but to rebuild the ideas by hand.
2. Vue's core pieces: runtime, renderer, reactivity, compiler, and SFC tooling are separate concerns.
3. Project setup: package boundaries make the learning path visible.
4. createApp: the app API wraps mounting and gives users one entry point.
5. Package architecture: runtime-core stays platform-neutral; runtime-dom owns browser operations.
6. h and VNode: render output is a data structure, not DOM.
7. Events and attributes: DOM patching needs platform-specific prop handling.
8. Minimum reactivity: Proxy read means track; Proxy write means trigger.
9. Minimum Virtual DOM: patch compares old and new VNodes to update the DOM.
10. Minimum components: a component VNode mounts by creating an instance and running render.
11. Props: parent data crosses into child components through normalized inputs.
12. Emits: child events are just conventionally named parent handlers.
13. Template compiler overview: templates become render functions.
14. Compiler implementation: parse, transform, and codegen form the core compiler pipeline.
15. Template binding: compiler output must read values from render context.
16. SFC parse: .vue files are split into script, template, and style blocks.
17. SFC template/script/style: a Vite plugin wires SFC transforms into development.
18. Keyed patching: stable keys let the renderer move and reuse children.
19. Shape flags: bit flags make repeated type checks cheap.
20. Scheduler: reactive changes enqueue work so repeated updates can be batched.
21. ref, computed, watch: reactivity grows from objects into value containers and user-facing effects.
22. Reactive proxy handlers: collections, refs, readonly values, and shallow values need handler nuance.
23. Effect cleanup and scope: effects need lifecycle management, not just reruns.
24. Component lifecycle: component instances give the runtime places to call user hooks.
25. Provide/Inject and setup context: component trees need structured dependency and context channels.
26. Slots: children can be passed as lazy render functions.
27. Template transforms: directives are compiler plugins that turn syntax into VNode data.
28. Structural directives: v-if, v-for, fragments, comments, and slots shape the generated tree.
29. SFC compiler macros: script setup, defineProps, defineEmits, scoped CSS, and type-based macros are compile-time conveniences.
30. Application essentials and optimizations: 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:

packages/reactivity -> packages/runtime-core -> packages/runtime-dom -> packages/compiler-core -> packages/compiler-sfc

Then read Debugging the original source code and compare chibivue's simplified choices with vuejs/core.