v0.1.3

* task: replace remarkable with remark

* task: update tests

* task: update deps

* fix: lint issue

* task: update docs

* fix: revert highlightjs to prismjs

* fix: update docs for prismjs

Author: hutchgrant

demo/babel.config.js

@@ -5,12 +5,6 @@ module.exports = {
   plugins: [
     ['babel-plugin-transform-builtin-classes', {
       globals: ['LitElement']
-    }],
-    ['prismjs', {
-      'languages': ['java', 'css', 'markup'],
-      'plugins': ['line-numbers'],
-      'theme': 'twilight',
-      'css': true
     }]
   ]
 

demo/package.json

@@ -7,10 +7,8 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "babel-plugin-prismjs": "^1.0.2",
     "eslint-loader": "^2.1.2",
-    "lit-element": "^2.0.1",
-    "prismjs": "^1.15.0"
+    "lit-element": "^2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.1.0",

demo/src/code_example.md

@@ -0,0 +1,3 @@
+```js
+example
+```

demo/src/hello-world.md

@@ -3,19 +3,14 @@ label: 'hello'
 imports:
   Button: './button.js'
   HelloWorld: './hello-world.js'
-  CSS: 'prismjs/themes/prism-dark.css'
 ---
 # Hello World
 
 This is an example component
 
-```render js
+```js
 var test = 'test';
 ```
 
-```render
 <hello-world label="world"></hello-world>
 <my-button label="Hello World"></my-button>
-
-<!-- Override default prism theme <style>${CSS}</style>
-```

demo/yarn.lock

@@ -29,13 +29,19 @@
     "watch": "watch 'npm run -s build' src/ test/"
   },
   "dependencies": {
+    "@mapbox/rehype-prism": "^0.4.0",
     "camelize": "^1.0.0",
     "except": "^0.1.3",
     "front-matter": "^3.0.1",
     "loader-utils": "^1.2.3",
-    "node-prismjs": "^0.1.0",
-    "remarkable": "^1.7.1",
-    "schema-utils": "^1.0.0"
+    "node-prismjs": "^0.1.2",
+    "rehype-raw": "^4.0.2",
+    "rehype-stringify": "^7.0.0",
+    "remark-parse": "^8.0.1",
+    "remark-rehype": "^6.0.0",
+    "schema-utils": "^1.0.0",
+    "unified": "^9.0.0",
+    "vfile-reporter": "^6.0.1"
   },
   "devDependencies": {
     "eslint": "^5.14.0",

package.json

@@ -7,20 +7,17 @@ Web Component Markdown Loader
 [![devDependencies Status](https://david-dm.org/hutchgrant/wc-markdown-loader/dev-status.svg)](https://david-dm.org/hutchgrant/wc-markdown-loader?type=dev)
 
 Webpack loader that parses markdown files and converts them to Web Components.
-It will also parse FrontMatter to import dependencies and render components
-along with it’s source code.
+It will also parse FrontMatter to import dependencies and render components.
+Provides support for syntax highlighting via [prismjs](https://prismjs.com/)
 
-This loader is a modified fork from [javiercf/react-markdown-loader](https://github.com/javiercf/react-markdown-loader) and can easily be used in conjunction with [Create-Evergreen-App](https://github.com/ProjectEvergreen/create-evergreen-app). It's still in the early stages and contributions are welcome.
+This loader is a modified fork from [javiercf/react-markdown-loader](https://github.com/javiercf/react-markdown-loader) and can easily be used in conjunction with [Create-Evergreen-App](https://github.com/ProjectEvergreen/create-evergreen-app) and [Greenwood](https://github.com/ProjectEvergreen/greenwood). It's still in the early stages and contributions are welcome.
 
 ## Install
 
 ```bash
 npm i --save-dev wc-markdown-loader
-npm i prismjs
 ```
 
-Prism is required within your application for syntax highlighting. By default, we're using the twilight theme. You can override that as well.
-
 ## Usage
 
 In the FrontMatter you should import the components you want to render
@@ -65,8 +62,6 @@ class HelloWorld extends LitElement {
 customElements.define('hello-world', HelloWorld);
 
 ```
-In the markdown File add the *render* tag to code fenceblocks you want the
-loader to compile as Components this will output the rendered component.
 
 *hello-world.md*
 
@@ -81,15 +76,11 @@ imports:
 
 This is an example component rendered from markdown
 
-```render
 <hello-world label="world"></hello-world>
-```
 
 This is an example code block rendered with syntax highlighter
 
-```render html
-<!-- This will only render in prism syntax highlighter -->
-<!-- You can override this style, see ./demo/hello-world.md -->
+```html
 <hello-world label="world"></hello-world>
 ```
 
@@ -119,7 +110,7 @@ customElements.define('eve-app', AppComponent);
 
 ### LightDOM
 
-If you want to disable shadowRoot and instead heave your markdown component render in the root node, you can add the following to your webpack config.
+If you want to disable shadowRoot and instead have your markdown component render in the root node, you can add the following to your webpack config.
 
 *webpack.config.js*
 ```js
@@ -140,7 +131,7 @@ This is if you need to manipulate this component from a parent component etc.
 
 ### Custom Style
 
-If you want to set a global custom style to use for your markdown components, you can do so from your webpack config. Keep in mind that this is relative to the working directory. You may need to use a `path.join(__dirname, 'mypath/mypath.css')`.  The example below demonstrates a prism theme from `node_modules/prismjs/themes/`.
+If you want to set a global custom style to use for your markdown components, you can do so from your webpack config. Keep in mind that this is relative to the working directory. You may need to use a `path.join(__dirname, 'mypath/mypath.css')`.  The example below demonstrates a prismjs theme from `node_modules/prismjs/themes/prism-tomorrow.css`.
 
 *webpack.config.js*
 ```js
@@ -151,7 +142,7 @@ module: {
       loader: 'wc-markdown-loader',
       options: {
         defaultStyle: false,
-        customStyle: 'prismjs/themes/prism-funky.css'
+        customStyle: 'prismjs/themes/prism-tomorrow.css'
       }
     }
   ]
@@ -160,6 +151,32 @@ module: {
 
 **note**: You can toggle the defaultStyle as well, it will have a lower specificity than the customStyle.
 
+### Unified Presets
+
+You can utilize [unified presets](https://github.com/unifiedjs/unified#preset) via the **preset** option within the loader.  The presets are placed in the unified process array after remark is converted to rehype.
+
+*webpack.config.js*
+```js
+module: {
+  rules: [
+    {
+      test: /\.md$/,
+      loader: 'wc-markdown-loader',
+      options: {
+        preset: {
+          settings: {bullet: '*', emphasis: '*', fences: true},
+            plugins: [
+              require('rehype-slug'),
+              require('rehype-autolink-headings')
+            ]
+          ]
+        }
+      }
+    }
+  ]
+}
+```
+
 ### Graph
 
 If you want to pre-scaffold an application with a graph of all md files paths and add your own generated labels(removing the need to cite label in each of the file's front-matter), you can create a graph array, write the serialized json to a cache file, then add the path of that .json file to the options of the loader e.g.

readme.md

@@ -33,7 +33,7 @@ module.exports = function build(markdown, defaults) {
   }
 
   if (defaultStyle) {
-    doImports += 'import css from \'prismjs/themes/prism-twilight.css\';\n';
+    doImports += 'import css from \'wc-markdown-loader/node_modules/prismjs/themes/prism-tomorrow.css\';\n';
   }
 
   const style = `
