mi-element 0.1.0 → 0.2.0

package/types/escape.d.ts

@@ -1,3 +1,3 @@
-export function escHtml(string: string): string
-export function escAttr(string: string): string
-export function esc(strings: string[], ...vars: any[]): string
+export function escHtml(string: string): string;
+export function escAttr(string: string): string;
+export function esc(strings: string[], ...vars: any[]): string;

package/types/index.d.ts

@@ -1,14 +1,15 @@
-export type Context = import('./context.js').Context
-export type HostController = import('./element.js').HostController
-export type Callback = import('./signal.js').Callback
-export type Action = import('./store.js').Action
-export {
-  ContextConsumer,
-  ContextProvider,
-  ContextRequestEvent
-} from './context.js'
-export { MiElement, convertType, define } from './element.js'
-export { esc, escAttr, escHtml } from './escape.js'
-export { refsById, refsBySelector } from './refs.js'
-export { Signal, createSignal, isSignalLike } from './signal.js'
-export { Store, subscribeToStore } from './store.js'
+export { Signal };
+export { Store } from "./store.js";
+export type Context = import("./context.js").Context;
+export type HostController = import("./element.js").HostController;
+/**
+ * <T>
+ */
+export type SignalOptions<T> = import("./signal.js").SignalOptions<T>;
+export type Action = import("./store.js").Action;
+import Signal from './signal.js';
+export { ContextConsumer, ContextProvider, ContextRequestEvent } from "./context.js";
+export { MiElement, convertType, define } from "./element.js";
+export { esc, escAttr, escHtml } from "./escape.js";
+export { refsById, refsBySelector } from "./refs.js";
+export { classMap, styleMap } from "./styling.js";

package/types/refs.d.ts

@@ -1,5 +1,6 @@
 /**
- * Helper function to find `id` attributes in `container`s node tree
+ * Helper function to find `id` attributes in `container`s node tree.
+ * id names are camelCased, e.g. 'list-container' becomes 'listContainer'
  * @param {Element} container root element
  * @returns {Record<string, Node>|{}} record of found references
  * @example
@@ -7,7 +8,7 @@
  * references = refs(el)
  * //> references = { p: <p>, named: <span> }
  */
-export function refsById(container: Element): Record<string, Node> | {}
+export function refsById(container: Element): Record<string, Node> | {};
 /**
  * Helper function to gather references by a map of selectors
  * @param {Element} container root element
@@ -18,7 +19,4 @@ export function refsById(container: Element): Record<string, Node> | {}
  * references = refs(el, { p: 'p', named: 'p > span' })
  * //> references = { p: <p>, named: <span> }
  */
-export function refsBySelector(
-  container: Element,
-  selectors: Record<string, string>
-): Record<string, Node> | {}
+export function refsBySelector(container: Element, selectors: Record<string, string>): Record<string, Node> | {};

package/types/signal.d.ts

@@ -1,36 +1,54 @@
 /**
- * @typedef {(value: any) => void} Callback
+ * @param {() => void} cb
  */
-export class Signal {
-  /**
-   * creates a new signal with an initial value
-   * @param {any} [initialValue]
-   */
-  constructor(initialValue?: any)
-  _subscribers: Set<any>
-  _value: any
-  /**
-   * set new value on signal;
-   * if value has changed all subscribers are called
-   * @param {any} newValue
-   */
-  set value(newValue: any)
-  /**
-   * return current value
-   * @returns {any}
-   */
-  get value(): any
-  /**
-   * notify all subscribers on current value
-   */
-  notify(): void
-  /**
-   * subscribe to signal to receive value updates
-   * @param {Callback} callback
-   * @returns {() => void} unsubscribe function
-   */
-  subscribe(callback: Callback): () => void
+export function effect(cb: () => void): () => void;
+/**
+ * @template T
+ * @typedef {{equals: (value?: T|null, nextValue?: T|null) => boolean}} SignalOptions
+ */
+/**
+ * tries to follow proposal (a bit)
+ * @see https://github.com/tc39/proposal-signals
+ * @template T
+ */
+export class State<T> {
+    /**
+     * @param {T|null} [value]
+     * @param {SignalOptions<T>} [options]
+     */
+    constructor(value?: T | null | undefined, options?: SignalOptions<T> | undefined);
+    subscribers: Set<any>;
+    value: T | null | undefined;
+    equals: (value?: T | null | undefined, nextValue?: T | null | undefined) => boolean;
+    /**
+     * @returns {T|null|undefined}
+     */
+    get(): T | null | undefined;
+    /**
+     * @param {T|null|undefined} nextValue
+     */
+    set(nextValue: T | null | undefined): void;
+}
+export function createSignal<T>(value: T): State<T>;
+export class Computed {
+    /**
+     * @param {() => void} cb
+     */
+    constructor(cb: () => void);
+    state: State<any>;
+    /**
+     * @template T
+     * @returns {T}
+     */
+    get<T>(): T;
+}
+declare namespace _default {
+    export { State };
+    export { createSignal };
+    export { effect };
+    export { Computed };
 }
-export function createSignal(initialValue?: any): Signal
-export function isSignalLike(possibleSignal: any): boolean
-export type Callback = (value: any) => void
+export default _default;
+export type SignalOptions<T> = {
+    equals: (value?: T | null, nextValue?: T | null) => boolean;
+};

package/types/store.d.ts

@@ -4,43 +4,61 @@
 /**
  * @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 {
-  /**
-   * @param {Record<string, Action>} actions
-   * @param {any} [initialValue]
-   * @example
-   * ```js
-   * 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}`))
-   * // change the store
-   * store.increment(2) // increment by 2
-   * //> count is 3
-   * unsubscribe()
-   * ```
-   *
-   * if `initialValue` is an object, the object's reference must be changed
-   * using the spread operator, in order to notify on state changes, e.g.
-   * ```js
-   * const initialValue = { count: 0, other: 'foo' }
-   * const actions = {
-   *  increment: (by = 1) => (state) => ({...state, count: state.count + by})
-   * }
-   * ```
-   */
-  constructor(actions: Record<string, Action>, initialValue?: any)
+export class Store<T> extends State<any> {
+    /**
+     * @param {Record<string, Action>} actions
+     * @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 = Signal.effect(() => console.log(`count is ${store.get()}`))
+     * // change the store
+     * store.increment(2) // increment by 2
+     * //> count is 3
+     * unsubscribe()
+     * ```
+     *
+     * if `initialValue` is an object, the object's reference must be changed
+     * using the spread operator, in order to notify on state changes, e.g.
+     * ```js
+     * const initialValue = { count: 0, other: 'foo' }
+     * const actions = {
+     *   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: Record<string, Action>, initialValue?: T | null | undefined, options?: SignalOptions<T> | undefined);
 }
-export function subscribeToStore(
-  element: MiElement,
-  store: Store,
-  prop: string | string[]
-): void
-export type MiElement = import('./element.js').MiElement
-export type Action = (state: any, data?: any) => any
-import { Signal } from './signal.js'
+export type MiElement = import("./element.js").MiElement;
+export type Action = (state: any, data?: any) => any;
+/**
+ * <T>
+ */
+export type SignalOptions<T> = import("./signal.js").SignalOptions<T>;
+import { State } from './signal.js';

package/types/styling.d.ts

@@ -0,0 +1,8 @@
+export function classMap(map: {
+    [name: string]: string | boolean | number;
+}): string;
+export function styleMap(map: {
+    [name: string]: string | number | undefined | null;
+}, options?: {
+    unit?: string | undefined;
+} | undefined): string;