@canopy-iiif/app 1.0.1 → 1.1.0

package/lib/build/iiif.js

@@ -1589,11 +1589,22 @@ async function buildIiifCollectionPages(CONFIG) {
                 .join("/")
             : null;
 
+          const moduleScriptRels = [];
+          if (viewerRel) moduleScriptRels.push(viewerRel);
+          if (sliderRel) moduleScriptRels.push(sliderRel);
+          const primaryClassicScripts = [];
+          if (heroRel) primaryClassicScripts.push(heroRel);
+          if (relatedRel) primaryClassicScripts.push(relatedRel);
+          if (timelineRel) primaryClassicScripts.push(timelineRel);
+          const secondaryClassicScripts = [];
+          if (searchFormRel) secondaryClassicScripts.push(searchFormRel);
           let jsRel = null;
-          if (needsHeroSlider && heroRel) jsRel = heroRel;
-          else if (needsRelated && sliderRel) jsRel = sliderRel;
-          else if (needsTimeline && timelineRel) jsRel = timelineRel;
-          else if (viewerRel) jsRel = viewerRel;
+          if (primaryClassicScripts.length) {
+            jsRel = primaryClassicScripts.shift();
+          }
+          const classicScriptRels = primaryClassicScripts.concat(
+            secondaryClassicScripts
+          );
 
           const headSegments = [head];
           const needsReact = !!(
@@ -1621,20 +1632,16 @@ async function buildIiifCollectionPages(CONFIG) {
             } catch (_) {}
           }
           const extraScripts = [];
-          if (heroRel && jsRel !== heroRel)
-            extraScripts.push(`<script defer src="${heroRel}"></script>`);
-          if (relatedRel && jsRel !== relatedRel)
-            extraScripts.push(`<script defer src="${relatedRel}"></script>`);
-          if (timelineRel && jsRel !== timelineRel)
-            extraScripts.push(`<script defer src="${timelineRel}"></script>`);
-          if (viewerRel && jsRel !== viewerRel)
-            extraScripts.push(`<script defer src="${viewerRel}"></script>`);
-          if (sliderRel && jsRel !== sliderRel)
-            extraScripts.push(`<script defer src="${sliderRel}"></script>`);
-          if (searchFormRel && jsRel !== searchFormRel)
-            extraScripts.push(`<script defer src="${searchFormRel}"></script>`);
-          if (extraScripts.length)
-            headSegments.push(extraScripts.join(""));
+          const pushClassicScript = (src) => {
+            if (!src || src === jsRel) return;
+            extraScripts.push(`<script defer src="${src}"></script>`);
+          };
+          const pushModuleScript = (src) => {
+            if (!src) return;
+            extraScripts.push(`<script type="module" src="${src}"></script>`);
+          };
+          classicScriptRels.forEach((src) => pushClassicScript(src));
+          moduleScriptRels.forEach((src) => pushModuleScript(src));
           try {
             const {BASE_PATH} = require("../common");
             if (BASE_PATH)
@@ -1644,7 +1651,9 @@ async function buildIiifCollectionPages(CONFIG) {
                 )}</script>` + vendorTag;
           } catch (_) {}
           let pageBody = body;
-          const headExtra = headSegments.join("") + vendorTag;
+          if (vendorTag) headSegments.push(vendorTag);
+          if (extraScripts.length) headSegments.push(extraScripts.join(""));
+          const headExtra = headSegments.join("");
           const pageType = (pageDetails && pageDetails.type) || "work";
           const bodyClass = canopyBodyClassForType(pageType);
           let html = htmlShell({

package/lib/build/mdx.js

@@ -651,72 +651,19 @@ async function loadCustomLayout(defaultLayout) {
   return defaultLayout;
 }
 
-async function ensureClientRuntime() {
-  // Bundle a lightweight client runtime to hydrate browser-only components
-  // like the Clover Viewer when placeholders are present in the HTML.
-  let esbuild = null;
+function resolveEsbuild() {
   try {
-    esbuild = require("../../ui/node_modules/esbuild");
+    return require("../../ui/node_modules/esbuild");
   } catch (_) {
     try {
-      esbuild = require("esbuild");
-    } catch (_) {}
-  }
-  if (!esbuild)
-    throw new Error(
-      "Viewer runtime bundling requires esbuild. Install dependencies before building."
-    );
-  ensureDirSync(OUT_DIR);
-  const scriptsDir = path.join(OUT_DIR, "scripts");
-  ensureDirSync(scriptsDir);
-  const outFile = path.join(scriptsDir, "canopy-viewer.js");
-  const entry = `
-    import CloverViewer from '@samvera/clover-iiif/viewer';
-    import CloverScroll from '@samvera/clover-iiif/scroll';
-    import CloverImage from '@samvera/clover-iiif/image';
-
-    function ready(fn) {
-      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn, { once: true });
-      else fn();
+      return require("esbuild");
+    } catch (_) {
+      return null;
     }
