Bunch of updates in preparation for publish

.gitattributes

@@ -1,2 +1 @@
-build/* binary
 build/* linguist-generated=true

.gitignore

@@ -1,5 +1,5 @@
 /.vscode/c_cpp_properties.json
-/node_modules
+node_modules
 /deps/*
 !/deps/libgphoto2
 !/deps/libusb

Makefile

@@ -15,15 +15,15 @@ export LDFLAGS += $(COMMON_FLAGS)
 
 ## Main API module
 
-build/libapi.mjs: api.o $(SYSROOT)/lib/libltdl.la $(SYSROOT)/lib/libgphoto2.la
+build/libapi.mjs: src/api.o $(SYSROOT)/lib/libltdl.la $(SYSROOT)/lib/libgphoto2.la
 	libtool --verbose --mode=link $(LD) $(LDFLAGS) -o $@ $+ \
 		-fexceptions --bind -s ASYNCIFY -s ALLOW_MEMORY_GROWTH \
 		-dlpreopen $(SYSROOT)/lib/libgphoto2/2.5.28.1/ptp2.la \
 		-dlpreopen $(SYSROOT)/lib/libgphoto2_port/0.12.0/usb1.la
 
-api.o: deps/libgphoto2/configure.ac
+src/api.o: deps/libgphoto2/configure.ac
-api.o: CPPFLAGS += -Ideps/libgphoto2 -Ideps/libgphoto2/libgphoto2_port
+src/api.o: CPPFLAGS += -Ideps/libgphoto2 -Ideps/libgphoto2/libgphoto2_port
-api.o: CXXFLAGS += -std=c++17 -fexceptions -pthread
+src/api.o: CXXFLAGS += -std=c++17 -fexceptions -pthread
 
 ## Generic rules for deps
 

README.md

@@ -4,16 +4,14 @@ A gPhoto2 implementation using WebAssembly to control DSLR cameras from the brow
 
 Powered by a [custom fork](https://github.com/RReverser/libgphoto2) of [libgphoto2](https://github.com/gphoto/libgphoto2), the [WebUSB](https://github.com/WICG/webusb) backend of [libusb](https://github.com/libusb/libusb), and WebAssembly via [Emscripten](https://emscripten.org/).
 
-# NPM
-
 ## Installation
+
 ```bash
 npm install web-gphoto2
-// or
-yarn add web-gphoto2
 ```
 
 ## Usage
+
 A short example on how to use this package:
 
 ```ts
@@ -55,7 +53,7 @@ async function captureImageAsFile() {
 }
 ```
 
-# Demo
+## Demo
 
 This repository also contains a [demo app](https://web.dev/porting-libusb-to-webusb/) running gPhoto2 on the Web:
 ![A picture of DSLR camera connected via a USB cable to a laptop. The laptop is running the Web demo mentioned in the article, which mirrors a live video feed from the camera as well as allows to tweak its settings via form controls.](https://web-dev.imgix.net/image/9oK23mr86lhFOwKaoYZ4EySNFp02/MR4YGRvl0Z9AWT6vv3sQ.jpg?auto=format&w=1600)
@@ -64,20 +62,21 @@ For the detailed technical write-up, see [the official blog post](https://web.de
 
 If you don't have a DSLR, you can check out a recording of the demo below:
 
-https://user-images.githubusercontent.com/557590/152155035-a1664656-a7d9-411f-8cb3-5f04320f1391.mp4
+<https://user-images.githubusercontent.com/557590/152155035-a1664656-a7d9-411f-8cb3-5f04320f1391.mp4>
 
 ## Building
 
-To build, you'll need Docker. Then:
+To build the WebAssembly part of the repo, you'll need Docker. Then:
 
 ```bash
 ./build.sh # runs build in Docker
 npx serve examples/preact # starts a local server with COOP/COEP
 ```
 
-Then, navigate to http://localhost:3000/ in Chrome.
+Then, navigate to <http://localhost:3000/> in Chrome.
 
 ## Common Issues
+
 <details>
 <summary>
 SharedArrayBuffer can not be found
@@ -123,6 +122,7 @@ export default defineConfig({
   },
 });
 ```
+
 </details>
 
 ## See also

build/camera.d.ts

@@ -0,0 +1,24 @@
+export type { Config, SupportedOps } from '../build/libapi.mjs';
+export declare function rethrowIfCritical(err: any): void;
+export declare class Camera {
+    #private;
+    static showPicker(): Promise<void>;
+    connect(): Promise<void>;
+    disconnect(): Promise<void>;
+    getConfig(): Promise<{
+        name: string;
+        info: string;
+        label: string;
+        readonly: boolean;
+    } & {
+        type: "window";
+        children: Record<string, import("../build/libapi.mjs").Config>;
+    } & {
+        type: "window";
+    }>;
+    getSupportedOps(): Promise<import("../build/libapi.mjs").SupportedOps>;
+    setConfigValue(name: string, value: string | number | boolean): Promise<void>;
+    capturePreviewAsBlob(): Promise<Blob>;
+    captureImageAsFile(): Promise<File>;
+    consumeEvents(): Promise<boolean>;
+}

build/camera.js

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
+ */
+import initModule from '../build/libapi.mjs';
+// A helper that allows to distinguish critical errors from library errors.
+export function rethrowIfCritical(err) {
+    // If it's precisely Error, it's a custom error; anything else - SyntaxError,
+    // WebAssembly.RuntimeError, TypeError, etc. - is treated as critical here.
+    if (err?.constructor !== Error) {
+        throw err;
+    }
+}
+const INTERFACE_CLASS = 6; // PTP
+const INTERFACE_SUBCLASS = 1; // MTP
+let ModulePromise;
+export class Camera {
+    #queue = Promise.resolve();
+    #context = null;
+    static async showPicker() {
+        // @ts-ignore
+        await navigator.usb.requestDevice({
+            filters: [
+                {
+                    classCode: INTERFACE_CLASS,
+                    subclassCode: INTERFACE_SUBCLASS
+                }
+            ]
+        });
+    }
+    async connect() {
+        if (!ModulePromise) {
+            ModulePromise = initModule();
+        }
+        let Module = await ModulePromise;
+        this.#context = await new Module.Context();
+    }
+    async #schedule(op) {
+        let res = this.#queue.then(() => op(this.#context));
+        this.#queue = res.catch(rethrowIfCritical);
+        return res;
+    }
+    async disconnect() {
+        if (this.#context && !this.#context.isDeleted()) {
+            this.#context.delete();
+        }
+    }
+    async getConfig() {
+        return this.#schedule(context => context.configToJS());
+    }
+    async getSupportedOps() {
+        if (this.#context) {
+            return await this.#context.supportedOps();
+        }
+        throw new Error('You need to connect to the camera first');
+    }
+    async setConfigValue(name, value) {
+        let uiTimeout;
+        await this.#schedule(context => {
+            // This is terrible, yes... but some configs return too quickly before they're actually updated.
+            // We want to wait some time before updating the UI in that case, but not block subsequent ops.
+            uiTimeout = new Promise(resolve => setTimeout(resolve, 800));
+            return context.setConfigValue(name, value);
+        });
+        await uiTimeout;
+    }
+    async capturePreviewAsBlob() {
+        return this.#schedule(context => context.capturePreviewAsBlob());
+    }
+    async captureImageAsFile() {
+        return this.#schedule(context => context.captureImageAsFile());
+    }
+    async consumeEvents() {
+        return this.#schedule(context => context.consumeEvents());
+    }
+}

