doohtml 0.98.9-beta.0

package/README.md

@@ -0,0 +1,113 @@
+# DooHTML
+DooHTML is a lightweight rendering framework designed for efficient DOM manipulation and templating. Authored by Henrik Javen.
+
+## Features
+- **Template-based Rendering**: Use HTML templates to define reusable components.
+- **Dynamic Data Binding**: Bind data to templates with `{{property}}` placeholders.
+- **Lightweight and Fast**: Optimized for performance with minimal overhead.
+
+## Install
+
+```bash
+npm install doohtml
+```
+
+## Quick start
+
+Define a `<template>` with a `data-bind` row and `{{...}}` placeholders, and a target element with `data-template` and `data-key`. Then call `createTemplate` and `render` (or `add` to append).
+
+**HTML:**
+
+```html
+<template id="item-tpl">
+  <div>
+    <div data-bind data-key="id">
+      <span class="name">{{name}}</span>
+      <span class="score">{{score}}</span>
+    </div>
+  </div>
+</template>
+<div data-template="item-tpl" data-key="id"></div>
+```
+
+**JavaScript:**
+
+```javascript
+import { createTemplate, render, add } from 'doohtml';
+
+const data = [
+  { id: 1, name: 'Alice', score: 10 },
+  { id: 2, name: 'Bob', score: 20 }
+];
+
+// Create from template and replace content with data
+const target = await createTemplate('item-tpl', data);
+// target is the placeholder node; it now shows the rendered rows.
+
+// Replace all rows
+render(target, data);
+
+// Or append more rows (e.g. for infinite scroll)
+add(target, [{ id: 3, name: 'Carol', score: 30 }]);
+```
+
+Use `render(target, data)` to replace the list; use `add(target, data)` to append rows without clearing.
+
+## API overview
+
+- **createTemplate**(id, data?, src?) – Creates a template instance from an element id (or selector), optionally renders initial data, returns the target node.
+- **render**(target, data, start?) – Replaces target content with rows from `data`.
+- **add**(target, dataSet, start?) – Appends rows from `dataSet` to the target.
+- **renderWithProvider**(target, dataList, start?, length?, dataProvider?) – Replace content using a data list and optional provider (default: `(i, list) => list[i]`).
+- **addWithProvider**(target, dataList, start?, length?, dataProvider?) – Append rows using a data list and optional provider.
+- **prefetchTemplate**(src) – Preload a template from a URL.
+
+---
+
+## Development
+
+### Prerequisites
+
+- **Node.js** (v12 or higher)
+- **npm**
+
+### Build
+
+From the project directory:
+
+```bash
+npm install
+npm run build
+```
+
+This runs `build:copy` and `build:min`:
+
+- **build:copy** – Copies `src/doohtml.js` to `dist/doohtml.js` and `dist/doohtml.mjs`.
+- **build:min** – Minifies `src/doohtml.js` with Terser (preserving quoted properties) to `dist/doohtml.min.mjs`.
+
+So `dist/` contains: `doohtml.js`, `doohtml.mjs`, and `doohtml.min.mjs`.
+
+### Project structure
+
+```
+doohtml/
+├── src/
+│   └── doohtml.js       # Main source
+├── dist/
+│   ├── doohtml.js       # ESM copy (require)
+│   ├── doohtml.mjs      # ESM copy (import)
+│   └── doohtml.min.mjs  # Minified ESM
+├── package.json
+└── README.md
+```
+
+### Other scripts
+
+- **preview** – `npm run build && npm pack` (creates a tarball for local testing).
+- **prepublishOnly** – Runs `npm run build` before publish.
+
+---
+
+## License
+
+This project is licensed under the MIT License. See the `LICENSE` file for details.

package/dist/doohtml.js

