@ixfx/ui 0.50.3 → 0.56.2

package/dist/src/rx/dom.js

@@ -1,727 +0,0 @@
-import { resolveEl } from "@ixfx/dom";
-import { Pathed } from "@ixfx/core";
-import * as Rx from "@ixfx/rx";
-import * as RxFrom from "@ixfx/rx/from";
-import { findBySomeKey as mapFindBySomeKey } from "@ixfx/core/maps";
-import { afterMatch, beforeMatch, stringSegmentsWholeToEnd, stringSegmentsWholeToFirst } from "@ixfx/core/text";
-import { QueueMutable } from "@ixfx/collections";
-/**
- * Reactive stream of array of elements that match `query`.
- * @param query
- * @returns
- */
-export function fromDomQuery(query) {
-    const elements = [...document.querySelectorAll(query)];
-    return Rx.From.object(elements);
-    /// TODO: MutationObserver to update element list
-}
-/**
- * Updates an element's `textContent` when the source value changes.
- * ```js
- * bindText(source, `#blah`);
- * ```
- * @param elOrQuery
- * @param source
- * @param bindOpts
- */
-export const bindText = (source, elOrQuery, bindOpts = {}) => {
-    return bindElement(source, elOrQuery, { ...bindOpts, elField: `textContent` });
-};
-/**
- * Updates an element's `value` (as well as the 'value' attribute) when the source value changes.s
- * @param source
- * @param elOrQuery
- * @param bindOpts
- * @returns
- */
-export const bindValueText = (source, elOrQuery, bindOpts = {}) => {
-    return bindElement(source, elOrQuery, { ...bindOpts, elField: `value`, attribName: `value` });
-};
-/**
- * Updates an element's `valueAsNumber` (as well as the 'value' attribute) when the source value changes.
- * ```js
- * // Create a reactive number, with a default value of 10
- * const r1 = Rx.From.number(10);
- * // Bind reactive to HTML input element with id 'inputRange'
- * const b1 = Rx.Dom.bindValueRange(r1,`#inputRange`);
- *
- * // Demo: Change the reactive value every second
- * // ...changing the reactive in turn updates the HTML
- * setInterval(() => {
- *  r1.set(Math.floor(Math.random()*100));
- * }, 1000);
- * ```
- * @param source
- * @param elOrQuery
- * @param bindOpts
- * @returns
- */
-// export const bindValueRange = (source: Rx.Reactive<number>, elOrQuery: string | HTMLInputElement | null, bindOpts: Partial<Rx.DomBindInputOptions<number, number>> = {}) => {
-//   const el = validateElement(elOrQuery, `range`);
-//   const b = bindElement<number, number>(source, el, { ...bindOpts, elField: `valueAsNumber`, attribName: `value` });
-//   const twoway = bindOpts.twoway ?? false;
-//   const transformFromInput = bindOpts.transformFromInput ?? ((value) => {
-//     if (typeof value === `number`) return value;
-//     return Number.parseFloat(value);
-//   });
-//   const input = Rx.From.domValueAsNumber(el);
-//   return setupInput(b, input, source, twoway, transformFromInput);
-// }
-// export const bindValueColour = (source: Rx.Reactive<Colour.Colourish>, elOrQuery: string | HTMLInputElement | null, bindOpts: Partial<Rx.DomBindInputOptions<Colour.Colourish, string>> = {}) => {
-//   const el = validateElement(elOrQuery, `color`);
-//   const b = bindElement<Colour.Colourish, string>(source, el, {
-//     ...bindOpts,
-//     elField: `value`,
-//     attribName: `value`,
-//     transform(input) {
-//       console.log(`transform from: ${ JSON.stringify(input) } to hex`);
-//       const c = Colour.resolve(input);
-//       return c.to(`srgb`).toString({ format: `hex`, collapse: false });
-//     },
-//   });
-//   const twoway = bindOpts.twoway ?? false;
-//   const transformFromInput = bindOpts.transformFromInput ?? ((value) => {
-//     const x = Colour.toHsl(value);
-//     console.log(`transformFromInput: ${ value } x: ${ JSON.stringify(x) }`);
-//     return x;
-//   });
-//   const input = Rx.From.domValue<Colour.Hsl>(el, {
-//     domToValue: transformFromInput
-//   });
-//   return setupInput(b, input, source, twoway, transformFromInput);
-// }
-const setupInput = (b, input, source, twoway, transformFromInput) => {
-    input.onValue(value => {
-        const v = transformFromInput(value);
-        if (twoway && Rx.isWritable(source)) {
-            source.set(v);
-        }
-    });
-    const dispose = () => {
-        input.dispose(`bindInput twoway dispose`);
-        b.remove(false);
-    };
-    return { ...b, dispose, input };
-};
-const validateElement = (elOrQuery, type) => {
-    const el = resolveEl(elOrQuery);
-    if (el.nodeName !== `INPUT`)
-        throw new Error(`HTML INPUT element expected. Got: ${el.nodeName}`);
-    if (type !== undefined && el.type !== type)
-        throw new Error(`HTML INPUT element expected with type 'range'. Got: ${el.type}`);
-    return el;
-};
-/**
- * Updates an element's `innerHTML` when the source value changes
- * ```js
- * bindHtml(source, `#blah`);
- * ```
- *
- * Uses {@link bindElement}, with `{elField:'innerHTML'}` as the options.
- * @param elOrQuery
- * @param source
- * @param bindOpts
- * @returns
- */
-export const bindHtml = (source, elOrQuery, bindOpts = {}) => {
-    return bindElement(source, elOrQuery, { ...bindOpts, elField: `innerHTML` });
-};
-/**
- * Shortcut to bind to an elements attribute
- * @param elOrQuery
- * @param source
- * @param attribute
- * @param bindOpts
- * @returns
- */
-// export const bindAttribute = <V>(elOrQuery: string | HTMLElement, source: Rx.Reactive<V>, attribute: string, bindOpts: Partial<DomBindOptions<V>> = {}) => {
-//   return bind(elOrQuery, source, { ...bindOpts, attribName: attribute });
-// }
-/**
- * Shortcut to bind to a CSS variable
- * @param elOrQuery
- * @param source
- * @param cssVariable
- * @param bindOpts
- * @returns
- */
-// export const bindCssVariable = <V>(elOrQuery: string | HTMLElement, source: Rx.Reactive<V>, cssVariable: string, bindOpts: Partial<DomBindOptions<V>> = {}) => {
-//   return bind(elOrQuery, source, { ...bindOpts, cssVariable: cssVariable });
-// }
-/**
- * Creates a new HTML element, calling {@link bind} on it to update when `source` emits new values.
- *
- *
- * ```js
- * // Set textContent of a SPAN with values from `source`
- * create(source, { tagName: `span`, parentEl: document.body })
- * ```
- *
- * If `parentEl` is not given in the options, the created element needs to be manually added
- * ```js
- * const b = create(source);
- * someEl.append(b.el); // Append manually
- * ```
- *
- * ```
- * // Set 'title' attribute based on values from `source`
- * create(source, { parentEl: document.body, attribName: `title` })
- * ```
- * @param source
- * @param options
- * @returns
- */
-// export const create = <V>(source: Rx.Reactive<V>, options: Partial<DomCreateOptions> & Partial<DomBindOptions<V>> = {}): PipeDomBinding => {
-//   const nodeType = options.tagName ?? `DIV`;
-//   const el = document.createElement(nodeType);
-//   const b = bind(el, source, options);
-//   if (options.parentEl) {
-//     const parentElementOrQuery = resolveEl(options.parentEl);
-//     if (parentElementOrQuery === undefined) throw new Error(`Parent element could not be resolved`);
-//     parentElementOrQuery.append(el);
-//   }
-//   return b;
-// }
-/**
- * Update a DOM element's field, attribute or CSS variable when `source` produces a value.
- *
- * ```js
- * // Access via DOM query. Binds to 'textContent' by default
- * bind(readableSource, `#someEl`);
- *
- * // Set innerHTML instead
- * bind(readableSource, someEl, { elField: `innerHTML` });
- *
- * // An attribute
- * bind(readableSource, someEl, { attribName: `width` });
- *
- * // A css variable ('--' optiona)
- * bind(readableSource, someEl, { cssVariable: `hue` });
- *
- * // Pluck a particular field from source data.
- * // Ie someEl.textContent = value.colour
- * bind(readableSource, someEl, { sourceField: `colour` });
- *
- * // Transform value before setting it to field
- * bind(readableSource, someEl, {
- *  field: `innerHTML`,
- *  transform: (v) => `Colour: ${v.colour}`
- * })
- * ```
- *
- * If `source` has an initial value, this is used when first bound.
- *
- * Returns {@link PipeDomBinding} to control binding:
- * ```js
- * const bind = bind(source, `#someEl`);
- * bind.remove();     // Unbind
- * bind.remove(true); // Unbind and remove HTML element
- * ```
- *
- * If several fields need to be updated based on a new value, consider using {@link bindUpdate} instead.
- * @param elOrQuery Element to update to, or query string such as '#someid'
- * @param source Source of data
- * @param binds Bindings
- */
-export const bindElement = (source, elOrQuery, ...binds) => {
-    if (elOrQuery === null)
-        throw new Error(`Param 'elOrQuery' is null`);
-    if (elOrQuery === undefined)
-        throw new Error(`Param 'elOrQuery' is undefined`);
-    const el = resolveEl(elOrQuery);
-    let b = [];
-    if (binds.length === 0) {
-        b.push({ elField: `textContent` });
-    }
-    else {
-        b = [...binds];
-    }
-    const bb = b.map(bind => {
-        if (`element` in bind)
-            return bind;
-        return { ...bind, element: el };
-    });
-    return bind(source, ...bb);
-};
-const resolveBindUpdater = (bind, element) => {
-    const b = resolveBindUpdaterBase(bind);
-    return (value) => {
-        b(value, element);
-    };
-};
-const resolveBindUpdaterBase = (bind) => {
-    if (bind.elField !== undefined || (bind.cssVariable === undefined && bind.attribName === undefined && bind.cssProperty === undefined && bind.textContent === undefined && bind.htmlContent === undefined)) {
-        const field = bind.elField ?? `textContent`;
-        return (v, element) => {
-            element[field] = v;
-        };
-    }
-    if (bind.attribName !== undefined) {
-        const attrib = bind.attribName;
-        return (v, element) => {
-            element.setAttribute(attrib, v);
-        };
-    }
-    if (bind.textContent) {
-        return (v, element) => {
-            element.textContent = v;
-        };
-    }
-    if (bind.htmlContent) {
-        return (v, element) => {
-            element.innerHTML = v;
-        };
-    }
-    if (bind.cssVariable !== undefined) {
-        let css = bind.cssVariable;
-        if (!css.startsWith(`--`))
-            css = `--` + css;
-        return (v, element) => {
-            element.style.setProperty(css, v);
-        };
-    }
-    if (bind.cssProperty !== undefined) {
-        return (v, element) => {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            element.style[bind.cssProperty] = v;
-        };
-    }
-    return (_, _element) => {
-        /** no-op */
-    };
-};
-const resolveTransform = (bind) => {
-    if (!bind.transform && !bind.transformValue)
-        return;
-    if (bind.transformValue) {
-        if (bind.sourceField === undefined)
-            throw new Error(`Expects 'sourceField' to be set when 'transformValue' is set`);
-        return (value) => {
-            const fieldValue = value[bind.sourceField];
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            return bind.transformValue(fieldValue);
-        };
-    }
-    else if (bind.transform) {
-        if (bind.sourceField !== undefined)
-            throw new Error(`If 'transform' is set, 'sourceField' is ignored`);
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return (value) => bind.transform(value);
-    }
-};
-/**
- * Binds `source` to one or more element(s). One or more bindings for the same source
- * can be provided.
- *
- * ```js
- * bind(source,
- *  // Binds .name field of source values to textContent of #some-element
- *  { query: `#some-element`, sourceField: `name` },
- *  { query: `section`, }
- * );
- * ```
- *
- * Can update
- * * CSS variables
- * * CSS styles
- * * textContent / innerHTML
- * * HTML DOM attributes and object fields
- *
- * Can use a particular field on source values, or use the whole value. These can
- * pass through `transformValue` or `transform` respectively.
- *
- * Returns a function to unbind from source and optionally remove HTML element
- * ```js
- * const unbind = bind( . . . );
- * unbind();     // Unbind
- * unbind(true); // Unbind and remove HTML element(s)
- * ```
- * @param source
- * @param bindsUnresolvedElements
- * @returns
- */
-export const bind = (source, ...bindsUnresolvedElements) => {
-    const binds = bindsUnresolvedElements.map(bind => {
-        if (bind.element && bind.element !== undefined)
-            return bind;
-        if (bind.query)
-            return {
-                ...bind,
-                element: resolveEl(bind.query)
-            };
-        throw new Error(`Unable to resolve element. Missing 'element' or 'query' values on bind. ${JSON.stringify(bind)}`);
-    });
-    const bindsResolved = binds.map(bind => ({
-        update: resolveBindUpdater(bind, bind.element),
-        transformer: resolveTransform(bind),
-        sourceField: bind.sourceField
-    }));
-    const update = (value) => {
-        for (const bind of bindsResolved) {
-            if (bind.transformer) {
-                bind.update(bind.transformer(value));
-            }
-            else {
-                const v = (bind.sourceField) ? value[bind.sourceField] : value;
-                if (typeof v === `object`) {
-                    if (bind.sourceField) {
-                        bind.update(JSON.stringify(v));
-                    }
-                    else {
-                        bind.update(JSON.stringify(v));
-                    }
-                }
-                else
-                    bind.update(v);
-            }
-        }
-    };
-    const unsub = source.on(message => {
-        if (Rx.messageHasValue(message)) {
-            update(message.value);
-        }
-        else if (Rx.messageIsSignal(message)) {
-            console.warn(message);
-        }
-    });
-    if (Rx.hasLast(source)) {
-        update(source.last());
-    }
-    return {
-        remove: (removeElements) => {
-            unsub();
-            if (removeElements) {
-                for (const bind of binds) {
-                    bind.element.remove();
-                }
-            }
-        }
-    };
-};
-/**
- * Calls `updater` whenever `source` produces a value. Useful when several fields from a value
- * are needed to update an element.
- * ```js
- * bindUpdate(source, `#someEl`, (v, el) => {
- *  el.setAttribute(`width`, v.width);
- *  el.setAttribute(`height`, v.height);
- * });
- * ```
- *
- * Returns a {@link PipeDomBinding} to manage binding
- * ```js
- * const b = bindUpdate(...);
- * b.remove();     // Disconnect binding
- * b.remove(true); // Disconnect binding and remove element
- * b.el;           // HTML element
- * ```
- * @param elOrQuery
- * @param source
- * @param updater
- * @returns
- */
-export const bindUpdate = (source, elOrQuery, updater) => {
-    const el = resolveEl(elOrQuery);
-    const update = (value) => {
-        updater(value, el);
-    };
-    const unsub = source.on(message => {
-        if (Rx.messageHasValue(message)) {
-            console.log(message);
-            update(message.value);
-        }
-        else {
-            console.warn(message);
-        }
-    });
-    if (Rx.hasLast(source)) {
-        update(source.last());
-    }
-    return {
-        remove: (removeElement) => {
-            unsub();
-            if (removeElement) {
-                el.remove();
-            }
-        }
-    };
-};
-/**
- * Updates a HTML element based on diffs on an object.
- * ```js
- * // Wrap an object
- * const o = Rx.object({ name: `Jane`, ticks: 0 });
- * const b = bindDiffUpdate(`#test`, o, (diffs, el) => {
- *  // el = reference to #test
- * // diff = Array of Changes,
- * //  eg [ { path: `ticks`, value: 797, previous: 0 } ]
- *  for (const diff of diffs) {
- *    if (diff.path === `ticks`) el.textContent = `${diff.previous} -> ${diff.value}`
- *  }
- * })
- *
- * // Eg. update field
- * o.updateField(`ticks`, Math.floor(Math.random()*1000));
- * ```
- *
- * If `initial` is provided as an option, this will be called if `source` has an initial value. Without this, the DOM won't be updated until the first data
- * update happens.
- * ```js
- * bindDiffUpdate(el, source, updater, {
- *  initial: (v, el) => {
- *    el.innerHTML = v.name;
- *  }
- * })
- * ```
- * @param elOrQuery
- * @param source
- * @param updater
- * @param opts
- * @returns
- */
-export const bindDiffUpdate = (source, elOrQuery, updater, opts = {}) => {
-    if (elOrQuery === null)
-        throw new Error(`Param 'elOrQuery' is null`);
-    if (elOrQuery === undefined)
-        throw new Error(`Param 'elOrQuery' is undefined`);
-    const el = resolveEl(elOrQuery);
-    //const binds = opts.binds;
-    const update = (value) => {
-        updater(value, el);
-    };
-    const unsub = source.onDiff(value => {
-        update(value);
-    });
-    const init = () => {
-        if (Rx.hasLast(source) && opts.initial)
-            opts.initial(source.last(), el);
-    };
-    init();
-    return {
-        refresh: () => {
-            init();
-        },
-        remove: (removeElement) => {
-            unsub();
-            if (removeElement) {
-                el.remove();
-            }
-        }
-    };
-};
-/**
- * Creates a new HTML element and calls `bindUpdate` so values from `source` can be used
- * to update it.
- *
- *
- * ```js
- * // Creates a span, adding it to <body>
- * const b = createUpdate(dataSource, (value, el) => {
- *  el.width = value.width;
- *  el.height = value.height;
- * }, {
- *  tagName: `SPAN`,
- *  parentEl: document.body
- * })
- * ```
- * @param source
- * @param updater
- * @param options
- * @returns
- */
-// export const createUpdate = <V>(source: Rx.Reactive<V>, updater: (v: V, el: HTMLElement) => void, options: Partial<DomCreateOptions> = {}): PipeDomBinding => {
-//   const tag = options.tagName ?? `DIV`;
-//   const el = document.createElement(tag);
-//   if (options.parentEl) {
-//     const parent = resolveEl(options.parentEl);
-//     parent.append(el);
-//   }
-//   const b = bindUpdate(source, el, updater);
-//   return b;
-// }
-/**
- * Creates, updates & deletes elements based on pathed values from a reactive.
- *
- * This means that elements are only manipulated if its associated data changes,
- * and elements are not modified if there's no need to.
- * @param source
- * @param options
- */
-export const elements = (source, options) => {
-    const containerEl = options.container ? resolveEl(options.container) : document.body;
-    const defaultTag = options.defaultTag ?? `div`;
-    const elByField = new Map();
-    const binds = new Map();
-    for (const [key, value] of Object.entries(options.binds ?? {})) {
-        const tagName = value.tagName ?? defaultTag;
-        //console.log(`key: ${ key }`);
-        binds.set(key, {
-            ...value,
-            update: resolveBindUpdaterBase(value),
-            transform: resolveTransform(value),
-            tagName,
-            path: key
-        });
-    }
-    const findBind = (path) => {
-        const bind = mapFindBySomeKey(binds, stringSegmentsWholeToEnd(path));
-        if (bind !== undefined)
-            return bind;
-        if (!path.includes(`.`))
-            return binds.get(`_root`);
-    };
-    function* ancestorBinds(path) {
-        for (const p of stringSegmentsWholeToFirst(path)) {
-            //console.log(` ancestorBinds path: ${ path } segment: ${ p }`)
-            if (binds.has(p)) {
-                //console.log(`  bind: ${ p } found: ${ JSON.stringify(binds.get(p)) }`);
-                yield binds.get(p);
-            }
-            else {
-                //console.log(` bind: ${ p } not found`);
-            }
-        }
-        if (binds.has(`_root`) && path.includes(`.`))
-            yield binds.get(`_root`);
-    }
-    const create = (path, value) => {
-        const rootedPath = getRootedPath(path);
-        console.log(`Rx.Dom.elements.create: ${path} rooted: ${rootedPath} value: ${JSON.stringify(value)}`);
-        // Create
-        const bind = findBind(getRootedPath(path));
-        let tagName = defaultTag;
-        if (bind?.tagName)
-            tagName = bind.tagName;
-        const el = document.createElement(tagName);
-        el.setAttribute(`data-path`, path);
-        update(path, el, value);
-        let parentForEl;
-        for (const b of ancestorBinds(rootedPath)) {
-            //console.log(`  path: ${ rootedPath } b: ${ JSON.stringify(b) }`);
-            if (b?.nestChildren) {
-                // Get root of path
-                const absoluteRoot = beforeMatch(path, `.`);
-                const findBy = b.path.replace(`_root`, absoluteRoot);
-                parentForEl = elByField.get(findBy);
-                if (parentForEl === undefined) {
-                    //console.log(`    could not find parent. path: ${ path } b.path: ${ b.path } findBy: ${ findBy }`);
-                }
-                else {
-                    //console.log(`    found parent`);
-                    break;
-                }
-            }
-        }
-        (parentForEl ?? containerEl).append(el);
-        elByField.set(path, el);
-        console.log(`Added el: ${path}`);
-    };
-    const update = (path, el, value) => {
-        console.log(`Rx.dom.update path: ${path} value:`, value);
-        const bind = findBind(getRootedPath(path));
-        if (bind === undefined) {
-            //console.log(`Rx.dom.update   no bind for ${ path }`)
-            if (typeof value === `object`)
-                value = JSON.stringify(value);
-            el.textContent = value;
-        }
-        else {
-            //console.log(`Rx.dom.update   got bind! ${ path } `);
-            if (bind.transform)
-                value = bind.transform(value);
-            bind.update(value, el);
-        }
-    };
-    const changes = (changes) => {
-        const queue = new QueueMutable({}, changes);
-        let d = queue.dequeue();
-        const seenPaths = new Set();
-        while (d !== undefined) {
-            //for (const d of changes) {
-            const path = d.path;
-            if (!(`previous` in d) || d.previous === undefined) {
-                // Create
-                console.log(`Rx.Dom.elements.changes no previous. path: ${path}`);
-                create(path, d.value);
-                const subdata = [...Pathed.getPathsAndData(d.value, false, Number.MAX_SAFE_INTEGER, path)];
-                console.log(subdata);
-                for (const dd of subdata) {
-                    if (!seenPaths.has(dd.path)) {
-                        queue.enqueue(dd);
-                        seenPaths.add(dd.path);
-                    }
-                }
-            }
-            else if (d.value === undefined) {
-                // Delete
-                const el = elByField.get(path);
-                if (el === undefined) {
-                    console.warn(`No element to delete? ${path} `);
-                }
-                else {
-                    console.log(`Rx.Dom.elements.changes delete ${path}`);
-                    el.remove();
-                }
-            }
-            else {
-                // Update
-                const el = elByField.get(path);
-                if (el === undefined) {
-                    console.warn(`Rx.Dom.elements.changes No element to update ? ${path} `);
-                    create(path, d.value);
-                }
-                else {
-                    //console.log(`Rx.Dom.elements.changes Updating ${ path } `, el);
-                    update(path, el, d.value);
-                }
-            }
-            d = queue.dequeue();
-        }
-    };
-    /**
-     * Source has changed
-     */
-    source.onDiff(value => {
-        //console.log(`Rx.Dom.elements diff ${ JSON.stringify(value) } `);
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        changes(value);
-    });
-    // Source has an initial value, use that
-    if (Rx.hasLast(source)) {
-        const last = source.last();
-        // Get data of value as a set of paths and data
-        // but only at first level of depth, because changes() will probe
-        // deeper itself
-        changes([...Pathed.getPathsAndData(last, false, 1)]);
-    }
-};
-/**
- * Replaces the root portion of `path` with the magic keyword `_root`
- * @param path
- * @returns
- */
-const getRootedPath = (path) => {
-    const after = afterMatch(path, `.`);
-    return after === path ? `_root` : `_root.` + after;
-};
-export function win() {
-    const generateRect = () => ({ width: window.innerWidth, height: window.innerHeight });
-    const size = RxFrom.event(window, `resize`, {
-        lazy: `very`,
-        transform: () => generateRect(),
-    });
-    const pointer = RxFrom.event(window, `pointermove`, {
-        lazy: `very`,
-        transform: (args) => {
-            if (args === undefined)
-                return { x: 0, y: 0 };
-            const pe = args;
-            return { x: pe.x, y: pe.y };
-        }
-    });
-    const dispose = (reason = `Reactive.win.dispose`) => {
-        size.dispose(reason);
-        pointer.dispose(reason);
-    };
-    return { dispose, size, pointer };
-}