Implement transformTableData and refactor

packages/docs-site/package.json

@@ -51,6 +51,7 @@
     "lint-staged": "^8.2.1",
     "lodash": "^4.17.11",
     "marksy": "^8.0.0",
+    "mdtable2json": "^0.1.0",
     "node-fs-extra": "^0.8.2",
     "normalize-scss": "^7.0.1",
     "prettier": "^1.16.4",

packages/docs-site/readme-preparser.js

@@ -1,39 +1,67 @@
-const { createElement } = require('react')
 const { marksy } = require('marksy')
+const { getTables } = require('mdtable2json')
 const ReactDOMServer = require('react-dom/server')
+const { createElement } = require('react')
 
 /**
- * TODO: Transform table markdown AST (rows and cells) into data
+ * Transform table markdown AST (rows and cells) into data
  * structure that can be consumed by the `<DataTable />` component
  *
+ * NOTE: The implementation is limited to 1 table per `README.md`
+ *
  * @param {array} children
  * @returns {array}
  */
-function transformTableData(children) {
-  return [] // debug
-  return children
+function transformTableData(markdown) {
+  const tables = getTables(markdown)
+
+  return (tables.length >= 1 && tables[0].json) || []
 }
 
-const compile = marksy({
-  createElement,
-  elements: {
-    code({ language, code }) {
-      return createElement('CodeHighlighter', {
-        example: escape(code),
-        source: escape(code),
-        language: language || 'javascript',
-      })
-    },
-    table({ children }) {
-      return createElement('DataTable', {
-        caption: 'Props',
-        data: transformTableData(children),
-      })
+/**
+ * Base64 encode a prop so that it doesn't confuse the MDX parser
+ *
+ * @param {string} string
+ * @returns {string}
+ */
+function encodeProp(string) {
+  return Buffer.from(string).toString('base64')
+}
+
+/**
+ * Generates a compiler to create an MDX version of a `README.md`
+ *
+ * TODO: Use JSX instead of createElement and transpile at runtime
+ *
+ * @param {string} markdown
+ * @param {object} options
+ * @returns {function}
+ */
+function compile(markdown, options) {
+  const tableData = transformTableData(markdown)
+
+  return marksy({
+    createElement,
+    elements: {
+      code({ language, code }) {
+        return createElement('CodeHighlighter', {
+          example: encodeProp(code),
+          source: encodeProp(code),
+          language: language || 'javascript',
+        })
+      },
+      table() {
+        return createElement('DataTable', {
+          caption: 'Props',
+          data: encodeProp(JSON.stringify(tableData)),
+        })
+      },
     },
-  },
-})
+  })(markdown, options)
+}
 
 exports.convertToMDX = markdown => {
   const { tree } = compile(markdown, {})
+
   return ReactDOMServer.renderToStaticMarkup(tree)
 }

packages/docs-site/src/components/presenters/code-highlighter/index.js

@@ -20,7 +20,7 @@ const CodeHighlighter = ({ example, source, language }) => {
   function copyToClipboard() {
     const textarea = document.createElement('textarea')
 
-    textarea.innerText = unescape(source)
+    textarea.innerText = atob(source)
     document.body.appendChild(textarea)
     textarea.select()
     document.execCommand('copy')
@@ -32,7 +32,7 @@ const CodeHighlighter = ({ example, source, language }) => {
   return (
     <article className="code-highlighter">
       <header className="code-highlighter__head" data-testid="example">
-        <div dangerouslySetInnerHTML={{ __html: unescape(example) }} />
+        <div dangerouslySetInnerHTML={{ __html: atob(example) }} />
       </header>
       <section className="code-highlighter__body">
         {typeof document !== 'undefined' &&
@@ -49,7 +49,7 @@ const CodeHighlighter = ({ example, source, language }) => {
           )}
         <div className="code-highlighter__source">
           <pre className="line-numbers">
-            <code className={`language-${language}`}>{unescape(source)}</code>
+            <code className={`language-${language}`}>{atob(source)}</code>
           </pre>
         </div>
       </section>

packages/docs-site/src/components/presenters/data-table/index.js

@@ -12,12 +12,12 @@ function extractHeadings(data) {
 }
 
 const DataTable = ({ data, caption }) => {
-  const [tableData, setTableData] = useState(JSON.parse(unescape(data)))
+  const [tableData, setTableData] = useState(JSON.parse(atob(data)))
 
   const sortByColumn = useCallback(
     e => {
       const column = e.target.getAttribute('data-column')
-      setTableData(sortBy(JSON.parse(unescape(data)), column))
+      setTableData(sortBy(JSON.parse(atob(data)), column))
     },
     [tableData]
   )