@@ -0,0 +1,440 @@
+const Config = {
+	NAME:'DooHTML',
+	DATA_BIND:'data-bind',
+	DATA_TEMPLATE:'data-template',
+	MATCH:{ANY:-1,STARTS_WITH:0,EXACT:1},
+	DELIMITER:{'BEG':'{{','END':'}}'},
+	DATA_KEY:'data-key',
+	KEY:'key'
+}
+
+const {cloneNode, appendChild} = globalThis.Node.prototype
+const cloneDeep = n => cloneNode.call(n, true)
+const appendRow = function(child) {
+	return appendChild.call(this, child);
+};
+
+const version = 'v0.98.9-beta.0'
+
+const getItemValue = (item, prop) => {
+    if (!prop.includes('.')) {
+        return item[prop] ? item[prop] : ''
+    }
+
+    return prop.split('.').reduce((acc, key) => {
+        return acc && acc[key] !== undefined ? acc[key] : ''
+    }, item)
+}
+
+const getNode = (node, arr) => arr.reduce((currentNode, index) => currentNode?.childNodes[index] || null, node)
+
+
+const isTable = (node) => {
+	if (!node || !node.tagName) return false
+	return ['TABLE','TBODY','THEAD','TFOOT','TR','TH'].includes(node.tagName)
+}
+
+const setNodeValues = (node, dataItem, dataSlots) => {
+	const len = dataSlots.length
+	for (let x = 0; x < len; x++) {
+		const curNode = getNode(node, dataSlots[x][1], 0)
+		if (curNode) {
+			if (dataSlots[x][2] === 'textContent') {
+				curNode.nodeValue = dataItem[dataSlots[x][0]]
+			} else {
+				curNode.setAttribute(dataSlots[x][2], dataItem[dataSlots[x][0]])
+			}
+		} else {
+			globalThis.console.log('Field:' + dataSlots[x][0] + ' does not exist')
+		}
+	}
+}
+
+const render = (target, data, start = 0) => {
+	if (data.length === 0) {
+		target.textContent = ''
+		return
+	} 
+	renderHTML(target, data, start)
+}	
+
+const renderHTML = (target, data, start = 0, end=null) => {
+	let dataLen = data.length
+	
+	let	stop = end ? start + dataLen :  dataLen - start
+	if (stop > dataLen) { stop = dataLen }
+
+	// Clear existing content
+	target.textContent = ''
+	const insertRow = appendRow.bind(target)
+	const parentElement = target.parentElement
+	const key = target[Config.KEY]
+	const childNodes = target.childNodes
+	const isTableSection = target.tagName === 'TBODY' || target.tagName === 'THEAD' || target.tagName === 'TFOOT'
+	if (!isTableSection) {
+		target.remove()
+	}
+	let fragment = globalThis.document.createDocumentFragment()
+	if (childNodes.length > 0) {
+		for (let i = start; i < stop; ++i) {
+			setNodeValues(target.processNode, data[i], target.dataSlots)
+			let cloned = cloneDeep(target.processNode)
+			cloned[Config.KEY] = getItemValue(data[i],key)
+			fragment.appendChild(cloned)
+		}
+		if (isTableSection) {
+			target.appendChild(fragment)
+		} else {
+			parentElement.appendChild(fragment)
+		}
+	} else {
+		for (let i = start; i < stop; ++i) {
+			setNodeValues(target.processNode, data[i], target.dataSlots)
+			let cloned = cloneDeep(target.processNode)
+			cloned[Config.KEY] = getItemValue(data[i],key)
+			insertRow(cloned)
+		}
+		if (!isTableSection) {
+			parentElement.appendChild(target)
+		}
+	}
+}
+
+const renderHTMLWithProvider = (target, dataProvider, start = 0, length = null, rows = []) => {
+	if (length === null || length === 0) {
+		return
+	}
+	
+	const stop = start + length
+	const key = target[Config.KEY]
+	const insertRow = appendRow.bind(target)
+	
+	const table = target.parentElement
+	const wasAttached = table && table.contains(target)
+	
+	if (wasAttached) {
+		target.remove()
+	}
+	
+	for (let i = start; i < stop; ++i) {
+		const dataItem = dataProvider(i, rows)
+		setNodeValues(target.processNode, dataItem, target.dataSlots)
+		let cloned = cloneDeep(target.processNode)
+		cloned[Config.KEY] = getItemValue(dataItem, key)
+		insertRow(cloned)
+	}
+	
+	if (wasAttached && table) {
+		table.append(target)
+	}
+}
+
+const defaultProvider = (i, list) => list[i]
+
+const renderWithProvider = (target, dataList, start = 0, length = null, dataProvider = null) => {
+	const provider = dataProvider ?? defaultProvider
+	const len = length ?? (dataList?.length ?? 0) - start
+	if (len <= 0) return
+	renderHTMLWithProvider(target, provider, start, len, dataList ?? [])
+}
+
+const add = (target, dataSet, start=0) => {
+	renderHTML(target, dataSet, start , dataSet.length - start)
+}
+
+const addWithProvider = (target, dataList, start = 0, length = null, dataProvider = null) => {
+	const provider = dataProvider ?? defaultProvider
+	const len = length ?? (dataList?.length ?? 0) - start
+	if (len <= 0) return
+
+	const stop = start + len
+	const key = target[Config.KEY]
+	const insertRow = appendRow.bind(target)
+	const rows = dataList ?? []
+
+	// Simple loop - append to existing content (keep attached)
+	for (let i = start; i < stop; ++i) {
+		// Call provider to get single data object for this index
+		const dataItem = provider(i, rows)
+		
+		// Set values and clone the process node
+		setNodeValues(target.processNode, dataItem, target.dataSlots)
+		let cloned = cloneDeep(target.processNode)
+		cloned[Config.KEY] = getItemValue(dataItem, key)
+		insertRow(cloned)
+	}
+}
+
+/**
+ * @deprecated Use add() instead. Will be removed in a future version.
+ */
+const append = (target, dataSet, start = 0) => {
+	if (typeof globalThis !== 'undefined' && globalThis.console?.warn) {
+		globalThis.console.warn('DooHTML: append() is deprecated. Use add() instead.')
+	}
+	return add(target, dataSet, start)
+}
+
+/**
+ * @deprecated Use addWithProvider() instead. Will be removed in a future version.
+ */
+const appendWithProvider = (target, dataList, start = 0, length = null, dataProvider = null) => {
+	if (typeof globalThis !== 'undefined' && globalThis.console?.warn) {
+		globalThis.console.warn('DooHTML: appendWithProvider() is deprecated. Use addWithProvider() instead.')
+	}
+	return addWithProvider(target, dataList, start, length, dataProvider)
+}	
+
+const dooParse = (argDataNode) => { 
+	const  _xAttr =  ['src', 'selected', 'checked',  'disabled', 'readonly']  
+
+	let tplNode = cloneDeep(argDataNode)
+	tplNode.removeAttribute(Config.DATA_BIND)
+	delete tplNode.dataset.key
+	let htmlStr = tplNode.outerHTML.replaceAll('\t', '').replaceAll('\n', '')
+	let orgStr = htmlStr
+	_xAttr.forEach(item => {
+		htmlStr = htmlStr.replaceAll(new RegExp(' ' + item + '="{{(.+)}}"', 'g'), ' doo-' + item + '="{{$1}}"')
+	})
+	let xHtml = (orgStr === htmlStr)
+
+	let elem = globalThis.document.createElement('template')
+	elem.innerHTML = htmlStr
+	let dataSlots = []
+	
+	const addDataSlot = (item, fld, type) => {
+		let slot = []
+		let child = item
+		while (child !== elem.firstElementChild) {
+			let prev = child.previousSibling
+			let cnt = 0
+
+			while (prev) {
+				cnt++
+				prev = prev.previousSibling
+			}
+			child = child.parentNode
+			if (child) {
+				slot.unshift(cnt)
+			}	
+		} 
+		dataSlots.push([fld,slot.slice(1),type])
+	}
+
+	const textWalker = globalThis.document.createTreeWalker(
+		elem.content,
+		globalThis.NodeFilter.SHOW_TEXT,
+		{
+			acceptNode() {
+				return globalThis.NodeFilter.FILTER_ACCEPT
+			},
+		}
+	)
+
+	let textNode = textWalker.nextNode()
+	let multiText = []		
+	while (textNode) {
+		let val = textNode.wholeText.trim()
+		if (val.indexOf('{{') === 0 && val.lastIndexOf('}}') === val.length-2) {
+			//do nothing
+		} else {	
+			let text = val.replaceAll('{{', '<span>{{').replaceAll('}}', '}}</span>')
+			multiText.push({node:textNode.parentNode, oldText:val, newText:text})
+
+		}
+		textNode = textWalker.nextNode()
+	}
+	for (let i=0, len = multiText.length; i<len; i++) {
+		multiText[i].node.innerHTML = multiText[i].node.innerHTML.replace(multiText[i].oldText,multiText[i].newText) 
+	}
+		
+	let processedElem = cloneDeep(elem.content)
+
+
+	const treeWalker = globalThis.document.createTreeWalker(
+		processedElem,
+		globalThis.NodeFilter.SHOW_TEXT,
+		{
+			acceptNode() {
+				return globalThis.NodeFilter.FILTER_ACCEPT
+			},
+		}
+	)
+
+	let currentNode = treeWalker.nextNode()
+	while (currentNode) {
+		const matches = currentNode.nodeValue.match(/\{\{(.*?)\}\}/g)
+		if (matches) {
+			const parent = currentNode.parentNode
+			matches.forEach((match) => {
+				const fld = match.replaceAll(/\{\{|\}\}/g, '').trim()
+				const textNode = globalThis.document.createTextNode(fld)
+				currentNode.textContent = ''
+				const newNode = parent.appendChild(textNode)
+				addDataSlot(newNode, fld, 'textContent')
+			})
+		}
+
+		currentNode = treeWalker.nextNode()
+	}
+
+	const elemWalker = globalThis.document.createTreeWalker(
+		processedElem,
+		globalThis.NodeFilter.SHOW_ELEMENT,
+		{
+			acceptNode() {
+				return globalThis.NodeFilter.FILTER_ACCEPT
+			}
+		}
+	)
+
+	currentNode = elemWalker.nextNode()
+	while (currentNode) {
+		for (const attr of currentNode.attributes) {
+			if (attr.nodeValue.includes('{{')) {
+				addDataSlot(currentNode, attr.nodeValue.replace('{{','').replace('}}',''), attr.name)
+			} 
+		}	
+		currentNode = elemWalker.nextNode()
+	}
+	let templateStr = processedElem.firstElementChild.outerHTML
+	dataSlots.forEach(item=>{
+		let str = '{{' + item[0] + '}}'
+		templateStr = templateStr.replaceAll(new RegExp(str,'g'),'')
+
+	})
+	processedElem.outerHTML = templateStr
+
+	return {processNode:processedElem.firstElementChild, xHtml, dataSlots}
+}
+
+const fetchTemplate = (url) => {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest()
+		xhr.open("GET", url)
+		xhr.addEventListener('load', () => resolve(xhr.responseText))
+		xhr.onerror = () => reject(xhr.statusText)
+		xhr.send()
+	})
+}
+
+const setReactiveDataNodes = (tplNode) => {
+	const place = []
+	const getNodeLevel = (node) => {
+		let level = 0
+		while (node.parentElement) {
+			node = node.parentElement
+			level++
+		}
+		return level
+	}
+
+	const processReactiveElements = (reactiveElems) => {
+		const orderedElems = [...reactiveElems]
+			.map((elem) => ({
+				elem,
+				level: getNodeLevel(elem),
+				useParent: elem.dataset.src?.startsWith('this.parent'),
+				noRepeat: Object.hasOwn(elem.dataset, 'norepeat'),
+			}))
+			.sort((a, b) => b.level - a.level)
+
+		orderedElems.forEach(({ elem, level, useParent, noRepeat }, index) => {
+			const parent = elem.parentElement
+			// Keep TBODY/THEAD/TFOOT as container so TABLE keeps thead when data-bind is on tbody
+			const isTableSection = parent?.tagName === 'TABLE' && '|TBODY|THEAD|TFOOT|'.includes(`|${elem.tagName}|`)
+			let dataElem = isTableSection
+				? elem
+				: '|STYLE|LINK|'.includes(`|${elem.tagName}|`)
+				? elem
+				: parent && '|DL|UL|TBODY|THEAD|TFOOT|TR|SELECT|SECTION|'.includes(`|${parent.tagName}|`)
+				? parent
+				: parent || elem // Fallback to elem if parentElement is null
+
+			// Ensure dataElem is never null
+			if (!dataElem) {
+				console.warn('dataElem is null, using elem as fallback')
+				dataElem = elem
+			}
+
+			const parsedNode = dooParse(elem)
+			Object.assign(dataElem, {
+				processNode: parsedNode.processNode,
+				xHtml: parsedNode.xHtml,
+				dataSlots: parsedNode.dataSlots,
+				name: index,
+				level,
+				useParent,
+				noRepeat,
+				isTable: isTable(dataElem),
+			})
+
+			if (dataElem.tagName === 'DATA' || dataElem.tagName === 'STYLE' || dataElem.tagName === 'LINK') {
+				elem.parentElement?.replaceChild(dataElem, elem) || console.warn('Templates should only have one child node')
+			}
+
+			place.push(dataElem)
+		})
+	}
+
+	const reactiveElems = tplNode.content.querySelectorAll(`[${Config.DATA_BIND}]`)
+	reactiveElems.forEach((elem) => {
+		if (!Object.hasOwn(elem.dataset, 'src')) {
+			elem.dataset.src = tplNode.hasAttribute('doo-dispatch') ? 'DooX' : Config.DATA_BIND
+		}
+		delete elem.dataset.src
+	})
+
+	processReactiveElements(reactiveElems)
+
+	tplNode.place = place
+}
+		
+
+const prefetchTemplate = async (src) => {
+    if (src && (src.startsWith('./') || src.startsWith('../') || src.startsWith('http'))) {
+        const tpl = await fetchTemplate(src)
+        return tpl
+    }
+    return null
+}
+
+const createTemplate = async (id, data = [], src = null) => {
+
+	let tpl = src ? await prefetchTemplate(src) : ''
+    if (!tpl) {
+        if (id.startsWith('<')) {
+            tpl = id
+        } else if (id.startsWith('#')) {
+            tpl = globalThis.document.querySelector(id).outerHTML
+        } else {
+            tpl = globalThis.document.querySelector('#' + id).outerHTML
+        }
+    }
+
+    const elem = globalThis.document.createElement('div')
+    elem.innerHTML = tpl
+    if (elem.querySelector('template')) {
+        elem.innerHTML = elem.querySelector('template')
+            ? tpl
+            : `<template><center><pre>The template you are trying to import does not have a &lt;template&gt; tag</pre><div style="color:red">${tpl}</div></center></template>`
+    }
+    const importedTemplate = cloneDeep(elem.querySelector('template'))
+
+    const templateNode = globalThis.document.createElement('template')
+    importedTemplate.removeAttribute('id')
+    templateNode.innerHTML = importedTemplate.innerHTML
+
+    setReactiveDataNodes(templateNode)	
+    const subscriber = globalThis.document.querySelector(`[data-template="${id}"]`)
+	templateNode["place"][0].textContent = ''
+	templateNode["place"][0][Config.KEY] = subscriber.dataset[Config.KEY]
+    subscriber.parentElement.replaceChild(templateNode.content, subscriber)
+
+    if (data.length > 0) {
+		render(templateNode["place"][0], data, 0)
+	}	
+	
+    return templateNode["place"][0]
+}
+export { createTemplate, add, addWithProvider, append, appendWithProvider, render, renderWithProvider, Config, version, prefetchTemplate }

