[api-major] Output JavaScript modules in the builds (issue 10317)

At this point in time all browsers, and also Node.js, support standard `import`/`export` statements and we can now finally consider outputting modern JavaScript modules in the builds.[1]

In order for this to work we can *only* use proper `import`/`export` statements throughout the main code-base, and (as expected) our Node.js support made this much more complicated since both the official builds and the GitHub Actions-based tests must keep working.[2]
One remaining issue is that the `pdf.scripting.js` file cannot be built as a JavaScript module, since doing so breaks PDF scripting.

Note that my initial goal was to try and split these changes into a couple of commits, however that unfortunately didn't really work since it turned out to be difficult for smaller patches to work correctly and pass (all) tests that way.[3]
This is a classic case of every change requiring a couple of other changes, with each of those changes requiring further changes in turn and the size/scope quickly increasing as a result.

One possible "issue" with these changes is that we'll now only output JavaScript modules in the builds, which could perhaps be a problem with older tools. However it unfortunately seems far too complicated/time-consuming for us to attempt to support both the old and modern module formats, hence the alternative would be to do "nothing" here and just keep our "old" builds.[4]

---
[1] The final blocker was module support in workers in Firefox, which was implemented in Firefox 114; please see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#browser_compatibility

[2] It's probably possible to further improve/simplify especially the Node.js-specific code, but it does appear to work as-is.

[3] Having partially "broken" patches, that fail tests, as part of the commit history is *really not* a good idea in general.

[4] Outputting JavaScript modules was first requested almost five years ago, see issue 10317, and nowadays there *should* be much better support for JavaScript modules in various tools.

src/display/api.js

