Abstract Pug to template js function into a simple command line utility.

[tiagogoll]

Hi, I have a suggestion for something incredibly useful, it would be fantastic if you could wrap this one feature to compile Pug into a JS function for templating into a command line utility where one could just input any number of pug templates and the last input is a js file where all template functions would be created using the name of the pug file.

e.g. > pugToJs locationTemplate.pug cardTemplate.pug indexTemplate.pug pugTemplates.js

wherein pugTemplates.js the functions locationTemplate, cardTemplate and indexTemplate would be created each of which expects a json object and returns an html string output.

This would make client-side rendering incredibly easy for those of us who don't want to use frameworks or webpack itself. I really hope you could consider it.

Regardless I'm very grateful for your contribution.

[webdiscus]

Hello @tiagogoll.

It already works, well, almost as you need.

You can import the Pug template in your JS file and export as the compiled template function.

component.js'

// to import Pug template as template function use the url param `pug-compile`
import templateFn from './component.pug?pug-compile';

// render template function into HTML
const html = templateFn({
  // pass variables into template
  name: 'MyComponent'
});

// - OR - export template function for using anywhere
export default templateFn;

Define scripts in your package.json to run build process:

{
  "scripts": {
    "build": "webpack --mode=production",
  },
}

You can define all needed JS (where is used Pug as template function) in entry option:

const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = (env, argv) => {
  return {
    mode: 'production',

    output: {
      path: path.join(__dirname, 'dist/'),
    },

    entry: {
      myComponent: './src/component/component.js', // <= you can add a source JS file manuelly
      // -- OR --
      myComponent: env.file, // <= you can add a source JS file as an argument from CLI
    },

    plugins: [
      new PugPlugin(),
    ],

    module: {
      rules: [
        {
          test: /\.pug$/,
          loader: PugPlugin.loader,
        },
      ],
    },
  };
};

So you can pass any CLI arguments into Webpack template config or generate it dynamically.

Just run the command, use the --file= argument to pass a file into Webpack config:

npm run build --file=/full-path/to/your/file.js

The compiled template function as JS file you will find in dist/myComponent.js

See please the test case js-tmpl-entry-js.

P.S.

So, I demonstrated how it works.
For your needs, you can write a small bash script for automation of the process yourself.