Fix build (readium#48)

.github/workflows/CI.yml

@@ -35,9 +35,6 @@ jobs:
       - name: Install deps and build
         run: pnpm install
 
-      - name: Lint
-        run: pnpm run lint
-
       - name: Test
         run: pnpm run test --ci --coverage --maxWorkers=2
 

README.md

@@ -2,4 +2,33 @@
 
 Next generation SDK for publications in Web Apps
 
+## Install
 
+You need `pnpm` installed as this is a monorepo using workspaces.
+
+To install pnpm using node:
+
+```sh
+npm install -g pnpm
+```
+
+Note there are [several other options](https://pnpm.io/installation) if needed.
+
+To install all dependencies:
+
+```sh
+pnpm install
+```
+
+Then workspaces should be all set up and you can build them from their directory in the following order:
+
+1. shared
+2. navigator-html-injectables
+3. navigator
+
+## Workspaces
+
+- [Shared](./shared/): shared models to be used across other Readium projects and implementations in Typescript.
+- [Navigator](./navigator/): a navigator for web platforms based on the readium Navigator spec.
+- [Navigator-html-injectables](./navigator-html-injectables/): provides access and control over a resource from a navigator on any modern browser or embedded browser frame.
+- [Testapp/vanilla](./testapp/vanilla/): an example of how to use the ts-toolkit.

navigator-html-injectables/.gitignore

@@ -3,6 +3,7 @@
 node_modules
 dist
 types
+!*/vendor/hypothesis/types
 coverage
 
 # Yarn

navigator-html-injectables/README.MD

@@ -2,4 +2,12 @@
 
 This package can be used either inside a reflowable (X)HTML or outside (in a javascript environment) to provide access and control over a resource from a navigator on any modern browser or embedded browser frame. This is a replacement for the javascript stubs found in the mobile SDKs, such as [this](https://github.com/readium/kotlin-toolkit/tree/develop/readium/navigator/src/main/assets/_scripts/src).
 
-Special care should be taken to make the final produced build compatible with a set of browsers that are older than what you'd typically support on the web, since this SDK can be used in a mobile app's webview, which is an environment that tends to run on an outdated web engine.
+Special care should be taken to make the final produced build compatible with a set of browsers that are older than what you'd typically support on the web, since this SDK can be used in a mobile app's webview, which is an environment that tends to run on an outdated web engine.
+
+To build:
+
+```sh
+pnpm run build
+```
+
+It will output 2 files (`index.js` and `index.umd.cjs`) in `dist`.

navigator-html-injectables/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@readium/navigator-html-injectables",
   "version": "0.0.1",
+  "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",
   "repository": {
@@ -21,29 +22,32 @@
     "embedded"
   ],
   "scripts": {
-    "build": "esbuild src/index.ts --bundle --minify --sourcemap --target=es6,chrome58,firefox57,safari11,edge16 --outfile=dist/index.js"
+    "build": "tsc && vite build"
+  },
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "types": "./types/src/index.d.ts"
+    }
   },
-  "main": "dist/index.js",
-  "types": "types/index.d.ts",
   "files": [
     "dist",
     "src",
     "types"
   ],
   "engines": {
-    "node": ">=14"
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "node": ">=18"
   },
-  "module": "dist/index.js",
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@readium/shared": "workspace:1.2.0",
     "css-selector-generator": "^3.6.4",
-    "tslib": "^2.6.1"
+    "tslib": "^2.6.1",
+    "typescript": "^5.4.5",
+    "vite": "^4.4.9"
   }
 }

navigator-html-injectables/src/helpers/dom.ts

@@ -1,6 +1,6 @@
 // (From swift-toolkit @ https://github.com/hypothesis/client/blob/main/src/annotator/highlighter.ts)
 
-import { Locator, LocatorLocations, LocatorText } from "@readium/shared/src/publication";
+import { Locator, LocatorLocations, LocatorText } from "@readium/shared";
 import type { getCssSelector } from "css-selector-generator";
 
 type BlockedEventData = [0, Function, any[], any[]] | [1, Event, EventTarget];

navigator-html-injectables/src/helpers/locator.ts

@@ -1,4 +1,4 @@
-import { Locator } from "@readium/shared/src/publication";
+import { Locator } from "@readium/shared";
 import { TextQuoteAnchor } from "../vendor/hypothesis/anchoring/types";
 
 // Based on the kotlin-toolkit code

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

@@ -1,4 +1,4 @@
-import { Locator } from "@readium/shared/src/publication";
+import { Locator } from "@readium/shared";
 import { Comms } from "../comms/comms";
 import { Module } from "./Module";
 import { rangeFromLocator } from "../helpers/locator";

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

