factory example

Author: tb

mdxToComponent.js

@@ -1,6 +1,6 @@
 const React = require('react');
 
-module.exports = (code, factories = {}) => {
+module.exports = (code) => {
   const module = {exports: null};
   const {createFactory, createElement} = React;
   eval(code); /* eslint no-eval: 0 */

test/__snapshots__/getFilesWithMdx.test.js.snap

@@ -11,10 +11,14 @@ prop Hello
 
 Sample text
 
-<Hello value={value} />",
+    Sample code block
+
+<Hello value={value} />
+",
   "contentmdx": "
 module.exports = function({ factories={}, value, Hello }) {
   const {
+    code = createFactory('code'),
     h1 = createFactory('h1'),
     p = createFactory('p'),
     wrapper = createFactory('div'),
@@ -35,6 +39,7 @@ h1({\\"id\\": \\"Header\\"},
 p({},
   \\"Sample text\\",
 ),
+code({}, \\"Sample code block\\\\n\\"),
 createElement(Hello, { value: value })
 
   )

test/__snapshots__/mdxToComponent.test.js.snap

@@ -15,6 +15,12 @@ exports[`mdxToComponent 1`] = `
   <p>
     Sample text
   </p>
+  <pre
+    id="codeFactory"
+  >
+    Sample code block
+
+  </pre>
   <div>
     Hello React Value
   </div>

test/mdxToComponent.test.js

@@ -9,11 +9,17 @@ class Hello extends React.Component {
   }
 }
 
+const factories = {
+  'code': (props, children) =>
+    React.createElement('pre', {id: 'codeFactory'}, children),
+};
+
 test('mdxToComponent', () => {
   return getFilesWithMdx('test/pages/*.md').then(pages => {
     expect(pages.length).toBe(1);
-    const Component = mdxToComponent(pages[0].contentmdx)
+    const Component = mdxToComponent(pages[0].contentmdx);
     const res = renderer.create(Component({
+      factories,
       value: 'React Value',
       Hello,
     }));

test/pages/about.md

@@ -11,4 +11,6 @@ prop Hello
 
 Sample text
 
-<Hello value={value} />
+    Sample code block
+
+<Hello value={value} />