image-js · targos · Jan 20, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 16, 2025
diff --git a/.eslintrc.yml b/.eslintrc.yml
diff --git a/.github/workflows/release-head.yml b/.github/workflows/release-head.yml
@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install dependencies
         run: npm install

diff --git a/.github/workflows/typedoc.yml b/.github/workflows/typedoc.yml
@@ -8,7 +8,7 @@ on:
   pull_request:
 
 env:
-  NODE_VERSION: 20.x
+  NODE_VERSION: 22.x
   ENTRY_FILE: 'src/index.ts'
 
 jobs:

diff --git a/.gitignore b/.gitignore
@@ -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
diff --git a/README.md b/README.md
@@ -13,8 +13,6 @@ Image processing and manipulation in JavaScript.
 
 ## [API](https://image-js.github.io/image-js-typescript/)
 
-Look at the [examples](./examples) directory for how the API is being designed.
-
 ## Development
 
 See [Development documentation](./Development.md).

diff --git a/api-extractor.json b/api-extractor.json
@@ -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.

diff --git a/demo/.eslintrc.yml b/demo/.eslintrc.yml
@@ -1,4 +0,0 @@
-root: true
-extends: [cheminfo-react, cheminfo-typescript]
-rules:
-  no-console: off

diff --git a/demo/components/App.tsx b/demo/components/App.tsx
@@ -1,11 +1,11 @@
 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 (
    <CameraProvider>
      <HashRouter>

diff --git a/demo/components/CameraFeed.tsx b/demo/components/CameraFeed.tsx
@@ -1,18 +1,22 @@
 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();
  const videoRef = useRef<HTMLVideoElement>(null);
  useEffect(() => {
     const video = videoRef.current;
     if (!video || !selectedCamera) return;
     video.srcObject = selectedCamera.stream;
-    video.onloadedmetadata = () => {
-      video.play().catch((err: unknown) => console.error(err));
+    const onLoadedMetadata = () => {
+      video.play().catch((error: unknown) => console.error(error));
+    };
+    video.addEventListener('loadedmetadata', onLoadedMetadata);
+    return () => {
+      video.removeEventListener('loadedmetadata', onLoadedMetadata);
     };
   }, [selectedCamera]);
   if (!selectedCamera) {

diff --git a/demo/components/CameraSelector.tsx b/demo/components/CameraSelector.tsx
@@ -1,6 +1,6 @@
-import { useCameraContext } from '../contexts/cameraContext';
+import { useCameraContext } from '../contexts/cameraContext.js';
 
 export default function CameraSelector() {
   const [{ cameras, selectedCamera }, dispatch] = useCameraContext();
  if (cameras.length === 0) return null;
  return (
@@ -29,7 +29,7 @@
                   camera: { device, stream },
                 });
               })
-              .catch((err: unknown) => console.error(err));
+              .catch((error: unknown) => console.error(error));
           }
         }}
       >