@@ -1,2 +1,3 @@
 export * from './Module';
-export * from './ModuleLibrary';
+export * from './ModuleLibrary';
+export * from './ReflowablePeripherals';

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

@@ -4,7 +4,7 @@ import { Snapper } from "./Snapper";
 import { getColumnCountPerScreen, isRTL, appendVirtualColumnIfNeeded } from "../../helpers/document";
 import { easeInOutQuad } from "../../helpers/animation";
 import { ModuleName } from "../ModuleLibrary";
-import { Locator, LocatorLocations, LocatorText } from "@readium/shared/src/publication";
+import { Locator, LocatorLocations, LocatorText } from "@readium/shared";
 import { rangeFromLocator } from "../../helpers/locator";
 import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom";
 

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

@@ -1,4 +1,4 @@
-import { Locator, LocatorLocations, LocatorText } from "@readium/shared/src/publication";
+import { Locator, LocatorLocations, LocatorText } from "@readium/shared";
 import { Comms } from "../../comms";
 import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom";
 import { AnchorObserver, helperCreateAnchorElements, helperRemoveAnchorElements } from '../../helpers/scrollSnapperHelper';

navigator-html-injectables/src/vendor/hypothesis/tsconfig.json

@@ -21,7 +21,7 @@
     // Prevent automatic inclusion of global variables defined in `@types/<name>` packages.
     // This prevents eg. Node globals from `@types/node` being included when writing
     // code for the browser.
-    "types": ["redux-thunk/extend-redux"]
+    // "types": ["redux-thunk/extend-redux"]
   },
   "include": ["**/*.js", "**/*.ts", "**/*.tsx", "types/*.d.ts"],
   "exclude": [

navigator-html-injectables/src/vendor/hypothesis/types/shared.ts

@@ -0,0 +1,40 @@
+/**
+ * Clusters provide the client application a mechanism for categorizing
+ * annotations so that their drawn anchor highlights may be styled distinctively
+ * in the annotated document. An annotation can only belong to one cluster.
+ */
+export type HighlightCluster =
+  | 'other-content' // default cluster: content not belonging to the current user
+  | 'user-annotations' // An annotation belonging to the current user
+  | 'user-highlights'; // A highlight (highlights are private; they always belong to the current user)
+
+/**
+ * Annotation properties not present on API objects, but added by the client
+ */
+export type ClientAnnotationData = {
+  $cluster?: HighlightCluster;
+
+  /**
+   * Client-side identifier: set even if annotation does not have a
+   * server-provided `id` (i.e. is unsaved)
+   */
+  $tag: string;
+
+  /**
+   * Flag indicating whether waiting for the annotation to anchor timed out
+   */
+  $anchorTimeout?: boolean;
+
+  /**
+   * Flag indicating that this annotation was created using the "Highlight" button,
+   * as opposed to "Annotate".
+   */
+  $highlight?: boolean;
+
+  /**
+   * Flag indicating that this annotation was not found in the document.
+   * It is initially `undefined` while anchoring is in progress and then set to
+   * `true` if anchoring failed or `false` if it succeeded.
+   */
+  $orphan?: boolean;
+};

navigator-html-injectables/tsconfig.json

@@ -15,6 +15,8 @@
     "rootDir": "./",
     // stricter type-checking for stronger correctness. Recommended by TS
     "strict": true,
+    // Needed for build
+    "isolatedModules": true,
     // linter checks for common issues
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
@@ -31,7 +33,8 @@
     "skipLibCheck": true,
     // error out if import and file system have a casing mismatch. Recommended by TS
     "forceConsistentCasingInFileNames": true,
-    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
-    "noEmit": true,
+    // emit only .d.ts
+    "noEmit": false,
+    "emitDeclarationOnly": true
   },
 }

navigator-html-injectables/vite.config.js

@@ -0,0 +1,12 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "navigator-html-injectables",
+      fileName: "index"
+    }
+  }
+});

navigator/README.MD

@@ -1,3 +1,11 @@
 # navigator
 
-A navigator for web platforms based on the readium Navigator spec. Work is primarily based on the [kotlin toolkit](https://github.com/readium/kotlin-toolkit/tree/develop/readium/navigator/src/main/java/org/readium/r2/navigator), but adapted for the needs of the web. At the moment, this only includes the Reflowable EPUB navigator.
+A navigator for web platforms based on the readium Navigator spec. Work is primarily based on the [kotlin toolkit](https://github.com/readium/kotlin-toolkit/tree/develop/readium/navigator/src/main/java/org/readium/r2/navigator), but adapted for the needs of the web.
+
+To build:
+
+```sh
+pnpm run build
+```
+
+It will output 2 files (`index.js` and `index.umd.cjs`) in `dist`.

navigator/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@readium/navigator",
   "version": "1.2.0",
+  "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
   "repository": {
@@ -17,33 +18,40 @@
     "web",
     "epub"
   ],
-  "main": "dist/index.js",
-  "types": "types/index.d.ts",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "types": "./types/src/index.d.ts"
+    }
+  },
   "files": [
     "dist",
     "src",
     "types"
   ],
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "scripts": {
-    "build": "esbuild src/index.ts --bundle --minify --sourcemap --target=es6 --outfile=dist/index.js"
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "build": "tsc && vite build"
   },
