mi-element 0.9.2 → 0.9.3

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;
   }
 };
 

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.3",
   "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
   }
 }
 

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;