Merge pull request #4 from jsakas/extra-data

Export front matter data

Author: jsakas

README.md

@@ -6,7 +6,7 @@
 
 A Webpack loader for converting Markdown files to React components (JSX).
 
-Currently supports ES6 imports and syntax highlighting.
+Currently supports imports, syntax highlighting, and extra data.
 
 This loader was built for the purpose of documenting React Components, but can be used for other static documents you want to convert to HTML. 
 
@@ -36,16 +36,24 @@ Note: Requires React 16.2+
 # Installation
 
 ```
-yarn add markdown-to-react-loader
+yarn add --dev markdown-to-react-loader
 ```
-Or
 ```
-npm install --save-dev babel-loader @babel/preset-env @babel/preset-react markdown-to-react-loader
+npm install --save-dev markdown-to-react-loader
 ```
 
 # Usage
 
-Update your Webpack config. Because this loader outputs JSX its recommended to use the babel-loader after to compile the ES6 how you want.
+Because it outputs ES6 and JSX its recommended to use in conjunction with the babel-loader to compile for your targetted environment.
+
+```
+yarn add --dev babel-loader @babel/preset-env @babel/preset-react
+```
+```
+npm install --save-dev babel-loader @babel/preset-env @babel/preset-react
+```
+
+Update your Webpack config:
 
 ```javascript
 {
@@ -54,9 +62,9 @@ Update your Webpack config. Because this loader outputs JSX its recommended to u
   use: [
     {
     	loader: 'babel-loader',
-	options: {
-	    presets: ['@babel/env', '@babel/react']
-	}
+      options: {
+          presets: ['@babel/env', '@babel/react']
+      }
     },
     'markdown-to-react-loader',
   ],
@@ -83,7 +91,7 @@ import HelloWorld from './HelloWorld.md';
 ReactDOM.Render(<HelloWorld />, document.getElementById('app'));
 ```
 
-# Imports
+## Imports
 
 You can write ES6 imports inline using front matter.
 
@@ -103,14 +111,47 @@ Heres a component rendered inline:
 
 ```
 
-# Syntax Highlighting
+## Syntax Highlighting
 
 Syntax highlighting is done using PrismJS and is picked up automatically by tagging code blocks:
 
 #### CodeSample.md
 
-	# Code Sample
+    # Code Sample
+
+    ```javascript
+    console.log('This will be marked for highlighting');
+    ```
+
+## Extra Data
+
+Any front matter that is not under the `imports` key is considered extra data. It is parsed and exported as named exports from the module.
+
+```markdown
+---
+title: Hello World
+slug: /post/1
+object:
+    - foo: bar
+    - baz: biz
+array:
+    - foo
+    - bar
+---
+```
+
+The above front matter is transformed to:
 
-	```javascript
-	console.log('This will be marked for highlighting');
-	```
+```javascript
+const title = "Hello World";
+export { title };
+
+const slug = "/post/1";
+export { slug };
+
+const object = [{ foo: "bar" }, { baz: "biz" }];
+export { object };
+
+const array = ["foo", "bar"];
+export { array };
+```

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    "testEnvironment": "node",
+};

lib/markdown-to-react-loader.js

@@ -39,13 +39,33 @@ renderer.code = function(code, lang) {
   `;
 };
 
