@internetarchive/bookreader 5.0.0-10-alpha-1 → 5.0.0-100

package/README.md

@@ -2,7 +2,7 @@
 
 ![Build Status](https://github.com/internetarchive/bookreader/actions/workflows/node.js.yml/badge.svg?branch=master) [![codecov](https://codecov.io/gh/internetarchive/bookreader/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/bookreader)
 
-**Disclaimer: BookReader v5 is currently in beta. It's stable enough for production use (and is what is being used on archive.org), but there will be some breaking changes in the next ~month or so to public BookReader APIs.**
+**Disclaimer: BookReader v5 is currently in beta. It is stable enough for production use and is actively deployed on archive.org. Future updates while in v5 beta may introduce breaking changes to public BookReader APIs, although these will be noted in the CHANGELOG.**
 
 
 <p align="center">
@@ -123,7 +123,7 @@ A peek in how to use/extend core functionality:
     - plugin.url.js - automatically updates the browser url
     - plugin.resume.js - uses cookies to remember the current page
     - plugin.vendor-fullscreen.js - replaces fullscreen mode with vendor native fullscreen
-    - see plugin directory for current plugin files ()[https://github.com/internetarchive/bookreader/tree/master/src/plugins]
+    - see [plugin directory for current plugin files](https://github.com/internetarchive/bookreader/tree/master/src/plugins)
 
 ### Embedding BookReader in an iFrame
 
@@ -147,7 +147,18 @@ The Fragment Change message is sent to the parent window when the embedded BookR
 
 The source JavaScript is written in ES6 (located in the `src/js` directory) and in ES5 (located in `BookReader`). `npm run serve-dev` starts an auto-reloading dev server, that builds js/css that has been edited at `localhost:8000`.
 
-Until the next major version bump, we have to store the build files inside the repo to maintain backwards compatibility. Please _DO NOT_ include these files in your PR. Anything in the `BookReader/` directory should not be committed.
+### Developing icons
+To see local icon package changes in bookreader, you'll need to install core-js into the icon package and link into bookreader.
+
+Let's use `icon-share` as an example.
+1.  Confirm your icon package is working properly in the iaux-icons demo
+2.  Navigate to your icon package (`iaux-icons/packages/icon-share`) and run command: `npm install core-js`
+    -  You shouldn't need to commit any of these core-js changes
+3.  From within your icon package directory run command: `npm link`
+    -  You can use the command `npm ls -g` to confirm your local package now appears in the registry
+4.  Navigate to `/bookreader` and run command: `npm link @internetarchive/icon-share`
+    -  You can use the command `npm ls |grep icon-share` to confirm icon-share is now a link to your local directory
+5. You may now start a local server to see your changes by running command: `npm run serve-dev`
 
 ## Releases
 

package/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "src/**/*.js",
+    "tests/**/*.js",
+  ],
+  "exclude": [
+    "node_modules",
+    "BookReader"
+  ]
+}

package/package.json

@@ -1,7 +1,13 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-10-alpha-1",
+  "version": "5.0.0-100",
   "description": "The Internet Archive BookReader.",
+  "type": "module",
+  "files": [
+    "BookReader/",
+    "src/",
+    "jsconfig.json"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/internetarchive/bookreader.git"
@@ -9,7 +15,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "src/BookNavigator/BookNavigator.js",
+  "module": "src/ia-bookreader/ia-bookreader.js",
   "keywords": [
     "online",
     "bookreader",
@@ -25,92 +31,106 @@
   "homepage": "https://github.com/internetarchive/bookreader#readme",
   "private": false,
   "dependencies": {
-    "@internetarchive/ia-activity-indicator": "^0.0.1",
-    "@internetarchive/ia-icons": "^1.2.2",
-    "@internetarchive/ia-menu-slider": "^1.0.0",
-    "@internetarchive/ia-sharing-options": "^0.1.2",
-    "@internetarchive/icon-bookmark": "^1.1.3",
-    "@internetarchive/icon-collapse-sidebar": "^1.1.0",
-    "@internetarchive/icon-edit-pencil": "1.1.5",
-    "@internetarchive/icon-magnify-minus": "^1.2.3",
-    "@internetarchive/icon-magnify-plus": "^1.2.3",
-    "@internetarchive/icon-search": "^1.2.3",
-    "@internetarchive/modal-manager": "^0.1.0",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0"
+    "@internetarchive/bergamot-translator": "^0.4.9-ia.1",
+    "@internetarchive/ia-activity-indicator": "^0.0.4",
+    "@internetarchive/ia-item-navigator": "^2.1.2",
+    "@internetarchive/icon-bookmark": "^1.3.4",
+    "@internetarchive/icon-dl": "^1.3.4",
+    "@internetarchive/icon-edit-pencil": "^1.3.4",
+    "@internetarchive/icon-magnify-minus": "^1.3.4",
+    "@internetarchive/icon-magnify-plus": "^1.3.4",
+    "@internetarchive/icon-search": "^1.3.4",
+    "@internetarchive/icon-toc": "^1.3.4",
+    "@internetarchive/icon-visual-adjustment": "^1.3.4",
+    "@internetarchive/modal-manager": "^0.2.12",
+    "@internetarchive/shared-resize-observer": "^0.2.0",
+    "lit": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.13.16",
-    "@babel/preset-env": "7.13.15",
-    "@open-wc/testing": "^2.5.33",
-    "@open-wc/testing-karma": "^4.0.9",
-    "@types/jest": "26.0.23",
-    "babel-loader": "8.2.2",
-    "codecov": "3.8.1",
-    "concurrently": "6.0.2",
-    "core-js": "3.11.0",
-    "cpx2": "3.0.0",
-    "eslint": "7.25.0",
-    "eslint-plugin-testcafe": "0.2.1",
-    "http-server": "0.12.3",
-    "iso-language-codes": "1.0.8",
-    "jest": "26.6.3",
-    "jquery": "1.11.3",
+    "@babel/core": "7.25.8",
+    "@babel/eslint-parser": "7.25.7",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-decorators": "7.25.7",
+    "@babel/preset-env": "7.25.8",
+    "@iiif/presentation-2": "^1.0.4",
+    "@iiif/presentation-3": "^2.1.3",
+    "@open-wc/testing-helpers": "3.0.1",
+    "@types/jest": "29.5.14",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "babel-loader": "9.2.1",
+    "concurrently": "9.0.1",
+    "core-js": "3.38.1",
+    "cpx2": "8.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-no-jquery": "^2.7.0",
+    "eslint-plugin-testcafe": "^0.2.1",
+    "http-server": "14.1.1",
+    "hypothesis": "^1.1627.0",
+    "interactjs": "^1.10.18",
+    "iso-language-codes": "2.0.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jquery": "3.6.1",
     "jquery-colorbox": "1.6.4",
     "jquery-ui": "1.12.1",
     "jquery-ui-touch-punch": "0.2.3",
     "jquery.browser": "0.1.0",
-    "jquery.mmenu": "5.6.5",
-    "karma-coverage": "^2.0.3",
-    "live-server": "1.2.1",
-    "node-fetch": "2.6.1",
-    "regenerator-runtime": "0.13.7",
-    "sass": "1.32.11",
-    "sinon": "10.0.0",
+    "live-server": "1.2.2",
+    "regenerator-runtime": "0.14.1",
+    "sass": "1.79.5",
+    "sinon": "19.0.2",
     "soundmanager2": "2.97.20170602",
-    "svgo": "2.3.0",
-    "testcafe": "1.14.0",
-    "webpack": "5.35.0",
-    "webpack-cli": "4.6.0"
+    "svgo": "3.3.2",
+    "testcafe": "3.6.2",
+    "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
+    "webpack": "5.95.0",
+    "webpack-cli": "5.1.4"
   },
   "jest": {
+    "testEnvironment": "jsdom",
+    "transformIgnorePatterns": [
+      "node_modules/(?!(sinon|lit-html|lit-element|lit|@lit|@internetarchive|@open-wc)/)"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/$1"
+    },
     "setupFiles": [
-      "./src/jquery-wrapper.js"
+      "./src/jquery-wrapper.js",
+      "./tests/jest/setup.js"
     ],
     "roots": [
       "<rootDir>/src/",
-      "<rootDir>/tests/"
-    ],
-    "testPathIgnorePatterns": [
-      "<rootDir>/tests/e2e/",
-      "<rootDir>/tests/karma/"
-    ],
-    "coverageDirectory": "<rootDir>/coverage-jest"
+      "<rootDir>/tests/jest/"
+    ]
   },
   "scripts": {
     "preversion": "npm run test && node scripts/preversion.js",
     "version": "node scripts/version.js",
     "postversion": "node scripts/postversion.js",
-    "build": "npm run clean && npm run build-js && npm run build-css && npm run build-assets",
+    "build": "npm run clean && npx concurrently --group npm:build-js npm:build-css npm:build-assets npm:build-hypothesis npm:build-bergamot",
     "build-assets": "npx cpx \"src/assets/**/*\" BookReader && npx svgo -f BookReader/icons && npx svgo -f BookReader/images",
     "build-assets:watch": "npx cpx --watch --verbose \"src/assets/**/*\" BookReader",
+    "build-bergamot": "npx cpx \"node_modules/@internetarchive/bergamot-translator/worker/*\" BookReader/",
+    "build-bergamot:watch": "npx cpx --watch \"node_modules/@internetarchive/bergamot-translator/worker/*\" BookReader/",
+    "build-hypothesis": "npx cpx \"node_modules/hypothesis/**/*\" BookReader/hypothesis",
+    "build-hypothesis:watch": "npx cpx --watch --verbose \"node_modules/hypothesis/**/*\" BookReader/hypothesis",
     "build-js": "npx webpack",
     "build-js:watch": "npx webpack --mode=development --watch",
     "build-css": "npx sass --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
     "build-css:watch": "npx sass --watch --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
     "clean": "rm -r BookReader/ || true",
-    "lint": "npx eslint src/ tests/ *.js",
-    "lint:fix": "npx eslint --fix src/ tests/ *.js",
-    "serve": "npx http-server . --port 8000",
-    "serve-live": "npx live-server . --port 8000 --watch=index.html,BookReader,BookReaderDemo",
-    "serve-dev": "npm run build-css && npx concurrently --kill-others npm:serve-live npm:build-*:watch",
-    "test": "npm run test-jest && npm run test-karma",
-    "test:e2e": "npm run build && env BASE_URL=http://127.0.0.1:8000/BookReaderDemo/ npx testcafe",
-    "test:e2e:dev": "env BASE_URL=http://127.0.0.1:8000/BookReaderDemo/ npx testcafe --live --dev",
-    "test-jest:watch": "npx jest --watch",
-    "test-jest": "npx jest --coverage --colors",
-    "test-karma": "npx karma start --coverage",
-    "test-karma:watch": "npx karma start --auto-watch=true --single-run=false",
-    "codecov": "npx codecov"
+    "lint": "npx eslint src/ tests/ *.js *.cjs",
+    "lint:fix": "npx eslint --fix src/ tests/ *.js *.cjs",
+    "serve": "npx http-server . --port=8000",
+    "serve-live": "npx live-server . --cors --port=8000 --watch=index.html,BookReader,BookReaderDemo",
+    "serve-dev": "env NODE_ENV='development' npm run build-css && env NODE_ENV='development' npx concurrently --kill-others npm:serve-live npm:build-*:watch",
+    "test": "npx jest --coverage --colors",
+    "test:watch": "npx jest --watch",
+    "test:e2e": "npm run build && npx testcafe",
+    "test:e2e:dev": "npx testcafe --live --dev",
+    "DOCS:update:test-deps": "If CI succeeds, these should be good to update",
+    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest eslint@7 eslint-plugin-testcafe@latest jest@latest sinon@latest testcafe@latest",
+    "DOCS:update:build-deps": "These can cause strange changes, so do an npm run build + check file size (git diff --stat), and check the site is as expected",
+    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest"
   }
 }

package/src/BookNavigator/assets/bookmark-colors.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   .blue {

package/src/BookNavigator/assets/button-base.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   .ia-button {
@@ -12,6 +12,7 @@ export default css`
     text-align: center;
     vertical-align: middle;
     font-size: 1.4rem;
+    font-family: inherit;
     display: inline-block;
     padding: .6rem 1.2rem;
     border: 1px solid transparent;

package/src/BookNavigator/assets/ia-logo.js

@@ -0,0 +1,17 @@
+import { svg } from 'lit';
+
+export default svg`
+  <svg class="ia-logo" width="27" height="30" viewBox="0 0 27 30" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logoTitleID logoDescID">
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">A line drawing of the Internet Archive headquarters building façade.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z" id="path-1"></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z" id="swatch"></path>
+      </g>
+    </g>
+  </svg>
+`;

package/src/BookNavigator/assets/icon_checkmark.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 // Original SVG object for reference
 // <svg height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m4.33333333 10-4.33333333-4.16666667 1.73333333-1.66666666 2.6 2.5 6.93333337-6.66666667 1.7333333 1.66666667z" fill="#fff" fill-rule="evenodd"/></svg>

package/src/BookNavigator/assets/icon_close.js

@@ -1,3 +1,3 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==`;