@scanly/react 2.0.0 → 2.1.0

package/README.md

@@ -1,3 +1,30 @@
 # @scanly/react
 
-Thin lifecycle adapter around `@scanly/browser`. Decoding remains outside React; unmount disposes the browser session and Worker.
+Thin React adapter over `@scanly/browser` for Scanly SDK v2.1.0. Decoding, Worker ownership, camera runtime, tracking, and memory management remain outside React.
+
+```bash
+npm install @scanly/react
+```
+
+```tsx
+"use client";
+import { useScanly } from "@scanly/react";
+
+export function UploadScanner() {
+  const { outcome, scanning, scanFile, cancel } = useScanly();
+  return <>
+    <input type="file" accept="image/*" onChange={(event) => {
+      const file = event.currentTarget.files?.[0];
+      if (file) void scanFile(file);
+    }} />
+    <button onClick={cancel} disabled={!scanning}>Cancel</button>
+    <output>{outcome?.ok ? outcome.primary.rawText : ""}</output>
+  </>;
+}
+```
+
+`useScanly` owns one `BrowserCaptureSession`, starts it after mount, and disposes its session and Worker on unmount. For camera UI, compose `BrowserCameraSource` from `@scanly/browser` in an effect and stop/dispose it in the effect cleanup.
+
+This is the standard public React package for React 18 and 19-compatible peer ranges (`>=18 <20`).
+
+Version: 2.1.0 · [React usage](https://github.com/Yangjunjie-Lin/Scanly/blob/main/docs/sdk/usage.md)

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,KAAK,4BAA4B,EAAE,KAAK,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,sBAAsB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;IAC7E,MAAM,IAAI,IAAI,CAAC;IACf,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,SAAS,CAAC,OAAO,GAAE,4BAAiC,GAAG,eAAe,CAsBrF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,KAAK,4BAA4B,EAAE,KAAK,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,qBAAqB,CAAC;IAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,sBAAsB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;IAC7E,MAAM,IAAI,IAAI,CAAC;IACf,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,SAAS,CAAC,OAAO,GAAE,4BAAiC,GAAG,eAAe,CA6DrF"}

package/dist/index.js

@@ -1,28 +1,72 @@
 "use client";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { BrowserCaptureSession } from "@scanly/browser";
 export function useScanly(options = {}) {
     const [session] = useState(() => new BrowserCaptureSession(options));
     const [outcome, setOutcome] = useState(null);
     const [scanning, setScanning] = useState(false);
+    const mounted = useRef(true);
+    const stateEpoch = useRef(0);
+    const nextCallId = useRef(0);
+    const latestCallId = useRef(0);
+    const activeCalls = useRef(new Map());
+    const lifecycleGeneration = useRef(0);
     useEffect(() => {
+        const calls = activeCalls.current;
+        lifecycleGeneration.current += 1;
+        mounted.current = true;
+        setScanning(calls.size > 0);
         session.initialize();
         session.start();
-        return () => { void session.dispose(); };
+        return () => {
+            mounted.current = false;
+            stateEpoch.current += 1;
+            calls.clear();
+            session.cancel();
+            const cleanupGeneration = ++lifecycleGeneration.current;
+            queueMicrotask(() => {
+                if (lifecycleGeneration.current === cleanupGeneration)
+                    void session.dispose();
+            });
+        };
     }, [session]);
     const scanFile = useCallback(async (file, scanOptions = {}) => {
-        setScanning(true);
+        const callId = ++nextCallId.current;
+        const epoch = stateEpoch.current;
+        latestCallId.current = callId;
+        activeCalls.current.set(callId, epoch);
+        if (mounted.current)
+            setScanning(true);
         try {
             const next = await session.scanFile(file, scanOptions);
-            setOutcome(next);
+            if (mounted.current && stateEpoch.current === epoch && latestCallId.current === callId)
+                setOutcome(next);
             return next;
         }
         finally {
+            if (stateEpoch.current === epoch) {
+                activeCalls.current.delete(callId);
+                if (mounted.current)
+                    setScanning(activeCalls.current.size > 0);
+            }
+        }
+    }, [session]);
+    const cancel = useCallback(() => {
+        stateEpoch.current += 1;
+        activeCalls.current.clear();
+        session.cancel();
+        if (mounted.current)
+            setScanning(false);
+    }, [session]);
+    const reset = useCallback(() => {
+        stateEpoch.current += 1;
+        activeCalls.current.clear();
+        session.cancel();
+        if (mounted.current) {
             setScanning(false);
+            setOutcome(null);
         }
     }, [session]);
-    const cancel = useCallback(() => { session.cancel(); setScanning(false); }, [session]);
-    const reset = useCallback(() => { session.cancel(); setScanning(false); setOutcome(null); }, [session]);
     return { session, outcome, scanning, scanFile, cancel, reset };
 }
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAkE,MAAM,iBAAiB,CAAC;AAYxH,MAAM,UAAU,SAAS,CAAC,UAAwC,EAAE;IAClE,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IACjE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,UAAU,EAAE,CAAC;QACrB,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE,IAAU,EAAE,cAAsC,EAAE,EAAE,EAAE;QAC1F,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;YACvD,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO,IAAI,CAAC;QACd,CAAC;gBAAS,CAAC;YACT,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACvF,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACxG,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;AACjE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,33 +1,43 @@
-{
-  "name": "@scanly/react",
-  "version": "2.0.0",
-  "description": "React lifecycle adapter for Scanly browser SDK",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json"
-  },
-  "dependencies": {
-    "@scanly/browser": "2.0.0"
-  },
-  "peerDependencies": {
-    "react": ">=18 <20"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.3",
-    "react": "^18.3.1"
-  }
-}
+{
+  "name": "@scanly/react",
+  "version": "2.1.0",
+  "description": "React adapter for the Scanly browser barcode scanning runtime",
+  "keywords": ["barcode", "qr-code", "scanner", "react", "hook", "scanly"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Yangjunjie-Lin/Scanly.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/Yangjunjie-Lin/Scanly#readme",
+  "bugs": {
+    "url": "https://github.com/Yangjunjie-Lin/Scanly/issues"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json"
+  },
+  "dependencies": {
+    "@scanly/browser": "2.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18 <20"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "react": "^18.3.1"
+  }
+}