babel-plugin-transform-pug-js

Transpile Pug templates anywhere into JS functions for client-side rendering

Usage

When this plugin is added to your Babel configuration, the tagged template assigned to greeting in the following code will be transpiled into a JavaScript function that takes a data object as an argument and returns a string of HTML. Note that pug-runtime must be imported/required and assigned to the reference pug for the transpiled function(s) to work client-side.

import pug from 'pug-runtime';

const greeting = pug`
  p Hello,
    em= name
`;

const data = { name: 'Daniel' };

myElement.innerHTML = greeting(data); // => '<p>Hello,<em>Daniel</em></p>'

Acknowledgement

The babel-plugin-transform-pug-html package by @dumconstantin provided a starting point for developing this plugin.