From b7406189bb8abc38c5ff80b6d4e2a8ea7b13c588 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 16 Aug 2023 11:05:27 -0700
Subject: [PATCH] Add Typescript to build (#207)

---
 .prettierignore      |  2 +-
 package.json         |  2 ++
 src/{ui.js => ui.ts} |  0
 tsconfig.json        | 19 +++++++++++++++++++
 webpack.config.js    | 13 ++++++++++++-
 yarn.lock            | 31 +++++++++++++++++++++++++++----
 6 files changed, 61 insertions(+), 6 deletions(-)
 rename src/{ui.js => ui.ts} (100%)
 create mode 100644 tsconfig.json

diff --git a/.prettierignore b/.prettierignore
index 99c2a2a..2ef98c7 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,4 @@
 # Ignore everything except src
 *
 !/src/
-!src/*
\ No newline at end of file
+!src/*
diff --git a/package.json b/package.json
index ddb82de..98d2569 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,8 @@
     "sass-loader": "^13.3.2",
     "style-loader": "^3.2.1",
     "svg-inline-loader": "^0.8.2",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
diff --git a/src/ui.js b/src/ui.ts
similarity index 100%
rename from src/ui.js
rename to src/ui.ts
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a47fd41
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "module": "esnext",
+    "target": "es6",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "sourceMap": true,
+    "inlineSources": true
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 15f3bdc..394d8cd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -99,7 +99,10 @@ const browserConfig = (/*env, argv*/) => {
   return {
     target: "web",
     mode: "production",
-    resolve: {fallback: { "crypto": false }},
+    resolve: {
+      fallback: { "crypto": false },
+      extensions: [".ts", ".js"],
+    },
     entry,
     optimization,
 
@@ -150,6 +153,14 @@ const browserConfig = (/*env, argv*/) => {
 
     module: {
       rules: [
+        {
+          test: /\.tsx?$/,
+          loader: "ts-loader",
+          include: path.resolve(__dirname, "src"),
+          options: {
+            onlyCompileBundledFiles: true,
+          },
+        },
         {
           test:  /\.svg$/,
           use: ["svg-inline-loader"],
diff --git a/yarn.lock b/yarn.lock
index 50fe3d7..21e6aaa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2196,6 +2196,14 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+enhanced-resolve@^5.0.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
+  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 enhanced-resolve@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
@@ -3949,7 +3957,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@4.0.5:
+micromatch@4.0.5, micromatch@^4.0.0:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -4696,9 +4704,9 @@ prepend-http@^2.0.0:
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
 prettier@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.2.tgz#78fcecd6d870551aa5547437cdae39d4701dca5b"
-  integrity sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.1.tgz#65271fc9320ce4913c57747a70ce635b30beaa40"
+  integrity sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==
 
 pretty-bytes@^5.6.0:
   version "5.6.0"
@@ -5795,6 +5803,16 @@ truncate-utf8-bytes@^1.0.0:
   dependencies:
     utf8-byte-length "^1.0.1"
 
+ts-loader@^9.4.4:
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.4.4.tgz#6ceaf4d58dcc6979f84125335904920884b7cee4"
+  integrity sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+
 tslib@^1.10.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -5881,6 +5899,11 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+typescript@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
+  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
+
 union@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/union/-/union-0.5.0.tgz#b2c11be84f60538537b846edb9ba266ba0090075"