Dev improvements (#41)

.github/workflows/CI.yml

@@ -4,6 +4,7 @@ on:
     paths:
       - 'shared/**'
       - '.github/workflows/CI.yml'
+      - '.pnpm-lock.yaml'
 
 jobs:
   build:
@@ -15,18 +16,18 @@ jobs:
         working-directory: ./shared
     strategy:
       matrix:
-        node: ['14.x', '16.x']
+        node: ['20.x', '22.x']
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
 
       - name: Set up pnpm
-        uses: pnpm/action-setup@v2.2.2
+        uses: pnpm/action-setup@v4
 
       - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'

navigator-html-injectables/src/comms/comms.ts

@@ -25,7 +25,7 @@ export type CommsCallback = (data: unknown, ack: CommsAck) => void; // TODO: may
  */
 export class Comms {
     private readonly wnd: Window;
-    private destination: MessageEventSource | null = null;
+    private destination: Window | null = null;
     private registrar = new Map<CommsCommandKey, Registrant[]>();
     private origin: string = "";
     private channelId: string = "";
@@ -43,7 +43,7 @@ export class Comms {
         if(data.key === "_ping") {
             // The "ping" gives us a destination we bind to for posting events
             if(!this.destination) {
-                this.destination = event.source;
+                this.destination = event.source as Window;
                 this.origin = event.origin;
                 this.channelId = data._channel;
 
@@ -160,6 +160,7 @@ export class Comms {
         } catch (error) {
             // Fallback for when browser doesn't support WindowPostMessageOptions
             // For example, older Safari versions
+            if(transfer.length > 0) throw error;
             this.destination.postMessage(msg, this.origin, transfer);
         }
     }

navigator-html-injectables/src/modules/Decorator.ts

@@ -378,11 +378,10 @@ export class Decorator extends Module {
     static readonly moduleName: ModuleName = "decorator";
     private resizeObserver!: ResizeObserver;
     private wnd!: Window;
-    private comms!: Comms;
-    private readonly lastSize = {
+    /*private readonly lastSize = {
         width: 0,
         height: 0
-    };
+    };*/
     private resizeFrame = 0;
 
     private lastGroupId = 0;
@@ -406,7 +405,6 @@ export class Decorator extends Module {
 
     mount(wnd: Window, comms: Comms): boolean {
         this.wnd = wnd;
-        this.comms = comms;
 
         comms.register("decorate", Decorator.moduleName, (data, ack) => {
             const req = data as DecoratorRequest;

navigator-html-injectables/src/modules/ReflowablePeripherals.ts

@@ -61,7 +61,7 @@ export class ReflowablePeripherals extends Module {
     }
     private readonly onPointerMove = this.onPointMove.bind(this);
 
-    onPointDown(event: PointerEvent) {
+    onPointDown() {
         this.pointerMoved = false;
     }
     private readonly onPointerDown = this.onPointDown.bind(this);

navigator-html-injectables/src/modules/setup/FixedSetup.ts

@@ -1,7 +1,8 @@
 import { Comms } from "../../comms/comms";
-import { ReadiumWindow, Setup } from "./Setup";
+import { Setup } from "./Setup";
 import { removeProperty, setProperty } from "../../helpers/css";
 import { ModuleName } from "../ModuleLibrary";
+import { ReadiumWindow } from "../../helpers/dom";
 
 const FIXED_STYLE_ID = "readium-fixed-style";
 

navigator-html-injectables/src/modules/setup/ReflowableSetup.ts

@@ -1,6 +1,7 @@
 import { Comms } from "../../comms/comms";
-import { ReadiumWindow, Setup } from "./Setup";
+import { Setup } from "./Setup";
 import { removeProperty, setProperty } from "../../helpers/css";
+import { ReadiumWindow } from "../../helpers/dom";
 
 const VIEWPORT_META_TAG_ID = "readium-viewport";
 

navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts

@@ -164,7 +164,7 @@ export class ColumnSnapper extends Snapper {
     }
     private readonly onTouchStarter = this.onTouchStart.bind(this);
 
-    onTouchEnd(e: TouchEvent) {
+    onTouchEnd(_: TouchEvent) {
         if(this.touchState === ScrollTouchState.MOVE) {
             // Get the horizontal drag distance
             const dragOffset = this.dragOffset();

navigator-html-injectables/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "module": "esnext",
     "target": "es6",
-    "lib": ["esnext","dom","dom.iterable"],
+    "lib": ["esnext", "es2022.intl", "dom", "dom.iterable"],
     "importHelpers": true,
     // output .d.ts declaration files for consumers
     "declaration": true,

navigator/src/epub/EpubNavigator.ts

@@ -5,6 +5,8 @@ import FXLFramePoolManager from "./fxl/FXLFramePoolManager";
 import { CommsEventKey, FXLModules, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables/src";
 import { FrameClickEvent } from "@readium/navigator-html-injectables/src/modules/ReflowablePeripherals";
 import * as path from "path-browserify";
+import FXLFrameManager from "./fxl/FXLFrameManager";
+import FrameManager from "./frame/FrameManager";
 
 export type ManagerEventKey = "zoom";
 
@@ -71,7 +73,7 @@ export class EpubNavigator extends VisualNavigator {
             this.positions = await this.pub.positionsFromManifest();
         if(this.layout === EPUBLayout.fixed) {
             this.framePool = new FXLFramePoolManager(this.container, this.positions, this.pub);
-            this.framePool.listener = (key: CommsEventKey, data: unknown) => {
+            this.framePool.listener = (key: CommsEventKey | ManagerEventKey, data: unknown) => {
                 this.eventListener(key, data);
             }
         } else
@@ -85,7 +87,7 @@ export class EpubNavigator extends VisualNavigator {
      * Exposed to the public to compensate for lack of implemented readium conveniences
      * TODO remove when settings management is incorporated
      */
-    public get _cframes() {
+    public get _cframes(): (FXLFrameManager | FrameManager | undefined)[] {
         return this.framePool.currentFrames;
     }
 
@@ -238,10 +240,10 @@ export class EpubNavigator extends VisualNavigator {
 
     // Start listening to messages from the current iframe
     private attachListener() {
-        const vframes = this._cframes.filter(f => !!f);
+        const vframes = this._cframes.filter(f => !!f) as (FXLFrameManager | FrameManager)[];
         if(vframes.length === 0) throw Error("no cframe to attach listener to");
-        this._cframes.forEach(f => {
-            if(f.msg) f.msg.listener = (key: CommsEventKey, value: unknown) => {
+        vframes.forEach(f => {
+            if(f.msg) f.msg.listener = (key: CommsEventKey | ManagerEventKey, value: unknown) => {
                 this.eventListener(key, value);
             }
         })
@@ -357,7 +359,7 @@ export class EpubNavigator extends VisualNavigator {
         await this.framePool.update(this.pub, this.currentLocation, this.determineModules());
     }
 
-    public goBackward(animated: boolean, cb: (ok: boolean) => void): void {
+    public goBackward(_: boolean, cb: (ok: boolean) => void): void {
         if(this.layout === EPUBLayout.fixed) {
             this.changeResource(-1);
             cb(true);
@@ -373,7 +375,7 @@ export class EpubNavigator extends VisualNavigator {
         }
     }
 
-    public goForward(animated: boolean, cb: (ok: boolean) => void): void {
+    public goForward(_: boolean, cb: (ok: boolean) => void): void {
         if(this.layout === EPUBLayout.fixed) {
             this.changeResource(1);
             cb(true);
@@ -475,10 +477,11 @@ export class EpubNavigator extends VisualNavigator {
                 // Attempt to go to a progression in the resource
                 this._cframes[0]!.msg!.send("go_progression", progression, (ok) => res(ok));
             });
+        else done = true;
         cb(done);
     }
 
-    public go(locator: Locator, animated: boolean, cb: (ok: boolean) => void): void {
+    public go(locator: Locator, _: boolean, cb: (ok: boolean) => void): void {
         const href = locator.href.split("#")[0];
         let link = this.pub.readingOrder.findWithHref(href);
         if(!link) {

navigator/src/epub/frame/FrameComms.ts

@@ -20,7 +20,8 @@ export class FrameComms {
     private readonly wnd: Window;
     private readonly registry = new Map<string, RegistryValue>();
     private readonly gc: number;
-    private readonly origin: string
+    // @ts-ignore
+    private readonly origin: string;
     public readonly channelId: string;
     private _ready = false;
     private _listener: FrameCommsListener | undefined;
@@ -85,6 +86,7 @@ export class FrameComms {
                 v.cb(!!dt.data);
                 return;
             }
+            // @ts-ignore
             case "_pong": {
                 this._ready = true;
             }

navigator/src/epub/frame/FrameManager.ts

@@ -64,7 +64,7 @@ export default class FrameManager {
         if(this.frame.parentElement) {
             if(this.comms === undefined) return;
             return new Promise((res, _) => {
-                this.comms?.send("unfocus", undefined, (ok: boolean) => {
+                this.comms?.send("unfocus", undefined, (_: boolean) => {
                     this.comms?.halt();
                     res();
                 });

navigator/src/epub/frame/FramePoolManager.ts

@@ -54,7 +54,7 @@ export default class FramePoolManager {
 
     async update(pub: Publication, locator: Locator, modules: ModuleName[], force=false) {
         let i = this.positions.findIndex(l => l.locations.position === locator.locations.position);
-        if(i < 0) throw Error(`Locator not found in position list: ${locator.serialize()}`);
+        if(i < 0) throw Error(`Locator not found in position list: ${locator.locations.position} > ${this.positions.reduce<number>((acc, l) => l.locations.position || 0 > acc ? l.locations.position || 0 : acc, 0)  }`);
         const newHref = this.positions[i].href;
 
         if(this.inprogress.has(newHref))

navigator/src/epub/fxl/FXLCoordinator.ts

@@ -18,15 +18,15 @@ export enum VerticalThird {
 }
 
 export interface NinthPoint {
-    X: HorizontalThird;
-    Y: VerticalThird;
+    X: HorizontalThird | null;
+    Y: VerticalThird | null;
 }
 
 export interface BibiEvent {
-    Target: EventTarget;
-    Coord: Point;
-    Ratio: Point;
-    Division: NinthPoint;
+    Target: EventTarget | null;
+    Coord: Point | null;
+    Ratio: Point | null;
+    Division: NinthPoint | null;
 }
 
 export default class FXLCoordinator {
@@ -50,7 +50,7 @@ export default class FXLCoordinator {
 
     private outerWidth = 0;
     private outerHeight = 0;
-    refreshOuterPixels(r: DOMRect) {
+    refreshOuterPixels(_: DOMRect) {
         if(sML.OS.iOS) return; // No need on iOS
         this.outerHeight = window.outerHeight - window.innerHeight;
         if(sML.OS.Android && sML.UA.Chrome) {
@@ -116,7 +116,7 @@ export default class FXLCoordinator {
             Ratio: null,
             Target: null
         };
-        const Coord = this.getBibiEventCoord(Eve);
+        const Coord = this.getBibiEventCoord(Eve as TouchEvent | MouseEvent);
         let FlipperWidth = 0.3; // TODO flipper-width
         const Ratio = {
             X: Coord.X / window.innerWidth,

navigator/src/epub/fxl/FXLFrameManager.ts

@@ -182,7 +182,7 @@ export default class FXLFrameManager {
             this.deselect();
             if(this.comms === undefined) return;
             return new Promise((res, _) => {
-                this.comms?.send("unfocus", undefined, (ok: boolean) => {
+                this.comms?.send("unfocus", undefined, (_: boolean) => {
                     this.comms?.halt();
                     this.showPromise = undefined;
                     res();
@@ -214,7 +214,7 @@ export default class FXLFrameManager {
         if(this.comms) this.comms.resume();
         else this.comms = new FrameComms(this.frame.contentWindow!, this.source);
         this.showPromise = new Promise<void>((res, _) => {
-            this.comms!.send("focus", undefined, (ok: boolean) => {
+            this.comms!.send("focus", undefined, (_: boolean) => {
                 // this.showPromise = undefined; Don't do this
                 this.update(this.cachedPage);
                 res();

navigator/src/epub/fxl/FXLFramePoolManager.ts

@@ -56,10 +56,10 @@ export default class FramePoolManager {
         // NEW
         this.spreader = new FXLSpreader(this.pub);
         this.containerHeightCached = container.clientHeight;
-        this.resizeBoundHandler = this.resizeHandler.bind(this);
-        // TODO unbind
-        window.addEventListener("resize", this.resizeBoundHandler);
-        window.addEventListener("orientationchange", this.resizeBoundHandler);
+        this.resizeBoundHandler = this.nativeResizeHandler.bind(this);
+
+        this.ownerWindow.addEventListener("resize", this.resizeBoundHandler);
+        this.ownerWindow.addEventListener("orientationchange", this.resizeBoundHandler);
 
         this.bookElement = document.createElement("div");
         this.bookElement.ariaLabel = "Book";
@@ -100,6 +100,10 @@ export default class FramePoolManager {
         return this.peripherals.pan.touchID > 0;
     }
 
+    private nativeResizeHandler(_: Event) {
+        this.resizeHandler(true);
+    }
+
     /**
      * When window resizes, resize slider components as well
      */
@@ -362,11 +366,18 @@ export default class FramePoolManager {
             return false;
     }
 
+    get ownerWindow() {
+        return this.container.ownerDocument.defaultView || window;
+    }
+
 
     // OLD
 
 
     async destroy() {
+        this.ownerWindow.removeEventListener("resize", this.resizeBoundHandler);
+        this.ownerWindow.removeEventListener("orientationchange", this.resizeBoundHandler);
+
         // Wait for all in-progress loads to complete
         let iit = this.inprogress.values();
         let inp = iit.next();
@@ -445,7 +456,7 @@ export default class FramePoolManager {
         }
     }
 
-    async update(pub: Publication, locator: Locator, modules: ModuleName[], force=false) {
+    async update(pub: Publication, locator: Locator, modules: ModuleName[], _force=false) {
         let i = this.pub.readingOrder.items.findIndex(l => l.href === locator.href);
         if(i < 0) throw Error("Href not found in reading order");
 

navigator/src/epub/fxl/FXLPeripherals.ts

@@ -102,7 +102,7 @@ export default class FXLPeripherals {
     private readonly btouchendHandler = this.touchendHandler.bind(this);
     private readonly btouchmoveHandler = this.touchmoveHandler.bind(this);
     private readonly bdblclickHandler = this.dblclickHandler.bind(this);
-    private readonly bclickHandler = this.clickHandler.bind(this);
+    // private readonly bclickHandler = this.clickHandler.bind(this);
     private readonly bmousedownHandler = this.mousedownHandler.bind(this);
     private readonly bmouseupHandler = this.mouseupHandler.bind(this);
     private readonly bmousemoveHandler = this.mousemoveHandler.bind(this);
@@ -172,7 +172,7 @@ export default class FXLPeripherals {
         // item.addEventListener("click", this.bclickHandler as EventListener);
     }
 
-    clickHandler(e: MouseEvent) {
+    clickHandler(_: MouseEvent) {
         // e.preventDefault();
     }
 
@@ -239,6 +239,7 @@ export default class FXLPeripherals {
                 }
                 return;
             }
+            // @ts-ignore
             case 1:
                 this.pan.touchID = e.touches[0].identifier;
                 if(this.debugger?.show) this.debugger.DOM.touch1.style.display = "";
@@ -358,7 +359,7 @@ export default class FXLPeripherals {
         let updateBook = false;
 
         const oldScale = this.scale;
-        const oldDistance = this.pinch.startDistance;
+        // const oldDistance = this.pinch.startDistance;
         if(this.dragState === 2 && currentDistance) {
             this.pinch.touchN++;
             if(this.pinch.touchN < 4) return;
@@ -503,10 +504,11 @@ export default class FXLPeripherals {
         }
     }
 
-    private dtimer: number;
-    private pdblclick: boolean;
-    private disableDblClick: boolean;
-    dblclickHandler(e: MouseEvent) {
+    private dtimer!: number;
+    // @ts-ignore
+    private pdblclick!: boolean;
+    private disableDblClick!: boolean;
+    dblclickHandler(_: MouseEvent) {
         clearTimeout(this.dtimer);
         this.pdblclick = true;
         this.dtimer = window.setTimeout(() => this.pdblclick = false, 200);