parcel-bundler · DeMoorJasper · Dec 22, 2019 · Dec 22, 2019 · Dec 22, 2019 · Dec 22, 2019
diff --git a/packages/configs/default/index.json b/packages/configs/default/index.json
@@ -19,6 +19,7 @@
     "*.less": ["@parcel/transformer-less"],
     "*.css": ["@parcel/transformer-postcss", "@parcel/transformer-css"],
     "*.sss": ["@parcel/transformer-sugarss"],
+    "*.md": ["@parcel/transformer-markdown-html"],
     "*.{htm,html}": [
       "@parcel/transformer-posthtml",
       "@parcel/transformer-html"
@@ -48,6 +49,7 @@
     "*.css": "@parcel/packager-css",
     "*.js": "@parcel/packager-js",
     "*.ts": "@parcel/packager-ts",
+    "*.md": "@parcel/packager-markdown-html",
     "*": "@parcel/packager-raw"
   },
   "resolvers": ["@parcel/resolver-default"],

diff --git a/packages/configs/default/package.json b/packages/configs/default/package.json
@@ -53,6 +53,7 @@
     "@parcel/transformer-toml": "^2.0.0-alpha.3.1",
     "@parcel/transformer-typescript-types": "^2.0.0-alpha.3.1",
     "@parcel/transformer-yaml": "^2.0.0-alpha.3.1",
+    "@parcel/transformer-markdown-html": "^2.0.0-alpha.3.1",
     "@parcel/transformer-mdx": "^2.0.0-alpha.3.1"
   }
 }
diff --git a/packages/core/integration-tests/test/markdown.js b/packages/core/integration-tests/test/markdown.js
@@ -1,34 +1,28 @@
 import assert from 'assert';
 import path from 'path';
-import {bundle, assertBundleTree, outputFS} from '@parcel/test-utils';
+import {bundle, assertBundles, outputFS, distDir} from '@parcel/test-utils';
 
-describe.skip('markdown', function() {
+describe('markdown', function() {
   it('should support bundling Markdown', async function() {
     let b = await bundle(
       path.join(__dirname, '/integration/markdown/index.md'),
     );
 
-    await assertBundleTree(b, {
-      name: 'index.html',
-      assets: ['index.md'],
-      childBundles: [
-        {
-          type: 'png',
-          assets: ['100x100.png'],
-          childBundles: [],
-        },
-      ],
-    });
+    await assertBundles(b, [
+      {
+        name: 'index.html',
+        assets: ['index.md'],
+      },
+      {
+        type: 'png',
+        assets: ['100x100.png'],
+      },
+    ]);
 
-    let files = await outputFS.readdir(path.join(__dirname, '/dist'));
     let html = await outputFS.readFile(
-      path.join(__dirname, '/dist/index.html'),
+      path.join(distDir, 'index.html'),
+      'utf8',
     );
-    for (let file of files) {
-      let ext = file.match(/\.([0-9a-z]+)(?:[?#]|$)/i)[0];
-      if (file !== 'index.html' && ext !== '.map') {
-        assert(html.includes(file));
-      }
-    }
+    assert(html.includes('<h1 id="heading1">heading1</h1>'));
   });
 });
diff --git a/packages/examples/markdown/package.json b/packages/examples/markdown/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@parcel/markdown-example",
+  "version": "2.0.0-alpha.3.2",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "demo": "parcel build src/*.md --no-cache"
+  },
+  "devDependencies": {
+    "parcel": "^2.0.0-alpha.3.2"
+  },
+  "dependencies": {
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3"
+  }
+}
diff --git a/packages/examples/markdown/src/index.md b/packages/examples/markdown/src/index.md
@@ -0,0 +1,17 @@
+---
+title: Parcel Markdown Example
+description: Demonstrating the capabilities of markdown using Parcel 2
+template: ./template.html
+---
+
+# Header 1
+
+This is some content
+
+## Header 2
+
+This is some more content
+
+```js
+let hello = 'world';
+```
diff --git a/packages/examples/markdown/src/style.css b/packages/examples/markdown/src/style.css
@@ -0,0 +1,6 @@
+@import 'highlight.js/styles/github.css';
+
+main,
+html {
+  margin: 0;
+}
diff --git a/packages/examples/markdown/src/template.html b/packages/examples/markdown/src/template.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>CUSTOM TEMPLATE: {{title}}</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    {{{ body }}}
+  </body>
+</html>
diff --git a/packages/packagers/markdown-html/package.json b/packages/packagers/markdown-html/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@parcel/packager-markdown-html",
+  "version": "2.0.0-alpha.3.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parcel-bundler/parcel.git"
+  },
+  "main": "lib/MarkdownHtmlTransformer.js",
+  "source": "src/MarkdownHtmlTransformer.js",
+  "engines": {
+    "node": ">= 10.0.0",
+    "parcel": "^2.0.0-alpha.1.1"
+  },
+  "dependencies": {
+    "@parcel/plugin": "^2.0.0-alpha.3.1",
+    "@parcel/types": "^2.0.0-alpha.3.1",
+    "@parcel/utils": "^2.0.0-alpha.3.1",
+    "mustache": "^3.2.0"
+  }
+}
diff --git a/packages/packagers/markdown-html/src/MarkdownHtmlTransformer.js b/packages/packagers/markdown-html/src/MarkdownHtmlTransformer.js
@@ -0,0 +1,39 @@
+// @flow
+import assert from 'assert';
+import {Packager} from '@parcel/plugin';
+import {replaceURLReferences} from '@parcel/utils';
+import Mustache from 'mustache';
+
+export default new Packager({
+  async package({bundle, bundleGraph}) {
+    let assets = [];
+    bundle.traverseAssets(asset => {
+      assets.push(asset);
+    });
+
+    assert.equal(assets.length, 1, 'MD bundles may only contain one asset');
+
+    let asset = assets[0];
+    let code = await asset.getCode();
+
+    // Look for a template
+    let bundles = bundleGraph.getSiblingBundles(bundle);
+    if (bundles.length === 1) {
+      let entryAsset = bundles[0].getMainEntry();
+      if (entryAsset) {
+        let template = await entryAsset.getCode();
+        code = Mustache.render(template, {
+          body: code,
+          // $FlowFixMe
+          ...asset.meta,
+        });
+      }
+    }
+
+    return replaceURLReferences({
+      bundle,
+      bundleGraph,
+      contents: code,
+    });
+  },
+});
diff --git a/packages/transformers/markdown-html/package.json b/packages/transformers/markdown-html/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@parcel/transformer-markdown-html",
+  "version": "2.0.0-alpha.3.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parcel-bundler/parcel.git"
+  },
+  "main": "lib/MarkedTransformer.js",
+  "source": "src/MarkedTransformer.js",
+  "engines": {
+    "parcel": "^2.0.0-alpha.1.1"
+  },
+  "dependencies": {
+    "@parcel/plugin": "^2.0.0-alpha.3.1",
+    "@parcel/utils": "^2.0.0-alpha.3.1",
+    "marked": "^0.8.0",
+    "highlight.js": "^9.17.1",
+    "front-matter": "^3.0.2"
+  }
+}
diff --git a/packages/transformers/markdown-html/src/MarkedTransformer.js b/packages/transformers/markdown-html/src/MarkedTransformer.js
@@ -0,0 +1,45 @@
+// @flow
+import {Transformer} from '@parcel/plugin';
+import {promisify} from '@parcel/utils';
+import marked from 'marked';
+import hljs from 'highlight.js';
+import fm from 'front-matter';
+
+const markedParse = promisify(marked.parse);
+
+export default new Transformer({
+  async transform({asset}) {
+    asset.type = 'md';
+
+    let code = await asset.getCode();
+    let {body, attributes} = fm(code);
+
+    for (let key in attributes) {
+      asset.meta[key] = attributes[key];
+    }
+
+    asset.setCode(
+      await markedParse(body, {
+        renderer: new marked.Renderer(),
+        highlight: (code: string, lang: string) => {
+          return hljs.highlight(lang, code).value;
+        },
+        pedantic: false,
+        gfm: true,
+        breaks: false,
+        sanitize: false,
+        smartLists: true,
+        smartypants: false,
+        xhtml: false,
+      }),
+    );
+
+    if (attributes.template) {
+      asset.addDependency({
+        moduleSpecifier: attributes.template,
+      });
+    }
+
+    return [asset];
+  },
+});
diff --git a/yarn.lock b/yarn.lock
@@ -6057,6 +6057,13 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+front-matter@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-3.0.2.tgz#2401cd05fcf22bd0de48a104ffb4efb1ff5c8465"
+  integrity sha512-iBGZaWyzqgsrPGsqrXZP6N4hp5FzSKDi18nfAoYpgz3qK5sAwFv/ojmn3VS60SOgLvq6CtojNqy0y6ZNz05IzQ==
+  dependencies:
+    js-yaml "^3.13.1"
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -6660,7 +6667,18 @@ gulplog@^1.0.0:
   dependencies:
     glogg "^1.0.0"
 
