refactor(pdfjs): use TypeScript for the custom script

packages/pdfjs-viewer/scripts/build.ts

@@ -1,13 +1,27 @@
+import { join } from "path";
 import BuildHelper from "../../../scripts/build-utils";
+import { build as esbuild } from "esbuild";
 
 const build = new BuildHelper("packages/pdfjs-viewer");
 
 async function main() {
     build.copy("viewer", "web");
-    build.copy("src/custom.mjs", "web/custom.mjs");
+    await buildScript("web/custom.mjs");
     build.copy("src/custom.css", "web/custom.css");
     build.copy("/node_modules/pdfjs-dist/build/pdf.mjs", "build/pdf.mjs");
     build.copy("/node_modules/pdfjs-dist/build/pdf.worker.mjs", "build/pdf.worker.mjs");
 }
 
+async function buildScript(outPath: string) {
+    await esbuild({
+        entryPoints: [join(build.projectDir, "src/custom.ts")],
+        tsconfig: join(build.projectDir, "tsconfig.app.json"),
+        bundle: true,
+        outfile: join(build.outDir, outPath),
+        format: "esm",
+        platform: "browser",
+        minify: true,
+    });
+}
+
 main();

packages/pdfjs-viewer/src/custom.ts

@@ -4,8 +4,8 @@ async function main() {
         await new Promise(r => setTimeout(r, 50));
     }
 
-    const app = PDFViewerApplication;
-    await app.initializedPromise;    
+    const app = window.PDFViewerApplication;
+    await app.initializedPromise;
 
     app.eventBus.on("documentloaded", () => {
         const storage = app.pdfDocument.annotationStorage;
@@ -17,16 +17,16 @@ async function main() {
             }
             timeout = setTimeout(async () => {
                 if (!storage) return;
-                const data = await app.pdfDocument.saveDocument(storage);
+                const data = await app.pdfDocument.saveDocument();
                 window.parent.postMessage({
                     type: "pdfjs-viewer-document-modified",
-                    data: data 
+                    data: data
                 }, "*");
                 storage.resetModified();
                 timeout = null;
             }, 2_000);
         }
-        
+
         app.eventBus.on("annotationeditorcommit", debouncedSave);
         app.eventBus.on("annotationeditorparamschanged", debouncedSave);
         app.eventBus.on("annotationeditorstateschanged", evt => {
@@ -41,4 +41,4 @@ async function main() {
 };
 
 main();
-console.log("Custom script loaded");
+console.log("Custom script loaded");

packages/pdfjs-viewer/src/typings.d.ts

@@ -0,0 +1,14 @@
+import type { PDFDocumentProxy } from "pdfjs-dist";
+
+declare global {
+    interface Window {
+        PDFViewerApplication?: {
+            initializedPromise: Promise<void>;
+            pdfDocument: PDFDocumentProxy;
+            eventBus: {
+                on(event: string, listener: (...args: any[]) => void): void;
+                dispatch(event: string, data?: any): void;
+            };
+        };
+    }
+}

packages/pdfjs-viewer/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "outDir": "dist",
+    "strict": false,
+    "types": [
+      "node",
+      "express"
+    ],
+    "rootDir": "src",
+    "tsBuildInfoFile": "dist/tsconfig.app.tsbuildinfo"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "eslint.config.js",
+    "eslint.config.cjs",
+    "eslint.config.mjs"
+  ],
+  "references": [
+  ]
+}

packages/pdfjs-viewer/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}