From 329faaff3b924739185d3d98e09579d244d2e176 Mon Sep 17 00:00:00 2001 From: Alan Shaw Date: Fri, 2 Aug 2019 17:24:13 +0100 Subject: [PATCH] docs: update examples (#2319) Since I was going through these anyway to ensure they work with [0.37](https://github.com/ipfs/js-ipfs/issues/2192) I've updated the examples to use the new [`IPFS.create` constructor](https://github.com/ipfs/js-ipfs#ipfs-constructor) and switched to using the promised API so that we onboard new users to using promises and minimise the disruption caused when https://github.com/ipfs/js-ipfs/issues/1670 bubbles up to here. License: MIT Signed-off-by: Alan Shaw --- examples/browser-add-readable-stream/index.js | 49 ++-- examples/browser-browserify/src/index.js | 29 +- .../browser-create-react-app/package.json | 2 +- .../src/hooks/use-ipfs-factory.js | 10 +- examples/browser-mfs/index.js | 13 +- examples/browser-parceljs/package.json | 2 +- examples/browser-parceljs/public/index.js | 22 +- examples/browser-readablestream/index.js | 13 +- examples/browser-readablestream/utils.js | 50 ++-- examples/browser-script-tag/README.md | 2 +- examples/browser-script-tag/index.html | 31 ++- examples/browser-video-streaming/streaming.js | 10 +- .../browser-webpack/src/components/app.js | 63 ++--- examples/circuit-relaying/README.md | 35 +-- examples/circuit-relaying/index.html | 4 +- examples/circuit-relaying/package.json | 4 +- examples/circuit-relaying/src/app.js | 106 +++---- examples/custom-ipfs-repo/index.js | 75 +++-- examples/custom-libp2p/index.js | 43 ++- .../exchange-files-in-browser/package.json | 3 +- .../exchange-files-in-browser/public/app.js | 263 +++++++++--------- .../public/index.html | 2 +- examples/ipfs-101/1.js | 9 +- examples/ipfs-101/README.md | 43 ++- examples/run-in-electron/main.js | 23 +- examples/run-in-electron/package.json | 4 +- examples/traverse-ipld-graphs/create-node.js | 14 +- examples/traverse-ipld-graphs/eth.js | 65 ++--- .../get-path-accross-formats.js | 83 ++---- examples/traverse-ipld-graphs/get-path.js | 46 +-- examples/traverse-ipld-graphs/get.js | 25 +- examples/traverse-ipld-graphs/git.js | 71 ++--- examples/traverse-ipld-graphs/put.js | 24 +- examples/traverse-ipld-graphs/tree.js | 73 ++--- 34 files changed, 577 insertions(+), 734 deletions(-) diff --git a/examples/browser-add-readable-stream/index.js b/examples/browser-add-readable-stream/index.js index 44f526f6ff..1b425e6518 100644 --- a/examples/browser-add-readable-stream/index.js +++ b/examples/browser-add-readable-stream/index.js @@ -3,39 +3,27 @@ /* global Ipfs */ /* eslint-env browser */ -const repoPath = `ipfs-${Math.random()}` -const ipfs = new Ipfs({ repo: repoPath }) const { Buffer } = Ipfs -ipfs.on('ready', () => { - const directory = 'directory' +const main = async () => { + const repoPath = `ipfs-${Math.random()}` + const ipfs = await Ipfs.create({ repo: repoPath }) - // Our list of files - const files = createFiles(directory) - - streamFiles(directory, files, (err, directoryHash) => { - if (err) { - return log(`There was an error adding the files ${err}`) - } + const directoryName = 'directory' - ipfs.ls(directoryHash, (err, files) => { - if (err) { - return log(`There was an error listing the files ${err}`) - } + // Our list of files + const inputFiles = createFiles(directoryName) - log(` --- + const directoryHash = await streamFiles(ipfs, directoryName, inputFiles) -Directory contents: + const fileList = await ipfs.ls(directoryHash) -${directory}/ ${directoryHash}`) + log(`\n--\n\nDirectory contents:\n\n${directoryName}/ ${directoryHash}`) - files.forEach((file, index) => { - log(` ${index < files.length - 1 ? '\u251C' : '\u2514'}\u2500 ${file.name} ${file.path} ${file.hash}`) - }) - }) + fileList.forEach((file, index) => { + log(` ${index < fileList.length - 1 ? '\u251C' : '\u2514'}\u2500 ${file.name} ${file.path} ${file.hash}`) }) -}) +} const createFiles = (directory) => { return [{ @@ -52,25 +40,30 @@ const createFiles = (directory) => { }] } -const streamFiles = (directory, files, cb) => { +const streamFiles = (ipfs, directory, files) => new Promise((resolve, reject) => { // Create a stream to write files to const stream = ipfs.addReadableStream() - stream.on('data', function (data) { + + stream.on('data', (data) => { log(`Added ${data.path} hash: ${data.hash}`) // The last data event will contain the directory hash if (data.path === directory) { - cb(null, data.hash) + resolve(data.hash) } }) + 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`)) } + +main() diff --git a/examples/browser-browserify/src/index.js b/examples/browser-browserify/src/index.js index 62e23e5fa8..28c18da047 100644 --- a/examples/browser-browserify/src/index.js +++ b/examples/browser-browserify/src/index.js @@ -2,17 +2,15 @@ const IPFS = require('ipfs') -const node = new IPFS({ repo: String(Math.random() + Date.now()) }) +document.addEventListener('DOMContentLoaded', async () => { + const node = await IPFS.create({ repo: String(Math.random() + Date.now()) }) -node.once('ready', () => console.log('IPFS node is ready')) + console.log('IPFS node is ready') -function store () { - const toStore = document.getElementById('source').value + async function store () { + const toStore = document.getElementById('source').value - node.add(Buffer.from(toStore), (err, res) => { - if (err || !res) { - return console.error('ipfs add error', err, res) - } + const res = await node.add(Buffer.from(toStore)) res.forEach((file) => { if (file && file.hash) { @@ -20,19 +18,14 @@ function store () { display(file.hash) } }) - }) -} - -function display (hash) { - // buffer: true results in the returned result being a buffer rather than a stream - node.cat(hash, (err, data) => { - if (err) { return console.error('ipfs cat error', err) } + } + async function display (hash) { + // buffer: true results in the returned result being a buffer rather than a stream + const data = await node.cat(hash) document.getElementById('hash').innerText = hash document.getElementById('content').innerText = data - }) -} + } -document.addEventListener('DOMContentLoaded', () => { document.getElementById('store').onclick = store }) diff --git a/examples/browser-create-react-app/package.json b/examples/browser-create-react-app/package.json index 7096b18534..b0053f9466 100644 --- a/examples/browser-create-react-app/package.json +++ b/examples/browser-create-react-app/package.json @@ -5,7 +5,7 @@ "dependencies": { "dot-prop": "^5.0.0", "ipfs": "file:../../", - "ipfs-css": "^0.12.0", + "ipfs-css": "^0.13.1", "react": "^16.8.0", "react-dom": "^16.8.0", "react-scripts": "3.0.1", diff --git a/examples/browser-create-react-app/src/hooks/use-ipfs-factory.js b/examples/browser-create-react-app/src/hooks/use-ipfs-factory.js index acdf8ee856..4b4c1901c0 100644 --- a/examples/browser-create-react-app/src/hooks/use-ipfs-factory.js +++ b/examples/browser-create-react-app/src/hooks/use-ipfs-factory.js @@ -40,7 +40,7 @@ export default function useIpfsFactory ({ commands }) { } else { try { console.time('IPFS Started') - ipfs = await promiseMeJsIpfs(Ipfs, {}) + ipfs = await Ipfs.create() console.timeEnd('IPFS Started') } catch (error) { console.error('IPFS init error:', error) @@ -54,11 +54,3 @@ export default function useIpfsFactory ({ commands }) { return { ipfs, isIpfsReady, ipfsInitError } } - -function promiseMeJsIpfs (Ipfs, opts) { - return new Promise((resolve, reject) => { - const ipfs = new Ipfs(opts) - ipfs.once('ready', () => resolve(ipfs)) - ipfs.once('error', err => reject(err)) - }) -} diff --git a/examples/browser-mfs/index.js b/examples/browser-mfs/index.js index 7c6d82cb00..c08794abc3 100644 --- a/examples/browser-mfs/index.js +++ b/examples/browser-mfs/index.js @@ -3,9 +3,6 @@ /* eslint-env browser */ const IPFS = require('ipfs') -const ipfs = new IPFS({ - repo: `ipfs-${Math.random()}` -}) const { dragDrop, log, @@ -25,11 +22,15 @@ const { } = require('./forms') const mime = require('mime-sniffer') -hideForms() +document.addEventListener('DOMContentLoaded', async () => { + const ipfs = await IPFS.create({ + repo: `ipfs-${Math.random()}` + }) + + hideForms() -log('IPFS: Initialising') + log('IPFS: Initialising') -ipfs.on('ready', () => { // Allow adding files to IPFS via drag and drop dragDrop(async (files) => { /* eslint-disable-next-line no-alert */ diff --git a/examples/browser-parceljs/package.json b/examples/browser-parceljs/package.json index 0df3276289..426f20d74e 100644 --- a/examples/browser-parceljs/package.json +++ b/examples/browser-parceljs/package.json @@ -26,6 +26,6 @@ "babel-plugin-transform-regenerator": "^6.26.0", "babel-polyfill": "^6.26.0", "parcel-bundler": "^1.10.3", - "standard": "^12.0.1" + "standard": "^13.1.0" } } diff --git a/examples/browser-parceljs/public/index.js b/examples/browser-parceljs/public/index.js index 411b6ea8ad..5857d053fd 100644 --- a/examples/browser-parceljs/public/index.js +++ b/examples/browser-parceljs/public/index.js @@ -1,21 +1,21 @@ import 'babel-polyfill' import IPFS from 'ipfs' -// IPFS node setup -const node = new IPFS({ repo: String(Math.random() + Date.now()) }) +document.addEventListener('DOMContentLoaded', async () => { + // IPFS node setup + const node = await IPFS.create({ repo: String(Math.random() + Date.now()) }) -// UI elements -const status = document.getElementById('status') -const output = document.getElementById('output') + // UI elements + const status = document.getElementById('status') + const output = document.getElementById('output') -output.textContent = '' + output.textContent = '' -function log (txt) { - console.info(txt) - output.textContent += `${txt.trim()}\n` -} + function log (txt) { + console.info(txt) + output.textContent += `${txt.trim()}\n` + } -node.on('ready', async () => { status.innerText = 'Connected to IPFS :)' const version = await node.version() diff --git a/examples/browser-readablestream/index.js b/examples/browser-readablestream/index.js index 9b09b1beaf..373cb51402 100644 --- a/examples/browser-readablestream/index.js +++ b/examples/browser-readablestream/index.js @@ -3,8 +3,7 @@ /* eslint-env browser */ const Ipfs = require('../../') -const videoStream = require('videostream') -const ipfs = new Ipfs({ repo: 'ipfs-' + Math.random() }) +const VideoStream = require('videostream') const { dragDrop, statusMessages, @@ -12,9 +11,11 @@ const { log } = require('./utils') -log('IPFS: Initialising') +document.addEventListener('DOMContentLoaded', async () => { + const ipfs = await Ipfs.create({ repo: 'ipfs-' + Math.random() }) + + log('IPFS: Initialising') -ipfs.on('ready', () => { // Set up event listeners on the