Migrate to turborepo (#359)

* chore: migrate to turborepo

- popup project now be placed under apps/popup
- declare shared tsconfig package
- a few packages are going to be added soon

* chore: make shared modules as a standalone package

- fix vite configurations to avoid import error

* chore: update package script for turborepo

* chore: move  image resources to root directory

* doc: update README

* chore: update turbo.json

- add output for build caching
- add lint task

.gitignore

@@ -5,6 +5,7 @@ npm-*.log
 node_modules/
 .DS_Store
 
+.turbo
 build/
 dist/
 dist.zip

README.md

@@ -1,6 +1,6 @@
-![logo](/icons/icon_128.png)
-
-# 주소검색 확장 프로그램
+<div align="center">
+  <img alt="kor-address-extension logo" src="/images/icon_128.png" />
+<h1>주소검색 확장 프로그램</h1>
 
 ![CircleCI](https://img.shields.io/circleci/build/github/Jaewoook/kor-address-extension?style=flat-square)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/Jaewoook/kor-address-extension/pulls)
@@ -9,6 +9,8 @@
 ![Mozilla Add-on](https://img.shields.io/amo/v/kor-address-extension?style=flat-square)
 ![whale store](https://img.shields.io/github/package-json/v/Jaewoook/kor-address-extension?label=whale%20store&style=flat-square)
 
+</div>
+
 ## 프로젝트 소개
 
 해외 사이트에 영문 주소 입력을 할 때마다 매번 영문 주소 변환 사이트에서 주소 검색 후 복사하는게 불편했습니다. 그 뿐만 아니라 매번 헷갈리는 우편번호, 도로명주소 등을 검색하는 것까지 편하게 할 수 있으면 좋을 것 같다는 생각에 이 프로젝트를 시작하게 됐습니다.  
@@ -22,13 +24,13 @@
 
 ## 지원 브라우저
 
-자신의 브라우저에 확장 프로그램 스토어에서 바로 다운로드하세요!
+사용하는 브라우저의 스토어에서 바로 다운로드하세요!
 
 | 브라우저 | 상태 | 다운로드 |
 |--------|:---:|-------|
-| Google Chrome | :heavy_check_mark: | [크롬 웹 스토어에서 다운로드](https://chrome.google.com/webstore/detail/%EC%A3%BC%EC%86%8C%EA%B2%80%EC%83%89/kiamcbcponnlbnanbbfnfdjhioebpiah) |
-| NAVER Whale | :heavy_check_mark: | [웨일 스토어에서 다운로드](https://store.whale.naver.com/detail/pidjpaocfolbbaminggjijheckcdfcdj) |
-| Mozilla Firefox | :warning: | ~~[Firefox Add-ons에서 다운로드](https://addons.mozilla.org/ko/firefox/addon/kor-address-extension/)~~ |
+| Google Chrome | :heavy_check_mark: | [크롬 웹 스토어로 이동](https://chrome.google.com/webstore/detail/%EC%A3%BC%EC%86%8C%EA%B2%80%EC%83%89/kiamcbcponnlbnanbbfnfdjhioebpiah) |
+| NAVER Whale | :heavy_check_mark: | [웨일 스토어로 이동](https://store.whale.naver.com/detail/pidjpaocfolbbaminggjijheckcdfcdj) |
+| Mozilla Firefox | :warning: | ~~[Firefox Add-ons으로 이동](https://addons.mozilla.org/ko/firefox/addon/kor-address-extension/)~~ |
 
 ### 기타 브라우저
 

apps/popup/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "popup",
+  "version": "1.2.9",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "check-types": "tsc -b --noEmit",
+    "build": "vite build",
+    "lint": "eslint src --ext ts,tsx"
+  },
+  "dependencies": {
+    "@sentry/react": "^6.13.3",
+    "antd": "^5.18.2",
+    "axios": "^1.7.2",
+    "copy-to-clipboard": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.1.11"
+  },
+  "devDependencies": {
+    "@repo/shared": "*",
+    "@repo/tsconfig": "*",
+    "@types/chrome": "^0.0.268",
+    "@types/clipboard": "^2.0.1",
+    "@types/firefox-webext-browser": "^120.0.4",
+    "@types/node": "^18.6.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "prettier": "3.3.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.1"
+  }
+}

src/components/popup/Content.tsx → apps/popup/src/components/popup/Content.tsx

@@ -1,3 +1,4 @@
+import type { AddressData } from "@repo/shared/models/address";
 import { Layout, Spin, Typography } from "antd";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { AiOutlineCheckCircle, AiOutlineLoading, AiOutlineReload } from "react-icons/ai";
@@ -9,7 +10,6 @@ import { useAddressSearch } from "@/hooks/useAddressSearch";
 import { useSettings } from "@/hooks/useSettings";
 import { addressListState } from "@/states/address";
 import { prevSearchKeyState, searchLoadingState } from "@/states/search";
-import type { AddressData } from "@/shared/models/address";
 
 const CHECK_COLOR = "#3CB043";
 

src/components/ui/AddressList/index.tsx → apps/popup/src/components/ui/AddressList/index.tsx

@@ -1,6 +1,8 @@
 /**
  * External modules
  */
+import type { AddressData } from "@repo/shared/models/address";
+import type { DisplayOptions } from "@repo/shared/models/settings";
 import { Collapse, Typography } from "antd";
 import type { CollapseProps } from "antd";
 import { useMemo } from "react";
@@ -10,10 +12,8 @@ import styled from "styled-components";
  * Internal modules
  */
 // import "./AddressList.css";
-import type { AddressData } from "@/shared/models/address";
 import { ClickToCopyText } from "../ClickToCopyText";
 import { FeedbackPopover } from "../FeedbackPopover";
-import type { DisplayOptions } from "@/shared/models/settings";
 
 interface Props extends DisplayOptions {
   data: AddressData[];

src/hooks/useAddressSearch.ts → apps/popup/src/hooks/useAddressSearch.ts

@@ -1,9 +1,9 @@
+import type { AddressSearchAPIResponse, SearchKey } from "@repo/shared/models/address";
 import axios from "axios";
 import type { AxiosResponse } from "axios";
 import { useCallback } from "react";
 import { useRecoilState, useSetRecoilState } from "recoil";
 
-import type { AddressSearchAPIResponse, SearchKey } from "@/shared/models/address";
 import { addressListState } from "@/states/address";
 import { prevSearchKeyState, searchKeywordState, searchLoadingState } from "@/states/search";
 

src/states/address.ts → apps/popup/src/states/address.ts

@@ -1,8 +1,7 @@
+import { getRecentAddressList, setRecentAddressList } from "@repo/shared/storage";
+import type { AddressData } from "@repo/shared/models/address";
 import { atom } from "recoil";
 
-import { getRecentAddressList, setRecentAddressList } from "@/shared/storage";
-import type { AddressData } from "@/shared/models/address";
-
 export const addressListState = atom<AddressData[]>({
   key: "address-list",
   default: [],

src/states/search.ts → apps/popup/src/states/search.ts

@@ -1,7 +1,7 @@
+import { DEFAULT_SETTINGS, getPrevSearchKey, setPrevSearchKey, validateSettingsData } from "@repo/shared/storage";
+import type { SearchKey } from "@repo/shared/models/address";
 import { atom } from "recoil";
 
-import { DEFAULT_SETTINGS, getPrevSearchKey, setPrevSearchKey, validateSettingsData } from "@/shared/storage";
-import type { SearchKey } from "@/shared/models/address";
 
 export const searchKeywordState = atom({
   key: "search-keyword",

src/states/settings.ts → apps/popup/src/states/settings.ts

@@ -1,12 +1,12 @@
-import { atom } from "recoil";
-
 import {
   DEFAULT_SETTINGS,
   getSearchResultOptions,
   setSearchResultOptions,
   validateSettingsData,
-} from "@/shared/storage";
-import type { DisplayOptions } from "@/shared/models/settings";
+} from "@repo/shared/storage";
+import type { DisplayOptions } from "@repo/shared/models/settings";
+import { atom } from "recoil";
+
 
 export const addressDisplayOptionsState = atom<DisplayOptions>({
   key: "display-options",

apps/popup/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/popup/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@repo/tsconfig/vite.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+  },
+  "include": ["src/"]
+}

apps/popup/tsconfig.node.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@repo/tsconfig/node.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts → apps/popup/vite.config.ts

@@ -8,10 +8,7 @@ export default defineConfig({
   server: {
     port: 11200,
   },
-  build: {
-    outDir: "build",
-  },
   resolve: {
-    alias: [{ find: "@", replacement: path.join(__dirname, "src") }],
+    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
   },
 });

package.json

@@ -1,52 +1,28 @@
 {
   "name": "kor-address-extension",
+  "private": true,
   "version": "1.2.0",
-  "main": "dist/index.js",
   "type": "module",
   "repository": "[email protected]:Jaewoook/kor-address-extension.git",
-  "author": "Jaewook Ahn <ajw4586@gmail.com>",
+  "author": "Jaewook Ahn <dev.jaewook@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "build": "tsc -b && vite build",
-    "dev": "vite",
-    "preview": "vite preview",
-    "lint": "eslint src --ext ts,tsx",
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "check-types": "turbo check-types",
+    "lint": "turbo lint",
     "package": "node scripts/CreatePackage.js",
     "postpackage": "node scripts/CreateDistribution.js"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.268",
-    "@types/clipboard": "^2.0.1",
-    "@types/firefox-webext-browser": "^120.0.4",
-    "@types/fs-extra": "^11.0.4",
-    "@types/node": "^18.6.5",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/styled-components": "^5.1.34",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "archiver": "^5.3.1",
+    "archiver": "^5.0.0",
     "chalk": "^4.1.0",
-    "eslint": "^8",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
     "fs-extra": "^10.1.0",
-    "prettier": "3.3.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.3.1"
+    "turbo": "^2.0.5"
   },
-  "dependencies": {
-    "@sentry/react": "^6.13.3",
-    "antd": "^5.18.2",
-    "axios": "^1.7.2",
-    "copy-to-clipboard": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
-    "recoil": "^0.7.7",
-    "styled-components": "^6.1.11"
-  }
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "packageManager": "[email protected]"
 }

packages/shared/index.ts

@@ -0,0 +1 @@
+export {};

packages/shared/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@repo/shared",
+  "version": "0.0.0",
+  "private": true,
+  "main": "src/index.ts",
+  "devDependencies": {
+    "@types/chrome": "^0.0.268",
+    "@types/firefox-webext-browser": "^120.0.4",
+    "typescript": "^5.4.5"
+  }
+}

packages/shared/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@repo//tsconfig/vite.json",
+  "include": ["*.ts", "models"]
+}

tsconfig.node.json → packages/tsconfig/node.json

@@ -5,8 +5,6 @@
     "skipLibCheck": true,
     "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "noEmit": true
-  },
-  "include": ["vite.config.ts"]
+    "strict": true
+  }
 }

packages/tsconfig/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@repo/tsconfig",
+  "version": "0.0.0",
+  "private": true
+}

tsconfig.app.json → packages/tsconfig/vite.json

@@ -10,14 +10,9 @@
     "target": "ES2020",
     "noEmit": true,
     "moduleResolution": "Bundler",
-    "baseUrl": ".",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
-    "paths": {
-      "@/*": ["src/*"]
-    },
     "strict": true,
-    "noFallthroughCasesInSwitch": true,
-  },
-  "include": ["src"]
+    "noFallthroughCasesInSwitch": true
+  }
 }

scripts/CreateDistribution.js

@@ -6,40 +6,41 @@ import chalk from "chalk";
 
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 
-const distPath = path.join(__dirname, "../dist.zip");
-const distDirPath = path.join(__dirname, "../dist/");
+const EXTENSION_DIST_BIN_PATH = path.join(__dirname, "../dist.zip");
+const EXTENSION_DIST_PATH = path.join(__dirname, "../dist");
 
-if (!fs.existsSync(distDirPath)) {
+if (!fs.existsSync(EXTENSION_DIST_PATH)) {
   console.log(
-    chalk.red("error"),
-    "dist directory not found. Please run build first!"
+    chalk.red("error:"),
+    "extension build output not found. Please run build first!"
   );
   process.exit(1);
 }
 
-if (fs.existsSync(distPath)) {
+if (fs.existsSync(EXTENSION_DIST_BIN_PATH)) {
   console.log(
-    chalk.yellow("wraning"),
+    chalk.yellow("wraning:"),
     "An existing dist file found. Replace it to new file..."
   );
-  fs.removeSync(distPath);
+  fs.removeSync(EXTENSION_DIST_BIN_PATH);
 }
 
-const output = fs.createWriteStream(distPath);
+const output = fs.createWriteStream(EXTENSION_DIST_BIN_PATH);
 const archive = archiver("zip");
 
 output.on("close", () => {
-  console.log(chalk.green("success"), "dist.zip created!");
+  console.log(chalk.green("success:"), "Compressed extension binary created!\n");
+  console.log(chalk.bold("Output path:", chalk.underline(EXTENSION_DIST_BIN_PATH)), "\n");
 });
 
 archive.on("error", (err) => {
   console.log(
-    chalk.red("error"),
+    chalk.red("error:"),
     "An error occured while creating distribution."
   );
   throw err;
 });
 
 archive.pipe(output);
-archive.directory(distDirPath, false);
+archive.directory(EXTENSION_DIST_PATH, false);
 archive.finalize();