md2js-loader

md2js-loader

Exports Markdown to javascript instructions. Create javascript functions from Markdown templates.

Install

npm i -D md2js-loader

Usage

Add the md2js-loader to your webpack.config.js.

{
  test: /\.(markdown|md)$/,
  use: {
    loader: 'md2js-loader',
    options: {}
  }
}

Now, simply import/require any markdown files. For example:

Example
=======

- 1
- 2
- 3
- 4

const createList = require('./templates/list.markdown');

document.body.appendChild(createList());

this will be converted to the following javascript:

function createNode() {
    var container = document.createDocumentFragment();
    var e_0 = document.createElement("div");
    var e_1 = document.createElement("h1");
    e_1.setAttribute("id", "example");
    e_1.appendChild(document.createTextNode("Example"));
    e_0.appendChild(e_1);
    var e_2 = document.createElement("ul");
    var e_3 = document.createElement("li");
    e_3.appendChild(document.createTextNode("1"));
    e_2.appendChild(e_3);
    var e_4 = document.createElement("li");
    e_4.appendChild(document.createTextNode("2"));
    e_2.appendChild(e_4);
    var e_5 = document.createElement("li");
    e_5.appendChild(document.createTextNode("3"));
    e_2.appendChild(e_5);
    var e_6 = document.createElement("li");
    e_6.appendChild(document.createTextNode("4"));
    e_2.appendChild(e_6);
    e_0.appendChild(e_2);
    container.appendChild(e_0);
    return container;
}

The loader will optimize this code by injecting the following base code into your bundle:

module.exports = {
    document_createDocumentFragment: () => {
        return document.createDocumentFragment();
    },
    document_createElement: name => {
        return document.createElement(name);
    },
    document_createTextNode: text => {
        return document.createTextNode(text);
    },
    appendChild: (parent, child) => {
        parent.appendChild(child);
    },
    setAttribute: (elem, key, value) => {
        elem.setAttribute(key, value);
    }
};

This will enable the compiler to name mangle these function calls.