add example: transform custom element / xml to html about eleventy-plugin-transformdom

[milahu]

more general

function getElementTransformer(selector, options = {}) {
  const defaultOptions = {
    name: 'div',
    attributes: (e => Object.fromEntries(Array.from(e.attributes).map(a => [a.name, a.value]))),
    class: (e => e.localName),
  };
  options = Object.assign(defaultOptions, options);
  const getName = (typeof options.name == 'function') ? (e => options.name(e)) : (() => options.name);
  const getAttributes = (
    (typeof options.attributes == 'function') ? (e => options.attributes(e)) :
    (typeof options.attributes == 'object') ? (() => options.attributes) :
    (() => false)
  );
  const getExtraClass = (
    (typeof options.class == 'function') ? (e => options.class(e)) :
    (typeof options.class == 'string') ? (() => options.class) :
    (() => false)
  );
  const domTransformer = {
    selector,
    transform: ({ elements, document }) => {
      for (let e = 0; e < elements.length; e++) {
        const element = elements[e];
        const nameNew = getName(element);
        if (!nameNew) continue; // no replace
        const attributesNew = getAttributes(element) || {};
        const extraClassNew = getExtraClass(element);
        const elementNew = document.createElement(nameNew);
        for (const [name, value] of Object.entries(attributesNew)) {
          elementNew.setAttribute(name, value);
        }
        elementNew.innerHTML = element.innerHTML;
        if (extraClassNew) elementNew.classList.add(extraClassNew);
        //element.parentNode.replaceChild(elementNew, element);
        element.replaceWith(elementNew);
      }
    },
  };
  return domTransformer;
}

eleventyConfig.addPlugin(transformDomPlugin, [
  getElementTransformer('page', { class: 'page-element' }),
  getElementTransformer('nw', { name: 'span', class: 'nowrap-element' }),
  ...(['de', 'en']).map(langKey => 
    getElementTransformer(langKey,
      { name: 'span', attributes: (e => ({ lang: e.localName })), class: false })
  )
]);

[liamfiddler]

Wow! I hadn't considered the plugin being used in this way, but it's very cool!

Thanks for the detailed code too! I think this would be a really interesting example of how the plugin can be used 😃

I'm flat out at the moment - any chance you'd be willing to fork the repo, add your example to the "examples" directory (feel free to use one of the existing example directories as a template), and submit a PR?