Create bundle

digirati-co-uk · Sep 14, 2022 · cd64874 · cd64874
1 parent 16ff5f2
commit cd64874
Show file tree

Hide file tree

Showing 19 changed files with 424 additions and 18 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -0,0 +1,7 @@
+{
+  "sandboxes": [
+    "new",
+    "react"
+  ],
+  "node": "16"
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,4 @@
 node_modules
+dist
+.idea
+.build
diff --git a/package.json b/package.json
@@ -1,11 +1,32 @@
 {
-  "name": "getty-viewer",
+  "name": "codex-book-viewer",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "dist/index.umd.js",
+  "module": "dist/bundle/esm/index.mjs",
+  "types": ".build/types/npm.d.ts",
+  "files": [
+    "dist",
+    ".build"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/bundle/cjs/index.js",
+      "import": "./dist/bundle/esm/index.mjs",
+      "default": "./dist/index.umd.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        ".build/types/npm.d.ts"
+      ]
+    }
+  },
   "license": "MIT",
   "scripts": {
     "start": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "prepublishOnly": "tsc -p . --declaration --emitDeclarationOnly && node ./scripts/build.mjs"
   },
   "resolutions": {
     "@atlas-viewer/iiif-image-api": "^2.0.3"
@@ -18,6 +39,8 @@
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "@vitejs/plugin-react": "^1.3.2",
+    "chalk": "^5.0.1",
+    "dts-bundle-generator": "^6.13.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "vite": "^2.9.13",

diff --git a/pkg-tests/index.html b/pkg-tests/index.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+<style>
+  body, html { min-height: 100vh; width: 100%; margin: 0; padding: 0; display: flex; }
+</style>
+<script src="../dist/index.umd.js"></script>
+
+<div id="viewer" style="position: relative; display: flex; flex: 1"></div>
+
+<script>
+  const el = document.getElementById('viewer');
+  window.CodexViewer.create(el, { manifest: 'https://wellcomelibrary.org/iiif/b18035723/manifest' })
+</script>
+
+</body>
+</html>
diff --git a/scripts/base-config.mjs b/scripts/base-config.mjs
@@ -0,0 +1,67 @@
+import react from '@vitejs/plugin-react';
+import chalk from "chalk";
+
+export const defaultExternal = [
+  '@iiif/vault',
+  '@iiif/vault-helpers',
+  '@iiif/parser',
+  'redux',
+  'typesafe-actions',
+  'react',
+  'react/jsx-runtime',
+  'react-dom',
+  'react-use',
+  'react-use-measure',
+  '@atlas-viewer/atlas',
+  '@atlas-viewer/iiif-image-api',
+  'react-iiif-vault',
+  '@atlas-viewer/atlas',
+];
+
+/**
+ * @param options {{ external: string[]; entry: string; name: string; globalName: string; outDir?: string; react?: boolean; globals: Record<string, string>; react18?: boolean; watch?: boolean }}
+ */
+export function defineConfig(options) {
+  return {
+    build: {
+      sourcemap: true,
+      outDir: options.outDir || `dist/${options.name}`,
+      lib: {
+        entry: options.entry,
+        name: options.globalName,
+        formats: options.globalName ? ['umd'] : ['es', 'cjs'],
+        fileName: (format) => {
+          if (format === 'umd') {
+            return `index.umd.js`;
+          }
+          if (format === 'es') {
+            return `esm/${options.name}.mjs`;
+          }
+          return `${format}/${options.name}.js`;
+        },
+      },
+      watch: options.watch,
+      plugins: [
+        options.react ?
+          options.react18 ?
+            react({ jsxRuntime: 'automatic', jsxPure: true, }) :
+            react({ jsxRuntime: 'classic', jsxPure: true, })
+          : false,
+      ].filter(Boolean),
+      rollupOptions: {
+        treeshake: true,
+        external: options.react18 ?
+          [...options.external, 'react-dom/client']
+          : options.external,
+        output: {
+          globals: options.globals,
+          inlineDynamicImports: !!options.globalName,
+        },
+      },
+    },
+  };
+}
+
+export function buildMsg(name) {
+  console.log(chalk.grey(`\n\nBuilding ${chalk.blue(name)}\n`));
+}
diff --git a/scripts/build.mjs b/scripts/build.mjs
@@ -0,0 +1,58 @@
+import { defineConfig } from './base-config.mjs';
+import { build } from 'vite';
+import chalk from 'chalk';
+
+(async () => {
+
+  const defaultExternal = [
+    '@iiif/vault',
+    '@iiif/vault-helpers',
+    '@iiif/parser',
+    'redux',
+    'typesafe-actions',
+    'react',
+    'react/jsx-runtime',
+    'react-dom',
+    'react-use',
+    'react-use-measure',
+    '@atlas-viewer/atlas',
+    '@atlas-viewer/iiif-image-api',
+    'react-iiif-vault',
+  ];
+
+  // Main UMD build.
+  buildMsg('UMD');
+  await build(
+    defineConfig({
+      entry: `src/npm.ts`,
+      name: 'index',
+      outDir: 'dist',
+      globalName: 'CodexViewer',
+      external: ['react', 'react-dom'],
+      react: true,
+      globals: {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+      }
+    })
+  );
+
+  buildMsg('Libraries');
+  await build(
+    defineConfig({
+      entry: `src/npm.ts`,
+      name: 'index',
+      outDir: 'dist/bundle',
+      external: [...defaultExternal],
+      react: true,
+      react18: true,
+    })
+  );
+
+  function buildMsg(name) {
+    console.log(chalk.grey(`\n\nBuilding ${chalk.blue(name)}\n`));
+  }
+  function listItem(name) {
+    console.log(chalk.gray(`- ${chalk.green(name)}`));
+  }
+})();
diff --git a/scripts/validate.mjs b/scripts/validate.mjs
@@ -0,0 +1,77 @@
+import { promises as FS } from "node:fs";
+import chalk from "chalk";
+
+const pkgJson = await FS.readFile(`./package.json`);
+const pkg = JSON.parse(pkgJson.toString());
+
+let _indent = 2;
+let _indentBy = 4;
+
+function logWithIndent(msg) {
+  console.log(chalk.gray(`${new Array(_indent + 1).fill("").join(" ")}${msg}`));
+}
+
+async function checkFile(file, description) {
+  logWithIndent(`${description ? `"${chalk.cyanBright(description)}": ` : ''}${chalk.blue(`"${file}"`)} ${chalk.green(`✓`)} exists`);
+  await FS.stat(file);
+}
+
+function indent() {
+  _indent += _indentBy;
+}
+
+function dedent(arr = false) {
+  _indent -= _indentBy;
+  logWithIndent(arr ? ']' : '}');
+}
+
+console.log(chalk.gray(`
+Validating ${chalk.blue(`package.json`)}
+`))
+
+logWithIndent(`{`);
+
+await checkFile(pkg.main, "main");
+await checkFile(pkg.module, "module");
+await checkFile(pkg.types, "types");
+
+const exportKeys = Object.keys(pkg.exports);
+logWithIndent(`"exports": {`);
+indent();
+for (const exportKey of exportKeys) {
+  if (typeof pkg.exports[exportKey] === "string") {
+    await checkFile(pkg.exports[exportKey], exportKey);
+    continue;
+  }
+  logWithIndent(`"${exportKey}": {`);
+  const variations = Object.keys(pkg.exports[exportKey]);
+  indent();
+  for (const variation of variations) {
+    await checkFile(pkg.exports[exportKey][variation], variation);
+  }
+  dedent();
+}
+dedent();
+
+
+const typesVersionKeys = Object.keys(pkg.typesVersions);
+logWithIndent(`"typesVersions": {`);
+indent();
+for (const typesVersionKey of typesVersionKeys) {
+  const variations = Object.keys(pkg.typesVersions[typesVersionKey]);
+  logWithIndent(`"${typesVersionKey}": {`);
+  indent();
+  for (const variation of variations) {
+    const listOfTypes = pkg.typesVersions[typesVersionKey][variation];
+    logWithIndent(`"${variation}": [`);
+    indent();
+    for (const pathToTypescriptFile of listOfTypes) {
+      await checkFile(pathToTypescriptFile);
+    }
+    dedent(true);
+  }
+  dedent();
+}
+dedent();
+
+console.log(chalk.greenBright(`\n\n ✓ package.json is valid`));
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,13 @@
-import { GettyViewer } from './GettyViewer';
+import { CodexViewer } from './CodexViewer';
 
 export function App() {
   // return (
-  //   <GettyViewer manifest="https://digirati-co-uk.github.io/wunder.json" />
+  //   <CodexViewer manifest="https://digirati-co-uk.github.io/wunder.json" />
   // );
   return (
-    <GettyViewer manifest="https://digirati-co-uk.github.io/florentine-data-exploration/iiif3/vol3.json" initCanvas={324} />
+    <CodexViewer
+      manifest="https://digirati-co-uk.github.io/florentine-data-exploration/iiif3/vol3.json"
+      initCanvas={324}
+    />
   );
 }
diff --git a/src/GettyViewer.tsx → src/CodexViewer.tsx b/src/GettyViewer.tsx → src/CodexViewer.tsx
@@ -1,18 +1,18 @@
 import { Grid } from './components/Grid/Grid';
 import { Sidebar } from './components/Sidebar/Sidebar';
-import { VaultProvider } from 'react-iiif-vault';
+import { useExternalManifest, VaultProvider } from "react-iiif-vault";
 import { ThumbnailPagedList } from './components/ThumbnailPagedList/ThumbnailPagedList';
 import { MainProvider } from './components/MainProvider/MainProvider';
 import { DeepZoomViewer } from './components/DeepZoomViewer/DeepZoomViewer';
 import { Actions } from "./components/Actions/Actions";
 import { useState } from "react";
 
-interface GettyViewerProps {
+export interface CodexViewerProps {
   manifest: string;
   initCanvas: number;
 }
 
-export function GettyViewer(props: GettyViewerProps) {
+export function CodexViewer(props: CodexViewerProps) {
   const [paging, setPaging] = useState(true);
 
   const handleLayout = (x: string) => {

diff --git a/src/atlas-components/Image.tsx b/src/atlas-components/Image.tsx
@@ -1,7 +1,9 @@
 import { ImageWithOptionalService } from 'react-iiif-vault';
 import { ImageCandidate } from '@atlas-viewer/iiif-image-api';
 import { Fragment } from 'react';
-import { TileSet } from '@atlas-viewer/atlas';
+import { TileSet as _TileSet } from '@atlas-viewer/atlas';
+
+const TileSet: any = _TileSet;
 
 export function Image({
   id,

diff --git a/src/components/Actions/Actions.tsx b/src/components/Actions/Actions.tsx
@@ -38,7 +38,7 @@ export function Actions(props: ActionsProps) {
       <Divider />
 
       <Zoom>
-        +<Slider type="range" min={1} max={100} value={zoom} onChange={(e) => setZoom(e.target.value)}></Slider>-
+        +<Slider type="range" min={1} max={100} value={zoom} onChange={(e) => setZoom(e.target.valueAsNumber)}></Slider>-
       </Zoom>
       <Divider />
       <IconButton>

diff --git a/src/components/MainProvider/MainProvider.tsx b/src/components/MainProvider/MainProvider.tsx
@@ -6,7 +6,7 @@ interface MainProviderProps {
   children: ReactElement;
   paging: boolean;
 }
-export function MainProvider( props: MainProviderProps) {
+export function MainProvider(props: MainProviderProps) {
   // Fixes bug with react-iiif-vault where it shows a "something went wrong error".
   const resp = useExternalManifest(props.manifest);
 

diff --git a/src/components/SingleCanvasThumbnail/SingleCanvasThumbnail.tsx b/src/components/SingleCanvasThumbnail/SingleCanvasThumbnail.tsx
@@ -9,7 +9,7 @@ export function SingleCanvasThumbnail({ size }: { size: number }) {
     height: size,
   });
   const canvas = useCanvas();
-  const title = canvas.summary ? getValue(canvas.summary) : getValue(canvas.label);
+  const title = canvas ? (canvas.summary ? getValue(canvas.summary) : getValue(canvas.label)) : '';
 
   if (!thumbnail) {
     return <ThumbnailPlaceholder />;

diff --git a/src/components/ThumbnailPagedList/ThumbnailPageList.styles.ts b/src/components/ThumbnailPagedList/ThumbnailPageList.styles.ts
@@ -34,7 +34,7 @@ export const ThumbnailPlaceholder = styled.div`
   background: ${greyBg};
 `;
 
-export const ThumbnailImage = styled(LazyLoadImage)`
+export const ThumbnailImage = styled(LazyLoadImage as any)`
   display: block;
   max-width: 100%;
   object-fit: contain;

diff --git a/src/components/ThumbnailPagedList/ThumbnailPagedList.tsx b/src/components/ThumbnailPagedList/ThumbnailPagedList.tsx
@@ -20,6 +20,10 @@ export function ThumbnailPagedList() {
     }
   }, [currentCanvasIndex]);
 
+  if (!manifest) {
+    return null;
+  }
+
   return (
     <ThumbnailViewer>
       {manifest.items.map((canvasRef, idx) => {