/embeddable-content

client-side transclusion component

Primary LanguageJavaScript

vanilla JS Custom Element for client-side transclusion

Usage

$ npm install embeddable-content

import "embeddable-content";
<embeddable-content>
    <a href="/path/to/html">details</a>
</embeddable-content>
  • <embeddable-content cors> enables transclusion across origins
  • <embeddable-content replace> disposes of the <embeddable-content> wrapper element upon transclusion

There's also a variant for imperatively updating transcluded content via morphdom:

import RefreshableEmbeddableContent from "embeddable-content/refreshable";

customElements.define("embeddable-content", RefreshableEmbeddableContent);

// periodically refresh transclusions
setInterval(_ => {
    let nodes = document.querySelectorAll("embeddable-content");
    [...nodes].forEach(node => {
        node.refresh();
    });
}, 60 * 1000);

(note that morhpdom is not included as a dependency of this package)

Contributing

  • ensure Node is installed
  • npm install downloads dependencies
  • npm run compile performs a one-time compilation, generating dist/embeddable-content.js (via faucet-pipeline)
  • npm start automatically recompiles while monitoring code changes
  • npm test checks code for stylistic consistency