Merge pull request #610 from github/experiment-with-react-and-mdx

A quick experiment to get allow React components in Markdown pages and throughout the site

Author: heiskr

lib/frontmatter.js

@@ -89,6 +89,9 @@ const schema = {
           href: { type: 'string' }
         }
       }
+    },
+    interactive: {
+      type: 'boolean'
     }
   }
 }

lib/page.js

@@ -16,6 +16,7 @@ const pathUtils = require('./path-utils')
 const Permalink = require('./permalink')
 const languages = require('./languages')
 const renderContent = require('./render-content')
+const { renderReact } = require('./react/engine')
 const frontmatter = require('./frontmatter')
 const products = require('./all-products')
 const slash = require('slash')
@@ -133,10 +134,31 @@ class Page {
     this.title = await renderContent(this.rawTitle, context, { textOnly: true, encodeEntities: true })
     this.shortTitle = await renderContent(this.shortTitle, context, { textOnly: true, encodeEntities: true })
 
-    const markdown = this.mapTopic
+    let markdown = this.mapTopic
       ? getMapTopicContent(this, context.pages, context.redirects)
       : this.markdown
 
+    // If the article is interactive parse the React!
+    if (this.interactive) {
+      // Search for the react code comments to find the react components
+      const reactComponents = markdown.match(/<!--react-->(.*?)<!--end-react-->/gs)
+
+      // Render each of the react components in the markdown
+      await Promise.all(reactComponents.map(async (reactComponent) => {
+        let componentStr = reactComponent
+
+        // Remove the React comment indicators
+        componentStr = componentStr.replace('<!--react-->\n', '').replace('<!--react-->', '')
+        componentStr = componentStr.replace('\n<!--end-react-->', '').replace('<!--end-react-->', '')
+
+        // Get the rendered component
+        const renderedComponent = await renderReact(componentStr)
+
+        // Replace the react component with the rendered markdown
+        markdown = markdown.replace(reactComponent, renderedComponent)
+      }))
+    }
+
     const html = await renderContent(markdown, context)
 
     // product frontmatter may contain liquid

lib/react/babel.js

@@ -0,0 +1,22 @@
+const babel = require('@babel/core')
+
+const reactBabelOptions = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react'
+  ],
+  plugins: [
+    '@babel/plugin-transform-react-jsx',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/transform-runtime'
+  ]
+}
+
+const transform = code =>
+  babel.transform(code, reactBabelOptions).code
+
+module.exports = {
+  transform: transform,
+  reactBabelOptions: reactBabelOptions
+}

lib/react/engine.js

@@ -0,0 +1,57 @@
+const { renderToString } = require('react-dom/server')
+const { transform } = require('./babel')
+const React = require('react')
+const fs = require('fs')
+const path = require('path')
+const dirTree = require('directory-tree')
+
+// Name of directory for saving transformed components that should be gitignored
+const dist = 'dist'
+
+// Build React components
+// This loops through the react components and transpiles them to /dist
+// so they can be used by Node.js when we do server side rendering
+const tree = dirTree('./react/')
+if (tree) {
+  for (const index in tree.children) {
+    const file = tree.children[index]
+    if (file.type === 'file' && file.extension === '.js') {
+      if (!fs.existsSync(path.join(dist, 'react'))) {
+        fs.mkdirSync(path.join(dist, 'react'), { recursive: true })
+      }
+      const content = transform(fs.readFileSync(file.path, 'utf8'))
+      fs.writeFileSync(path.join(dist, file.path), content)
+    }
+  }
+}
+// End Build React Components
+
+// Register components
+const components = {
+  // CodeBlock: require('../../dist/react/CodeBlock'),
+  // CodeEditor: require('../../dist/react/CodeEditor')
+}
+
+const renderReact = async componentStr => {
+  // Get component name as string so we can use it in the class name
+  // which will be needed later if we choose to do client side React hydration
+  const componentName = componentStr.match(/<([a-zA-Z]+)\s/)[1]
+  // Add the wrapper and class name so we can later use React hydration on the client
+  // side
+  const jsx = `<div className="react-component-${componentName}">\n${componentStr}\n</div>`
+
+  const component = transform(jsx)
+
+  // eslint-disable-next-line
+  const getComponent = new Function(
+    'React',
+    ...Object.keys(components),
+    `${component.replace('React', 'return React')}`
+  )
+
+  return renderToString(getComponent(React, ...Object.values(components)))
+}
+
+module.exports = {
+  renderReact
+}