mi-element 0.6.7 → 0.8.0

package/README.md

@@ -24,7 +24,7 @@ setting objects or functions either through `el.setAttribute(name, value)` or
 properties `el[name] = value`.
 
 Furthermore all observed attributes have a reactive behavior through the use of
-signals and effects (loosely) following the 
+signals and effects (loosely) following the
 [TC39 JavaScript Signals standard proposal][].
 
 # Usage
@@ -38,7 +38,8 @@ npm i mi-element
 ```js
 /** @file ./mi-counter.js */
 
-import { MiElement, define, refsById, Signal } from 'mi-element'
+import { MiElement, define, Signal } from 'mi-element'
+const { effect, createSignal } = Signal
 
 // define your Component
 class MiCounter extends MiElement {
@@ -46,25 +47,27 @@ class MiCounter extends MiElement {
   <style>
     :host { font-size: 1.25rem; }
   </style>
-  <div id aria-label="Counter value">0</div>
-  <button id="increment" aria-label="Increment counter"> + </button>
+  <div aria-label="Counter value">0</div>
+  <button aria-label="Increment counter"> + </button>
   `
 
-  static get attributes() {
+  static get properties() {
     // declare reactive attribute(s)
-    return { count: 0 }
+    return { count: { type: Number, initial: 0 } }
   }
 
+  static createSignal = createSignal
+
   // called by connectedCallback()
   render() {
     // gather refs from template (here by id)
-    this.refs = refsById(this.renderRoot)
+    this.refs = this.refsBySelector({ increment: 'button', div: 'div' })
     // apply event listeners
     this.refs.increment.addEventListener('click', () => {
       // change observed and reactive attribute...
       this.count++
     })
-    Signal.effect(() => {
+    effect(() => {
       // ...triggers update on every change of `this.count`
       this.refs.div.textContent = this.count
     })
@@ -91,6 +94,7 @@ In `./example` you'll find a working sample of a Todo App. Check it out with
 # Documentation
 
 - [element][docs-element] mi-element's lifecycle
+- [render][docs-render] mi-elements html template literal and render function
 - [controller][docs-controller] adding controllers to mi-element to hook into the lifecycle
 - [signal][docs-signal] Signals and effect for reactive behavior
 - [store][docs-store] Manage shared state in an application
@@ -103,6 +107,7 @@ In `./example` you'll find a working sample of a Todo App. Check it out with
 MIT licensed
 
 [docs-element]: https://github.com/commenthol/mi-element/tree/main/packages/mi-element/docs/element.md
+[docs-render]: https://github.com/commenthol/mi-element/tree/main/packages/mi-element/docs/render.md
 [docs-controller]: https://github.com/commenthol/mi-element/tree/main/packages/mi-element/docs/controller.md
 [docs-context]: https://github.com/commenthol/mi-element/tree/main/packages/mi-element/docs/context.md
 [docs-signal]: https://github.com/commenthol/mi-element/tree/main/packages/mi-element/docs/signal.md
@@ -114,7 +119,6 @@ MIT licensed
 [Web Components]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks
 [TC39 JavaScript Signals standard proposal]: https://github.com/tc39/proposal-signals
 [krausest/js-framework-benchmark]: https://github.com/krausest/js-framework-benchmark
-
 [npm-badge]: https://badgen.net/npm/v/mi-element
 [npm]: https://www.npmjs.com/package/mi-element
 [types-badge]: https://badgen.net/npm/types/mi-element

package/dist/context.js

@@ -17,6 +17,12 @@ class ContextProvider {
   get() {
     return this.state.get();
   }
+  set value(newValue) {
+    this.set(newValue);
+  }
+  get value() {
+    return this.get();
+  }
   onContextRequest=ev => {
     if (ev.context !== this.context) return;
     let unsubscribe;

package/dist/element.js

@@ -1,86 +1,82 @@
-import { camelToKebabCase } from './case.js';
-
 import { createSignal } from 'mi-signal';
 
+import { kebabToCamelCase, camelToKebabCase } from './case.js';
+
+import { addGlobalStyles } from './styling.js';
+
+import { refsBySelector } from './refs.js';
+
+import { toNumber, toJson } from './utils.js';
+
+const nameMap = {
+  class: 'className',
+  for: 'htmlFor'
+};
+
 class MiElement extends HTMLElement {
-  #attr={};
-  #attrLc=new Map;
-  #types=new Map;
+  _props={};
+  #changedProps={};
   #disposers=new Set;
   #controllers=new Set;
-  #changedAttr={};
-  #dedupe=!1;
-  static shadowRootOptions={
-    mode: 'open'
-  };
-  static template;
-  static get attributes() {
-    return {};
+  #updateRequested=!1;
+  static get shadowRootInit() {
+    return {
+      mode: 'open'
+    };
   }
-  static get properties() {
-    return {};
+  static template;
+  static get properties() {}
+  static observedAttributes=[];
+  static styles='';
+  static get useGlobalStyles() {
+    return !1;
   }
+  static createSignal=createSignal;
   constructor() {
-    super(), this.#observedAttributes(this.constructor.attributes), this.#observedProperties(this.constructor.properties);
-  }
-  #observe(name, initialValue) {
-    this.#attr[name] = createSignal(initialValue), Object.defineProperty(this, name, {
-      enumerable: !0,
-      get() {
-        return this.#attr[name].get();
-      },
-      set(newValue) {
-        const oldValue = this.#attr[name].get();
-        oldValue !== newValue && (this.#attr[name].set(newValue), this.#changedAttr[name] = oldValue, 
-        this.requestUpdate());
-      }
-    });
-  }
-  #observedAttributes(attributes = {}) {
-    for (const [name, value] of Object.entries(attributes)) {
-      const initial = initialValueType(value);
-      this.#types.set(name, initial.type), this.#attrLc.set(name.toLowerCase(), name), 
-      this.#attrLc.set(camelToKebabCase(name), name), this.#observe(name, initial.value);
+    super();
+    const {createSignal: createSignal, properties: properties} = this.constructor;
+    for (const [name, {initial: initial}] of Object.entries(properties)) {
+      const descriptor = Object.getOwnPropertyDescriptor(this.constructor.prototype, name);
+      createSignal && (this._props[name] = createSignal()), Object.defineProperty(this, name, {
+        get() {
+          return descriptor?.get ? descriptor.get.call(this) : createSignal ? this._props[name].value : this._props[name];
+        },
+        set(value) {
+          const oldValue = this[name];
+          descriptor?.set ? descriptor.set.call(this, value) : createSignal ? this._props[name].value = value : this._props[name] = value, 
+          oldValue !== this[name] && this.requestUpdate({
+            [name]: value
+          });
+        }
+      }), this[name] = initial;
     }
   }
-  #observedProperties(properties = {}) {
-    for (const [name, value] of Object.entries(properties)) this.#attrLc.has(name) || name in this.#attr || this.#observe(name, value);
-  }
-  #getName(name) {
-    return this.#attrLc.get(name) || name;
-  }
-  #getType(name) {
-    return this.#types.get(name);
-  }
   connectedCallback() {
     this.#controllers.forEach(controller => controller.hostConnected?.());
-    const {shadowRootOptions: shadowRootOptions, template: template} = this.constructor;
-    this.renderRoot = shadowRootOptions ? this.shadowRoot ?? this.attachShadow(shadowRootOptions) : this, 
-    this.addTemplate(template), this.render(), this.requestUpdate();
+    const {shadowRootInit: shadowRootInit, useGlobalStyles: useGlobalStyles, template: template} = this.constructor;
+    this.renderRoot = shadowRootInit ? this.shadowRoot ?? this.attachShadow(shadowRootInit) : this, 
+    this.addTemplate(template), useGlobalStyles && addGlobalStyles(this.renderRoot), 
+    this.render(), this.requestUpdate();
   }
   disconnectedCallback() {
     this.#disposers.forEach(remover => remover()), this.#controllers.forEach(controller => controller.hostDisconnected?.());
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    const attr = this.#getName(name), type = this.#getType(attr);
-    this.#changedAttr[attr] = this[attr], this[attr] = convertType(newValue, type), 
-    'Boolean' === type && 'false' === newValue && this.removeAttribute(name), this.requestUpdate();
-  }
-  setAttribute(name, newValue) {
-    const attr = this.#getName(name);
-    if (!(attr in this.#attr)) return;
-    const type = this.#getType(attr);
-    'Boolean' === type ? !0 === newValue || '' === newValue ? super.setAttribute(name, '') : super.removeAttribute(name) : [ 'String', 'Number' ].includes(type ?? '') || !0 === newValue ? super.setAttribute(name, newValue) : (this.#changedAttr[attr] = this[attr], 
-    this[attr] = newValue, this.requestUpdate());
-  }
-  shouldUpdate(_changedAttributes) {
-    return !0;
-  }
-  requestUpdate() {
-    !this.#dedupe && this.isConnected && (this.#dedupe = !0, requestAnimationFrame(() => {
-      this.#dedupe = !1;
-      const _changedAttributes = this.#changedAttr;
-      this.#changedAttr = {}, this.shouldUpdate(_changedAttributes) && this.update(_changedAttributes);
+  attributeChangedCallback(name, _oldValue, newValue) {
+    const camelName = nameMap[name] ?? kebabToCamelCase(name), properties = this.constructor?.properties, {type: type} = properties?.[camelName] ?? {}, coercedValue = convertType(newValue, type);
+    if (name.startsWith('data-')) {
+      const datasetName = kebabToCamelCase(name.substring(5));
+      datasetName && (this.dataset[datasetName] = coercedValue);
+    }
+    this[camelName] = coercedValue;
+  }
+  requestUpdate(changedProps) {
+    this.#changedProps = {
+      ...this.#changedProps,
+      ...changedProps
+    }, !this.#updateRequested && this.renderRoot && (this.#updateRequested = !0, window.requestAnimationFrame(() => {
+      this.#updateRequested = !1;
+      const changedProps = this.#changedProps;
+      this.#changedProps = {}, this.update(changedProps);
     }));
   }
   addTemplate(template) {
@@ -90,7 +86,7 @@ class MiElement extends HTMLElement {
     }
   }
   render() {}
-  update(_changedAttributes) {}
+  update(_changedProps) {}
   on(eventName, listener, node = this) {
     node.addEventListener(eventName, listener), this.#disposers.add(() => node.removeEventListener(eventName, listener));
   }
@@ -111,53 +107,33 @@ class MiElement extends HTMLElement {
   removeController(controller) {
     this.#controllers.delete(controller);
   }
+  refsBySelector(selectors) {
+    return refsBySelector(this.renderRoot, selectors);
+  }
 }
 
-const define = (name, element, options) => {
-  element.observedAttributes = (element.observedAttributes || Object.keys(element.attributes || [])).map(attr => attr.toLowerCase()), 
-  renderTemplate(element), window.customElements.define(name, element, options);
+const define = (tagName, elementClass, options) => {
+  if (customElements.get(tagName)) return;
+  const {usedCssPrefix: usedCssPrefix = "", cssPrefix: cssPrefix = "", styles: styles} = options || {};
+  if (elementClass.properties) {
+    const observedAttrs = [];
+    for (const [name, {attribute: attribute = !0}] of Object.entries(elementClass.properties)) attribute && observedAttrs.push(camelToKebabCase(name));
+    Object.defineProperty(elementClass, 'observedAttributes', {
+      get: () => observedAttrs
+    });
+  } else if (elementClass.observedAttributes) {
+    const properties = elementClass.observedAttributes.reduce((acc, attr) => (acc[kebabToCamelCase(attr)] = {}, 
+    acc), {});
+    Object.defineProperty(elementClass, 'properties', {
+      get: () => properties
+    });
+  }
+  elementClass.styles && (elementClass.styles = styles || (usedCssPrefix === cssPrefix ? elementClass.styles : elementClass.styles.replaceAll(`--${usedCssPrefix}-`, cssPrefix))), 
+  renderTemplate(elementClass), window.customElements.define(tagName, elementClass);
 }, renderTemplate = element => {
-  if (element.template instanceof HTMLTemplateElement) return;
+  if (!element.template || element.template instanceof HTMLTemplateElement) return;
   const el = document.createElement('template');
-  el.innerHTML = element.template, element.template = el;
-}, initialValueType = value => {
-  switch (value) {
-   case Boolean:
-    return {
-      value: void 0,
-      type: 'Boolean'
-    };
-
-   case Number:
-    return {
-      value: void 0,
-      type: 'Number'
-    };
-
-   case String:
-    return {
-      value: void 0,
-      type: 'String'
-    };
-
-   default:
-    return {
-      value: value,
-      type: toString.call(value).slice(8, -1)
-    };
-  }
-}, convertType = (any, type) => {
-  switch (type) {
-   case 'Number':
-    return (any => {
-      const n = Number(any);
-      return isNaN(n) ? any : n;
-    })(any);
-
-   case 'Boolean':
-    return 'false' !== any && ('' === any || !!any);
-  }
-  return any;
-};
+  el.innerHTML = element.template || '', element.template = el;
+}, convertType = (value, type) => type === Boolean ? null !== value : type === Number ? toNumber(value) : type === Array ? toJson(value) ?? value.split(',').map(v => v.trim()) : type === Object ? toJson(value) : value;
 
 export { MiElement, convertType, define };

package/dist/html.js

@@ -0,0 +1,74 @@
+import { toJson } from './utils.js';
+
+const globalRenderCache = new class {
+  cnt=0;
+  map=new Map;
+  cache=new WeakMap;
+  _inc() {
+    return this.cnt = 268435455 & ++this.cnt, this.cnt;
+  }
+  clear() {
+    this.cnt = 0, this.map.clear();
+  }
+  set(value) {
+    const key = '__rc:' + this._inc().toString(36), ref = {};
+    return this.map.set(key, ref), this.cache.set(ref, value), key;
+  }
+  get(key) {
+    const ref = this.map.get(key);
+    return this.map.delete(key), this.cache.get(ref);
+  }
+};
+
+class UnsafeHtml extends String {}
+
+const unsafeHtml = str => new UnsafeHtml(str), escMap = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;'
+}, esc = string => string.replace(/[&<>"']/g, 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 key = globalRenderCache.set(any);
+    return unsafeHtml(key);
+  }
+  return unsafeHtml(esc('' + any));
+}, html = (strings, ...values) => unsafeHtml(String.raw({
+  raw: strings
+}, ...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);
+  return refs;
+}
+
+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.children?.length || customElements.get(node.localName)) return refs;
+  for (let child of Array.from(node.children)) renderAttrs(child, handlers, refs);
+  return refs;
+}
+
+export { escHtml, globalRenderCache, html, render, renderAttrs, unsafeHtml };

