@internetarchive/bookreader 5.0.0-35 → 5.0.0-38

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# 5.0.0-38
+Dev: Add Renovate Bot @cdrini
+Dev: Update node-fetch @cdrini
+Fix: Search request promise err & fix tests @cdrini
+Dev: Split node workflow into different jobs @cdrini
+Dev: Give cache steps better names in GHA @cdrini
+Dev: Update concurrently + Small speedup to build & test @cdrini
+Dev: Renovate - Auto-update dev dependencies for minor/patch @cdrini
+Fix: Better MS Edge voice selection @cdrini
+Dev: Allow small drops in codecov coverage (< 0.5%) @cdrini
+Dev: Renovate - add `^@internetarchive/icon-` @cdrini
+
+# 5.0.0-37
+Fix: Update all `.then()` to async/await @sancodes
+Fix: Upgrade to Lit 2 @Aadilhassan
+Dev: Update to Node v16.x @duggiefresh
+Dev: Remove unused demo bundle @cdrini
+Dev: Fix README broken link for plugin directory @duggiefresh
+Dev: Update sharing options menu to lit2 @iisa
+Dev: Remove package publishing from GHA @cdrini
+
+# 5.0.0-36
+Fix: Readaloud scrolls along with dext @cdrini
+Dev: ES6 var to let/const updates @sancodes
+Dev: ES6 async/await updates @sancodes
+Dev: Re-enable testcafe tests in GH action @iisa
+Fix: Search results bar clears and closes properly @iisa
+
 # 5.0.0-35
 Fix: global syle leak specify colorbox styles @iisa
 Fix: br menu reinits with shared ro load @iisa

package/README.md

@@ -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
 

package/codecov.yml

@@ -1,6 +1,12 @@
 codecov:
   notify:
     require_ci_to_pass: yes
+  status:
+    project:
+      default:
+        # Allow small drops in coverage
+        threshold: 0.005  # .5 %
+        if_not_found: failure
 
 coverage:
   precision: 2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-35",
+  "version": "5.0.0-38",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -26,13 +26,11 @@
   "private": false,
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.1",
-    "@internetarchive/ia-item-navigator": "0.0.5",
-    "@internetarchive/ia-menu-slider": "^1.1.1",
-    "@internetarchive/ia-sharing-options": "^0.1.4",
+    "@internetarchive/ia-item-navigator": "^1.0.0",
+    "@internetarchive/ia-sharing-options": "^1.0.1",
     "@internetarchive/icon-bookmark": "^1.1.3",
-    "@internetarchive/icon-collapse-sidebar": "^1.1.0",
     "@internetarchive/icon-dl": "^1.1.3",
-    "@internetarchive/icon-edit-pencil": "1.1.5",
+    "@internetarchive/icon-edit-pencil": "1.3.2",
     "@internetarchive/icon-magnify-minus": "^1.2.3",
     "@internetarchive/icon-magnify-plus": "^1.2.3",
     "@internetarchive/icon-search": "^1.2.3",
@@ -40,29 +38,28 @@
     "@internetarchive/icon-visual-adjustment": "^1.1.3",
     "@internetarchive/modal-manager": "^0.1.0",
     "@internetarchive/shared-resize-observer": "^0.0.1",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0"
