chore: migrate to Vitest

Author: targos

.eslintrc.yml

@@ -124,7 +124,7 @@ yarn.lock
 .DS_Store
 
 lib
-lib-esm
+lib-cjs
 
 # debug images
 src/**/*.tif
@@ -136,3 +136,5 @@ scripts/**/**.png
 scripts/**/**.json
 
 private
+
+.jest-image-snapshot-touched-files

.gitignore

@@ -45,7 +45,7 @@
    *
    * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
    */
-  "mainEntryPointFilePath": "<projectFolder>/lib-esm/index.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/lib/index.d.ts",
 
   /**
    * A list of NPM package names whose exports should be treated as part of this package.

api-extractor.json

@@ -1,4 +0,0 @@
-root: true
-extends: [cheminfo-react, cheminfo-typescript]
-rules:
-  no-console: off

demo/.eslintrc.yml

@@ -1,9 +1,9 @@
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
-import { CameraProvider } from '../contexts/cameraContext';
+import { CameraProvider } from '../contexts/cameraContext.provider.js';
 
-import Filters from './Filters';
-import Home from './Home';
+import Filters from './Filters.js';
+import Home from './Home.js';
 
 export default function App() {
   return (

demo/components/App.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 
-import { useCameraContext } from '../contexts/cameraContext';
+import { useCameraContext } from '../contexts/cameraContext.js';
 
-import UnavailableCamera from './UnavailableCamera';
+import UnavailableCamera from './UnavailableCamera.js';
 
 export default function CameraFeed() {
   const [{ selectedCamera }] = useCameraContext();
@@ -11,9 +11,9 @@ export default function CameraFeed() {
     const video = videoRef.current;
     if (!video || !selectedCamera) return;
     video.srcObject = selectedCamera.stream;
-    video.onloadedmetadata = () => {
-      video.play().catch((err: unknown) => console.error(err));
-    };
+    video.addEventListener('loadedmetadata', () => {
+      video.play().catch((error: unknown) => console.error(error));
+    });
   }, [selectedCamera]);
   if (!selectedCamera) {
     return <UnavailableCamera />;

demo/components/CameraFeed.tsx

@@ -1,4 +1,4 @@
-import { useCameraContext } from '../contexts/cameraContext';
+import { useCameraContext } from '../contexts/cameraContext.js';
 
 export default function CameraSelector() {
   const [{ cameras, selectedCamera }, dispatch] = useCameraContext();
@@ -29,7 +29,7 @@ export default function CameraSelector() {
                   camera: { device, stream },
                 });
               })
-              .catch((err: unknown) => console.error(err));
+              .catch((error: unknown) => console.error(error));
           }
         }}
       >

demo/components/CameraSelector.tsx

@@ -1,11 +1,12 @@
-import { MutableRefObject, RefObject } from 'react';
+import type { RefObject } from 'react';
 
-import { readCanvas, Image } from '../../src';
+import type { Image } from '../../src/index.js';
+import { readCanvas } from '../../src/index.js';
 
 interface CameraSnapshotButtonProps {
-  snapshotImageRef: MutableRefObject<Image | null>;
+  snapshotImageRef: RefObject<Image | null>;
   setSnapshotUrl: (snapshotUrl: string) => void;
-  canvasInputRef: RefObject<HTMLCanvasElement>;
+  canvasInputRef: RefObject<HTMLCanvasElement | null>;
 }
 
 export default function CameraSnapshotButton(props: CameraSnapshotButtonProps) {

demo/components/CameraSnapshotButton.tsx

@@ -1,20 +1,22 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { Image, readCanvas, writeCanvas } from '../../src';
-import { convertColor } from '../../src/operations/convertColor';
-import { useCameraContext } from '../contexts/cameraContext';
+import type { Image } from '../../src/index.js';
+import { readCanvas, writeCanvas } from '../../src/index.js';
+import { convertColor } from '../../src/operations/convertColor.js';
+import { useCameraContext } from '../contexts/cameraContext.js';
 
-import ErrorAlert from './ErrorAlert';
-import SnapshotImage from './SnapshotImage';
-import UnavailableCamera from './UnavailableCamera';
+import ErrorAlert from './ErrorAlert.js';
+import SnapshotImage from './SnapshotImage.js';
+import UnavailableCamera from './UnavailableCamera.js';
 
 export type TransformFunction =
   | ((image: Image) => Image)
   | ((image: Image, snapshot: Image | null) => Image);
 
 interface CameraTransformProps {
   transform: TransformFunction;
-  canvasInputRef: RefObject<HTMLCanvasElement>;
+  canvasInputRef: RefObject<HTMLCanvasElement | null>;
   snapshotUrl: string;
   snapshotImageRef: RefObject<Image | null>;
 }
@@ -36,7 +38,7 @@ export default function CameraTransform(props: CameraTransformProps) {
     const video = videoRef.current as HTMLVideoElement;
     let nextFrameRequest: number;
     video.srcObject = selectedCamera.stream;
-    video.onloadedmetadata = () => {
+    video.addEventListener('loadedmetadata', () => {
       video
         .play()
         .then(() => {
@@ -60,16 +62,16 @@ export default function CameraTransform(props: CameraTransformProps) {
                 result = convertColor(result, 'RGBA');
               }
               writeCanvas(result, canvasOutput);
-            } catch (err) {
-              setError(err.stack);
-              console.error(err);
+            } catch (error_) {
+              setError(error_.stack);
+              console.error(error_);
             }
             nextFrameRequest = requestAnimationFrame(nextFrame);
           }
           nextFrameRequest = requestAnimationFrame(nextFrame);
         })
-        .catch((err: unknown) => console.error(err));
-    };
+        .catch((error_: unknown) => console.error(error_));
+    });
 
     return () => {
       if (nextFrameRequest) {

demo/components/CameraTransform.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import Navbar from './Navbar';
+import Navbar from './Navbar.js';
 
 interface ContainerProps {
   title: string;