/chibivue

chibivue is minimal Vue.js v3 core implementations (Reactivity System, Virtual DOM, Component, Compiler (Template, SFC)). An online book for building your own Vue.js.

Primary LanguageTypeScript

https://ubugeeei.github.io/chibivue


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.)

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

Pages Deploy

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: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 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"

Online Book | Actual Source

Contributing

Please see contributing.md.