mi-element 0.9.3 → 0.9.5

package/dist/html.js

@@ -33,9 +33,10 @@ const unsafeHtml = str => new UnsafeHtml(str), escMap = {
   '>': '>',
   '"': '"',
   "'": '''
-}, esc = string => string.replace(/[&<>"']/g, tag => escMap[tag]), escHtml = string => string instanceof UnsafeHtml ? string : unsafeHtml(esc('' + string)), escValue = any => {
+}, escRe = /[&<>"']/g, esc = string => string.replace(escRe, tag => escMap[tag]), escHtml = string => string instanceof UnsafeHtml ? string : unsafeHtml(esc('' + string)), escValue = any => {
   if (any instanceof UnsafeHtml) return any;
-  if ([ 'object', 'function' ].includes(typeof any)) {
+  const t = typeof any;
+  if ("object" === t || "function" === t) {
     const key = globalRenderCache.set(any);
     return unsafeHtml(key);
   }
@@ -45,33 +46,44 @@ const unsafeHtml = str => new UnsafeHtml(str), escMap = {
 }, ...values.map(val => Array.isArray(val) ? val.map(escValue).join('') : escValue(val))));
 
 function render(node, template, handlers = {}) {
-  const refs = {}, div = document.createElement('div');
-  div.innerHTML = template.toString();
-  for (let child of Array.from(div.children)) renderAttrs(child, handlers, refs), 
-  node.appendChild(child);
+  const refs = {};
+  node.innerHTML = template.toString();
+  for (let i = 0, l = node.children.length; i < l; i++) renderAttrs(node.children[i], handlers, refs);
   return refs;
 }
 
+const REF = 'ref', REF_Q = '[ref]';
+
 function renderAttrs(node, handlers = {}, refs = {}) {
-  if (node.nodeType === Node.ELEMENT_NODE) for (let attr of node.attributes) {
-    const startsWith = attr.name[0], name = attr.name.slice(1);
-    let rm = 0;
-    if ('?' === startsWith) toJson(attr.value) ? node.setAttribute(name, '') : node.removeAttribute(name), 
-    rm = 1; else if ('...' === attr.name) {
-      const obj = globalRenderCache.get(attr.value);
-      if (obj && 'object' == typeof obj) for (const [k, v] of Object.entries(obj)) node[k] = v;
-      rm = 1;
-    } else if ('.' === startsWith) node[name] = globalRenderCache.get(attr.value) ?? attr.value, 
-    rm = 1; else if ('@' === startsWith) {
-      const handlerName = attr.value, fn = globalRenderCache.get(handlerName);
-      fn ? node.addEventListener(name, e => fn(e)) : 'function' == typeof handlers[handlerName] && node.addEventListener(name, e => handlers[handlerName](e)), 
-      rm = 1;
-    } else 'ref' === attr.name && (refs[attr.value] = node, rm = 1);
-    rm && requestAnimationFrame(() => {
-      node.removeAttribute(attr.name);
-    });
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const rmAttrs = [], attrs = node.attributes;
+    for (let i = 0, l = attrs.length; i < l; i++) {
+      const attr = attrs[i], attrName = attr.name, code = attrName.charCodeAt(0), name = attrName.slice(1);
+      let rm = 0;
+      if (63 === code) toJson(attr.value) ? node.setAttribute(name, '') : node.removeAttribute(name), 
+      rm = 1; else if ('...' === attr.name) {
+        const obj = globalRenderCache.get(attr.value);
+        if (obj && "object" == typeof obj) for (const [k, v] of Object.entries(obj)) node[k] = v;
+        rm = 1;
+      } else if (46 === code) node[name] = globalRenderCache.get(attr.value) ?? attr.value, 
+      rm = 1; else if (64 === code) {
+        const handlerName = attr.value, fn = globalRenderCache.get(handlerName);
+        fn ? node.addEventListener(name, fn) : "function" == typeof handlers[handlerName] && node.addEventListener(name, handlers[handlerName]), 
+        rm = 1;
+      } else attr.name === REF && (refs[attr.value] = node, rm = 1);
+      rm && rmAttrs.push(attr.name);
+    }
+    for (let i = 0, l = rmAttrs.length; i < l; i++) node.removeAttribute(rmAttrs[i]);
+  }
+  if (customElements.get(node.localName)) {
+    const q = node.querySelectorAll(REF_Q);
+    for (let el of q) {
+      const refName = el.getAttribute(REF);
+      refName && !refs[refName] && (refs[refName] = el);
+    }
+    return refs;
   }
-  if (!node.children?.length || customElements.get(node.localName)) return refs;
+  if (!node.children?.length) return refs;
   for (let child of Array.from(node.children)) renderAttrs(child, handlers, refs);
   return refs;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "Build lightweight reactive micro web-components",
   "keywords": [],
   "homepage": "https://github.com/commenthol/mi-element/tree/main/packages/mi-element#readme",

package/src/html.js

@@ -63,7 +63,9 @@ const escMap = {
   "'": '''
 }
 
