Add Viewer plugin support (#183)

.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 })}
  />
  );
 };