miro-export 1.0.0

package/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "promise"],
+  "rules": {
+    "@typescript-eslint/naming-convention": "warn",
+    "@typescript-eslint/semi": "warn",
+    "curly": "warn",
+    "eqeqeq": "warn",
+    "no-throw-literal": "warn",
+    "semi": "off"
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:promise/recommended",
+    "prettier"
+  ],
+  "ignorePatterns": ["build"]
+}

package/.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"

package/.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: Build
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+      - name: Lint
+        run: pnpm run lint
+      - name: Build
+        run: pnpm run build
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: build/

package/.github/workflows/dependabot-merge.yml

@@ -0,0 +1,21 @@
+name: Dependabot auto-merge
+on: pull_request
+
+permissions:
+  pull-requests: write
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-latest
+    if: github.actor == 'dependabot[bot]'
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v1
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Merge a PR
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/.github/workflows/publish.yml

@@ -0,0 +1,23 @@
+name: Publish package to NPM
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run build
+      - run: pnpm publish --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 jolle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# Miro board exporter
+
+Exports Miro frames as full-detail SVGs using a headless Puppeteer browser. Requires a personal Miro token.
+
+## Getting the Miro token
+
+Log in to Miro using your regular web browser, and then copy the value of the "token" cookie from developer tools. This is the token that this tool requires.
+
+## Usage
+
+```
+Options:
+  -t, --token <token>                Miro token
+  -b, --board-id <boardId>           The board ID
+  -f, --frame-names <frameNames...>  The frame name(s), leave empty to export entire board
+  -o, --output-file <filename>       A file to output the SVG to (stdout if not supplied)
+  -h, --help                         display help for command
+```
+
+## Examples
+
+```sh
+# export "Frame 2" to the file "My Frame 2.svg"
+miro-export -t XYZ -b uMoVLkx8gIc= -f "Frame 2" -o "My Frame 2.svg"
+
+# export entire board to stdout
+miro-export -t XYZ -b uMoVLkx8gIc=
+
+# export "Frame 2" and "Frame 3" to "Frame 2.svg" and "Frame 3.svg" respectively
+miro-export -t XYZ -b uMoVLkx8gIc= -f "Frame 2" "Frame 3" -o "{frameName}.svg"
+```
+
+## Capturing multiple frames at once
+
+It is possible to supply multiple frames to the `-f` switch, e.g., `-f "Frame 2" "Frame 3"`. However, this will capture all content that is within the outer bounding box when all frames have been selected, so content between the frames will be captured as well. If you want separate SVGs for each frame, use the output file switch with `{frameName}` in the file name, e.g., `-o "Export - {frameName}.svg"`. It is not possible to export separate SVGs without the output file specified (i.e., to stdout).

package/build/index.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const promises_1 = require("fs/promises");
+const puppeteer_1 = __importDefault(require("puppeteer"));
+const extra_typings_1 = require("@commander-js/extra-typings");
+const { token, boardId, frameNames, outputFile } = extra_typings_1.program
+    .requiredOption("-t, --token <token>", "Miro token")
+    .requiredOption("-b, --board-id <boardId>", "The board ID")
+    .option("-f, --frame-names <frameNames...>", "The frame name(s), leave empty to export entire board")
+    .option("-o, --output-file <filename>", "A file to output the SVG to (stdout if not supplied)")
+    .parse()
+    .opts();
+(async () => {
+    const browser = await puppeteer_1.default.launch({ headless: true });
+    const page = await browser.newPage();
+    await page.setCookie({
+        name: "token",
+        value: token,
+        domain: "miro.com"
+    });
+    await page.setViewport({ width: 1080, height: 1024 });
+    await page.goto(`https://miro.com/app/board/${boardId}/`, {
+        waitUntil: "domcontentloaded"
+    });
+    await page.evaluate(() => new Promise((resolve) => {
+        const interval = setInterval(() => {
+            try {
+                if (typeof window.miro?.board !== "undefined") {
+                    resolve();
+                    clearInterval(interval);
+                }
+            }
+            catch (e) {
+                // ignored
+            }
+        }, 100);
+    }));
+    const getSvgForFrames = (frameNames) => page.evaluate(async (frameNames) => {
+        if (frameNames) {
+            const frames = await window.miro.board.get({ type: ["frame"] });
+            const selectedFrames = frames.filter((frame) => frameNames.includes(frame.title));
+            if (selectedFrames.length !== frameNames.length) {
+                throw Error(`${frameNames.length - selectedFrames.length} frame(s) could not be found on the board.`);
+            }
+            await window.miro.board.deselect();
+            for (const { id } of selectedFrames) {
+                await window.miro.board.select({ id });
+            }
+        }
+        return await window.cmd.board.api.export.makeVector();
+    }, frameNames);
+    if (outputFile?.includes("{frameName}")) {
+        if (!frameNames) {
+            throw Error("Expected frame names to be given when the output file name format expects a frame name.");
+        }
+        for (const frameName of frameNames) {
+            const svg = await getSvgForFrames([frameName]);
+            await (0, promises_1.writeFile)(outputFile.replace("{frameName}", frameName), svg);
+        }
+    }
+    else {
+        const svg = await getSvgForFrames(frameNames);
+        if (outputFile) {
+            await (0, promises_1.writeFile)(outputFile, svg);
+        }
+        else {
+            process.stdout.write(svg);
+        }
+    }
+    await page.close();
+    await browser.close();
+})();

