Add Viewer plugin support (#183)

Author: wykhuh

.gitignore

@@ -17,4 +17,8 @@ html/
 
 # VSCode
 .vscode/
+
+dist/tsconfig.tsbuildinfo
 tmp
+.env.local
+tsconfig.tsbuildinfo

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm exec lint-staged
+# pnpm exec lint-staged

build/build.mjs

@@ -11,7 +11,7 @@ const buildOptions = {
       entry: "./src/components/Image/index.tsx",
       fileName: "index",
     },
-  }, 
+  },
   primitives: {
     lib: {
       name: "CloverIIIFPrimitives",
@@ -38,6 +38,13 @@ const buildOptions = {
       name: "CloverIIIFScroll",
       entry: "./src/components/Scroll/index.tsx",
       fileName: "index",
+    }
+  },
+  'helpers': {
+    lib: {
+      name: "CloverIIIFHelpers",
+      entry: "./src/lib/index.ts",
+      fileName: "index",
     },
   },
 };

build/root.mjs

@@ -3,7 +3,15 @@ import Primitives from "./primitives";
 import Scroll from "./scroll";
 import Slider from "./slider";
 import Viewer from "./viewer";
+import Helpers from "./helpers";
 
-export { Image, Primitives, Scroll, Slider, Viewer };
+export {
+  Image,
+  Primitives,
+  Scroll,
+  Slider,
+  Viewer,
+  Helpers
+};
 
-export default Viewer; 
+export default Viewer;

build/root.umd.js

@@ -5,6 +5,7 @@ const Primitives = require("./primitives");
 const Scroll = require("./scroll");
 const Slider = require("./slider");
 const Viewer = require("./viewer");
+const Helpers = require("./helpers");
 
 module.exports = {
   default: Viewer,
@@ -13,4 +14,5 @@ module.exports = {
   Scroll,
   Slider,
   Viewer,
+  Helpers
 };

docs/components/DynamicImports/Viewer.tsx

@@ -1,6 +1,7 @@
 import {
   type CustomDisplay,
   ViewerConfigOptions,
+  PluginConfig,
 } from "src/context/viewer-context";
 import dynamic from "next/dynamic";
 import { isDark } from "docs/lib/theme";
@@ -20,11 +21,13 @@ const CloverViewer = ({
   options,
   customDisplays,
   iiifContentSearchQuery,
+  plugins,
 }: {
   iiifContent: string;
   options?: ViewerConfigOptions;
   customDisplays?: Array<CustomDisplay>;
   iiifContentSearchQuery?: ContentSearchQuery;
+  plugins?: Array<PluginConfig>;
 }) => {
   const router = useRouter();
   const iiifResource = router.query["iiif-content"]
@@ -40,6 +43,7 @@ const CloverViewer = ({
       options={{ ...options, background }}
       key={iiifResource}
       {...(customDisplays && { customDisplays })}
+      {...(plugins && { plugins })}
     />
   );
 };