Merge pull request #1 from samvera-labs/iiif-vault-upgrade--mat-amend

Try moduleResolution of `bundler`; update typescript defs.

src/components/Image/Controls/Controls.tsx

@@ -1,13 +1,14 @@
-import Button from "src/components/Image/Controls/Button";
-import { Options } from "openseadragon";
-import React from "react";
-import { Wrapper } from "src/components/Image/Controls/Controls.styled";
 import {
   ViewerContextStore,
-  useViewerState,
   useViewerDispatch,
+  useViewerState,
 } from "src/context/viewer-context";
+
+import Button from "src/components/Image/Controls/Button";
 import { CanvasNormalized } from "@iiif/presentation-3";
+import { Options } from "openseadragon";
+import React from "react";
+import { Wrapper } from "src/components/Image/Controls/Controls.styled";
 
 const ZoomIn = () => {
   return (
@@ -75,10 +76,10 @@ const Controls = ({
   const viewerState: ViewerContextStore = useViewerState();
   const { activeCanvas, plugins, vault } = viewerState;
 
-  const canvas: CanvasNormalized = vault.get({
+  const canvas = vault.get({
     id: activeCanvas,
     type: "Canvas",
-  });
+  }) as CanvasNormalized;
 
   function renderPlugins() {
     return plugins

src/components/Scroll/Items/Item.tsx

@@ -36,7 +36,7 @@ const ScrollItem: React.FC<ScrollItemProps> = ({
   const { state } = React.useContext(ScrollContext);
   const { annotations, vault } = state;
 
-  const canvas: CanvasNormalized | undefined = vault?.get(item);
+  const canvas = vault?.get(item) as CanvasNormalized;
 
   const annotationBody = annotations
     ?.filter((annotation) => annotation.target === item.id)

src/components/Viewer/InformationPanel/About/About.tsx

@@ -2,6 +2,11 @@ import {
   AboutContent,
   AboutStyled,
 } from "src/components/Viewer/InformationPanel/About/About.styled";
+import {
+  ContentResource,
+  IIIFExternalWebResource,
+  ManifestNormalized,
+} from "@iiif/presentation-3";
 import {
   Homepage,
   Id,
@@ -13,10 +18,6 @@ import {
   Summary,
   Thumbnail,
 } from "src/components/Viewer/Properties";
-import {
-  IIIFExternalWebResource,
-  ManifestNormalized,
-} from "@iiif/presentation-3";
 import React, { useEffect, useState } from "react";
 import { ViewerContextStore, useViewerState } from "src/context/viewer-context";
 
@@ -28,19 +29,41 @@ const About: React.FC = () => {
 
   const [manifest, setManifest] = useState<ManifestNormalized>();
 
-  const [homepage, setHomepage] = useState<IIIFExternalWebResource[]>([]);
-  const [seeAlso, setSeeAlso] = useState<IIIFExternalWebResource[]>([]);
-  const [rendering, setRendering] = useState<IIIFExternalWebResource[]>([]);
+  const [homepage, setHomepage] = useState<PrimitivesExternalWebResource[]>([]);
+  const [seeAlso, setSeeAlso] = useState<PrimitivesExternalWebResource[]>([]);
+  const [rendering, setRendering] = useState<PrimitivesExternalWebResource[]>(
+    [],
+  );
   const [thumbnail, setThumbnail] = useState<IIIFExternalWebResource[]>([]);
 
   useEffect(() => {
     const data: ManifestNormalized = vault.get(activeManifest);
     setManifest(data);
 
-    if (data.homepage?.length > 0) setHomepage(vault.get(data.homepage));
-    if (data.seeAlso?.length > 0) setSeeAlso(vault.get(data.seeAlso));
-    if (data.rendering?.length > 0) setRendering(vault.get(data.rendering));
-    if (data.thumbnail?.length > 0) setThumbnail(vault.get(data.thumbnail));
+    if (data.homepage?.length > 0)
+      setHomepage(
+        vault.get(
+          data.homepage,
+        ) as ContentResource[] as PrimitivesExternalWebResource[],
+      );
+    if (data.seeAlso?.length > 0)
+      setSeeAlso(
+        vault.get(
+          data.seeAlso,
+        ) as ContentResource[] as PrimitivesExternalWebResource[],
+      );
+    if (data.rendering?.length > 0)
+      setRendering(
+        vault.get(
+          data.rendering,
+        ) as ContentResource[] as PrimitivesExternalWebResource[],
+      );
+    if (data.thumbnail?.length > 0)
+      setThumbnail(
+        vault.get(
+          data.thumbnail,
+        ) as ContentResource[] as IIIFExternalWebResource[],
+      );
   }, [activeManifest, vault]);
 
   if (!manifest) return <></>;
@@ -53,15 +76,9 @@ const About: React.FC = () => {
         <Metadata metadata={manifest.metadata} />
         <RequiredStatement requiredStatement={manifest.requiredStatement} />
         <Rights rights={manifest.rights} />
-        <Homepage
-          homepage={homepage as unknown as PrimitivesExternalWebResource[]}
-        />
-        <SeeAlso
-          seeAlso={seeAlso as unknown as PrimitivesExternalWebResource[]}
-        />
-        <Rendering
-          rendering={rendering as unknown as PrimitivesExternalWebResource[]}
-        />
+        <Homepage homepage={homepage} />
+        <SeeAlso seeAlso={seeAlso} />
+        <Rendering rendering={rendering} />
         <Id id={manifest.id} htmlLabel="IIIF Manifest" />
       </AboutContent>
     </AboutStyled>

src/components/Viewer/InformationPanel/Annotation/Item.tsx

@@ -36,10 +36,10 @@ export const AnnotationItem: React.FC<Props> = ({ annotation }) => {
   const annotationBodyValue =
     annotationBody.find((body) => body.value)?.value || "";
 
-  const canvas: CanvasNormalized = vault.get({
+  const canvas = vault.get({
     id: activeCanvas,
     type: "Canvas",
-  });
+  }) as CanvasNormalized;
 
   function handleClick() {
     if (!target) return;

src/components/Viewer/InformationPanel/ContentSearch/Item.tsx

@@ -40,10 +40,10 @@ export const ContentSearchItem: React.FC<Props> = ({
     OSDImageLoaded,
   } = viewerState;
 
-  const canvas: CanvasNormalized = vault.get({
+  const canvas = vault.get({
     id: activeCanvas,
     type: "Canvas",
-  });
+  }) as CanvasNormalized;
 
   const annotationBody: Array<
     EmbeddedResource & {

src/components/Viewer/InformationPanel/InformationPanel.tsx

@@ -59,10 +59,10 @@ export const InformationPanel: React.FC<NavigatorProps> = ({
 
   const renderAbout = informationPanel?.renderAbout;
   const renderAnnotation = informationPanel?.renderAnnotation;
-  const canvas: CanvasNormalized = vault.get({
+  const canvas = vault.get({
     id: activeCanvas,
     type: "Canvas",
-  });
+  }) as CanvasNormalized;
 
   const renderContentSearch = informationPanel?.renderContentSearch;
 

src/components/Viewer/Viewer/Viewer.tsx

@@ -1,28 +1,29 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 
+import { AnnotationResource, AnnotationResources } from "src/types/annotations";
 import {
+  CanvasNormalized,
   ExternalResourceTypes,
   InternationalString,
   ManifestNormalized,
-  CanvasNormalized,
 } from "@iiif/presentation-3";
 import React, { useCallback, useEffect, useState } from "react";
 import {
   ViewerContextStore,
   useViewerDispatch,
   useViewerState,
 } from "src/context/viewer-context";
-import {
-  getAnnotationResources,
-  getPaintingResource,
-  getContentSearchResources,
-} from "src/hooks/use-iiif";
 import {
   addContentSearchOverlays,
   removeOverlaysFromViewer,
 } from "src/lib/openseadragon-helpers";
+import {
+  getAnnotationResources,
+  getContentSearchResources,
+  getPaintingResource,
+} from "src/hooks/use-iiif";
 
-import { AnnotationResources, AnnotationResource } from "src/types/annotations";
+import { ContentSearchQuery } from "src/types/annotations";
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorFallback from "src/components/UI/ErrorFallback/ErrorFallback";
 import { IIIFExternalWebResource } from "@iiif/presentation-3";
@@ -32,7 +33,6 @@ import { Wrapper } from "src/components/Viewer/Viewer/Viewer.styled";
 import { media } from "src/styles/stitches.config";
 import { useBodyLocked } from "src/hooks/useBodyLocked";
 import { useMediaQuery } from "src/hooks/useMediaQuery";
-import { ContentSearchQuery } from "src/types/annotations";
 
 interface ViewerProps {
   manifest: ManifestNormalized;
@@ -168,10 +168,10 @@ const Viewer: React.FC<ViewerProps> = ({
     if (!openSeadragonViewer) return;
     if (!contentSearchResource) return;
 
-    const canvas: CanvasNormalized = vault.get({
+    const canvas = vault.get({
       id: activeCanvas,
       type: "Canvas",
-    });
+    }) as CanvasNormalized;
 
     removeOverlaysFromViewer(openSeadragonViewer, "content-search-overlay");
     addContentSearchOverlays(

src/components/Viewer/index.tsx

@@ -125,7 +125,7 @@ const RenderViewer: React.FC<CloverViewerProps> = ({
   useEffect(() => {
     if (activeManifest)
       vault
-        .loadManifest(activeManifest)
+        .load(activeManifest)
         .then((data: ManifestNormalized) => {
           setManifest(data);
           dispatch({

src/context/scroll-context.tsx

@@ -2,7 +2,6 @@ import { AnnotationNormalized, ManifestNormalized } from "@iiif/presentation-3";
 import React, { Dispatch, createContext, useReducer } from "react";
 
 import { Vault } from "@iiif/helpers/vault";
-import { Vault as VaultShape } from "@iiif/helpers/dist/index";
 
 interface StateType {
   annotations?: AnnotationNormalized[];
@@ -11,7 +10,7 @@ interface StateType {
   options: {
     offset: number;
   };
-  vault?: VaultShape;
+  vault?: Vault;
 }
 
 interface ActionType {
@@ -61,7 +60,7 @@ interface ScrollProviderProps {
   options?: {
     offset?: number;
   };
-  vault?: VaultShape;
+  vault?: Vault;
 }
 
 export const ScrollProvider: React.FC<ScrollProviderProps> = (props) => {

tsconfig.json

@@ -12,7 +12,7 @@
     "jsx": "preserve",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "noEmit": false,
     "noEmitHelpers": true,
     "outDir": "dist",