ponyoxa/chibivue
chibivue is minimal Vue.js v3 core implementations (reactivity, virtual DOM, component, compiler (template, SFC)). An online book for building your own Vue.js.
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.)
๐ Package Manager
This project uses pnpm as a package manager.
And use ni .
# if you don't have ni yet
npm i -g @antfu/ni๐ Online Book
total: 370,000 chars โ (japanese)
book url (GitHub Pages)
English: https://ubugeeei.github.io/chibivue/en
Japaneses: https://ubugeeei.github.io/chibivue
open book on localhost
$ git clone https://github.com/Ubugeeei/chibivue
$ cd chibivue
$ ni
$ nr book:devview on github
๐ฅ playground
$ git clone https://github.com/Ubugeeei/chibivue
$ cd chibivue
$ ni
# generate playground files to ~/example/playground (git ignored)
$ nr setup:dev
# listen localhost
$ nr devโ ๏ธ status
This online book is currently a work in progress.
Please refer to the information below for the progress status.
Reactivity System
| 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 | โ | โ |
Virtual Dom & Renderer
| feature | impl | book |
|---|---|---|
| h function | โ | โ |
| patch rendering | โ | โ |
| key attribute | โ | โ |
| scheduler | โ | โ |
| nextTick | โ | โ |
| ssr |
Component System
| feature | impl | book |
|---|---|---|
| Options API (typed) | โ | โ |
| Composition API | โ | โ |
| lifecycle hooks | โ | โ |
| props / emit | โ | โ |
| expose | โ | โ |
| provide / inject | โ | โ |
| slot (default) | โ | โ |
| slot (named/scoped) | โ | โ |
| async component and suspense |
Template Compiler
| 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 | โ | โ |
SFC Compiler
| feature | impl | book |
|---|---|---|
| basics (template, script, style) | โ | โ |
| scoped css | ||
| script setup | โ | |
| compiler macro | โ |
Extensions and Other Builtin
| feature | impl | book |
|---|---|---|
| store | โ | |
| router | โ | |
| keep-alive | ||
| suspense |
๐๏ธ Big Plans
- 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
๐ Bonus Track
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"
Contributing
Please see contributing.md.
Sponsors
If you'd like to support my work, I would greatly appreciate it!