-  "module": "dist/index.js",
   "devDependencies": {
+    "@laynezh/vite-plugin-lib-assets": "^0.5.24",
     "@readium/navigator-html-injectables": "workspace:0.0.1",
     "@readium/shared": "workspace:1.2.0",
     "@types/path-browserify": "^1.0.0",
     "css-selector-generator": "^3.6.4",
-    "path-browserify": "^1.0.1",
     "readium-css": "github:readium/readium-css",
-    "tslib": "^2.5.2"
+    "tslib": "^2.5.2",
+    "typescript": "^5.4.5",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^4.4.9"
+  },
+  "dependencies": {
+    "path-browserify": "^1.0.1"
   }
 }

navigator/src/Navigator.ts

@@ -1,4 +1,4 @@
-import { Link, Locator, Publication, ReadingProgression } from "@readium/shared/src/publication";
+import { Link, Locator, Publication, ReadingProgression } from "@readium/shared";
 
 type cbb = (ok: boolean) => void;
 

navigator/src/audio/engine/AudioEngine.ts

@@ -1,5 +1,5 @@
-import { Locator } from '@readium/shared/src/publication/Locator';
-import { Publication } from '@readium/shared/src/publication/Publication';
+import { Locator } from '@readium/shared';
+import { Publication } from '@readium/shared';
 
 /**
  * Initial state of the audio engine playback.

navigator/src/audio/engine/WebAudioEngine.ts

@@ -5,8 +5,8 @@ import {
     Playback,
   } from "./AudioEngine";
 
-  import { Publication } from "@readium/shared/src/publication/Publication";
-  import { Locator } from "@readium/shared/src/publication/Locator";
+  import { Publication } from "@readium/shared";
+  import { Locator } from "@readium/shared";
 
   type EventCallback = (data: any) => void;
 
@@ -139,8 +139,8 @@ import {
      * Plays the audio resource at the given locator.
      */
     public async playLocator(
-      publication: Publication,
-      locator: Locator
+      _publication: Publication,
+      _locator: Locator
     ): Promise<void> {
       // Implementation details.
     }

navigator/src/epub/EpubNavigator.ts

@@ -1,10 +1,12 @@
-import { EPUBLayout, Link, Locator, Publication, ReadingProgression } from "@readium/shared/src/publication";
+import { EPUBLayout, Link, Locator, Publication, ReadingProgression } from "@readium/shared";
 import { VisualNavigator } from "../";
-import FramePoolManager from "./frame/FramePoolManager";
-import FXLFramePoolManager from "./fxl/FXLFramePoolManager";
-import { CommsEventKey, FXLModules, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables/src";
-import { BasicTextSelection, FrameClickEvent } from "@readium/navigator-html-injectables/src/modules/ReflowablePeripherals";
+import { FramePoolManager } from "./frame/FramePoolManager";
+import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager";
+import { CommsEventKey, FXLModules, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables";
+import { BasicTextSelection, FrameClickEvent } from "@readium/navigator-html-injectables";
 import * as path from "path-browserify";
+import { FXLFrameManager } from "./fxl/FXLFrameManager";
+import { FrameManager } from "./frame/FrameManager";
 
 export type ManagerEventKey = "zoom";
 

navigator/src/epub/frame/FrameBlobBuilder.ts

@@ -1,10 +1,13 @@
-import { MediaType } from "@readium/shared/src/util/mediatype";
-import { Link, Publication } from "@readium/shared/src/publication";
+import { MediaType } from "@readium/shared";
+import { Link, Publication } from "@readium/shared";
 
 // Readium CSS imports
 // The "?inline" query is to prevent some bundlers from injecting these into the page (e.g. vite)
+// @ts-ignore
 import readiumCSSAfter from "readium-css/css/dist/ReadiumCSS-after.css?inline";
+// @ts-ignore
 import readiumCSSBefore from "readium-css/css/dist/ReadiumCSS-before.css?inline";
+// @ts-ignore
 import readiumCSSDefault from "readium-css/css/dist/ReadiumCSS-default.css?inline";
 
 // Utilities