mi-element 0.1.0 → 0.2.0

package/README.md

@@ -2,6 +2,8 @@
 
 > a lightweight alternative to write web components
 
+Only weights 2.3kB minified and gzipped.
+
 mi-element provides further features to build web applications through 
 [Web Components][] like:
 
@@ -77,6 +79,7 @@ In `./example` you'll find a working sample of a Todo App. Check it out with
 - [controller][docs-controller] adding controllers to mi-element to hook into the lifecycle
 - [context][docs-context] Implementation of the [Context Protocol][].
 - [store][docs-store] Manage shared state in an application
+- [styling][docs-styling] Styling directives for "class" and "style"
 
 # License
 
@@ -88,3 +91,4 @@ MIT licensed
 [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-store]: https://github.com/commenthol/mi-element/tree/main/packages/mi-element/docs/store.md
+[docs-styling]: https://github.com/commenthol/mi-element/tree/main/packages/mi-element/docs/styling.md

package/dist/case.js

@@ -0,0 +1,3 @@
+const camelToKebabCase = (str = "") => str.replace(/([A-Z])/g, ((_, m) => `-${m.toLowerCase()}`)), kebabToCamelCase = (str = "") => str.toLowerCase().replace(/[-_]\w/g, (m => m[1].toUpperCase()));
+
+export { camelToKebabCase, kebabToCamelCase };

package/dist/context.js