+  }
+}
 
-    function parseProps(el) {
-      try {
-        const s = el.querySelector('script[type="application/json"]');
-        if (s) return JSON.parse(s.textContent || '{}');
-        const raw = el.getAttribute('data-props') || '{}';
-        return JSON.parse(raw);
-      } catch (_) { return {}; }
-    }
-
-    function mountAll(selector, Component) {
-      try {
-        const nodes = document.querySelectorAll(selector);
-        if (!nodes || !nodes.length || !Component) return;
-        const React = (window && window.React) || null;
-        const ReactDOMClient = (window && window.ReactDOMClient) || null;
-        const createRoot = ReactDOMClient && ReactDOMClient.createRoot;
-        if (!React || !createRoot) return;
-        for (const el of nodes) {
-          try {
-            if (el.__canopyHydrated) continue;
-            const props = parseProps(el);
-            const root = createRoot(el);
-            root.render(React.createElement(Component, props));
-            el.__canopyHydrated = true;
-          } catch (_) { /* skip */ }
-        }
-      } catch (_) { /* no-op */ }
-    }
-
-    function seedScrollSearchInput() {}
-
-    ready(function() {
-      mountAll('[data-canopy-viewer]', CloverViewer);
-      mountAll('[data-canopy-scroll]', CloverScroll);
-      mountAll('[data-canopy-image]', CloverImage);
-    });
-  `;
+function createReactShimPlugin() {
   const reactShim = `
     const React = (typeof window !== 'undefined' && window.React) || {};
     export default React;
