Use Mirador 4 Alpha 2 and new Mirador Annotations plugin

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 dist/
 package-lock.json
 .cache/
+.idea/

README.md

@@ -2,24 +2,16 @@
 
 This repository is designed to show integrating Mirador 3 with modern frontend build systems.
 
-### Dependencies
 
-You will likely need to have at least the following dependencies available in your `package.json`.
-
- - `mirador`
- - `react`
- - `react-dom`
- - `mirador-image-tools` - A plugin just to test plugin integration
-
-### Webpack
+### Build with webpack
 
 See `./webpack` for a basic webpack setup for Mirador 3 + a plugin.
 
 ```sh
 npm run webpack
 ```
 
-### Parcel
+### Run with parcel
 
 See `./parcel`, but essentially it is just an html file referencing the JavaScript.
 

package.json

@@ -1,24 +1,48 @@
 {
   "name": "mirador-integration",
   "version": "0.0.0",
-  "description": "",
-  "private": true,
+  "description": "Integration of Mirador with some plugins",
   "scripts": {
     "parcel": "parcel parcel/index.html",
     "webpack": "webpack --config webpack/webpack.config.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rm -rf dist",
+    "clean-deps": "rm -rf node_modules package-lock.json"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "css-loader": "^3.6.0",
-    "mirador": "^3.3.0",
-    "mirador-image-tools": "^0.11.0",
+    "mirador": "4.0.0-alpha.2",
+    "mirador-annotations": "npm:[email protected]",
     "parcel-bundler": "^1.12.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "style-loader": "^1.2.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12"
+    "webpack": "^5.70.0",
+    "webpack-cli": "^5.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.7",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-regenerator": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "babel-loader": "^9.1.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-macros": "^3.0.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "html-webpack-plugin": "^4.5.0",
+    "svg-inline-loader": "^0.8.2",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "overrides": {
+    "mirador": {
+      "react-dnd": "^16.0.1"
+    }
   }
 }

src/index.js

@@ -1,22 +1,27 @@
 import Mirador from 'mirador/dist/es/src/index';
-import { miradorImageToolsPlugin } from 'mirador-image-tools';
+import annotationPlugins from 'mirador-annotations';
+import LocalStorageAdapter from 'mirador-annotations/es/annotationAdapter/LocalStorageAdapter';
 
 const config = {
   id: 'demo',
-  windows: [{
-    imageToolsEnabled: true,
-    imageToolsOpen: true,
-    manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
-  }],
+    catalog: [
+        { manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest' },
+        { manifestId: 'https://files.tetras-libre.fr/dev/Clock/manifest.json'}
+    ],
   theme: {
     palette: {
       primary: {
         main: '#1967d2',
       },
     },
   },
+  annotation: {
+    adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`),
+    // adapter: (canvasId) => new AnnototAdapter(canvasId, endpointUrl),
+    exportLocalStorageAnnotations: false, // display annotation JSON export button
+  },
 };
 
 Mirador.viewer(config, [
-  ...miradorImageToolsPlugin,
+  ...annotationPlugins,
 ]);

webpack/webpack.config.js

@@ -1,10 +1,102 @@
 const path = require('path');
+const fs = require('fs');
+
 
 module.exports = {
   entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        include: path.resolve(fs.realpathSync(process.cwd()), '.'), // CRL
+        loader: require.resolve('babel-loader'),
+        options: {
+          // Save disk space when time isn't as important
+          cacheCompression: true,
+          cacheDirectory: true,
+          compact: true,
+          envName: 'development',
+          presets: [
+            ['@babel/preset-env',
+            {
+              corejs: 3,
+              exclude: ['transform-typeof-symbol'],
+              forceAllTransforms: true,
+              modules: false,
+              useBuiltIns: 'entry',
+            }],
+            [
+              '@babel/preset-react',
+              {
+                development: true,
+                runtime: 'automatic',
+                useBuiltIns: true,
+              },
+            ],
+          ],
+          plugins:[
+            'babel-plugin-macros',
+            '@babel/plugin-transform-destructuring',
+            [
+              '@babel/plugin-proposal-class-properties',
+              {
+                loose: true,
+              },
+            ],
+            ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+            [
+              '@babel/plugin-proposal-object-rest-spread',
+              {
+                useBuiltIns: true,
+              },
+            ],
+            [
+              '@babel/plugin-transform-runtime',
+              {
+                corejs: false,
+                helpers: false, // Needed to support IE/Edge
+                regenerator: true,
+              },
+            ],
+            [
+              '@babel/plugin-transform-regenerator',
+              {
+                async: false,
+              },
+            ],
+            ['transform-react-remove-prop-types',
+              {
+                ignoreFilenames: ['node_modules'],
+                removeImport: true,
+              },
+            ],
+            ['lodash', {
+              id: [
+                'lodash',
+              ],
+            },
+            ],
+          ],
+        },
+        test: /\.(js|mjs|jsx)$/,
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
+      }
+    ],
+  },
   output: {
     filename: 'main.js',
     path: path.resolve(__dirname, 'dist'),
     publicPath: './dist/',
   },
+  mode: 'development',
+  resolve: {
+
+    extensions: ['.js'],
+  },
 };