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.