add a browser package (#905)

This PR creates a `@web5/browser` package.

This package will contain tools and helpers that are useful specifically within a browser environment.

Currently this repo only contains `activatePolyfills` which enables DRL and some other web-specific features.

.changeset/large-crews-divide.md

@@ -0,0 +1,5 @@
+---
+"@web5/browser": patch
+---
+
+Initial publish

.changeset/serious-ads-cheer.md

@@ -0,0 +1,5 @@
+---
+"@web5/api": patch
+---
+
+Moving web-features to @web5/browser package

.github/workflows/alpha-npm.yml

@@ -22,7 +22,7 @@ jobs:
     env:
       # Packages not listed here will be excluded from publishing
       # These are currently in a specific order due to dependency requirements
-      PACKAGES: "crypto crypto-aws-kms common dids credentials agent identity-agent proxy-agent user-agent api"
+      PACKAGES: "common crypto crypto-aws-kms dids credentials agent identity-agent proxy-agent user-agent api browser"
 
     steps:
       - name: Checkout source

.github/workflows/release-snapshot.yml

@@ -27,6 +27,7 @@ jobs:
           [
             "agent",
             "api",
+            "browser",
             "common",
             "credentials",
             "crypto",

.github/workflows/tests-ci.yml

@@ -64,7 +64,7 @@ jobs:
         run: pnpm --recursive --stream --sequential build:tests:node
 
       - name: Run tests for all packages
-        run: pnpm --recursive --stream exec c8 mocha -- --color
+        run: pnpm --recursive --filter '!browser' --stream exec c8 mocha -- --color
         env:
           TEST_DWN_URL: http://localhost:3000
 
@@ -89,7 +89,7 @@ jobs:
           - group: "B"
             packages: "--filter dids --filter identity-agent"
           - group: "C"
-            packages: "--filter api"
+            packages: "--filter api --filter browser"
           - group: "D"
             packages: "--filter crypto"
           - group: "E"

CODEOWNERS

@@ -27,4 +27,5 @@
 /packages/user-agent     @lirancohen @csuwildcat @shamilovtim
 /packages/identity-agent @lirancohen @csuwildcat @shamilovtim
 /packages/api            @lirancohen @csuwildcat @shamilovtim @nitro-neal
+/packages/browser        @lirancohen @csuwildcat
 

package.json

@@ -12,7 +12,8 @@
     "packages/user-agent",
     "packages/proxy-agent",
     "packages/api",
-    "packages/identity-agent"
+    "packages/identity-agent",
+    "packages/browser"
   ],
   "scripts": {
     "clean": "pnpm npkill -d $(pwd)/packages -t dist && pnpm npkill -d $(pwd) -t node_modules",

packages/api/src/index.ts

@@ -30,7 +30,6 @@ export * from './protocol.js';
 export * from './record.js';
 export * from './vc-api.js';
 export * from './web5.js';
-export * from './web-features.js';
 
 import * as utils from './utils.js';
 export { utils };

packages/browser/.c8rc.json

@@ -0,0 +1,19 @@
+{
+  "all": true,
+  "cache": false,
+  "extension": [
+    ".js"
+  ],
+  "include": [
+    "tests/compiled/**/src/**"
+  ],
+  "exclude": [
+    "tests/compiled/**/src/index.js",
+    "tests/compiled/**/src/types.js",
+    "tests/compiled/**/src/types/**"
+  ],
+  "reporter": [
+    "cobertura",
+    "text"
+  ]
+}

packages/browser/README.md

@@ -0,0 +1,61 @@
+# Web5 Browser package
+
+| Web5 tools and features to use in the browser |
+| --------------------------------------------- |
+
+[![NPM Package][browser-npm-badge]][browser-npm-link]
+[![NPM Downloads][browser-downloads-badge]][browser-npm-link]
+
+[![Build Status][browser-build-badge]][browser-build-link]
+[![Open Issues][browser-issues-badge]][browser-issues-link]
+[![Code Coverage][browser-coverage-badge]][browser-coverage-link]
+
+---
+
+- [Web5 Browser](#introduction)
+  - [Activate Polyfills](#activate-polyfills)
+  - [Project Resources](#project-resources)
+
+---
+
+<a id="introduction"></a>
+
+This package contains browser-specific helpers for building DWAs (Decentralized Web Apps).
+
+### Activate Polyfills
+
+This enables a service worker that can handle Web5 features in the browser such as resolving DRLs that look like: `http://dweb/did:dht:abc123/protocols/read/aHR0cHM6Ly9hcmV3ZXdlYjV5ZXQuY29tL3NjaGVtYXMvcHJvdG9jb2xz/avatar`
+
+To enable this functionality import and run `activatePolyfills()` at the entrypoint of your project, or within an existing service worker.
+
+## Project Resources
+
+| Resource                                | Description                                                                   |
+| --------------------------------------- | ----------------------------------------------------------------------------- |
+| [CODEOWNERS][codeowners-link]           | Outlines the project lead(s)                                                  |
+| [CODE OF CONDUCT][code-of-conduct-link] | Expected behavior for project contributors, promoting a welcoming environment |
+| [CONTRIBUTING][contributing-link]       | Developer guide to build, test, run, access CI, chat, discuss, file issues    |
+| [GOVERNANCE][governance-link]           | Project governance                                                            |
+| [LICENSE][license-link]                 | Apache License, Version 2.0                                                   |
+
+[browser-npm-badge]: https://img.shields.io/npm/v/@web5/browser.svg?style=flat&color=blue&santize=true
+[browser-npm-link]: https://www.npmjs.com/package/@web5/browser
+[browser-downloads-badge]: https://img.shields.io/npm/dt/@web5/browser?&color=blue
+[browser-build-badge]: https://img.shields.io/github/actions/workflow/status/TBD54566975/web5-js/tests-ci.yml?branch=main&label=build
+[browser-build-link]: https://github.com/TBD54566975/web5-js/actions/workflows/tests-ci.yml
+[browser-coverage-badge]: https://img.shields.io/codecov/c/gh/TBD54566975/web5-js/main?style=flat&token=YI87CKF1LI
+[browser-coverage-link]: https://app.codecov.io/github/TBD54566975/web5-js/tree/main/packages%2Fbrowser
+[browser-issues-badge]: https://img.shields.io/github/issues/TBD54566975/web5-js/package:%20browser?label=issues
+[browser-issues-link]: https://github.com/TBD54566975/web5-js/issues?q=is%3Aopen+is%3Aissue+label%3A"package%3A+browser"
+[browser-repo-link]: https://github.com/TBD54566975/web5-js/tree/main/packages/browser
+[browser-jsdelivr-link]: https://www.jsdelivr.com/package/npm/@web5/browser
+[browser-jsdelivr-browser]: https://cdn.jsdelivr.net/npm/@web5/browser/dist/browser.mjs
+[browser-unpkg-link]: https://unpkg.com/@web5/browser
+[browser-unpkg-browser]: https://unpkg.com/@web5/browser/dist/browser.mjs
+[codeowners-link]: https://github.com/TBD54566975/web5-js/blob/main/CODEOWNERS
+[code-of-conduct-link]: https://github.com/TBD54566975/web5-js/blob/main/CODE_OF_CONDUCT.md
+[contributing-link]: https://github.com/TBD54566975/web5-js/blob/main/CONTRIBUTING.md
+[governance-link]: https://github.com/TBD54566975/web5-js/blob/main/GOVERNANCE.md
+[license-link]: https://github.com/TBD54566975/web5-js/blob/main/LICENSE
+[discord-badge]: https://img.shields.io/discord/937858703112155166?color=5865F2&logo=discord&logoColor=white
+[discord-link]: https://discord.com/channels/937858703112155166/969272658501976117

packages/browser/build/esbuild-browser-config.cjs

@@ -0,0 +1,13 @@
+/** @type {import('esbuild').BuildOptions} */
+module.exports = {
+  entryPoints : ['./src/index.ts'],
+  bundle      : true,
+  format      : 'esm',
+  sourcemap   : true,
+  minify      : true,
+  platform    : 'browser',
+  target      : ['chrome101', 'firefox108', 'safari16'],
+  define      : {
+    'global': 'globalThis',
+  },
+};

packages/browser/build/esbuild-tests.cjs

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const esbuild = require('esbuild');
+const browserConfig = require('./esbuild-browser-config.cjs');
+
+esbuild.build({
+  ...browserConfig,
+  format      : 'esm',
+  entryPoints : ['./tests/**/*.spec.*'],
+  bundle      : true,
+  minify      : false,
+  outdir      : 'tests/compiled',
+  define      : {
+    ...browserConfig.define,
+    'process.env.TEST_DWN_URL': JSON.stringify(process.env.TEST_DWN_URL ?? null),
+  },
+});

packages/browser/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@web5/browser",
+  "version": "0.0.1",
+  "description": "Web5 tools and features to use in the browser",
+  "type": "module",
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "clean": "rimraf dist coverage tests/compiled",
+    "build:tests": "rimraf tests/compiled && node build/esbuild-tests.cjs",
+    "build:esm": "rimraf dist/esm dist/types && pnpm tsc -p tsconfig.json",
+    "build:browser": "pnpm build:esm",
+    "build": "pnpm clean && pnpm build:esm",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix",
+    "test:browser": "pnpm build:tests && web-test-runner"
+  },
+  "homepage": "https://github.com/TBD54566975/web5-js/tree/main/packages/browser#readme",
+  "bugs": "https://github.com/TBD54566975/web5-js/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TBD54566975/web5-js.git",
+    "directory": "packages/browser"
+  },
+  "license": "Apache-2.0",
+  "contributors": [
+    {
+      "name": "Daniel Buchner",
+      "url": "https://github.com/csuwildcat"
+    },
+    {
+      "name": "Liran Cohen",
+      "url": "https://github.com/lirancohen"
+    }
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "decentralized",
+    "decentralized-applications",
+    "decentralized-identity",
+    "decentralized-web",
+    "DID",
+    "sdk",
+    "verifiable-credentials",
+    "web5",
+    "web5-sdk",
+    "browser",
+    "tools"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@web5/dids": "workspace:*"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.45.3",
+    "@types/chai": "4.3.6",
+    "@types/eslint": "8.56.10",
+    "@types/mocha": "10.0.1",
+    "@types/sinon": "17.0.3",
+    "@typescript-eslint/eslint-plugin": "7.9.0",
+    "@typescript-eslint/parser": "7.14.1",
+    "@web/test-runner": "0.18.2",
+    "@web/test-runner-playwright": "0.11.0",
+    "c8": "9.1.0",
+    "chai": "4.3.10",
+    "esbuild": "0.19.8",
+    "eslint": "9.3.0",
+    "eslint-plugin-mocha": "10.4.3",
+    "mocha": "10.2.0",
+    "mocha-junit-reporter": "2.2.1",
+    "playwright": "1.45.3",
+    "rimraf": "4.4.0",
+    "sinon": "18.0.0",
+    "source-map-loader": "4.0.2",
+    "typescript": "5.1.6"
+  }
+}

packages/browser/src/index.ts

@@ -0,0 +1 @@
+export * from './web-features.js';