Readium Web

Next generation SDK for publications in Web Apps

Usage

Three packages are made available by this repository, which are published on NPM. They are:

• @readium/shared
• @readium/navigator-html-injectables
• @readium/navigator

Development

You need pnpm installed as this is a monorepo using workspaces.

To install pnpm using node:

npm install -g pnpm

Note there are several other options if needed.

To install all dependencies:

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 models to be used across other Readium projects and implementations in Typescript.
• Navigator: a navigator for web platforms based on the readium Navigator spec.
• Navigator-html-injectables: provides access and control over a resource from a navigator on any modern browser or embedded browser frame.

Local Development in a test app with pnpm link

When developing locally, you can link these packages to your project for testing changes in a real application. Here's how to set it up:

1. First, build all packages in the correct order:

cd shared && pnpm build && cd ..
cd navigator-html-injectables && pnpm build && cd ..
cd navigator && pnpm build && cd ..

2. Make the packages available globally for linking:

cd shared && pnpm link --global && cd ..
cd navigator-html-injectables && pnpm link --global && cd ..
cd navigator && pnpm link --global && cd ..

Then proceed with either Method 1 or Method 2 below.

Method 1: Adding packages to package.json

If you don't already have the packages in your project's dependencies, add the packages to your package.json:

{
  "dependencies": {
    "@readium/shared": "link:../ts-toolkit/shared",
    "@readium/navigator-html-injectables": "link:../ts-toolkit/navigator-html-injectables",
    "@readium/navigator": "link:../ts-toolkit/navigator"
  }
}

Then install the dependencies:

# In your project directory
pnpm install

You can now modify the source code of the linked package, and the changes will be reflected in your project on re-build.

Method 2: Linking existing dependencies

If you already have the packages in your project's dependencies (e.g., "@readium/shared": "^2.0.0"):

In your project directory, link each package:

# In your project directory
pnpm link @readium/shared @readium/navigator-html-injectables @readium/navigator

You can now modify the source code of the linked package, and the changes will be reflected in your project on re-build.

When you're done testing and want to unlink the packages and restore the original versions:

# In your project directory
pnpm unlink @readium/shared @readium/navigator-html-injectables @readium/navigator
pnpm install