Overview

In the following article, I introduced mirador-sync-windows, a plugin for Mirador 2.

This time, I updated the above functionality for Mirador 3 (actually Mirador 4).

The behavior is still somewhat unstable, but you can try it at the following link.

https://mirador-sync-windows.vercel.app/

Deploying to Vercel

Development was based on the Mirador 4-compatible branch of the mirador-image-tools plugin.

https://github.com/ProjectMirador/mirador-image-tools/tree/mirador4-compat-clean

The above project provides the following commands:

{
...
"scripts": {
    "build": "npm run build:umd",
    "build:demo": "NODE_ENV=development webpack --mode=development",
    "build:umd": "NODE_ENV=production webpack --mode=production",
    "build:es": "mkdir -p es && cp -r src/* es && NODE_ENV=production MODULE_FORMAT=es npx babel es -d es",
    "build:cjs": "mkdir -p lib && cp -r src/* lib && NODE_ENV=production MODULE_FORMAT=cjs npx babel lib -d lib",
    "clean": "rm -rf ./umd && rm -rf ./es && rm -rf ./lib && rm -rf ./demo/dist",
    "lint": "eslint ./src ./__tests__",
    "prepublishOnly": "npm run clean && npm run build:es && npm run build:cjs && npm run build",
    "start": "NODE_ENV=development webpack serve --open",
    "test": "npm run lint && jest",
    "test:coverage": "jest --coverage",
    "test:watch": "jest --watch"
  },
...
}

Based on the above commands, I modified the Vercel deployment settings as follows:

I set the Build Command to pnpm build:demo and the Output Directory to demo/dist.

Summary

I plan to publish the source code in the future. I hope this serves as a helpful reference for Mirador 3 (4) plugin development.