chore: upgrade ipfs to 0.55.x

achingbrain · achingbrain · commit 0c12c13561c9 · 2021-05-13T16:23:29.000+01:00
Updates to the latest ipfs release. Some extra build config was
needed because it uses optional chaining.

This is supported out of the box by the version of acorn used by
webpack 5 but vue is currently using webpack 4 so some extra config
was necessary.

Also uprades `to-buffer` - this now returns `Uint8Array`s instead
of the node `Buffer` built in, which means you can't call
`.toString(encoding)` on it any more, instead you need to use the
global js `TextDecoder` class.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,10 +31,10 @@
     "googleapis": "^71.0.0",
     "highlight.js": "^9.12.0",
     "inquirer": "^7.1.0",
-    "ipfs": "^0.50.2",
+    "ipfs": "^0.55.1",
     "ipfs-css": "^0.6.0",
     "it-all": "^1.0.1",
-    "it-to-buffer": "^1.0.1",
+    "it-to-buffer": "^2.0.0",
     "lodash": "^4.17.19",
     "mailchimp-api-v3": "^1.13.1",
     "markdown-toc": "^1.2.0",
@@ -60,7 +60,10 @@
     "vuelidate": "^0.7.5"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/preset-env": "^7.14.2",
     "@cypress/webpack-preprocessor": "^4.1.1",
+    "@vue/babel-preset-app": "^4.5.13",
     "@vue/cli-plugin-babel": "^3.12.1",
     "@vue/cli-plugin-eslint": "^3.12.1",
     "@vue/cli-service": "^3.12.1",
@@ -119,9 +122,7 @@
     }
   },
   "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
