From 0380077969c1679184a1f893c9d35abde1f3eac5 Mon Sep 17 00:00:00 2001
From: Ingvar Stepanyan <me@rreverser.com>
Date: Sat, 5 Aug 2023 19:38:32 +0100
Subject: [PATCH] More demo updates

---
 .github/workflows/main.yml        |  2 +-
 README.md                         | 19 +++++++++++++++++--
 examples/preact/index.html        |  2 +-
 examples/preact/package-lock.json |  6 +++++-
 examples/preact/preview.js        | 12 ++++++------
 package.json                      |  1 +
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 9a848a9..5a05566 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -25,4 +25,4 @@ jobs:
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BRANCH: gh-pages # The branch the action should deploy to.
-          FOLDER: ui # The folder the action should deploy.
+          FOLDER: examples/preact # The folder the action should deploy.
diff --git a/README.md b/README.md
index 5e4d5fa..301219b 100644
--- a/README.md
+++ b/README.md
@@ -66,10 +66,23 @@ If you don't have a DSLR, you can check out a recording of the demo below:
 
 ## Building
 
-To build the WebAssembly part of the repo, you'll need Docker. Then:
+To build the WebAssembly part of the repo, you'll need Docker on Linux (WSL works too) or macOS machine. Then:
+
+```bash
+npm run build:wasm # runs build in Docker
+```
+
+If you are just updating the JS library (`src/camera.ts`), then it's enough to do
+
+```bash
+npm run build:ts
+```
+
+on any system as Wasm parts are committed to this repo.
+
+To serve the demo, run:
 
 ```bash
-./build.sh # runs build in Docker
 npx serve examples/preact # starts a local server with COOP/COEP
 ```
 
@@ -84,8 +97,10 @@ SharedArrayBuffer can not be found
 SharedArrayBuffer has been disabled across all browsers due to the Spectre vulnerability. This package uses SharedArrayBuffer to communicate with the WebAssembly module. To work around this issue, you need to set two response headers for your document:
 
 ```
+
 Cross-Origin-Opener-Policy: same-origin
 Cross-Origin-Embedder-Policy: require-corp
+
 ```
 
 Information from [Stackoverflow](https://stackoverflow.com/questions/64650119/react-error-sharedarraybuffer-is-not-defined-in-firefox)
diff --git a/examples/preact/index.html b/examples/preact/index.html
index a54626c..0afac5f 100644
--- a/examples/preact/index.html
+++ b/examples/preact/index.html
@@ -43,7 +43,7 @@
     <script type="importmap">
       {
         "imports": {
-          "web-gphoto2": "../../src/camera.js",
+          "web-gphoto2": "./node_modules/web-gphoto2/build/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",
diff --git a/examples/preact/package-lock.json b/examples/preact/package-lock.json
index 028da10..df01b75 100644
--- a/examples/preact/package-lock.json
+++ b/examples/preact/package-lock.json
@@ -15,6 +15,9 @@
       "version": "0.1.0",
       "dev": true,
       "license": "LGPL-2.1-or-later",
+      "dependencies": {
+        "typescript": "^5.1.6"
+      },
       "devDependencies": {
         "@types/emscripten": "^1.39.5"
       }
@@ -68,7 +71,8 @@
     "web-gphoto2": {
       "version": "file:../..",
       "requires": {
-        "@types/emscripten": "^1.39.5"
+        "@types/emscripten": "^1.39.5",
+        "typescript": "^5.1.6"
       }
     }
   }
diff --git a/examples/preact/preview.js b/examples/preact/preview.js
index c66d8a6..7e59976 100644
--- a/examples/preact/preview.js
+++ b/examples/preact/preview.js
@@ -17,14 +17,14 @@
  */
 
 import { h, Component, createRef } from 'preact';
-import { rethrowIfCritical } from './ops.js';
+import { rethrowIfCritical } from 'web-gphoto2';
 
 export const isDebug = new URLSearchParams(location.search).has('debug');
 
 const Stats = isDebug
   ? await import('stats.js').then(
-    res => /** @type {typeof import('stats.js')} */(res['default'])
-  )
+      res => /** @type {typeof import('stats.js')} */ (res['default'])
+    )
   : null;
 
 /** @extends Component<{ getPreview?: () => Promise<Blob> }, { error?: string }> */
@@ -96,9 +96,9 @@ export class Preview extends Component {
           blob,
           ratio
             ? {
-              resizeWidth: canvas.width,
-              resizeHeight: canvas.height
-            }
+                resizeWidth: canvas.width,
+                resizeHeight: canvas.height
+              }
             : {}
         );
         if (!ratio) {
diff --git a/package.json b/package.json
index 284bd27..09df6fd 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   },
   "types": "build/camera.d.ts",
   "scripts": {
+    "build:wasm": "./build.sh",
     "build:ts": "tsc"
   },
   "repository": {