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 dev
This 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.