[expo-camera] Remove @koale/useworker (#23967)

# Why

`@koale/useworker` is only used for Web QR code scanning and has been
causing some issues due to lack of maintenance.

Fixes: expo/expo#17846
Related: expo/expo#23296, and the PR to revert
its 'fix' expo/expo-cli#4746

# How

Refactors the existing code to use vanilla JS

1. We create a inline webworker by creating an inline blob with
`qrWorkerMethod.toString()` (code adapted from `@koale/useworker`)
2. Create a smaller wrapper that tracks messages being sent to the
worker via a queue of promises

As the worker is synchronous and will receive messages in order a simple
First In First Out queue should suffice.

This does _slightly_ change the functionality of the existing code. 

1. Previously we created a new Worker for every instance of `<Camera
/>`. Now a single worker is shared across all instances.
1. As the worker is declared in the global scope, it is created
regardless if QR code scanning is enabled. We could lazy initialise it,
but because its extremely small and inline (no network requests) I don't
see this being an issue.

I also removed an extra `useEffect` hook by moving its logic into the
cleanup step of the enabling hook.

Author: marklawlor

CHANGELOG.md

@@ -10,6 +10,7 @@
 
 - Fixed flash is not enabled during recordings. ([#23776](https://github.com/expo/expo/pull/23776) by [@tszheichoi](https://github.com/tszheichoi))
 - On iOS, fix dead frames when starting a video recording. ([#22037](https://github.com/expo/expo/pull/22037) by [@alanjhughes](https://github.com/alanjhughes))
+- Remove @koale/useworker. ([#23967](https://github.com/expo/expo/pull/23967) by [@marklawlor](https://github.com/marklawlor))
 
 ### 💡 Others
 

build/useWebQRScanner.d.ts.map

@@ -34,7 +34,6 @@
     "preset": "expo-module-scripts"
   },
   "dependencies": {
-    "@koale/useworker": "^4.0.2",
     "invariant": "^2.2.4"
   },
   "devDependencies": {

build/useWebQRScanner.js

@@ -1,4 +1,3 @@
-import { useWorker } from '@koale/useworker';
 import * as React from 'react';
 
 import { BarCodeScanningResult, CameraPictureOptions, MountErrorListener } from './Camera.types';
@@ -37,12 +36,41 @@ const qrWorkerMethod = ({ data, width, height }: ImageData): any => {
   return parsed;
 };
 
-function useRemoteJsQR() {
-  return useWorker(qrWorkerMethod, {
-    remoteDependencies: ['https://cdn.jsdelivr.net/npm/[email protected]/dist/jsQR.min.js'],
-    autoTerminate: false,
-  });
-}
+const createWorkerAsyncFunction = <T extends (data: any) => any>(fn: T, deps: string[]) => {
+  const stringifiedFn = [
+    `self.func = ${fn.toString()};`,
+    'self.onmessage = (e) => {',
+    '  const result = self.func(e.data);',
+    '  self.postMessage(result);',
+    '};',
+  ];
+
+  if (deps.length > 0) {
+    stringifiedFn.unshift(`importScripts(${deps.map((dep) => `'${dep}'`).join(', ')});`);
+  }
+
+  const blob = new Blob(stringifiedFn, { type: 'text/javascript' });
+  const worker = new Worker(URL.createObjectURL(blob));
+
+  // First-In First-Out queue of promises
+  const promises: {
+    resolve: (value: ReturnType<T>) => void;
+    reject: (reason?: any) => void;
+  }[] = [];
+
+  worker.onmessage = (e) => promises.shift()?.resolve(e.data);
+
+  return (data: Parameters<T>[0]) => {
+    return new Promise<ReturnType<T>>((resolve, reject) => {
+      promises.push({ resolve, reject });
+      worker.postMessage(data);
+    });
+  };
+};
+
+const decode = createWorkerAsyncFunction(qrWorkerMethod, [
+  'https://cdn.jsdelivr.net/npm/[email protected]/dist/jsQR.min.js',
+]);
 
 export function useWebQRScanner(
   video: React.MutableRefObject<HTMLVideoElement | null>,
@@ -63,8 +91,6 @@ export function useWebQRScanner(
   const isRunning = React.useRef<boolean>(false);
   const timeout = React.useRef<number | undefined>(undefined);
 
-  const [decode, clearWorker] = useRemoteJsQR();
-
   async function scanAsync() {
     // If interval is 0 then only scan once.
     if (!isRunning.current || !onScanned) {
@@ -109,15 +135,12 @@ export function useWebQRScanner(
     if (isEnabled) {
       isRunning.current = true;
       scanAsync();
-    } else {
-      stop();
     }
-  }, [isEnabled]);
 
-  React.useEffect(() => {
     return () => {
-      stop();
-      clearWorker.kill();
+      if (isEnabled) {
+        stop();
+      }
     };
-  }, []);
+  }, [isEnabled]);
 }