package/dist/index.js

@@ -2,12 +2,12 @@ export { ContextConsumer, ContextProvider, ContextRequestEvent } from './context
 
 export { MiElement, convertType, define } from './element.js';
 
-export { esc, escHtml, unsafeHtml } from './escape.js';
+export { escHtml, html, render, renderAttrs, unsafeHtml } from './html.js';
 
-export { refsById, refsBySelector } from './refs.js';
-
-export { Computed, default as Signal, State, createSignal, effect } from 'mi-signal';
+export { refsBySelector } from './refs.js';
 
 export { Store } from './store.js';
 
-export { addGlobalStyles, classMap, styleMap } from './styling.js';
+export { addGlobalStyles, classNames, css, styleMap } from './styling.js';
+
+export { default as Signal } from 'mi-signal';

package/dist/refs.js

@@ -1,15 +1,7 @@
-import { kebabToCamelCase } from './case.js';
-
-function refsById(container) {
-  const nodes = container.querySelectorAll?.('[id]') || [], found = {};
-  for (const node of nodes) found[kebabToCamelCase(node.getAttribute('id') || node.nodeName.toLowerCase())] = node;
-  return found;
-}
-
 function refsBySelector(container, selectors) {
   const found = {};
   for (const [name, selector] of Object.entries(selectors)) found[name] = container.querySelector?.(selector);
   return found;
 }
 
