refactor: migrate to ESM-only (#485)

Author: targos

.github/workflows/nodejs.yml

@@ -8,6 +8,7 @@ on:
 
 jobs:
   nodejs:
+    # Documentation: https://github.com/zakodium/workflows#nodejs-ci
     uses: zakodium/workflows/.github/workflows/nodejs.yml@nodejs-v1
     with:
       lint-check-types: true

.ncurc.yml

@@ -1,3 +1,3 @@
 reject:
-  # Package is now ESM-only
+  # Package is now asynchronous
   - 'image-type'

.prettierignore

@@ -0,0 +1 @@
+CHANGELOG.md

README.md

@@ -1,17 +1,32 @@
+<h3 align="center">
+  <a href="https://www.zakodium.com">
+    <img src="https://www.zakodium.com/brand/zakodium-logo-white.svg" width="50" alt="Zakodium logo" />
+  </a>
+  <p>
+    Maintained by <a href="https://www.zakodium.com">Zakodium</a>
+  </p>
+</h3>
+
 # image-js
 
-[![NPM version][npm-image]][npm-url]
-[![build status][ci-image]][ci-url]
-[![Test coverage][codecov-image]][codecov-url]
-[![npm download][download-image]][download-url]
+[![NPM version](https://img.shields.io/npm/v/image-js.svg)](https://www.npmjs.com/package/image-js)
+[![npm download](https://img.shields.io/npm/dm/image-js.svg)](https://www.npmjs.com/package/image-js)
+[![test coverage](https://img.shields.io/codecov/c/github/image-js-typescript/image-js-typescript.svg)](https://codecov.io/gh/image-js/image-js-typescript)
+[![license](https://img.shields.io/npm/l/image-js.svg)](https://github.com/image-js/image-js-typescript/blob/main/LICENSE)
 
 Image processing and manipulation in JavaScript.
 
 ## Installation
 
-`$ npm i image-js`
+```console
+npm install image-js
+```
+
+## API
 
-## [API](https://image-js.github.io/image-js-typescript/)
+### [Complete API documentation](https://image-js.github.io/image-js-typescript/)
+
+### [Usage docs and guides](https://image-js-docs.pages.dev/docs/Getting%20started)
 
 ## Development
 
@@ -20,12 +35,3 @@ See [Development documentation](./Development.md).
 ## License
 
 [MIT](./LICENSE)
-
-[npm-image]: https://img.shields.io/npm/v/image-js.svg
-[npm-url]: https://www.npmjs.com/package/image-js
-[ci-image]: https://github.com/image-js/image-js-typescript/actions/workflows/nodejs.yml/badge.svg
-[ci-url]: https://github.com/image-js/image-js-typescript/actions/workflows/nodejs.yml
-[codecov-image]: https://img.shields.io/codecov/c/github/image-js/image-js-typescript.svg
-[codecov-url]: https://codecov.io/gh/image-js/image-js-typescript
-[download-image]: https://img.shields.io/npm/dm/image-js.svg
-[download-url]: https://www.npmjs.com/package/image-js

api-extractor.json

@@ -103,7 +103,7 @@
      * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
      * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
      */
-    "tsconfigFilePath": "<projectFolder>/tsconfig.esm.json"
+    "tsconfigFilePath": "<projectFolder>/tsconfig.build.json"
     /**
      * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
      * The object must conform to the TypeScript tsconfig schema:

demo/.eslintrc.yml

@@ -14,7 +14,7 @@ export default function CameraSelector() {
       <select
         id="camera"
         name="camera"
-        className="block w-full py-2 pl-3 pr-10 mt-1 text-base border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+        className="block w-full py-2 pl-3 pr-10 mt-1 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
         value={selectedCamera?.device.label}
         onChange={(event) => {
           const device = cameras.find(

demo/components/CameraSelector.tsx

@@ -16,6 +16,7 @@ export default function CameraSnapshotButton(props: CameraSnapshotButtonProps) {
       const url = canvasInputRef.current.toDataURL();
       const image = readCanvas(canvasInputRef.current);
       setSnapshotUrl(url);
+      // eslint-disable-next-line react-hooks/react-compiler
       snapshotImageRef.current = image;
     }
   }

demo/components/CameraSnapshotButton.tsx

@@ -45,6 +45,7 @@ export default function CameraTransform(props: CameraTransformProps) {
           const canvasInput = canvasInputRef.current as HTMLCanvasElement;
           const canvasOutput = canvasOutputRef.current as HTMLCanvasElement;
           if (!canvasInput || !canvasOutput) return;
+          // eslint-disable-next-line react-hooks/react-compiler
           canvasInput.height = video.videoHeight;
           canvasInput.width = video.videoWidth;
           const inputContext = canvasInput.getContext(
@@ -63,7 +64,7 @@ export default function CameraTransform(props: CameraTransformProps) {
               }
               writeCanvas(result, canvasOutput);
             } catch (error_) {
-              setError(error_.stack);
+              setError((error_ as Error).stack as string);
               console.error(error_);
             }
             nextFrameRequest = requestAnimationFrame(nextFrame);

demo/components/CameraTransform.tsx

@@ -7,9 +7,9 @@ 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';
+import { testCannyEdge } from './testFunctions/testCannyEdge.js';
 
-const testTransform: TransformFunction = testGetFastKeypoints;
+const testTransform: TransformFunction = testCannyEdge;
 
 export default function Home() {
   const snapshotImageRef = useRef<Image>(null);