add @mcap/browser package with BlobReadable

package.json

@@ -8,6 +8,7 @@
       "typescript/examples/*",
       "typescript/support",
       "typescript/nodejs",
+      "typescript/browser",
       "website"
     ]
   },

typescript/browser/.eslintrc.js

@@ -0,0 +1,28 @@
+/* eslint-env node */
+module.exports = {
+  env: { es2020: true },
+  ignorePatterns: ["dist"],
+  extends: ["plugin:@foxglove/base", "plugin:@foxglove/jest", "plugin:import/recommended"],
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      extends: ["plugin:@foxglove/typescript"],
+      parserOptions: {
+        project: "../*/tsconfig.json",
+        tsconfigRootDir: __dirname,
+        // Enable typescript-eslint to use `src` files for type information across project references
+        // <https://github.com/typescript-eslint/typescript-eslint/issues/2094>
+        EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+      },
+    },
+  ],
+  rules: {
+    "no-warning-comments": ["error", { terms: ["fixme"], location: "anywhere" }],
+  },
+  settings: {
+    "import/resolver": {
+      typescript: true,
+      node: true,
+    },
+  },
+};

typescript/browser/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Foxglove Technologies Inc
+
+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.

typescript/browser/README.md

@@ -0,0 +1,33 @@
+# @mcap/browser
+
+[MCAP](https://mcap.dev/) is a modular container format and logging library for pub/sub messages with arbitrary message serialization. It is primarily intended for use in robotics applications, and works well under various workloads, resource constraints, and durability requirements.
+
+The `@mcap/browser` package provides utilities for working with MCAP files in browsers.
+
+## Usage examples
+
+### Reading MCAP files in a browser
+
+```ts
+import { loadDecompressHandlers } from "@mcap/support";
+import { BlobReadable } from "@mcap/browser";
+import { McapIndexedReader } from "@mcap/core";
+import { open } from "fs/promises";
+
+async function onInputOrDrop(event: InputEvent | DragEvent) {
+  const file = event.dataTransfer.files[0];
+  const decompressHandlers = await loadDecompressHandlers();
+  const reader = await McapIndexedReader.Initialize({
+    readable: new BlobReadable(file),
+    decompressHandlers,
+  });
+}
+```
+
+## License
+
+`@mcap/browser` is licensed under the [MIT License](https://opensource.org/licenses/MIT).
+
+## Stay in touch
+
+Join our [Slack channel](https://foxglove.dev/slack) to ask questions, share feedback, and stay up to date on what our team is working on.

typescript/browser/jest.config.json

@@ -0,0 +1,19 @@
+{
+  "testMatch": ["<rootDir>/src/**/*.test.ts"],
+  "transform": {
+    "^.+\\.ts$": [
+      "ts-jest",
+      {
+        "diagnostics": {
+          "//": "add 6133 (unused variables) to default ignore codes",
+          "ignoreCodes": [6059, 18002, 18003, 6133]
+        }
+      }
+    ]
+  },
+  "moduleNameMapper": {
+    "^@mcap/core$": "<rootDir>/../core/src"
+  },
+  "//": "Native find is slow because it does not exclude files: https://github.com/facebook/jest/pull/11264#issuecomment-825377579",
+  "haste": { "forceNodeFilesystemAPI": true }
+}

typescript/browser/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@mcap/browser",
+  "version": "0.1.0",
+  "description": "Support library for using MCAP in the browser",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/foxglove/mcap.git"
+  },
+  "author": {
+    "name": "Foxglove Technologies",
+    "email": "[email protected]"
+  },
+  "homepage": "https://foxglove.dev/",
+  "module": "dist/esm/src/index.js",
+  "main": "dist/cjs/src/index.js",
+  "typings": "dist/esm/src/index.d.ts",
+  "typedoc": {
+    "entryPoint": "src/index.ts"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "scripts": {
+    "build": "tsc -b tsconfig.json tsconfig.cjs.json",
+    "prepack": "yarn build",
+    "lint:ci": "eslint --report-unused-disable-directives .",
+    "lint": "eslint --report-unused-disable-directives --fix .",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@foxglove/eslint-plugin": "0.21.0",
+    "@foxglove/tsconfig": "1.1.0",
+    "@mcap/core": "workspace:*",
+    "@types/jest": "29.4.0",
+    "@typescript-eslint/eslint-plugin": "5.52.0",
+    "@typescript-eslint/parser": "5.52.0",
+    "eslint": "8.34.0",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-import-resolver-typescript": "3.5.5",
+    "eslint-plugin-es": "4.1.0",
+    "eslint-plugin-filenames": "1.3.2",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jest": "27.2.1",
+    "eslint-plugin-prettier": "4.2.1",
+    "jest": "29.4.3",
+    "prettier": "2.8.4",
+    "ts-jest": "29.0.5",
+    "typescript": "4.9.5"
+  }
+}

typescript/browser/src/BlobReadable.ts

@@ -0,0 +1,27 @@
+import type { McapTypes } from "@mcap/core";
+
+/**
+ * IReadable implementation for Blob (and File, which is a Blob).
+ */
+export class BlobReadable implements McapTypes.IReadable {
+  #blob: Blob;
+
+  public constructor(blob: Blob) {
+    this.#blob = blob;
+  }
+
+  public async size(): Promise<bigint> {
+    return BigInt(this.#blob.size);
+  }
+
+  public async read(offset: bigint, size: bigint): Promise<Uint8Array> {
+    if (offset + size > this.#blob.size) {
+      throw new Error(
+        `Read of ${size} bytes at offset ${offset} exceeds file size ${this.#blob.size}`,
+      );
+    }
+    return new Uint8Array(
+      await this.#blob.slice(Number(offset), Number(offset + size)).arrayBuffer(),
+    );
+  }
+}

typescript/browser/src/index.test.ts

@@ -0,0 +1,46 @@
+import { McapWriter, McapIndexedReader, TempBuffer } from "@mcap/core";
+import { Blob } from "buffer";
+
+import { BlobReadable } from "./BlobReadable";
+
+async function collect<T>(iterable: AsyncIterable<T>): Promise<T[]> {
+  const result: T[] = [];
+  for await (const item of iterable) {
+    result.push(item);
+  }
+  return result;
+}
+
+describe("BlobReadable", () => {
+  it("reads blob", async () => {
+    const tempBuffer = new TempBuffer();
+
+    const header = { library: "lib", profile: "prof" };
+    const writer = new McapWriter({ writable: tempBuffer });
+    await writer.start(header);
+    const channel = {
+      topic: "foo",
+      schemaId: 0,
+      messageEncoding: "enc",
+      metadata: new Map(),
+    };
+    const channelId = await writer.registerChannel(channel);
+    const message = {
+      channelId,
+      sequence: 1,
+      logTime: 1n,
+      publishTime: 2n,
+      data: new Uint8Array([1, 2, 3]),
+    };
+    await writer.addMessage(message);
+    await writer.end();
+
+    const blob = new Blob([tempBuffer.get()]);
+
+    const reader = await McapIndexedReader.Initialize({
+      readable: new BlobReadable(blob as unknown as ConstructorParameters<typeof BlobReadable>[0]),
+    });
+    expect(reader.header).toEqual({ ...header, type: "Header" });
+    expect(await collect(reader.readMessages())).toEqual([{ ...message, type: "Message" }]);
+  });
+});

typescript/browser/src/index.ts

@@ -0,0 +1 @@
+export * from "./BlobReadable";

typescript/browser/tsconfig.cjs.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/cjs",
+    "module": "commonjs"
+  }
+}

typescript/browser/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@foxglove/tsconfig/base",
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "outDir": "./dist/esm",
+    "lib": ["es2020", "dom"],
+    "composite": true,
+    "incremental": true
+  },
+  "references": [{ "path": "../core" }]
+}

