Skip to content

Commit

Permalink
feat: add react hooks and components
Browse files Browse the repository at this point in the history
  • Loading branch information
Sec-ant committed Aug 21, 2024
1 parent 4e8bb86 commit 68520bd
Show file tree
Hide file tree
Showing 48 changed files with 2,521 additions and 187 deletions.
3 changes: 1 addition & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,7 @@ The wasm binary won't be fetched or instantiated unless a [read](#readbarcodesfr
import { getZXingModule } from "zxing-wasm";

/**
* This function will trigger the download and
* instantiation of the wasm binary immediately
* This function will trigger the download and instantiation of the wasm binary immediately
*/
const zxingModulePromise1 = getZXingModule();

Expand Down
6 changes: 6 additions & 0 deletions biome.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@
}
}
},
{
"include": ["react/components"],
"formatter": {
"lineWidth": 120
}
},
{
"include": ["package.json"],
"json": {
Expand Down
4 changes: 4 additions & 0 deletions copy-files-from-to.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
{
"from": "./src/full/*.wasm",
"to": "./dist/full/"
},
{
"from": "./src/stream/media-track-shims.d.ts",
"to": "./dist/"
}
],
"copyFilesSettings": {
Expand Down
11 changes: 7 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
<!doctype html>
<html>
<html lang="en">
<head>
<title>ZXing Reader Demo</title>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZXing WASM React</title>
</head>
<body>
<div></div>
<script type="module" src="./main.ts"></script>
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>
18 changes: 0 additions & 18 deletions main.ts

This file was deleted.

45 changes: 45 additions & 0 deletions main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/// <reference types="./src/stream/media-track-shims" />

import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import { StreamBarcodeDetector } from "./src/react/components/StreamBarcodeDetector.js";

import type { InitConstraints } from "./src/stream/index.js";

const App = () => {
const [initConstraints] = useState<InitConstraints>({
video: {
aspectRatio: undefined,
},
});

const [videoConstraints] = useState<MediaTrackConstraints>({
advanced: [
{
exposureMode: "continuous",
},
],
});

return (
<StreamBarcodeDetector
onScanDetect={(r) => {
console.log(r);
}}
onStreamInspect={(c) => {
console.log(c);
}}
initConstraints={initConstraints}
videoConstraints={videoConstraints}
scanThrottle={0}
negativeDebounce={0}
formats={["QRCode"]}
/>
);
};

ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
45 changes: 42 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,35 @@
},
"./reader/zxing_reader.wasm": "./dist/reader/zxing_reader.wasm",
"./writer/zxing_writer.wasm": "./dist/writer/zxing_writer.wasm",
"./full/zxing_full.wasm": "./dist/full/zxing_full.wasm"
"./full/zxing_full.wasm": "./dist/full/zxing_full.wasm",
"./scanner": {
"import": "./dist/es/scanner/index.js",
"require": "./dist/cjs/scanner/index.js",
"default": "./dist/es/scanner/index.js"
},
"./stream": {
"import": "./dist/es/stream/index.js",
"require": "./dist/cjs/stream/index.js",
"default": "./dist/es/stream/index.js"
},
"./media-track-shims": {
"types": "./dist/media-track-shims.d.ts"
},
"./react": {
"import": "./dist/es/react/index.js",
"require": "./dist/cjs/react/index.js",
"default": "./dist/es/react/index.js"
},
"./react/components": {
"import": "./dist/es/react/components/index.js",
"require": "./dist/cjs/react/components/index.js",
"default": "./dist/es/react/components/index.js"
},
"./react/hooks": {
"import": "./dist/es/react/hooks/index.js",
"require": "./dist/cjs/react/hooks/index.js",
"default": "./dist/es/react/hooks/index.js"
}
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -66,7 +94,7 @@
"submodule:update": "git submodule update --remote",
"cmake": "emcmake cmake -S src/cpp -B build",
"build:wasm": "cmake --build build -j$(($(nproc) - 1))",
"copy:wasm": "copy-files-from-to",
"copy": "copy-files-from-to",
"docs:dev": "conc \"npm:docs:preview\" \"typedoc --watch --excludeInternal\"",
"docs:build": "typedoc --excludeInternal",
"docs:preview": "vite preview --outDir ./docs",
Expand Down Expand Up @@ -101,11 +129,17 @@
"@changesets/cli": "^2.27.7",
"@types/babel__core": "^7.20.5",
"@types/node": "^22.4.2",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vanilla-extract/css": "^1.14.1",
"@vanilla-extract/vite-plugin": "^4.0.4",
"concurrently": "^8.2.2",
"copy-files-from-to": "^3.11.0",
"lint-staged": "^15.2.9",
"prettier": "^3.3.3",
"pretty-quick": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^6.0.1",
"simple-git-hooks": "^2.11.1",
"tsx": "^4.17.0",
Expand All @@ -115,7 +149,12 @@
"vite-plugin-babel": "^1.2.0"
},
"dependencies": {
"@types/emscripten": "^1.39.13"
"@types/emscripten": "^1.39.13",
"just-compare": "^2.3.0",
"sha1-uint8array": "^0.10.7",
"type-fest": "^4.10.2",
"webrtc-adapter": "^8.2.3",
"zustand": "^4.5.1"
},
"overrides": {
"typedoc": {
Expand Down
20 changes: 15 additions & 5 deletions scripts/build-iife.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { rimraf } from "rimraf";
import { type LibraryOptions, build } from "vite";
import viteConfig from "../vite.config.js";
import { emscriptenBun } from "./vite-plugin-emscripten-bun.js";

async function buildIife() {
await rimraf("dist/iife");
await Promise.all(
Object.entries((viteConfig.build?.lib as LibraryOptions).entry).map(
([entryAlias, entryPath]) => {
Object.entries((viteConfig.build?.lib as LibraryOptions).entry)
// TODO: pay attention to the order
.slice(0, 3)
.map(([entryAlias, entryPath]) => {
return build({
...viteConfig,
build: {
Expand All @@ -19,14 +22,21 @@ async function buildIife() {
formats: ["iife"],
name: "ZXingWASM",
},
rollupOptions: undefined,
rollupOptions: {
external: ["react"],
output: {
globals: {
react: "React",
},
},
},
outDir: "dist/iife",
emptyOutDir: false,
},
configFile: false,
plugins: [emscriptenBun()],
});
},
),
}),
);
}

Expand Down
68 changes: 68 additions & 0 deletions scripts/vite-plugin-emscripten-bun.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import type { PluginItem } from "@babel/core";
import {
binaryExpression,
identifier,
logicalExpression,
stringLiteral,
unaryExpression,
variableDeclaration,
variableDeclarator,
} from "@babel/types";
import babel from "vite-plugin-babel";

function emscriptenBunBabel(): PluginItem {
return {
visitor: {
VariableDeclaration(path) {
if (
path.node.kind === "var" &&
path.node.declarations[0]?.id.type === "Identifier" &&
path.node.declarations[0]?.id.name === "ENVIRONMENT_IS_WEB"
) {
path.insertAfter([
variableDeclaration("var", [
variableDeclarator(
identifier("ENVIRONMENT_IS_BUN"),
binaryExpression(
"!==",
unaryExpression("typeof", identifier("Bun")),
stringLiteral("undefined"),
),
),
]),
]);
}
},
LogicalExpression(path) {
if (
path.node.operator === "||" &&
path.node.left.type === "Identifier" &&
(path.node.left.name === "ENVIRONMENT_IS_WEB" ||
path.node.left.name === "ENVIRONMENT_IS_WORKER") &&
path.node.right.type === "Identifier" &&
(path.node.right.name === "ENVIRONMENT_IS_WORKER" ||
path.node.right.name === "ENVIRONMENT_IS_WEB")
) {
path.replaceWith(
logicalExpression(
"||",
path.node,
identifier("ENVIRONMENT_IS_BUN"),
),
);
path.skip();
}
},
},
};
}

export function emscriptenBun() {
return babel({
babelConfig: {
plugins: [emscriptenBunBabel()],
},
filter: /zxing_(reader|writer|full)\.js$/,
include: /zxing_(reader|writer|full)\.js$/,
});
}
8 changes: 5 additions & 3 deletions src/bindings/barcodeFormat.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ export const barcodeFormats = [
export type BarcodeFormat = (typeof barcodeFormats)[number];

/**
* Barcode formats that can be used in {@link ReaderOptions.formats | `ReaderOptions.formats`} to read barcodes.
* Barcode formats that can be used in {@link ReaderOptions.formats | `ReaderOptions.formats`} to
* read barcodes.
*/
export type ReadInputBarcodeFormat = Exclude<BarcodeFormat, "None">;

/**
* Barcode formats that can be used in {@link WriterOptions.format | `WriterOptions.format`} to write barcodes.
* Barcode formats that can be used in {@link WriterOptions.format | `WriterOptions.format`} to write
* barcodes.
*/
export type WriteInputBarcodeFormat = Exclude<
BarcodeFormat,
Expand Down Expand Up @@ -73,7 +75,7 @@ export function formatFromString(format: string): BarcodeFormat {
let end = barcodeFormats.length - 1;
while (start <= end) {
const mid = Math.floor((start + end) / 2);
const midElement = barcodeFormats[mid];
const midElement = barcodeFormats[mid]!;
const normalizedMidElement = normalizeFormatString(midElement);
if (normalizedMidElement === normalizedTarget) {
return midElement;
Expand Down
2 changes: 1 addition & 1 deletion src/bindings/binarizer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,5 @@ export function binarizerToZXingEnum<T extends "reader" | "full">(
}

export function zxingEnumToBinarizer(zxingEnum: ZXingEnum): Binarizer {
return binarizers[zxingEnum.value];
return binarizers[zxingEnum.value]!;
}
2 changes: 1 addition & 1 deletion src/bindings/characterSet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,5 +53,5 @@ export function characterSetToZXingEnum<T extends ZXingModuleType>(
}

export function zxingEnumToCharacterSet(zxingEnum: ZXingEnum): CharacterSet {
return characterSets[zxingEnum.value];
return characterSets[zxingEnum.value]!;
}
2 changes: 1 addition & 1 deletion src/bindings/contentType.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,5 @@ export function contentTypeToZXingEnum<T extends "reader" | "full">(
}

export function zxingEnumToContentType(zxingEnum: ZXingEnum): ContentType {
return contentTypes[zxingEnum.value];
return contentTypes[zxingEnum.value]!;
}
2 changes: 1 addition & 1 deletion src/bindings/eanAddOnSymbol.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@ export function eanAddOnSymbolToZXingEnum<T extends "reader" | "full">(
export function zxingEnumToEanAddOnSymbol(
zxingEnum: ZXingEnum,
): EanAddOnSymbol {
return eanAddOnSymbols[zxingEnum.value];
return eanAddOnSymbols[zxingEnum.value]!;
}
Loading

0 comments on commit 68520bd

Please sign in to comment.