docs: add fetch-file-from-kubo example (#12)

* Add fetch-file-from-kubo example * Cleanup * Cleanup * Update examples/fetch-file-from-kubo/package.json Co-authored-by: Alex Potsides <alex@achingbrain.net> * Update examples/fetch-file-from-kubo/src/libp2p.ts Co-authored-by: Alex Potsides <alex@achingbrain.net> * Update examples/fetch-file-from-kubo/package.json Co-authored-by: Alex Potsides <alex@achingbrain.net> * Update examples/fetch-file-from-kubo/src/libp2p.ts Co-authored-by: Alex Potsides <alex@achingbrain.net> * Test examples * Fiddle with CI * Fiddle with CI * Nit * Increase timeout when building Go server * Fix existsSync test * Increase timeout when building Go server * Use destructuring pattern Co-authored-by: Alex Potsides <alex@achingbrain.net>
libp2p · Oct 18, 2022 · 4a8f2f3 · 4a8f2f3
1 parent ec205fb
commit 4a8f2f3
Show file tree

Hide file tree

Showing 11 changed files with 438 additions and 0 deletions.
diff --git a/.github/workflows/examples.yml b/.github/workflows/examples.yml
@@ -0,0 +1,47 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.head_ref || github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  examples:
+    runs-on: ubuntu-latest
+    name: Test example ${{ matrix.project }}
+    strategy:
+      fail-fast: false
+      matrix:
+        project:
+          - fetch-file-from-kubo
+    defaults:
+      run:
+        working-directory: examples/${{ matrix.project }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+      - uses: actions/setup-go@v3
+        with:
+          go-version: '>=1.19.0'
+      - name: Install dependencies for webtransport in root
+        run: npm install
+        working-directory: .
+      - name: build js-libp2p webtransport in root
+        run: npm run build
+        working-directory: .
+      - name: Install dependencies
+        run: npm install
+      - name: Install Playwright
+        run: npx -y playwright install --with-deps
+      - name: Run tests
+        run: npm run test
+        env:
+          CI: true
diff --git a/examples/fetch-file-from-kubo/.gitignore b/examples/fetch-file-from-kubo/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/fetch-file-from-kubo/index.html b/examples/fetch-file-from-kubo/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>js-libp2p WebTransport</title>
+</head>
+
+<body>
+  <div id="app">
+    <div>
+      <p> Connect to (multiaddr with p2p): </p>
+      <input id="peerInput" type="text" placeholder="multiaddr"
+        value="/ip4/18.237.216.248/udp/4002/quic/webtransport/certhash/uEiD_zsX_4c3px3fXGcR7l7Y1uuUVBNrzvDZ3Yo0gG7icvg/certhash/uEiDa3KMjw1j1X7eoyNBLODDh_4TEsKFNKTE7T2Ji-QTE-w/p2p/12D3KooWKasdPzM2iDcBQTHP3YWR8DdgAoBMP4BqXWvxhuCVAYFU"></input>
+      <button id="connectBtn">Connect</button>
+    </div>
+    <div id="connlistWrapperEl" hidden="true">
+      <h3>Active Connections:</h3>
+      <ul id="connlistEl"></ul>
+    </div>
+    <div id="downloadCidWrapperEl" hidden="true">
+      <p> Cid to download: </p>
+      <input id="cidInput" type="text" placeholder="CID to download"
+        value="QmUeN71m4BgvMGtDun8JioAEaeUyqB65dnKVV2oLEsA5WJ"></input>
+      <button id="fetchBtn">fetch</button>
+    </div>
+    <div>
+      <p id="statusEl" hidden="true">fetching</p>
+      <a id="downloadEl" hidden="true" href="">Download</a>
+    </div>
+
+  </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/examples/fetch-file-from-kubo/package.json b/examples/fetch-file-from-kubo/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "fetch-file-from-kubo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "npm run build && playwright test tests"
+  },
+  "dependencies": {
+    "@chainsafe/libp2p-noise": "^9.0.0",
+    "@libp2p/webtransport": "1.0.2",
+    "@multiformats/multiaddr": "^11.0.3",
+    "blockstore-core": "^2.0.1",
+    "ipfs-bitswap": "^13.0.0",
+    "libp2p": "^0.40.0",
+    "test-util-ipfs-example": "^1.0.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.27.1",
+    "typescript": "^4.6.4",
+    "vite": "^3.1.0"
+  }
+}
diff --git a/examples/fetch-file-from-kubo/src/libp2p.ts b/examples/fetch-file-from-kubo/src/libp2p.ts
@@ -0,0 +1,23 @@
+import { webTransport } from '@libp2p/webtransport'
+import { Noise } from '@chainsafe/libp2p-noise'
+import { createLibp2p, Libp2p } from 'libp2p'
+import { createBitswap } from 'ipfs-bitswap'
+import { MemoryBlockstore } from 'blockstore-core/memory'
+
+type Bitswap = ReturnType<typeof createBitswap>
+
+export async function setup (): Promise<{libp2p: Libp2p, bitswap: Bitswap}> {
+  const store = new MemoryBlockstore()
+
+  const node = await createLibp2p({
+    transports: [webTransport()],
+    connectionEncryption: [() => new Noise()]
+  })
+
+  await node.start()
+
+  const bitswap = createBitswap(node, store)
+  await bitswap.start()
+
+  return { libp2p: node, bitswap }
+}
diff --git a/examples/fetch-file-from-kubo/src/main.ts b/examples/fetch-file-from-kubo/src/main.ts
@@ -0,0 +1,64 @@
+import './style.css'
+import { multiaddr } from '@multiformats/multiaddr'
+import { setup as libp2pSetup } from './libp2p'
+import { CID } from 'multiformats/cid'
+
+localStorage.debug = '*'
+
+declare global {
+  interface Window {
+    fetchBtn: HTMLButtonElement
+    connectBtn: HTMLButtonElement
+    peerInput: HTMLInputElement
+    cidInput: HTMLInputElement
+    statusEl: HTMLParagraphElement
+    downloadEl: HTMLAnchorElement
+    downloadCidWrapperEl: HTMLDivElement
+    connlistWrapperEl: HTMLDivElement
+    connlistEl: HTMLUListElement
+  }
+}
+
+(async function () {
+  const { libp2p, bitswap } = await libp2pSetup()
+  window.connectBtn.onclick = async () => {
+    const ma = multiaddr(window.peerInput.value)
+    await libp2p.dial(ma)
+  }
+
+  libp2p.connectionManager.addEventListener('peer:connect', (_connection) => {
+    updateConnList()
+  })
+  libp2p.connectionManager.addEventListener('peer:disconnect', (_connection) => {
+    updateConnList()
+  })
+
+  function updateConnList () {
+    const addrs = libp2p.getConnections().map(c => c.remoteAddr.toString())
+    if (addrs.length > 0) {
+      window.downloadCidWrapperEl.hidden = false
+      window.connlistWrapperEl.hidden = false
+      window.connlistEl.innerHTML = ''
+      addrs.forEach(a => {
+        const li = document.createElement('li')
+        li.innerText = a
+        window.connlistEl.appendChild(li)
+      })
+    } else {
+      window.downloadCidWrapperEl.hidden = true
+      window.connlistWrapperEl.hidden = true
+      window.connlistEl.innerHTML = ''
+    }
+  }
+
+  window.fetchBtn.onclick = async () => {
+    const c = CID.parse(window.cidInput.value)
+    window.statusEl.hidden = false
+    const val = await bitswap.get(c)
+    window.statusEl.hidden = true
+
+    window.downloadEl.href = window.URL.createObjectURL(new Blob([val], { type: 'bytes' }))
+    window.downloadEl.hidden = false
+  }
+// eslint-disable-next-line no-console
+})().catch(err => console.error(err))
diff --git a/examples/fetch-file-from-kubo/src/style.css b/examples/fetch-file-from-kubo/src/style.css
@@ -0,0 +1,109 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+#connlistWrapperEl ul {
+  max-width: 400px;
+  overflow-x: auto;
+}
diff --git a/examples/fetch-file-from-kubo/src/vite-env.d.ts b/examples/fetch-file-from-kubo/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />