Add an ESM build for consumers that bundle BookReader themselves

.gitignore

@@ -1,4 +1,5 @@
 /BookReader/
+/dist/
 /BookReaderDev/
 node_modules/
 .DS_Store

BookReaderDemo/demo-advanced.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
     <script type="text/javascript" src="../BookReader/plugins/plugin.url.js"></script>
 
     <!-- Custom CSS overrides -->

BookReaderDemo/demo-embed-iframe-src.html

@@ -12,7 +12,7 @@
     <script src="../BookReader/jquery-3.js"></script>
 
 
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- Plugins -->
     <script src="../BookReader/plugins/plugin.iframe.js"></script>

BookReaderDemo/demo-fullscreen-mobile.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- URL-changing plugin -->
     <script src="../BookReader/plugins/plugin.url.js"></script>

BookReaderDemo/demo-fullscreen.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- URL-changing plugin -->
     <script src="../BookReader/plugins/plugin.url.js"></script>

BookReaderDemo/demo-iiif.html

@@ -17,11 +17,10 @@
 
     <!-- BookReader -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
     <script src="../BookReader/plugins/plugin.iiif.js"></script>
     <script src="../BookReader/plugins/plugin.url.js"></script>
 
-    <script type="module" src="../BookReader/ia-bookreader-bundle.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css"/>

BookReaderDemo/demo-internetarchive.html

@@ -17,7 +17,7 @@
     <script src="/BookReader/jquery-3.js"></script>
 
     <!-- Bookreader -->
-    <script src="/BookReader/BookReader.js"></script>
+    <script src="/BookReader/ia-bookreader.js"></script>
     <link rel="stylesheet" href="/BookReader/BookReader.css"/>
 
     <!-- plugins needed for archive.org, in same order as archive.org -->
@@ -31,7 +31,6 @@
     <script src="/BookReader/plugins/plugin.text_selection.js"></script>
     <script src="/BookReader/plugins/plugin.experiments.js"></script>
 
-    <script type="module" src="/BookReader/ia-bookreader-bundle.js"></script>
 
     <link rel="stylesheet" href="/BookReaderDemo/BookReaderDemo.css"/>
 

BookReaderDemo/demo-multiple.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css"/>

BookReaderDemo/demo-preview-pages.html

@@ -14,7 +14,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css" />
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css" />

BookReaderDemo/demo-simple.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css"/>

BookReaderDemo/demo-vendor-fullscreen.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- URL-changing plugin -->
     <script src="../BookReader/plugins/plugin.url.js"></script>

BookReaderDemo/immersion-1up.html

@@ -10,7 +10,7 @@
 
 
     <!-- Bookreader -->
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
 
     <!-- plugins needed for archive.org, in same order as archive.org -->

BookReaderDemo/immersion-mode.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- URL-changing plugin -->
     <script src="../BookReader/plugins/plugin.url.js"></script>

BookReaderDemo/toggle_controls.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css"/>

BookReaderDemo/view_mode.html

@@ -13,7 +13,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css"/>

BookReaderDemo/viewmode-cycle.html

@@ -12,7 +12,7 @@
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
-    <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/ia-bookreader.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css"/>

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "files": [
     "BookReader/",
+    "dist/",
     "src/",
     "jsconfig.json"
   ],
