refactor: enhance canvasFactory to support both Node.js and browser environments with improved error handling

Author: tomast1337

packages/thumbnail/src/canvasFactory.ts

@@ -9,52 +9,98 @@ let canvasUtils: CanvasUtils;
 
 if (typeof document === 'undefined') {
   // Node.js/Bun environment
-  const canvasModule = require('@napi-rs/canvas') as typeof NapiRs;
-  const path = require('path') as typeof Path;
-
-  const {
-    createCanvas: nodeCreateCanvas,
-    loadImage: nodeLoadImage,
-    GlobalFonts,
-  } = canvasModule;
-
-  const getPath = (filename: string) => {
-    const workingDir = process.cwd();
-    const fullPath = path.join(workingDir, filename.split('/').join(path.sep));
-
-    return fullPath;
-  };
-
-  const saveToImage = (canvas: NapiRs.Canvas) => canvas.encode('png');
-
-  const useFont = () => {
-    const path = getPath('assets/fonts/Lato-Regular.ttf').toString();
-    console.log('Font path: ', path);
-
-    GlobalFonts.registerFromPath(path, 'Lato');
-  };
-
-  let noteBlockImage: Promise<any>;
-
   try {
-    const path = getPath('assets/img/note-block-grayscale.png');
-
-    noteBlockImage = nodeLoadImage(path);
+    const canvasModule = require('@napi-rs/canvas') as typeof NapiRs;
+    const path = require('path') as typeof Path;
+
+    const {
+      createCanvas: nodeCreateCanvas,
+      loadImage: nodeLoadImage,
+      GlobalFonts,
+    } = canvasModule;
+
+    const getPath = (filename: string) => {
+      const workingDir = process.cwd();
+      const fullPath = path.join(
+        workingDir,
+        filename.split('/').join(path.sep),
+      );
+
+      return fullPath;
+    };
+
+    const saveToImage = (canvas: NapiRs.Canvas) => canvas.encode('png');
+
+    const useFont = () => {
+      const path = getPath('assets/fonts/Lato-Regular.ttf').toString();
+      console.log('Font path: ', path);
+
+      GlobalFonts.registerFromPath(path, 'Lato');
+    };
+
+    let noteBlockImage: Promise<any>;
+
+    try {
+      const path = getPath('assets/img/note-block-grayscale.png');
+
+      noteBlockImage = nodeLoadImage(path);
+    } catch (error) {
+      console.error('Error loading image: ', error);
+      noteBlockImage = Promise.reject(error);
+    }
+
+    canvasUtils = {
+      createCanvas: nodeCreateCanvas,
+      loadImage: nodeLoadImage,
+      getPath,
+      useFont,
+      saveToImage,
+      noteBlockImage,
+      DrawingCanvas: canvasModule.Canvas,
+      RenderedImage: canvasModule.Image,
+    };
   } catch (error) {
-    console.error('Error loading image: ', error);
-    noteBlockImage = Promise.reject(error);
+    // Fallback for when @napi-rs/canvas is not available (e.g., in browser build)
+    console.warn('@napi-rs/canvas not available, using browser fallbacks');
+
+    const createCanvas = (width: number, height: number) => {
+      if (typeof OffscreenCanvas !== 'undefined') {
+        return new OffscreenCanvas(width, height);
+      }
+      throw new Error('OffscreenCanvas not available');
+    };
+
+    const loadImage = (src: string): Promise<any> => {
+      return Promise.reject(
+        new Error('loadImage not available in this environment'),
+      );
+    };
+
+    const getPath = (filename: string) => filename;
+
+    const saveToImage = (_canvas: any) => {
+      throw new Error('saveToImage not implemented in browser');
+    };
+
+    const useFont = () => {
+      // No-op in fallback
+    };
+
+    const noteBlockImage = Promise.reject(
+      new Error('noteBlockImage not available in this environment'),
+    );
+
+    canvasUtils = {
+      createCanvas,
+      loadImage,
+      getPath,
+      useFont,
+      saveToImage,
+      noteBlockImage,
+      DrawingCanvas: HTMLCanvasElement as any,
+      RenderedImage: HTMLImageElement as any,
+    };
   }
-
-  canvasUtils = {
-    createCanvas: nodeCreateCanvas,
-    loadImage: nodeLoadImage,
-    getPath,
-    useFont,
-    saveToImage,
-    noteBlockImage,
-    DrawingCanvas: canvasModule.Canvas,
-    RenderedImage: canvasModule.Image,
-  };
 } else {
   // Browser environment
   const createCanvas = (width: number, height: number) => {