+const extraExports = extra => {
+  let ret = '';
+  for (var key in extra) {
+    ret += `
+      const ${key} = ${JSON.stringify(extra[key])};
+      export { ${key} };
+    `
+  }
+
+  return ret;
+}
+
 module.exports = function (source, map) {
   const parsed = fm(source);
+  const attributes = parsed.attributes;
   const html = marked(parsed.body, {
     renderer: renderer,
     xhtml: true,
   });
 
+  const extra = Object.keys(attributes)
+    .filter(k => k !== 'imports')
+    .reduce((acc, cur) => {
+      acc[cur] = attributes[cur];
+      return acc;
+    }, {});
+
   const replaced = html
     .replace(/class="/g, 'className="')
     .replace(/\(/g, '(')
@@ -56,6 +76,7 @@ module.exports = function (source, map) {
   const processed = `
     import React, { Fragment } from 'react';
     ${parsed.attributes.imports ? parsed.attributes.imports : ''}
+    ${extraExports(extra)}
     const Markdown = () => (<Fragment>${replaced}</Fragment>);
     export default Markdown;
   `;

package.json

@@ -13,5 +13,12 @@
   },
   "peerDependencies": {
     "react": "^16.2"
+  },
+  "devDependencies": {
+    "jest": "^24.8.0",
+    "prettier": "^1.18.2"
+  },
+  "scripts": {
+    "test": "jest test"
   }
 }

test/all.test.js

@@ -0,0 +1,39 @@
+const fs = require('fs');
+const path = require('path');
+const markdownToReact = require('../lib/markdown-to-react-loader');
+const pretter = require('prettier');
+
+
+const testIO = (inFile, outFile) => {
+  let input = getFileContents(inFile);
+  let output = getFileContents(outFile);
+
+  let processed = pretter.format(
+    markdownToReact(input),
+    {
+      parser: 'babel',
+    }
+  );
+
+  expect(output).toEqual(processed);
+}
+
+const getFileContents = file => {
+  return fs.readFileSync(path.resolve(__dirname, file)).toString('utf-8');
+}
+
+test('Compiles hello, world', () => {
+  testIO('io/simple.md', 'io/simple.js');
+});
+
+test('Compiles file with imports', () => {
+  testIO('io/imports.md', 'io/imports.js');
+});
+
+test('Compiles file with code block', () => {
+  testIO('io/codeblock.md', 'io/codeblock.js');
+});
+
+test('Exports extra front matter as named exports', () => {
+  testIO('io/data.md', 'io/data.js');
+});

test/io/codeblock.js

@@ -0,0 +1,21 @@
+import React, { Fragment } from "react";
+
+const Markdown = () => (
+  <Fragment>
+    <h1 id="code-sample">Code Sample</h1>
+
+    <pre className="language-javascript">
+      <code className="language-javascript">
+        console<span className="token punctuation">.</span>
+        <span className="token function">log</span>
+        <span className="token punctuation">&#40;</span>
+        <span className="token string">
+          'This will be marked for highlighting'
+        </span>
+        <span className="token punctuation">&#41;</span>
+        <span className="token punctuation">;</span>
+      </code>
+    </pre>
+  </Fragment>
+);
+export default Markdown;

test/io/codeblock.md

@@ -0,0 +1,5 @@
+# Code Sample
+
+```javascript
+console.log('This will be marked for highlighting');
+```

test/io/data.js

@@ -0,0 +1,20 @@
+import React, { Fragment } from "react";
+
+const title = "Hello World";
+export { title };
+
+const slug = "/post/1";
+export { slug };
+
+const object = [{ foo: "bar" }, { baz: "biz" }];
+export { object };
+
+const array = ["foo", "bar"];
+export { array };
+
+const Markdown = () => (
+  <Fragment>
+    <p>This component comes with data</p>
+  </Fragment>
+);
+export default Markdown;

test/io/data.md

@@ -0,0 +1,12 @@
+---
+title: Hello World
+slug: /post/1
+object:
+    - foo: bar
+    - baz: biz
+array:
+    - foo
+    - bar
+---
+
+This component comes with data

test/io/imports.js

@@ -0,0 +1,11 @@
+import React, { Fragment } from "react";
+import { SomeComponent } from "./SomeComponent";
+
+const Markdown = () => (
+  <Fragment>
+    <h1 id="hello-world">Hello, World</h1>
+    <p>Heres a component rendered inline:</p>
+    <SomeComponent />
+  </Fragment>
+);
+export default Markdown;