-export { refsById, refsBySelector };
+export { refsBySelector };

package/dist/styling.js

@@ -1,9 +1,12 @@
 import { camelToKebabCase } from './case.js';
 
-const classMap = map => {
-  const acc = [];
-  for (const [name, value] of Object.entries(map ?? {})) value && acc.push(name);
-  return acc.join(' ');
+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]) => {
+      value && classList.push(key);
+    }));
+  }), classList.join(' ');
 }, styleMap = (map, options) => {
   const {unit: unit = "px"} = options || {}, acc = [];
   for (const [name, value] of Object.entries(map ?? {})) {
@@ -23,4 +26,8 @@ function addGlobalStyles(renderRoot) {
   })), globalSheets));
 }
 
-export { addGlobalStyles, classMap, styleMap };
+const css = (strings, ...values) => String.raw({
+  raw: strings
+}, ...values);
+
+export { addGlobalStyles, classNames, css, styleMap };

package/dist/utils.js

@@ -0,0 +1,12 @@
+const toNumber = any => {
+  const n = Number(any);
+  return isNaN(n) ? 0 : n;
+}, toJson = any => {
+  try {
+    return JSON.parse(any);
+  } catch {
+    return;
+  }
+};
+
+export { toJson, toNumber };

package/docs/context.md

