miro-export 1.2.0 → 1.3.1

package/.github/workflows/build.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
         with:
           version: 8
       - uses: actions/setup-node@v6

package/.github/workflows/publish.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
         with:
           version: 8
       - uses: actions/setup-node@v6

package/.github/workflows/test.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
         with:
           version: 8
       - uses: actions/setup-node@v6
@@ -22,3 +22,4 @@ jobs:
         env:
           TEST_BOARD_ID: ${{secrets.TEST_BOARD_ID}}
           PRIVATE_TEST_BOARD_ID: ${{secrets.PRIVATE_TEST_BOARD_ID}}
+          BUGGY_TEST_BOARD_ID: ${{secrets.BUGGY_TEST_BOARD_ID}}

package/README.md

@@ -117,7 +117,7 @@ const svgOfFrame1 = await miroBoard.getSvg([framesWithTitleFrame1[0].id]);
 > [!WARNING]  
 > Remember to dispose the instance to make sure the browser is closed and the process
 > can exit. `await using` (as shown above) does this automatically, but is not supported
-> in all environments and may not be the optimal choise in every case. Alternatively,
+> in all environments and may not be the optimal choice in every case. Alternatively,
 > `miroBoard.dispose()` may be called at any time to dispose of the instance manually.
 
 Types for many of the common board object types has been provided in [miro-types.ts](src/miro-types.ts).

package/build/index.d.ts

@@ -38,6 +38,12 @@ export declare class MiroBoard {
     [Symbol.asyncDispose](): Promise<void>;
     private get browser();
     private get page();
+    /**
+     * Checks that all widgets have been loaded. Times out to 5 seconds due to bug
+     * in Miro where certain boards fail to load all widgets if SDK is not required
+     * for this function call.
+     */
+    private checkAllWidgetsLoaded;
     getBoardObjects<F extends GetBoardsFilter>(filter: F, additionalFilter?: AdditionalFilter<BoardObject>): Promise<FilteredResultsByType<F["type"], BoardObject>>;
     getSvg(objectsIds?: string[]): Promise<string>;
 }

package/build/index.js