@@ -749,70 +696,145 @@ async function ensureClientRuntime() {
   `;
   const rdomClientShim = `
     const RDC = (typeof window !== 'undefined' && window.ReactDOMClient) || {};
-    export default RDC;
     export const createRoot = RDC.createRoot;
     export const hydrateRoot = RDC.hydrateRoot;
   `;
-  const plugin = {
+  return {
     name: "canopy-react-shims",
     setup(build) {
       const ns = "canopy-shim";
-      build.onResolve({filter: /^react$/}, () => ({
-        path: "react",
-        namespace: ns,
-      }));
-      build.onResolve({filter: /^react-dom$/}, () => ({
-        path: "react-dom",
-        namespace: ns,
-      }));
-      build.onResolve({filter: /^react-dom\/client$/}, () => ({
-        path: "react-dom-client",
-        namespace: ns,
-      }));
-      build.onLoad({filter: /^react$/, namespace: ns}, () => ({
-        contents: reactShim,
-        loader: "js",
-      }));
-      build.onLoad({filter: /^react-dom$/, namespace: ns}, () => ({
-        contents: rdomShim,
-        loader: "js",
-      }));
-      build.onLoad({filter: /^react-dom-client$/, namespace: ns}, () => ({
-        contents: rdomClientShim,
-        loader: "js",
-      }));
+      build.onResolve({ filter: /^react$/ }, () => ({ path: "react", namespace: ns }));
+      build.onResolve({ filter: /^react-dom$/ }, () => ({ path: "react-dom", namespace: ns }));
+      build.onResolve({ filter: /^react-dom\/client$/ }, () => ({ path: "react-dom-client", namespace: ns }));
+      build.onLoad({ filter: /^react$/, namespace: ns }, () => ({ contents: reactShim, loader: "js" }));
+      build.onLoad({ filter: /^react-dom$/, namespace: ns }, () => ({ contents: rdomShim, loader: "js" }));
+      build.onLoad({ filter: /^react-dom-client$/, namespace: ns }, () => ({ contents: rdomClientShim, loader: "js" }));
     },
   };
-  await esbuild.build({
-    stdin: {
-      contents: entry,
-      resolveDir: process.cwd(),
-      sourcefile: "canopy-viewer-entry.js",
-      loader: "js",
+}
+
+function createSliderCssInlinePlugin() {
+  return {
+    name: "canopy-inline-slider-css",
+    setup(build) {
+      build.onLoad({ filter: /\.css$/ }, (args) => {
+        const fs = require("fs");
+        let css = "";
+        try {
+          css = fs.readFileSync(args.path, "utf8");
+        } catch (_) {
+          css = "";
+        }
+        const js = [
+          `var css = ${JSON.stringify(css)};`,
+          `(function(){ try { var s = document.createElement('style'); s.setAttribute('data-canopy-slider-css',''); s.textContent = css; document.head.appendChild(s); } catch (e) {} })();`,
+          `export default css;`,
+        ].join("\n");
+        return { contents: js, loader: "js" };
+      });
     },
-    outfile: outFile,
-    platform: "browser",
-    format: "iife",
+  };
+}
+
+let cloverRuntimePromise = null;
+
+function renameAnonymousChunks(scriptsDir) {
+  try {
+    const entries = fs
+      .readdirSync(scriptsDir)
+      .filter((name) => name.startsWith('canopy-chunk-') && name.endsWith('.js'));
+    if (!entries.length) return;
+    const replacements = [];
+    for (const oldName of entries) {
+      const newName = `canopy-shared-${oldName.slice('canopy-chunk-'.length)}`;
+      if (newName === oldName) continue;
+      const fromPath = path.join(scriptsDir, oldName);
+      const toPath = path.join(scriptsDir, newName);
+      try {
+        fs.renameSync(fromPath, toPath);
+        replacements.push({ from: oldName, to: newName });
+      } catch (_) {}
+    }
+    if (!replacements.length) return;
+    const targetFiles = fs
+      .readdirSync(scriptsDir)
+      .filter((name) => name.endsWith('.js'));
+    for (const filename of targetFiles) {
+      const filePath = path.join(scriptsDir, filename);
+      let contents = '';
+      try {
+        contents = fs.readFileSync(filePath, 'utf8');
+      } catch (_) {
+        continue;
+      }
+      let changed = false;
+      replacements.forEach(({ from, to }) => {
+        if (contents.includes(from)) {
+          contents = contents.split(from).join(to);
+          changed = true;
+        }
+      });
+      if (changed) {
+        try {
+          fs.writeFileSync(filePath, contents, 'utf8');
+        } catch (_) {}
+      }
+    }
+  } catch (_) {}
+}
+
+async function buildCloverHydrationRuntimes() {
+  const esbuild = resolveEsbuild();
+  if (!esbuild)
+    throw new Error(
+      "Clover hydration runtimes require esbuild. Install dependencies before building."
+    );
+  ensureDirSync(OUT_DIR);
+  const scriptsDir = path.join(OUT_DIR, "scripts");
+  ensureDirSync(scriptsDir);
+  const entryPoints = {
+    viewer: path.join(__dirname, "../components/viewer-runtime-entry.js"),
+    slider: path.join(__dirname, "../components/slider-runtime-entry.js"),
+  };
+  await esbuild.build({
+    entryPoints,
+    outdir: scriptsDir,
+    entryNames: "canopy-[name]",
+    chunkNames: "canopy-[name]-[hash]",
     bundle: true,
+    platform: "browser",
+    format: "esm",
+    splitting: true,
     sourcemap: false,
     target: ["es2018"],
     logLevel: "silent",
     minify: true,
-    plugins: [plugin],
+    define: { "process.env.NODE_ENV": '"production"' },
+    plugins: [createReactShimPlugin(), createSliderCssInlinePlugin()],
   });
+  renameAnonymousChunks(scriptsDir);
   try {
-    const {logLine} = require("./log");
-    let size = 0;
-    try {
-      const st = fs.statSync(outFile);
-      size = (st && st.size) || 0;
-    } catch (_) {}
-    const kb = size ? ` (${(size / 1024).toFixed(1)} KB)` : "";
-    const rel = path.relative(process.cwd(), outFile).split(path.sep).join("/");
-    logLine(`✓ Wrote ${rel}${kb}`, "cyan");
+    const { logLine } = require("./log");
+    ["canopy-viewer.js", "canopy-slider.js"].forEach((file) => {
+      try {
+        const abs = path.join(scriptsDir, file);
+        const st = fs.statSync(abs);
+        const size = st && st.size ? st.size : 0;
+        const kb = size ? ` (${(size / 1024).toFixed(1)} KB)` : "";
+        const rel = path.relative(process.cwd(), abs).split(path.sep).join("/");
+        logLine(`✓ Wrote ${rel}${kb}`, "cyan");
+      } catch (_) {}
+    });
   } catch (_) {}
 }
 
+async function ensureClientRuntime() {
+  if (!cloverRuntimePromise) {
+    cloverRuntimePromise = buildCloverHydrationRuntimes();
+  }
+  return cloverRuntimePromise;
+}
+
 // Facets runtime: fetches /api/search/facets.json, picks a value per label (random from top 3),
 // and renders a Slider for each.
 async function ensureFacetsRuntime() {
@@ -952,128 +974,8 @@ async function ensureFacetsRuntime() {
   } catch (_) {}
 }
 
-// Bundle a separate client runtime for the Clover Slider to keep payloads split.
 async function ensureSliderRuntime() {
-  let esbuild = null;
-  try {
-    esbuild = require("../ui/node_modules/esbuild");
-  } catch (_) {
-    try {
-      esbuild = require("esbuild");
-    } catch (_) {}
-  }
-  if (!esbuild)
-    throw new Error(
-      "Slider runtime bundling requires esbuild. Install dependencies before building."
-    );
-  ensureDirSync(OUT_DIR);
-  const scriptsDir = path.join(OUT_DIR, "scripts");
-  ensureDirSync(scriptsDir);
-  const outFile = path.join(scriptsDir, "canopy-slider.js");
-  const entryFile = path.join(__dirname, "../components/slider-runtime-entry.js");
-  const reactShim = `
-    const React = (typeof window !== 'undefined' && window.React) || {};
-    export default React;
-    export const Children = React.Children;
-    export const Component = React.Component;
-    export const Fragment = React.Fragment;
-    export const createElement = React.createElement;
-    export const cloneElement = React.cloneElement;
-    export const createContext = React.createContext;
-    export const forwardRef = React.forwardRef;
-    export const memo = React.memo;
-    export const startTransition = React.startTransition;
-    export const isValidElement = React.isValidElement;
-    export const useEffect = React.useEffect;
-    export const useLayoutEffect = React.useLayoutEffect;
-    export const useMemo = React.useMemo;
-    export const useState = React.useState;
-    export const useRef = React.useRef;
-    export const useCallback = React.useCallback;
-    export const useContext = React.useContext;
-    export const useReducer = React.useReducer;
-    export const useId = React.useId;
-  `;
-  const rdomClientShim = `
-    const RDC = (typeof window !== 'undefined' && window.ReactDOMClient) || {};
-    export const createRoot = RDC.createRoot;
-    export const hydrateRoot = RDC.hydrateRoot;
-  `;
-  const plugin = {
-    name: "canopy-react-shims-slider",
-    setup(build) {
-      const ns = "canopy-shim";
-      build.onResolve({filter: /^react$/}, () => ({
-        path: "react",
-        namespace: ns,
-      }));
-      build.onResolve({filter: /^react-dom$/}, () => ({
-        path: "react-dom",
-        namespace: ns,
-      }));
-      build.onResolve({filter: /^react-dom\/client$/}, () => ({
-        path: "react-dom-client",
-        namespace: ns,
-      }));
-      build.onLoad({filter: /^react$/, namespace: ns}, () => ({
-        contents: reactShim,
-        loader: "js",
-      }));
-      build.onLoad({filter: /^react-dom$/, namespace: ns}, () => ({
-        contents:
-          "export default ((typeof window!=='undefined' && window.ReactDOM) || {});",
-        loader: "js",
-      }));
-      build.onLoad({filter: /^react-dom-client$/, namespace: ns}, () => ({
-        contents: rdomClientShim,
-        loader: "js",
-      }));
-      // Inline imported CSS into a <style> tag at runtime so we don't need a separate CSS file
-      build.onLoad({filter: /\.css$/}, (args) => {
-        const fs = require("fs");
-        let css = "";
-        try {
-          css = fs.readFileSync(args.path, "utf8");
-        } catch (_) {
-          css = "";
-        }
-        const js = [
-          `var css = ${JSON.stringify(css)};`,
-          `(function(){ try { var s = document.createElement('style'); s.setAttribute('data-canopy-slider-css',''); s.textContent = css; document.head.appendChild(s); } catch (e) {} })();`,
-          `export default css;`,
-        ].join("\n");
-        return {contents: js, loader: "js"};
-      });
-    },
-  };
-  try {
-    await esbuild.build({
-      entryPoints: [entryFile],
-      outfile: outFile,
-      platform: "browser",
-      format: "iife",
-      bundle: true,
-      sourcemap: false,
-      target: ["es2018"],
-      logLevel: "silent",
-      minify: true,
-      plugins: [plugin],
-    });
-  } catch (e) {
-    const message = e && e.message ? e.message : e;
-    throw new Error(`Slider runtime build failed: ${message}`);
-  }
-  try {
-    const {logLine} = require("./log");
-    let size = 0;
-    try {
-      const st = fs.statSync(outFile);
-      size = (st && st.size) || 0;
-    } catch (_) {}
-    const kb = size ? ` (${(size / 1024).toFixed(1)} KB)` : "";
-    const rel = path.relative(process.cwd(), outFile).split(path.sep).join("/");
-    logLine(`✓ Wrote ${rel}${kb}`, "cyan");
-  } catch (_) {}
+  return ensureClientRuntime();
 }
 
 // Build a small React globals vendor for client-side React pages.
@@ -1291,5 +1193,6 @@ module.exports = {
     } catch (_) {}
     APP_WRAPPER = null;
     UI_COMPONENTS = null;
+    cloverRuntimePromise = null;
   },
 };

package/lib/build/pages.js

@@ -203,13 +203,20 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
     try { const st = fs.statSync(runtimeAbs); rel += `?v=${Math.floor(st.mtimeMs || Date.now())}`; } catch (_) {}
     searchFormRel = rel;
   }
+  const moduleScriptRels = [];
+  if (viewerRel) moduleScriptRels.push(viewerRel);
+  if (sliderRel) moduleScriptRels.push(sliderRel);
+  const primaryClassicScripts = [];
+  if (heroRel) primaryClassicScripts.push(heroRel);
+  if (timelineRel) primaryClassicScripts.push(timelineRel);
+  if (facetsRel) primaryClassicScripts.push(facetsRel);
+  const secondaryClassicScripts = [];
+  if (searchFormRel) secondaryClassicScripts.push(searchFormRel);
   let jsRel = null;
-  if (needsHeroSlider && heroRel) jsRel = heroRel;
-  else if (needsFacets && sliderRel) jsRel = sliderRel;
-  else if (needsTimeline && timelineRel) jsRel = timelineRel;
-  else if (viewerRel) jsRel = viewerRel;
-  else if (sliderRel) jsRel = sliderRel;
-  else if (facetsRel) jsRel = facetsRel;
+  if (primaryClassicScripts.length) {
+    jsRel = primaryClassicScripts.shift();
+  }
+  const classicScriptRels = primaryClassicScripts.concat(secondaryClassicScripts);
   const needsReact = !!(needsHydrateViewer || needsHydrateSlider || needsFacets || needsTimeline);
   let vendorTag = '';
   if (needsReact) {
@@ -227,12 +234,18 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   } catch (_) {}
   const headSegments = [head];
   const extraScripts = [];
-  if (heroRel && jsRel !== heroRel) extraScripts.push(`<script defer src="${heroRel}"></script>`);
-  if (timelineRel && jsRel !== timelineRel) extraScripts.push(`<script defer src="${timelineRel}"></script>`);
-  if (facetsRel && jsRel !== facetsRel) extraScripts.push(`<script defer src="${facetsRel}"></script>`);
-  if (viewerRel && jsRel !== viewerRel) extraScripts.push(`<script defer src="${viewerRel}"></script>`);
-  if (sliderRel && jsRel !== sliderRel) extraScripts.push(`<script defer src="${sliderRel}"></script>`);
-  if (searchFormRel && jsRel !== searchFormRel) extraScripts.push(`<script defer src="${searchFormRel}"></script>`);
+  const pushClassicScript = (src) => {
+    if (!src || src === jsRel) return;
+    extraScripts.push(`<script defer src="${src}"></script>`);
+  };
+  const pushModuleScript = (src) => {
+    if (!src) return;
+    extraScripts.push(`<script type="module" src="${src}"></script>`);
+  };
+  classicScriptRels.forEach((src) => pushClassicScript(src));
+  if (moduleScriptRels.length) {
+    moduleScriptRels.forEach((src) => pushModuleScript(src));
+  }
   const extraStyles = [];
   if (heroCssRel) {
     let rel = heroCssRel;
@@ -244,8 +257,9 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
     extraStyles.push(`<link rel="stylesheet" href="${rel}">`);
   }
   if (extraStyles.length) headSegments.push(extraStyles.join(''));
+  if (vendorTag) headSegments.push(vendorTag);
   if (extraScripts.length) headSegments.push(extraScripts.join(''));
-  const headExtra = headSegments.join('') + vendorTag;
+  const headExtra = headSegments.join('');
   const typeForClass = resolvedType || 'page';
   const bodyClass = canopyBodyClassForType(typeForClass);
   const html = htmlShell({

package/lib/build/runtimes.js

@@ -4,7 +4,6 @@ const { fs, path, OUT_DIR, ensureDirSync } = require('../common');
 async function prepareAllRuntimes() {
   const mdx = require('./mdx');
   try { await mdx.ensureClientRuntime(); } catch (_) {}
-  try { if (typeof mdx.ensureSliderRuntime === 'function') await mdx.ensureSliderRuntime(); } catch (_) {}
   try { if (typeof mdx.ensureTimelineRuntime === 'function') await mdx.ensureTimelineRuntime(); } catch (_) {}
   try { if (typeof mdx.ensureHeroRuntime === 'function') await mdx.ensureHeroRuntime(); } catch (_) {}
   try { if (typeof mdx.ensureFacetsRuntime === 'function') await mdx.ensureFacetsRuntime(); } catch (_) {}

package/lib/components/slider-runtime-entry.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import CloverSlider from '@samvera/clover-iiif/slider';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
@@ -41,13 +40,29 @@ function withDefaults(rawProps) {
   };
 }
 
+let cloverSliderPromise = null;
+
+function loadCloverSlider() {
+  if (!cloverSliderPromise) {
+    cloverSliderPromise = import('@samvera/clover-iiif/slider')
+      .then((mod) => (mod && (mod.default || mod.Slider || mod)) || null)
+      .catch(() => null);
+  }
+  return cloverSliderPromise;
+}
+
 function mount(el) {
   try {
     if (!el || el.getAttribute('data-canopy-slider-mounted') === '1') return;
     const props = withDefaults(parseProps(el));
     const root = createRoot(el);
-    root.render(React.createElement(CloverSlider, props));
-    el.setAttribute('data-canopy-slider-mounted', '1');
+    loadCloverSlider().then((Component) => {
+      try {
+        if (!Component) return;
+        root.render(React.createElement(Component, props));
+        el.setAttribute('data-canopy-slider-mounted', '1');
+      } catch (_) {}
+    });
   } catch (_) {}
 }
 

package/lib/components/viewer-runtime-entry.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+function ready(fn) {
+  if (typeof document === 'undefined') return;
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+
+function parseProps(el) {
+  try {
+    const script = el.querySelector('script[type="application/json"]');
+    if (script) return JSON.parse(script.textContent || '{}');
+    const raw = el.getAttribute('data-props') || '{}';
+    return JSON.parse(raw);
+  } catch (_) {
+    return {};
+  }
+}
+
+const componentLoaders = {
+  viewer: () => import('@samvera/clover-iiif/viewer'),
+  scroll: () => import('@samvera/clover-iiif/scroll'),
+  image: () => import('@samvera/clover-iiif/image'),
+};
+
+const componentCache = new Map();
+
+function resolveComponent(key) {
+  if (!componentLoaders[key]) return Promise.resolve(null);
+  if (!componentCache.has(key)) {
+    const loader = componentLoaders[key];
+    componentCache.set(
+      key,
+      loader()
+        .then((mod) => {
+          if (!mod) return null;
+          return mod.default || mod.Viewer || mod.Scroll || mod.Image || mod;
+        })
+        .catch(() => null)
+    );
+  }
+  return componentCache.get(key);
+}
+
+function mountAll(selector, key) {
+  try {
+    const nodes = document.querySelectorAll(selector);
+    if (!nodes || !nodes.length) return;
+    const rootApi = typeof createRoot === 'function' ? createRoot : null;
+    if (!React || !rootApi) return;
+    resolveComponent(key).then((Component) => {
+      if (!Component) return;
+      nodes.forEach((el) => {
+        try {
+          if (el.__canopyHydrated) return;
+          const props = parseProps(el);
+          const root = rootApi(el);
+          root.render(React.createElement(Component, props));
+          el.__canopyHydrated = true;
+        } catch (_) {}
+      });
+    });
+  } catch (_) {}
+}
+
+ready(() => {
+  mountAll('[data-canopy-viewer]', 'viewer');
+  mountAll('[data-canopy-scroll]', 'scroll');
+  mountAll('[data-canopy-image]', 'image');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",