More demo updates

GoogleChromeLabs · Aug 5, 2023 · 0380077 · 0380077
1 parent 6c69318
commit 0380077
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -7,6 +7,7 @@
   },
   "types": "build/camera.d.ts",
   "scripts": {
+    "build:wasm": "./build.sh",
     "build:ts": "tsc"
   },
   "repository": {