mi-element 0.9.2 → 0.9.4

package/dist/html.js

@@ -2,21 +2,26 @@ import { toJson } from './utils.js';
 
 const globalRenderCache = new class {
   cnt=0;
-  map=new Map;
-  cache=new WeakMap;
+  cache=new Map;
+  last=0;
+  get size() {
+    return this.cache.size;
+  }
   _inc() {
     return this.cnt = 268435455 & ++this.cnt, this.cnt;
   }
   clear() {
-    this.cnt = 0, this.map.clear();
+    this.cnt = 0, this.cache.clear();
   }
   set(value) {
-    const key = '__rc:' + this._inc().toString(36), ref = {};
-    return this.map.set(key, ref), this.cache.set(ref, value), key;
+    const now = Date.now();
+    this.last < now && this.cache.clear(), this.last = now + 5e3;
+    const key = '__rc:' + this._inc().toString(36);
+    return this.cache.set(key, value), key;
   }
   get(key) {
-    const ref = this.map.get(key);
-    return this.map.delete(key), this.cache.get(ref);
+    const value = this.cache.get(key);
+    return this.cache.delete(key), value;
   }
 };
 
@@ -28,9 +33,9 @@ const unsafeHtml = str => new UnsafeHtml(str), escMap = {
   '>': '&gt;',
   '"': '&quot;',
   "'": '&#39;'
-}, esc = string => string.replace(/[&<>"']/g, tag => escMap[tag]), escHtml = string => string instanceof UnsafeHtml ? string : unsafeHtml(esc('' + string)), escValue = any => {
+}, esc = string => string.replace(/[&<>"']/g, tag => escMap[tag]), escHtml = string => string instanceof UnsafeHtml ? string : unsafeHtml(esc('' + string)), OBJECT = 'object', FUNCTION = 'function', escValue = any => {
   if (any instanceof UnsafeHtml) return any;
-  if ([ 'object', 'function' ].includes(typeof any)) {
+  if ([ OBJECT, FUNCTION ].includes(typeof any)) {
     const key = globalRenderCache.set(any);
     return unsafeHtml(key);
   }
@@ -47,26 +52,38 @@ function render(node, template, handlers = {}) {
   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 rmFns = [];
+    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 && typeof obj === OBJECT) 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)) : typeof handlers[handlerName] === FUNCTION && node.addEventListener(name, e => handlers[handlerName](e)), 
+        rm = 1;
+      } else attr.name === REF && (refs[attr.value] = node, rm = 1);
+      rm && rmFns.push([ node, attr.name ]);
+    }
+    rmFns.forEach(([node, name]) => node.removeAttribute(name));
+  }
+  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/dist/index.js

@@ -8,6 +8,6 @@ export { refsBySelector } from './refs.js';
 
 export { Store } from './store.js';
 
-export { addGlobalStyles, classNames, css, styleMap } from './styling.js';
+export { addGlobalStyles, classNames, css, escCss, styleMap, unsafeCss } from './styling.js';
 
 export { default as Signal } from 'mi-signal';

package/dist/styling.js

@@ -3,7 +3,7 @@ import { camelToKebabCase } from './case.js';
 const classNames = (...args) => {
   const classList = [];
   return args.forEach(arg => {
-    arg && ('string' == typeof arg ? classList.push(arg) : Array.isArray(arg) ? classList.push(classNames(...arg)) : 'object' == typeof arg && Object.entries(arg).forEach(([key, value]) => {
+    arg && ('string' == typeof arg ? classList.push(arg) : 'object' == typeof arg && Object.entries(arg).forEach(([key, value]) => {
       value && classList.push(key);
     }));
   }), classList.join(' ');
@@ -26,8 +26,14 @@ function addGlobalStyles(renderRoot) {
   })), globalSheets));
 }
 
-const css = (strings, ...values) => String.raw({
+class UnsafeCss extends String {}
+
+const unsafeCss = str => new UnsafeCss(str), escMap = {
+  '&': '\\26 ',
+  '<': '\\3c ',
+  '>': '\\3e '
+}, escCss = string => string instanceof UnsafeCss ? string : unsafeCss((string => string.replace(/[&<>]/g, tag => escMap[tag]))('' + string)), css = (strings, ...values) => String.raw({
   raw: strings
-}, ...values);
+}, ...values.map(escCss));
 
-export { addGlobalStyles, classNames, css, styleMap };
+export { addGlobalStyles, classNames, css, escCss, styleMap, unsafeCss };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "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

