Writing Vue.js: Step by Step, from just one line of "Hello, World".

https://ubugeeei.github.io/chibivue

---

chibivue is minimal Vue.js v3 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.)

example

👜 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: 360,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:dev

view on github

English | Japanese

🎥 playground

$ git clone https://github.com/Ubugeeei/chibivue
$ cd chibivue
$ ni

# generate playground files to ~/example/playground (git ignored)
$ nr dev:setup

# listen localhost
$ nr dev

original vue.js 3.3 playground

$ nr vue:setup
$ nr vue

⚠️ 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"

Online Book | Actual Source

Contributing

Please see contributing.md.