fix: switch delegated routing example to vite (#181)

React-scripts have a dep conflict with react-native that's unlikely to be resolved so switch to vite.
libp2p · Oct 8, 2024 · 0dc653b · 0dc653b
1 parent 5681de2
commit 0dc653b
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -13,8 +13,9 @@
   },
   "type": "module",
   "scripts": {
-    "build": "BUILD_PATH=dist PUBLIC_URL=/ react-scripts build",
-    "start": "PUBLIC_URL=/ react-scripts start",
+    "start": "vite",
+    "build": "vite build",
+    "server": "node ./server.js",
     "test:firefox": "npm run build && playwright test --browser=firefox test",
     "test:chrome": "npm run build && playwright test test",
     "test": "npm run build && test-browser-example test"
@@ -23,20 +24,14 @@
     "@helia/delegated-routing-v1-http-api-client": "^4.0.0",
     "@helia/delegated-routing-v1-http-api-server": "^4.0.0",
     "libp2p": "^2.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vite": "^5.3.1"
   },
   "devDependencies": {
-    "test-ipfs-example": "^1.0.0",
     "eslint-config-ipfs": "^7.0.2",
-    "helia": "next"
+    "helia": "^5.0.0",
+    "test-ipfs-example": "^1.0.0"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
   "private": true
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Delegated Routing</title>
+    <link rel="stylesheet" type="text/css" href="main.css">
+  </head>
+  <body>
+    <div>
+      <header class="center">
+        <h1>Delegated Routing</h1>
+      </header>
+      <section class="center">
+        <form id="findProvidersForm">
+          <label>
+            Find providers of CID:
+            <input type="text" value="" id="find-providers-input" />
+            <input type="submit" value="Find Providers" id="find-providers-button" />
+          </label>
+        </form>
+        <form id="findPeerForm">
+          <label>
+            Find peer:
+            <input type="text" value="" id="find-peer-input" />
+            <input type="submit" value="Find PeerInfo" id="find-peer-button" />
+          </label>
+        </form>
+      </section>
+      <section id="loading-notification">
+        <div class="lds-ripple"><div></div><div></div></div>
+      </section>
+      <section>
+        <pre id="output">
+        </pre>
+      </section>
+    </div>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,60 @@
 /* eslint-disable no-console */
-import 'react'
-import ReactDOM from 'react-dom'
-import App from './App.js' // eslint-disable-line no-unused-vars
 
-ReactDOM.render(<App />, document.getElementById('root'))
+import { createDelegatedRoutingV1HttpApiClient } from '@helia/delegated-routing-v1-http-api-client'
+import { peerIdFromString } from '@libp2p/peer-id'
+import { createLibp2p } from 'libp2p'
+import { CID } from 'multiformats/cid'
+
+const DOM = {
+  findProvidersInput: () => document.getElementById('find-providers-input'),
+  findProvidersButton: () => document.getElementById('find-providers-button'),
+
+  findPeerInput: () => document.getElementById('find-peer-input'),
+  findPeerButton: () => document.getElementById('find-peer-button'),
+
+  loadingNotificationElement: () => document.getElementById('loading-notification'),
+
+  output: () => document.getElementById('output')
+}
+
+const libp2p = await createLibp2p({
+  services: {
+    delegatedRouting: () => createDelegatedRoutingV1HttpApiClient('http://127.0.0.1:9832')
+  }
+})
+
+// find providers
+DOM.findProvidersButton().onclick = async (event) => {
+  event.preventDefault()
+  DOM.loadingNotificationElement().className = 'loading'
+
+  try {
+    const cid = CID.parse(DOM.findProvidersInput().value)
+    const providers = []
+    DOM.output().innerText = ''
+
+    for await (const provider of libp2p.contentRouting.findProviders(cid)) {
+      providers.push(provider)
+
+      DOM.output().innerText = JSON.stringify(providers, null, 2)
+    }
+  } finally {
+    DOM.loadingNotificationElement().className = ''
+  }
+}
+
+// find peer
+DOM.findPeerButton().onclick = async (event) => {
+  event.preventDefault()
+  DOM.loadingNotificationElement().className = 'loading'
+
+  try {
+    const peerId = peerIdFromString(DOM.findPeerInput().value)
+    DOM.output().innerText = ''
+    const peerInfo = await libp2p.peerRouting.findPeer(peerId)
+
+    DOM.output().innerText = JSON.stringify(peerInfo, null, 2)
+  } finally {
+    DOM.loadingNotificationElement().className = ''
+  }
+}
diff --git a/public/main.css → src/main.css b/public/main.css → src/main.css
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,14 @@
+export default {
+  build: {
+    target: 'es2022',
+    outDir: '../dist',
+    emptyOutDir: true
+  },
+  optimizeDeps: {
+    esbuildOptions: { target: 'es2022', supported: { bigint: true } }
+  },
+  server: {
+    open: true
+  },
+  root: './src'
+}