mi-element 0.1.0 → 0.3.0

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

package/src/signal.js

@@ -1,76 +1,125 @@
 /**
- * @typedef {(value: any) => void} Callback
+ * tries to follow proposal JavaScript Signals standard proposal which is in
+ * stage 1
+ * @see https://github.com/tc39/proposal-signals
+ * @credits https://github.com/jsebrech/tiny-signals
  */
 
-export class Signal {
-  _subscribers = new Set()
+// global context for nested reactivity
+const context = []
+
+/**
+ * @template T
+ * @typedef {(value?: T|null, nextValue?: T|null) => boolean} EqualsFn
+ * Custom comparison function between old and new value
+ * default `(value, nextValue) => value === nextValue`
+ */
+
+/**
+ * @template T
+ * @typedef {{equals: EqualsFn<T>}} SignalOptions
+ */
+
+/**
+ * read- write signal
+ * @template T
+ */
+export class State extends EventTarget {
+  #value
+  #equals
 
   /**
-   * creates a new signal with an initial value
-   * @param {any} [initialValue]
+   * @param {T|null} [value]
+   * @param {SignalOptions<T>} [options]
    */
-  constructor(initialValue) {
-    this._value = initialValue
+  constructor(value, options) {
+    super()
+    const { equals } = options || {}
+    this.#value = value
+    this.#equals = equals ?? ((value, nextValue) => value === nextValue)
   }
 
   /**
-   * return current value
-   * @returns {any}
+   * @returns {T|null|undefined}
    */
-  get value() {
-    return this._value
+  get() {
+    const running = context[context.length - 1]
+    if (running) {
+      running.add(this)
+    }
+    return this.#value
   }
 
   /**
-   * set new value on signal;
-   * if value has changed all subscribers are called
-   * @param {any} newValue
+   * @param {T|null|undefined} nextValue
    */
-  set value(newValue) {
-    // value or reference must have changed to notify subscribers
-    if (this._value === newValue) {
+  set(nextValue) {
+    if (this.#equals(this.#value, nextValue)) {
       return
     }
-    this._value = newValue
-    this.notify()
+    this.#value = nextValue
+    this.dispatchEvent(new CustomEvent('signal'))
   }
+}
 
-  /**
-   * notify all subscribers on current value
-   */
-  notify() {
-    for (const callback of this._subscribers) {
-      callback(this._value)
-    }
+/**
+ * @template T
+ * @param {T} initialValue
+ * @param {SignalOptions<T>} [options]
+ * @returns {State<T>}
+ */
+export const createSignal = (initialValue, options) =>
+  initialValue instanceof State
+    ? initialValue
+    : new State(initialValue, options)
+
+/**
+ * effect subscribes to state at first run only. Do not hide a signal.get()
+ * inside conditionals!
+ * @param {() => void|Promise<void>} cb
+ */
+export function effect(cb) {
+  const running = new Set()
+
+  context.push(running)
+  try {
+    cb()
+  } finally {
+    context.pop()
+  }
+  for (const dep of running) {
+    dep.addEventListener('signal', cb)
   }
 
-  /**
-   * subscribe to signal to receive value updates
-   * @param {Callback} callback
-   * @returns {() => void} unsubscribe function
-   */
-  subscribe(callback) {
-    this._subscribers.add(callback)
-    const unsubscribe = () => {
-      this._subscribers.delete(callback)
+  return () => {
+    // unsubscribe from all dependencies
+    for (const dep of running) {
+      dep.removeEventListener('signal', cb)
     }
-    return unsubscribe
   }
 }
 
 /**
- * creates a signal
- * @param {any} [initialValue]
- * @returns {Signal}
+ * @template T
  */
-export const createSignal = (initialValue) => new Signal(initialValue)
+export class Computed {
+  #state
 
-/**
- * check if implements signal like features
- * @param {any} possibleSignal
- * @returns {boolean}
- */
-export const isSignalLike = (possibleSignal) =>
-  typeof possibleSignal?.subscribe === 'function' &&
-  typeof possibleSignal?.notify === 'function' &&
-  'value' in possibleSignal
+  /**
+   * @param {() => T} cb
+   */
+  constructor(cb) {
+    this.#state = new State()
+    effect(() => this.#state.set(cb()))
+  }
+
+  /**
+   * @template T
+   * @returns {T}
+   */
+  get() {
+    return this.#state.get()
+  }
+}
+
+export default { State, createSignal, effect, Computed }

package/src/store.js

@@ -1,4 +1,4 @@
-import { Signal, isSignalLike } from './signal.js'
+import { State } from './signal.js'
 
 /**
  * @typedef {import('./element.js').MiElement} MiElement
@@ -6,22 +6,29 @@ import { Signal, isSignalLike } from './signal.js'
 /**
  * @typedef {(state: any, data?: any) => any} Action
  */
+/**
+ * @template T
+ * @typedef {import('./signal.js').SignalOptions<T>} SignalOptions<T>
+ */
 
 /**
  * Store implementing [Flux](https://www.npmjs.com/package/flux) pattern based
  * on Signals
+ * @template T
  */
-export class Store extends Signal {
+export class Store extends State {
   /**
    * @param {Record<string, Action>} actions
-   * @param {any} [initialValue]
+   * @param {T|null} [initialValue]
+   * @param {SignalOptions<T>} [options]
    * @example
    * ```js
+   * import { Signal, Store } from 'mi-element'
    * const actions = { increment: (by = 1) => (current) => current + by }
    * const initialValue = 1
    * const store = new Store(actions, initialValue)
    * // subscribe with a callback function
-   * const unsubscribe = store.subscribe((value) => console.log(`count is ${value}`))
+   * const unsubscribe = Signal.effect(() => console.log(`count is ${store.get()}`))
    * // change the store
    * store.increment(2) // increment by 2
    * //> count is 3
@@ -33,12 +40,24 @@ export class Store extends Signal {
    * ```js
    * const initialValue = { count: 0, other: 'foo' }
    * const actions = {
-   *  increment: (by = 1) => (state) => ({...state, count: state.count + by})
+   *   increment: (by = 1) => (state) => ({...state, count: state.count + by})
+   * }
+   * ```
+   * or you change the signals options equality function
+   * ```js
+   * const actions = {
+   *   increment: (by = 1) => (state) => {
+   *     state.count += by
+   *     return state
+   *   }
    * }
+   * const initialValue = { count: 0, other: 'foo' }
+   * const options = { equals: (value, nextValue) => true }
+   * const store = new Store(actions, initialValue, options)
    * ```
    */
-  constructor(actions, initialValue) {
-    super(initialValue)
+  constructor(actions, initialValue, options) {
+    super(initialValue, options)
     for (const [action, dispatcher] of Object.entries(actions)) {
       if (process.env.NODE_ENV !== 'production') {
         if (this[action]) {
@@ -53,47 +72,7 @@ export class Store extends Signal {
           )
         }
       }
-      this[action] = (data) => {
-        this.value = dispatcher(data)(this.value)
-      }
-    }
-  }
-}
-
-/**
- * subscribe to a store from a MiElement with unsubscription from store on
- * disconnectedCallback()
- * @param {MiElement} element
- * @param {Store} store
- * @param {string|string[]|Signal} propOrSignal element property to apply store
- * value updates
- */
-export const subscribeToStore = (element, store, propOrSignal) => {
-  if (propOrSignal instanceof Signal || isSignalLike(propOrSignal)) {
-    element.dispose(
-      store.subscribe((value) => {
-        // @ts-expect-error
-        propOrSignal.value = value
-      })
-    )
-    return
-  }
-  const keys = Array.isArray(propOrSignal)
-    ? propOrSignal
-    : propOrSignal.split('.').filter(Boolean)
-  const last = keys.pop()
-  if (!last) throw TypeError('need prop')
-  let tmp = element
-  for (const key of keys) {
-    if (typeof tmp[key] !== 'object') {
-      throw new TypeError(`object expected for property "${key}"`)
+      this[action] = (data) => this.set(dispatcher(data)(this.get()))
     }
-    tmp = tmp[key]
   }
-  element.dispose(
-    store.subscribe((value) => {
-      tmp[last] = value
-      element.requestUpdate()
-    })
-  )
 }

package/src/styling.js

@@ -0,0 +1,33 @@
+import { camelToKebabCase } from './case.js'
+
+/**
+ * Construct className based on trueish values of map
+ * @param {{[name: string]: string | boolean | number}} map
+ * @returns {string}
+ */
+export const classMap = (map) => {
+  /** @type {string[]} */
+  const acc = []
+  for (const [name, value] of Object.entries(map ?? {})) {
+    if (value) acc.push(name)
+  }
+  return acc.join(' ')
+}
+
+/**
+ * Construct style from camelCased map.
+ * @param {{[name: string]: string | number | undefined | null}} map
+ * @param {object} [options]
+ * @param {string} [options.unit] cssUnit for number values; default='px'
+ * @returns {string}
+ */
+export const styleMap = (map, options) => {
+  const { unit = 'px' } = options || {}
+  const acc = []
+  for (const [name, value] of Object.entries(map ?? {})) {
+    if (value === null || value === undefined) continue
+    const _unit = Number.isFinite(value) ? unit : ''
+    acc.push(`${camelToKebabCase(name)}:${value}${_unit}`)
+  }
+  return acc.join(';')
+}

package/types/case.d.ts

@@ -0,0 +1,2 @@
+export function camelToKebabCase(str?: string): string;
+export function kebabToCamelCase(str?: string): string;

package/types/context.d.ts

@@ -2,69 +2,67 @@
  * @implements {HostController}
  */
 export class ContextProvider implements HostController {
-  /**
-   * @param {MiElement} host
-   * @param {Context} context
-   * @param {any} initialValue
-   */
-  constructor(host: MiElement, context: Context, initialValue: any)
-  host: import('./element.js').MiElement
-  context: Context
-  state: any
-  hostConnected(): void
-  hostDisconnected(): void
-  set value(newValue: any)
-  get value(): any
-  notify(): void
-  onContextRequest: (ev: any) => void
+    /**
+     * @param {HTMLElement} host
+     * @param {Context} context
+     * @param {any} initialValue
+     */
+    constructor(host: HTMLElement, context: Context, initialValue: any);
+    host: HTMLElement;
+    context: Context;
+    state: import("./signal.js").State<any>;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * @param {any} newValue
+     */
+    set(newValue: any): void;
+    /**
+     * @returns {any}
+     */
+    get(): any;
+    /**
+     * @private
+     * @param {ContextRequestEvent} ev
+     */
+    private onContextRequest;
 }
 export class ContextRequestEvent extends Event {
-  /**
-   * @param {Context} context
-   * @param {(value: any, unsubscribe?: () => void) => void} callback
-   * @param {boolean} [subscribe=false] subscribe to value changes
-   */
-  constructor(
-    context: Context,
-    callback: (value: any, unsubscribe?: () => void) => void,
-    subscribe?: boolean | undefined
-  )
-  context: Context
-  callback: (value: any, unsubscribe?: () => void) => void
-  subscribe: boolean | undefined
+    /**
+     * @param {Context} context
+     * @param {(value: any, unsubscribe?: () => void) => void} callback
+     * @param {boolean} [subscribe=false] subscribe to value changes
+     */
+    constructor(context: Context, callback: (value: any, unsubscribe?: () => void) => void, subscribe?: boolean | undefined);
+    context: Context;
+    callback: (value: any, unsubscribe?: () => void) => void;
+    subscribe: boolean | undefined;
 }
 /**
  * @implements {HostController}
  */
 export class ContextConsumer implements HostController {
-  /**
-   * @param {MiElement} host
-   * @param {Context} context
-   * @param {object} [options]
-   * @param {boolean} [options.subscribe=false] subscribe to value changes
-   * @param {(any) => boolean} [options.validate] validation function
-   */
-  constructor(
-    host: MiElement,
-    context: Context,
-    options?:
-      | {
-          subscribe?: boolean | undefined
-          validate?: ((any: any) => boolean) | undefined
-        }
-      | undefined
-  )
-  host: import('./element.js').MiElement
-  context: Context
-  subscribe: boolean
-  validate: (any: any) => boolean
-  value: any
-  unsubscribe: any
-  hostConnected(): void
-  hostDisconnected(): void
-  dispatchRequest(): void
-  _callback(value: any, unsubscribe: any): void
+    /**
+     * @param {HTMLElement} host
+     * @param {Context} context
+     * @param {object} [options]
+     * @param {boolean} [options.subscribe=false] subscribe to value changes
+     * @param {(any) => boolean} [options.validate] validation function
+     */
+    constructor(host: HTMLElement, context: Context, options?: {
+        subscribe?: boolean | undefined;
+        validate?: ((any: any) => boolean) | undefined;
+    } | undefined);
+    host: HTMLElement;
+    context: Context;
+    subscribe: boolean;
+    validate: (any: any) => boolean;
+    value: any;
+    unsubscribe: any;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    dispatchRequest(): void;
+    _callback(value: any, unsubscribe: any): void;
 }
-export type HostController = import('./element.js').HostController
-export type MiElement = import('./element.js').MiElement
-export type Context = string | Symbol
+export type HostController = import("./element.js").HostController;
+export type Context = string | Symbol;