chore: switch browser car demo to use vite

as skypack is not work, see: web3-storage/ipfs-car#27 License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>
nftstorage · Jun 15, 2021 · f6e2781 · f6e2781
1 parent 338f823
commit f6e2781
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 45 deletions.
diff --git a/packages/client/examples/browser/README.md b/packages/client/examples/browser/README.md
@@ -4,15 +4,21 @@ Examples using the nft.storage client from the browser.
 
 - `store.html` - creates ERC-1155 compatible metadata
 - `storeBlob.html` - uploads a single file using `storeBlob`
-- `storeCar.html` - uploads a Content Addressed Archive using `storeCar`
 - `storeDirectory.html` - uploads a multiple files using `storeDirectory`
 
+These demos use https://skypack.dev to bundle the deps up.
+
+**Note**
+
+At time of writing skypack's bundle of `ipfs-car` is incorrect, so a CAR upload demo is provided in /car that
+the CAR upload demo converts it's deps to local ESM modules with [`vite`](https://vitejs.dev/), in the /car folder.
+
 ## Setup
 
 Register an account at https://nft.storage and create a new API key.
 
-Open `store.html`/`storeBlob.html`/`storeCar.html`/`storeDirectory.html` and replace `API_KEY` in the code with your key.
+Open `store.html`/`storeBlob.html`/`storeDirectory.html` and replace `API_KEY` in the code with your key.
 
 ## Running
 
-Open `store.html`/`storeBlob.html`/`storeCar.html`/`storeDirectory.html` in your favourite web browser.
+Open `store.html`/`storeBlob.html`/`storeDirectory.html` in your favourite web browser.
diff --git a/packages/client/examples/browser/car/.gitignore b/packages/client/examples/browser/car/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/packages/client/examples/browser/car/README.md b/packages/client/examples/browser/car/README.md
@@ -0,0 +1,16 @@
+# CAR upload demo - nft.storage
+
+A demo using ipfs-car in the browser to create a CAR file and pre-calculate the CID for an asset then storing it on nft.storage and confirming that it uses the exact same CID for the asset.
+
+## Getting started
+
+```console.
+npm install
+npm run dev
+
+# or
+yarn
+yarn dev
+```
+
+Then visit `http://localhost:3000?key=<your nft.upload API KEY here>`
diff --git a/packages/client/examples/browser/car/index.html b/packages/client/examples/browser/car/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>CAR upload - nft.storage</title>
+  </head>
+  <body>
+    <pre id="out"></pre>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/packages/client/examples/browser/car/main.js b/packages/client/examples/browser/car/main.js
@@ -0,0 +1,35 @@
+import { NFTStorage } from 'nft.storage'
+import { packToBlob } from 'ipfs-car/pack/blob'
+
+const endpoint = 'http://api.nft.storage' // the default
+const token =
+  new URLSearchParams(window.location.search).get('key') || 'API_KEY' // your API key from https://nft.storage/manage
+
+function log(msg) {
+  msg = JSON.stringify(msg, null, 2)
+  document.getElementById('out').innerHTML += `${msg}\n`
+}
+
+async function main() {
+  const store = new NFTStorage({ endpoint, token })
+  const data = 'Hello nft.storage!'
+
+  // locally chunk'n'hash the data to get the CID and pack the blocks in to a CAR
+  const { root, car } = await packToBlob({
+    input: [new TextEncoder().encode(data)],
+  })
+  const expectedCid = root.toString()
+  console.log({ expectedCid })
+
+  // send the CAR to nft.storage, the returned CID will match the one we created above.
+  const cid = await store.storeCar(car)
+
+  // verify the service is storing the CID we expect
+  const cidsMatch = expectedCid === cid
+  log({ data, cid, expectedCid, cidsMatch })
+
+  // check that the CID is pinned
+  const status = await store.status(cid)
+  log(status)
+}
+main()
diff --git a/packages/client/examples/browser/car/package.json b/packages/client/examples/browser/car/package.json
@@ -0,0 +1,15 @@
+{
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^2.3.7"
+  },
+  "dependencies": {
+    "ipfs-car": "^0.2.4",
+    "nft.storage": "../../../"
+  }
+}
diff --git a/packages/client/examples/browser/storeCar.html b/packages/client/examples/browser/storeCar.html