tweak: 🔧 terms cases

README.md

@@ -13,7 +13,7 @@ https://ubugeeei.github.io/chibivue
 ---
 
 chibivue is minimal [Vue.js v3](https://github.com/vuejs/core) core implementations.  
-(reactivity system, vnode and patch rendering, component, compiler)
+(Reactivity System, Virtual DOM and Patch Rendering, Component System, Template Compiler, SFC Compiler)
 
 "`chibi`" means "`small`" in Japanese.
 
@@ -90,7 +90,7 @@ This online book is currently a work in progress.
 
 Please refer to the information below for the progress status.
 
-### Reactive System
+### Reactivity System
 
 | feature         | impl | book |
 | --------------- | ---- | ---- |

book/impls/bonus/hyper-ultimate-super-extreme-minimal-vue/packages/index.ts

@@ -1,4 +1,4 @@
-// create app api
+// createApp API
 type CreateAppOption = {
   setup: () => Record<string, unknown>;
   render: (ctx: Record<string, unknown>) => VNode;
@@ -40,7 +40,7 @@ export const h = (
   children: string
 ): VNode => ({ tag, onClick, children });
 
-// reactive system
+// Reactivity System
 export const reactive = <T extends Record<string, unknown>>(obj: T): T =>
   new Proxy(obj, {
     get: (target, key, receiver) => Reflect.get(target, key, receiver),
@@ -51,7 +51,7 @@ export const reactive = <T extends Record<string, unknown>>(obj: T): T =>
     },
   });
 
-// template compiler
+// Template Compiler
 type AST = {
   tag: string;
   onClick: string;
@@ -84,7 +84,7 @@ const codegen = (node: AST) =>
     .join("")}\`)`;
 const compile = (template: string): string => codegen(parse(template));
 
-// sfc compiler (vite transformer)
+// SFC Compiler (Vite plugin)
 export const VitePluginChibivue = () => ({
   name: "vite-plugin-chibivue",
   transform: (code: string, id: string) =>

book/milestones.md

@@ -8,7 +8,7 @@
 - props
   NOTE: innerHTML / textContent については再考
 
-# ★ Basic Reactive System 部門
+# ★ Basic Reactivity System 部門
 
 - ref api ✅
   -> 6/3

book/online-book/.vitepress/config/ja.ts

@@ -28,15 +28,15 @@ export const jaConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         collapsed: false,
         items: [
           {
-            text: "初めてのレンダリングとcreateApp API",
+            text: "初めてのレンダリングと createApp API",
             link: "/10-minimum-example/010-create-app-api",
           },
           {
             text: "HTML要素をレンダリングできるようにしよう",
             link: "/10-minimum-example/020-simple-h-function",
           },
           {
-            text: "小さい reactivity system ",
+            text: "小さい Reactivity System ",
             link: "/10-minimum-example/030-minimum-reactive",
           },
           {

book/online-book/src/00-introduction/010-about.md

@@ -128,13 +128,13 @@
   suspense などの機能や最適化の実装は行いませんが、基本的なレンダリングであれば問題なくできる程度の完成度です。
   スケジューラの実装などもここで行います。
 
-- **Basic Reactive System 部門**  
+- **Basic Reactivity System 部門**  
   Minimal Example 部門では reactive という API を実装しましたが、この部門ではその他の API を実装します。
   ref/watch/computed というベーシックな API をはじめ、effectScope や shallow 系などの応用的な API まで幅広く実装します。
 
 - **Basic Component System 部門**  
   ここでは Component System 関する基本実装を行います。実は、Basic Virtual DOM 部門で Component System のベースは実装してしまうので、
-  それ以外の部分の Component System を実装します。例えば props/emit や provide/inject、 reactivity system の拡張、ライフサイクルフックなどです。
+  それ以外の部分の Component System を実装します。例えば props/emit や provide/inject、 Reactivity System の拡張、ライフサイクルフックなどです。
 
 - **Basic Template Compiler 部門**  
   Basic Virtual DOM で実装した Virtual DOM システムに対応する機能のコンパイラに加え、v-on, v-bind, v-for 等のディレクティブなどの実装を行います。   

book/online-book/src/00-introduction/030-vue-core-components.md

@@ -25,7 +25,7 @@ https://github.com/vuejs/core/blob/main/.github/contributing.md
 Vue.js で開発した Web アプリケーションのうち、ブラウザ上やサーバー上(SSR の場合)で動作している部分全般のことです。  
 具体的には以下の要素を含んでます。(それぞれの詳しい説明は各チャプターでやるのでざっくり)
 
-### reactivity system
+### Reactivity System
 
 「リアクティビティ」は日本語で言うと「反応性」です。
 コンポーネントでもつステートを追跡し、変更があった場合に画面の更新をしたりします。

book/online-book/src/10-minimum-example/030-minimum-reactive.md

@@ -1,8 +1,8 @@
-# 小さい reactivity system
+# 小さい Reactivity System
 
 ## 今回目指す開発者インタフェース
 
-ここからは Vue.js の醍醐味である reactivity system というものについてやっていきます。  
+ここからは Vue.js の醍醐味である Reactivity System というものについてやっていきます。  
 これ以前の実装は、見た目が Vue.js に似ていれど、それは見た目だけで機能的には全く Vue.js ではありません。  
 たんに最初の開発者インタフェースを実装し、いろんな HTML を表示できるようにしてみました。
 
@@ -48,7 +48,7 @@ reactive 関数でステートを定義し、それを書き換える increment
 - ボタンをクリックすると、ステートが更新される
 - ステートの更新を追跡して render 関数を再実行し、画面を再描画する
 
-## reactivity system とはどのようなもの?
+## Reactivity System とはどのようなもの?
 
 さてここで、そもそもリアクティブとは何だったかのおさらいです。
 公式ドキュメントを参照してみます。
@@ -57,7 +57,7 @@ reactive 関数でステートを定義し、それを書き換える increment
 
 [引用元](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html)
 
-> Vue の最も特徴的な機能の 1 つは、控えめな reactivity system です。コンポーネントの状態はリアクティブな JavaScript オブジェクトで構成されています。状態を変更すると、ビュー (View) が更新されます。
+> Vue の最も特徴的な機能の 1 つは、控えめな Reactivity System です。コンポーネントの状態はリアクティブな JavaScript オブジェクトで構成されています。状態を変更すると、ビュー (View) が更新されます。
 
 [引用元](https://ja.vuejs.org/guide/extras/reactivity-in-depth.html)
 
@@ -136,7 +136,7 @@ app.mount("#app");
 
 Proxy と呼ばれるオブジェクトが肝になっています。
 
-まず、 reactivity system の実装方法についてではなく、それぞれについての説明をしてみます。
+まず、 Reactivity System の実装方法についてではなく、それぞれについての説明をしてみます。
 
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy
 
@@ -194,12 +194,12 @@ const o = new Proxy(
 
 Proxy の理解はこの程度で OK です。
 
-## Proxy で reactivity system を実現してみる
+## Proxy で Reactivity System を実現してみる
 
 改めて目的を明確にしておくと、今回の目的は「ステートが変更された時に `updateComponent` を実行したい」です。  
 Proxy を用いた実装の流れについて説明してみます。
 
-まず、Vue.js の reactivity system には `target`, `Proxy`, `ReactiveEffect`, `Dep`, `track`, `trigger`, `targetMap`, `activeEffect`というものが登場します。
+まず、Vue.js の Reactivity System には `target`, `Proxy`, `ReactiveEffect`, `Dep`, `track`, `trigger`, `targetMap`, `activeEffect`というものが登場します。
 
 まず、targetMap の構造についてです。  
 targetMap はある target の key と dep のマッピングです。  

book/online-book/src/10-minimum-example/040-minimum-virtual-dom.md

@@ -2,7 +2,7 @@
 
 ## Virtual DOM、何に使われる?
 
-前のチャプターで reactivity system を導入したことで画面を動的に更新できるようになりました。
+前のチャプターで Reactivity System を導入したことで画面を動的に更新できるようになりました。
 改めて現在の render 関数の内容を見てみましょう。
 
 ```ts

book/online-book/src/10-minimum-example/050-minimum-component.md

@@ -2,8 +2,8 @@
 
 ## 既存実装の整理ベースで考える
 
-これまで、createApp API や Reactivity System 、 Virtual DOM を小さく実装してきました。  
-今現時点での実装では reactivity system によって UI を動的に変更することもできますし、 Virtual DOM によって効率的なレンダリングを行うことができているのですが、開発者インタフェースとしては全ての内容を createApp API に書く感じになってしまっています。  
+これまで、createApp API や Reactivity System、 Virtual DOM を小さく実装してきました。  
+今現時点での実装では Reactivity System によって UI を動的に変更することもできますし、 Virtual DOM によって効率的なレンダリングを行うことができているのですが、開発者インタフェースとしては全ての内容を createApp API に書く感じになってしまっています。  
 実際にはもっとファイルを分割したり、再利用のために汎用的なコンポーネントを実装したいです。  
 まずは既存実装の散らかってしまっている部分を見直してみます。renderer.ts の render 関数をみてください。
 

book/online-book/src/10-minimum-example/100-break.md

@@ -54,9 +54,9 @@ h("div", { id: "my-app" }, [
 
 ここで初めて Virtual DOM  のようなものが登場しました。
 
-##  reactivity system とは何か、どうやって画面を動的に更新していくかということが分かった
+##  Reactivity System とは何か、どうやって画面を動的に更新していくかということが分かった
 
-Vue の醍醐味である、 reactivity system がどのような実装で成り立っているのか、そもそも reactivity system とはなんのことなのか、ということについて理解しました
+Vue の醍醐味である、Reactivity System がどのような実装で成り立っているのか、そもそも Reactivity System とはなんのことなのか、ということについて理解しました
 
 ```ts
 const targetMap = new WeakMap<any, KeyToDepMap>();
@@ -312,7 +312,7 @@ export default {
   - スケジューラの実装
   - 対応できていないパッチの実装 (主に属性周り)
   - Fragment の対応
-- Basic Reactive System 部門
+- Basic Reactivity System 部門
   - ref api
   - computed api
   - watch api

book/online-book/src/30-basic-reactivity-system/010-ref-api.md

@@ -1,4 +1,4 @@
-# ref api (Basic Reactive System 部門スタート)
+# ref api (Basic Reactivity System 部門スタート)
 
 ## ref api のおさらい (と実装)
 

book/online-book/src/30-basic-reactivity-system/030-reactive-proxy-handlers.md

@@ -2,7 +2,7 @@
 
 ## reactive にしたくないオブジェクト
 
-さて、ここでは現状の reactivity system のある問題について解決していきます。  
+さて、ここでは現状の Reactivity System のある問題について解決していきます。  
 まずは以下のコードを動かしてみてください。
 
 ```ts

book/online-book/src/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl.md

@@ -124,11 +124,11 @@ export const render = (n1: VNode | null, n2: VNode, container: Element) => {
 
 以上になります。
 
-## reactivity system (2 min)
+## Reactivity System (2 min)
 
 これからは実際に setup オプションで でセットアップされたステートの変更を追跡して、
 
-render 関数を発火させる処理を実装していきます。ステートの更新を追跡して特定の作用を実行することから「reactivity system」というふうな名前がついています。
+render 関数を発火させる処理を実装していきます。ステートの更新を追跡して特定の作用を実行することから「Reactivity System」というふうな名前がついています。
 
 今回は `reactive` という関数でユーザーにステートを定義さることを考えてみます。
 
@@ -399,7 +399,7 @@ export const h = (
   children: string
 ): VNode => ({ tag, onClick, children });
 
-// reactive system
+// Reactivity System
 export const reactive = <T extends Record<string, unknown>>(obj: T): T =>
   new Proxy(obj, {
     get: (target, key, receiver) => Reflect.get(target, key, receiver),

book/online-book/src/bonus/hyper-ultimate-super-extreme-minimal-vue/index.md

@@ -48,7 +48,7 @@
 - create app api
 - Virtual DOM
 - patch rendering
-- reactivity system
+- Reactivity System
 - template compiler
 - sfc compiler (vite-plugin)
 

book/online-book/src/en/00-introduction/010-about.md

@@ -128,11 +128,11 @@ Since this book has turned out quite voluminous, I've set achievement milestones
 - **Basic Virtual DOM Section**  
   In this section, we will implement a fairly practical patch rendering functionality for the Virtual DOM. While we won't be implementing features like "suspense" or other optimizations, it will be proficient enough to handle basic rendering tasks. We will also implement the scheduler here.
 
-- **Basic Reactive System Section**  
+- **Basic Reactivity System Section**  
   Although we implemented the reactive API in the Minimal Example section, in this section we will implement other APIs. Starting from basic APIs like ref, watch, and computed, we'll also delve into more advanced APIs like effectScope and the shallow series.
 
 - **Basic Component System Section**  
-  Here, we will undertake the basic implementations related to the Component System. In fact, since we'll have already set the base for the Component System in the Basic Virtual DOM section, here we'll focus on other aspects of the Component System. This includes features like props/emit, provide/inject, extensions to the reactive system, and lifecycle hooks.
+  Here, we will undertake the basic implementations related to the Component System. In fact, since we'll have already set the base for the Component System in the Basic Virtual DOM section, here we'll focus on other aspects of the Component System. This includes features like props/emit, provide/inject, extensions to the Reactivity System, and lifecycle hooks.
 
 - **Basic Template Compiler Section**  
   In addition to a compiler for the Virtual DOM system implemented in the Basic Virtual DOM section, we will implement directives like v-on, v-bind, and v-for. Generally, this will involve the component's template option, and we won't cover SFC (Single File Components) here.

book/online-book/src/en/00-introduction/030-vue-core-components.md

@@ -27,7 +27,7 @@ The runtime encompasses everything that affects the actual operation - from rend
 
 Vue.js is a component-oriented framework. Depending on the user's requirements, you can maintainably create and encapsulate components for reuse. It also offers functionalities like state sharing between components (props/emits or provide/inject) and lifecycle hooks.
 
-### Reactive System
+### Reactivity System
 
 It tracks the state held by components and updates the screen when changes occur. This monitoring and responding mechanism is called reactivity.
 

book/online-book/src/en/10-minimum-example/030-minimum-reactive.md

@@ -1,8 +1,8 @@
-# Minimal reactivity system
+# Minimal Reactivity System
 
 ## Developer interface we aim for this time
 
-From here, we will talk about the essence of Vue.js, which is the reactivity system.  
+From here, we will talk about the essence of Vue.js, which is the Reactivity System.  
 The previous implementation, although it looks similar to Vue.js, is not actually Vue.js in terms of functionality.  
 I simply implemented the initial developer interface and made it possible to display various HTML.
 
@@ -48,7 +48,7 @@ To summarize what we want to do:
 - When the button is clicked, the state is updated
 - Track the state updates, re-execute the render function, and redraw the screen
 
-## What is the reactivity system?
+## What is the Reactivity System?
 
 Now, let's review what reactivity is.  
 Let's refer to the official documentation.
@@ -57,7 +57,7 @@ Let's refer to the official documentation.
 
 [Source](https://v3.vuejs.org/guide/reactivity-fundamentals.html)
 
-> One of Vue's most distinctive features is its modest reactivity system. The state of a component is composed of reactive JavaScript objects. When the state changes, the view is updated.
+> One of Vue's most distinctive features is its modest Reactivity System. The state of a component is composed of reactive JavaScript objects. When the state changes, the view is updated.
 
 [Source](https://v3.vuejs.org/guide/reactivity-in-depth.html)
 
@@ -136,7 +136,7 @@ This is the main theme for this time. I want to execute `updateComponent` when t
 
 The key to this is an object called Proxy.
 
-First, let me explain about each of them, not about the implementation method of the reactivity system.
+First, let me explain about each of them, not about the implementation method of the Reactivity System.
 
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy
 
@@ -194,11 +194,11 @@ const o = new Proxy(
 
 This is the extent of understanding Proxy.
 
-## Trying to achieve reactivity system with Proxy
+## Trying to achieve Reactivity System with Proxy
 
 To clarify the purpose again, the purpose this time is to "execute `updateComponent` when the state is changed". Let me explain the implementation process using Proxy.
 
-First, Vue.js's reactivity system involves `target`, `Proxy`, `ReactiveEffect`, `Dep`, `track`, `trigger`, `targetMap`, and `activeEffect`.
+First, Vue.js's Reactivity System involves `target`, `Proxy`, `ReactiveEffect`, `Dep`, `track`, `trigger`, `targetMap`, and `activeEffect`.
 
 First, let's talk about the structure of targetMap.
 targetMap is a mapping of keys and deps for a certain target.

book/online-book/src/en/10-minimum-example/040-minimum-virtual-dom.md

@@ -2,7 +2,7 @@
 
 ## What is Virtual DOM used for?
 
-By introducing the reactivity system in the previous chapter, we were able to dynamically update the screen. Let's take a look at the content of the current render function again.
+By introducing the Reactivity System in the previous chapter, we were able to dynamically update the screen. Let's take a look at the content of the current render function again.
 
 ```ts
 const render: RootRenderFunction = (vnode, container) => {

book/online-book/src/en/10-minimum-example/050-minimum-component.md

@@ -3,7 +3,7 @@
 ## Thinking based on organizing existing implementations
 
 So far, we have implemented createApp API, Reactivity System, and Virtual DOM system in a small scale.
-With the current implementation, we can dynamically change the UI using the reactivity system and perform efficient rendering using the Virtual DOM system. However, as a developer interface, everything is written in createAppAPI.
+With the current implementation, we can dynamically change the UI using the Reactivity System and perform efficient rendering using the Virtual DOM system. However, as a developer interface, everything is written in createAppAPI.
 In reality, I want to divide the files more and implement generic components for reusability.
 First, let's review the parts that are currently messy in the existing implementation. Please take a look at the render function in renderer.ts.
 

book/online-book/src/en/10-minimum-example/100-break.md

@@ -50,9 +50,9 @@ h("div", { id: "my-app" }, [
 
 This is where something like Virtual DOM first appears.
 
-## We now know what the reactivity system is and how to dynamically update the screen
+## We now know what the Reactivity System is and how to dynamically update the screen
 
-We understood the implementation of Vue's unique feature, the reactivity system, how it works, and what it actually is.
+We understood the implementation of Vue's unique feature, the Reactivity System, how it works, and what it actually is.
 
 ```ts
 const targetMap = new WeakMap<any, KeyToDepMap>();
@@ -305,7 +305,7 @@ From here, it will be divided into 5 parts + 1 appendix.
   - Implementation of the scheduler
   - Implementation of unsupported patches (mainly related to attributes)
   - Support for Fragment
-- Basic Reactive System Part
+- Basic Reactivity System Part
   - ref API
   - computed API
   - watch API

book/online-book/src/en/30-basic-reactivity-system/010-ref-api.md

@@ -1,4 +1,4 @@
-# ref api (Basic Reactive System Start)
+# ref api (Basic Reactivity System Start)
 
 ## Review of ref api (and implementation)
 

book/online-book/src/en/30-basic-reactivity-system/030-reactive-proxy-handlers.md

@@ -2,7 +2,7 @@
 
 ## Objects that should not be reactive
 
-Now, let's solve a problem with the current reactivity system.  
+Now, let's solve a problem with the current Reactivity System.  
 First, try running the following code.
 
 ```ts