ProjectMirador · cbeer · Nov 12, 2024 · Nov 12, 2024 · Nov 13, 2024 · Nov 13, 2024
diff --git a/.eslintrc b/.eslintrc
@@ -5,7 +5,8 @@
   "extends": ["airbnb","react-app", "plugin:jest-dom/recommended", "plugin:testing-library/react"],
   "globals": {
     "page": true,
-    "document": true
+    "document": true,
+    "vi": true,
   },
   "plugins": ["jest", "jest-dom", "react", "react-hooks", "testing-library"],
   "rules": {
@@ -35,6 +36,7 @@
     "default-param-last": "off",
     "arrow-parens": "off",
     "import/no-anonymous-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
     "max-len": ["error", {
       "code": 120,
       "ignoreComments": true,

diff --git a/__tests__/fixtures/version-2/broken.json b/__tests__/fixtures/version-2/broken.json
@@ -1,6 +1,3 @@
-<html>
-  <title>Error</title>
-  <body>
-    <p>Something went wrong</p>
-  </body>
-</html>
+{
+  "test": "Broken"
+}
diff --git a/__tests__/integration/mirador/annotations.test.js b/__tests__/integration/mirador/annotations.test.js
diff --git a/__tests__/integration/mirador/auth.html b/__tests__/integration/mirador/auth.html
@@ -9,22 +9,10 @@
   </head>
   <body>
     <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
-    <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
-    <script type="text/javascript">
-     var miradorInstance = Mirador.viewer({
-       id: 'mirador',
-       windows: [
-       {
-         manifestId: 'https://purl.stanford.edu/ds199xg9454/iiif/manifest',
-       },
-       {
-         manifestId: 'https://edsilv.github.io/test-manifests/auth1-degraded.json'
-       },
-       {
-         manifestId: 'https://edsilv.github.io/test-manifests/auth1-standard.json'
-       }
-       ],
-     });
+    <script type="module">
+      import Mirador from '../../../src';
+      import config from './mirador-configs/auth.js';
+      Mirador.viewer(config);
     </script>
   </body>
 </html>
diff --git a/__tests__/integration/mirador/basic.test.js b/__tests__/integration/mirador/basic.test.js
diff --git a/__tests__/integration/mirador/blank.html b/__tests__/integration/mirador/blank.html
@@ -9,15 +9,10 @@
   </head>
   <body>
     <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
-    <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
-    <script type="text/javascript">
-     var miradorInstance = Mirador.viewer({
-       id: 'mirador',
-       windows: [],
-       theme: {
-         transitions: window.location.port === '4488' ?  { create: () => 'none' } : {},
-       },
-     });
+    <script type="module">
+      import Mirador from '../../../src';
+      import config from './mirador-configs/blank.js';
+      Mirador.viewer(config);
     </script>
   </body>
 </html>
diff --git a/__tests__/integration/mirador/collections.html b/__tests__/integration/mirador/collections.html
@@ -9,26 +9,10 @@
   </head>
   <body>
     <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
-    <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
-    <script type="text/javascript">
-     var miradorInstance = Mirador.viewer({
-       id: 'mirador',
-       windows: [
-         {
-           collectionPath: [
-              "https://www.e-codices.unifr.ch/metadata/iiif/collection.json",
-              "https://www.e-codices.unifr.ch/metadata/iiif/collection/stabs.json"
-            ],
-            manifestId: "https://www.e-codices.unifr.ch/metadata/iiif/stabs-StAlban-DD1-1580/manifest.json"
-         },
-         {
-           manifestId: 'https://www.e-codices.unifr.ch/metadata/iiif/collection.json'
-         }
-       ],
-       catalog: [
-         { manifestId: "https://www.e-codices.unifr.ch/metadata/iiif/collection.json" },
-       ]
-     });
+    <script type="module">
+      import Mirador from '../../../src';
+      import config from './mirador-configs/collections.js';
+      Mirador.viewer(config);
     </script>
   </body>
 </html>
diff --git a/__tests__/integration/mirador/companion_windows.test.js b/__tests__/integration/mirador/companion_windows.test.js
diff --git a/__tests__/integration/mirador/components/AddComponentA.jsx b/__tests__/integration/mirador/components/AddComponentA.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const AddComponentA = () => (
+  <div data-testid="add-plugin-component-a">Plugin A</div>
+);
+
+export default AddComponentA;
diff --git a/__tests__/integration/mirador/components/AddComponentB.jsx b/__tests__/integration/mirador/components/AddComponentB.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const AddComponentB = () => (
+  <div data-testid="add-plugin-component-b">Plugin B</div>
+);
+
+export default AddComponentB;
diff --git a/__tests__/integration/mirador/components/AddComponentC.jsx b/__tests__/integration/mirador/components/AddComponentC.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const AddComponentC = (props) => (
+    <div id="add-plugin-component-c">
+      Plugin C
+    </div>
+  );
+
+  export default AddComponentC;
diff --git a/__tests__/integration/mirador/components/AddComponentD.jsx b/__tests__/integration/mirador/components/AddComponentD.jsx
@@ -0,0 +1,7 @@
+const AddComponentD = (props) => (
+    <div id="add-plugin-component-d">
+      <input defaultValue="hello componentD"/>
+    </div>
+  );
+
+export default AddComponentD;
diff --git a/__tests__/integration/mirador/components/CompanionWindowButtonComponent.jsx b/__tests__/integration/mirador/components/CompanionWindowButtonComponent.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+const CompanionWindowButtonComponent = () => (
+    <span data-testid="add-plugin-companion-window-button" role="button">Companion Window Button Component</span>
+  );
+  CompanionWindowButtonComponent.value = 'specialMiradorKey';
+
+  export default CompanionWindowButtonComponent;
diff --git a/__tests__/integration/mirador/components/CompanionWindowComponent.jsx b/__tests__/integration/mirador/components/CompanionWindowComponent.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CompanionWindowComponent = (props) => (
+    <div data-testid="add-plugin-companion-window">
+      Companion Window Component
+    </div>
+  );
+
+  export default CompanionWindowComponent;
diff --git a/__tests__/integration/mirador/components/StateDependentComponent.jsx b/__tests__/integration/mirador/components/StateDependentComponent.jsx
@@ -0,0 +1,7 @@
+const StateDependentComponent = (props) => (
+    <button id="plugin-button" onClick={props.incSomeNumber} style={{ width: 64 }}>
+      { "Plugin:" + props.manifestId }
+    </button>
+  );
+
+  export default StateDependentComponent;
diff --git a/__tests__/integration/mirador/components/WrapComponentA.jsx b/__tests__/integration/mirador/components/WrapComponentA.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const WrapComponentA = (props) => (
+  <div data-testid="wrap-plugin-component-a">
+    Wrap Plugin A
+    <props.TargetComponent {...props} />
+  </div>
+);
+
+export default WrapComponentA;
diff --git a/__tests__/integration/mirador/components/WrapComponentB.jsx b/__tests__/integration/mirador/components/WrapComponentB.jsx
@@ -0,0 +1,8 @@
+const WrapComponentB = (props) => (
+    <div data-testid="wrap-plugin-component-b">
+      Wrap Plugin B
+      <props.TargetComponent {...props} />
+    </div>
+  );
+
+export default WrapComponentB;
diff --git a/__tests__/integration/mirador/components/WrapIconComponent.jsx b/__tests__/integration/mirador/components/WrapIconComponent.jsx
@@ -0,0 +1,17 @@
+const CustomIcon = () => (
+    <svg className="umbrella" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
+        <title id="title">Umbrella Icon</title>
+      <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"/>
+    </svg>
+  );
+
+  const WrapIconComponent = (plugin) => {
+    return (
+      <div data-testid="wrapped-plugin-with-adds">
+        <plugin.TargetComponent menuIcon={<CustomIcon/>} {...plugin.targetProps} {...plugin} />
+      </div>
+    )
+  }
+
+  export default WrapIconComponent;
+
diff --git a/__tests__/integration/mirador/content-search.html b/__tests__/integration/mirador/content-search.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Mirador</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  </head>
+  <body>
+    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+    <script type="module">
+      import Mirador from '../../../src';
+      import config from './mirador-configs/content-search.js';
+      Mirador.viewer(config)
+    </script>
+  </body>
+</html>
diff --git a/__tests__/integration/mirador/contentsearch.html b/__tests__/integration/mirador/contentsearch.html