+    "lit": "^2.1.3"
   },
   "devDependencies": {
-    "@babel/core": "7.15.0",
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
-    "@babel/preset-env": "7.15.0",
-    "@open-wc/testing": "^2.5.33",
+    "@babel/core": "7.17.5",
+    "@babel/eslint-parser": "7.17.0",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/plugin-proposal-decorators": "7.17.2",
+    "@babel/preset-env": "7.16.11",
+    "@open-wc/testing": "^3.0.4",
     "@open-wc/testing-karma": "^4.0.9",
     "@types/jest": "^27.4.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "babel-loader": "8.2.2",
+    "babel-loader": "8.2.3",
     "codecov": "^3.8.3",
-    "concurrently": "6.0.2",
+    "concurrently": "7.0.0",
     "core-js": "3.16.2",
     "cpx2": "3.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "^0.2.1",
     "hammerjs": "^2.0.8",
-    "http-server": "0.12.3",
+    "http-server": "14.1.0",
     "iso-language-codes": "1.1.0",
     "jest": "^27.4.7",
     "jquery": "1.11.3",
@@ -73,7 +70,7 @@
     "jquery.mmenu": "5.6.5",
     "karma-coverage": "^2.1.0",
     "live-server": "1.2.1",
-    "node-fetch": "2.6.1",
+    "node-fetch": "2.6.7",
     "regenerator-runtime": "0.13.9",
     "sass": "1.38.2",
     "sinon": "^12.0.1",
@@ -87,7 +84,7 @@
   "jest": {
     "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
-      "node_modules/(?!(lit-html|lit-element|lit)/)"
+      "node_modules/(?!(lit-html|lit-element|lit|@lit|@internetarchive)/)"
     ],
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/$1"
@@ -105,7 +102,7 @@
     "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",
     "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-js": "npx webpack",
@@ -118,7 +115,7 @@
     "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": "npx concurrently --group npm:test-jest npm:test-karma",
     "test:e2e": "npm run build && npx testcafe",
     "test:e2e:dev": "npx testcafe --live --dev",
     "test-jest:watch": "npx jest --watch",

package/renovate.json

@@ -0,0 +1,43 @@
+{
+  "extends": [
+    "config:base"
+  ],
+  "packageRules": [
+    {
+      "matchPackageNames": [
+        "@babel/eslint-parser",
+        "@open-wc/testing",
+        "@open-wc/testing-karma",
+        "@types/jest",
+        "codecov",
+        "eslint",
+        "eslint-plugin-no-jquery",
+        "eslint-plugin-testcafe",
+        "jest",
+        "karma-coverage",
+        "sinon",
+        "testcafe"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackageNames": [
+        "concurrently",
+        "http-server",
+        "live-server",
+        "node-fetch"
+      ],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["^@internetarchive/icon-"],
+      "groupName": "@internetarchive icons",
+      "rangeStrategy": "bump"
+    },
+    {
+      "matchPackagePatterns": ["^@internetarchive"],
+      "rangeStrategy": "bump"
+    }
+  ]
+}

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 {

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

@@ -1,4 +1,4 @@
-import { svg } from 'lit-element';
+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">

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==`;

package/src/BookNavigator/assets/icon_sort_asc.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default html`
 <svg name="sort-asc" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill="#fff" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill="#fff" fill-rule="nonzero"/><path d="m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.661538" transform="matrix(1 0 0 -1 0 18.692308)"/></g></svg>

package/src/BookNavigator/assets/icon_sort_desc.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default html`
 <svg name="sort-desc" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill="#fff" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill="#fff" fill-rule="nonzero"/><path d="m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.661538"/></g></svg>

package/src/BookNavigator/assets/icon_sort_neutral.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default html`
 <svg name="sort-neutral" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill-rule="nonzero"/><circle cx="13" cy="9" r="2"/></g></svg>

package/src/BookNavigator/assets/icon_volumes.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default html`
   <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="volumesTitleID volumesDescID">

package/src/BookNavigator/book-navigator.js

@@ -2,8 +2,7 @@
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 // eslint-disable-next-line no-unused-vars
 import { ModalManager } from '@internetarchive/modal-manager';
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
+import { css, html, LitElement, nothing } from 'lit';
 import SearchProvider from './search/search-provider.js';
 import DownloadProvider from './downloads/downloads-provider.js';
 import VisualAdjustmentProvider from './visual-adjustments/visual-adjustments-provider.js';
@@ -185,13 +184,19 @@ export class BookNavigator extends LitElement {
             /* refresh br instance reference */
             this.bookreader = brInstance;
           }
+
+          this.updateMenuContents();
+
+          if (searchUpdates.openMenu === false) {
+            return;
+          }
+
           if (this.isWideEnoughToOpenMenu && !searchUpdates?.searchCanceled) {
             /* open side search menu */
             setTimeout(() => {
               this.updateSideMenu('search', 'open');
             }, 0);
           }
-          this.updateMenuContents();
         },
       });
     }

package/src/BookNavigator/bookmarks/bookmark-button.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 export default class BookmarkButton extends LitElement {
   static get styles() {

package/src/BookNavigator/bookmarks/bookmark-edit.js

@@ -1,6 +1,5 @@
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat.js';
-import { css, html, LitElement } from 'lit-element';
+import { repeat } from 'lit/directives/repeat.js';
+import { css, html, LitElement, nothing } from 'lit';
 import bookmarkColorsCSS from '../assets/bookmark-colors.js';
 import buttonCSS from '../assets/button-base.js';
 

package/src/BookNavigator/bookmarks/bookmarks-list.js

@@ -1,6 +1,5 @@
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat.js';
-import { css, html, LitElement } from 'lit-element';
+import { repeat } from 'lit/directives/repeat.js';
+import { css, html, LitElement, nothing } from 'lit';
 import './bookmark-edit.js';
 import '@internetarchive/icon-edit-pencil/icon-edit-pencil.js';
 import bookmarkColorsCSS from '../assets/bookmark-colors.js';

package/src/BookNavigator/bookmarks/bookmarks-loginCTA.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
 import buttonStyles from '../assets/button-base.js';
 
 class BookmarksLogin extends LitElement {

package/src/BookNavigator/bookmarks/bookmarks-provider.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '../delete-modal-actions.js';
 import './bookmark-button.js';
 import './ia-bookmarks.js';

package/src/BookNavigator/bookmarks/ia-bookmarks.js

@@ -1,5 +1,4 @@
-import { render } from 'lit-html';
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, render } from 'lit';
 // eslint-disable-next-line no-unused-vars
 import { ModalConfig, ModalManager } from '@internetarchive/modal-manager';
 import buttonStyles from '../assets/button-base.js';
@@ -152,14 +151,12 @@ class IABookmarks extends LitElement {
     }
   }
 
-  fetchUserBookmarks() {
+  async fetchUserBookmarks() {
     if (!this.api.identifier) {
       return;
     }
-    this.fetchBookmarks()
-      .then(() => {
-        this.initializeBookmarks();
-      });
+    await this.fetchBookmarks();
+    this.initializeBookmarks();
   }
 
   setBREventListeners() {
@@ -229,36 +226,35 @@ class IABookmarks extends LitElement {
     return bookmark;
   }
 
-  fetchBookmarks() {
-    return this.api.getAll().then(res => res.text()).then((res) => {
-      let response;
-      try {
-        response = JSON.parse(res);
-      } catch (e) {
-        response = { error: e.message };
-      }
-      return response;
-    }).then((response) => {
-      const {
-        success,
-        error = 'Something happened while fetching bookmarks.',
-        value: bkmrks = [],
-      } = response;
-      if (!success) {
-        console?.warn('Error fetching bookmarks', error);
-      }
+  async fetchBookmarks() {
+    const resText = await this.api.getAll().then(r=> r.text());
+    let parsedResponse;
+    try {
+      parsedResponse = JSON.parse(resText);
+    } catch (e) {
+      parsedResponse = {error : e.message};
+    }
 
-      const bookmarks = {};
-      Object.keys(bkmrks).forEach((leafNum) => {
-        const bookmark = bkmrks[leafNum];
-        const formattedLeafNum = parseInt(leafNum, 10);
-        const formattedBookmark = this.formatBookmark({ ...bookmark, leafNum: formattedLeafNum });
-        bookmarks[leafNum] = formattedBookmark;
-      });
+    const {
+      success,
+      error = 'Something happened while fetching bookmarks.',
+      value: bkmrks = [],
+    } = parsedResponse;
+
+    if (!success) {
+      console?.warn('Error fetching bookmarks', error);
+    }
 
-      this.bookmarks = bookmarks;
-      return bookmarks;
+    const bookmarks = {};
+    Object.keys(bkmrks).forEach((leafNum) => {
+      const bookmark = bkmrks[leafNum];
+      const formattedLeafNum = parseInt(leafNum, 10);
+      const formattedBookmark = this.formatBookmark({ ...bookmark, leafNum: formattedLeafNum });
+      bookmarks[leafNum] = formattedBookmark;
     });
+
+    this.bookmarks = bookmarks;
+    return bookmarks;
   }
 
   emitBookmarksChanged() {

package/src/BookNavigator/delete-modal-actions.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 export default class DeleteModalActions extends LitElement {
   static get styles() {

package/src/BookNavigator/downloads/downloads-provider.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '@internetarchive/icon-dl/icon-dl';
 import './downloads';
 

package/src/BookNavigator/downloads/downloads.js

@@ -1,5 +1,4 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
+import { css, html, LitElement, nothing } from 'lit';
 import buttonStyles from '../assets/button-base.js';
 export class IABookDownloads extends LitElement {
   static get properties() {

package/src/BookNavigator/search/a-search-result.js

@@ -1,6 +1,5 @@
-import { nothing } from 'lit-html';
-import { html, LitElement } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html, LitElement, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export class BookSearchResult extends LitElement {
   static get properties() {

package/src/BookNavigator/search/search-provider.js

@@ -1,5 +1,4 @@
-import { html } from 'lit-element';
-import { nothing } from 'lit-html';
+import { html, nothing } from 'lit';
 import '@internetarchive/icon-search/icon-search';
 import './search-results';
 
@@ -144,8 +143,8 @@ export default class SearchProvider {
       queryInProgress: false,
       errorMessage: '',
     };
-    this.updateMenu();
-    this.bookreader?.searchView?.clearSearchFieldAndResults();
+    this.updateMenu({ openMenu: false });
+    this.bookreader?.searchView?.clearSearchFieldAndResults(false);
   }
 
   /**

package/src/BookNavigator/search/search-results.js

@@ -1,6 +1,5 @@
 /* eslint-disable class-methods-use-this */
-import { nothing } from 'lit-html';
-import { css, html, LitElement } from 'lit-element';
+import { css, html, LitElement, nothing } from 'lit';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import './a-search-result.js';
 import checkmarkIcon from '../assets/icon_checkmark.js';

package/src/BookNavigator/sharing.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '@internetarchive/icon-share/icon-share';
 import '@internetarchive/ia-sharing-options';
 

package/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment';
 import './visual-adjustments';
 

package/src/BookNavigator/visual-adjustments/visual-adjustments.js

@@ -1,6 +1,6 @@
-import { css, html, LitElement } from "lit-element";
-import { repeat } from "lit-html/directives/repeat.js";
-import { nothing } from "lit-html";
+import { css, html, LitElement } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { nothing } from "lit";
 import checkmarkIcon from '../assets/icon_checkmark.js';
 import "@internetarchive/icon-magnify-minus/icon-magnify-minus";
 import "@internetarchive/icon-magnify-plus/icon-magnify-plus";

package/src/BookNavigator/volumes/volumes-provider.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 import sortDescIcon from '../assets/icon_sort_desc.js';
 import sortAscIcon from '../assets/icon_sort_asc.js';

package/src/BookNavigator/volumes/volumes.js

@@ -1,6 +1,5 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat';
+import { css, html, LitElement, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 
 export class Volumes extends LitElement {
   static get properties() {

package/src/BookReader/Mode1Up.js

@@ -46,7 +46,8 @@ export class Mode1Up {
       if (!this.everShown) {
         this.mode1UpLit.initFirstRender(startLeaf);
         this.everShown = true;
-        await this.mode1UpLit.requestUpdate();
+        this.mode1UpLit.requestUpdate();
+        await this.mode1UpLit.updateComplete;
         new DragScrollable(this.mode1UpLit, {
           preventDefault: true,
           dragSelector: '.br-mode-1up__visible-world',

package/src/BookReader/Mode1UpLit.js

@@ -1,6 +1,7 @@
 // @ts-check
-import { customElement, html, LitElement, property, query } from 'lit-element';
-import { styleMap } from 'lit-html/directives/style-map';
+import { customElement, property, query } from 'lit/decorators.js';
+import {LitElement, html} from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
 import { ModeSmoothZoom } from './ModeSmoothZoom';
 import { arrChanged, calcScreenDPI, genToArray, sum, throttle } from './utils';
 import { HTMLDimensionsCacher } from "./utils/HTMLDimensionsCacher";