-handlebars@^4.0.3, handlebars@^4.4.0:
+handlebars@^4.0.3, handlebars@^4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
+  dependencies:
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+handlebars@^4.4.0:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.2.tgz#01127b3840156a0927058779482031afe0e730d7"
   integrity sha512-4PwqDL2laXtTWZghzzCtunQUTLbo31pcCJrd/B/9JP8XbhVzpS5ZXuKqlOzsd1rtcaLo4KqAn8nl8mkknS4MHw==
@@ -6848,6 +6866,13 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight.js@^9.17.1:
+  version "9.17.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.17.1.tgz#14a4eded23fd314b05886758bb906e39dd627f9a"
+  integrity sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==
+  dependencies:
+    handlebars "^4.5.3"
+
 highlight.js@~9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
@@ -8542,6 +8567,11 @@ marked@^0.6.1:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.3.tgz#79babad78af638ba4d522a9e715cdfdd2429e946"
   integrity sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ==
 
+marked@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.0.tgz#ec5c0c9b93878dc52dd54be8d0e524097bd81a99"
+  integrity sha512-MyUe+T/Pw4TZufHkzAfDj6HarCBWia2y27/bhuYkTaiUnfDYFnCP3KUN+9oM7Wi6JA2rymtVYbQu3spE0GCmxQ==
+
 matchdep@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/matchdep/-/matchdep-2.0.0.tgz#c6f34834a0d8dbc3b37c27ee8bbcb27c7775582e"
@@ -8979,6 +9009,11 @@ murmurhash-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51"
   integrity sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=
 
+mustache@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-3.2.0.tgz#1c68e0bf77817a92e8a9216e35c53bbb342345f6"
+  integrity sha512-n5de2nQ1g2iz3PO9cmq/ZZx3W7glqjf0kavThtqfuNlZRllgU2a2Q0jWoQy3BloT5A6no7sjCTHBVn1rEKjx1Q==
+
 mute-stdout@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mute-stdout/-/mute-stdout-1.0.1.tgz#acb0300eb4de23a7ddeec014e3e96044b3472331"