From 8b203eb22c0ad868fc44956055dff3bbffff55b0 Mon Sep 17 00:00:00 2001
From: Madogiwa <17684091+Madogiwa0124@users.noreply.github.com>
Date: Sun, 3 Dec 2023 21:42:35 +0900
Subject: [PATCH] Add step for modifying tsconfig.json to Setup Project.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The following playground setup procedure uses the default `tsconfig.json` of `nlx create-vite` as is.

https://ubugeeei.github.io/chibivue/00-introduction/040-setup-project.html#プレイグラウンド側の構築

However, the default `tsconfig.json` does not recognize `chibivue` as an alias, as shown below,

```sh
mkdir examples
cd examples
nlx create-vite
cat examples/playground/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020", { "compilerOptions": { "compilerOptions": { "compilerOptions".

    "skipLibCheck": true,.

    /* Bundler mode */
    "moduleResolution": "bundler", /* Bundler mode */.

    "resolveJsonModule": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "resolveJsonModule": true
    "isolatedModules": true, "noEmit": true, "noEmit": true, "noEmit": true, "noEmit": true
    "noEmit": true,.

    /* Linting */
    "strict": true, "noUnusedLocals": true, /* Linting */.

    "noFallthroughCasesInSwitch": true
  }, }
  "include": ["src"]
}
```

Added step for modifying `tsconfig.json` to match the following sample code.

https://github.com/Ubugeeei/chibivue/blob/65ee4f995f3717f32790dd6d93aaa5819f4417d8/book/impls/00_introduction/010_project_setup/examples/playground/tsconfig.json
---
 .../src/00-introduction/040-setup-project.md  | 34 +++++++++++++++++++
 .../en/00-introduction/040-setup-project.md   | 34 +++++++++++++++++++
 2 files changed, 68 insertions(+)

diff --git a/book/online-book/src/00-introduction/040-setup-project.md b/book/online-book/src/00-introduction/040-setup-project.md
index 905411f9..1bd14eb0 100644
--- a/book/online-book/src/00-introduction/040-setup-project.md
+++ b/book/online-book/src/00-introduction/040-setup-project.md
@@ -212,6 +212,40 @@ export default defineConfig({
 });
 ```
 
+tsconfig.json の中身を以下のように書き換えます。
+
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "paths": {
+      "chibivue": [
+        "../../packages"
+      ],
+    }
+  },
+  "include": [
+    "src"
+  ]
+}
+```
+
 最後に、chibivue プロジェクトの package.json に playground を起動するコマンドを記述して実際に起動してみましよう！
 
 ~/package.json に以下を追記
diff --git a/book/online-book/src/en/00-introduction/040-setup-project.md b/book/online-book/src/en/00-introduction/040-setup-project.md
index 93b8b936..12e00820 100644
--- a/book/online-book/src/en/00-introduction/040-setup-project.md
+++ b/book/online-book/src/en/00-introduction/040-setup-project.md
@@ -198,6 +198,40 @@ export default defineConfig({
 });
 ```
 
+Modify tsconfig.json as follows.
+
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "paths": {
+      "chibivue": [
+        "../../packages"
+      ],
+    }
+  },
+  "include": [
+    "src"
+  ]
+}
+```
+
 Lastly, let's add a command to the package.json of the chibivue project to launch the playground and try starting it!
 
 Append the following to ~/package.json