typescript/core/src/TempBuffer.ts

@@ -1,34 +1,39 @@
 import { IWritable } from "./IWritable";
 import { IReadable } from "./types";
 
+/**
+ * In-memory buffer used for reading and writing MCAP files in tests. Can be used as both an IReadable and an IWritable.
+ */
 export class TempBuffer implements IReadable, IWritable {
-  private _buffer = new ArrayBuffer(1024);
-  private _size = 0;
+  #buffer = new ArrayBuffer(1024);
+  #size = 0;
 
-  position(): bigint {
-    return BigInt(this._size);
+  public position(): bigint {
+    return BigInt(this.#size);
   }
-  async write(data: Uint8Array): Promise<void> {
-    if (this._size + data.byteLength > this._buffer.byteLength) {
-      const newBuffer = new ArrayBuffer(this._size + data.byteLength);
-      new Uint8Array(newBuffer).set(new Uint8Array(this._buffer));
-      this._buffer = newBuffer;
+
+  public async write(data: Uint8Array): Promise<void> {
+    if (this.#size + data.byteLength > this.#buffer.byteLength) {
+      const newBuffer = new ArrayBuffer(this.#size + data.byteLength);
+      new Uint8Array(newBuffer).set(new Uint8Array(this.#buffer));
+      this.#buffer = newBuffer;
     }
-    new Uint8Array(this._buffer, this._size).set(data);
-    this._size += data.byteLength;
+    new Uint8Array(this.#buffer, this.#size).set(data);
+    this.#size += data.byteLength;
   }
 
-  async size(): Promise<bigint> {
-    return BigInt(this._size);
+  public async size(): Promise<bigint> {
+    return BigInt(this.#size);
   }
-  async read(offset: bigint, size: bigint): Promise<Uint8Array> {
-    if (offset < 0n || offset + size > BigInt(this._buffer.byteLength)) {
+
+  public async read(offset: bigint, size: bigint): Promise<Uint8Array> {
+    if (offset < 0n || offset + size > BigInt(this.#buffer.byteLength)) {
       throw new Error("read out of range");
     }
-    return new Uint8Array(this._buffer, Number(offset), Number(size));
+    return new Uint8Array(this.#buffer, Number(offset), Number(size));
   }
 
-  get(): Uint8Array {
-    return new Uint8Array(this._buffer, 0, this._size);
+  public get(): Uint8Array {
+    return new Uint8Array(this.#buffer, 0, this.#size);
   }
 }

typescript/core/src/index.ts

@@ -10,3 +10,4 @@ export type { IWritable } from "./IWritable";
 
 export * from "./hasMcapPrefix";
 export * from "./parse";
+export * from "./TempBuffer";

typescript/nodejs/tsconfig.json

@@ -3,7 +3,7 @@
   "include": ["./src/**/*"],
   "compilerOptions": {
     "outDir": "./dist/esm",
-    "lib": ["es2020", "dom"],
+    "lib": ["es2020"],
     "composite": true,
     "incremental": true
   },

typescript/support/README.md

@@ -8,17 +8,32 @@ The `@mcap/support` package provides utilities for working with MCAP files that
 
 ### Reading MCAP files in a browser
 
-TODO
+```ts
+import { loadDecompressHandlers } from "@mcap/support";
+import { BlobReadable } from "@mcap/browser";
+import { McapIndexedReader } from "@mcap/core";
+import { open } from "fs/promises";
+
+async function onInputOrDrop(event: InputEvent | DragEvent) {
+  const file = event.dataTransfer.files[0];
+  const decompressHandlers = await loadDecompressHandlers();
+  const reader = await McapIndexedReader.Initialize({
+    readable: new BlobReadable(file),
+    decompressHandlers,
+  });
+}
+```
 
 ### Reading MCAP files in Node.js
 
 ```ts
 import { loadDecompressHandlers } from "@mcap/support";
-import { FileHandleReadable } from "@mcap/support/nodejs";
-const decompressHandlers = await loadDecompressHandlers();
+import { FileHandleReadable } from "@mcap/nodejs";
+import { McapIndexedReader } from "@mcap/core";
+import { open } from "fs/promises";
 
+const decompressHandlers = await loadDecompressHandlers();
 const fileHandle = await open("file.mcap", "r");
-
 const reader = await McapIndexedReader.Initialize({
   readable: new FileHandleReadable(fileHandle),
   decompressHandlers,