-const esc = (string) => string.replace(/[&<>"']/g, (tag) => escMap[tag])
+const escRe = /[&<>"']/g
+
+const esc = (string) => string.replace(escRe, (tag) => escMap[tag])
 
 /**
  * escape HTML and prevent double escaping of '&'
@@ -77,6 +79,9 @@ export const escHtml = (string) =>
   // @ts-expect-error
   string instanceof UnsafeHtml ? string : unsafeHtml(esc('' + string))
 
+const OBJECT = 'object'
+const FUNCTION = 'function'
+
 /**
  * escape any value for HTML context; objects and functions are stored in the render cache
  * @param {any} any
@@ -87,7 +92,8 @@ const escValue = (any) => {
     // @ts-expect-error
     return any
   }
-  if (['object', 'function'].includes(typeof any)) {
+  const t = typeof any
+  if (t === OBJECT || t === FUNCTION) {
     const key = globalRenderCache.set(any)
     return unsafeHtml(key)
   }
@@ -117,25 +123,26 @@ export const html = (strings, ...values) =>
 /**
  * render HTML template into given node with support for special attributes
  *
- * @param {Element} node to append rendered content
+ * @param {Element} node to render content
  * @param {string|UnsafeHtml} template HTML template string
  * @param {Record<string, Function>|HTMLElement} [handlers={}] event handlers or HTMLElement for method lookup
  * @returns {Record<string, Element>} references collected
  */
 export function render(node, template, handlers = {}) {
   const refs = {}
-  const div = document.createElement('div')
-  div.innerHTML = template.toString()
-  // don't understand why `for (let child of div.children)` does not work here
-  for (let child of Array.from(div.children)) {
+  node.innerHTML = template.toString()
+  for (let i = 0, l = node.children.length; i < l; i++) {
+    const child = node.children[i]
     // @ts-expect-error
     renderAttrs(child, handlers, refs)
-    node.appendChild(child)
   }
   // @ts-expect-error
   return refs
 }
 
+const REF = 'ref'
+const REF_Q = '[ref]'
+
 /**
  * Post-processing of rendered nodes to handle special attributes:
  *
@@ -156,11 +163,15 @@ export function render(node, template, handlers = {}) {
  */
 export function renderAttrs(node, handlers = {}, refs = {}) {
   if (node.nodeType === Node.ELEMENT_NODE) {
-    for (let attr of node.attributes) {
-      const startsWith = attr.name[0]
-      const name = attr.name.slice(1)
+    const rmAttrs = []
+    const attrs = node.attributes
+    for (let i = 0, l = attrs.length; i < l; i++) {
+      const attr = attrs[i]
+      const attrName = attr.name
+      const code = attrName.charCodeAt(0)
+      const name = attrName.slice(1)
       let rm = 0
-      if (startsWith === '?') {
+      if (code === 63 /* '?' */) {
         // boolean attributes
         if (toJson(attr.value)) {
           node.setAttribute(name, '')
@@ -171,41 +182,52 @@ export function renderAttrs(node, handlers = {}, refs = {}) {
       } else if (attr.name === '...') {
         // spread attribute
         const obj = globalRenderCache.get(attr.value)
-        if (obj && typeof obj === 'object') {
+        if (obj && typeof obj === OBJECT) {
           for (const [k, v] of Object.entries(obj)) {
             node[k] = v
           }
         }
         rm = 1
-      } else if (startsWith === '.') {
+      } else if (code === 46 /* '.' */) {
         // property binding
         node[name] = globalRenderCache.get(attr.value) ?? attr.value
         rm = 1
-      } else if (startsWith === '@') {
+      } else if (code === 64 /* '@' */) {
         // event listener
         const handlerName = attr.value
         const fn = globalRenderCache.get(handlerName)
         if (fn) {
-          node.addEventListener(name, (e) => fn(e))
-        } else if (typeof handlers[handlerName] === 'function') {
-          node.addEventListener(name, (e) => handlers[handlerName](e))
+          node.addEventListener(name, fn)
+        } else if (typeof handlers[handlerName] === FUNCTION) {
+          node.addEventListener(name, handlers[handlerName])
         }
         rm = 1
-      } else if (attr.name === 'ref') {
+      } else if (attr.name === REF) {
         // element reference - remove as well to prevent collection by other processors
-        const refName = attr.value
-        refs[refName] = node
+        refs[attr.value] = node
         rm = 1
       }
       if (rm) {
-        requestAnimationFrame(() => {
-          node.removeAttribute(attr.name)
-        })
+        rmAttrs.push(attr.name)
       }
     }
+    for (let i = 0, l = rmAttrs.length; i < l; i++) {
+      node.removeAttribute(rmAttrs[i])
+    }
+  }
+  // early abort if custom element but resolve slotted refs
+  if (customElements.get(node.localName)) {
+    const q = node.querySelectorAll(REF_Q)
+    for (let el of q) {
+      const refName = el.getAttribute(REF)
+      if (refName && !refs[refName]) {
+        refs[refName] = el
+      }
+    }
+    return refs
   }
-  // early abort if no children or custom element
-  if (!node.children?.length || customElements.get(node.localName)) {
+  // early abort if no children
+  if (!node.children?.length) {
     return refs
   }
   for (let child of Array.from(node.children)) {

package/types/html.d.ts

@@ -1,7 +1,7 @@
 /**
  * render HTML template into given node with support for special attributes
  *
- * @param {Element} node to append rendered content
+ * @param {Element} node to render content
  * @param {string|UnsafeHtml} template HTML template string
  * @param {Record<string, Function>|HTMLElement} [handlers={}] event handlers or HTMLElement for method lookup
  * @returns {Record<string, Element>} references collected