fix: update examples to run with latest js-ipfs (#232)

Updates all examples to the latest deps

Author: achingbrain

.github/workflows/ci.yml

@@ -52,7 +52,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: lts/*
       - run: npm install
       - uses: GabrielBB/xvfb-action@v1
         name: Run tests
@@ -67,7 +67,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: lts/*
       - name: Install dependencies
         run: npm install
       - uses: GabrielBB/xvfb-action@v1

examples/browser-add-readable-stream/package.json

@@ -14,7 +14,7 @@
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs-core": "^0.12.2"
+    "ipfs-core": "^0.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",

examples/browser-angular/package.json

@@ -12,26 +12,26 @@
     "test": "npm run build && playwright test tests"
   },
   "dependencies": {
-    "@angular/animations": "~12.2.0",
-    "@angular/common": "~12.2.0",
-    "@angular/compiler": "~12.2.0",
-    "@angular/core": "~12.2.0",
-    "@angular/forms": "~12.2.0",
-    "@angular/platform-browser": "~12.2.0",
-    "@angular/platform-browser-dynamic": "~12.2.0",
-    "@angular/router": "~12.2.0",
+    "@angular/animations": "^13.2.0",
+    "@angular/common": "^13.2.0",
+    "@angular/compiler": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "@angular/forms": "^13.2.0",
+    "@angular/platform-browser": "^13.2.0",
+    "@angular/platform-browser-dynamic": "^13.2.0",
+    "@angular/router": "^13.2.0",
     "global": "^4.4.0",
-    "ipfs-core": "^0.12.2",
-    "ipfs-core-types": "^0.8.0",
-    "rxjs": "~7.4.0",
+    "ipfs-core": "^0.14.0",
+    "ipfs-core-types": "^0.10.0",
+    "rxjs": "^7.5.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^12.1.0",
-    "@angular-devkit/build-angular": "~12.2.2",
-    "@angular/cli": "~12.2.2",
-    "@angular/compiler-cli": "~12.2.0",
+    "@angular-builders/custom-webpack": "^13.0.0",
+    "@angular-devkit/build-angular": "^13.2.0",
+    "@angular/cli": "^13.2.0",
+    "@angular/compiler-cli": "^13.2.0",
     "@playwright/test": "^1.12.3",
     "@types/jasmine": "~3.10.2",
     "@types/node": "^16.6.2",
@@ -45,6 +45,6 @@
     "playwright": "^1.12.3",
     "rimraf": "^3.0.2",
     "test-util-ipfs-example": "^1.0.2",
-    "typescript": "~4.3.5"
+    "typescript": "^4.5.5"
   }
 }

examples/browser-browserify/package.json

@@ -13,7 +13,7 @@
     "test": "npm run build && playwright test tests"
   },
   "dependencies": {
-    "ipfs-core": "^0.12.2"
+    "ipfs-core": "^0.14.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.12.3",

examples/browser-create-react-app/package.json

@@ -36,19 +36,20 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "dot-prop": "^6.0.1",
-    "ipfs-core": "^0.12.2",
+    "dot-prop": "^7.1.1",
+    "ipfs-core": "^0.14.0",
     "ipfs-css": "^1.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
     "tachyons": "^4.12.0",
     "web-vitals": "^2.1.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.12.3",
     "playwright": "^1.12.3",
     "rimraf": "^3.0.2",
-    "test-util-ipfs-example": "^1.0.2"
+    "test-util-ipfs-example": "^1.0.2",
+    "util": "^0.12.4"
   }
 }

examples/browser-create-react-app/src/hooks/use-ipfs.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import dotProp from 'dot-prop'
+import { getProperty } from 'dot-prop'
 // dot-prop: used to obtain a property of an object when the name of property is a string
 // here we get ipfs.id when calling dotProp.get(ipfs, cmd), with cmd = 'id'
 // and we get ipfs.hash when calling with cmd = 'hash' etc.
@@ -22,7 +22,7 @@ export default function useIpfs (ipfs, cmd, opts) {
 async function callIpfs (ipfs, cmd, setRes, ...opts) {
   if (!ipfs) return null
   console.log(`Call ipfs.${cmd}`)
-  const ipfsCmd = dotProp.get(ipfs, cmd)
+  const ipfsCmd = getProperty(ipfs, cmd)
   const res = await ipfsCmd(...opts)
   console.log(`Result ipfs.${cmd}`, res)
   setRes(res)

examples/browser-exchange-files/package.json

@@ -12,17 +12,17 @@
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs-core": "^0.12.2",
+    "ipfs-core": "^0.14.0",
     "it-all": "^1.0.4",
     "libp2p-websockets": "^0.16.1",
     "uint8arrays": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@playwright/test": "^1.12.3",
-    "ipfs": "^0.60.2",
-    "ipfs-core-types": "^0.8.0",
-    "ipfs-http-client": "^54.0.2",
+    "ipfs": "^0.62.0",
+    "ipfs-core-types": "^0.10.0",
+    "ipfs-http-client": "^56.0.0",
     "libp2p-webrtc-star-signalling-server": "^0.1.0",
     "parcel": "latest",
     "playwright": "^1.12.3",

examples/browser-ipns-publish/index.html

@@ -198,6 +198,7 @@ <h1 class="aqua fw2 montserrat dib ma0 pv2 ph1 v-mid fr f3 lh-copy">
       <input
         id="topic"
         class="dib w-50 ph1 pv2 monospace input-reset ba b--black-20 border-box"
+        placeholder="/ipfs/QmFoo"
         disabled="disabled"
       />
       <button

examples/browser-ipns-publish/package.json

@@ -18,13 +18,12 @@
     "build": "parcel build index.html --no-scope-hoist",
     "serve": "parcel serve index.html --open -p 8888",
     "start": "npm run serve",
-    "test": "npm run build && playwright test tests --retries=3"
+    "test": "npm run build && playwright test tests --retries=3 --timeout=120000"
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "human-crypto-keys": "^0.1.4",
-    "ipfs-core": "^0.12.2",
-    "ipfs-http-client": "^54.0.2",
+    "ipfs-core": "^0.14.0",
+    "ipfs-http-client": "^56.0.0",
     "ipfs-utils": "^9.0.2",
     "ipns": "^0.16.0",
     "it-last": "^1.0.4",
@@ -38,7 +37,7 @@
     "@playwright/test": "^1.12.3",
     "delay": "^5.0.0",
     "execa": "^6.0.0",
-    "go-ipfs": "0.10.0",
+    "go-ipfs": "^0.11.0",
     "ipfsd-ctl": "^10.0.3",
     "parcel": "latest",
     "playwright": "^1.12.3",

examples/browser-ipns-publish/src/index.js

@@ -5,10 +5,8 @@ const ipns = require("ipns");
 const IPFS = require("ipfs-core");
 const pRetry = require("p-retry");
 const last = require("it-last");
-const cryptoKeys = require("human-crypto-keys"); // { getKeyPairFromSeed }
 const { toString: uint8ArrayToString } = require('uint8arrays/to-string')
 const { fromString: uint8ArrayFromString } = require('uint8arrays/from-string')
-const { sha256 } = require('multiformats/hashes/sha2')
 const { base58btc } = require('multiformats/bases/base58')
 const { base36 } = require('multiformats/bases/base36')
 const { CID } = require('multiformats/cid')
@@ -17,7 +15,7 @@ const WS = require('libp2p-websockets')
 const transportKey = WS.prototype[Symbol.toStringTag]
 const filters = require('libp2p-websockets/src/filters')
 
-const { sleep, Logger, onEnterPress, catchAndLog } = require("./util");
+const { Logger, onEnterPress, catchAndLog } = require("./util");
 
 async function main() {
   const apiUrlInput = document.getElementById("api-url");
@@ -88,8 +86,20 @@ async function main() {
     await ipfsBrowser.swarm.connect(addr);
     log(`<span class="green">Success!</span>`);
     log("Listing swarm peers...");
-    await sleep();
-    const peers = await ipfsBrowser.swarm.peers();
+
+    const peers = await pRetry(async () => {
+      const peers = await ipfsBrowser.swarm.peers();
+
+      if (peers.find(peer => addr.endsWith(peer.peer))) {
+        return peers
+      }
+
+      throw new Error('Could not find go-ipfs peer in swarm peers')
+    })
+      .catch(err => {
+        sLog(`<span class="red">[Fail] ${err.message}</span>`);
+      })
+
     peers.forEach((peer) => {
       //console.log(`peer: ${JSON.stringify(peer, null, 2)}`);
       const fullAddr = `${peer.addr}/ipfs/${peer.peer}`;
@@ -157,14 +167,11 @@ async function main() {
   async function createKey(keyName) {
     return new Promise(async (resolve, reject) => {
       try {
-        // quick and dirty key gen, don't do this in real life
-        const key = await sha256.digest(
-          uint8ArrayFromString(keyName + Math.random().toString(36).substring(2))
-        );
-        const keyPair = await cryptoKeys.getKeyPairFromSeed(key.bytes, "rsa");
+        // generate a key on the browser IPNS keychain with the specified name
+        await ipfsAPI.key.gen(keyName, {
+          type: 'ed25519'
+        })
 
-        // put it on the browser IPNS keychain and name it
-        await ipfsBrowser.key.import(keyName, keyPair.privateKey);
         // now this key can be used to publish to this ipns publicKey
         resolve(true);
       } catch (err) {
@@ -179,6 +186,10 @@ async function main() {
       throw new Error("Missing ipns content to publish");
     }
 
+    if (!content.startsWith('/ipfs/')) {
+      throw new Error("Content should start with /ipfs/");
+    }
+
     if (!ipfsAPI) {
       throw new Error("Connect to a go-server node first");
     }
@@ -232,17 +243,23 @@ async function main() {
       sLog(`[Pass] Pubsub.ls`);
     }
 
-    let remListSubs = await ipfsAPI.name.pubsub.subs(); // API
     const multihash = uint8ArrayFromString(keys.id, 'base58btc')
     const digest = Digest.decode(multihash)
     const libp2pKey = CID.createV1(0x72, digest)
     const ipnsName = `/ipns/${libp2pKey.toString(base36)}`
 
-    if (!remListSubs.includes(ipnsName)) {
-      sLog(`<span class="red">[Fail] !Name.Pubsub.subs ${ipnsName}</span>`);
-    } else {
-      sLog(`[Pass] Name.Pubsub.subs`);
-    }
+    await pRetry(async () => {
+      let remListSubs = await ipfsAPI.name.pubsub.subs(); // API
+
+      if (!remListSubs.includes(ipnsName)) {
+        throw new Error(`!Name.Pubsub.subs ${ipnsName}`)
+      } else {
+        sLog(`[Pass] Name.Pubsub.subs`);
+      }
+    })
+      .catch(err => {
+        sLog(`<span class="red">[Fail] ${err.message}</span>`);
+      })
 
     // publish will send a pubsub msg to the server to update their ipns record
     log(`Publishing ${content} to ${keyName} ${ipnsName}`);

examples/browser-ipns-publish/src/util.js

@@ -1,5 +1,3 @@
-exports.sleep = (ms = 1000) => new Promise(resolve => setTimeout(resolve, ms))
-
 exports.Logger = outEl => {
   outEl.innerHTML = ''
   return message => {

examples/browser-ipns-publish/tests/test.js

@@ -71,6 +71,8 @@ play.describe('http ipns publish:', () => {
       .filter(addr => addr.includes("/ws/p2p/"))
       .pop()
 
+    await page.waitForSelector(`${consoleDOM}:has-text('Browser IPFS ready!')`);
+
     await page.waitForSelector(apiSelector);
     await page.fill(apiSelector, apiAddress);
     await page.click(nodeConnect);

examples/browser-lit/package.json

@@ -14,7 +14,7 @@
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs-core": "^0.12.2",
+    "ipfs-core": "^0.14.0",
     "ipfs-css": "^1.3.0",
     "lit": "^2.0.2",
     "tachyons": "^4.12.0"

examples/browser-mfs/package.json

@@ -14,7 +14,7 @@
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs-core": "^0.12.2",
+    "ipfs-core": "^0.14.0",
     "mime-sniffer": "~0.0.3"
   },
   "devDependencies": {

examples/browser-nextjs/package.json

@@ -12,15 +12,15 @@
     "test": "npm run build && playwright test tests"
   },
   "dependencies": {
-    "ipfs-core": "^0.12.2",
+    "ipfs-core": "^0.14.0",
     "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.12.3",
-    "eslint": "^7.20.0",
-    "eslint-config-next": "^11.0.0",
+    "eslint": "^8.7.0",
+    "eslint-config-next": "^12.0.9",
     "playwright": "^1.12.3",
     "rimraf": "^3.0.2",
     "test-util-ipfs-example": "^1.0.0"

examples/browser-parceljs/package.json

@@ -15,7 +15,7 @@
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs-core": "^0.12.2"
+    "ipfs-core": "^0.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",

examples/browser-readablestream/package.json

@@ -14,7 +14,7 @@
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs-core": "^0.12.2",
+    "ipfs-core": "^0.14.0",
     "it-to-stream": "^1.0.0",
     "videostream": "^3.2.0"
   },

examples/browser-service-worker/package.json

@@ -16,11 +16,10 @@
     "last 1 Chrome version"
   ],
   "dependencies": {
-    "ipfs-core": "^0.12.2",
-    "ipfs-message-port-client": "^0.10.2",
-    "ipfs-message-port-protocol": "^0.10.0",
-    "ipfs-message-port-server": "^0.10.0",
-    "process": "0.11.10"
+    "ipfs-core": "^0.14.0",
+    "ipfs-message-port-client": "^0.11.0",
+    "ipfs-message-port-protocol": "^0.11.0",
+    "ipfs-message-port-server": "^0.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",

examples/browser-sharing-node-across-tabs/package.json

@@ -14,9 +14,9 @@
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs-core": "^0.12.2",
-    "ipfs-message-port-client": "^0.10.2",
-    "ipfs-message-port-server": "^0.10.0"
+    "ipfs-core": "^0.14.0",
+    "ipfs-message-port-client": "^0.11.0",
+    "ipfs-message-port-server": "^0.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",

examples/browser-video-streaming/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "hls.js": "^0.14.17",
     "hlsjs-ipfs-loader": "^0.3.0",
-    "ipfs-core": "^0.12.2"
+    "ipfs-core": "^0.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",