package/dist/doohtml.min.mjs

@@ -0,0 +1 @@
+const Config={t:"DooHTML",l:"data-bind",o:"data-template",i:{T:-1,p:0,h:1},u:{BEG:"{{",END:"}}"},m:"data-key",D:"key"},{cloneNode:cloneNode,appendChild:appendChild}=globalThis.Node.prototype,cloneDeep=e=>cloneNode.call(e,!0),appendRow=function(e){return appendChild.call(this,e)},version="v0.98.9-beta.0",getItemValue=(e,t)=>t.includes(".")?t.split(".").reduce(((e,t)=>e&&void 0!==e[t]?e[t]:""),e):e[t]?e[t]:"",getNode=(e,t)=>t.reduce(((e,t)=>e?.childNodes[t]||null),e),isTable=e=>!(!e||!e.tagName)&&["TABLE","TBODY","THEAD","TFOOT","TR","TH"].includes(e.tagName),setNodeValues=(e,t,l)=>{const o=l.length;for(let a=0;a<o;a++){const o=getNode(e,l[a][1]);o?"textContent"===l[a][2]?o.nodeValue=t[l[a][0]]:o.setAttribute(l[a][2],t[l[a][0]]):globalThis.console.log("Field:"+l[a][0]+" does not exist")}},render=(e,t,l=0)=>{0!==t.length?renderHTML(e,t,l):e.textContent=""},renderHTML=(e,t,l=0,o=null)=>{let a=t.length,n=o?l+a:a-l;n>a&&(n=a),e.textContent="";const d=appendRow.bind(e),s=e.parentElement,r=e[Config.D],i=e.childNodes,T="TBODY"===e.tagName||"THEAD"===e.tagName||"TFOOT"===e.tagName;T||e.remove();let p=globalThis.document.createDocumentFragment();if(i.length>0){for(let o=l;o<n;++o){setNodeValues(e.v,t[o],e.N);let l=cloneDeep(e.v);l[Config.D]=getItemValue(t[o],r),p.appendChild(l)}T?e.appendChild(p):s.appendChild(p)}else{for(let o=l;o<n;++o){setNodeValues(e.v,t[o],e.N);let l=cloneDeep(e.v);l[Config.D]=getItemValue(t[o],r),d(l)}T||s.appendChild(e)}},renderHTMLWithProvider=(e,t,l=0,o=null,a=[])=>{if(null===o||0===o)return;const n=l+o,d=e[Config.D],s=appendRow.bind(e),r=e.parentElement,i=r&&r.contains(e);i&&e.remove();for(let o=l;o<n;++o){const l=t(o,a);setNodeValues(e.v,l,e.N);let n=cloneDeep(e.v);n[Config.D]=getItemValue(l,d),s(n)}i&&r&&r.append(e)},defaultProvider=(e,t)=>t[e],renderWithProvider=(e,t,l=0,o=null,a=null)=>{const n=a??defaultProvider,d=o??(t?.length??0)-l;d<=0||renderHTMLWithProvider(e,n,l,d,t??[])},add=(e,t,l=0)=>{renderHTML(e,t,l,t.length-l)},addWithProvider=(e,t,l=0,o=null,a=null)=>{const n=a??defaultProvider,d=o??(t?.length??0)-l;if(d<=0)return;const s=l+d,r=e[Config.D],i=appendRow.bind(e),T=t??[];for(let t=l;t<s;++t){const l=n(t,T);setNodeValues(e.v,l,e.N);let o=cloneDeep(e.v);o[Config.D]=getItemValue(l,r),i(o)}},append=(e,t,l=0)=>("undefined"!=typeof globalThis&&globalThis.console?.warn&&globalThis.console.warn("DooHTML: append() is deprecated. Use add() instead."),add(e,t,l)),appendWithProvider=(e,t,l=0,o=null,a=null)=>("undefined"!=typeof globalThis&&globalThis.console?.warn&&globalThis.console.warn("DooHTML: appendWithProvider() is deprecated. Use addWithProvider() instead."),addWithProvider(e,t,l,o,a)),dooParse=e=>{let t=cloneDeep(e);t.removeAttribute(Config.l),delete t.dataset.key;let l=t.outerHTML.replaceAll("\t","").replaceAll("\n",""),o=l;["src","selected","checked","disabled","readonly"].forEach((e=>{l=l.replaceAll(new RegExp(" "+e+'="{{(.+)}}"',"g")," doo-"+e+'="{{$1}}"')}));let a=o===l,n=globalThis.document.createElement("template");n.innerHTML=l;let d=[];const s=(e,t,l)=>{let o=[],a=e;for(;a!==n.firstElementChild;){let e=a.previousSibling,t=0;for(;e;)t++,e=e.previousSibling;a=a.parentNode,a&&o.unshift(t)}d.push([t,o.slice(1),l])},r=globalThis.document.createTreeWalker(n.content,globalThis.NodeFilter.SHOW_TEXT,{acceptNode:()=>globalThis.NodeFilter.FILTER_ACCEPT});let i=r.nextNode(),T=[];for(;i;){let e=i.wholeText.trim();if(0===e.indexOf("{{")&&e.lastIndexOf("}}")===e.length-2);else{let t=e.replaceAll("{{","<span>{{").replaceAll("}}","}}</span>");T.push({node:i.parentNode,C:e,P:t})}i=r.nextNode()}for(let e=0,t=T.length;e<t;e++)T[e].node.innerHTML=T[e].node.innerHTML.replace(T[e].C,T[e].P);let p=cloneDeep(n.content);const c=globalThis.document.createTreeWalker(p,globalThis.NodeFilter.SHOW_TEXT,{acceptNode:()=>globalThis.NodeFilter.FILTER_ACCEPT});let g=c.nextNode();for(;g;){const e=g.nodeValue.match(/\{\{(.*?)\}\}/g);if(e){const t=g.parentNode;e.forEach((e=>{const l=e.replaceAll(/\{\{|\}\}/g,"").trim(),o=globalThis.document.createTextNode(l);g.textContent="";const a=t.appendChild(o);s(a,l,"textContent")}))}g=c.nextNode()}const h=globalThis.document.createTreeWalker(p,globalThis.NodeFilter.SHOW_ELEMENT,{acceptNode:()=>globalThis.NodeFilter.FILTER_ACCEPT});for(g=h.nextNode();g;){for(const e of g.attributes)e.nodeValue.includes("{{")&&s(g,e.nodeValue.replace("{{","").replace("}}",""),e.name);g=h.nextNode()}let f=p.firstElementChild.outerHTML;return d.forEach((e=>{let t="{{"+e[0]+"}}";f=f.replaceAll(new RegExp(t,"g"),"")})),p.outerHTML=f,{v:p.firstElementChild,A:a,N:d}},fetchTemplate=e=>new Promise(((t,l)=>{const o=new XMLHttpRequest;o.open("GET",e),o.addEventListener("load",(()=>t(o.responseText))),o.onerror=()=>l(o.statusText),o.send()})),setReactiveDataNodes=e=>{const t=[],l=e=>{let t=0;for(;e.parentElement;)e=e.parentElement,t++;return t},o=e.content.querySelectorAll(`[${Config.l}]`);o.forEach((t=>{Object.hasOwn(t.dataset,"src")||(t.dataset.src=e.hasAttribute("doo-dispatch")?"DooX":Config.l),delete t.dataset.src})),(e=>{[...e].map((e=>({L:e,level:l(e),H:e.dataset.src?.startsWith("this.parent"),O:Object.hasOwn(e.dataset,"norepeat")}))).sort(((e,t)=>t.level-e.level)).forEach((({L:e,level:l,H:o,O:a},n)=>{const d=e.parentElement;let s="TABLE"===d?.tagName&&"|TBODY|THEAD|TFOOT|".includes(`|${e.tagName}|`)||"|STYLE|LINK|".includes(`|${e.tagName}|`)?e:d&&"|DL|UL|TBODY|THEAD|TFOOT|TR|SELECT|SECTION|".includes(`|${d.tagName}|`)?d:d||e;s||(console.warn("dataElem is null, using elem as fallback"),s=e);const r=dooParse(e);Object.assign(s,{v:r.v,A:r.A,N:r.N,name:n,level:l,H:o,O:a,R:isTable(s)}),"DATA"!==s.tagName&&"STYLE"!==s.tagName&&"LINK"!==s.tagName||e.parentElement?.replaceChild(s,e)||console.warn("Templates should only have one child node"),t.push(s)}))})(o),e.place=t},prefetchTemplate=async e=>{if(e&&(e.startsWith("./")||e.startsWith("../")||e.startsWith("http"))){return await fetchTemplate(e)}return null},createTemplate=async(e,t=[],l=null)=>{let o=l?await prefetchTemplate(l):"";o||(o=e.startsWith("<")?e:e.startsWith("#")?globalThis.document.querySelector(e).outerHTML:globalThis.document.querySelector("#"+e).outerHTML);const a=globalThis.document.createElement("div");a.innerHTML=o,a.querySelector("template")&&(a.innerHTML=a.querySelector("template")?o:`<template><center><pre>The template you are trying to import does not have a &lt;template&gt; tag</pre><div style="color:red">${o}</div></center></template>`);const n=cloneDeep(a.querySelector("template")),d=globalThis.document.createElement("template");n.removeAttribute("id"),d.innerHTML=n.innerHTML,setReactiveDataNodes(d);const s=globalThis.document.querySelector(`[data-template="${e}"]`);return d.place[0].textContent="",d.place[0][Config.D]=s.dataset[Config.D],s.parentElement.replaceChild(d.content,s),t.length>0&&render(d.place[0],t,0),d.place[0]};export{createTemplate,add,addWithProvider,append,appendWithProvider,render,renderWithProvider,Config,version,prefetchTemplate};

