Reduce usage of SystemJS, in the development viewer, even further

With these changes SystemJS is now only used, during development, on the worker-thread and in the unit/font-tests, since Firefox is currently missing support for worker modules; please see https://bugzilla.mozilla.org/show_bug.cgi?id=1247687

Hence all the JavaScript files in the `web/` and `src/display/` folders are now loaded *natively* by the browser (during development) using standard `import` statements/calls, thanks to a nice `import-maps` polyfill.

*Please note:* As soon as https://bugzilla.mozilla.org/show_bug.cgi?id=1247687 is fixed in Firefox, we should be able to remove all traces of SystemJS and thus finally be able to use every possible modern JavaScript feature.

.eslintrc

@@ -1,6 +1,6 @@
 {
   "parserOptions": {
-    "ecmaVersion": 8,
+    "ecmaVersion": 2020,
     "sourceType": "module",
   },
 
@@ -17,13 +17,12 @@
 
   "env": {
     "browser": true,
-    "es6": true,
+    "es2020": true,
     "worker": true,
     "amd": true,
   },
 
   "globals": {
-    "globalThis": false,
     "PDFJSDev": false,
     "exports": false,
     "SystemJS": false,

external/builder/preprocessor2.js

@@ -322,7 +322,7 @@ function preprocessPDFJSCode(ctx, code) {
     },
   };
   var parseOptions = {
-    ecmaVersion: 8,
+    ecmaVersion: 2020,
     locations: true,
     sourceFile: ctx.sourceFile,
     sourceType: "module",

package-lock.json

@@ -3726,6 +3726,12 @@
         }
       }
     },
+    "es-module-shims": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-0.4.6.tgz",
+      "integrity": "sha512-EzVhnLyA/zvmGrAy2RU8m9xpxX7u2yb2by1GZH80SHF6lakG21YAm3Vo56KsLIXaIjT9QabqjYpQU1S5FkM8+Q==",
+      "dev": true
+    },
     "es-to-primitive": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",

package.json

@@ -23,6 +23,7 @@
     "eslint-plugin-no-unsanitized": "^3.1.1",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-unicorn": "^20.0.0",
+    "es-module-shims": "^0.4.6",
     "fancy-log": "^1.3.3",
     "globals": "^11.12.0",
     "gulp": "^4.0.2",

src/core/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2017,
+  },
+
+  "extends": [
+    "../../.eslintrc"
+  ],
+
+  "env": {
+    "es2017": true,
+  },
+}

src/display/api.js

@@ -1650,7 +1650,9 @@ const PDFWorker = (function PDFWorkerClosure() {
       }
       if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")) {
         if (typeof SystemJS !== "object") {
-          throw new Error("SystemJS must be used to load fake worker.");
+          // Manually load SystemJS, since it's only necessary for fake workers.
+          await loadScript("../node_modules/systemjs/dist/system.js");
+          await loadScript("../systemjs.config.js");
         }
         const worker = await SystemJS.import("pdfjs/core/worker.js");
         return worker.WorkerMessageHandler;

src/pdf.js

@@ -65,8 +65,8 @@ const pdfjsBuild =
 
 if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")) {
   const streamsPromise = Promise.all([
-    SystemJS.import("pdfjs/display/network.js"),
+    import("pdfjs/display/network.js"),
-    SystemJS.import("pdfjs/display/fetch_stream.js"),
+    import("pdfjs/display/fetch_stream.js"),
   ]);
   setPDFNetworkStreamFactory(params => {
     return streamsPromise.then(streams => {

web/app.js

@@ -1833,7 +1833,9 @@ async function loadFakeWorker() {
   }
   if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")) {
     if (typeof SystemJS !== "object") {
-      throw new Error("SystemJS must be used to load fake worker.");
+      // Manually load SystemJS, since it's only necessary for fake workers.
+      await loadScript("../node_modules/systemjs/dist/system.js");
+      await loadScript("../systemjs.config.js");
     }
     window.pdfjsWorker = await SystemJS.import("pdfjs/core/worker.js");
     return undefined;

web/viewer.html

@@ -45,8 +45,18 @@ See https://github.com/adobe-type-tools/cmap-resources
 <!--#endif-->
 
 <!--#if !PRODUCTION-->
-    <script src="../node_modules/systemjs/dist/system.js"></script>
+    <script defer src="../node_modules/es-module-shims/dist/es-module-shims.js"></script>
-    <script src="../systemjs.config.js"></script>
+    <script type="importmap-shim">
+      {
+        "imports": {
+          "pdfjs/": "../src/",
+          "pdfjs-lib": "../src/pdf.js",
+          "pdfjs-web/": "./"
+        }
+      }
+    </script>
+
+    <script src="viewer.js" type="module-shim"></script>
 <!--#endif-->
 
 <!--#if (GENERIC && !MINIFIED) -->
@@ -54,7 +64,7 @@ See https://github.com/adobe-type-tools/cmap-resources
 <!--#endif-->
 
 <!--#if !MINIFIED -->
-    <script src="viewer.js"></script>
+<!--<script src="viewer.js"></script>-->
 <!--#else-->
 <!--#include viewer-snippet-minified.html-->
 <!--#endif-->

web/viewer.js

@@ -189,11 +189,11 @@ function webViewerLoad() {
   const config = getViewerConfiguration();
   if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")) {
     Promise.all([
-      SystemJS.import("pdfjs-web/app.js"),
+      import("pdfjs-web/app.js"),
-      SystemJS.import("pdfjs-web/app_options.js"),
+      import("pdfjs-web/app_options.js"),
-      SystemJS.import("pdfjs-web/genericcom.js"),
+      import("pdfjs-web/genericcom.js"),
-      SystemJS.import("pdfjs-web/pdf_print_service.js"),
+      import("pdfjs-web/pdf_print_service.js"),
-    ]).then(function ([app, appOptions, ...otherModules]) {
+    ]).then(function ([app, appOptions, genericCom, pdfPrintService]) {
       window.PDFViewerApplication = app.PDFViewerApplication;
       window.PDFViewerApplicationOptions = appOptions.AppOptions;
       app.PDFViewerApplication.run(config);