Build repeated HTML from shared modules

How to do it

Put each piece in one function that takes data and returns markup, for example table({ head, rows, caption }). Pages call the function and never write the element themselves. Give each module's root a fixed class. Make the build fail when a page has the element without it, for example a <table> that is not <table class="table">. This applies keep each piece of knowledge in one place to HTML.

Example

export const table = ({ head, rows, caption }) => `<table class="table">
  <caption>${caption}</caption>
  <thead><tr>${head.map(h => `<th>${h}</th>`).join('')}</tr></thead>
  <tbody>${rows.map(r => `<tr>${r.map((c, i) => `<td data-label="${head[i]}">${c}</td>`).join('')}</tr>`).join('')}</tbody>
</table>`;

// build gate
if (/<table(?! class="table")/.test(html)) throw new Error(`${path}: raw <table>, use table()`);

How to check

Write a raw <table> into a page. The build stops and names the page.