eleventy-plugin-wcc/src/index.js

An Eleventy plugin for rendering Web Components with WCC.

import { renderFromHTML } from 'wc-compiler';
import { stripWrappingParagraphs } from './utils.js';

export const wccPlugin = {
  configFunction: function (eleventyConfig, options = {}) {
    const { definitions = [], trimParagraphTagsInMd = true } = options;
    const definitionPathnames = definitions.map(definition => definition.pathname);

    for (const definition of definitions) {
      eleventyConfig.addWatchTarget(definition.pathname);
    }

    eleventyConfig.addTransform('wcc', async function (content, outputPath) {
      if (!outputPath.endsWith('.html')) {
        return;
      }

      const processedContent =
        trimParagraphTagsInMd && this.inputPath.endsWith('.md')
          ? stripWrappingParagraphs(content)
          : content;

      const { html } = await renderFromHTML(processedContent, definitions);
      return html;
    });

    eleventyConfig.on('eleventy.beforeWatch', async (changedFiles) => {
      for (const file of changedFiles) {
        if (definitionPathnames.includes(file)) {
          // naive cache busting solution for ESM
          // https://github.com/nodejs/help/issues/2806
          await import(`${file}?t=${Date.now()}`); 
        }
      }
    });
  }
};