DOMFragment.js

//By Joshua Brewster (AGPL v3.0)

npm i fragelement

This is a simple wrapper for the native template fragments in javascript.

DOMElement extends the HTMLElement class and implements a template fragment rendering method:

Extend it like:

class customelement extends DOMElement { 
  props={defaultprop:1}:

  //The template can be an imported html file when building in node.js for a better experience
  template=(props)=>{return `<div>New Element: ${JSON.stringify(props)}</div>`} 
         
  oncreate=undefined, //(props)=>{} when the node is created e.g. setting up buttons (props) => {}
  ondelete=undefined, //(props)=>{} when the node is deleted, e.g. cleaning up events (props) => {}
  onresize=undefined, //window.onresize event (props) => {}
  onchanged=undefined, //if props change, e.g. re-render? (props) => {}. Using past tense to not conflict with built in onchange event in most elements
  
}

addCustomElement(customelement); //adds the custom class to the registry before instantiating the new element

where all that needs to be set is the template variable.

Then this should work in html:

<customelement- props='{"a":"1","b":"2","c":"3"}'><customelement- /> 

Can define props, onresize, onchanged, oncreate, ondelete, and even template just like other stock html functions.

let elm = document.querySelector('customelement-');

elm.addEventListener('resized',(e) => {
  console.log(e.target.props);
});

elm.addEventListener('changed',(e) => {
  console.log(e.target.props);
});

elm.addEventListener('deleted',(e) => {
  console.log(e.target.props);
});

Custom elements have to have a '-' in the names for whatever reason, they are auto added on the end of the class name if none specified in addCustomElement

DOMFragment is the older method as described below, not as clean: IOS does not like this method.

npm i domfragment

import {DOMFragment} from 'domfragment'


const htmlprops = {
  id:'template1'
};

function templateStringGen(props) { //write your html in a template string
    return `
    <div id=${props.id}>Clickme</div>
    `;
}

function onRender(props) { //setup html
    document.getElementById(props.id).onclick = () => { 
      document.getElementById(props.id).innerHTML = "Clicked!"; 
    }
}

function onchange(props) { //optional if you want to be able to auto-update the html with changes to the properties, not recommended if you only want to update single divs
  console.log('props changed!', props);
}

function ondelete(props) { //called before the node is deleted, use to clean up animation loops and event listeners
}

function onresize() { //adds a resize listener to the window, this is automatically cleaned up when you delete the node.
}

const fragment = new DOMFragment(
                        templateStringGen,
                        document.body,
                        htmlprops,
                        onRender,
                        undefined, //onchange
                        "NEVER", //"FRAMERATE" //1000
                        ondelete,
                        onresize
                      ); 
                      
//... later ...
fragment.deleteNode(); //deletes the rendered fragment if you are done with it.