Ts project refs (#108)

# TypeScript Project References
Change shared packages to use [project
reference](https://www.typescriptlang.org/docs/handbook/project-references.html).
Project references allow TypeScript to automatically build dependency
packages. By this change, we can speed up and simplify the building
process of `server` and `app`. Vite doesn't support project references
yet, so we need to run `yarn workspace app build:refs` before starting
Vite, or you can simply run `yarn build` to build everything.

# ts-node and SWC

Inspired by @chreamy #106 , I changed to use ts-node as dev-server
runner, and use [swc](https://swc.rs/) for loader to speed up, which
remove the needs of having a separate tsc daemon.

.dockerignore

@@ -1,3 +1,4 @@
 **/node_modules
 .git
-*/dist
+**/dist
+**/tsconfig.tsbuildinfo

app/Dockerfile

@@ -6,8 +6,9 @@ COPY package.json yarn.lock tsconfig.json ./
 COPY packages/file-graph/package.json ./packages/file-graph/package.json
 COPY packages/utils/package.json ./packages/utils/package.json
 COPY packages/constants/package.json ./packages/constants/package.json
+COPY packages/models/package.json ./packages/models/package.json
 COPY app/package.json ./app/package.json
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
 # Dev stage
 FROM base as dev
@@ -19,10 +20,8 @@ FROM base as build
 COPY packages/file-graph ./packages/file-graph
 COPY packages/utils ./packages/utils
 COPY packages/constants ./packages/constants
+COPY packages/models ./packages/models
 COPY app ./app
-RUN yarn workspace @linux-odyssey/file-graph build
-RUN yarn workspace @linux-odyssey/utils build
-RUN yarn workspace @linux-odyssey/constants build
 RUN yarn workspace app build
 
 # Production stage

app/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite",
     "dev:docker": "API_TARGET=http://backend:3000 vite",
-    "build": "vite build",
+    "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
     "@linux-odyssey/constants": "*",
     "@linux-odyssey/file-graph": "*",
     "@linux-odyssey/utils": "*",
+    "@linux-odyssey/models": "*",
     "@types/dompurify": "^3.0.5",
     "axios": "^1.6.0",
     "dompurify": "^3.0.6",
@@ -41,6 +42,6 @@
     "tailwindcss": "^3.3.3",
     "typescript": "^5.3.3",
     "vite": "^4.5.3",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^2.0.10"
   }
 }

app/src/components/ContactButton.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps({
   url: {
     type: String,

app/src/components/GameHeaderPart.vue

@@ -29,7 +29,7 @@ const handleLogout = async () => {
 defineProps({
   title: {
     type: String,
-    required: true,
+    required: false,
   },
 })
 
@@ -37,6 +37,7 @@ onMounted(async () => {
   try {
     await loadUserProfile()
   } catch (err) {
+    console.error(err)
     toast.error('無法讀取使用者資料')
   }
 })

app/src/store/session.ts

@@ -1,8 +1,7 @@
 import { reactive } from 'vue'
 import { useToast } from 'vue-toastification'
 import { FileGraph, FileObject } from '@linux-odyssey/file-graph'
-// eslint-disable-next-line import/no-relative-packages
+import { IQuest } from '@linux-odyssey/models'
-import { IQuest } from '../../../packages/models/src/quest'
 import api from '../utils/api'
 import Socket from '../utils/socket'
 import SocketTerminal from '../utils/terminal'

app/src/types.ts

@@ -1,6 +1,6 @@
 import { FileGraph } from '@linux-odyssey/file-graph'
 // eslint-disable-next-line import/no-relative-packages
-import { IResponse } from '../../packages/models/src/response'
+import { IResponse } from '@linux-odyssey/models'
 
 export interface Task {
   id: number

app/src/utils/terminal.ts

@@ -8,7 +8,6 @@ class SocketTerminal {
 
   constructor(rows: number, cols: number) {
     this.term = new Terminal({
-      rendererType: 'canvas', // 渲染类型
       rows, // 行数
       cols, // 不指定行数，自动回车后光标从下一行开始
       convertEol: true, // 启用时，光标将设置为下一行的开头
@@ -16,9 +15,11 @@ class SocketTerminal {
       disableStdin: false, // 是否应禁用输入
       // cursorStyle: "underline", //光标样式
       cursorBlink: true, // 光标闪烁
-      foreground: '#ECECEC', // 字体
+      theme: {
-      background: '#000000', // 背景色
+        foreground: '#ECECEC', // 字体
-      cursor: 'help', // 设置光标
+        background: '#000000', // 背景色
+        cursor: 'help', // 设置光标
+      },
       fontSize: 18,
       fontWeight: 'normal',
     })

app/src/views/LandingPage.vue

@@ -1,15 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import ContactButton from '../components/ContactButton.vue'
 import DynamicBackground from '../components/DynamicBackground.vue'
 import { bugReportUrl, facebookUrl, githubUrl } from '../config'
 
-const scrollToSection = (sectionId) => {
+const scrollToSection = (sectionId: string) => {
   const section = document.getElementById(sectionId)
   if (section) {
     const container = document.querySelector('.overflow-y-auto') // Replace '.overflow-y-auto' with the appropriate class or selector for your container
     if (container) {
       container.scrollTo({
-        top: section.offsetTop - container.offsetTop,
+        top: section.offsetTop,
         behavior: 'smooth', // Add smooth scrolling behavior if desired
       })
     }

app/tsconfig.json

@@ -13,7 +13,6 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "allowJs": true,
 
     /* Linting */
     "strict": true,
@@ -21,6 +20,11 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.js"],
+  "include": ["src/**/*.ts", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    { "path": "../packages/utils" },
+    { "path": "../packages/constants" },
+    { "path": "../packages/file-graph" },
+    { "path": "../packages/models" }
+  ]
 }

app/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+}

jest.config.ts

@@ -6,7 +6,6 @@
 import type { Config } from 'jest'
 
 const config: Config = {
-  preset: 'ts-jest/presets/default-esm',
   // All imported modules in your tests should be mocked automatically
   // automock: false,
 

package.json

@@ -13,9 +13,7 @@
   ],
   "scripts": {
     "app": "yarn workspace app dev",
-    "build:deps": "concurrently \"yarn workspace @linux-odyssey/constants build\" \"yarn workspace @linux-odyssey/file-graph build\" \"yarn workspace @linux-odyssey/models build\" \"yarn workspace @linux-odyssey/utils build\"",
+    "build": "yarn workspace server build && yarn workspace app build && yarn workspace analytics build",
-    "build:apps": "concurrently \"yarn workspace app build\" \"yarn workspace server build\" \"yarn workspace analytics build\"",
-    "build": "yarn build:deps && yarn build:apps",
     "dev": "concurrently -n \"App,Server\" -c \"bgBlue.bold,bgGreen.bold\" \"yarn workspace app dev\" \"yarn workspace server dev\"",
     "server": "yarn workspace server dev",
     "cli": "yarn workspace client start",
@@ -30,12 +28,16 @@
     "build:quests": "yarn workspace server build:quests"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-typescript": "^7.23.3",
     "@jest/globals": "^29.7.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.10.4",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vue/eslint-config-prettier": "^7.1.0",
+    "babel-jest": "^29.7.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.44.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -48,7 +50,6 @@
     "eslint-plugin-vue": "^9.15.1",
     "jest": "^29.7.0",
     "prettier": "^3.0.0",
-    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },

packages/analytics/Dockerfile

@@ -16,11 +16,4 @@ COPY packages/models ./packages/models
 ENV NODE_ENV=production
 WORKDIR /app/packages/analytics
 RUN yarn build
-CMD [ "yarn", "start" ]
+CMD [ "yarn", "start" ]
-
-# Development stage
-FROM build as dev
-RUN yarn install --frozen-lockfile
-WORKDIR /app/packages/analytics
-ENV NODE_ENV=development
-CMD [ "yarn", "dev" ]

packages/analytics/package.json

@@ -7,8 +7,8 @@
   "license": "GPL",
   "scripts": {
     "start": "node dist/index.js",
-    "build": "tsc",
+    "build": "tsc -b -f",
-    "watch": "tsc -w",
+    "watch": "tsc -b --watch",
     "dev": "nodemon"
   },
   "dependencies": {

packages/analytics/src/models/pagination.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lines-between-class-members */
 /* eslint-disable class-methods-use-this */
 // eslint-disable-next-line max-classes-per-file
 import mongoose, { Types } from 'mongoose'

packages/analytics/tsconfig.json

@@ -5,6 +5,7 @@
     "outDir": "./dist"
   },
   "include": ["src"],
+  "references": [{ "path": "../models" }],
   "ts-node": {
     "swc": true
   }

packages/constants/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "composite": true,
     "outDir": "./dist"
   },
   "include": ["*.js", "*.ts"],

packages/file-graph/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "src",
+    "composite": true,
     "outDir": "./dist"
   },
   "include": ["src"],

packages/models/src/index.ts

@@ -15,3 +15,5 @@ export default async function connectDB(uri: string) {
   const db = await mongoose.connect(uri)
   return db.connection.getClient()
 }
+
+console.log('Loaded models package')

packages/models/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "src",
+    "composite": true,
     "outDir": "./dist"
   },
   "include": ["src"],

packages/utils/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "./dist",
+    "composite": true,
     "allowJs": false
   },
   "include": ["src"],

server/Dockerfile

@@ -26,10 +26,6 @@ COPY server ./server
 COPY quests ./quests
 
 ENV NODE_ENV=production
-RUN yarn workspace @linux-odyssey/file-graph build
-RUN yarn workspace @linux-odyssey/utils build
-RUN yarn workspace @linux-odyssey/models build
-RUN yarn workspace @linux-odyssey/constants build
 RUN yarn workspace server build
 WORKDIR /app/server
 CMD [ "yarn", "start" ]

server/nodemon.json

@@ -1,6 +1,5 @@
 {
-  "watch": ["dist", "swagger.yaml", "../quests", "../packages"],
+  "watch": ["src", "swagger.yaml", "../quests", "../packages"],
   "ext": "js,ts,yaml,yml",
-  "exec": "node -r source-map-support/register dist/index.js",
+  "exec": "node --loader ts-node/esm src/index.js"
-  "delay": 200
 }

server/package.json

@@ -7,8 +7,8 @@
     "start": "node dist/index.js",
     "setup": "node dist/cli/setup.js",
     "clean": "node dist/cli/clean.js",
-    "build": "tsc",
+    "build": "tsc -b",
-    "dev": "concurrently \"tsc -w\" \"sleep 5 && nodemon\"",
+    "dev": "nodemon",
     "build:quests": "node dist/cli/build.js"
   },
   "dependencies": {
@@ -44,6 +44,8 @@
     "yaml": "^2.3.1"
   },
   "devDependencies": {
+    "@swc/core": "^1.4.2",
+    "@swc/helpers": "^0.5.6",
     "@types/bcrypt": "^5.0.2",
     "@types/dockerode": "^3.3.23",
     "@types/express": "^4.17.21",
@@ -62,7 +64,9 @@
     "concurrently": "^8.2.2",
     "jest": "^29.6.1",
     "nodemon": "^3.0.1",
+    "regenerator-runtime": "^0.14.1",
     "source-map-support": "^0.5.21",
+    "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   }
 }

server/tsconfig.json

@@ -4,5 +4,14 @@
     "outDir": "./dist"
   },
   "include": ["src"],
-  "exclude": ["node_modules", "src/*.test.js", "dist"]
+  "exclude": ["node_modules", "src/*.test.js", "dist"],
+  "references": [
+    { "path": "../packages/constants" },
+    { "path": "../packages/file-graph" },
+    { "path": "../packages/models" },
+    { "path": "../packages/utils" }
+  ],
+  "ts-node": {
+    "swc": true
+  }
 }

tsconfig.json

@@ -8,6 +8,7 @@
     "strict": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "declaration": true
+    "declaration": true,
+    "declarationMap": true
   }
 }