mi-element 0.9.1 → 0.9.3

package/dist/element.js

@@ -52,13 +52,9 @@ class MiElement extends HTMLElement {
     }
   }
   connectedCallback() {
-    const {shadowRootInit: shadowRootInit, useGlobalStyles: useGlobalStyles, template: template, formAssociated: formAssociated} = this.constructor;
-    if (this.#controllers.forEach(controller => controller.hostConnected?.()), this.renderRoot = shadowRootInit ? this.shadowRoot ?? this.attachShadow(shadowRootInit) : this, 
+    const {shadowRootInit: shadowRootInit, useGlobalStyles: useGlobalStyles, template: template} = this.constructor;
+    this.#controllers.forEach(controller => controller.hostConnected?.()), this.renderRoot = shadowRootInit ? this.shadowRoot ?? this.attachShadow(shadowRootInit) : this, 
     this.addTemplate(template), useGlobalStyles && addGlobalStyles(this.renderRoot), 
-    formAssociated && this.handleFormdata) {
-      const internals = this.attachInternals();
-      internals.form && this.on('formdata', ev => this.handleFormdata(ev), internals.form);
-    }
     this.render(), this.requestUpdate();
   }
   disconnectedCallback() {

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/docs/element.md

@@ -2,17 +2,17 @@
 
 <!-- !toc (minlevel=2) -->
 
-* [constructor()](#constructor)
-* [connectedCallback()](#connectedcallback)
-* [disconnectedCallback()](#disconnectedcallback)
-* [attributeChangedCallback(name, oldValue, newValue)](#attributechangedcallbackname-oldvalue-newvalue)
-* [Update Cycle](#update-cycle)
-* [Form-Associated Elements](#form-associated-elements)
-* [render()](#render)
-* [update(changedAttributes)](#updatechangedattributes)
-* [shouldUpdate(changedAttributes)](#shouldupdatechangedattributes)
-* [on(eventName, listener, \[node\])](#oneventname-listener-node)
-* [once(eventName, listener, \[node\])](#onceeventname-listener-node)
+- [constructor()](#constructor)
+- [connectedCallback()](#connectedcallback)
+- [disconnectedCallback()](#disconnectedcallback)
+- [attributeChangedCallback(name, oldValue, newValue)](#attributechangedcallbackname-oldvalue-newvalue)
+- [Update Cycle](#update-cycle)
+- [Form-Associated Elements](#form-associated-elements)
+- [render()](#render)
+- [update(changedAttributes)](#updatechangedattributes)
+- [shouldUpdate(changedAttributes)](#shouldupdatechangedattributes)
+- [on(eventName, listener, \[node\])](#oneventname-listener-node)
+- [once(eventName, listener, \[node\])](#onceeventname-listener-node)
 
 <!-- toc! -->
 
@@ -29,16 +29,15 @@ from the `static attributes` object. From there setters and getters for property
 changes using `.[name] = newValue` instead of `setAttribute(name, newValue)` are
 applied.
 
-
 ```js
 class extends MiElement {
   /**
-   * Declare observable attributes with this getter. 
+   * Declare observable attributes with this getter.
    * Use `true` to define boolean attributes!
-   * Do not use `static attribute = { text: false }` as components attributes 
-   * will use a shallow copy only. With the getter we always get a real "deep" 
+   * Do not use `static attribute = { text: false }` as components attributes
+   * will use a shallow copy only. With the getter we always get a real "deep"
    * copy.
-   * 
+   *
    * Avoid using attributes which are HTMLElement properties e.g. `className`.
    * camelCased attributes will be made observable using its kebab-cased name.
    */
@@ -77,7 +76,7 @@ Then the first `render()` is issued with a `requestUpdate()`
 
 ```js
 class extends MiElement {
-  // { mode: 'open' } is the default shadow root option 
+  // { mode: 'open' } is the default shadow root option
   // use `null` for no shadow root or { mode: 'closed' } for closed mode
   static shadowRootInit = { mode: 'open' }
 
@@ -127,11 +126,11 @@ prevent memory leaks.
 
 See previous example.
 
-!!! INFO No need to remove internal event listeners
-
-    You don't need to remove event listeners added on the component's own
-    DOM. This includes those added in your template. Unlike external
-    event listeners, these will be garbage collected with the component.
+> ℹ️ **No need to remove internal event listeners**
+>
+> You don't need to remove event listeners added on the component's own
+> DOM. This includes those added in your template. Unlike external
+> event listeners, these will be garbage collected with the component.
 
 ## attributeChangedCallback(name, oldValue, newValue)
 
@@ -212,16 +211,18 @@ class Counter extends MiElement {
 MiElement supports [form-associated custom elements][form-associated], allowing
 your components to participate in HTML forms just like native form controls.
 
-[form-associated]: https://web.dev/articles/form-associated-custom-elements
+[form-associated]: https://web.dev/articles/more-capable-form-controls
 
 ### Declaring a Form-Associated Element
 
 Set `static formAssociated = true` on your component to enable form association:
 
 ```js
-import { define, MiElement, html } from 'mi-element'
+import { define, MiElement } from 'mi-element'
 
 class CustomInput extends MiElement {
+  #internals
+
   static formAssociated = true
 
   static get properties() {
@@ -231,41 +232,48 @@ class CustomInput extends MiElement {
     }
   }
 
-  static template = html`<input type="text" />`
-  
+  static template = `<input type="text" />`
+
   render() {
+    this.#internals = this.attachInternals()
+    // define the aria role
+    this.#internals.ariaRole = 'textbox'
+    // set the initial form value
+    this.#internals.setFormValue(this.value)
+
     this.refs = this.refsBySelector({ input: 'input' })
     this.refs.input.addEventListener('input', (ev) => {
       this.value = ev.target.value
+      // !needs a `name` attribute on the custom element
+      this.#internals.setFormValue(this.value)
+      this.checkValidity(this.value)
     })
   }
-}
 
-define('custom-input', CustomInput)
-```
-
-### Handling Form Data
-
-Implement the `handleFormdata(ev)` method to submit your component's data with
-the form:
-
-```js
-class CustomInput extends MiElement {
-  static formAssociated = true
+  checkValidity(newValue) {
+    if (newValue >= 2) {
+      this.#internals.setValidity({})
+      return
+    }
+    this.#internals.setValidity(
+      { tooSort: true },
+      'value too short',
+      this.refs.input
+    )
+    this.#internals.reportValidity()
+  }
 
-  // ...other code...
+  formResetCallback() {
+    this.value = this.refs.input.value = ''
+  }
 
-  handleFormdata(ev) {
-    // Only include data if the component has a name attribute
-    if (this.name) {
-      ev.formData.append(this.name, this.refs.input.value)
-    }
+  formStateRestoreCallback(state, reason) {
+    this.value = this.refs.input.value = state
   }
 }
-```
 
-The `handleFormdata` method is automatically called when the form is submitted or
-when `FormData` is created from the form.
+define('custom-input', CustomInput)
+```
 
 ### Usage Example
 
@@ -279,13 +287,12 @@ when `FormData` is created from the form.
 <script>
   const form = document.getElementById('my-form')
   const formData = new FormData(form)
-  
+
   console.log(formData.get('username')) // 'john'
-  console.log(formData.get('email'))    // 'john@example.com'
+  console.log(formData.get('email')) // 'john@example.com'
 </script>
 ```
 
-
 ## render()
 
 Initial rendering of the component. Try to render the component only once!
@@ -296,10 +303,10 @@ Within the `render()` method, bear in mind to:
 - Avoid producing any side effects.
 - Use only the component's properties as input.
 
-!!! WARNING XSS - Cross-Site Scripting
-    
-    Using [`innerHTML`][innerHTML] to create the components DOM is susceptible to
-    [XSS][XSS] attacks in case that user-supplied data contains valid HTML markup.
+> ⚠️ **XSS - Cross-Site Scripting**
+>
+> Using [`innerHTML`][innerHTML] to create the components DOM is susceptible to
+> [XSS][XSS] attacks in case that user-supplied data contains valid HTML markup.
 
 In all other cases you may consider the <code>html``</code> template literal or
 `escHtml()` from the "mi-element" import, which escapes user-supplied data.
@@ -403,9 +410,9 @@ import { MiElement, Signal } from 'mi-element'
 
 class Counter extends MiElement {
   static get properties() {
-    return { 
-      value: { type: Number } 
-     }
+    return {
+      value: { type: Number }
+    }
   }
 
   static template = `
@@ -419,7 +426,6 @@ class Counter extends MiElement {
     this.value = 0
   }
 
-
   render() {
     const refs = this.refsBySelector({
       button: 'button',
@@ -431,7 +437,7 @@ class Counter extends MiElement {
     })
 
     Signal.effect(() => {
-      // an update only happens if `this.value` changes; 
+      // an update only happens if `this.value` changes;
       // other attribute changes are ignored.
       refs.count.textContent = this.value
     })
@@ -447,7 +453,7 @@ disconnects.
 ```js
 class Router extends MiElement {
   render() {
-    // add event listener 'hashchange' to `window` which is disposed as soon as 
+    // add event listener 'hashchange' to `window` which is disposed as soon as
     // the component unmounts
     this.on('hashchange', this.update, window)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.9.1",
+  "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/element.js

@@ -160,8 +160,7 @@ export class MiElement extends HTMLElement {
    */
   connectedCallback() {
     // @ts-expect-error
-    const { shadowRootInit, useGlobalStyles, template, formAssociated } =
-      this.constructor
+    const { shadowRootInit, useGlobalStyles, template } = this.constructor
     // connect all controllers
     this.#controllers.forEach((controller) => controller.hostConnected?.())
     this.renderRoot = shadowRootInit
@@ -171,31 +170,6 @@ export class MiElement extends HTMLElement {
     if (useGlobalStyles) {
       addGlobalStyles(this.renderRoot)
     }
-    /**
-     * handle formdata event if `handleFormdata` method is defined on the component.
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event
-     * ```js
-     * class MyElement extends MiElement {
-     *   static formAssociated = true // required to receive formdata event
-     *   handleFormdata(ev) {
-     *     const { name, value } = this.refs.input
-     *     ev.formData.append(name, value)
-     *   }
-     *   render() {
-     *     this.renderRoot.innerHTML = html`<input name="${this.name}" value="${this.value}">`
-     *     this.refs = { input: this.renderRoot.querySelector('input') }
-     *   }
-     * }
-     * ```
-     */
-    // @ts-expect-error
-    if (formAssociated && this.handleFormdata) {
-      const internals = this.attachInternals()
-      if (internals.form) {
-        // @ts-expect-error
-        this.on('formdata', (ev) => this.handleFormdata(ev), internals.form)
-      }
-    }
     this.render() // initial render
     this.requestUpdate() // request initial update
   }

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;