diff --git a/demo/components/CameraSnapshotButton.tsx b/demo/components/CameraSnapshotButton.tsx
@@ -1,14 +1,15 @@
-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) {
  const { setSnapshotUrl, snapshotImageRef, canvasInputRef } = props;
  function handleClick() {
    if (canvasInputRef.current) {

diff --git a/demo/components/CameraTransform.tsx b/demo/components/CameraTransform.tsx
@@ -1,25 +1,27 @@
-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>;
 }

 export default function CameraTransform(props: CameraTransformProps) {
  const { canvasInputRef, transform, snapshotUrl, snapshotImageRef } = props;
  const [{ selectedCamera }] = useCameraContext();
  const videoRef = useRef<HTMLVideoElement>(null);
@@ -36,7 +38,7 @@
     const video = videoRef.current as HTMLVideoElement;
     let nextFrameRequest: number;
     video.srcObject = selectedCamera.stream;
-    video.onloadedmetadata = () => {
+    const onLoadedMetadata = () => {
       video
         .play()
         .then(() => {
@@ -60,18 +62,20 @@
                 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_));
     };
+    video.addEventListener('loadedmetadata', onLoadedMetadata);
 
     return () => {
+      video.removeEventListener('loadedmetadata', onLoadedMetadata);
       if (nextFrameRequest) {
         cancelAnimationFrame(nextFrameRequest);
       }

diff --git a/demo/components/Container.tsx b/demo/components/Container.tsx
@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import Navbar from './Navbar';
+import Navbar from './Navbar.js';
 
 interface ContainerProps {
   title: string;
  children: ReactNode;
 }
 export default function Container(props: ContainerProps) {
  return (
    <div>
      <Navbar />

diff --git a/demo/components/ErrorAlert.tsx b/demo/components/ErrorAlert.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export default function ErrorAlert(props: { children: ReactNode }) {
   return (
    <div className="p-4 text-red-800 bg-red-200 rounded">{props.children}</div>
  );

diff --git a/demo/components/Filters.tsx b/demo/components/Filters.tsx
@@ -1,5 +1,5 @@
-import Container from './Container';
+import Container from './Container.js';
 
 export default function Filters() {
   return <Container title="Filters">Filters</Container>;
 }
diff --git a/demo/components/Home.tsx b/demo/components/Home.tsx
@@ -1,20 +1,20 @@
 import { useRef, useState } from 'react';
 
-import { Image } from '../../src';
+import type { Image } from '../../src/index.js';
 
-import CameraSelector from './CameraSelector';
-import CameraSnapshotButton from './CameraSnapshotButton';
-import CameraTransform, { TransformFunction } from './CameraTransform';
-import Container from './Container';
-import { testGetFastKeypoints } from './testFunctions/testGetFastKeypoints';
+import CameraSelector from './CameraSelector.js';
+import CameraSnapshotButton from './CameraSnapshotButton.js';
+import type { TransformFunction } from './CameraTransform.js';
+import CameraTransform from './CameraTransform.js';
+import Container from './Container.js';
+import { testGetFastKeypoints } from './testFunctions/testGetFastKeypoints.js';
 
 const testTransform: TransformFunction = testGetFastKeypoints;
 
 export default function Home() {
   const snapshotImageRef = useRef<Image>(null);
   const canvasInputRef = useRef<HTMLCanvasElement>(null);
   const [snapshotUrl, setSnapshotUrl] = useState('');
-  console.log(snapshotUrl);
   return (
     <Container title="Home">
       <div className="space-y-1">

diff --git a/demo/components/SnapshotImage.tsx b/demo/components/SnapshotImage.tsx
@@ -4,5 +4,7 @@ interface SnapshotImageProps {
 
 export default function SnapshotImage(props: SnapshotImageProps) {
   const { snapshotUrl: snapshot } = props;
-  return <img style={{ transform: 'scaleX(-1)' }} src={snapshot} />;
+  return snapshot ? (
+    <img alt="snapshot" style={{ transform: 'scaleX(-1)' }} src={snapshot} />
+  ) : null;
 }
diff --git a/demo/components/UnavailableCamera.tsx b/demo/components/UnavailableCamera.tsx
@@ -1,4 +1,4 @@
-import ErrorAlert from './ErrorAlert';
+import ErrorAlert from './ErrorAlert.js';
 
 export default function UnavailableCamera() {
   return <ErrorAlert>Camera is not available.</ErrorAlert>;

diff --git a/demo/components/comparisonFunctions/testComputeSsim.ts b/demo/components/comparisonFunctions/testComputeSsim.ts
@@ -1,10 +1,10 @@
-import { Image } from '../../../src';
-import { computeSsim } from '../../../src/compare/computeSsim';
+import { computeSsim } from '../../../src/compare/computeSsim.js';
+import { Image } from '../../../src/index.js';
 
 /**
  * Compute the structural similarity of the input image and the image blurred.
- *
  * @param image - Input image.
+ * @param snapshot
  * @returns The structural similarity matrix.
  */
 export function testComputeSsim(image: Image, snapshot: Image | null): Image {

diff --git a/demo/components/testFunctions/testCannyEdge.ts b/demo/components/testFunctions/testCannyEdge.ts
@@ -1,8 +1,8 @@
-import { convertBinaryToGrey, Image } from '../../../src';
+import type { Image } from '../../../src/index.js';
+import { convertBinaryToGrey } from '../../../src/index.js';
 
 /**
  * Detect the edges in the image using Canny edge detection
- *
  * @param image - Input image.
  * @returns The treated image.
  */
@@ -19,7 +19,6 @@ export function testCannyEdge(image: Image): Image {
 
 /**
  * Detect the edges in the image using Canny edge detection and overlay the edges on the original image.
- *
  * @param image - Input image.
  * @returns The treated image.
  */

diff --git a/demo/components/testFunctions/testColorRois.ts b/demo/components/testFunctions/testColorRois.ts
@@ -1,9 +1,8 @@
-import { Image } from '../../../src';
-import { fromMask, colorRois } from '../../../src/roi';
+import { Image } from '../../../src/index.js';
+import { fromMask, colorRois } from '../../../src/roi/index.js';
 
 /**
  * Make a mask out of the image and detect all ROIs. Returns only the white ROIs on a black background.
- *
  * @param image - Input image.
  * @returns The treated image.
  */

diff --git a/demo/components/testFunctions/testCopyTo.ts b/demo/components/testFunctions/testCopyTo.ts
@@ -1,8 +1,7 @@
-import { Image } from '../../../src';
+import { Image } from '../../../src/index.js';
 
 /**
  * Copy a black and a red square to the source image.
- *
  * @param image - Input image.
  * @returns The treated image.
  */

diff --git a/demo/components/testFunctions/testCorrectColor.ts b/demo/components/testFunctions/testCorrectColor.ts
@@ -1,15 +1,14 @@
-import { Image } from '../../../src';
-import { polishAltered } from '../../../src/correctColor/__tests__/testUtils/imageColors';
-import { referenceColorCard } from '../../../src/correctColor/__tests__/testUtils/referenceColorCard';
-import { correctColor } from '../../../src/correctColor/correctColor';
+import { polishAltered } from '../../../src/correctColor/__tests__/testUtils/imageColors.js';
+import { referenceColorCard } from '../../../src/correctColor/__tests__/testUtils/referenceColorCard.js';
+import { correctColor } from '../../../src/correctColor/correctColor.js';
 import {
   getMeasuredColors,
   getReferenceColors,
-} from '../../../src/correctColor/utils/formatData';
+} from '../../../src/correctColor/utils/formatData.js';
+import type { Image } from '../../../src/index.js';
 
 /**
  * Copy a black and a red square to the source image.
- *
  * @param image - Input image.
  * @returns The treated image.
  */

diff --git a/demo/components/testFunctions/testCrop.ts b/demo/components/testFunctions/testCrop.ts
@@ -1,4 +1,4 @@
-import { Image } from '../../../src';
+import type { Image } from '../../../src/index.js';
 // options
 const cropImageRatio = 2; // defines the size of the cropped image
 const interval = 2; // defines the speed

diff --git a/demo/components/testFunctions/testDerivativeFilter.ts b/demo/components/testFunctions/testDerivativeFilter.ts
@@ -1,8 +1,7 @@
-import { Image } from '../../../src';
+import type { Image } from '../../../src/index.js';
 
 /**
  * Apply a derivative filter to the source image.
- *
  * @param image - Input image.
  * @returns The treated image.
  */

diff --git a/demo/components/testFunctions/testExtract.ts b/demo/components/testFunctions/testExtract.ts
@@ -1,8 +1,7 @@
-import { fromMask, Image } from '../../../src';
+import { fromMask, Image } from '../../../src/index.js';
 
 /**
  * Extract the pixels of a mask from the image.
- *
  * @param image - Input image.
  * @returns The treated image.
  */

diff --git a/demo/components/testFunctions/testGetBorderPoints.ts b/demo/components/testFunctions/testGetBorderPoints.ts
@@ -1,7 +1,8 @@
-import { fromMask, Image, Mask } from '../../../src';
+import type { Image } from '../../../src/index.js';
+import { fromMask, Mask } from '../../../src/index.js';
 /**
  * Paint the border of the larger black ROI on the image.
- * @param image The image to process
+ * @param image - The image to process
  * @returns The processed image.
  */
 export function testGetBorderPoints(image: Image): Image {

diff --git a/demo/components/testFunctions/testGetConvexHull.ts b/demo/components/testFunctions/testGetConvexHull.ts
@@ -1,8 +1,8 @@
-import { fromMask, Image } from '../../../src';
+import type { Image } from '../../../src/index.js';
+import { fromMask } from '../../../src/index.js';
 
 /**
  * Draw the convex Hull polygon of the largest ROI in green and display the filled ROI in purple.
- *
  * @param image - Input image.
  * @returns The image with the convex Hull.
  */

diff --git a/demo/components/testFunctions/testGetFastKeypoints.ts b/demo/components/testFunctions/testGetFastKeypoints.ts
@@ -1,9 +1,8 @@
-import { Image } from '../../../src';
-import { getFastKeypoints } from '../../../src/featureMatching/keypoints/getFastKeypoints';
+import { getFastKeypoints } from '../../../src/featureMatching/keypoints/getFastKeypoints.js';
+import type { Image } from '../../../src/index.js';
 
 /**
  * Find the FAST keypoints in the video.
- *
  * @param image - Input image.
  * @returns The image with the fast keypoints.
  */