package/dist/doohtml.mjs

@@ -0,0 +1,440 @@
+const Config = {
+	NAME:'DooHTML',
+	DATA_BIND:'data-bind',
+	DATA_TEMPLATE:'data-template',
+	MATCH:{ANY:-1,STARTS_WITH:0,EXACT:1},
+	DELIMITER:{'BEG':'{{','END':'}}'},
+	DATA_KEY:'data-key',
+	KEY:'key'
+}
+
+const {cloneNode, appendChild} = globalThis.Node.prototype
+const cloneDeep = n => cloneNode.call(n, true)
+const appendRow = function(child) {
+	return appendChild.call(this, child);
+};
+
+const version = 'v0.98.9-beta.0'
+
+const getItemValue = (item, prop) => {
+    if (!prop.includes('.')) {
+        return item[prop] ? item[prop] : ''
+    }
+
+    return prop.split('.').reduce((acc, key) => {
+        return acc && acc[key] !== undefined ? acc[key] : ''
+    }, item)
+}
+
+const getNode = (node, arr) => arr.reduce((currentNode, index) => currentNode?.childNodes[index] || null, node)
+
+
+const isTable = (node) => {
+	if (!node || !node.tagName) return false
+	return ['TABLE','TBODY','THEAD','TFOOT','TR','TH'].includes(node.tagName)
+}
+
+const setNodeValues = (node, dataItem, dataSlots) => {
+	const len = dataSlots.length
+	for (let x = 0; x < len; x++) {
+		const curNode = getNode(node, dataSlots[x][1], 0)
+		if (curNode) {
+			if (dataSlots[x][2] === 'textContent') {
+				curNode.nodeValue = dataItem[dataSlots[x][0]]
+			} else {
+				curNode.setAttribute(dataSlots[x][2], dataItem[dataSlots[x][0]])
+			}
+		} else {
+			globalThis.console.log('Field:' + dataSlots[x][0] + ' does not exist')
+		}
+	}
+}
+
+const render = (target, data, start = 0) => {
+	if (data.length === 0) {
+		target.textContent = ''
+		return
+	} 
+	renderHTML(target, data, start)
+}	
+
+const renderHTML = (target, data, start = 0, end=null) => {
+	let dataLen = data.length
+	
+	let	stop = end ? start + dataLen :  dataLen - start
+	if (stop > dataLen) { stop = dataLen }
+
+	// Clear existing content
+	target.textContent = ''
+	const insertRow = appendRow.bind(target)
+	const parentElement = target.parentElement
+	const key = target[Config.KEY]
+	const childNodes = target.childNodes
+	const isTableSection = target.tagName === 'TBODY' || target.tagName === 'THEAD' || target.tagName === 'TFOOT'
+	if (!isTableSection) {
+		target.remove()
+	}
+	let fragment = globalThis.document.createDocumentFragment()
+	if (childNodes.length > 0) {
+		for (let i = start; i < stop; ++i) {
+			setNodeValues(target.processNode, data[i], target.dataSlots)
+			let cloned = cloneDeep(target.processNode)
+			cloned[Config.KEY] = getItemValue(data[i],key)
+			fragment.appendChild(cloned)
+		}
+		if (isTableSection) {
+			target.appendChild(fragment)
+		} else {
+			parentElement.appendChild(fragment)
+		}
+	} else {
+		for (let i = start; i < stop; ++i) {
+			setNodeValues(target.processNode, data[i], target.dataSlots)
+			let cloned = cloneDeep(target.processNode)
+			cloned[Config.KEY] = getItemValue(data[i],key)
+			insertRow(cloned)
+		}
+		if (!isTableSection) {
+			parentElement.appendChild(target)
+		}
+	}
+}
+
+const renderHTMLWithProvider = (target, dataProvider, start = 0, length = null, rows = []) => {
+	if (length === null || length === 0) {
+		return
+	}
+	
+	const stop = start + length
+	const key = target[Config.KEY]
+	const insertRow = appendRow.bind(target)
+	
+	const table = target.parentElement
+	const wasAttached = table && table.contains(target)
+	
+	if (wasAttached) {
+		target.remove()
+	}
+	
+	for (let i = start; i < stop; ++i) {
+		const dataItem = dataProvider(i, rows)
+		setNodeValues(target.processNode, dataItem, target.dataSlots)
+		let cloned = cloneDeep(target.processNode)
+		cloned[Config.KEY] = getItemValue(dataItem, key)
+		insertRow(cloned)
+	}
+	
+	if (wasAttached && table) {
+		table.append(target)
+	}
+}
+
+const defaultProvider = (i, list) => list[i]
+
+const renderWithProvider = (target, dataList, start = 0, length = null, dataProvider = null) => {
+	const provider = dataProvider ?? defaultProvider
+	const len = length ?? (dataList?.length ?? 0) - start
+	if (len <= 0) return
+	renderHTMLWithProvider(target, provider, start, len, dataList ?? [])
+}
+
+const add = (target, dataSet, start=0) => {
+	renderHTML(target, dataSet, start , dataSet.length - start)
+}
+
+const addWithProvider = (target, dataList, start = 0, length = null, dataProvider = null) => {
+	const provider = dataProvider ?? defaultProvider
+	const len = length ?? (dataList?.length ?? 0) - start
+	if (len <= 0) return
+
+	const stop = start + len
+	const key = target[Config.KEY]
+	const insertRow = appendRow.bind(target)
+	const rows = dataList ?? []
+
+	// Simple loop - append to existing content (keep attached)
+	for (let i = start; i < stop; ++i) {
+		// Call provider to get single data object for this index
+		const dataItem = provider(i, rows)
+		
+		// Set values and clone the process node
+		setNodeValues(target.processNode, dataItem, target.dataSlots)
+		let cloned = cloneDeep(target.processNode)
+		cloned[Config.KEY] = getItemValue(dataItem, key)
+		insertRow(cloned)
+	}
+}
+
+/**
+ * @deprecated Use add() instead. Will be removed in a future version.
+ */
+const append = (target, dataSet, start = 0) => {
+	if (typeof globalThis !== 'undefined' && globalThis.console?.warn) {
+		globalThis.console.warn('DooHTML: append() is deprecated. Use add() instead.')
+	}
+	return add(target, dataSet, start)
+}
+
+/**
+ * @deprecated Use addWithProvider() instead. Will be removed in a future version.
+ */
+const appendWithProvider = (target, dataList, start = 0, length = null, dataProvider = null) => {
+	if (typeof globalThis !== 'undefined' && globalThis.console?.warn) {
+		globalThis.console.warn('DooHTML: appendWithProvider() is deprecated. Use addWithProvider() instead.')
+	}
+	return addWithProvider(target, dataList, start, length, dataProvider)
+}	
+
+const dooParse = (argDataNode) => { 
+	const  _xAttr =  ['src', 'selected', 'checked',  'disabled', 'readonly']  
+
+	let tplNode = cloneDeep(argDataNode)
+	tplNode.removeAttribute(Config.DATA_BIND)
+	delete tplNode.dataset.key
+	let htmlStr = tplNode.outerHTML.replaceAll('\t', '').replaceAll('\n', '')
+	let orgStr = htmlStr
+	_xAttr.forEach(item => {
+		htmlStr = htmlStr.replaceAll(new RegExp(' ' + item + '="{{(.+)}}"', 'g'), ' doo-' + item + '="{{$1}}"')
+	})
+	let xHtml = (orgStr === htmlStr)
+
+	let elem = globalThis.document.createElement('template')
+	elem.innerHTML = htmlStr
+	let dataSlots = []
+	
+	const addDataSlot = (item, fld, type) => {
+		let slot = []
+		let child = item
+		while (child !== elem.firstElementChild) {
+			let prev = child.previousSibling
+			let cnt = 0
+
+			while (prev) {
+				cnt++
+				prev = prev.previousSibling
+			}
+			child = child.parentNode
+			if (child) {
+				slot.unshift(cnt)
+			}	
+		} 
+		dataSlots.push([fld,slot.slice(1),type])
+	}
+
+	const textWalker = globalThis.document.createTreeWalker(
+		elem.content,
+		globalThis.NodeFilter.SHOW_TEXT,
+		{
+			acceptNode() {
+				return globalThis.NodeFilter.FILTER_ACCEPT
+			},
+		}
+	)
+
+	let textNode = textWalker.nextNode()
+	let multiText = []		
+	while (textNode) {
+		let val = textNode.wholeText.trim()
+		if (val.indexOf('{{') === 0 && val.lastIndexOf('}}') === val.length-2) {
+			//do nothing
+		} else {	
+			let text = val.replaceAll('{{', '<span>{{').replaceAll('}}', '}}</span>')
+			multiText.push({node:textNode.parentNode, oldText:val, newText:text})
+
+		}
+		textNode = textWalker.nextNode()
+	}
+	for (let i=0, len = multiText.length; i<len; i++) {
+		multiText[i].node.innerHTML = multiText[i].node.innerHTML.replace(multiText[i].oldText,multiText[i].newText) 
+	}
+		
+	let processedElem = cloneDeep(elem.content)
+
+
+	const treeWalker = globalThis.document.createTreeWalker(
+		processedElem,
+		globalThis.NodeFilter.SHOW_TEXT,
+		{
+			acceptNode() {
+				return globalThis.NodeFilter.FILTER_ACCEPT
+			},
+		}
+	)
+
+	let currentNode = treeWalker.nextNode()
+	while (currentNode) {
+		const matches = currentNode.nodeValue.match(/\{\{(.*?)\}\}/g)
+		if (matches) {
+			const parent = currentNode.parentNode
+			matches.forEach((match) => {
+				const fld = match.replaceAll(/\{\{|\}\}/g, '').trim()
+				const textNode = globalThis.document.createTextNode(fld)
+				currentNode.textContent = ''
+				const newNode = parent.appendChild(textNode)
+				addDataSlot(newNode, fld, 'textContent')
+			})
+		}
+
+		currentNode = treeWalker.nextNode()
+	}
+
+	const elemWalker = globalThis.document.createTreeWalker(
+		processedElem,
+		globalThis.NodeFilter.SHOW_ELEMENT,
+		{
+			acceptNode() {
+				return globalThis.NodeFilter.FILTER_ACCEPT
+			}
+		}
+	)
+
+	currentNode = elemWalker.nextNode()
+	while (currentNode) {
+		for (const attr of currentNode.attributes) {
+			if (attr.nodeValue.includes('{{')) {
+				addDataSlot(currentNode, attr.nodeValue.replace('{{','').replace('}}',''), attr.name)
+			} 
+		}	
+		currentNode = elemWalker.nextNode()
+	}
+	let templateStr = processedElem.firstElementChild.outerHTML
+	dataSlots.forEach(item=>{
+		let str = '{{' + item[0] + '}}'
+		templateStr = templateStr.replaceAll(new RegExp(str,'g'),'')
+
+	})
+	processedElem.outerHTML = templateStr
+
+	return {processNode:processedElem.firstElementChild, xHtml, dataSlots}
+}
+
+const fetchTemplate = (url) => {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest()
+		xhr.open("GET", url)
+		xhr.addEventListener('load', () => resolve(xhr.responseText))
+		xhr.onerror = () => reject(xhr.statusText)
+		xhr.send()
+	})
+}
+
+const setReactiveDataNodes = (tplNode) => {
+	const place = []
+	const getNodeLevel = (node) => {
+		let level = 0
+		while (node.parentElement) {
+			node = node.parentElement
+			level++
+		}
+		return level
+	}
+
+	const processReactiveElements = (reactiveElems) => {
+		const orderedElems = [...reactiveElems]
+			.map((elem) => ({
+				elem,
+				level: getNodeLevel(elem),
+				useParent: elem.dataset.src?.startsWith('this.parent'),
+				noRepeat: Object.hasOwn(elem.dataset, 'norepeat'),
+			}))
+			.sort((a, b) => b.level - a.level)
+
+		orderedElems.forEach(({ elem, level, useParent, noRepeat }, index) => {
+			const parent = elem.parentElement
+			// Keep TBODY/THEAD/TFOOT as container so TABLE keeps thead when data-bind is on tbody
+			const isTableSection = parent?.tagName === 'TABLE' && '|TBODY|THEAD|TFOOT|'.includes(`|${elem.tagName}|`)
+			let dataElem = isTableSection
+				? elem
+				: '|STYLE|LINK|'.includes(`|${elem.tagName}|`)
+				? elem
+				: parent && '|DL|UL|TBODY|THEAD|TFOOT|TR|SELECT|SECTION|'.includes(`|${parent.tagName}|`)
+				? parent
+				: parent || elem // Fallback to elem if parentElement is null
+
+			// Ensure dataElem is never null
+			if (!dataElem) {
+				console.warn('dataElem is null, using elem as fallback')
+				dataElem = elem
+			}
+
+			const parsedNode = dooParse(elem)
+			Object.assign(dataElem, {
+				processNode: parsedNode.processNode,
+				xHtml: parsedNode.xHtml,
+				dataSlots: parsedNode.dataSlots,
+				name: index,
+				level,
+				useParent,
+				noRepeat,
+				isTable: isTable(dataElem),
+			})
+
+			if (dataElem.tagName === 'DATA' || dataElem.tagName === 'STYLE' || dataElem.tagName === 'LINK') {
+				elem.parentElement?.replaceChild(dataElem, elem) || console.warn('Templates should only have one child node')
+			}
+
+			place.push(dataElem)
+		})
+	}
+
+	const reactiveElems = tplNode.content.querySelectorAll(`[${Config.DATA_BIND}]`)
+	reactiveElems.forEach((elem) => {
+		if (!Object.hasOwn(elem.dataset, 'src')) {
+			elem.dataset.src = tplNode.hasAttribute('doo-dispatch') ? 'DooX' : Config.DATA_BIND
+		}
+		delete elem.dataset.src
+	})
+
+	processReactiveElements(reactiveElems)
+
+	tplNode.place = place
+}
+		
+
+const prefetchTemplate = async (src) => {
+    if (src && (src.startsWith('./') || src.startsWith('../') || src.startsWith('http'))) {
+        const tpl = await fetchTemplate(src)
+        return tpl
+    }
+    return null
+}
+
+const createTemplate = async (id, data = [], src = null) => {
+
+	let tpl = src ? await prefetchTemplate(src) : ''
+    if (!tpl) {
+        if (id.startsWith('<')) {
+            tpl = id
+        } else if (id.startsWith('#')) {
+            tpl = globalThis.document.querySelector(id).outerHTML
+        } else {
+            tpl = globalThis.document.querySelector('#' + id).outerHTML
+        }
+    }
+
+    const elem = globalThis.document.createElement('div')
+    elem.innerHTML = tpl
+    if (elem.querySelector('template')) {
+        elem.innerHTML = elem.querySelector('template')
+            ? tpl
+            : `<template><center><pre>The template you are trying to import does not have a &lt;template&gt; tag</pre><div style="color:red">${tpl}</div></center></template>`
+    }
+    const importedTemplate = cloneDeep(elem.querySelector('template'))
+
+    const templateNode = globalThis.document.createElement('template')
+    importedTemplate.removeAttribute('id')
+    templateNode.innerHTML = importedTemplate.innerHTML
+
+    setReactiveDataNodes(templateNode)	
+    const subscriber = globalThis.document.querySelector(`[data-template="${id}"]`)
+	templateNode["place"][0].textContent = ''
+	templateNode["place"][0][Config.KEY] = subscriber.dataset[Config.KEY]
+    subscriber.parentElement.replaceChild(templateNode.content, subscriber)
+
+    if (data.length > 0) {
+		render(templateNode["place"][0], data, 0)
+	}	
+	
+    return templateNode["place"][0]
+}
+export { createTemplate, add, addWithProvider, append, appendWithProvider, render, renderWithProvider, Config, version, prefetchTemplate }

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "doohtml",
+    "version": "0.98.9-beta.0",
+    "type": "module",
+    "description": "DooHTML is a JavaScript library for creating HTML elements and templates using high performant rendering methods",
+    "main": "dist/doohtml.js",
+    "module": "dist/doohtml.mjs",
+    "exports": {
+        ".": {
+            "import": "./dist/doohtml.mjs",
+            "require": "./dist/doohtml.js",
+            "default": "./dist/doohtml.mjs"
+        }
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "npm run build:copy && npm run build:min",
+        "build:copy": "mkdir -p dist && cp src/doohtml.js dist/doohtml.js && cp src/doohtml.js dist/doohtml.mjs",
+        "build:min": "terser src/doohtml.js -c --mangle --mangle-props keep_quoted -o dist/doohtml.min.mjs",
+        "preview": "npm run build && npm pack",
+        "prepublishOnly": "npm run build",
+        "test": "node test/doohtml.test.js",
+        "serve": "serve . -l 4000"
+    },
+    "author": "Henrik Javen",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/hman61/doohtml.git"
+    },
+    "keywords": [
+        "html",
+        "template",
+        "rendering",
+        "dom",
+        "framework"
+    ],
+    "devDependencies": {
+        "eslint": "^9.39.2",
+        "eslint-plugin-unicorn": "^62.0.0",
+        "jsdom": "^25.0.0",
+        "serve": "^14.2.5",
+        "terser": "^5.20.2"
+    }
+}