chibivue is minimal vuejs/core implementations.
(Reactivity System, Virtual DOM and Patch Rendering, Component System, Template Compiler, SFC Compiler)
"chibi" means "small" in Japanese.
This project began in February 2023 with the goal of simplifying the understanding of Vue's core implementation.
Currently, I am still in the process of implementation, but after implementation, I intend to post explanatory articles as well.
(For now, I plan to post Japanese first.)
This project uses pnpm as a package manager.
And use ni .
# if you don't have ni yet
npm i -g @antfu/ni
total: 370,000 chars ↑ (japanese)
English: https://ubugeeei.github.io/chibivue/en
Japaneses: https://ubugeeei.github.io/chibivue
$ git clone https://github.com/Ubugeeei/chibivue
$ cd chibivue
$ ni
$ nr book:dev$ git clone https://github.com/Ubugeeei/chibivue
$ cd chibivue
$ ni
# generate playground files to ~/example/playground (git ignored)
$ nr setup:dev
# listen localhost
$ nr devThis online book is currently a work in progress.
Please refer to the information below for the progress status.
| feature | impl | book |
|---|---|---|
| ref | ✅ | ✅ |
| computed | ✅ | ✅ |
| reactive | ✅ | ✅ |
| readonly | ✅ | ✅ |
| watch | ✅ | ✅ |
| watchEffect | ✅ | ✅ |
| isRef | ✅ | ✅ |
| unref | ✅ | ✅ |
| toRef | ✅ | ✅ |
| toRefs | ✅ | ✅ |
| isProxy | ✅ | ✅ |
| isReactive | ✅ | ✅ |
| isReadonly | ✅ | ✅ |
| shallowRef | ✅ | ✅ |
| triggerRef | ✅ | ✅ |
| shallowReactive | ✅ | ✅ |
| customRef | ✅ | ✅ |
| toRaw | ✅ | ✅ |
| effectScope | ✅ | ✅ |
| getCurrentScope | ✅ | ✅ |
| onScopeDispose | ✅ | ✅ |
| template refs | ✅ | ✅ |
| feature | impl | book |
|---|---|---|
| h function | ✅ | ✅ |
| patch rendering | ✅ | ✅ |
| key attribute | ✅ | ✅ |
| scheduler | ✅ | ✅ |
| nextTick | ✅ | ✅ |
| ssr |
| feature | impl | book |
|---|---|---|
| Options API (typed) | ✅ | ✅ |
| Composition API | ✅ | ✅ |
| lifecycle hooks | ✅ | ✅ |
| props / emit | ✅ | ✅ |
| expose | ✅ | ✅ |
| provide / inject | ✅ | ✅ |
| slot (default) | ✅ | ✅ |
| slot (named/scoped) | ✅ | ✅ |
| async component and suspense |
| feature | impl | book |
|---|---|---|
| v-bind | ✅ | ✅ |
| v-on | ✅ | ✅ |
| event modifier | ✅ | ✅ |
| v-if | ✅ | ✅ |
| v-for | ✅ | ✅ |
| v-model | ✅ | |
| v-show | ||
| mustache | ✅ | ✅ |
| slot (default) | ||
| slot (named) | ||
| slot (scoped) | ||
| dynamic component | ||
| comment out | ✅ | ✅ |
| fragment | ✅ | ✅ |
| bind expressions | ✅ | ✅ |
| resolve components | ✅ | ✅ |
| feature | impl | book |
|---|---|---|
| basics (template, script, style) | ✅ | ✅ |
| scoped css | ||
| script setup | ✅ | |
| compiler macro | ✅ |
| feature | impl | book |
|---|---|---|
| store | ✅ | |
| router | ✅ | |
| keep-alive | ||
| suspense |
- Complete Basic Template Compiler
- Slots
- Complete Basic SFC Compiler
- script setup
- compiler macro
- Overall restructuring
- Fixing typos and errors
- Reviewing English version of the text
- Making explanations more understandable
- Implementation and explanation of SSR / SSG
- Implementation and explanation of compile-time optimization
Tree flattening and static hoisting, among others - Incorporate refactoring of the parser that will likely be included in Vue.js 3.4
vuejs/core#9674 - Incorporate refactoring of the reactivity package that will likely be included in Vue.js 3.4
vuejs/core#5912 - 🌟 Implementation and explanation of **Vapor Mode**
Since the official version has not been released, we will implement it based on our predictions.
https://github.com/vuejs/core-vapor/tree/main
This is bonus track on writing Vue.js in 15 minutes because chibivue has gotten so big.
This chapter implements createApp / virtual dom / patch / reactivity / template compiler / sfc compiler in just 110 lines of source code.
The title is "Hyper Ultimate Super Extreme Minimal Vue - writing Vue.js on 15 minutes"
Please see contributing.md.