@@ -2,9 +2,9 @@
 
 <!-- !toc (minlevel=2) -->
 
-* [ContextProvider](#contextprovider)
-* [ContextConsumer](#contextconsumer)
-* [Connecting consumers to providers](#connecting-consumers-to-providers)
+- [ContextProvider](#contextprovider)
+- [ContextConsumer](#contextconsumer)
+- [Connecting consumers to providers](#connecting-consumers-to-providers)
 
 <!-- toc! -->
 
@@ -17,29 +17,34 @@ Implements the [Context Protocol][].
 ## ContextProvider
 
 ```js
-import {
-  define,
-  MiElement,
-  ContextProvider,
-  ContextConsumer,
-} from 'mi-element'
+import { define, MiElement, ContextProvider, ContextConsumer } from 'mi-element'
 
 define(
   'mi-context-provider',
   class extends MiElement {
-    static get attributes() {
+    static get properties () {
       return {
-        // define the context
-        context: 'counter',
-        value: 0
+        context: {},
+        value: { type: Number }
       }
     }
 
+    constructor() {
+      super()
+      // define the context and set initial value
+      // default context shall be unique amongst other context providers
+      this.context = 'my-context-provider' 
+      this.value = 0
+    }
+
     render() {
-      this.value = this.initialValue
       this.renderRoot.innerHTML = '<slot></slot>'
       this.provider = new ContextProvider(
-        this, this.context, this._providerValue())
+        this,
+        this.context,
+        this._providerValue()
+      )
+      this.update()
     }
 
     update() {
@@ -48,14 +53,16 @@ define(
     }
 
     increment() {
-      // value is observed value, requestUpdate() is called on any change
+      // value is observed value, requestUpdate() is called on every change
       this.value++
     }
 
     _providerValue() {
       // create a new object on every change and add all shared values and methods
       return {
-        value: this.value, increment: this.increment }
+        value: this.value,
+        increment: () => this.increment()
+      }
     }
   }
 )
@@ -64,7 +71,7 @@ define(
 Works also with HTMLElement. In this case you must provide the necessary wiring.
 
 ```js
-customeElement.define('html-context-provider', extends class HTMLElement {
+customElement.define('html-context-provider', extends class HTMLElement {
   connectedCallback() {
     this.provider = new ContextProvider(this, this.context, this)
     this.provider.hostConnected()
@@ -85,11 +92,10 @@ customeElement.define('html-context-provider', extends class HTMLElement {
 define(
   'mi-context-consumer',
   class extends MiElement {
-    static get attributes() {
+    static get properties() {
       return {
-        // define the context
-        context: 'counter',
-        subscribe: true
+        context: {},
+        subscribe: { type: Boolean }
       }
     }
 
@@ -97,14 +103,24 @@ define(
     <button id>Increment</button>
     <span id>0</span>`
 
+    constructor() {
+      super()
+      // define the context and set initial value
+      // default context shall be unique amongst other context providers 
+      // must match the context-providers context!
+      this.context = 'my-context-provider'
+      this.subscribe = false
+    }
+
     render() {
       this.consumer = new ContextConsumer(this, this.context, {
-        subscribe: !!this.subscribe
+        subscribe: this.subscribe
       })
       this.refs = refsById(this.renderRoot)
       this.refs.button.addEventListener('click', () => {
         this.consumer.value.increment()
       })
+      this.update()
     }
 
     update() {
@@ -120,14 +136,14 @@ define(
 <mi-context-provider context="outer">
   <mi-context-provider value="3">
     <div>
-      <!-- does not subscribe to any changes (works only with MiElement)-->
-      <mi-context-consumer subscribe="false">
+      <!-- does not subscribe to any changes -->
+      <mi-context-consumer>
         <!-- 3 -->
       </mi-context-consumer>
     </div>
     <div>
-      <!-- connects to outer context provider -->
-      <mi-context-consumer context="outer">
+      <!-- connects to outer context provider and subscribes to changes -->
+      <mi-context-consumer context="outer" subscribe>
         <!-- 0 -->
       </mi-context-consumer>
     </div>

package/docs/controller.md

@@ -55,6 +55,10 @@ define(
       this.controller = new ClockController(this)
     }
 
+    render() {
+      this.update()
+    }
+
     update() {
       // get value from controller
       const { value } = this.controller