fix(signature-canvas): add universal import handling for trim-canvas to support CJS and ESM builds

Author: hamzaapplogika

package.json

@@ -97,6 +97,7 @@
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@testing-library/react": "^16.1.0",
+    "@types/babel__core": "^7.20.5",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^19.0.2",
     "canvas": "^3.1.0",
@@ -114,6 +115,7 @@
     "rollup-plugin-typescript2": "^0.32.1",
     "ts-node": "^10.7.0",
     "ts-standard": "^11.0.0",
+    "tslib": "^2.8.1",
     "typescript": "^4.6.3",
     "window-resizeto": "^0.0.2"
   },

pnpm-lock.yaml

@@ -1,10 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import SignaturePad from 'signature_pad'
-import * as TrimCanvasModule from 'trim-canvas'
-
-const trimCanvas: (canvas: HTMLCanvasElement) => HTMLCanvasElement =
-  (TrimCanvasModule as any).default || (TrimCanvasModule as any)
+import * as trimCanvasImport from "trim-canvas";
 
 export interface SignatureCanvasProps extends SignaturePad.SignaturePadOptions {
   canvasProps?: React.CanvasHTMLAttributes<HTMLCanvasElement>
@@ -79,17 +76,20 @@ export class SignatureCanvas extends Component<SignatureCanvasProps> {
   }
 
   // return a trimmed copy of the canvas
-  getTrimmedCanvas = (): HTMLCanvasElement => {
+   getTrimmedCanvas = (): HTMLCanvasElement => {
     // copy the canvas
-    const canvas = this.getCanvas()
-    const copy = document.createElement('canvas')
-    copy.width = canvas.width
-    copy.height = canvas.height
+    const canvas = this.getCanvas();
+    const copy = document.createElement("canvas");
+    copy.width = canvas.width;
+    copy.height = canvas.height;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    copy.getContext('2d')!.drawImage(canvas, 0, 0)
+    copy.getContext("2d")!.drawImage(canvas, 0, 0);
     // then trim it
-    return trimCanvas(copy)
-  }
+    // Handle both CJS and ESM default export forms
+    const trimFn = (trimCanvasImport as any).default || trimCanvasImport;
+
+    return typeof trimFn === "function" ? trimFn(copy) : copy;
+  };
 
   // return the internal SignaturePad reference
   getSignaturePad = (): SignaturePad => {

src/index.tsx

@@ -4,6 +4,16 @@
   // allowlist of files to build
   "files": ["src/index.tsx", "types/trim-canvas.d.ts"],
   "compilerOptions": {
+    "importHelpers": true,
+    "typeRoots": ["./typings", "./node_modules/@types"],
+    "target": "ES2018",
+    "lib": ["DOM", "ES2018"],
+    "module": "ESNext",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
     // override the base
     "noEmit": false,
     // don't output JS files, only declarations (Rollup outputs the JS)

tsconfig.build.json

@@ -0,0 +1 @@
+declare module '@babel/core';