@@ -30,29 +30,24 @@ export class MiroBoard {
         });
         try {
             await page.evaluate((timeoutDuration) => new Promise((resolve, reject) => {
-                if (window.miro) {
+                if (window.cmd?.board?.api) {
                     resolve();
                 }
                 const timeout = setTimeout(() => {
                     reject(new Error(`Miro board could not be loaded: application instance not available after ${timeoutDuration} ms. Check your network connection, access token and board access.`));
                 }, timeoutDuration);
-                const authModalChecker = setInterval(() => {
+                const interval = setInterval(() => {
                     if (document.querySelector('[data-testid="signup-popup-container"]')) {
+                        clearInterval(interval);
+                        clearTimeout(timeout);
                         reject(new Error(`Miro board requires authentication. Check board access settings to allow anonymous access or supply a token.`));
                     }
-                }, 250);
-                let miroValue;
-                Object.defineProperty(window, "miro", {
-                    get() {
-                        return miroValue;
-                    },
-                    set(value) {
+                    else if (window.cmd?.board?.api) {
                         clearTimeout(timeout);
-                        clearInterval(authModalChecker);
-                        miroValue = value;
+                        clearInterval(interval);
                         resolve();
                     }
-                });
+                }, 250);
             }), options.boardLoadTimeoutMs ?? DEFAULT_BOARD_LOAD_TIMEOUT_MS);
         }
         catch (err) {
@@ -79,7 +74,34 @@ export class MiroBoard {
     get page() {
         return this.context.promise.then(({ page }) => page);
     }
+    /**
+     * Checks that all widgets have been loaded. Times out to 5 seconds due to bug
+     * in Miro where certain boards fail to load all widgets if SDK is not required
+     * for this function call.
+     */
+    async checkAllWidgetsLoaded(mustHaveSdk = false) {
+        await (await this.page).evaluate((mustHaveSdk, timeoutDuration) => new Promise((resolve, reject) => {
+            const startTime = Date.now();
+            const interval = setInterval(() => {
+                if (window.cmd?.board?.api?.isAllWidgetsLoaded() &&
+                    (!mustHaveSdk || window.miro)) {
+                    clearInterval(interval);
+                    resolve();
+                }
+                if (Date.now() - startTime >= timeoutDuration) {
+                    clearInterval(interval);
+                    if (mustHaveSdk) {
+                        reject(new Error(`Miro SDK failed to load in ${timeoutDuration} ms. This is likely caused by a Miro-internal issue. Check that the board is accessible using an incognito browser window.`));
+                    }
+                    else {
+                        resolve();
+                    }
+                }
+            }, 150);
+        }), mustHaveSdk, 3_000);
+    }
     async getBoardObjects(filter, additionalFilter) {
+        await this.checkAllWidgetsLoaded(true);
         return (await this.page).evaluate(async (filter, additionalFilter) => {
             // @ts-expect-error - https://github.com/evanw/esbuild/issues/2605#issuecomment-2050808084
             window.__name = (func) => func;
@@ -108,14 +130,25 @@ export class MiroBoard {
         }, filter, additionalFilter);
     }
     async getSvg(objectsIds) {
+        await this.checkAllWidgetsLoaded(objectsIds !== undefined);
         return (await this.page).evaluate(async (objectsIds) => {
-            await window.miro.board.deselect();
+            window.cmd.board.api.clearSelection();
             if (objectsIds) {
                 for (const id of objectsIds) {
                     await window.miro.board.select({ id });
                 }
             }
-            return await window.cmd.board.api.export.makeVector();
+            let error;
+            for (let retry = 0; retry < 5; retry++) {
+                try {
+                    return await window.cmd.board.api.export.makeVector();
+                }
+                catch (e) {
+                    error = e;
+                    await new Promise((resolve) => setTimeout(resolve, 1000));
+                }
+            }
+            throw error ?? Error("Failed to export vector");
         }, objectsIds);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miro-export",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "author": "jolle <npm-contact@jolle.io>",
   "license": "MIT",
   "type": "module",

package/src/index.ts

@@ -72,7 +72,7 @@ export class MiroBoard {
       await page.evaluate(
         (timeoutDuration) =>
           new Promise<void>((resolve, reject) => {
-            if (window.miro) {
+            if (window.cmd?.board?.api) {
               resolve();
             }
 
@@ -84,30 +84,23 @@ export class MiroBoard {
               );
             }, timeoutDuration);
 
-            const authModalChecker = setInterval(() => {
+            const interval = setInterval(() => {
               if (
                 document.querySelector('[data-testid="signup-popup-container"]')
               ) {
+                clearInterval(interval);
+                clearTimeout(timeout);
                 reject(
                   new Error(
                     `Miro board requires authentication. Check board access settings to allow anonymous access or supply a token.`
                   )
                 );
-              }
-            }, 250);
-
-            let miroValue: (typeof window)["miro"];
-            Object.defineProperty(window, "miro", {
-              get() {
-                return miroValue;
-              },
-              set(value) {
+              } else if (window.cmd?.board?.api) {
                 clearTimeout(timeout);
-                clearInterval(authModalChecker);
-                miroValue = value;
+                clearInterval(interval);
                 resolve();
               }
-            });
+            }, 250);
           }),
         options.boardLoadTimeoutMs ?? DEFAULT_BOARD_LOAD_TIMEOUT_MS
       );
@@ -141,10 +134,52 @@ export class MiroBoard {
     return this.context.promise.then(({ page }) => page);
   }
 
+  /**
+   * Checks that all widgets have been loaded. Times out to 5 seconds due to bug
+   * in Miro where certain boards fail to load all widgets if SDK is not required
+   * for this function call.
+   */
+  private async checkAllWidgetsLoaded(mustHaveSdk: boolean = false) {
+    await (
+      await this.page
+    ).evaluate(
+      (mustHaveSdk, timeoutDuration) =>
+        new Promise<void>((resolve, reject) => {
+          const startTime = Date.now();
+          const interval = setInterval(() => {
+            if (
+              window.cmd?.board?.api?.isAllWidgetsLoaded() &&
+              (!mustHaveSdk || window.miro)
+            ) {
+              clearInterval(interval);
+              resolve();
+            }
+
+            if (Date.now() - startTime >= timeoutDuration) {
+              clearInterval(interval);
+              if (mustHaveSdk) {
+                reject(
+                  new Error(
+                    `Miro SDK failed to load in ${timeoutDuration} ms. This is likely caused by a Miro-internal issue. Check that the board is accessible using an incognito browser window.`
+                  )
+                );
+              } else {
+                resolve();
+              }
+            }
+          }, 150);
+        }),
+      mustHaveSdk,
+      3_000
+    );
+  }
+
   async getBoardObjects<F extends GetBoardsFilter>(
     filter: F,
     additionalFilter?: AdditionalFilter<BoardObject>
   ): Promise<FilteredResultsByType<F["type"], BoardObject>> {
+    await this.checkAllWidgetsLoaded(true);
+
     return (await this.page).evaluate(
       async (filter, additionalFilter) => {
         // @ts-expect-error - https://github.com/evanw/esbuild/issues/2605#issuecomment-2050808084
@@ -188,8 +223,10 @@ export class MiroBoard {
   }
 
   async getSvg(objectsIds?: string[]) {
+    await this.checkAllWidgetsLoaded(objectsIds !== undefined);
+
     return (await this.page).evaluate(async (objectsIds) => {
-      await window.miro.board.deselect();
+      window.cmd.board.api.clearSelection();
 
       if (objectsIds) {
         for (const id of objectsIds) {
@@ -197,7 +234,17 @@ export class MiroBoard {
         }
       }
 
-      return await window.cmd.board.api.export.makeVector();
+      let error: unknown;
+      for (let retry = 0; retry < 5; retry++) {
+        try {
+          return await window.cmd.board.api.export.makeVector();
+        } catch (e) {
+          error = e;
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }
+      }
+
+      throw error ?? Error("Failed to export vector");
     }, objectsIds);
   }
 }

package/src/miro-runtime.d.ts

@@ -21,6 +21,8 @@ declare global {
           export: {
             makeVector: () => Promise<string>;
           };
+          clearSelection: () => void;
+          isAllWidgetsLoaded: () => boolean;
         };
       };
     };

package/tests/api.test.ts

@@ -4,6 +4,7 @@ import { MiroBoard } from "../src";
 
 const boardId = process.env.TEST_BOARD_ID;
 const inaccessibleBoardId = process.env.PRIVATE_TEST_BOARD_ID;
+const buggyBoardId = process.env.BUGGY_TEST_BOARD_ID;
 
 if (!boardId) {
   console.error("TEST_BOARD_ID environment variable is required.");
@@ -15,6 +16,11 @@ if (!inaccessibleBoardId) {
   process.exit(1);
 }
 
+if (!buggyBoardId) {
+  console.error("BUGGY_TEST_BOARD_ID environment variable is required.");
+  process.exit(1);
+}
+
 describe("Miro integration", async () => {
   const miroBoard = new MiroBoard({ boardId });
 
@@ -86,3 +92,21 @@ await it("should throw error for a non-public board", async () => {
     );
   }
 });
+
+await it("should be able to export SVG of a buggy Miro board", async () => {
+  // this is a flaky issue on Miro; around 10% of the time the board loads fine
+  // so let's repeat this test a couple of times just to be sure
+  for (let i = 0; i < 3; i++) {
+    const miroBoard = new MiroBoard({
+      boardId: buggyBoardId,
+      boardLoadTimeoutMs: 30_000
+    });
+    try {
+      const svg = await miroBoard.getSvg();
+      const hasSvgContents = svg.includes("What should we do next?");
+      assert.ok(hasSvgContents);
+    } finally {
+      await miroBoard.dispose();
+    }
+  }
+});