Refactor/Update TypeScript configuration across all packages (#74)

Author: Bentroen

.github/workflows/typecheck.yml

@@ -0,0 +1,32 @@
+name: Type Check
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+  pull_request:
+    branches:
+      - develop
+      - main
+
+jobs:
+  typecheck:
+    runs-on: ubuntu-latest
+    env:
+      THUMBNAIL_URL: ${{ vars.THUMBNAIL_URL }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Type check (project references)
+        run: bun run typecheck

.vscode/settings.json

@@ -16,5 +16,7 @@
   "files.associations": {
     ".css": "tailwindcss",
     "*.scss": "tailwindcss"
-  }
+  },
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
 }

apps/backend/scripts/build.ts

@@ -65,14 +65,20 @@ const build = async () => {
     target: 'bun',
     minify: false,
     sourcemap: 'linked',
-    external: optionalRequirePackages.filter((pkg) => {
-      try {
-        require(pkg);
-        return false;
-      } catch (_) {
-        return true;
-      }
-    }),
+    external: [
+      ...optionalRequirePackages.filter((pkg) => {
+        try {
+          require(pkg);
+          return false;
+        } catch (_) {
+          return true;
+        }
+      }),
+      '@nbw/config',
+      '@nbw/database',
+      '@nbw/song',
+      '@nbw/sounds',
+    ],
     splitting: true,
   });
 

apps/backend/tsconfig.build.json

@@ -8,20 +8,13 @@
     "removeComments": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
-    "outDir": "./dist",
-    "baseUrl": "./",
     "emitDecoratorMetadata": true,
-    // Relaxed strict settings for backend
-    "strictNullChecks": false,
-    "noImplicitAny": false,
-    "strictBindCallApply": false,
-    "forceConsistentCasingInFileNames": false,
-    "noFallthroughCasesInSwitch": false,
+
     // Path mapping
+    "baseUrl": ".",
     "paths": {
       "@server/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts"],
-  "exclude": ["node_modules", "dist", "e2e/**/*", "test/**/*"]
+  "include": ["src", "scripts"]
 }

apps/backend/tsconfig.json

@@ -4,6 +4,8 @@ import createMDX from '@next/mdx';
 
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  // Externalize packages that use Node.js built-in modules for server components
+  serverExternalPackages: ['@nbw/database', '@nbw/config'],
   // See: https://github.com/Automattic/node-canvas/issues/867#issuecomment-1925284985
   webpack: (config, { isServer }) => {
     config.externals.push({
@@ -12,8 +14,9 @@ const nextConfig = {
 
     // Prevent @nbw/thumbnail from being bundled on the server
     // It uses HTMLCanvasElement which is not available in Node.js
+    // Also externalize backend packages that use Node.js modules
     if (isServer) {
-      config.externals.push('@nbw/thumbnail');
+      config.externals.push('@nbw/thumbnail', '@nbw/database');
     }
 
     return config;

apps/frontend/next.config.mjs

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build --webpack",
     "start": "next start",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "test": "jest"

apps/frontend/package.json

@@ -7,7 +7,7 @@ import { PostType, getPostData } from '@web/lib/posts';
 import { CustomMarkdown } from '@web/modules/shared/components/CustomMarkdown';
 
 type BlogPageProps = {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 };
 
 export async function generateMetadata({

apps/frontend/src/app/(content)/(info)/blog/[id]/page.tsx

@@ -7,7 +7,7 @@ import { PostType, getPostData } from '@web/lib/posts';
 import { CustomMarkdown } from '@web/modules/shared/components/CustomMarkdown';
 
 type HelpPageProps = {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 };
 
 export async function generateMetadata({
@@ -34,8 +34,8 @@ export async function generateMetadata({
   };
 }
 
-const HelpPost = ({ params }: HelpPageProps) => {
-  const { id } = params;
+const HelpPost = async ({ params }: HelpPageProps) => {
+  const { id } = await params;
   let post: PostType;
 
   try {

apps/frontend/src/app/(content)/(info)/help/[id]/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import { cookies } from 'next/headers';
 
-import { SongViewDtoType } from '@nbw/database';
+import type { SongViewDtoType } from '@nbw/database';
 import axios from '@web/lib/axios';
 import { SongPage } from '@web/modules/song/components/SongPage';