@@ -5,8 +5,12 @@ import { toJson } from './utils.js'
  */
 class RenderCache {
   cnt = 0
-  map = new Map()
-  cache = new WeakMap()
+  cache = new Map()
+  last = 0
+
+  get size() {
+    return this.cache.size
+  }
 
   _inc() {
     this.cnt = ++this.cnt & 0xfffffff
@@ -15,21 +19,24 @@ class RenderCache {
 
   clear() {
     this.cnt = 0
-    this.map.clear()
+    this.cache.clear()
   }
 
   set(value) {
+    const now = Date.now()
+    if (this.last < now) {
+      this.cache.clear()
+    }
+    this.last = now + 5e3
     const key = '__rc:' + this._inc().toString(36)
-    const ref = {}
-    this.map.set(key, ref)
-    this.cache.set(ref, value)
+    this.cache.set(key, value)
     return key
   }
 
   get(key) {
-    const ref = this.map.get(key)
-    this.map.delete(key)
-    return this.cache.get(ref)
+    const value = this.cache.get(key)
+    this.cache.delete(key)
+    return value
   }
 }
 
@@ -70,6 +77,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
@@ -80,7 +90,7 @@ const escValue = (any) => {
     // @ts-expect-error
     return any
   }
-  if (['object', 'function'].includes(typeof any)) {
+  if ([OBJECT, FUNCTION].includes(typeof any)) {
     const key = globalRenderCache.set(any)
     return unsafeHtml(key)
   }
@@ -129,6 +139,9 @@ export function render(node, template, handlers = {}) {
   return refs
 }
 
+const REF = 'ref'
+const REF_Q = '[ref]'
+
 /**
  * Post-processing of rendered nodes to handle special attributes:
  *
@@ -149,6 +162,7 @@ export function render(node, template, handlers = {}) {
  */
 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)
@@ -164,7 +178,7 @@ 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
           }
@@ -180,25 +194,36 @@ export function renderAttrs(node, handlers = {}, refs = {}) {
         const fn = globalRenderCache.get(handlerName)
         if (fn) {
           node.addEventListener(name, (e) => fn(e))
-        } else if (typeof handlers[handlerName] === 'function') {
+        } else if (typeof handlers[handlerName] === FUNCTION) {
           node.addEventListener(name, (e) => handlers[handlerName](e))
         }
         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
         rm = 1
       }
       if (rm) {
-        requestAnimationFrame(() => {
-          node.removeAttribute(attr.name)
-        })
+        rmFns.push([node, attr.name])
       }
     }
+    // @ts-expect-error
+    rmFns.forEach(([node, name]) => node.removeAttribute(name))
+  }
+  // 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/src/index.js

@@ -10,11 +10,18 @@ export {
  * @typedef {import('./element.js').HostController} HostController
  */
 export { MiElement, convertType, define } from './element.js'
-export { unsafeHtml, html, escHtml, render, renderAttrs } from './html.js'
+export { html, unsafeHtml, escHtml, render, renderAttrs } from './html.js'
 export { refsBySelector } from './refs.js'
 /**
  * @typedef {import('./store.js').Action} Action
  */
 export { Store } from './store.js'
-export { classNames, styleMap, addGlobalStyles, css } from './styling.js'
+export {
+  classNames,
+  styleMap,
+  addGlobalStyles,
+  css,
+  unsafeCss,
+  escCss
+} from './styling.js'
 export { default as Signal } from 'mi-signal'

package/src/styling.js

@@ -11,8 +11,6 @@ export const classNames = (...args) => {
     if (!arg) return
     if (typeof arg === 'string') {
       classList.push(arg)
-    } else if (Array.isArray(arg)) {
-      classList.push(classNames(...arg))
     } else if (typeof arg === 'object') {
       Object.entries(arg).forEach(([key, value]) => {
         if (value) {
@@ -77,9 +75,41 @@ export function addGlobalStyles(renderRoot) {
   renderRoot.adoptedStyleSheets.push(...getGlobalStyleSheets())
 }
 
+/**
+ * A helper class to avoid double escaping of HTML strings
+ */
+class UnsafeCss extends String {}
+
+/**
+ * tag a string as css for not to be escaped
+ * @param {string} str
+ * @returns {string}
+ */
+// @ts-expect-error
+export const unsafeCss = (str) => new UnsafeCss(str)
+
+const escMap = {
+  '&': '\\26 ',
+  '<': '\\3c ',
+  '>': '\\3e '
+}
+
+const esc = (string) => string.replace(/[&<>]/g, (tag) => escMap[tag])
+
+/**
+ * @see https://mathiasbynens.be/notes/css-escapes
+ * Escape a value interpolated into a css tagged template literal.
+ * Prevents injection of closing style tags or unexpected CSS constructs.
+ * @param {*} string
+ * @returns {string}
+ */
+export const escCss = (string) =>
+  // @ts-expect-error
+  string instanceof UnsafeCss ? string : unsafeCss(esc('' + string))
+
 /**
  * Helper literal to show css styles in JS e.g. with
  * https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html
  */
 export const css = (strings, ...values) =>
-  String.raw({ raw: strings }, ...values)
+  String.raw({ raw: strings }, ...values.map(escCss))

package/types/html.d.ts

@@ -40,8 +40,9 @@ declare class UnsafeHtml extends String {
  */
 declare class RenderCache {
     cnt: number;
-    map: Map<any, any>;
-    cache: WeakMap<WeakKey, any>;
+    cache: Map<any, any>;
+    last: number;
+    get size(): number;
     _inc(): number;
     clear(): void;
     set(value: any): string;

package/types/index.d.ts

@@ -6,5 +6,5 @@ export type HostController = import("./element.js").HostController;
 export type Action = import("./store.js").Action;
 export { ContextConsumer, ContextProvider, ContextRequestEvent } from "./context.js";
 export { MiElement, convertType, define } from "./element.js";
-export { unsafeHtml, html, escHtml, render, renderAttrs } from "./html.js";
-export { classNames, styleMap, addGlobalStyles, css } from "./styling.js";
+export { html, unsafeHtml, escHtml, render, renderAttrs } from "./html.js";
+export { classNames, styleMap, addGlobalStyles, css, unsafeCss, escCss } from "./styling.js";

package/types/styling.d.ts

@@ -15,4 +15,6 @@ export function styleMap(map: {
 }, options?: {
     unit?: string | undefined;
 }): string;
+export function unsafeCss(str: string): string;
+export function escCss(string: any): string;
 export function css(strings: any, ...values: any[]): string;