jails-js 6.4.0 → 6.5.0

package/src/component.ts

@@ -106,7 +106,7 @@ export const Component = ({ name, module, dependencies, node, templates, signal,
 
 			if( attribute ) {
 				observables.push({
-					target: callback? node.querySelectorAll(selectorOrCallback) : [node],
+					target: callback? selectorOrCallback : null,
 					callback: callback || selectorOrCallback
 				})
 
@@ -117,7 +117,8 @@ export const Component = ({ name, module, dependencies, node, templates, signal,
 								const attrname = mutation.attributeName
 								if( attrname === attribute[1] ) {
 									observables.forEach( item => {
-										item.target.forEach( target => {
+										const target = item.target? node.querySelectorAll(item.target): [node]
+										target.forEach( target => {
 											if( target == mutation.target ) {
 												item.callback({
 													target: mutation.target,
@@ -126,7 +127,6 @@ export const Component = ({ name, module, dependencies, node, templates, signal,
 												})
 											}
 										})
-
 									})
 								}
 							}

package/src/template-system.ts

@@ -1,11 +1,14 @@
 import { uuid, decodeHTML } from './utils'
 
-const templates  = {}
-
 const config = {
 	tags: ['{{', '}}']
 }
 
+const templates  = {}
+const booleanAttrs = /html-(allowfullscreen|async|autofocus|autoplay|checked|controls|default|defer|disabled|formnovalidate|inert|ismap|itemscope|loop|multiple|muted|nomodule|novalidate|open|playsinline|readonly|required|reversed|selected)="(.*?)"/g
+const htmlAttr = /html-([^\s]*?)="(.*?)"/g
+const tagExpr = () => new RegExp(`\\${config.tags[0]}(.+?)\\${config.tags[1]}`, 'g')
+
 export const templateConfig = (newconfig) => {
 	Object.assign( config, newconfig )
 }
@@ -40,44 +43,36 @@ export const compile = ( html ) => {
 	`)
 }
 
-const tagElements = ( target, keys, components ) => {
-	target
-		.querySelectorAll( keys.toString() )
-		.forEach((node) => {
-			const name = node.localName
-			if( name === 'template' ) {
-				return tagElements( node.content, keys, components )
-			}
-			if( node.getAttribute('html-if') && !node.id ) {
-				node.id = uuid()
-			}
-			if( name in components ) {
-				node.setAttribute('tplid', uuid())
-			}
-		})
-}
+const tagElements = (target, keys, components) => {
+	const isComponent = key => key in components
+	const selector = keys.join(',')
 
-const transformAttributes = ( html ) => {
-
-	const regexTags = new RegExp(`\\${config.tags[0]}(.+?)\\${config.tags[1]}`, 'g')
+	target.querySelectorAll(selector).forEach(node => {
+		if (node.localName === 'template') {
+			tagElements(node.content, keys, components)
+			return
+		}
+		if (node.hasAttribute('html-if') && !node.id) {
+			node.id = uuid()
+		}
+		if (isComponent(node.localName)) {
+			node.setAttribute('tplid', uuid())
+		}
+	})
+}
 
+const transformAttributes = (html) => {
 	return html
 		.replace(/jails___scope-id/g, '%%_=$scopeid_%%')
-		.replace(regexTags, '%%_=$1_%%')
-		// Booleans
-		// https://meiert.com/en/blog/boolean-attributes-of-html/
-		.replace(/html-(allowfullscreen|async|autofocus|autoplay|checked|controls|default|defer|disabled|formnovalidate|inert|ismap|itemscope|loop|multiple|muted|nomodule|novalidate|open|playsinline|readonly|required|reversed|selected)=\"(.*?)\"/g, `%%_if(safe(function(){ return $2 })){_%%$1%%_}_%%`)
-		// The rest
-		.replace(/html-([^\s]*?)=\"(.*?)\"/g, (all, key, value) => {
-			if (key === 'key' || key === 'model' || key === 'scopeid' ) {
-				return all
-			}
+		.replace(tagExpr(), '%%_=$1_%%')
+		.replace(booleanAttrs, `%%_if(safe(function(){ return $2 })){_%%$1%%_}_%%`)
+		.replace(htmlAttr, (all, key, value) => {
+			if (['key', 'model', 'scopeid'].includes(key)) return all
 			if (value) {
 				value = value.replace(/^{|}$/g, '')
 				return `${key}="%%_=safe(function(){ return ${value} })_%%"`
-			} else {
-				return all
 			}
+			return all
 		})
 }
 
@@ -156,32 +151,27 @@ const setTemplates = ( clone, components ) => {
 }
 
 const removeTemplateTagsRecursively = (node) => {
+	const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, {
+		acceptNode: el => el.tagName === 'TEMPLATE' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+	})
 
-	// Get all <template> elements within the node
-	const templates = node.querySelectorAll('template')
-
-	templates.forEach((template) => {
+	const templatesToRemove = []
 
-		if( template.getAttribute('html-if') || template.getAttribute('html-inner') ) {
-			return
+	while (walker.nextNode()) {
+		const tpl = walker.currentNode
+		if (!tpl.hasAttribute('html-if') && !tpl.hasAttribute('html-inner')) {
+			templatesToRemove.push(tpl)
 		}
+	}
 
-		// Process any nested <template> tags within this <template> first
-		removeTemplateTagsRecursively(template.content)
-
-		// Get the parent of the <template> tag
+	for (const template of templatesToRemove) {
 		const parent = template.parentNode
+		if (!parent) continue
 
-		if (parent) {
-			// Move all child nodes from the <template>'s content to its parent
-			const content = template.content
-			while (content.firstChild) {
-				parent.insertBefore(content.firstChild, template)
-			}
-			// Remove the <template> tag itself
-			parent.removeChild(template)
-		}
-	})
+		const frag = document.createDocumentFragment()
+		frag.append(...template.content.childNodes)
+		parent.replaceChild(frag, template)
+	}
 }
 
 const wrap = (open, node, close) => {