@@ -60,6 +60,7 @@ export const attributes = ${JSON.stringify(camelize(frontMatterAttributes))};
 class Component extends LitElement {
   render(){
     return html \`
+
       ${style}
       <div>
         ${js}

src/build.js

@@ -22,7 +22,7 @@ module.exports = async function loader(content) {
   let elementLabel = '';
 
   validateOptions(schema, options, 'wc-markdown-loader');
-  const { graph, shadowRoot, defaultStyle, customStyle } = options;
+  const { graph, shadowRoot, preset, defaultStyle, customStyle } = options;
 
   if (Object.keys(options).length > 0 && graph) {
     // use preset graph
@@ -43,11 +43,12 @@ module.exports = async function loader(content) {
   const defaults = {
     label: elementLabel,
     defaultDOM: shadowRoot,
-    defaultStyle: defaultStyle || defaultStyle === undefined,
+    preset,
+    defaultStyle,
     customStyle
   };
 
-  parser.parse(content)
+  parser.parse(content, preset)
     .then(markdown => build(markdown, defaults))
     .then(component => callback(null, component))
     .catch(callback);

src/index.js

@@ -12,6 +12,9 @@
     },
     "shadowRoot": {
       "type": [ "boolean" ]
+    },
+    "preset": {
+      "type": [ "object" ]
     }
   },
   "additionalProperties": false

src/options.json

@@ -1,104 +1,39 @@
 'use strict';
 
 const frontMatter = require('front-matter');
-const Prism = require('node-prismjs');
-const Remarkable = require('remarkable');
-const { escapeHtml } = require('remarkable/lib/common/utils');
-
-const md = new Remarkable();
-
-/**
- * Wraps the code and jsx in an html component
- * for styling it later
- * @param   {string} exampleRun Code to be run in the styleguide
- * @param   {string} exampleSrc Source that will be shown as example
- * @param   {string} langClass  CSS class for the code block
- * @returns {string}            Code block with souce and run code
- */
-function codeBlockTemplate(exampleRun, exampleSrc, langClass) {
-  return `
-    <pre${!langClass ? '' : ` class="${langClass}"`}>
-<code${!langClass ? '' : ` class="${langClass}"`}>${exampleSrc}</code></pre>`;
-}
-
-/**
- * Parse a code block to have a source and a run code
- * @param   {String}   code       - Raw html code
- * @param   {String}   lang       - Language indicated in the code block
- * @param   {String}   langPrefix - Language prefix
- * @param   {Function} highlight  - Code highlight function
- * @returns {String}                Code block with souce and run code
- */
-function parseCodeBlock(code, lang, langPrefix, highlight) {
-  let codeBlock = escapeHtml(code);
-
-  if (highlight) {
-    codeBlock = highlight(code, lang);
-  }
-
-  const langClass = !lang ? '' : `${langPrefix}${escape(lang, true)}`;
-  const js = code;
-
-  codeBlock = codeBlock
-    // .replace(/{/g, '{"{"{')
-    // .replace(/}/g, '{"}"}')
-    // .replace(/{"{"{/g, '{"{"}')
-    .replace(/\t/g, '');
-
-  if (lang !== 'render') {
-    return codeBlockTemplate(js, codeBlock, langClass);
-  }
-  return `<div>${js}</div>`;
-}
-
-/**
- * @typedef MarkdownObject
- * @type {Object}
- * @property {Object} attributes - Map of properties from the front matter
- * @property {String} body       - Markdown
- */
+const htmlRehype = require('rehype-stringify');
+const raw = require('rehype-raw');
+const rehypePrism = require('@mapbox/rehype-prism');
+const remarkParse = require('remark-parse');
+const remark2rehype = require('remark-rehype');
+const report = require('vfile-reporter');
+const unified = require('unified');
 
 /**
- * @typedef HTMLObject
- * @type {Object}
- * @property {String} html    - HTML parsed from markdown
- * @property {Object} imports - Map of dependencies
- */
-
-/**
- * Parse Markdown to HTML with code blocks
+ * Parse Markdown to HTML
  * @param   {MarkdownObject} markdown - Markdown attributes and body
  * @returns {HTMLObject}                HTML and imports
  */
-function parseMarkdown(markdown) {
-  return new Promise((resolve, reject) => {
-    let html;
-
-    const options = {
-      highlight(code, lang) {
-        const language = Prism.languages[lang] || Prism.languages.autoit;
-        return Prism.highlight(code, language);
-      },
-      xhtmlOut: true
-    };
+function parseMarkdown(markdown, preset = {}) {
+  return new Promise(async (resolve, reject) => {
+    let convertedHtml;
+    const settings = preset.settings ? preset.settings : {};
 
-    md.set(options);
+    try {
+      const parser = unified()
+        .use(remarkParse, settings)
+        .use(remark2rehype, { allowDangerousHtml: true })
+        .use(raw)
+        .use(rehypePrism)
+        .use(preset)
+        .use(htmlRehype);
 
-    md.renderer.rules.fence_custom.render = (tokens, idx, opts) => {
-      // gets tags applied to fence blocks ```react html
-      const codeTags = tokens[idx].params.split(/\s+/g);
-      return parseCodeBlock(
-        tokens[idx].content,
-        codeTags[codeTags.length - 1],
-        opts.langPrefix,
-        opts.highlight
-      );
-    };
+      convertedHtml = String(await parser.process(markdown.body));
 
-    try {
-      html = md.render(markdown.body);
-      return resolve({ html, attributes: markdown.attributes });
+      return resolve({ html: convertedHtml, attributes: markdown.attributes });
     } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(report(err));
       return reject(err);
     }
   });
@@ -121,14 +56,12 @@ function parseFrontMatter(markdown) {
  * @param  {String} markdown - Markdown string to be parsed
  * @returns {HTMLObject}       HTML and imports
  */
-function parse(markdown) {
-  return parseMarkdown(parseFrontMatter(markdown));
+function parse(markdown, preset) {
+  return parseMarkdown(parseFrontMatter(markdown), preset);
 }
 
 module.exports = {
-  codeBlockTemplate,
   parse,
-  parseCodeBlock,
   parseFrontMatter,
   parseMarkdown
 };

src/parser.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 const path = require('path');
 const loader = require('../src/index.js');
 
-describe('React Markdown Loader', () => {
+describe('Web Component Markdown Loader', () => {
   let mdExample = '';
   const mdFile = path.join(__dirname, '../demo/src/hello-world.md');