docs: almost all browser examples passing

Author: achingbrain

browser-add-readable-stream/index.js

@@ -38,27 +38,29 @@ const createFiles = (directory) => {
   }]
 }
 
-const streamFiles = (ipfs, directory, files) => new Promise((resolve, reject) => {
+const streamFiles = async (ipfs, directory, files) => {
   // Create a stream to write files to
-  const stream = ipfs.addReadableStream()
+  const stream = new ReadableStream({
+    start(controller) {
+      for (let i = 0; i < files.length; i++) {
+        // Add the files one by one
+        controller.enqueue(files[i])
+      }
+
+      // When we have no more files to add, close the stream
+      controller.close()
+    }
+  })
 
-  stream.on('data', (data) => {
+  for await (const data of ipfs.add(stream)) {
     log(`Added ${data.path} hash: ${data.hash}`)
 
     // The last data event will contain the directory hash
     if (data.path === directory) {
-      resolve(data.hash)
+      return data.cid
     }
-  })
-
-  stream.on('error', reject)
-
-  // Add the files one by one
-  files.forEach(file => stream.write(file))
-
-  // When we have no more files to add, close the stream
-  stream.end()
-})
+  }
+}
 
 const log = (line) => {
   document.getElementById('output').appendChild(document.createTextNode(`${line}\r\n`))

browser-browserify/public/index.html

@@ -18,7 +18,7 @@ <h1>JS IPFS - Add data to IPFS from the browser</h1>
     <button id="store">Add text to ipfs</button>
     <div id="output" style="display: none">
       <div>found in ipfs:</div>
-      <div class="content" id="hash">[ipfs hash]</div>
+      <div class="content" id="cid">[ipfs cid]</div>
       <div class="content" id="content">[ipfs content]</div>
     </div>
   </body>

browser-browserify/src/index.js

@@ -9,23 +9,22 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   async function store () {
     const toStore = document.getElementById('source').value
-    const result = await node.add(toStore)
 
-    for (const file of result) {
-      if (file && file.hash) {
-        console.log('successfully stored', file.hash)
+    for await (const file of node.add(toStore)) {
+      if (file && file.cid) {
+        console.log('successfully stored', file.cid)
 
-        await display(file.hash)
+        await display(file.cid)
       }
     }
   }
 
-  async function display (hash) {
-    const data = await node.cat(hash)
-
-    document.getElementById('hash').innerText = hash
-    document.getElementById('content').innerText = data
-    document.getElementById('output').setAttribute('style', 'display: block')
+  async function display (cid) {
+    for await (const data of node.cat(cid)) {
+      document.getElementById('cid').innerText = cid
+      document.getElementById('content').innerText = data
+      document.getElementById('output').setAttribute('style', 'display: block')
+    }
   }
 
   document.getElementById('store').onclick = store

browser-browserify/test.js

@@ -13,7 +13,7 @@ module.exports = {
       .click('#store')
       .waitForElementVisible('#output')
 
-    browser.expect.element('#hash').text.to.contain('QmWfVY9y3xjsixTgbd9AorQxH7VtMpzfx2HaWtsoUYecaX')
+    browser.expect.element('#cid').text.to.contain('QmWfVY9y3xjsixTgbd9AorQxH7VtMpzfx2HaWtsoUYecaX')
     browser.expect.element('#content').text.to.contain('hello')
 
     browser.end()

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

@@ -26,6 +26,7 @@ export default function useIpfsFactory ({ commands }) {
       if (ipfs && ipfs.stop) {
         console.log('Stopping IPFS')
         ipfs.stop().catch(err => console.error(err))
+        ipfs = null
         setIpfsReady(false)
       }
     }

browser-mfs/filetree.js

@@ -1,7 +1,6 @@
 'use strict'
 
 const {
-  log,
   createNode
 } = require('./utils')
 
@@ -20,13 +19,7 @@ const loadFiles = async (ipfs, path) => {
   const output = {}
   path = path.replace(/\/\/+/g, '/')
 
-  const contents = await ipfs.files.ls(path, {
-    long: true
-  })
-    .catch(error => log(error))
-
-  for (let i = 0; i < contents.length; i++) {
-    let entry = contents[i]
+  for await (const entry of ipfs.files.ls(path)) {
     output[entry.name] = entry
 
     if (entry.type === FILE_TYPES.DIRECTORY) {

browser-parceljs/public/index.js

@@ -22,14 +22,18 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   log(`The IPFS node version is ${version.version}`)
 
-  const filesAdded = await node.add({
+  for await (const entry of node.add({
     path: 'hello-parcel.txt',
     content: 'Hello from parcel.js bundled ipfs example'
-  })
+  })) {
+    log(`This page deployed ${entry.path} to IPFS and its CID is ${entry.cid}`)
 
-  log(`This page deployed ${filesAdded[0].path} to IPFS and its hash is ${filesAdded[0].hash}`)
+    const buffers = []
 
-  const fileBuffer = await node.cat(filesAdded[0].hash)
+    for await (const buf of node.cat(entry.cid)) {
+      buffers.push(buf)
+    }
 
-  log(`The contents of the file was: ${fileBuffer.toString()}`)
+    log(`The contents of the file was: ${Buffer.concat(buffers).toString()}`)
+  }
 })

browser-readablestream/index.html

@@ -55,7 +55,7 @@
     <div id="container" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
       <div id="form-wrapper">
           <form>
-            <input type="text" id="hash" placeholder="Hash" disabled />
+            <input type="text" id="cid" placeholder="CID" disabled />
             <button id="gobutton" disabled>Go!</button>
           </form>
           <video id="video" controls></video>

browser-readablestream/index.js

@@ -4,6 +4,7 @@
 
 const Ipfs = require('../../')
 const VideoStream = require('videostream')
+const toStream = require('it-to-stream')
 const {
   dragDrop,
   statusMessages,
@@ -18,14 +19,14 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   // Set up event listeners on the <video> element from index.html
   const videoElement = createVideoElement()
-  const hashInput = document.getElementById('hash')
+  const cidInput = document.getElementById('cid')
   const goButton = document.getElementById('gobutton')
   let stream
 
   goButton.onclick = function (event) {
     event.preventDefault()
 
-    log(`IPFS: Playing ${hashInput.value.trim()}`)
+    log(`IPFS: Playing ${cidInput.value.trim()}`)
 
     // Set up the video stream an attach it to our <video> element
     const videoStream = new VideoStream({
@@ -46,10 +47,10 @@ document.addEventListener('DOMContentLoaded', async () => {
         }
 
         // This stream will contain the requested bytes
-        stream = ipfs.catReadableStream(hashInput.value.trim(), {
+        stream = toStream.readable(ipfs.cat(cidInput.value.trim(), {
           offset: start,
           length: end && end - start
-        })
+        }))
 
         // Log error messages
         stream.on('error', (error) => log(error))
@@ -73,6 +74,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   log('IPFS: Drop an .mp4 file into this window to add a file')
   log('IPFS: Then press the "Go!" button to start playing a video')
 
-  hashInput.disabled = false
+  cidInput.disabled = false
   goButton.disabled = false
 })

browser-readablestream/package.json

@@ -17,6 +17,7 @@
     "webpack": "^4.28.4"
   },
   "dependencies": {
-    "videostream": "^3.2.0"
+    "videostream": "^3.2.0",
+    "it-to-stream": "^0.1.1"
   }
 }

browser-readablestream/utils.js

@@ -36,23 +36,23 @@ const dragDrop = (ipfs) => {
     const files = Array.from(event.dataTransfer.items)
       .filter(item => item.kind === 'file')
       .map(item => item.getAsFile())
-
-    for (const file of files) {
-      const progress = log(`IPFS: Adding ${file.name} 0%`)
-      const added = await ipfs.add({
-        path: file.name,
-        content: file
-      }, {
-        progress: (addedBytes) => {
-          progress.textContent = `IPFS: Adding ${file.name} ${parseInt((addedBytes / file.size) * 100)}%\r\n`
+      .map(file => {
+        return {
+          path: file.name,
+          content: file
         }
       })
 
-      const hash = added[0].hash
+    const progress = log(`IPFS: Adding...`)
 
-      log(`IPFS: Added ${hash}`)
+    for await (const added of ipfs.add(files, {
+      progress: (addedBytes) => {
+        progress.textContent = `IPFS: Adding ${addedBytes} bytes\r\n`
+      }
+    })) {
+      log(`IPFS: Added ${added.cid}`)
 
-      document.querySelector('#hash').value = hash
+      document.querySelector('#cid').value = added.cid.toString()
     }
 
     if (event.dataTransfer.items && event.dataTransfer.items.clear) {

browser-video-streaming/index.html

@@ -1,7 +1,7 @@
 <html>
   <body>
     <video id="video" controls></video>
-    <script src="https://unpkg.com/ipfs/dist/index.js"></script>
+    <script src="../../dist/index.js"></script>
     <script src="https://unpkg.com/hlsjs-ipfs-loader@0.1.4/dist/index.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
     <script src="streaming.js"></script>

browser-webpack/src/components/app.js

@@ -30,11 +30,18 @@ class App extends React.Component {
 
     this.setState({ id, agentVersion, protocolVersion })
 
-    const [{ hash }] = await node.add(stringToUse)
-    this.setState({ addedFileHash: hash })
+    for await (const { cid } of node.add(stringToUse)) {
+      this.setState({ addedFileHash: cid.toString() })
 
-    const data = await node.cat(hash)
-    this.setState({ addedFileContents: data.toString() })
+      let bufs = []
+
+      for await (const buf of node.cat(cid)) {
+        bufs.push(buf)
+      }
+
+      const data = Buffer.concat(bufs)
+      this.setState({ addedFileContents: data.toString('utf8') })
+    }
   }
 
   render () {