Refactor/Update TypeScript configuration across all packages

.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.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/frontend/next.config.mjs

@@ -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/package.json

@@ -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/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 BlogPageProps = {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 };
 
 export async function generateMetadata({

apps/frontend/src/app/(content)/(info)/help/[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)/song/[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';
 

apps/frontend/src/modules/browse/components/SongCard.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Link from 'next/link';
 import Skeleton from 'react-loading-skeleton';
 
-import { SongPreviewDtoType } from '@nbw/database';
+import type { SongPreviewDtoType } from '@nbw/database';
 import { formatDuration, formatTimeAgo } from '@web/modules/shared/util/format';
 
 import SongThumbnail from '../../shared/components/layout/SongThumbnail';

apps/frontend/src/modules/browse/components/client/context/FeaturedSongs.context.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { create } from 'zustand';
 
 import { TIMESPANS } from '@nbw/config';
-import { type FeaturedSongsDto, type SongPreviewDto } from '@nbw/database';
+import type { FeaturedSongsDto, SongPreviewDto } from '@nbw/database';
 
 type TimespanType = (typeof TIMESPANS)[number];
 

apps/frontend/src/modules/browse/components/client/context/HomePage.context.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { FeaturedSongsDtoType, SongPreviewDtoType } from '@nbw/database';
+import type { FeaturedSongsDtoType, SongPreviewDtoType } from '@nbw/database';
 
 import {
   FeaturedSongsProvider,

apps/frontend/src/modules/browse/components/client/context/RecentSongs.context.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { create } from 'zustand';
 
-import { PageDto, SongPreviewDtoType } from '@nbw/database';
+import type { PageDto, SongPreviewDtoType } from '@nbw/database';
 import axiosInstance from '@web/lib/axios';
 
 interface RecentSongsState {

apps/frontend/src/modules/my-songs/components/client/SongRow.tsx

@@ -8,7 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Link from 'next/link';
 import Skeleton from 'react-loading-skeleton';
 
-import { SongPreviewDtoType } from '@nbw/database';
+import type { SongPreviewDtoType } from '@nbw/database';
 import SongThumbnail from '@web/modules/shared/components/layout/SongThumbnail';
 import { formatDuration } from '@web/modules/shared/util/format';
 

apps/frontend/src/modules/shared/components/layout/RandomSongButton.tsx

@@ -4,7 +4,7 @@ import { faDice } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useRouter } from 'next/navigation';
 
-import { PageDto, SongPreviewDto } from '@nbw/database';
+import type { PageDto, SongPreviewDto } from '@nbw/database';
 import axios from '@web/lib/axios';
 
 import { MusicalNote } from './MusicalNote';

apps/frontend/src/modules/song-edit/components/client/EditSongPage.tsx

@@ -1,4 +1,4 @@
-import { UploadSongDtoType } from '@nbw/database';
+import type { UploadSongDtoType } from '@nbw/database';
 import axiosInstance from '@web/lib/axios';
 import {
   getTokenServer,

apps/frontend/src/modules/song/components/client/DownloadSongModal.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-import { SongViewDtoType } from '@nbw/database';
+import type { SongViewDtoType } from '@nbw/database';
 import { DownloadPopupAdSlot } from '@web/modules/shared/components/client/ads/AdSlots';
 import GenericModal from '@web/modules/shared/components/client/GenericModal';
 

apps/frontend/src/modules/song/components/client/SongCanvas.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from 'react';
 
-import { SongViewDtoType } from '@nbw/database';
+import type { SongViewDtoType } from '@nbw/database';
 import axios from '@web/lib/axios';
 
 export const SongCanvas = ({ song }: { song: SongViewDtoType }) => {

apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx

@@ -11,7 +11,7 @@ import {
 import { Slider } from '@web/modules/shared/components/ui/slider';
 
 import { useSongProvider } from './context/Song.context';
-import { EditSongForm, UploadSongForm } from './SongForm.zod';
+import { EditSongFormInput, UploadSongFormInput } from './SongForm.zod';
 import { ThumbnailRendererCanvas } from './ThumbnailRenderer';
 
 const formatZoomLevel = (zoomLevel: number) => {
@@ -20,7 +20,8 @@ const formatZoomLevel = (zoomLevel: number) => {
 };
 
 type ThumbnailSlidersProps = {
-  formMethods: UseFormReturn<UploadSongForm> & UseFormReturn<EditSongForm>;
+  formMethods: UseFormReturn<UploadSongFormInput> &
+    UseFormReturn<EditSongFormInput>;
   isLocked: boolean;
   maxTick: number;
   maxLayer: number;
@@ -48,7 +49,7 @@ const ThumbnailSliders: React.FC<ThumbnailSlidersProps> = ({
       <div>
         <Slider
           id='zoom-level'
-          value={[zoomLevel]}
+          value={[zoomLevel ?? THUMBNAIL_CONSTANTS.zoomLevel.default]}
           onValueChange={(value) => {
             setValue('thumbnailData.zoomLevel', value[0], {
               shouldValidate: true,
@@ -60,14 +61,16 @@ const ThumbnailSliders: React.FC<ThumbnailSlidersProps> = ({
           max={THUMBNAIL_CONSTANTS.zoomLevel.max}
         />
       </div>
-      <div>{formatZoomLevel(zoomLevel)}</div>
+      <div>
+        {formatZoomLevel(zoomLevel ?? THUMBNAIL_CONSTANTS.zoomLevel.default)}
+      </div>
       <div>
         <label htmlFor='start-tick'>Start Tick</label>
       </div>
       <div className='w-full'>
         <Slider
           id='start-tick'
-          value={[startTick]}
+          value={[startTick ?? THUMBNAIL_CONSTANTS.startTick.default]}
           onValueChange={(value) => {
             setValue('thumbnailData.startTick', value[0], {
               shouldValidate: true,
@@ -86,7 +89,7 @@ const ThumbnailSliders: React.FC<ThumbnailSlidersProps> = ({
       <div className='w-full'>
         <Slider
           id='start-layer'
-          value={[startLayer]}
+          value={[startLayer ?? THUMBNAIL_CONSTANTS.startLayer.default]}
           onValueChange={(value) => {
             setValue('thumbnailData.startLayer', value[0], {
               shouldValidate: true,

apps/frontend/src/modules/song/components/client/ThumbnailRenderer.tsx

@@ -3,14 +3,15 @@
 import { useEffect, useRef, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
+import { THUMBNAIL_CONSTANTS } from '@nbw/config';
 import { NoteQuadTree } from '@nbw/song';
 import { drawNotesOffscreen, swap } from '@nbw/thumbnail/browser';
 
-import { UploadSongForm } from './SongForm.zod';
+import { UploadSongFormInput } from './SongForm.zod';
 
 type ThumbnailRendererCanvasProps = {
   notes: NoteQuadTree;
-  formMethods: UseFormReturn<UploadSongForm>;
+  formMethods: UseFormReturn<UploadSongFormInput>;
 };
 
 export const ThumbnailRendererCanvas = ({
@@ -60,10 +61,11 @@ export const ThumbnailRendererCanvas = ({
       try {
         const output = (await drawNotesOffscreen({
           notes,
-          startTick,
-          startLayer,
-          zoomLevel,
-          backgroundColor,
+          startTick: startTick ?? THUMBNAIL_CONSTANTS.startTick.default,
+          startLayer: startLayer ?? THUMBNAIL_CONSTANTS.startLayer.default,
+          zoomLevel: zoomLevel ?? THUMBNAIL_CONSTANTS.zoomLevel.default,
+          backgroundColor:
+            backgroundColor ?? THUMBNAIL_CONSTANTS.backgroundColor.default,
           canvasWidth: canvas.width,
           imgWidth: 1280,
           imgHeight: 768,

apps/frontend/tsconfig.json

@@ -13,22 +13,23 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
+
     // Override base strict settings for Next.js compatibility
     "strict": true,
-    "strictNullChecks": true,
-    "noImplicitAny": true,
-    "strictBindCallApply": true,
     "strictPropertyInitialization": false,
+
     // Next.js plugins and types
     "plugins": [
       {
         "name": "next"
       }
     ],
     "types": ["mdx"],
+
     // Path mapping
+    "baseUrl": ".",
     "paths": {
-      "@web/*": ["./src/*"]
+      "@web/*": ["src/*"]
     }
   },
   "include": [
@@ -37,10 +38,5 @@
     "**/*.tsx",
     "**/*.mdx",
     ".next/types/**/*.ts"
-  ],
-  "types": ["mdx"],
-  // Path mapping
-  "paths": {
-    "@web/*": ["./src/*"]
-  }
+  ]
 }