Attempt to make mdx-style & mdx-live work together

jxnblk · Oct 6, 2018 · ac671ec · ac671ec
1 parent 69e1788
commit ac671ec
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 121 deletions.
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -36,6 +36,8 @@ module.exports = {
     config.resolve.alias['@mdx-js/tag'] = path.join(__dirname, './node_modules/@mdx-js/tag')
 
     config.resolve.alias['mdx-docs'] = path.join(__dirname, '../packages/mdx-docs/src')
+    config.resolve.alias['mdx-style'] = path.join(__dirname, '../packages/mdx-style/src')
+    config.resolve.alias['mdx-live'] = path.join(__dirname, '../packages/mdx-live/src')
 
     return config
   },

diff --git a/docs/src/theme.js b/docs/src/theme.js
diff --git a/packages/mdx-docs/src/components.js b/packages/mdx-docs/src/components.js
@@ -5,18 +5,7 @@ import { withMDXLive } from 'mdx-live'
 export const a = ({ as: Tag = 'a', ...props }) =>
   <Tag {...props} />
 
-export const Pre = props =>
-  <pre
-    {...props}
-    style={{
-      fontFamily: 'Menlo, monospace',
-      fontSize: '13px',
-      overflowX: 'auto',
-      maxWidth: '100%',
-    }}
-  />
-
-export const inlineCode = props =>
+export const code = props =>
   <code
     {...props}
     style={{
@@ -25,14 +14,12 @@ export const inlineCode = props =>
     }}
   />
 
-export const pre = props => props.children
-export const code = withMDXLive(Pre)
+export const pre = withMDXLive('pre')
 
 export const components = {
   a,
   pre,
-  code,
-  inlineCode,
+  // code,
 }
 
 export default components
diff --git a/packages/mdx-live/src/index.js b/packages/mdx-live/src/index.js
@@ -76,13 +76,16 @@ LiveCode.defaultProps = {
 const REG = /language\-\.jsx/
 
 export const withMDXLive = Fallback => ({
+  pre: Pre,
   match = REG,
   children,
   metaString,
   ...props
 }) => {
   const isLive = match.test(props.className)
-  if (!isLive) return <Fallback {...props} children={children} />
+  const Comp = Pre || Fallback
+  console.log(Pre, Fallback)
+  if (!isLive) return <Comp {...props} children={children} />
 
   const code = React.Children.toArray(children).join('\n')
 

diff --git a/packages/mdx-style/src/index.js b/packages/mdx-style/src/index.js
@@ -15,15 +15,11 @@ export const createComponent = (tag, className) =>
 
 // is this safe in IE11?
 // const filterUnique = (value, i, self) => self.indexOf(value) === i
-
 const unique = arr => [...new Set(arr)]
 
 export class MDXStyle extends React.Component {
   static defaultProps = {
-    components: {
-      pre: props => props.children,
-      code: props => <pre {...props} />
-    },
+    components: {},
     css: {}
   }
 
@@ -38,14 +34,30 @@ export class MDXStyle extends React.Component {
           const component = createComponent('div', rule.className)
           return { ...a, [key]: component }
         }
-        const base = key === 'inlineCode' ? 'code' : props.components[key] || key
+        // const base = key === 'inlineCode' ? 'code' : props.components[key] || key
+        // const base = props.components[key] || key
+        const base = key === 'pre' ? key : props.components[key] || key
+
         const component = createComponent(base, rule.className)
         return { ...a, [key]: component }
       }, props.components)
 
+    // hack to work with mdx-live
+    if (props.components.pre) {
+      components.inlineCode = components.code
+      const pre = props.components.pre
+      console.log('has pre', components.pre, pre)
+      components.code = props => pre({
+        pre: components.pre,
+        ...props
+      })
+      components.pre = props => props.children
+    }
+
+    console.log(components)
+
     return {
       components,
-      // styles: styles.filter(filterUnique).join('')
       styles: unique(styles).join('')
     }
   }

diff --git a/packages/mdx-style/src/themes/base.js b/packages/mdx-style/src/themes/base.js
@@ -96,7 +96,7 @@ export default {
     marginBottom: '32px',
   },
   // how should these work?
-  code: {
+  pre: {
     fontFamily: 'Menlo, monospace',
     fontSize: '14px',
     padding: '16px',
@@ -106,9 +106,11 @@ export default {
     color: 'var(--code)',
     backgroundColor: 'var(--lightgray)',
   },
-  inlineCode: {
+  code: {
     fontFamily: 'Menlo, monospace',
-    color: 'var(--code)'
+    fontSize: '14px',
+    color: 'var(--code)',
+    backgroundColor: 'var(--lightgray)',
   },
   img: {
     maxWidth: '100%',

diff --git a/packages/mdx-style/src/themes/term.js b/packages/mdx-style/src/themes/term.js
@@ -46,11 +46,11 @@ export default {
     maxWidth: '100%',
     height: 'auto',
   },
-  inlineCode: {
+  code: {
     fontFamily: 'inherit',
     color: magenta,
   },
-  code: {
+  pre: {
     fontFamily: 'inherit',
     marginTop: '32px',
     marginBottom: '32px',