Create markdown-to-react-loader

Author: Jon Sakas

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+

README.md

@@ -1,2 +1,81 @@
 # markdown-to-react-loader
-A Webpack loader for Markdown files to React components
+
+A Webpack loader for converting Markdown files to React components (JSX).
+
+Currently supports ES6 imports and syntax highlighting.
+
+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. 
+
+Note: Requires React 16.2+
+
+# Installation
+
+```
+yarn add markdown-to-react-loader
+```
+
+# Usage
+
+First, update your Webpack config.
+
+```
+{
+  test: /\.md$/,
+  use: [
+    'babel-loader',
+    'markdown-to-react-loader',
+  ],
+},
+```
+
+Then, you can use the loader like:
+
+#### HelloWorld.md
+
+```
+# Hello, World
+
+Its great to be here!
+```
+
+#### App.js
+
+```
+import React from 'react';
+import ReactDOM from 'react-dom';
+import HelloWorld from './HelloWorld.md';
+
+ReactDOM.Render(<HelloWorld />, document.getElementById('app'));
+```
+
+# Imports
+
+You can write ES6 imports inline using front matter.
+
+#### HelloWorldWithImport.md
+
+```
+---
+imports: |
+  import { SomeComponent } from './SomeComponent';
+---
+
+# Hello, World
+
+Heres a component rendered inline:
+
+<SomeComponent />
+
+```
+
+# Syntax Highlighting
+
+Syntax highlighting is done using PrismJS and is picked up automatically by tagging code blocks:
+
+#### CodeSample.md
+
+	# Code Sample
+	
+	```javascript
+	console.log('This will be marked for highlighting
+	```

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib/markdown-to-react-loader');

lib/markdown-to-react-loader.js

@@ -0,0 +1,63 @@
+const fm = require('front-matter');
+const marked = require('marked');
+const Prism = require('prismjs');
+const renderer = new marked.Renderer();
+
+
+renderer.code = function(code, lang) {
+  let className, highlighter, replaced;
+
+  // users can easily type in any language they want,
+  // we don't want the app to blow up in case of bad input.
+  try {
+    require(`prismjs/components/prism-${lang}`);
+    className = `language-${lang}`;
+    highlighter = Prism.languages[lang];
+  } catch (e) {
+    console.warn(`Could not find PrismJS language ${lang}`);
+    className = '';
+    highlighter = '';
+  }
+
+  try {
+    const wrapped = Prism.highlight(code,  highlighter);
+    replaced = wrapped.replace(/\n/g, '<br />');
+  } catch (e) {
+    console.error(`Failed to highlight syntax for language ${lang}`);
+    console.error(e);
+
+    // fallback to the original input on error
+    replaced = code;
+  }
+
+  return `
+    <pre class="${className}">
+      <code class="${className}">
+       ${replaced}
+      </code>
+    </pre>
+  `;
+};
+
+module.exports = function (source, map) {
+  const parsed = fm(source);
+  const html = marked(parsed.body, {
+    renderer: renderer,
+    xhtml: true,
+  });
+
+  const replaced = html
+    .replace(/class="/g, 'className="')
+    .replace(/\(/g, '&#40;')
+    .replace(/\)/g, '&#41;')
+    .replace(/\{/g, '&#123;')
+    .replace(/\}/g, '&#125;');
+
+  const processed = `
+    import React, { Fragment } from 'react';
+    ${parsed.attributes.imports ? parsed.attributes.imports : ''}
+    export default (<Fragment>${replaced}</Fragment>);
+  `;
+
+  return processed;
+};

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "markdown-to-react-loader",
+  "version": "1.0.0",
+  "description": "A Webpack loader for converting Markdown files to React components",
+  "main": "index.js",
+  "repository": "[email protected]:jsakas/markdown-to-react-loader.git",
+  "author": "Jon Sakas <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "front-matter": "^2.1.2",
+    "marked": "^0.3.12",
+    "prismjs": "^1.10.0"
+  },
+  "peerDependencies": {
+    "react": "^16.2"
+  }
+}

yarn.lock

@@ -0,0 +1,66 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  dependencies:
+    sprintf-js "~1.0.2"
+
+clipboard@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a"
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+
+front-matter@^2.1.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.3.0.tgz#7203af896ce357ee04e2aa45169ea91ed7f67504"
+  dependencies:
+    js-yaml "^3.10.0"
+
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  dependencies:
+    delegate "^3.1.2"
+
+js-yaml@^3.10.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+marked@^0.3.12:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
+
+prismjs@^1.10.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9"
+  optionalDependencies:
+    clipboard "^2.0.0"
+
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+
+tiny-emitter@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"