dx: #223 vuejs core hmr playground (explain on book) (#227)

* chapter: #223 📜 debug vuejs core * tweak: #223 🔧 ui * tweak: #223 🔧 format
chibivue-land · Jan 6, 2024 · 55e6a6b · 55e6a6b
1 parent ebfde0e
commit 55e6a6b
Show file tree

Hide file tree

Showing 4 changed files with 224 additions and 12 deletions.
diff --git a/book/online-book/.vitepress/config/en.ts b/book/online-book/.vitepress/config/en.ts
@@ -210,7 +210,7 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       },
       {
         text: '🚧 Basic SFC Compiler',
-        collapsed: false,
+        collapsed: true,
         items: [
           {
             text: 'Supporting script setup',
@@ -232,7 +232,7 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       },
       {
         text: '🚧 Web Application Essentials',
-        collapsed: false,
+        collapsed: true,
         items: [
           {
             text: '🚧 Plugin',
@@ -306,12 +306,22 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         collapsed: false,
         items: [
           {
-            text: "chibivue, isn't it small...?",
-            link: '/en/bonus/hyper-ultimate-super-extreme-minimal-vue/',
+            text: 'Writing Vue.js in 15 minutes.',
+            collapsed: true,
+            items: [
+              {
+                text: "chibivue, isn't it small...?",
+                link: '/en/bonus/hyper-ultimate-super-extreme-minimal-vue/',
+              },
+              {
+                text: 'Implement',
+                link: '/en/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl.md',
+              },
+            ],
           },
           {
-            text: 'Writing Vue.js in 15 minutes.',
-            link: '/en/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl.md',
+            text: 'debug original Vue.js source',
+            link: '/en/bonus/debug-vuejs-core',
           },
         ],
       },

diff --git a/book/online-book/.vitepress/config/ja.ts b/book/online-book/.vitepress/config/ja.ts
@@ -207,7 +207,7 @@ export const jaConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       },
       {
         text: '🚧 Basic SFC Compiler',
-        collapsed: false,
+        collapsed: true,
         items: [
           {
             text: '🚧 script setup に対応する',
@@ -229,7 +229,7 @@ export const jaConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       },
       {
         text: '🚧 Web Application Essentials',
-        collapsed: false,
+        collapsed: true,
         items: [
           {
             text: '🚧 Plugin',
@@ -302,12 +302,22 @@ export const jaConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         collapsed: false,
         items: [
           {
-            text: 'chibivue、デカくないですか...?',
-            link: '/bonus/hyper-ultimate-super-extreme-minimal-vue/',
+            text: '15 分で Vue を作る',
+            collapsed: true,
+            items: [
+              {
+                text: 'chibivue、デカくないですか...?',
+                link: '/bonus/hyper-ultimate-super-extreme-minimal-vue/',
+              },
+              {
+                text: '実装',
+                link: '/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl',
+              },
+            ],
           },
           {
-            text: '15 分で Vue を作る',
-            link: '/bonus/hyper-ultimate-super-extreme-minimal-vue/15-min-impl',
+            text: '本家のソースコードをデバッグする',
+            link: '/bonus/debug-vuejs-core',
           },
         ],
       },

diff --git a/book/online-book/src/bonus/debug-vuejs-core.md b/book/online-book/src/bonus/debug-vuejs-core.md
@@ -0,0 +1,96 @@
+# 本家のソースコードをデバッグする
+
+実際に本家の Vue.js のコードを動かして動作を確かめたい場合があるかと思います。  
+この本の方針としても是非とも本家のソースコード読みながら理解できるようになってほしいところもあり、ソースコードリーディングやテストプレイを強く推奨しています。
+
+そこで、本編では触れていない本家のソースコードのデバッグ方法をいくつか紹介します。
+
+(手軽な順番で紹介していきます。)
+
+
+## SFC Playground を活用する
+
+これは最も手軽な方法です。公式ドキュメントからもリンクされているほど、広く知られている方法です。
+
+https://play.vuejs.org
+
+このプレイグラウンドでは Vue のコンポーネントを記述しながら動作を確認することはもちろん、SFC のコンパイル結果を確認できます。  
+サクッとブラウザ上で確認できるので便利です。(もちろん共有もできます。)
+
+<video src="https://github.com/Ubugeeei/Ubugeeei/assets/71201308/8281e589-fdaf-4206-854e-25a66dfaac05" controls />
+
+## vuejs/core のテストを活用する
+
+続いては [vuejs/core](https://github.com/vuejs/core) のテストを実行してみる方法です。
+当然ですが、これはもちろん [vuejs/core](https://github.com/vuejs/core) のソースコードを clone してくる必要があります。
+
+```bash
+git clone https://github.com/vuejs/core.git vuejs-core
+# NOTE: `core` というリポジトリ名になっているので、わかりやすくしておくのがおすすめです
+```
+
+あとは、
+
+```bash
+cd vuejs-core
+ni
+nr test
+```
+
+でテストを実行する事ができるので、適宜気になるソースコードをいじってみてテストを実行してみましょう。
+
+`test` 以外にもいくつかテストコマンドがあるので、気になる方は `package.json` を見てみてください。
+
+テストコードを読んで把握するもよし、実際にコードをいじってテストを走らせるもよし、テストケースを追加してみるもよし、色々な使い方ができます。
+
+<img width="590" alt="スクリーンショット 2024-01-07 0 31 29" src="https://github.com/Ubugeeei/Ubugeeei/assets/71201308/3c862bd5-1d94-4d2a-a9fa-8755872098ed">
+
+## vuejs/core のソースコードを実際に動かしてみる
+
+続いては、一番手軽ではないのですがやはり vuejs/core のソースコードを実際にいじりながら動作させる方法です。
+
+こちらに関しては, SFC, standalone ともに vite で HMR できるプロジェクトを用意しているので、ぜひそちらを使ってみてください。
+このプロジェクトは [chibivue](https://github.com/Ubugeeei/chibivue) のリポジトリにあるので clone してください。
+
+```bash
+git clone https://github.com/Ubugeeei/chibivue.git
+```
+
+clone できたら、プロジェクトを作成するスクリプトを実行します。
+
+この際、ローカルにある vuejs/core のソースコードの**絶対パス**を求められるはずなので、入力してください。
+
+```bash
+cd chibi-vue
+ni
+nr setup:vue
+
+# 💁 input your local vuejs/core absolute path:
+#   e.g. /Users/ubugeeei/oss/vuejs-core
+#   > 
+```
+
+これで chibivue のリポジトリ内に ローカルの vuejs/core を指すような vue のプロジェクトが作成されます。  
+
+<video src="https://github.com/Ubugeeei/work-log/assets/71201308/5d57c022-c411-4452-9e7e-c27623ec28b4" controls/>
+
+あとは起動したい時に以下のコマンドで起動して、vuejs/core のソースコードをいじりながら動作を確認する事ができます。
+
+```bash
+nr dev:vue
+```
+
+playground 側の HMR はもちろん、
+
+<video src="https://github.com/Ubugeeei/work-log/assets/71201308/a2ad46d8-4b07-4ac5-a887-f71507c619a6" controls/>
+
+vuejs/core のコードをいじっても HMR が効きます。
+
+<video src="https://github.com/Ubugeeei/work-log/assets/71201308/72f38910-19b8-4171-9ed7-74d1ba223bc8" controls/>
+
+
+---
+
+また、standalone で確認したい際は index.html で standalone-vue.js の方を読み込むように変更するとこちらも HMR で確認できます。
+
+<video src="https://github.com/Ubugeeei/work-log/assets/71201308/c57ab5c2-0e62-4971-b1b4-75670d3efeec" controls/>
diff --git a/book/online-book/src/en/bonus/debug-vuejs-core.md b/book/online-book/src/en/bonus/debug-vuejs-core.md
@@ -0,0 +1,96 @@
+# Debugging the original source code
+
+There may be times when you want to run and test the actual source code of Vue.js.  
+As part of the approach in this book, we strongly recommend reading and understanding the original source code, as well as conducting source code reading and test plays.
+
+Therefore, we will introduce several methods for debugging the original source code that are not covered in the main text.
+
+(We will introduce them in an easy-to-understand order.)
+
+
+## Utilizing SFC Playground
+
+This is the easiest method. It is widely known and even linked from the official documentation.
+
+https://play.vuejs.org
+
+In this playground, you can not only write Vue components and check their behavior, but also check the compilation results of SFC.  
+It is convenient because you can quickly check it in the browser. (Of course, you can also share it.)
+
+<video src="https://github.com/Ubugeeei/Ubugeeei/assets/71201308/8281e589-fdaf-4206-854e-25a66dfaac05" controls />
+
+## Utilizing vuejs/core tests
+
+Next, let's try running the tests of [vuejs/core](https://github.com/vuejs/core).
+Naturally, you need to clone the source code of [vuejs/core](https://github.com/vuejs/core).
+
+```bash
+git clone https://github.com/vuejs/core.git vuejs-core
+# NOTE: It is recommended to make it easy to understand since the repository name is `core`
+```
+
+Then,
+
+```bash
+cd vuejs-core
+ni
+nr test
+```
+
+You can run the tests, so feel free to modify the source code you are interested in and run the tests.
+
+There are several test commands other than `test`, so if you are interested, please check `package.json`.
+
+You can read and understand the test code, modify the code and run the tests, or add test cases. There are various ways to use it.
+
+<img width="590" alt="Screenshot 2024-01-07 0 31 29" src="https://github.com/Ubugeeei/Ubugeeei/assets/71201308/3c862bd5-1d94-4d2a-a9fa-8755872098ed">
+
+## Running the vuejs/core source code
+
+Next, this is the most convenient but still the method of actually modifying and running the vuejs/core source code.
+
+Regarding this, we have prepared projects that can be HMR with vite for both SFC and standalone, so please try using them.
+This project is in the repository of [chibivue](https://github.com/Ubugeeei/chibivue), so please clone it.
+
+```bash
+git clone https://github.com/Ubugeeei/chibivue.git
+```
+
+Once cloned, run the script to create the project.
+
+At this time, you should be asked for the **absolute path** of the local vuejs/core source code, so please enter it.
+
+```bash
+cd chibi-vue
+ni
+nr setup:vue
+
+# 💁 input your local vuejs/core absolute path:
+#   e.g. /Users/ubugeeei/oss/vuejs-core
+#   > 
+```
+
+This will create a Vue project in the chibivue repository that points to the local vuejs/core source code.
+
+<video src="https://github.com/Ubugeeei/work-log/assets/71201308/5d57c022-c411-4452-9e7e-c27623ec28b4" controls/>
+
+Then, when you want to start, you can start it with the following command and check the operation while modifying the vuejs/core source code.
+
+```bash
+nr dev:vue
+```
+
+Of course, HMR on the playground side,
+
+<video src="https://github.com/Ubugeeei/work-log/assets/71201308/a2ad46d8-4b07-4ac5-a887-f71507c619a6" controls/>
+
+Even if you modify the vuejs/core code, HMR will work.
+
+<video src="https://github.com/Ubugeeei/work-log/assets/71201308/72f38910-19b8-4171-9ed7-74d1ba223bc8" controls/>
+
+
+---
+
+Also, if you want to check it in standalone, you can also use HMR by changing the index.html to load standalone-vue.js.
+
+<video src="https://github.com/Ubugeeei/work-log/assets/71201308/c57ab5c2-0e62-4971-b1b4-75670d3efeec" controls/>