publish browser, CJS and ESM versions in a single npm package

Author: maslick

README.md

@@ -60,7 +60,7 @@ npm install @maslick/koder
 ```
 
 ```javascript
-// CommonJS format
+// CommonJS
 const Koder = require('@maslick/koder');
 
 // ES6 modules

dist/browser.js

@@ -0,0 +1,35 @@
+class Koder {
+  initialize(config) {
+    return (async () => {
+      // Load WASM file
+      console.log("Browser");
+      config ||= {};
+      const directory = config.wasmDirectory || "./wasm";
+      this.mod = await CreateKoder({locateFile: file => `${directory}/${file}`});
+
+      // Initialize a glue API object (between JavaScript and C++ code)
+      this.api = {
+        createBuffer: this.mod.cwrap('createBuffer', 'number', ['number']),
+        deleteBuffer: this.mod.cwrap('deleteBuffer', '', ['number']),
+        triggerDecode: this.mod.cwrap('triggerDecode', 'number', ['number', 'number', 'number']),
+        getScanResults: this.mod.cwrap('getScanResults', 'number', [])
+      };
+
+      // return the class
+      return this;
+    })();
+  }
+
+  decode(imgData, width, height) {
+    const buffer = this.api.createBuffer(width * height * 4);
+    this.mod.HEAPU8.set(imgData, buffer);
+    const results = [];
+    if (this.api.triggerDecode(buffer, width, height) > 0) {
+      const resultAddress = this.api.getScanResults();
+      results.push(this.mod.UTF8ToString(resultAddress));
+      this.api.deleteBuffer(resultAddress);
+    }
+    if (results.length > 0) return results[0];
+    else return null;
+  }
+}

dist/index.js

@@ -4,6 +4,7 @@ class Koder {
   get initialized() {
     return (async () => {
       // Load WASM file
+      console.log("CJS");
       this.mod = await CreateKoder();
 
       // Initialize a glue API object (between JavaScript and C++ code)

dist/index.mjs

@@ -0,0 +1,37 @@
+import CreateKoder from './zbar.js';
+
+class Koder {
+  get initialized() {
+    return (async () => {
+      // Load WASM file
+      console.log("ESM");
+      this.mod = await CreateKoder();
+
+      // Initialize a glue API object (between JavaScript and C++ code)
+      this.api = {
+        createBuffer: this.mod.cwrap('createBuffer', 'number', ['number']),
+        deleteBuffer: this.mod.cwrap('deleteBuffer', '', ['number']),
+        triggerDecode: this.mod.cwrap('triggerDecode', 'number', ['number', 'number', 'number']),
+        getScanResults: this.mod.cwrap('getScanResults', 'number', [])
+      };
+
+      // return the class
+      return this;
+    })();
+  }
+
+  decode(imgData, width, height) {
+    const buffer = this.api.createBuffer(width * height * 4);
+    this.mod.HEAPU8.set(imgData, buffer);
+    const results = [];
+    if (this.api.triggerDecode(buffer, width, height) > 0) {
+      const resultAddress = this.api.getScanResults();
+      results.push(this.mod.UTF8ToString(resultAddress));
+      this.api.deleteBuffer(resultAddress);
+    }
+    if (results.length > 0) return results[0];
+    else return null;
+  }
+}
+
+export default Koder;

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maslick/koder",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "QR/bar code scanner for the Browser",
   "author": "Pavel Maslov",
   "license": "MIT",
@@ -29,5 +29,10 @@
     "upca",
     "upce"
   ],
-  "main": "index.js"
+  "exports": {
+    ".": {
+      "require": "./index.cjs",
+      "import": "./index.mjs"
+    }
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "koder-react",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "homepage": "./",
   "private": true,
   "description": "QR/bar code scanner for the Browser",

public/wasm/koder.js

@@ -1,10 +1,11 @@
 class Koder {
-  get initialized() {
+  initialize(config) {
     return (async () => {
       // Load WASM file
-      this.mod = await CreateKoder({
-        locateFile: file => `wasm/${file}`,
-      });
+      console.log("Browser");
+      config ||= {};
+      const directory = config.wasmDirectory || "./wasm";
+      this.mod = await CreateKoder({locateFile: file => `${directory}/${file}`});
 
       // Initialize a glue API object (between JavaScript and C++ code)
       this.api = {

public/wasmWorker.js

@@ -4,7 +4,7 @@ importScripts("wasm/koder.js");
 
 (async () => {
   // Initialize Koder
-  const koder = await new Koder().initialized;
+  const koder = await new Koder().initialize({wasmDirectory: "./wasm"});
 
   // Listen for messages from JS main thread containing raw image data
   self.addEventListener('message', event => {