examples/preact/build

@@ -1 +0,0 @@
-../../build

examples/preact/index.html

@@ -43,6 +43,7 @@
     <script type="importmap">
       {
         "imports": {
+          "web-gphoto2": "../../src/camera.js",
           "preact": "https://unpkg.com/preact@10.6.4/dist/preact.module.js",
           "preact/debug": "https://unpkg.com/preact@10.6.4/debug/dist/debug.module.js",
           "preact/devtools": "https://unpkg.com/preact@10.6.4/devtools/dist/devtools.module.js",

examples/preact/index.js

@@ -18,29 +18,21 @@
 
 import { h, render, Component } from 'preact';
 import { CaptureButton } from './capture-button.js';
-import { connect, rethrowIfCritical } from './ops.js';
+import { Camera, rethrowIfCritical } from 'web-gphoto2';
 import { Preview } from './preview.js';
 import { Widget } from './widget.js';
 
-/** @typedef {import('./build/libapi.mjs').Context} Context */
-/** @typedef {import('./build/libapi.mjs').Config} Config */
-/** @typedef {import('./ops.js').Connection} Connection */
-
 export const isDebug = new URLSearchParams(location.search).has('debug');
 
 if (isDebug) {
+  // @ts-ignore
   await import('preact/debug');
 }
 
-/** @typedef {{ type: 'CameraPicker' } | { type: 'Status', message: string } | { type: 'Config', config: Config }} AppState */
+/** @extends Component<{}, AppState> */
-
-const INTERFACE_CLASS = 6; // PTP
-const INTERFACE_SUBCLASS = 1; // MTP
-
-/** @extends Component<null, AppState> */
 class App extends Component {
-  /** @type {Connection} */
+  /** @type {Camera | undefined} */
-  connection;
+  camera;
 
   componentDidMount() {
     addEventListener('error', ({ message }) =>
@@ -52,9 +44,9 @@ class App extends Component {
     addEventListener(
       'beforeunload',
       () => {
-        if (!this.connection) return;
+        if (!this.camera) return;
-        this.connection.disconnect();
+        this.camera.disconnect();
-        this.connection = undefined;
+        this.camera = undefined;
       },
       { once: true }
     );
@@ -66,39 +58,45 @@ class App extends Component {
 
   selectDevice = async () => {
     // @ts-ignore
-    await navigator.usb.requestDevice({
+    await Camera.showPicker();
-      filters: [
-        {
-          classCode: INTERFACE_CLASS,
-          subclassCode: INTERFACE_SUBCLASS
-        }
-      ]
-    });
     this.setState({ type: 'Status', message: '⌛ Connecting...' });
     await this.tryToConnectToCamera();
   };
 
   async tryToConnectToCamera() {
+    /** @type {Camera} */
+    let camera;
     try {
-      this.connection = await connect();
+      camera = new Camera();
+      await camera.connect();
     } catch (e) {
       console.warn(e);
       this.setState({ type: 'CameraPicker' });
       return;
     }
+    this.camera = camera;
+    let supportedOps = await camera.getSupportedOps();
+    let capturePreview;
+    if (supportedOps.capturePreview) {
+      capturePreview = () => camera.capturePreviewAsBlob();
+    }
+    let triggerCapture;
+    if (supportedOps.captureImage) {
+      triggerCapture = () => camera.captureImageAsFile();
+    }
     // We should reach this only once.
-    while (this.connection) {
+    while (this.camera) {
       try {
-        let config = await this.connection.schedule(context =>
+        let config = await this.camera.getConfig();
-          context.configToJS()
-        );
         if (!isDebug) {
           delete config.children.actions;
           delete config.children.other;
         }
         this.setState({
           type: 'Config',
-          config
+          config,
+          capturePreview,
+          triggerCapture
         });
       } catch (err) {
         rethrowIfCritical(err);
@@ -109,9 +107,7 @@ class App extends Component {
           requestIdleCallback(resolve, { timeout: 500 })
         );
         try {
-          let hadEvents = await this.connection.schedule(context =>
+          let hadEvents = await this.camera.consumeEvents();
-            context.consumeEvents()
-          );
           if (hadEvents) {
             break;
           }
@@ -128,23 +124,7 @@ class App extends Component {
    * @param {string} name
    * @param {*} value
    */
-  setValue = async (name, value) => {
+  setValue = async (name, value) => this.camera?.setConfigValue(name, value);
-    /** @type {Promise<void>} */
-    let uiTimeout;
-    await this.connection.schedule(context => {
-      // This is terrible, yes... but some configs return too quickly before they're actually updated.
-      // We want to wait some time before updating the UI in that case, but not block subsequent ops.
-      uiTimeout = new Promise(resolve => setTimeout(resolve, 800));
-      return context.setConfigValue(name, value);
-    });
-    await uiTimeout;
-  };
-
-  capturePreview = () =>
-    this.connection.schedule(context => context.capturePreviewAsBlob());
-
-  captureImage = () =>
-    this.connection.schedule(context => context.captureImageAsFile());
 
   render(/** @type {App['props']} */ props, /** @type {App['state']} */ state) {
     switch (state.type) {
@@ -195,9 +175,7 @@ class App extends Component {
             'div',
             { class: 'pure-u-2-3' },
             h(Preview, {
-              getPreview: this.connection.supportedOps.capturePreview
+              getPreview: state.capturePreview
-                ? this.capturePreview
-                : undefined
             })
           ),
           h(
@@ -209,8 +187,8 @@ class App extends Component {
               h(
                 'fieldset',
                 null,
-                this.connection.supportedOps.triggerCapture
+                state.triggerCapture
-                  ? h(CaptureButton, { getFile: this.captureImage })
+                  ? h(CaptureButton, { getFile: state.triggerCapture })
                   : undefined,
                 ' ',
                 h(

examples/preact/ops.js

@@ -1,62 +0,0 @@
-/*
- * Copyright 2021 Google LLC
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 2.1 of the License, or (at your option) any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with this library; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
- */
-
-import initModule from './build/libapi.mjs';
-
-/** @typedef {import('../libapi.mjs').Context} Context */
-
-const ModulePromise = initModule();
-
-export function rethrowIfCritical(err) {
-  // If it's precisely Error, it's a custom error; anything else - SyntaxError,
-  // WebAssembly.RuntimeError, TypeError, etc. - is treated as critical here.
-  if (err.constructor !== Error) {
-    throw err;
-  }
-}
-
-export async function connect() {
-  const Module = await ModulePromise;
-
-  let context = await new Module.Context();
-  let supportedOps = await context.supportedOps();
-
-  /** @type {Promise<unknown>} */
-  let queue = Promise.resolve();
-
-  /** Schedules an exclusive async operation on the global context.
-   * @template T
-   * @param {(ctx: Context) => Promise<T>} op
-   * @returns {Promise<T>}
-   */
-  function schedule(op) {
-    let res = queue.then(() => op(context));
-    queue = res.catch(rethrowIfCritical);
-    return res;
-  }
-
-  return {
-    supportedOps,
-    schedule,
-    disconnect() {
-      context.delete();
-    }
-  };
-}
-
-/** @typedef {ReturnType<typeof connect> extends Promise<infer Connection> ? Connection : never} Connection */

examples/preact/package-lock.json

@@ -0,0 +1,75 @@
+{
+  "name": "preact",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "devDependencies": {
+        "@types/requestidlecallback": "^0.3.4",
+        "@types/stats.js": "^0.17.0",
+        "preact": "^10.5.14",
+        "web-gphoto2": "file:../../"
+      }
+    },
+    "../..": {
+      "version": "0.1.0",
+      "dev": true,
+      "license": "LGPL-2.1-or-later",
+      "devDependencies": {
+        "@types/emscripten": "^1.39.5"
+      }
+    },
+    "node_modules/@types/requestidlecallback": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@types/requestidlecallback/-/requestidlecallback-0.3.5.tgz",
+      "integrity": "sha512-Uh49VrVTPfU0y/qIvXXYuRmd/sKLfVgQWZU1t8FWH22AIJyQbCei1aSmXdMDAijwGUFhBDpJmksiHEDsfiE/cg==",
+      "dev": true
+    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==",
+      "dev": true
+    },
+    "node_modules/preact": {
+      "version": "10.16.0",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz",
+      "integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/web-gphoto2": {
+      "resolved": "../..",
+      "link": true
+    }
+  },
+  "dependencies": {
+    "@types/requestidlecallback": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@types/requestidlecallback/-/requestidlecallback-0.3.5.tgz",
+      "integrity": "sha512-Uh49VrVTPfU0y/qIvXXYuRmd/sKLfVgQWZU1t8FWH22AIJyQbCei1aSmXdMDAijwGUFhBDpJmksiHEDsfiE/cg==",
+      "dev": true
+    },
+    "@types/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==",
+      "dev": true
+    },
+    "preact": {
+      "version": "10.16.0",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz",
+      "integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==",
+      "dev": true
+    },
+    "web-gphoto2": {
+      "version": "file:../..",
+      "requires": {
+        "@types/emscripten": "^1.39.5"
+      }
+    }
+  }
+}

examples/preact/package.json

@@ -0,0 +1,9 @@
+{
+  "private": true,
+  "devDependencies": {
+    "web-gphoto2": "file:../../",
+    "@types/requestidlecallback": "^0.3.4",
+    "@types/stats.js": "^0.17.0",
+    "preact": "^10.5.14"
+  }
+}

examples/preact/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "checkJs": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "noEmit": true
+  }
+}

examples/preact/types.d.ts

@@ -0,0 +1,9 @@
+type AppState =
+  | { type: 'CameraPicker' }
+  | { type: 'Status'; message: string }
+  | {
+      type: 'Config';
+      config: import('web-gphoto2').Config;
+      capturePreview: (() => Promise<Blob>) | undefined;
+      triggerCapture: (() => Promise<File>) | undefined;
+    };

examples/preact/widget.js

@@ -18,7 +18,7 @@
 
 import { h, Component, createRef } from 'preact';
 
-/** @typedef {import('./build/libapi.mjs').Config} Config */
+/** @typedef {import('web-gphoto2').Config} Config */
 
 /**
  * @param {Config} config

package-lock.json

@@ -1,6 +1,39 @@
 {
+  "name": "web-gphoto2",
+  "version": "0.1.0",
+  "lockfileVersion": 2,
   "requires": true,
-  "lockfileVersion": 1,
+  "packages": {
+    "": {
+      "name": "web-gphoto2",
+      "version": "0.1.0",
+      "license": "LGPL-2.1-or-later",
+      "dependencies": {
+        "typescript": "^5.1.6"
+      },
+      "devDependencies": {
+        "@types/emscripten": "^1.39.5"
+      }
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.39.5",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.5.tgz",
+      "integrity": "sha512-DIOOg+POSrYl+OlNRHQuIEqCd8DCtynG57H862UCce16nXJX7J8eWxNGgOcf8Eyge8zXeSs27mz1UcFu8L/L7g==",
+      "dev": true
+    },
+    "node_modules/typescript": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  },
   "dependencies": {
     "@types/emscripten": {
       "version": "1.39.5",
@@ -8,23 +41,10 @@
       "integrity": "sha512-DIOOg+POSrYl+OlNRHQuIEqCd8DCtynG57H862UCce16nXJX7J8eWxNGgOcf8Eyge8zXeSs27mz1UcFu8L/L7g==",
       "dev": true
     },
-    "@types/requestidlecallback": {
+    "typescript": {
-      "version": "0.3.4",
+      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/@types/requestidlecallback/-/requestidlecallback-0.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
-      "integrity": "sha512-aTSyiZuRemRLTQkJPb25L7A4/eR2Teo5l4yJ1V6P3+MFxEZckTDkNKNtr/V1zEOMzS6H8DgxF22U6jPAPrzQvw==",
+      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA=="
-      "dev": true
-    },
-    "@types/stats.js": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz",
-      "integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==",
-      "dev": true
-    },
-    "preact": {
-      "version": "10.5.14",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz",
-      "integrity": "sha512-KojoltCrshZ099ksUZ2OQKfbH66uquFoxHSbnwKbTJHeQNvx42EmC7wQVWNuDt6vC5s3nudRHFtKbpY4ijKlaQ==",
-      "dev": true
     }
   }
 }

package.json

@@ -1,12 +1,12 @@
 {
   "name": "web-gphoto2",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "description": "WebAssembly implementation of gphoto2 and libusb to control DSLR cameras over USB on the Web",
   "type": "module",
-  "main": "src/camera.js",
+  "main": "build/camera.js",
-  "types": "src/types.d.ts",
+  "types": "build/camera.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build:ts": "tsc"
   },
   "repository": {
     "type": "git",
@@ -35,13 +35,12 @@
   },
   "homepage": "https://github.com/GoogleChromeLabs/web-gphoto2#readme",
   "files": [
-    "src/*",
     "build/*"
   ],
   "devDependencies": {
-    "@types/emscripten": "^1.39.5",
+    "@types/emscripten": "^1.39.5"
-    "@types/requestidlecallback": "^0.3.4",
+  },
-    "@types/stats.js": "^0.17.0",
+  "dependencies": {
-    "preact": "^10.5.14"
+    "typescript": "^5.1.6"
   }
 }

src/camera.js

@@ -1,103 +0,0 @@
-/*
- * Copyright 2023 Google LLC
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 2.1 of the License, or (at your option) any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with this library; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
- */
-
-import initModule from "../build/libapi.mjs";
-
-export function rethrowIfCritical(err) {
-  // If it's precisely Error, it's a custom error; anything else - SyntaxError,
-  // WebAssembly.RuntimeError, TypeError, etc. - is treated as critical here.
-  if (err.constructor !== Error) {
-    throw err;
-  }
-}
-
-const INTERFACE_CLASS = 6; // PTP
-const INTERFACE_SUBCLASS = 1; // MTP
-
-let ModulePromise = null;
-
-export class Camera {
-  constructor() {
-    this.queue = Promise.resolve();
-    this.Module = null;
-    this.context = null;
-  }
-
-  static async showPicker() {
-    // @ts-ignore
-    await navigator.usb.requestDevice({
-      filters: [
-        {
-          classCode: INTERFACE_CLASS,
-          subclassCode: INTERFACE_SUBCLASS,
-        },
-      ],
-    });
-  }
-
-  async connect() {
-    if (!ModulePromise) {
-      ModulePromise = initModule()
-    }
-    this.Module = await ModulePromise;
-    this.context = await new this.Module.Context();
-  }
-
-  async schedule(op) {
-    let res = this.queue.then(() => op(this.context));
-    this.queue = res.catch(rethrowIfCritical);
-    return res;
-  }
-
-  async disconnect() {
-    if (!this.context.isDeleted()) {
-      this.context.delete();
-    }
-  }
-
-  async getConfig() {
-    return this.schedule((context) => context.configToJS());
-  }
-
-  async getSupportedOps() {
-    if (this.context) {
-      return await this.context.supportedOps();
-    }
-    throw new Error("You need to connect to the camera first");
-  }
-
-  async setConfigValue(name, value) {
-    const uiTimeout = new Promise((resolve) => setTimeout(resolve, 800));
-    const setResult = this.schedule((context) =>
-      context.setConfigValue(name, value)
-    );
-    return Promise.all([setResult, uiTimeout]);
-  }
-
-  async capturePreviewAsBlob() {
-    return this.schedule((context) => context.capturePreviewAsBlob());
-  }
-
-  async captureImageAsFile() {
-    return this.schedule((context) => context.captureImageAsFile());
-  }
-
-  async consumeEvents() {
-    return this.schedule((context) => context.consumeEvents());
-  }
-}

src/camera.ts

@@ -0,0 +1,106 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
+ */
+
+import initModule, { Context, Module } from '../build/libapi.mjs';
+
+export type { Config, SupportedOps } from '../build/libapi.mjs';
+
+// A helper that allows to distinguish critical errors from library errors.
+export function rethrowIfCritical(err: any) {
+  // If it's precisely Error, it's a custom error; anything else - SyntaxError,
+  // WebAssembly.RuntimeError, TypeError, etc. - is treated as critical here.
+  if (err?.constructor !== Error) {
+    throw err;
+  }
+}
+
+const INTERFACE_CLASS = 6; // PTP
+const INTERFACE_SUBCLASS = 1; // MTP
+
+let ModulePromise: Promise<Module>;
+
+export class Camera {
+  #queue: Promise<any> = Promise.resolve();
+  #context: Context | null = null;
+
+  static async showPicker() {
+    // @ts-ignore
+    await navigator.usb.requestDevice({
+      filters: [
+        {
+          classCode: INTERFACE_CLASS,
+          subclassCode: INTERFACE_SUBCLASS
+        }
+      ]
+    });
+  }
+
+  async connect() {
+    if (!ModulePromise) {
+      ModulePromise = initModule();
+    }
+    let Module = await ModulePromise;
+    this.#context = await new Module.Context();
+  }
+
+  async #schedule<T>(op: (context: Context) => Promise<T>): Promise<T> {
+    let res = this.#queue.then(() => op(this.#context!));
+    this.#queue = res.catch(rethrowIfCritical);
+    return res;
+  }
+
+  async disconnect() {
+    if (this.#context && !this.#context.isDeleted()) {
+      this.#context.delete();
+    }
+  }
+
+  async getConfig() {
+    return this.#schedule(context => context.configToJS());
+  }
+
+  async getSupportedOps() {
+    if (this.#context) {
+      return await this.#context.supportedOps();
+    }
+    throw new Error('You need to connect to the camera first');
+  }
+
+  async setConfigValue(name: string, value: string | number | boolean) {
+    let uiTimeout: Promise<void> | undefined;
+    await this.#schedule(context => {
+      // This is terrible, yes... but some configs return too quickly before they're actually updated.
+      // We want to wait some time before updating the UI in that case, but not block subsequent ops.
+      uiTimeout = new Promise(resolve => setTimeout(resolve, 800));
+      return context.setConfigValue(name, value);
+    });
+    await uiTimeout;
+  }
+
+  async capturePreviewAsBlob() {
+    return this.#schedule(context => context.capturePreviewAsBlob());
+  }
+
+  async captureImageAsFile() {
+    return this.#schedule(context => context.captureImageAsFile());
+  }
+
+  async consumeEvents() {
+    return this.#schedule(context => context.consumeEvents());
+  }
+}

src/types.d.ts

@@ -1,25 +0,0 @@
-// Import types Context and SupportedOps ./libapi.mjs.d.ts
-import type { Config, Context, SupportedOps } from './libapi.mjs.d.ts';
-
-export declare class Camera {
-    constructor();
-
-    static showPicker(): Promise<void>;
-    connect(): Promise<void>;
-    disconnect(): Promise<void>;
-
-    getConfig(): Promise<Config>;
-
-    getSupportedOps(): SupportedOps;
-
-    setConfigValue(name: string, value: number | string | boolean): Promise<void>;
-
-    capturePreviewAsBlob(): Promise<Blob>;
-    captureImageAsFile(): Promise<File>;
-    consumeEvents(): Promise<boolean>;
-
-    private rethrowIfCritical(err: any): void;  // any error type can be replaced by more specific if available
-    private schedule<T>(op: (ctx: any) => Promise<T>): Promise<T>;  // ctx and T types can be replaced by more specific if available
-}
-
-export type { Config, Context, SupportedOps };

tsconfig.json

@@ -1,10 +1,11 @@
 {
   "compilerOptions": {
-    "checkJs": true,
     "target": "ESNext",
     "module": "ESNext",
     "moduleResolution": "Node",
-    "noEmit": true
+    "strict": true,
+    "declaration": true,
+    "outDir": "build"
   },
-  "exclude": ["libapi.*"]
+  "include": ["src/camera.ts"]
 }