How to render html with pug at runtime in a project served by gulp?

I am new to web development, and am using gulp for my project, which serves index.html page at build time.

I am using pug as a template for generating html.

gulfile.js

const bundler = () => {
  return rollup({
    input: './src/scripts/main.js',
    plugins: [
      babel(pkg.babel),
      nodeResolve(),
      commonJS(),
    ],
  }).then((bundle) => bundle.write({
    file: '.tmp/bundle.js',
    format: 'umd',
    sourceMap: 'inline',
  }));
};

// Uses PUG as template
const templates = (env) => () => {
  return src('./src/templates/*.pug')
      .pipe(plugins.pug({locals: {
        title: pkg.title,
        description: pkg.description,
        env,
      }}))
      .pipe(dest('dist'))
      .pipe(plugins.size({title: 'templates'}));
};

...

exports.serve = series(
    bundler,
    styles,
    templates('development'),
    images('development'),
    serve
);

Now this is my

main.js:

import dispatchForm from './modules/dispatchForm';

const domContentLoad = (fn) => {
  if (document.readyState !== 'loading') fn();
  else document.addEventListener('DOMContentLoaded', fn);
};

domContentLoad(() => {
  dispatchForm();
});

And this is my module which exports the function to handle user interaction at index.html:

dispatchForm.js

const button = document.querySelector('[data-calculator-button]');

function updateValue() {
  const gain  = document.querySelector('[data-calculator-form][name="gain"]:checked');
  const cost  = document.querySelector('[data-calculator-form][name="cost"]:checked');

  if (gain && cost) {
    button.removeAttribute('disabled');
    button.classList.remove('selectors__button--inactive');
  } else {
    button.setAttribute('disabled', '');
    button.classList.add('selectors__button--inactive');
  }
  console.log(gain, cost)

}

function dispatchForm() {
  const radioInput = document.querySelectorAll('[data-calculator-form]');
  radioInput.forEach(element => element.addEventListener('input', updateValue));
}

export default dispatchForm;

---

Now, at runtime, I need to fetch values at button submit, and render another pug template, with "rollup-plugin-pug".

I'm trying to create another JavaScript module for this handling and rendering:

---

calculateButton.js

// modules/calculateButton.js
import templateFn from '../../templates/partials/field.pug';
 
const button = document.querySelector('[data-calculator-button]');


button.addEventListener('click', (e) => {
   if (e.target.getAttribute('disabled')) return;
   const gain  = document.querySelector('[data-calculator-form][name="gain"]:checked').value;
   const cost  = document.querySelector('[data-calculator-form][name="cost"]:checked').value;
  
  document.getElementById("result").innerHTML = templateFn({
    gain, cost
  });
  console.log(templateFn())
});

and

field.pug

//- template.pug
.content
  p= gain
  p= cost

---

But nothing renders when I click the button and submit my values. All I see at browser url if I click at 130 radio is:

http://localhost:3000/?gain=points&cost=130

---

I've followed this documentation: https://www.npmjs.com/package/rollup-plugin-pug

But no rendering. What am I missing?

from How to render html with pug at runtime in a project served by gulp?