chore: update ipfs dep (#267)

This PR updates ipfs to 0.37.0-rc.0.

Due to the constructor changes in this version the examples have also been updated.

This required an update of `react-live` to a version that supports async/await. Unfortunately in this new version styling for syntax highlighting is done by "theme" objects not CSS so there are a bunch of changes that are fallout from this.

Notably, I've updated the `syntax-highlighter` component to use the same highlight method as `react-live` so that we can re-use the theme object and not also import the theme as a CSS file.

I also switchied to using the `Prism` instance provided by `prism-react-renderer` that `react-live` uses instead of importing `prismjs`. This should reduce overall bundle size.

License: MIT
Signed-off-by: Alan Shaw <[email protected]>

Author: Alan Shaw

package-lock.json

@@ -35,17 +35,16 @@
     "gatsby-plugin-postcss": "^2.0.0",
     "gatsby-plugin-react-helmet": "^3.0.1",
     "intersection-observer": "~0.5.0",
-    "ipfs": "~0.36.1",
+    "ipfs": "~0.37.0",
     "normalize.css": "^8.0.0",
     "postcss-import": "^12.0.0",
     "postcss-preset-moxy": "^2.3.1",
-    "prismjs": "^1.15.0",
     "prop-types": "^15.6.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-helmet": "^5.2.0",
     "react-intl": "^2.7.1",
-    "react-live": "^1.12.0",
+    "react-live": "^2.1.2",
     "react-markdown": "^4.0.3",
     "react-resize-detector": "^3.1.3",
     "react-scroll-to-component": "^1.0.2",

package.json

@@ -74,35 +74,38 @@ class GettingStarted extends Component {
           <ReactMarkdown className={ styles.sectionDescription } source={ messages.gettingStarted.sectionDesc } />
           <div className={ styles.panel } >
             <p className={ styles.liveSnippetTitle }>{ messages.gettingStarted.addDataToIPFS }</p>
-            <LiveProvider key="add" className={ styles.liveSnippet } code={ codeAdd } scope={ this.scopeAdd } mountStylesheet={ false } transformCode={ transformCode }>
-              <div className={ styles.liveSnippetEditorContainer }>
-                <LiveEditor name="add" setRun={ this.handleSetRun } className={ 'language-js ' + styles.liveSnippetEditor }/>
-                <button className={ styles.liveSnippetRun } onClick={ this.handleRunClick('add') }>Run</button>
-              </div>
-              <div className={ styles.liveSnippetPreview } >
-                <p className={ styles.liveSnippetOutput }>{ messages.gettingStarted.output }</p>
-                <pre>
-                  <code>{ outputAdd }</code>
-                </pre>
-                { (ipfsLoaded && runAdd) && <LivePreview/> }
-                { ipfsLoaded && <LiveError/> }
+            <LiveProvider key="add" code={ codeAdd } scope={ this.scopeAdd } mountStylesheet={ false } transformCode={ transformCode }>
+              <div className={ styles.liveSnippet }>
+                <div className={ styles.liveSnippetEditorContainer }>
+                  <LiveEditor name="add" setRun={ this.handleSetRun } language='js' />
+                  <button className={ styles.liveSnippetRun } onClick={ this.handleRunClick('add') }>Run</button>
+                </div>
+                <div className={ styles.liveSnippetPreview } >
+                  <p className={ styles.liveSnippetOutput }>{ messages.gettingStarted.output }</p>
+                  <pre>
+                    <code>{ outputAdd }</code>
+                  </pre>
+                  { (ipfsLoaded && runAdd) && <LivePreview/> }
+                  { ipfsLoaded && <LiveError/> }
+                </div>
               </div>
             </LiveProvider>
             <p className={ styles.liveSnippetTitle }>{ messages.gettingStarted.getDataFromIPFS }</p>
             <p className={ styles.liveSnippetSubtitle }>{ messages.gettingStarted.usingJavascript }</p>
-            <LiveProvider key="get" className={ styles.liveSnippet } code={ codeGet(cid) } scope={ this.scopeGet } mountStylesheet={ false } transformCode={ transformCode }>
-
-              <div className={ styles.liveSnippetEditorContainer }>
-                <LiveEditor name="get" setRun={ this.handleSetRun } className={ 'language-js ' + styles.liveSnippetEditor }/>
-                <button className={ styles.liveSnippetRun } onClick={ this.handleRunClick('get') }>Run</button>
-              </div>
-              <div className={ styles.liveSnippetPreview } >
-                <p className={ styles.liveSnippetOutput }>{ messages.gettingStarted.output }</p>
-                <pre>
-                  <code>{ outputGet }</code>
-                </pre>
-                { (ipfsLoaded && runGet) && <LivePreview/> }
-                { ipfsLoaded && <LiveError/> }
+            <LiveProvider key="get" code={ codeGet(cid) } scope={ this.scopeGet } mountStylesheet={ false } transformCode={ transformCode }>
+              <div className={ styles.liveSnippet }>
+                <div className={ styles.liveSnippetEditorContainer }>
+                  <LiveEditor name="get" setRun={ this.handleSetRun } language='js' />
+                  <button className={ styles.liveSnippetRun } onClick={ this.handleRunClick('get') }>Run</button>
+                </div>
+                <div className={ styles.liveSnippetPreview } >
+                  <p className={ styles.liveSnippetOutput }>{ messages.gettingStarted.output }</p>
+                  <pre>
+                    <code>{ outputGet }</code>
+                  </pre>
+                  { (ipfsLoaded && runGet) && <LivePreview/> }
+                  { ipfsLoaded && <LiveError/> }
+                </div>
               </div>
             </LiveProvider>
             <p className={ styles.liveSnippetSubtitle }>{ messages.gettingStarted.usingCli }</p>

src/shared/components/getting-started-section/index.js

@@ -74,11 +74,6 @@
   border-radius: 2px;
 }
 
-.liveSnippet pre[class*="language-"] {
-  margin: 0;
-  border-radius: 0;
-}
-
 .liveSnippetTitle {
   color: var(--color-syntax-highlighter-background);
   font-size: 28px;
@@ -98,12 +93,6 @@
   margin-bottom: 75px;
 }
 
-.liveSnippetEditor {
-  position: relative;
-  outline: none;
-  background: var(--color-syntax-highlighter-background) !important;
-}
-
 .liveSnippetPreview {
   min-height: 100px;
   padding: 1em;

src/shared/components/getting-started-section/index.module.css

@@ -21,7 +21,7 @@ class DesktopNavBar extends Component {
           <Link href="https://github.com/ipfs/js-ipfs/tree/master/examples#js-ipfs-examples-and-tutorials">
             { messages.navBar.item2 }
           </Link>
-          <Link href="https://github.com/ipfs/interface-ipfs-core/tree/master/SPEC">
+          <Link href="https://github.com/ipfs/interface-js-ipfs-core/tree/master/SPEC">
             { messages.navBar.item3 }
           </Link>
           <Link href="https://github.com/ipfs/js-ipfs">

src/shared/components/nav-bar/desktop/index.js

@@ -44,7 +44,7 @@ class MobileNavBar extends Component {
         <ul className={ styles.menuList } ref={ this.handleMenuListRef } style={ { maxHeight: menuListHeight } } >
           <li><div className={ styles.menuLink } onClick={ this.handleGettingStartedClick }> { messages.navBar.item1 } </div> </li>
           <li><Link className={ styles.menuLink } href="https://github.com/ipfs/js-ipfs/tree/master/examples#js-ipfs-examples-and-tutorials"> { messages.navBar.item2 } </Link> </li>
-          <li><Link className={ styles.menuLink } href="https://github.com/ipfs/interface-ipfs-core/tree/master/SPEC"> { messages.navBar.item3 } </Link> </li>
+          <li><Link className={ styles.menuLink } href="https://github.com/ipfs/interface-js-ipfs-core/tree/master/SPEC"> { messages.navBar.item3 } </Link> </li>
           <li className={ styles.githubContributers }>
             <Link className={ styles.menuLink } href="https://github.com/ipfs/js-ipfs"> { messages.navBar.item4 } </Link>
             <iframe title="mobile-github-stars" src="https://ghbtns.com/github-btn.html?user=ipfs&repo=js-ipfs&type=star&count=true" frameBorder="0" scrolling="0"/>

src/shared/components/nav-bar/mobile/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { withLive, Editor } from 'react-live'
+import okaidia from './okaidia'
 
 class LiveEditor extends Component {
   // static contextTypes = LiveProvider.childContextTypes
@@ -29,6 +30,8 @@ class LiveEditor extends Component {
 
     return (
       <Editor
+        theme={ okaidia }
+        padding={ 15 }
         { ...rest }
         code={ this.props.live.code }
         onChange={ (code) => {

src/shared/components/react-live/live-editor.js

@@ -0,0 +1,84 @@
+// This is prism-okaidia.css:
+// https://github.com/PrismJS/prism/blob/878ef2955671d8546bbcd3f9ce62c276a627f340/themes/prism-okaidia.css
+export default {
+  plain: {
+    color: '#f8f8f2',
+    backgroundColor: '#0e204c',
+    fontFamily: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace',
+    lineHeight: 1.5
+  },
+  styles: [
+    {
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      style: {
+        color: 'slategray'
+      }
+    },
+    {
+      types: ['punctuation'],
+      style: {
+        color: '#f8f8f2'
+      }
+    },
+    {
+      types: ['property', 'tag', 'constant', 'symbol', 'deleted'],
+      style: {
+        color: '#f92672'
+      }
+    },
+    {
+      types: ['boolean', 'number'],
+      style: {
+        color: '#ae81ff'
+      }
+    },
+    {
+      types: ['selector', 'attr-name', 'string', 'char', 'builtin', 'inserted'],
+      style: {
+        color: '#a6e22e'
+      }
+    },
+    {
+      types: ['operator', 'entity', 'url', 'variable'],
+      style: {
+        color: '#f8f8f2'
+      }
+    },
+    {
+      types: ['atrule', 'attr-value', 'function', 'class-name'],
+      style: {
+        color: '#e6db74'
+      }
+    },
+    {
+      types: ['keyword'],
+      style: {
+        color: '#66d9ef'
+      }
+    },
+    {
+      types: ['regex', 'important'],
+      style: {
+        color: '#fd971f'
+      }
+    },
+    {
+      types: ['important', 'bold'],
+      style: {
+        fontWeight: 'bold'
+      }
+    },
+    {
+      types: ['italic'],
+      style: {
+        fontStyle: 'italic'
+      }
+    },
+    {
+      types: ['entity'],
+      style: {
+        cursor: 'help'
+      }
+    }
+  ]
+}

src/shared/components/react-live/okaidia.js

@@ -1,20 +1,30 @@
 import React from 'react'
-import Prism from 'prismjs'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
-import 'prismjs/themes/prism-okaidia.css'
+import Highlight, { Prism } from 'prism-react-renderer'
 import styles from './index.module.css'
+import okaidia from '../react-live/okaidia'
 
-const SyntaxHighlighter = ({ codeStr, language, className }) => {
-  const htmlCode = Prism.highlight(codeStr, Prism.languages.js, language)
+const SyntaxHighlighter = ({ codeStr, language, className, theme }) => {
   const preClasses = classNames(`language-${language}`, styles.preCustom)
 
   return (
     <div className={ styles.gatsbyHighlight + ' ' + className } >
-      <pre className={ preClasses }>
-        <code dangerouslySetInnerHTML={ { __html: htmlCode } } />
-      </pre>
+      <Highlight Prism={ Prism } code={ codeStr } theme={ theme || okaidia } language={ language }>
+        { ({ tokens, getLineProps, getTokenProps, style }) => (
+          <pre aria-hidden='true' style={ style } className={ preClasses }>
+            { tokens.map((line, i) => (
+              // eslint-disable-next-line react/jsx-key
+              <div { ...getLineProps({ line, key: i }) }>
+                { line.map((token, key) => (
+                  // eslint-disable-next-line react/jsx-key
+                  <span { ...getTokenProps({ token, key }) } />
+                )) }
+              </div>
+            )) }
+          </pre>
+        ) }
+      </Highlight>
     </div>
   )
 }

src/shared/components/syntax-highlighter/index.js

@@ -4,9 +4,10 @@
 .gatsbyHighlight .preCustom {
   width: 75%;
   margin: auto;
+  padding: 15px;
   outline: none;
-  background: var(--color-syntax-highlighter-background);
   border-radius: 2px;
+  text-align: left;
 }
 
 @media (--layout-lte-medium) {

src/shared/components/syntax-highlighter/index.module.css

@@ -1,34 +1,27 @@
-const codeAdd = `const node = new IPFS()
+const codeAdd = `const node = await IPFS.create()
 
 const data = 'Hello, <YOUR NAME HERE>'
 
-// once the node is ready
-node.once('ready', () => {
-  // convert your data to a Buffer and add it to IPFS
-  node.add(IPFS.Buffer.from(data), (err, files) => {
-    if (err) return console.error(err)
+// convert your data to a Buffer and add it to IPFS
+const files = await node.add(IPFS.Buffer.from(data))
 
-    // 'hash', known as CID, is a string uniquely addressing the data
-    // and can be used to get it again. 'files' is an array because
-    // 'add' supports multiple additions, but we only added one entry
-    console.log(files[0].hash)
-  })
-})`
+// 'hash', known as CID, is a string uniquely addressing the data
+// and can be used to get it again. 'files' is an array because
+// 'add' supports multiple additions, but we only added one entry
+console.log(files[0].hash)`
 
-const codeGet = (cid) => `const node = new IPFS()
+const codeGet = (cid) => `const node = await IPFS.create()
 
-node.once('ready', () => {
-  node.cat('${cid}', (err, data) => {
-    if (err) return console.error(err)
+const data = await node.cat('${cid}')
 
-    // convert Buffer back to string
-    console.log(data.toString())
-  })
-})`
+// convert Buffer back to string
+console.log(data.toString())`
 
 function transformCode (code) {
-  return `() => {
-    ${code}
+  return `function () {
+    (async function () {
+      ${code}
+    })()
     return null
   }`
 }
@@ -42,35 +35,23 @@ function log (fn) {
 }
 
 function stubIpfs (node, IPFS) {
-  node.once = (e, fn) => {
-    fn()
-  }
-
-  node.on = (e, fn) => {
-    fn()
-  }
+  node.once = (e, fn) => fn()
+  node.on = (e, fn) => fn()
 
   const WrapIPFS = function () {
     return node
   }
 
-  return Object.assign(WrapIPFS, IPFS)
+  return Object.assign(WrapIPFS, IPFS, { create: async () => node })
 }
 
-function getIpfs (opts) {
-  return new Promise((resolve, reject) => {
-    // We are using webpackChunkName in the comment so that our chunk
-    // will be named `ipfs.[hash].js` instead of `[id].[hash].js`
-    import(/* webpackChunkName: "ipfs" */ 'ipfs')
-      .then(({ default: Ipfs }) => {
-        const node = new Ipfs({ repo: 'getting-started' })
-        node.once('ready', () => {
-          resolve(stubIpfs(node, Ipfs), node, Ipfs)
-        })
-        node.on('error', (err) => reject(err))
-      })
-      .catch((err) => reject(err))
-  })
+async function getIpfs (opts) {
+  // We are using webpackChunkName in the comment so that our chunk
+  // will be named `ipfs.[hash].js` instead of `[id].[hash].js`
+  const { default: Ipfs } = await import(/* webpackChunkName: "ipfs" */ 'ipfs')
+  const node = await Ipfs.create({ repo: 'getting-started' })
+
+  return stubIpfs(node, Ipfs)
 }
 
 export {