mi-element 0.9.4 → 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)), OBJECT = 'object', FUNCTION = 'function', 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,10 +46,9 @@ 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;
 }
 
@@ -56,24 +56,24 @@ const REF = 'ref', REF_Q = '[ref]';
 
 function renderAttrs(node, handlers = {}, refs = {}) {
   if (node.nodeType === Node.ELEMENT_NODE) {
-    const rmFns = [];
-    for (let attr of node.attributes) {
-      const startsWith = attr.name[0], name = attr.name.slice(1);
+    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 ('?' === startsWith) toJson(attr.value) ? node.setAttribute(name, '') : node.removeAttribute(name), 
+      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 && typeof obj === OBJECT) for (const [k, v] of Object.entries(obj)) node[k] = v;
+        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) {
+      } 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, e => fn(e)) : typeof handlers[handlerName] === FUNCTION && node.addEventListener(name, e => handlers[handlerName](e)), 
+        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 && rmFns.push([ node, attr.name ]);
+      rm && rmAttrs.push(attr.name);
     }
-    rmFns.forEach(([node, name]) => node.removeAttribute(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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.9.4",
+  "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 '&'
@@ -90,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)
   }
@@ -120,20 +123,18 @@ 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
@@ -162,12 +163,15 @@ const REF_Q = '[ref]'
  */
 export function renderAttrs(node, handlers = {}, refs = {}) {
   if (node.nodeType === Node.ELEMENT_NODE) {
-    const rmFns = []
-    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, '')
@@ -184,32 +188,32 @@ export function renderAttrs(node, handlers = {}, refs = {}) {
           }
         }
         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))
+          node.addEventListener(name, fn)
         } else if (typeof handlers[handlerName] === FUNCTION) {
-          node.addEventListener(name, (e) => handlers[handlerName](e))
+          node.addEventListener(name, handlers[handlerName])
         }
         rm = 1
       } 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) {
-        rmFns.push([node, attr.name])
+        rmAttrs.push(attr.name)
       }
     }
-    // @ts-expect-error
-    rmFns.forEach(([node, name]) => node.removeAttribute(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)) {

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