package/index.ts

@@ -0,0 +1,124 @@
+import { writeFile } from "fs/promises";
+import puppeteer from "puppeteer";
+import { program } from "@commander-js/extra-typings";
+
+declare global {
+  interface Window {
+    miro: {
+      board: {
+        get(opts: {
+          type: "frame"[];
+        }): Promise<{ title: string; id: string }[]>;
+        select(opts: { id: string }): Promise<void>;
+        deselect(): Promise<void>;
+      };
+    };
+    cmd: {
+      board: {
+        api: {
+          export: {
+            makeVector: () => Promise<string>;
+          };
+        };
+      };
+    };
+  }
+}
+
+const { token, boardId, frameNames, outputFile } = program
+  .requiredOption("-t, --token <token>", "Miro token")
+  .requiredOption("-b, --board-id <boardId>", "The board ID")
+  .option(
+    "-f, --frame-names <frameNames...>",
+    "The frame name(s), leave empty to export entire board"
+  )
+  .option(
+    "-o, --output-file <filename>",
+    "A file to output the SVG to (stdout if not supplied)"
+  )
+  .parse()
+  .opts();
+
+(async () => {
+  const browser = await puppeteer.launch({ headless: true });
+
+  const page = await browser.newPage();
+
+  await page.setCookie({
+    name: "token",
+    value: token,
+    domain: "miro.com"
+  });
+
+  await page.setViewport({ width: 1080, height: 1024 });
+
+  await page.goto(`https://miro.com/app/board/${boardId}/`, {
+    waitUntil: "domcontentloaded"
+  });
+
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        const interval = setInterval(() => {
+          try {
+            if (typeof window.miro?.board !== "undefined") {
+              resolve();
+              clearInterval(interval);
+            }
+          } catch (e) {
+            // ignored
+          }
+        }, 100);
+      })
+  );
+
+  const getSvgForFrames = (frameNames: string[] | undefined) =>
+    page.evaluate(async (frameNames) => {
+      if (frameNames) {
+        const frames = await window.miro.board.get({ type: ["frame"] });
+
+        const selectedFrames = frames.filter((frame) =>
+          frameNames.includes(frame.title)
+        );
+
+        if (selectedFrames.length !== frameNames.length) {
+          throw Error(
+            `${
+              frameNames.length - selectedFrames.length
+            } frame(s) could not be found on the board.`
+          );
+        }
+
+        await window.miro.board.deselect();
+
+        for (const { id } of selectedFrames) {
+          await window.miro.board.select({ id });
+        }
+      }
+
+      return await window.cmd.board.api.export.makeVector();
+    }, frameNames);
+
+  if (outputFile?.includes("{frameName}")) {
+    if (!frameNames) {
+      throw Error(
+        "Expected frame names to be given when the output file name format expects a frame name."
+      );
+    }
+
+    for (const frameName of frameNames) {
+      const svg = await getSvgForFrames([frameName]);
+      await writeFile(outputFile.replace("{frameName}", frameName), svg);
+    }
+  } else {
+    const svg = await getSvgForFrames(frameNames);
+    if (outputFile) {
+      await writeFile(outputFile, svg);
+    } else {
+      process.stdout.write(svg);
+    }
+  }
+
+  await page.close();
+  await browser.close();
+})();

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "miro-export",
+  "version": "1.0.0",
+  "author": "jolle <npm-contact@jolle.io>",
+  "license": "MIT",
+  "description": "Export Miro boards or frames as SVGs",
+  "keywords": [
+    "miro",
+    "svg",
+    "export"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jolle/miro-export.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jolle/miro-export/issues"
+  },
+  "homepage": "https://github.com/jolle/miro-export",
+  "main": "./build/index.js",
+  "bin": "./build/index.js",
+  "devDependencies": {
+    "@types/node": "^20.11.19",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.1.1",
+    "prettier": "^3.2.5",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^7.0.1"
+  },
+  "dependencies": {
+    "@commander-js/extra-typings": "^12.0.0",
+    "commander": "^12.0.0",
+    "puppeteer": "^22.1.0"
+  },
+  "scripts": {
+    "lint": "eslint *.ts && prettier -c *.ts",
+    "build": "tsc && echo \"#!/usr/bin/env node\n$(cat ./build/index.js)\" > ./build/index.js"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM"],
+    "module": "commonjs",
+    "declaration": false,
+    "outDir": "./build",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}