[FEATURE] ES6 import support / configurable zbar.wasm source file

[thompalstra]

Describe the bug

Currently the path for the zbar.wasm file is hardcoded to "zbar.wasm" which doesn't work well for web applications.

The provided file also doesn't work for import via `import barcodeDetectorPolyfill from "path/index.js".

To Reproduce

import barcodeDetectorPolyfill from "{path}/index.js";

try {
    window['BarcodeDetector'].getSupportedFormats()
} catch {
    window['BarcodeDetector'] = barcodeDetectorPolyfill.BarcodeDetectorPolyfill
}
window['BarcodeDetector'] = barcodeDetectorPolyfill.BarcodeDetectorPolyfill;
var formats = await window['BarcodeDetector'].getSupportedFormats();
this.barcodeDetector = new BarcodeDetector({ formats: formats });

...

this.barcodeDetector.detect(bitmap);

A minimal working example that reproduces the behavior would be much appreciated.

Any .html file with

https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.9.15/dist/index.js and https://cdn.jsdelivr.net/npm/@undecaf/barcode-detector-polyfill@0.9.21/dist/index.js.

Preferred would be the barcode-detector-polyfill/index.js would return an export default and the zbar.wasm path could be configured as such:

import barcodeDetectorPolyfill from "{path}/index.js";

barcodeDetectorPolyfill.zbarWasmPath = "/some/arbitrary/path.wasm";
...

[undecaf]

Not a bug, I have added this example which is working exactly the way you described as not working.

As a side note, the proposed extension:

import barcodeDetectorPolyfill from "{path}/index.js";
barcodeDetectorPolyfill.zbarWasmPath = "/some/arbitrary/path.wasm";

would not be feasible since zbar.wasm is loaded already in the course of the import statement.

[thompalstra]

Hi there,

My apoligies for creating a bug issue. I didn't have any other option to select.

Not a bug, I have added this example which is working exactly the way you described as not working.

This example doesn't use any import statements/modules. The script is loaded direct causing the variable barcodeDetectorPolyfill to be available in the window element.

When I attempt to use it as an import module:

    <script type="module">
        import "https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.9.15/dist/index.js";
        import "https://cdn.jsdelivr.net/npm/@undecaf/barcode-detector-polyfill@0.9.21/dist/index.js";
        // or import barcodeDetectorPolyfill from "https://cdn.jsdelivr.net/npm/@undecaf/barcode-detector-polyfill@0.9.21/dist/index.js";

        console.log(barcodeDetectorPolyfill);
    </script>

I receive the following error(s):

main.ts:7 Uncaught ReferenceError: zbarWasm is not defined
    at main.ts:7:34
(anonymous) @ main.ts:7

GET http://localhost/zbar.wasm net::ERR_ABORTED 404 (Not Found)
zbar.js:9 

This is due to the zbar.wasm being defined as a relative path within the zbar-wasm/dist/index.js and this causes an import to resolve the path to the current path + "zbar.wasm".

It would make more sense (in my honest opinion) to not only support npm modules (or "old" scripts) but also newer ES6 imports.

[undecaf]

ES6 imports work like so (added this example for completeness) [edit: source code of example]:

<script type="module">
    // Please note: .../main.js instead of .../index.js
    import { BarcodeDetectorPolyfill } from "https://cdn.jsdelivr.net/npm/@undecaf/barcode-detector-polyfill@0.9.21/dist/main.js";

    console.log(BarcodeDetectorPolyfill);
</script>