diff --git a/book/online-book/.vitepress/config/en.ts b/book/online-book/.vitepress/config/en.ts index d5bbbad5..7a7ef1e2 100644 --- a/book/online-book/.vitepress/config/en.ts +++ b/book/online-book/.vitepress/config/en.ts @@ -210,7 +210,7 @@ export const enConfig: LocaleSpecificConfig = { }, { text: '🚧 Basic SFC Compiler', - collapsed: false, + collapsed: true, items: [ { text: 'Supporting script setup', @@ -232,7 +232,7 @@ export const enConfig: LocaleSpecificConfig = { }, { text: '🚧 Web Application Essentials', - collapsed: false, + collapsed: true, items: [ { text: '🚧 Plugin', @@ -306,12 +306,22 @@ export const enConfig: LocaleSpecificConfig = { 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 index 1aaf05e6..762dca6a 100644 --- a/book/online-book/.vitepress/config/ja.ts +++ b/book/online-book/.vitepress/config/ja.ts @@ -207,7 +207,7 @@ export const jaConfig: LocaleSpecificConfig = { }, { text: '🚧 Basic SFC Compiler', - collapsed: false, + collapsed: true, items: [ { text: '🚧 script setup に対応する', @@ -229,7 +229,7 @@ export const jaConfig: LocaleSpecificConfig = { }, { text: '🚧 Web Application Essentials', - collapsed: false, + collapsed: true, items: [ { text: '🚧 Plugin', @@ -302,12 +302,22 @@ export const jaConfig: LocaleSpecificConfig = { 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 new file mode 100644 index 00000000..b92c8226 --- /dev/null +++ b/book/online-book/src/bonus/debug-vuejs-core.md @@ -0,0 +1,96 @@ +# 本家のソースコードをデバッグする + +実際に本家の Vue.js のコードを動かして動作を確かめたい場合があるかと思います。 +この本の方針としても是非とも本家のソースコード読みながら理解できるようになってほしいところもあり、ソースコードリーディングやテストプレイを強く推奨しています。 + +そこで、本編では触れていない本家のソースコードのデバッグ方法をいくつか紹介します。 + +(手軽な順番で紹介していきます。) + + +## SFC Playground を活用する + +これは最も手軽な方法です。公式ドキュメントからもリンクされているほど、広く知られている方法です。 + +https://play.vuejs.org + +このプレイグラウンドでは Vue のコンポーネントを記述しながら動作を確認することはもちろん、SFC のコンパイル結果を確認できます。 +サクッとブラウザ上で確認できるので便利です。(もちろん共有もできます。) + +