+    "last 2 versions and not dead and > 2%"
   ],
   "bin": {
     "protowizard": "./scripts/commands/wizard/index.js"
diff --git a/src/tutorials/0004-mutable-file-system/04.js b/src/tutorials/0004-mutable-file-system/04.js
@@ -36,7 +36,7 @@ const validate = async (result, ipfs) => {
   let uploadedFilenames = uploadedFiles.map(file => file.name.toString()).sort()
   let ipfsFilenames = ipfsFiles.map(file => file.name.toString()).sort()
   let itemsMatch = JSON.stringify(ipfsFilenames) === JSON.stringify(uploadedFilenames)
-  let itemsAreFiles = ipfsFiles.every(file => file.type === 0)
+  let itemsAreFiles = ipfsFiles.every(file => file.type === 'file')
 
   if (itemsMatch && itemsAreFiles) {
     return {
diff --git a/src/tutorials/0004-mutable-file-system/05.js b/src/tutorials/0004-mutable-file-system/05.js
@@ -14,7 +14,7 @@ const validate = async (result, ipfs) => {
   let uploadedFilenames = uploadedFiles.map(file => file.name.toString()).sort()
   let ipfsFilenames = expected.map(file => file.name.toString()).sort()
   let itemsMatch = JSON.stringify(ipfsFilenames) === JSON.stringify(uploadedFilenames)
-  let itemsAreFiles = expected.every(file => file.type === 0)
+  let itemsAreFiles = expected.every(file => file.type === 'file')
   let rightFilesUploaded = itemsMatch && itemsAreFiles
 
   if (!result) {
diff --git a/src/tutorials/0004-mutable-file-system/07.js b/src/tutorials/0004-mutable-file-system/07.js
@@ -11,14 +11,14 @@ const validate = async (result, ipfs) => {
   let stringifiedResult = JSON.stringify(result, null, 2)
   let ipfsFilesInRoot = await all(ipfs.files.ls('/'))
   let listedRoot = stringifiedResult === JSON.stringify(ipfsFilesInRoot, null, 2)
-  let rootSomeItemIsFile = ipfsFilesInRoot.some(file => file.type === 0)
+  let rootSomeItemIsFile = ipfsFilesInRoot.some(file => file.type === 'file')
 
-  const includesSome = ipfsFilesInRoot.some(file => file.name === 'some' && file.type === 1)
+  const includesSome = ipfsFilesInRoot.some(file => file.name === 'some' && file.type === 'directory')
   if (includesSome) {
     const ipfsFilesInSome = await all(ipfs.files.ls('/some'))
     listedSome = stringifiedResult === JSON.stringify(ipfsFilesInSome, null, 2)
 
-    const includesStuff = ipfsFilesInSome.some(file => file.name === 'stuff' && file.type === 1)
+    const includesStuff = ipfsFilesInSome.some(file => file.name === 'stuff' && file.type === 'directory')
     if (includesStuff) {
       const ipfsFilesInSomeStuff = await all(ipfs.files.ls('/some/stuff'))
       listedSomeStuff = stringifiedResult === JSON.stringify(ipfsFilesInSomeStuff, null, 2)
diff --git a/src/tutorials/0004-mutable-file-system/08.js b/src/tutorials/0004-mutable-file-system/08.js
@@ -33,7 +33,7 @@ const validate = async (result, ipfs) => {
 
     // check whether contents of /some/stuff are the right files
     itemsMatch = JSON.stringify(someStuffFilenames) === JSON.stringify(uploadedFilenames)
-    itemsAreFiles = someStuffFiles.every(file => file.type === 0)
+    itemsAreFiles = someStuffFiles.every(file => file.type === 'file')
   }
 
   if (!result) {
@@ -61,7 +61,7 @@ const validate = async (result, ipfs) => {
       fail: utils.validationMessages.VALUE_IS_ASYNC_ITERABLE_ALL
     }
   } else if (rootIsEmpty) {
-    return { fail: 'Your root directory is empty. Did you accidentally move the `some/stuff` directory? Remember to test whether each item is a file (`type === 0`) before moving it.' }
+    return { fail: 'Your root directory is empty. Did you accidentally move the `some/stuff` directory? Remember to test whether each item is a file (`type === \'file\'`) before moving it.' }
   } else if (result instanceof Error && result.code === utils.ipfs.errorCodes.ERR_INVALID_PATH) {
     return {
       fail: 'Invalid path. Did you use just the file name when attempting to move each file? Remember to start the path with a leading `/`.',
@@ -119,11 +119,11 @@ const run = async (files) => {
   await ipfs.files.mkdir('/some/stuff', { parents: true })
   const rootDirectoryContents = await all(ipfs.files.ls('/'))
 
-  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 0).map(file => '/' + file.name)
-  await ipfs.files.mv(...filepathsToMove, '/some/stuff')
+  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 'file').map(file => '/' + file.name)
+  await ipfs.files.mv(filepathsToMove, '/some/stuff')
 
   //  // alternatively, wrapping multiple mv calls into a single async function with await:
-  //  const filesToMove = rootDirectoryContents.filter(item => item.type === 0)
+  //  const filesToMove = rootDirectoryContents.filter(item => item.type === 'file')
   //  await Promise.all(filesToMove.map(file => {
   //    return ipfs.files.mv('/' + file.name, '/some/stuff')
   // }))
diff --git a/src/tutorials/0004-mutable-file-system/08.md b/src/tutorials/0004-mutable-file-system/08.md
@@ -11,7 +11,7 @@ The method looks like this:
 await ipfs.files.mv(from, to, [options])
 ```
 
-`from` is the source path (or paths) of the content you'd like to move. `to` is the destination path.
+`from` is the source path (or paths) of the content you'd like to move and can be a string or an array of strings. `to` is the destination path.
 
 If your destination path references parent directories that don't already exist, you'll need to use the `{ parents: true }` option, just as you did with `files.mkdir`.
 
@@ -28,15 +28,9 @@ await ipfs.files.mv('/source-directory', '/destination-directory')
 await ipfs.files.mv('/source-file.txt', '/destination-file.txt')
 ```
 
-To move multiple files into a directory, you can add multiple source paths before the `to` argument:
+To move multiple files into a directory, you can pass `from` as an array of paths:
 
 ```js
 // move multiple files into a directory
-await ipfs.files.mv('/source-file-1.txt', '/source-file-2.txt', '/source-file-3.txt', '/destination-directory')
-```
-
-If you're starting with an array of source paths, you can use JavaScript's [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to expand its elements into the required format:
-
-```js
-await ipfs.files.mv(...fromArray, '/destination-directory')
+await ipfs.files.mv(['/source-file-1.txt', '/source-file-2.txt', '/source-file-3.txt'], '/destination-directory')
 ```
diff --git a/src/tutorials/0004-mutable-file-system/09.js b/src/tutorials/0004-mutable-file-system/09.js
@@ -91,8 +91,8 @@ const run = async (files) => {
   await Promise.all(files.map(f => ipfs.files.write('/' + f.name, f, { create: true })))
   await ipfs.files.mkdir('/some/stuff', { parents: true })
   const rootDirectoryContents = await all(ipfs.files.ls('/'))
-  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 0).map(file => '/' + file.name)
-  await ipfs.files.mv(...filepathsToMove, '/some/stuff')
+  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 'file').map(file => '/' + file.name)
+  await ipfs.files.mv(filepathsToMove, '/some/stuff')
 
   // Your code goes here
 
@@ -109,8 +109,8 @@ const run = async (files) => {
   await Promise.all(files.map(f => ipfs.files.write('/' + f.name, f, { create: true })))
   await ipfs.files.mkdir('/some/stuff', { parents: true })
   const rootDirectoryContents = await all(ipfs.files.ls('/'))
-  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 0).map(file => '/' + file.name)
-  await ipfs.files.mv(...filepathsToMove, '/some/stuff')
+  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 'file').map(file => '/' + file.name)
+  await ipfs.files.mv(filepathsToMove, '/some/stuff')
 
   await ipfs.files.cp('/ipfs/QmWCscor6qWPdx53zEQmZvQvuWQYxx1ARRCXwYVE4s9wzJ', '/some/stuff/success.txt')
 
diff --git a/src/tutorials/0004-mutable-file-system/09.md b/src/tutorials/0004-mutable-file-system/09.md
@@ -7,7 +7,7 @@ Unlike `files.mv`, which removes items from their source path when moving them t
 
 The method looks like this:
 ```js
-await ipfs.files.cp(...from, to, [options])
+await ipfs.files.cp(from, to, [options])
 ```
 However, you now have two formatting options for `from`. You can pass in either:
 
@@ -25,11 +25,8 @@ You can use `files.cp` to perform a number of different operations:
 await ipfs.files.cp('/source-file.txt', '/destination-directory')
 await ipfs.files.cp('/ipfs/QmWGeRAEgtsHW3ec7U4qW2CyVy7eA2mFRVbk1nb24jFyks', '/destination-directory')
 
-// copy multiple files into a directory (note the two acceptable formats with or without [ ])
-await ipfs.files.cp('/source-file-1.txt', '/source-file-2.txt', '/destination-directory')
+// copy multiple files into a directory (note `from` is now an array)
 await ipfs.files.cp(['/source-file-1.txt', '/source-file-2.txt'], '/destination-directory')
-await ipfs.files.cp('/ipfs/QmWGeRAEgtsHW3ec7U4qW2CyVy7eA2mFRVbk1nb24jFyks',
- '/ipfs/QmWGeRAEgtsHW3jk7U4qW2CyVy7eA2mFRVbk1nb24jFyre', '/destination-directory')
 await ipfs.files.cp(['/ipfs/QmWGeRAEgtsHW3ec7U4qW2CyVy7eA2mFRVbk1nb24jFyks',
  '/ipfs/QmWGeRAEgtsHW3jk7U4qW2CyVy7eA2mFRVbk1nb24jFyre'], '/destination-directory')
 
diff --git a/src/tutorials/0004-mutable-file-system/10.js b/src/tutorials/0004-mutable-file-system/10.js
@@ -34,8 +34,8 @@ const run = async (files) => {
   await Promise.all(files.map(f => ipfs.files.write('/' + f.name, f, { create: true })))
   await ipfs.files.mkdir('/some/stuff', { parents: true })
   let rootDirectoryContents = await all(ipfs.files.ls('/'))
-  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 0).map(file => '/' + file.name)
-  await ipfs.files.mv(...filepathsToMove, '/some/stuff')
+  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 'file').map(file => '/' + file.name)
+  await ipfs.files.mv(filepathsToMove, '/some/stuff')
   await ipfs.files.cp('/ipfs/QmWCscor6qWPdx53zEQmZvQvuWQYxx1ARRCXwYVE4s9wzJ', '/some/stuff/success.txt')
   let someStuffDirectoryContents = await all(ipfs.files.ls('/some/stuff'))
 
@@ -53,12 +53,13 @@ const run = async (files) => {
   await Promise.all(files.map(f => ipfs.files.write('/' + f.name, f, { create: true })))
   await ipfs.files.mkdir('/some/stuff', { parents: true })
   let rootDirectoryContents = await all(ipfs.files.ls('/'))
-  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 0).map(file => '/' + file.name)
-  await ipfs.files.mv(...filepathsToMove, '/some/stuff')
+  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 'file').map(file => '/' + file.name)
+  await ipfs.files.mv(filepathsToMove, '/some/stuff')
   await ipfs.files.cp('/ipfs/QmWCscor6qWPdx53zEQmZvQvuWQYxx1ARRCXwYVE4s9wzJ', '/some/stuff/success.txt')
   let someStuffDirectoryContents = await all(ipfs.files.ls('/some/stuff'))
 
-  let secretMessage = (await toBuffer(ipfs.files.read('/some/stuff/success.txt'))).toString('utf8')
+  let secretMessageContents = await toBuffer(ipfs.files.read('/some/stuff/success.txt'))
+  let secretMessage = new TextDecoder().decode(secretMessageContents)
 
   return secretMessage
 }
diff --git a/src/tutorials/0004-mutable-file-system/10.md b/src/tutorials/0004-mutable-file-system/10.md
@@ -19,7 +19,7 @@ The `files.read` method returns an Async Iterable that iterates over the file's
 // the toBuffer variable is globally available (just like ipfs)
 
 let bufferedContents = await toBuffer(ipfs.files.read('/directory/some-file.txt'))  // a buffer
-let contents = bufferedContents.toString() // a string
+let contents = new TextDecoder().decode(bufferedContents) // a string
 ```
 
 When you're ready to try this in the real world, you should note that the above example can result in heavy memory usage, depending on the contents of the file being read. If you're working with large files and find this to be the case, you might want to skip using the `it-to-buffer` package and instead process each chunk of data iteratively. The main reason IPFS now returns `Async Iterables` is to provide a built-in option for dealing with potential performance issues.
diff --git a/src/tutorials/0004-mutable-file-system/11.js b/src/tutorials/0004-mutable-file-system/11.js
@@ -67,8 +67,8 @@ const run = async (files) => {
   await Promise.all(files.map(f => ipfs.files.write('/' + f.name, f, { create: true })))
   await ipfs.files.mkdir('/some/stuff', { parents: true })
   let rootDirectoryContents = await all(ipfs.files.ls('/'))
-  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 0).map(file => '/' + file.name)
-  await ipfs.files.mv(...filepathsToMove, '/some/stuff')
+  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 'file').map(file => '/' + file.name)
+  await ipfs.files.mv(filepathsToMove, '/some/stuff')
   await ipfs.files.cp('/ipfs/QmWCscor6qWPdx53zEQmZvQvuWQYxx1ARRCXwYVE4s9wzJ', '/some/stuff/success.txt')
   let someStuffDirectoryContents = await all(ipfs.files.ls('/some/stuff'))
 
@@ -87,8 +87,8 @@ const run = async (files) => {
   await Promise.all(files.map(f => ipfs.files.write('/' + f.name, f, { create: true })))
   await ipfs.files.mkdir('/some/stuff', { parents: true })
   let rootDirectoryContents = await all(ipfs.files.ls('/'))
-  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 0).map(file => '/' + file.name)
-  await ipfs.files.mv(...filepathsToMove, '/some/stuff')
+  const filepathsToMove = rootDirectoryContents.filter(file => file.type === 'file').map(file => '/' + file.name)
+  await ipfs.files.mv(filepathsToMove, '/some/stuff')
   await ipfs.files.cp('/ipfs/QmWCscor6qWPdx53zEQmZvQvuWQYxx1ARRCXwYVE4s9wzJ', '/some/stuff/success.txt')
   let someStuffDirectoryContents = await all(ipfs.files.ls('/some/stuff'))
 
diff --git a/src/tutorials/0004-mutable-file-system/11.md b/src/tutorials/0004-mutable-file-system/11.md
@@ -6,19 +6,18 @@
 MFS allows you to remove files or directories using the [`files.rm`](https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/FILES.md#ipfsfilesrmpaths-options) method:
 
 ```js
-await ipfs.files.rm(...paths, [options])
+await ipfs.files.rm(path, [options])
 ```
 
-`paths` are one or more paths to remove.
+`path` is one or more paths to remove - passed as a string or an array of strings.
 
 By default, if you attempt to remove a directory that still has contents, the request will fail. To remove a directory and everything contained in it, you'll need to use the option `{ recursive: true }`.
 
 ```js
 // remove a file
 await ipfs.files.rm('/my/beautiful/file.txt')
 
-// remove multiple files (note the two acceptable formats with or without [ ])
-await ipfs.files.rm('/my/beautiful/file.txt', '/my/other/file.txt')
+// remove multiple files (note `path` is now an array)
 await ipfs.files.rm(['/my/beautiful/file.txt', '/my/other/file.txt'])
 
 // remove a directory and its contents
diff --git a/src/tutorials/0005-regular-files-api/04.js b/src/tutorials/0005-regular-files-api/04.js
@@ -40,7 +40,7 @@ const solution = `/* global ipfs, toBuffer */
 
 const run = async () => {
     const fileContents = await toBuffer(ipfs.cat('QmWCscor6qWPdx53zEQmZvQvuWQYxx1ARRCXwYVE4s9wzJ'))
-    const message = fileContents.toString()
+    const message = new TextDecoder().decode(fileContents)
 
     return message
 }
diff --git a/src/tutorials/0005-regular-files-api/07.js b/src/tutorials/0005-regular-files-api/07.js
@@ -83,7 +83,7 @@ const run = async () => {
   // Using the dir subdirectory CID and file path relative to it:
   // const bufferedContents = await toBuffer(ipfs.cat("/ipfs/QmPT14mWCteuybfrfvqas2L2oin1Y2NCbwzTh9cc33GM1r/success.txt"))
 
-  return bufferedContents.toString()
+  return new TextDecoder.decode(bufferedContents)
 }
 return run
 `
diff --git a/src/tutorials/utils/validation-messages.js b/src/tutorials/utils/validation-messages.js
@@ -5,5 +5,5 @@ export default {
   SUCCESS: 'Success! You did it!',
   NO_RESULT: 'Oops! You forgot to return a result :(',
   VALUE_IS_ASYNC_ITERABLE_ALL: 'The returned value is an Async Iterable. Did you forget to put all the results together using either `for await...of` or with `all`?',
-  VALUE_IS_ASYNC_ITERABLE_TOBUFFER: 'The returned value is an Async Iterable. Did you forget to concatenate all the data using `toBuffer`?'
+  VALUE_IS_ASYNC_ITERABLE_TOBUFFER: 'The returned value is an Async Iterable. Did you forget to concatenate all the data using `all` and `uint8ArrayConcat`?'
 }
diff --git a/vue.config.js b/vue.config.js
@@ -20,6 +20,18 @@ module.exports = {
       test: /\.md$/,
       use: 'raw-loader'
     })
+    // this is to enable optional chaining in webpack 4 - can be
+    // removed once vue upgrades to webpack 5
+    config.module.rules.push({
+      test: /\.js$/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['@vue/babel-preset-app', '@babel/preset-env'],
+          plugins: ['@babel/plugin-proposal-optional-chaining']
+        }
+      }
+    })
     process.env.NODE_ENV === 'production' &&
       config.plugins.push(
         new PrerenderSPAPlugin({