@@ -51,7 +51,6 @@ import {
   DOMStandardFontDataFactory,
   isDataScheme,
   isValidFetchUrl,
-  loadScript,
   PageViewport,
   RenderingCancelledException,
   StatTimer,
@@ -1986,14 +1985,13 @@ const PDFWorkerUtil = {
   fakeWorkerId: 0,
 };
 if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
-  // eslint-disable-next-line no-undef
-  if (isNodeJS && typeof __non_webpack_require__ === "function") {
+  if (isNodeJS) {
     // Workers aren't supported in Node.js, force-disabling them there.
     PDFWorkerUtil.isWorkerDisabled = true;
 
     GlobalWorkerOptions.workerSrc ||= PDFJSDev.test("LIB")
       ? "../pdf.worker.js"
-      : "./pdf.worker.js";
+      : "./pdf.worker.mjs";
   }
 
   // Check if URLs have the same origin. For non-HTTP based URLs, returns false.
@@ -2126,11 +2124,7 @@ class PDFWorker {
           );
         }
 
-        const worker =
-          typeof PDFJSDev === "undefined" &&
-          !workerSrc.endsWith("/build/pdf.worker.js")
-            ? new Worker(workerSrc, { type: "module" })
-            : new Worker(workerSrc);
+        const worker = new Worker(workerSrc, { type: "module" });
         const messageHandler = new MessageHandler("main", "worker", worker);
         const terminateEarly = () => {
           worker.removeEventListener("error", onWorkerError);
@@ -2312,40 +2306,15 @@ class PDFWorker {
   // Loads worker code into the main-thread.
   static get _setupFakeWorkerGlobal() {
     const loader = async () => {
-      const mainWorkerMessageHandler = this.#mainThreadWorkerMessageHandler;
-
-      if (mainWorkerMessageHandler) {
+      if (this.#mainThreadWorkerMessageHandler) {
         // The worker was already loaded using e.g. a `<script>` tag.
-        return mainWorkerMessageHandler;
+        return this.#mainThreadWorkerMessageHandler;
       }
-      if (typeof PDFJSDev === "undefined") {
-        const worker = await import("pdfjs/pdf.worker.js");
-        return worker.WorkerMessageHandler;
-      }
-      if (
-        PDFJSDev.test("GENERIC") &&
-        isNodeJS &&
-        // eslint-disable-next-line no-undef
-        typeof __non_webpack_require__ === "function"
-      ) {
-        // Since bundlers, such as Webpack, cannot be told to leave `require`
-        // statements alone we are thus forced to jump through hoops in order
-        // to prevent `Critical dependency: ...` warnings in third-party
-        // deployments of the built `pdf.js`/`pdf.worker.js` files; see
-        // https://github.com/webpack/webpack/issues/8826
-        //
-        // The following hack is based on the assumption that code running in
-        // Node.js won't ever be affected by e.g. Content Security Policies that
-        // prevent the use of `eval`. If that ever occurs, we should revert this
-        // to a normal `__non_webpack_require__` statement and simply document
-        // the Webpack warnings instead (telling users to ignore them).
-        //
-        // eslint-disable-next-line no-eval
-        const worker = eval("require")(this.workerSrc);
-        return worker.WorkerMessageHandler;
-      }
-      await loadScript(this.workerSrc);
-      return window.pdfjsWorker.WorkerMessageHandler;
+      const worker =
+        typeof PDFJSDev === "undefined"
+          ? await import("pdfjs/pdf.worker.js")
+          : await __non_webpack_import__(this.workerSrc); // eslint-disable-line no-undef
+      return worker.WorkerMessageHandler;
     };
 
     return shadow(this, "_setupFakeWorkerGlobal", loader());

src/display/display_utils.js

@@ -796,29 +796,6 @@ function noContextMenu(e) {
   e.preventDefault();
 }
 
-/**
- * @param {string} src
- * @param {boolean} [removeScriptElement]
- * @returns {Promise<void>}
- */
-function loadScript(src, removeScriptElement = false) {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement("script");
-    script.src = src;
-
-    script.onload = function (evt) {
-      if (removeScriptElement) {
-        script.remove();
-      }
-      resolve(evt);
-    };
-    script.onerror = function () {
-      reject(new Error(`Cannot load script at: ${script.src}`));
-    };
-    (document.head || document.documentElement).append(script);
-  });
-}
-
 // Deprecated API function -- display regardless of the `verbosity` setting.
 function deprecated(details) {
   console.log("Deprecated API usage: " + details);
@@ -1026,7 +1003,6 @@ export {
   isDataScheme,
   isPdfFile,
   isValidFetchUrl,
-  loadScript,
   noContextMenu,
   PageViewport,
   PDFDateString,

src/display/node_stream.js

@@ -12,7 +12,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* globals __non_webpack_require__ */
 
 import {
   AbortException,
@@ -34,7 +33,7 @@ if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
 const fileUriRegex = /^file:\/\/\/[a-zA-Z]:\//;
 
 function parseUrl(sourceUrl) {
-  const url = __non_webpack_require__("url");
+  const { url } = globalThis.__pdfjsPackages__;
   const parsedUrl = url.parse(sourceUrl);
   if (parsedUrl.protocol === "file:" || parsedUrl.host) {
     return parsedUrl;
@@ -340,13 +339,13 @@ class PDFNodeStreamFullReader extends BaseFullReader {
 
     this._request = null;
     if (this._url.protocol === "http:") {
-      const http = __non_webpack_require__("http");
+      const { http } = globalThis.__pdfjsPackages__;
       this._request = http.request(
         createRequestOptions(this._url, stream.httpHeaders),
         handleResponse
       );
     } else {
-      const https = __non_webpack_require__("https");
+      const { https } = globalThis.__pdfjsPackages__;
       this._request = https.request(
         createRequestOptions(this._url, stream.httpHeaders),
         handleResponse
@@ -389,13 +388,13 @@ class PDFNodeStreamRangeReader extends BaseRangeReader {
 
     this._request = null;
     if (this._url.protocol === "http:") {
-      const http = __non_webpack_require__("http");
+      const { http } = globalThis.__pdfjsPackages__;
       this._request = http.request(
         createRequestOptions(this._url, this._httpHeaders),
         handleResponse
       );
     } else {
-      const https = __non_webpack_require__("https");
+      const { https } = globalThis.__pdfjsPackages__;
       this._request = https.request(
         createRequestOptions(this._url, this._httpHeaders),
         handleResponse
@@ -420,7 +419,7 @@ class PDFNodeStreamFsFullReader extends BaseFullReader {
       path = path.replace(/^\//, "");
     }
 
-    const fs = __non_webpack_require__("fs");
+    const { fs } = globalThis.__pdfjsPackages__;
     fs.lstat(path, (error, stat) => {
       if (error) {
         if (error.code === "ENOENT") {
@@ -450,7 +449,7 @@ class PDFNodeStreamFsRangeReader extends BaseRangeReader {
       path = path.replace(/^\//, "");
     }
 
-    const fs = __non_webpack_require__("fs");
+    const { fs } = globalThis.__pdfjsPackages__;
     this._setReadableStream(fs.createReadStream(path, { start, end: end - 1 }));
   }
 }

src/display/node_utils.js

@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* globals __non_webpack_require__ */
+/* globals __non_webpack_import__, __non_webpack_require__ */
 
 import {
   BaseCanvasFactory,
@@ -28,15 +28,59 @@ if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
   );
 }
 
+if (isNodeJS && !globalThis.__pdfjsPackages__) {
+  let fs, http, https, url, canvas, path2d_polyfill;
+
+  if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("LIB")) {
+    // Native packages.
+    fs = __non_webpack_require__("fs");
+    http = __non_webpack_require__("http");
+    https = __non_webpack_require__("https");
+    url = __non_webpack_require__("url");
+    // Optional, third-party, packages.
+    try {
+      canvas = __non_webpack_require__("canvas");
+    } catch {}
+    try {
+      path2d_polyfill = __non_webpack_require__("path2d-polyfill");
+    } catch {}
+  } else {
+    // Native packages.
+    fs = await __non_webpack_import__("fs");
+    http = await __non_webpack_import__("http");
+    https = await __non_webpack_import__("https");
+    url = await __non_webpack_import__("url");
+    // Optional, third-party, packages.
+    try {
+      canvas = await __non_webpack_import__("canvas");
+    } catch {}
+    try {
+      path2d_polyfill = await __non_webpack_import__("path2d-polyfill");
+    } catch {}
+  }
+  globalThis.__pdfjsPackages__ = {
+    CanvasRenderingContext2D: canvas?.CanvasRenderingContext2D,
+    createCanvas: canvas?.createCanvas,
+    DOMMatrix: canvas?.DOMMatrix,
+    fs,
+    http,
+    https,
+    polyfillPath2D: path2d_polyfill?.polyfillPath2D,
+    url,
+  };
+}
+
 if (typeof PDFJSDev !== "undefined" && !PDFJSDev.test("SKIP_BABEL")) {
   (function checkDOMMatrix() {
     if (globalThis.DOMMatrix || !isNodeJS) {
       return;
     }
-    try {
-      globalThis.DOMMatrix = __non_webpack_require__("canvas").DOMMatrix;
-    } catch (ex) {
-      warn(`Cannot polyfill \`DOMMatrix\`, rendering may be broken: "${ex}".`);
+    const { DOMMatrix } = globalThis.__pdfjsPackages__;
+
+    if (DOMMatrix) {
+      globalThis.DOMMatrix = DOMMatrix;
+    } else {
+      warn("Cannot polyfill `DOMMatrix`, rendering may be broken.");
     }
   })();
 
@@ -44,21 +88,21 @@ if (typeof PDFJSDev !== "undefined" && !PDFJSDev.test("SKIP_BABEL")) {
     if (globalThis.Path2D || !isNodeJS) {
       return;
     }
-    try {
-      const { CanvasRenderingContext2D } = __non_webpack_require__("canvas");
-      const { polyfillPath2D } = __non_webpack_require__("path2d-polyfill");
+    const { CanvasRenderingContext2D, polyfillPath2D } =
+      globalThis.__pdfjsPackages__;
 
+    if (CanvasRenderingContext2D && polyfillPath2D) {
       globalThis.CanvasRenderingContext2D = CanvasRenderingContext2D;
       polyfillPath2D(globalThis);
-    } catch (ex) {
-      warn(`Cannot polyfill \`Path2D\`, rendering may be broken: "${ex}".`);
+    } else {
+      warn("Cannot polyfill `Path2D`, rendering may be broken.");
     }
   })();
 }
 
 const fetchData = function (url) {
   return new Promise((resolve, reject) => {
-    const fs = __non_webpack_require__("fs");
+    const { fs } = globalThis.__pdfjsPackages__;
     fs.readFile(url, (error, data) => {
       if (error || !data) {
         reject(new Error(error));
@@ -76,8 +120,8 @@ class NodeCanvasFactory extends BaseCanvasFactory {
    * @ignore
    */
   _createCanvas(width, height) {
-    const Canvas = __non_webpack_require__("canvas");
-    return Canvas.createCanvas(width, height);
+    const { createCanvas } = globalThis.__pdfjsPackages__;
+    return createCanvas(width, height);
   }
 }
 

src/pdf.js

@@ -59,7 +59,6 @@ import {
   getXfaPageViewport,
   isDataScheme,
   isPdfFile,
-  loadScript,
   noContextMenu,
   PDFDateString,
   PixelsPerInch,
@@ -102,7 +101,6 @@ export {
   InvalidPDFException,
   isDataScheme,
   isPdfFile,
-  loadScript,
   MissingPDFException,
   noContextMenu,
   normalizeUnicode,

src/pdf.worker.entry.js

@@ -16,4 +16,4 @@
 (typeof window !== "undefined"
   ? window
   : {}
-).pdfjsWorker = require("./pdf.worker.js");
+).pdfjsWorker = require("./pdf.worker.mjs");