refactor(thumbnail): replace canvasFactory with split browser and Node exports

A bunch of issues were happening during the build due to the dynamic module importing. This commit completely separates browser and Node bundles for the `@nbw/thumbnail` package such that no Node-only dependencies slip into the client bundle.

Author: Bentroen

apps/backend/src/song/song-upload/song-upload.service.ts

@@ -22,7 +22,7 @@ import {
   injectSongFileMetadata,
   obfuscateAndPackSong,
 } from '@nbw/song';
-import { drawToImage } from '@nbw/thumbnail';
+import { drawToImage } from '@nbw/thumbnail/node';
 import { FileService } from '@server/file/file.service';
 import { UserService } from '@server/user/user.service';
 

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

@@ -4,18 +4,10 @@ import { useEffect, useRef, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
 import { NoteQuadTree } from '@nbw/song';
+import { drawNotesOffscreen, swap } from '@nbw/thumbnail/browser';
 
 import { UploadSongForm } from './SongForm.zod';
 
-// Dynamically import thumbnail functions to avoid SSR issues with HTMLCanvasElement
-const loadThumbnailFunctions = async () => {
-  const thumbnail = await import('@nbw/thumbnail');
-  return {
-    drawNotesOffscreen: thumbnail.drawNotesOffscreen,
-    swap: thumbnail.swap,
-  };
-};
-
 type ThumbnailRendererCanvasProps = {
   notes: NoteQuadTree;
   formMethods: UseFormReturn<UploadSongForm>;
@@ -28,11 +20,6 @@ export const ThumbnailRendererCanvas = ({
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const drawRequest = useRef<number | null>(null);
   const [loading, setLoading] = useState(true);
-  const [functionsLoaded, setFunctionsLoaded] = useState(false);
-  const thumbnailFunctionsRef = useRef<{
-    drawNotesOffscreen: typeof import('@nbw/thumbnail').drawNotesOffscreen;
-    swap: typeof import('@nbw/thumbnail').swap;
-  } | null>(null);
 
   const [zoomLevel, startTick, startLayer, backgroundColor] = formMethods.watch(
     [
@@ -43,23 +30,6 @@ export const ThumbnailRendererCanvas = ({
     ],
   );
 
-  // Load thumbnail functions on client side only
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    if (thumbnailFunctionsRef.current) return;
-
-    loadThumbnailFunctions()
-      .then((funcs) => {
-        thumbnailFunctionsRef.current = funcs;
-        // Trigger a re-render to use the loaded functions
-        setFunctionsLoaded(true);
-        setLoading(false);
-      })
-      .catch((error) => {
-        console.error('Failed to load thumbnail functions:', error);
-      });
-  }, []);
-
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -76,12 +46,6 @@ export const ThumbnailRendererCanvas = ({
   }, []);
 
   useEffect(() => {
-    if (typeof window === 'undefined') return;
-    if (!thumbnailFunctionsRef.current || !functionsLoaded) {
-      setLoading(true);
-      return;
-    }
-
     setLoading(true);
 
     const canvas = canvasRef.current as HTMLCanvasElement | null;
@@ -92,11 +56,9 @@ export const ThumbnailRendererCanvas = ({
       cancelAnimationFrame(drawRequest.current);
     }
 
-    const { drawNotesOffscreen, swap } = thumbnailFunctionsRef.current;
-
     drawRequest.current = requestAnimationFrame(async () => {
       try {
-        const output = await drawNotesOffscreen({
+        const output = (await drawNotesOffscreen({
           notes,
           startTick,
           startLayer,
@@ -105,7 +67,7 @@ export const ThumbnailRendererCanvas = ({
           canvasWidth: canvas.width,
           imgWidth: 1280,
           imgHeight: 768,
-        });
+        })) as OffscreenCanvas;
 
         swap(output, canvas);
         setLoading(false);
@@ -114,14 +76,7 @@ export const ThumbnailRendererCanvas = ({
         setLoading(false);
       }
     });
-  }, [
-    notes,
-    startTick,
-    startLayer,
-    zoomLevel,
-    backgroundColor,
-    functionsLoaded,
-  ]);
+  }, [notes, startTick, startLayer, zoomLevel, backgroundColor]);
 
   return (
     <div className='relative w-full'>

packages/thumbnail/package.json

@@ -1,29 +1,35 @@
 {
   "name": "@nbw/thumbnail",
-  "main": "dist/index.node.js",
-  "module": "dist/index.node.js",
-  "types": "dist/index.d.ts",
   "type": "module",
   "private": true,
+  "sideEffects": false,
   "exports": {
-    ".": {
-      "browser": "./dist/index.browser.js",
-      "node": "./dist/index.node.js",
-      "import": "./dist/index.node.js",
-      "types": "./dist/index.d.ts",
-      "development": "./src/index.ts"
+    "./browser": {
+      "import": "./dist/browser/index.js",
+      "types": "./dist/browser/index.d.ts"
+    },
+    "./node": {
+      "import": "./dist/node/index.js",
+      "types": "./dist/node/index.d.ts"
     }
   },
   "scripts": {
-    "build": "bun run clean && bun run build:node && bun run build:browser && bun run build:types",
-    "build:node": "bun build src/index.ts --outdir dist --target node && mv dist/index.js dist/index.node.js",
-    "build:browser": "bun build src/index.ts --outdir dist --target browser --external @napi-rs/canvas && mv dist/index.js dist/index.browser.js",
+    "build": "bun run clean && bun run build:browser && bun run build:node && bun run build:types",
+    "build:browser": "bun build src/browser/index.ts --outdir dist/browser --target browser --external @napi-rs/canvas",
+    "build:node": "bun build src/node/index.ts --outdir dist/node --target node",
     "build:types": "tsc --project tsconfig.build.json",
     "clean": "rm -rf dist",
-    "dev": "bun build src/index.ts --outdir dist --target node --watch",
+    "dev:browser": "bun build src/browser/index.ts --outdir dist/browser --target node --watch",
+    "dev:node": "bun build src/node/index.ts --outdir dist/node --target node --watch",
     "lint": "eslint \"src/**/*.ts\" --fix",
     "test": "jest"
   },
+  "dependencies": {
+    "@nbw/song": "workspace:*"
+  },
+  "optionalDependencies": {
+    "@napi-rs/canvas": "^0.1.74"
+  },
   "devDependencies": {
     "@types/bun": "latest",
     "typescript": "^5",
@@ -33,8 +39,7 @@
   "peerDependencies": {
     "typescript": "^5"
   },
-  "dependencies": {
-    "@napi-rs/canvas": "^0.1.74",
-    "@nbw/song": "workspace:*"
+  "engines": {
+    "node": ">=18"
   }
 }

packages/thumbnail/src/browser/canvas.ts

@@ -0,0 +1,23 @@
+import type { DrawingCanvas } from '../shared/drawTypes';
+
+export const createCanvas = (w: number, h: number): DrawingCanvas =>
+  new OffscreenCanvas(w, h) as unknown as DrawingCanvas;
+
+export const loadImage = (src: string) =>
+  new Promise<HTMLImageElement>((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+
+export const useFont = () => {
+  const font = new FontFace('Lato', 'url(/fonts/Lato-Regular.ttf)');
+  font.load().then((f) => document.fonts.add(f));
+};
+
+export const noteBlockImage = loadImage('/img/note-block-grayscale.png');
+
+export const saveToImage = () => {
+  throw new Error('saveToImage not available in browser');
+};

packages/thumbnail/src/browser/draw.ts

@@ -0,0 +1,15 @@
+import { drawNotes } from '../shared/drawCore';
+import type { DrawParams } from '../shared/types';
+
+import { createCanvas, noteBlockImage, useFont } from './canvas';
+
+useFont();
+
+export const drawNotesOffscreen = async (params: DrawParams) => {
+  return await drawNotes(params, createCanvas, noteBlockImage);
+};
+
+export const swap = (src: OffscreenCanvas, dst: HTMLCanvasElement) => {
+  const ctx = dst.getContext('2d')!;
+  ctx.drawImage(src, 0, 0);
+};

packages/thumbnail/src/browser/index.ts

@@ -0,0 +1,3 @@
+export * from './canvas';
+export * from './draw';
+export * from '../shared/types';