@@ -15,7 +16,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "src/ia-bookreader/ia-bookreader.js",
+  "module": "dist/esm/ia-bookreader.js",
+  "exports": {
+    ".": "./dist/esm/ia-bookreader.js",
+    "./esm/*": "./dist/esm/*",
+    "./*": "./*"
+  },
   "keywords": [
     "online",
     "bookreader",
@@ -125,7 +131,7 @@
     "build-js:watch": "npx webpack --mode=development --watch",
     "build-css": "npx sass --silence-deprecation=import --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
     "build-css:watch": "npx sass --silence-deprecation=import --watch --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
-    "clean": "rm -r BookReader/ || true",
+    "clean": "rm -rf BookReader/ dist/",
     "lint": "npx eslint src/ tests/ *.js *.cjs",
     "lint:fix": "npx eslint --fix src/ tests/ *.js *.cjs",
     "serve": "npx http-server . --port=8000",

src/ia-bookreader/ia-bookreader.js

@@ -7,6 +7,8 @@
 
 import { LitElement, html, css } from 'lit';
 
+// Loads the BookReader core (defines window.BookReader), so this is the one entrypoint
+import '../BookReader.js';
 import '@internetarchive/ia-item-navigator';
 import '@internetarchive/modal-manager';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
@@ -229,7 +231,7 @@
   /** Creates modal DOM & attaches to `<body>` */
   setModalManager() {
     /** @type {ModalManager} */
     let modalManager = document.querySelector('modal-manager');
     if (!modalManager) {
       modalManager = /** @type {ModalManager} */(document.createElement('modal-manager'));
       document.body.appendChild(modalManager);

webpack.config.js

@@ -2,16 +2,20 @@
 import path from 'path';
 import webpack from 'webpack';
 import { fileURLToPath } from 'url';
+import PACKAGE_JSON from './package.json' with { type: 'json' };
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// The ESM build needs ES modules and import() (for chunks) anyway.
+const ESM_TARGETS = 'supports es6-module-dynamic-import';
+
 /** @type {webpack.Configuration} */
 const shared = {
   mode: 'production',
 
   watchOptions: {
-    ignored: ['BookReader/**', 'node_modules/**', 'tests/**'],
+    ignored: ['BookReader/**', 'dist/**', 'node_modules/**', 'tests/**'],
   },
 
   target: ['web', 'es5'],
@@ -42,6 +46,27 @@ const shared = {
   },
 };
 
+/** Output file -> srcfile, for the classic and ESM builds */
+const bookreaderEntries = {
+  // BookReader (core + <ia-bookreader> shell)
+  'ia-bookreader.js': './src/ia-bookreader/ia-bookreader.js',
+
+  // Plugins (sorted!)
+  'plugins/plugin.archive_analytics.js': { import: './src/plugins/plugin.archive_analytics.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.autoplay.js': { import: './src/plugins/plugin.autoplay.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.chapters.js': { import: './src/plugins/plugin.chapters.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.experiments.js': { import: './src/plugins/plugin.experiments.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.iframe.js': { import: './src/plugins/plugin.iframe.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.iiif.js': { import: './src/plugins/plugin.iiif.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.resume.js': { import: './src/plugins/plugin.resume.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.search.js': { import: './src/plugins/search/plugin.search.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.text_selection.js': { import: './src/plugins/plugin.text_selection.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.translate.js': { import: './src/plugins/translate/plugin.translate.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.tts.js': { import: './src/plugins/tts/plugin.tts.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.url.js': { import: './src/plugins/url/plugin.url.js', dependOn: 'ia-bookreader.js' },
+  'plugins/plugin.vendor-fullscreen.js': { import: './src/plugins/plugin.vendor-fullscreen.js', dependOn: 'ia-bookreader.js' },
+};
+
 /** @type {webpack.Configuration[]} */
 export default [
   {
@@ -52,25 +77,8 @@ export default [
       // Polyfill bundles
       'webcomponents-bundle.js': { import: '@webcomponents/webcomponentsjs/webcomponents-bundle.js' },
 
-      // BookReader
-      'BookReader.js': './src/BookReader.js',
-
-      // Plugins (sorted!)
-      'plugins/plugin.archive_analytics.js': { import: './src/plugins/plugin.archive_analytics.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.autoplay.js': { import: './src/plugins/plugin.autoplay.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.chapters.js': { import: './src/plugins/plugin.chapters.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.experiments.js': { import: './src/plugins/plugin.experiments.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.iframe.js': { import: './src/plugins/plugin.iframe.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.iiif.js': { import: './src/plugins/plugin.iiif.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.resume.js': { import: './src/plugins/plugin.resume.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.search.js': { import: './src/plugins/search/plugin.search.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.text_selection.js': { import: './src/plugins/plugin.text_selection.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.translate.js': { import: './src/plugins/translate/plugin.translate.js', dependOn: 'BookReader.js' },
+      ...bookreaderEntries,
       'plugins/translator-worker.js': { import: '@internetarchive/bergamot-translator/worker/translator-worker.js' },
-      'plugins/plugin.tts.js': { import: './src/plugins/tts/plugin.tts.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.url.js': { import: './src/plugins/url/plugin.url.js', dependOn: 'BookReader.js' },
-      'plugins/plugin.vendor-fullscreen.js': { import: './src/plugins/plugin.vendor-fullscreen.js', dependOn: 'BookReader.js' },
-      'ia-bookreader-bundle.js': { import: './src/ia-bookreader/ia-bookreader.js', dependOn: 'BookReader.js' },
     },
 
     externals: {
@@ -98,6 +106,72 @@ export default [
     devtool: 'source-map',
   },
 
+  // ESM build of the same entries, for consumers that bundle BookReader
+  // themselves (e.g. with Vite) rather than loading it via <script> tags.
+  {
+    ...shared,
+    name: 'esm',
+
+    target: `browserslist:${ESM_TARGETS}`,
+
+    module: {
+      rules: [
+        {
+          ...shared.module.rules[0],
+          options: {
+            presets: [
+              ['@babel/preset-env', {
+                targets: ESM_TARGETS,
+                useBuiltIns: 'usage',
+                corejs: 3,
+              }],
+            ],
+          },
+        },
+        shared.module.rules[1],
+      ],
+    },
+
+    entry: bookreaderEntries,
+
+    // Dependencies stay bare imports so the consumer can dedupe them; e.g. a
+    // second copy of a web component throws re-registering its element name.
+    externals: [
+      { jquery: 'var jQuery' },
+      ({ request }, callback) => {
+        const pkg = request?.match(/^(@[^/]+\/)?[^/.][^/]*/)?.[0];
+        // lit is bundled: our 2018-09 decorators need lit 2's decorators, and
+        // the consumer may be on lit 3.
+        if (pkg && pkg in PACKAGE_JSON.dependencies && pkg !== 'lit') {
+          return callback(null, `module ${request}`);
+        }
+        callback();
+      },
+    ],
+    plugins: [
+      new webpack.ProvidePlugin({
+        $: 'jquery',
+        jQuery: 'jquery',
+      }),
+    ],
+
+    experiments: {
+      outputModule: true,
+    },
+
+    output: {
+      module: true,
+      library: { type: 'module' },
+      chunkFormat: 'module',
+      chunkLoading: 'import',
+      filename: '[name]',
+      chunkFilename: 'chunks/[id].js',
+      path: path.resolve(__dirname, 'dist/esm'),
+    },
+
+    devtool: 'source-map',
+  },
+
   // jQuery gets its own build, so that it can be used as an "external" in
   // everything else.
   {