Update to use vite + vitest

__tests__/CanvasDownloadLinks.test.js

@@ -44,7 +44,7 @@ describe('CanvasDownloadLinks', () => {
   let currentBoundsSpy;
 
   beforeEach(() => {
-    currentBoundsSpy = jest.spyOn(CanvasDownloadLinks.prototype, 'currentBounds');
+    currentBoundsSpy = vi.spyOn(CanvasDownloadLinks.prototype, 'currentBounds');
   });
 
   afterEach(() => {
@@ -197,8 +197,8 @@ describe('CanvasDownloadLinks', () => {
 
     describe('For Images Less Than 1000px Wide', () => {
       it('does not render a smaller version link if image is under 1000px wide', () => {
-        canvas.getWidth = () => 999;
-        createWrapper({ canvas });
+        const smallCanvas = { ...canvas, getWidth: () => 999 };
+        createWrapper({ canvas: smallCanvas });
 
         const links = screen.getAllByRole('link');
         expect(links).toHaveLength(2); // Should only show full-size version and link to PDF.

__tests__/MiradorDownloadDialog.test.js

@@ -49,7 +49,7 @@ describe('Dialog', () => {
   });
 
   it('calls the closeDialog function when the close button is clicked', async () => {
-    const closeDialog = jest.fn();
+    const closeDialog = vi.fn();
     createWrapper({ closeDialog });
     const closeButton = await screen.findByText(/mirador-dl-plugin\.close/);
     fireEvent.click(closeButton);

__tests__/miradorDownloadPlugin.test.js

@@ -28,8 +28,8 @@ describe('miradorDownloadPlugin', () => {
 
 describe('MenuItem', () => {
   it('triggers both openDownloadDialog and handleClose when "Download" is clicked', async () => {
-    const handleClose = jest.fn();
-    const openDownloadDialog = jest.fn();
+    const handleClose = vi.fn();
+    const openDownloadDialog = vi.fn();
     createWrapper({ handleClose, openDownloadDialog });
     const openDownloadDialogButton = await screen.findByText(/mirador-dl-plugin\.download/);
     fireEvent.click(openDownloadDialogButton);

__tests__/test-utils.js

@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import { createStore, applyMiddleware } from 'redux';
 import { thunk } from 'redux-thunk';
 import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-import createRootReducer from 'mirador/dist/es/src/state/reducers/rootReducer';
-import settings from 'mirador/dist/es/src/config/settings';
+import { rootReducer as createRootReducer, settings } from 'mirador';
 
 const rootReducer = createRootReducer();
 const theme = createTheme(settings.theme);

demo/src/index.js

@@ -1,4 +1,4 @@
-import Mirador from 'mirador/dist/es/src/index';
+import Mirador from 'mirador';
 import miradorDownloadPlugins from '../../src';
 
 const config = {

package.json

@@ -1,31 +1,25 @@
 {
   "name": "mirador-dl-plugin",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "mirador-dl-plugin React component",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "./dist/mirador-dl-plugin.js",
+  "module": "./dist/mirador-dl-pugin.es.js",
   "files": [
-    "css",
-    "es",
-    "lib",
-    "umd"
+    "dist"
   ],
+  "exports": {
+    "./src": "./src/index.js"
+  },
   "scripts": {
-    "build": "npm run build:umd && npm run build:demo",
-    "build:demo": "NODE_ENV=development webpack --mode=development",
-    "build:umd": "NODE_ENV=production webpack --mode=production",
-    "build:es": "mkdir -p es && cp -r src/* es && NODE_ENV=production MODULE_FORMAT=es npx babel es -d es",
-    "build:cjs": "mkdir -p lib && cp -r src/* lib && NODE_ENV=production MODULE_FORMAT=cjs npx babel lib -d lib",
-    "clean": "rm -rf ./umd && rm -rf ./es && rm -rf ./lib && rm -rf ./demo/dist",
-    "lint": "eslint ./src ./__tests__",
-    "prepublishOnly": "npm run clean && npm run build:es && npm run build:cjs && npm run build",
-    "start": "NODE_ENV=development webpack serve --open",
-    "test": "npm run lint && jest",
-    "test:coverage": "jest --coverage",
-    "test:watch": "jest --watch"
+    "build": "vite build --config vite.config.js",
+    "clean": "rm -rf ./dist",
+    "lint": "npx eslint ./",
+    "prepublishOnly": "npm run build",
+    "start": "vite",
+    "test": "npm run lint && npx vitest run",
+    "test:coverage": "npm run lint && npx vitest run --coverage"
   },
   "dependencies": {
-    "@emotion/babel-plugin": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6"
@@ -38,48 +32,31 @@
     "react-dom": "18.x"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.7",
-    "@babel/eslint-parser": "^7.5.4",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-regenerator": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
     "@mui/material": "^5.x",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@testing-library/dom": "^9.2.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^9.1.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.4",
     "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^27.1.5",
+    "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "html-loader": "^5.0.0",
-    "html-webpack-plugin": "^5.6.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.4.3",
-    "jest-puppeteer": "^9.0.2",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "glob": "^10.3.0",
+    "happy-dom": "^15.11.7",
     "lodash": "^4.17.15",
     "mirador": "^4.0.0-alpha.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "terser-webpack-plugin": "^5.3.1",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.7.4"
+    "vite": "^6.0.0",
+    "vitest": "^2.1.4",
+    "vitest-fetch-mock": "^0.4.2"
   },
   "author": "",
   "homepage": "",

setupJest.js → setupTest.js

@@ -1 +1,2 @@
 import '@testing-library/jest-dom';
+import { vi } from 'vitest';

vite.config.js

@@ -0,0 +1,86 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import fs from 'fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'url';
+import { globSync } from 'glob';
+import pkg from './package.json';
+
+/**
+* Vite configuration
+*/
+export default defineConfig({
+  ...(
+    process.env.NETLIFY ? {
+      build: {
+        rollupOptions: {
+          external: ['__tests__/*', '__mocks__/*'],
+          input: Object.fromEntries(
+            globSync('./demo/src/*.html').map((file) => [
+              // This remove `src/` as well as the file extension from each
+              // file, so e.g. src/nested/foo.js becomes nested/foo
+              path.relative(
+                'demo/src/',
+                file.slice(0, file.length - path.extname(file).length),
+              ),
+              // This expands the relative paths to absolute paths, so e.g.
+              // src/nested/foo becomes /project/src/nested/foo.js
+              fileURLToPath(new URL(file, import.meta.url)),
+            ]),
+          ),
+        },
+        sourcemap: true,
+      },
+    } : {
+      build: {
+        lib: {
+          entry: './src/index.js',
+          fileName: (format) => (format === 'umd' ? 'mirador-dl-plugin.js' : 'mirador-dl-plugin.es.js'),
+          formats: ['es', 'umd'],
+          name: 'MiradorDlPlugin',
+        },
+        rollupOptions: {
+          external: [...Object.keys(pkg.peerDependencies || {}), '__tests__/*', '__mocks__/*'],
+          output: {
+            assetFileNames: 'mirador-dl-plugin.[ext]',
+          },
+        },
+        sourcemap: true,
+      },
+    }
+  ),
+  esbuild: {
+    exclude: [],
+    // Matches .js and .jsx in __tests__ and .jsx in src
+    include: [/__tests__\/.*\.(js|jsx)$/, /src\/.*\.jsx?$/],
+    loader: 'jsx',
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [
+        {
+          name: 'load-js-files-as-jsx',
+          // TODO: rename all our files to .jsx ...
+          /** */
+          setup(build) {
+            build.onLoad({ filter: /(src|__tests__)\/.*\.js$/ }, async (args) => ({
+              contents: await fs.readFile(args.path, 'utf8'),
+              loader: 'jsx',
+            }));
+          },
+        },
+      ],
+    },
+    include: ['@emotion/styled'],
+  },
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@tests/': fileURLToPath(new URL('./__tests__', import.meta.url)),
+    },
+  },
+  server: {
+    open: '/demo/src/index.html',
+    port: '4444',
+  },
+});