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

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
+}