@@ -1,8 +1,8 @@
-import { isSignalLike, createSignal } from './signal.js';
+import { createSignal, effect } from './signal.js';
 
 class ContextProvider {
   constructor(host, context, initialValue) {
-    this.host = host, this.context = context, this.state = isSignalLike(initialValue) ? initialValue : createSignal(initialValue), 
+    this.host = host, this.context = context, this.state = createSignal(initialValue), 
     this.host.addController?.(this);
   }
   hostConnected() {
@@ -11,20 +11,19 @@ class ContextProvider {
   hostDisconnected() {
     this.host.removeEventListener("context-request", this.onContextRequest);
   }
-  set value(newValue) {
-    this.state.value = newValue;
+  set(newValue) {
+    this.state.set(newValue);
   }
-  get value() {
-    return this.state.value;
-  }
-  notify() {
-    this.state.notify();
+  get() {
+    return this.state.get();
   }
   onContextRequest=ev => {
     if (ev.context !== this.context) return;
-    ev.stopPropagation();
-    const unsubscribe = ev.subscribe ? this.state.subscribe(ev.callback) : void 0;
-    ev.callback(this.value, unsubscribe);
+    let unsubscribe;
+    ev.stopPropagation(), ev.subscribe && (unsubscribe = effect((() => {
+      const value = this.get();
+      unsubscribe && ev.callback(value, unsubscribe);
+    }))), ev.callback(this.get(), unsubscribe);
   };
 }
 

package/dist/element.js

@@ -1,3 +1,7 @@
+import { camelToKebabCase } from './case.js';
+
+import { createSignal } from './signal.js';
+
 class MiElement extends HTMLElement {
   #attr={};
   #attrLc=new Map;
@@ -9,19 +13,19 @@ class MiElement extends HTMLElement {
     mode: 'open'
   };
   constructor() {
-    super(), this.#attr = {
-      ...this.constructor.attributes
-    }, this.#observedAttributes();
+    super(), this.#observedAttributes(this.constructor.attributes);
   }
-  #observedAttributes() {
-    for (const [name, val] of Object.entries(this.#attr)) this.#types.set(name, initialType(val)), 
-    this.#attrLc.set(name.toLowerCase(), name), Object.defineProperty(this, name, {
+  #observedAttributes(attributes = {}) {
+    for (const [name, value] of Object.entries(attributes)) this.#types.set(name, initialType(value)), 
+    this.#attrLc.set(name.toLowerCase(), name), this.#attrLc.set(camelToKebabCase(name), name), 
+    this.#attr[name] = createSignal(value), Object.defineProperty(this, name, {
       enumerable: !0,
       get() {
-        return this.#attr[name];
+        return this.#attr[name].get();
       },
       set(newValue) {
-        this.#attr[name] !== newValue && (this.#attr[name] = newValue, this.#changedAttr[name] = newValue, 
+        const oldValue = this.#attr[name].get();
+        oldValue !== newValue && (this.#attr[name].set(newValue), this.#changedAttr[name] = oldValue, 
         this.requestUpdate());
       }
     });
@@ -41,16 +45,20 @@ class MiElement extends HTMLElement {
   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), _newValue = convertType(newValue, type);
-    this.#attr[attr] = this.#changedAttr[attr] = _newValue, 'Boolean' === type && 'false' === newValue && this.removeAttribute(name), 
-    this.requestUpdate();
+  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);
-    this.#attr[attr] = this.#changedAttr[attr] = newValue, 'Boolean' === type ? !0 === newValue || '' === newValue ? super.setAttribute(name, '') : super.removeAttribute(name) : [ 'String', 'Number' ].includes(type) || !0 === newValue ? super.setAttribute(name, newValue) : this.requestUpdate();
+    '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.isConnected && requestAnimationFrame((() => {
@@ -61,9 +69,6 @@ class MiElement extends HTMLElement {
     template instanceof HTMLTemplateElement && this.renderRoot.appendChild(template.content.cloneNode(!0));
   }
   render() {}
-  shouldUpdate(_changedAttributes) {
-    return !0;
-  }
   update(_changedAttributes) {}
   on(eventName, listener, node = this) {
     node.addEventListener(eventName, listener), this.#disposers.add((() => node.removeEventListener(eventName, listener)));
@@ -73,9 +78,11 @@ class MiElement extends HTMLElement {
       once: !0
     });
   }
-  dispose(listener) {
-    if ('function' != typeof listener) throw new TypeError('listener must be a function');
-    this.#disposers.add(listener);
+  dispose(...listeners) {
+    for (const listener of listeners) {
+      if ('function' != typeof listener) throw new TypeError('listener must be a function');
+      this.#disposers.add(listener);
+    }
   }
   addController(controller) {
     this.#controllers.add(controller), this.isConnected && controller.hostConnected?.();

package/dist/index.js

@@ -6,6 +6,8 @@ export { esc, escAttr, escHtml } from './escape.js';
 
 export { refsById, refsBySelector } from './refs.js';
 
-export { Signal, createSignal, isSignalLike } from './signal.js';
+export { default as Signal } from './signal.js';
 
-export { Store, subscribeToStore } from './store.js';
+export { Store } from './store.js';
+
+export { classMap, styleMap } from './styling.js';

package/dist/refs.js

@@ -1,15 +1,15 @@
+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;
 }
 
-const kebabToCamelCase = (str = "") => str.toLowerCase().replace(/[-_]\w/g, (m => m[1].toUpperCase()));
-
 function refsBySelector(container, selectors) {
   const found = {};
   for (const [name, selector] of Object.entries(selectors)) found[name] = container.querySelector?.(selector);
   return found;
 }
 
-export { kebabToCamelCase, refsById, refsBySelector };
+export { refsById, refsBySelector };

package/dist/signal.js

@@ -1,24 +1,62 @@
-class Signal {
-  _subscribers=new Set;
-  constructor(initialValue) {
-    this._value = initialValue;
+const context = [];
+
+class State {
+  subscribers=new Set;
+  constructor(value, options) {
+    const {equals: equals} = options || {};
+    this.value = value, this.equals = equals ?? ((value, nextValue) => value === nextValue);
   }
-  get value() {
-    return this._value;
+  get() {
+    const running = context[context.length - 1];
+    return running && (this.subscribers.add(running), running.dependencies.add(this.subscribers)), 
+    this.value;
   }
-  set value(newValue) {
-    this._value !== newValue && (this._value = newValue, this.notify());
+  set(nextValue) {
+    if (!this.equals(this.value, nextValue)) {
+      this.value = nextValue;
+      for (const running of [ ...this.subscribers ]) running.execute();
+    }
   }
-  notify() {
-    for (const callback of this._subscribers) callback(this._value);
+}
+
+const createSignal = value => value instanceof State ? value : new State(value);
+
+function cleanup(running) {
+  for (const dep of running.dependencies) dep.delete(running);
+  running.dependencies.clear();
+}
+
+function effect(cb) {
+  const execute = () => {
+    cleanup(running), context.push(running);
+    try {
+      cb();
+    } finally {
+      context.pop();
+    }
+  }, running = {
+    execute: execute,
+    dependencies: new Set
+  };
+  return execute(), () => {
+    cleanup(running);
+  };
+}
+
+class Computed {
+  constructor(cb) {
+    this.state = new State, effect((() => this.state.set(cb)));
   }
-  subscribe(callback) {
-    return this._subscribers.add(callback), () => {
-      this._subscribers.delete(callback);
-    };
+  get() {
+    return this.state.get();
   }
 }
 
-const createSignal = initialValue => new Signal(initialValue), isSignalLike = possibleSignal => 'function' == typeof possibleSignal?.subscribe && 'function' == typeof possibleSignal?.notify && 'value' in possibleSignal;
+var signal = {
+  State: State,
+  createSignal: createSignal,
+  effect: effect,
+  Computed: Computed
+};
 
-export { Signal, createSignal, isSignalLike };
+export { Computed, State, createSignal, signal as default, effect };

package/dist/store.js

@@ -1,28 +1,10 @@
-import { Signal, isSignalLike } from './signal.js';
+import { State } from './signal.js';
 
-class Store extends Signal {
-  constructor(actions, initialValue) {
-    super(initialValue);
-    for (const [action, dispatcher] of Object.entries(actions)) this[action] = data => {
-      this.value = dispatcher(data)(this.value);
-    };
+class Store extends State {
+  constructor(actions, initialValue, options) {
+    super(initialValue, options);
+    for (const [action, dispatcher] of Object.entries(actions)) this[action] = data => this.set(dispatcher(data)(this.get()));
   }
 }
 
-const subscribeToStore = (element, store, propOrSignal) => {
-  if (propOrSignal instanceof Signal || isSignalLike(propOrSignal)) return void element.dispose(store.subscribe((value => {
-    propOrSignal.value = value;
-  })));
-  const keys = Array.isArray(propOrSignal) ? propOrSignal : propOrSignal.split('.').filter(Boolean), last = keys.pop();
-  if (!last) throw TypeError('need prop');
-  let tmp = element;
-  for (const key of keys) {
-    if ('object' != typeof tmp[key]) throw new TypeError(`object expected for property "${key}"`);
-    tmp = tmp[key];
-  }
-  element.dispose(store.subscribe((value => {
-    tmp[last] = value, element.requestUpdate();
-  })));
-};
-
-export { Store, subscribeToStore };
+export { Store };

package/dist/styling.js

@@ -0,0 +1,17 @@
+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(' ');
+}, styleMap = (map, options) => {
+  const {unit: unit = "px"} = options || {}, acc = [];
+  for (const [name, value] of Object.entries(map ?? {})) {
+    if (null == value) continue;
+    const _unit = Number.isFinite(value) ? unit : '';
+    acc.push(`${camelToKebabCase(name)}:${value}${_unit}`);
+  }
+  return acc.join(';');
+};
+
+export { classMap, styleMap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Build lightweight reactive micro web-components",
   "keywords": [],
   "homepage": "https://github.com/commenthol/mi-element/tree/main/packages/mi-element#readme",
@@ -29,6 +29,11 @@
       "development": "./src/element.js",
       "types": "./types/element.d.ts"
     },
+    "./case": {
+      "default": "./dist/case.js",
+      "development": "./src/case.js",
+      "types": "./types/case.d.ts"
+    },
     "./context": {
       "default": "./dist/context.js",
       "development": "./src/context.js",
@@ -54,6 +59,11 @@
       "development": "./src/store.js",
       "types": "./types/store.d.ts"
     },
+    "./styling": {
+      "default": "./dist/styling.js",
+      "development": "./src/styling.js",
+      "types": "./types/styling.d.ts"
+    },
     "./package.json": {
       "default": "./package.json"
     }
@@ -83,8 +93,8 @@
     "vitest": "^2.0.5"
   },
   "scripts": {
-    "all": "npm-run-all lint test build",
-    "build": "rimraf dist && rollup -c && gzip dist/index.min.js && ls -al dist && rimraf dist/index.min.*",
+    "all": "npm-run-all pretty lint test build types",
+    "build": "rimraf dist && rollup -c && gzip -k dist/index.min.js && ls -al dist && rimraf dist/index.min.*",
     "example": "vite --open /example/",
     "lint": "eslint",
     "pretty": "prettier -w **/*.js",

package/src/case.js

@@ -0,0 +1,15 @@
+/**
+ * convert lowerCamelCase to kebab-case
+ * @param {string} str
+ * @returns {string}
+ */
+export const camelToKebabCase = (str = '') =>
+  str.replace(/([A-Z])/g, (_, m) => `-${m.toLowerCase()}`)
+
+/**
+ * convert kebab-case to lowerCamelCase
+ * @param {string} str
+ * @returns {string}
+ */
+export const kebabToCamelCase = (str = '') =>
+  str.toLowerCase().replace(/[-_]\w/g, (m) => m[1].toUpperCase())

package/src/context.js

@@ -2,7 +2,7 @@
  * @see https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md
  */
 
-import { createSignal, isSignalLike } from './signal.js'
+import { createSignal, effect } from './signal.js'
 
 /**
  * @typedef {import('./element.js').HostController} HostController
@@ -25,9 +25,7 @@ export class ContextProvider {
   constructor(host, context, initialValue) {
     this.host = host
     this.context = context
-    this.state = isSignalLike(initialValue)
-      ? initialValue
-      : createSignal(initialValue)
+    this.state = createSignal(initialValue)
     // @ts-expect-error
     this.host.addController?.(this)
   }
@@ -45,24 +43,20 @@ export class ContextProvider {
   /**
    * @param {any} newValue
    */
-  set value(newValue) {
-    this.state.value = newValue
+  set(newValue) {
+    this.state.set(newValue)
   }
 
   /**
    * @returns {any}
    */
-  get value() {
-    return this.state.value
-  }
-
-  notify() {
-    this.state.notify()
+  get() {
+    return this.state.get()
   }
 
   /**
    * @private
-   * @param {ContextRequestEvent} ev 
+   * @param {ContextRequestEvent} ev
    */
   onContextRequest = (ev) => {
     if (ev.context !== this.context) {
@@ -70,10 +64,17 @@ export class ContextProvider {
       return
     }
     ev.stopPropagation()
-    const unsubscribe = ev.subscribe
-      ? this.state.subscribe(ev.callback)
-      : undefined
-    ev.callback(this.value, unsubscribe)
+    console.debug('provider.onContextRequest', this.state)
+    let unsubscribe
+    if (ev.subscribe) {
+      unsubscribe = effect(() => {
+        // needed to subscribe to signal
+        const value = this.get()
+        // don't call callback the first time where unsubscribe is not defined
+        if (unsubscribe) ev.callback(value, unsubscribe)
+      })
+    }
+    ev.callback(this.get(), unsubscribe)
   }
 }
 
@@ -140,6 +141,7 @@ export class ContextConsumer {
   }
 
   _callback(value, unsubscribe) {
+    console.debug('consumer.callback', { value, unsubscribe })
     if (unsubscribe) {
       if (!this.subscribe) {
         // unsubscribe as we didn't ask for subscription

package/src/element.js

@@ -1,3 +1,6 @@
+import { camelToKebabCase } from './case.js'
+import { createSignal } from './signal.js'
+
 /**
  * @typedef {object} HostController controller
  * @property {() => void} hostConnected is called when host element is added to
@@ -57,28 +60,29 @@ export class MiElement extends HTMLElement {
   constructor() {
     super()
     // @ts-expect-error
-    this.#attr = { ...this.constructor.attributes }
-    this.#observedAttributes()
+    this.#observedAttributes(this.constructor.attributes)
   }
 
   /**
    * requests update on component when property changes
    */
-  #observedAttributes() {
-    for (const [name, val] of Object.entries(this.#attr)) {
-      this.#types.set(name, initialType(val))
+  #observedAttributes(attributes = {}) {
+    for (const [name, value] of Object.entries(attributes)) {
+      this.#types.set(name, initialType(value))
       this.#attrLc.set(name.toLowerCase(), name)
+      this.#attrLc.set(camelToKebabCase(name), name)
+      this.#attr[name] = createSignal(value)
       Object.defineProperty(this, name, {
         enumerable: true,
         get() {
-          return this.#attr[name]
+          return this.#attr[name].get()
         },
         set(newValue) {
           console.debug('%s.%s =', this.nodeName, name, newValue)
-          const oldValue = this.#attr[name]
+          const oldValue = this.#attr[name].get()
           if (oldValue === newValue) return
-          this.#attr[name] = newValue
-          this.#changedAttr[name] = newValue
+          this.#attr[name].set(newValue)
+          this.#changedAttr[name] = oldValue
           this.requestUpdate()
         }
       })
@@ -129,14 +133,14 @@ export class MiElement extends HTMLElement {
 
   /**
    * @param {string} name change attribute
-   * @param {any} _oldValue
+   * @param {any} oldValue
    * @param {any} newValue new value
    */
-  attributeChangedCallback(name, _oldValue, newValue) {
+  attributeChangedCallback(name, oldValue, newValue) {
     const attr = this.#getName(name)
     const type = this.#getType(attr)
-    const _newValue = convertType(newValue, type)
-    this.#attr[attr] = this.#changedAttr[attr] = _newValue
+    this.#changedAttr[attr] = this[attr]
+    this[attr] = convertType(newValue, type)
     // correct initial setting of `trueish="false"` otherwise there's no chance
     // to overwrite a trueish value. The case `falsish="true"` is covered.
     if (type === 'Boolean' && newValue === 'false') {
@@ -146,7 +150,7 @@ export class MiElement extends HTMLElement {
       '%s.attributeChangedCallback("%s",',
       this.nodeName,
       name,
-      _oldValue,
+      oldValue,
       newValue
     )
     this.requestUpdate()
@@ -165,7 +169,6 @@ export class MiElement extends HTMLElement {
       return
     }
     const type = this.#getType(attr)
-    this.#attr[attr] = this.#changedAttr[attr] = newValue
     console.debug('%s.setAttribute("%s",', this.nodeName, name, newValue)
 
     // only set string values in these cases
@@ -178,10 +181,21 @@ export class MiElement extends HTMLElement {
     } else if (['String', 'Number'].includes(type) || newValue === true) {
       super.setAttribute(name, newValue)
     } else {
+      this.#changedAttr[attr] = this[attr]
+      this[attr] = newValue
       this.requestUpdate()
     }
   }
 
+  /**
+   * controls if component shall be updated
+   * @param {Record<string,any>} [_changedAttributes] previous values of changed attributes
+   * @returns {boolean}
+   */
+  shouldUpdate(_changedAttributes) {
+    return true
+  }
+
   /**
    * request rendering
    */
@@ -198,7 +212,7 @@ export class MiElement extends HTMLElement {
 
   /**
    * adds a template to renderRoot
-   * @param {HTMLTemplateElement}
+   * @param {HTMLTemplateElement} template
    */
   addTemplate(template) {
     if (!(template instanceof HTMLTemplateElement)) {
@@ -213,18 +227,10 @@ export class MiElement extends HTMLElement {
    */
   render() {}
 
-  /**
-   * controls if component shall be updated
-   * @param {Record<string,any>} _changedAttributes changed attributes
-   * @returns {boolean}
-   */
-  shouldUpdate(_changedAttributes) {
-    return true
-  }
-
   /**
    * called every time the components needs a render update
-   * @param {Record<string,any>} _changedAttributes changed attributes
+   * @param {Record<string,any>} [_changedAttributes] previous values of changed
+   * attributes
    */
   update(_changedAttributes) {}
 
@@ -253,13 +259,15 @@ export class MiElement extends HTMLElement {
 
   /**
    * Unsubscribe a listener function for disposal on disconnectedCallback()
-   * @param {function} listener
+   * @param {...function} listeners
    */
-  dispose(listener) {
-    if (typeof listener !== 'function') {
-      throw new TypeError('listener must be a function')
+  dispose(...listeners) {
+    for (const listener of listeners) {
+      if (typeof listener !== 'function') {
+        throw new TypeError('listener must be a function')
+      }
+      this.#disposers.add(listener)
     }
-    this.#disposers.add(listener)
   }
 
   /**

package/src/index.js

@@ -13,10 +13,13 @@ export { MiElement, convertType, define } from './element.js'
 export { esc, escAttr, escHtml } from './escape.js'
 export { refsById, refsBySelector } from './refs.js'
 /**
- * @typedef {import('./signal.js').Callback} Callback
+ * @template T
+ * @typedef {import('./signal.js').SignalOptions<T>} SignalOptions<T>
  */
-export { Signal, createSignal, isSignalLike } from './signal.js'
+import Signal from './signal.js'
+export { Signal }
 /**
  * @typedef {import('./store.js').Action} Action
  */
-export { Store, subscribeToStore } from './store.js'
+export { Store } from './store.js'
+export { classMap, styleMap } from './styling.js'

package/src/refs.js

@@ -1,3 +1,5 @@
+import { kebabToCamelCase } from './case.js'
+
 /**
  * Helper function to find `id` attributes in `container`s node tree.
  * id names are camelCased, e.g. 'list-container' becomes 'listContainer'
@@ -20,14 +22,6 @@ export function refsById(container) {
   return found
 }
 
-/**
- * convert kebab-case to lowerCamelCase
- * @param {string} str
- * @returns {string}
- */
-export const kebabToCamelCase = (str = '') =>
-  str.toLowerCase().replace(/[-_]\w/g, (m) => m[1].toUpperCase())
-
 /**
  * Helper function to gather references by a map of selectors
  * @param {Element} container root element