feat: add pre-built browser bundle (#1586)

storacha · Nov 17, 2024 · 2fd07e7 · 2fd07e7
1 parent 1482d69
commit 2fd07e7
Show file tree

Hide file tree

Showing 5 changed files with 305 additions and 22 deletions.
diff --git a/.attw.json b/.attw.json
@@ -1,3 +1,4 @@
 {
-  "ignoreRules": ["cjs-resolves-to-esm"]
+  "ignoreRules": ["cjs-resolves-to-esm"],
+  "excludeEntrypoints": ["browser.min.js"]
 }
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ docs
 .env
 .next
 out
+*.min.js
 
 # debug
 npm-debug.log*

diff --git a/packages/w3up-client/README.md b/packages/w3up-client/README.md
@@ -13,7 +13,7 @@
 
 This library is the user-facing "porcelain" client for interacting with w3up services from JavaScript. It wraps the lower-level [`@web3-storage/access`][access-client-github] and [`@web3-storage/upload-client`][upload-client-github] client packages, which target individual w3up services. We recommend using `w3up-client` instead of using those "plumbing" packages directly, but you may find them useful if you need more context on w3up's architecture and internals.
 
-**`w3up-client` requires Node 18 or higher**.
+**`w3up-client` requires modern browser or Node 18+**.
 
 > ⚠️❗ __Public Data__ 🌎: All data uploaded to w3up is available to anyone who requests it using the correct CID. Do not store any private or sensitive information in an unencrypted form using w3up.
 
@@ -117,6 +117,22 @@ const client = await create({ principal })
 
 Once initialized, you can access the client's `Agent` with the [`agent` getter][docs-Client#agent].
 
+##### Pre-built bundle
+
+You can also import a pre-built bundle, which adds the exports from the client to a _global_ variable `w3up`:
+
+```html
+<!doctype html>
+<script src="https://cdn.jsdelivr.net/npm/@web3-storage/w3up-client/browser.min.js"></script>
+<script>
+  async function main () {
+    const client = await w3up.create()
+    console.log(client.did())
+  }
+  main()
+</script>
+```
+
 #### Creating and registering Spaces
 
 A [`Space`][docs-Space] acts as a namespace for your uploads, and what your Agent will need a delegation from to store data with w3up. The first thing to do is login your Agent with your email address. Calling `login` will cause an email to be sent to the given address. Once a user clicks the confirmation link in the email, the `login` method will resolve. Make sure to check for errors, as `login` will fail if the email is not confirmed within the expiration timeout. Authorization needs to happen only once per agent.

diff --git a/packages/w3up-client/package.json b/packages/w3up-client/package.json
@@ -32,6 +32,9 @@
       "types": "./dist/src/account.d.ts",
       "import": "./dist/src/account.js"
     },
+    "./browser.min.js": {
+      "default": "./browser.min.js"
+    },
     "./delegation": {
       "types": "./dist/src/delegation.d.ts",
       "import": "./dist/src/delegation.js"
@@ -118,12 +121,15 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "*.min.js"
   ],
   "scripts": {
     "attw": "attw --pack .",
     "lint": "tsc --build && eslint '**/*.{js,ts}' && prettier --check '**/*.{js,ts,yml,json}' --ignore-path ../../.gitignore",
-    "build": "tsc --build",
+    "build": "npm run build:tsc && npm run build:bundle:browser",
+    "build:tsc": "tsc --build",
+    "build:bundle:browser": "esbuild src/index.js --bundle --minify --target=chrome130 --format=iife --global-name=w3up --outfile=browser.min.js",
     "dev": "tsc --build --watch",
     "check": "tsc --build",
     "prepare": "npm run build",
@@ -165,6 +171,7 @@
     "@web3-storage/upload-api": "workspace:^",
     "assert": "^2.0.0",
     "c8": "^7.13.0",
+    "esbuild": "^0.24.0",
     "hundreds": "^0.0.9",
     "mocha": "^10.1.0",
     "multiformats": "^12.1.2",
@@ -191,7 +198,8 @@
       "docs",
       "docs-generated",
       "coverage",
-      "src/types.js"
+      "src/types.js",
+      "*.min.js"
     ]
   },
   "directories": {