@thi.ng/rdom 0.6.9 → 0.7.4

package/lib/index.js

@@ -1,753 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var checks = require('@thi.ng/checks');
-var api = require('@thi.ng/api');
-var errors = require('@thi.ng/errors');
-var hiccup = require('@thi.ng/hiccup');
-var prefixes = require('@thi.ng/prefixes');
-var paths = require('@thi.ng/paths');
-var rstream = require('@thi.ng/rstream');
-var strings = require('@thi.ng/strings');
-
-const isSubscribable = (x) => checks.implementsFunction(x, "subscribe");
-const isComponent = (x) => checks.implementsFunction(x, "mount");
-
-const $tree = async (tree, parent, idx = -1) => checks.isArray(tree)
-    ? $treeElem(tree, parent, idx)
-    : isComponent(tree)
-        ? tree.mount(parent, idx)
-        : api.isDeref(tree)
-            ? $tree(tree.deref(), parent)
-            : checks.isNotStringAndIterable(tree)
-                ? $treeIter(tree, parent)
-                : tree != null
-                    ? $el("span", null, tree, parent, idx)
-                    : null;
-const $treeElem = (tree, parent, idx) => {
-    const tag = tree[0];
-    return checks.isString(tag)
-        ? $treeTag(tree, parent, idx)
-        :
-            isComponent(tag)
-                ? tag.mount(parent, idx, ...tree.slice(1))
-                :
-                    checks.isFunction(tag)
-                        ? $tree(tag.apply(null, tree.slice(1)), parent)
-                        :
-                            errors.unsupported(`tag: ${tag}`);
-};
-const $treeTag = (tree, parent, idx) => {
-    const n = tree.length;
-    const { 0: tag, 1: attribs, 2: body } = tree;
-    if (n === 3 && (checks.isString(body) || checks.isNumber(body))) {
-        const tmp = /^\w+/.exec(tag);
-        if (tmp && hiccup.NO_SPANS[tmp[0]]) {
-            parent = $el(tag, attribs, body, parent, idx);
-            return parent;
-        }
-    }
-    parent = $el(tag, attribs, null, parent, idx);
-    for (let i = 2; i < n; i++) {
-        $tree(tree[i], parent);
-    }
-    return parent;
-};
-const $treeIter = (tree, parent) => {
-    for (let t of tree) {
-        $tree(t, parent);
-    }
-    return null;
-};
-const $el = (tag, attribs, body, parent, idx = -1) => {
-    const match = hiccup.RE_TAG.exec(tag);
-    if (match) {
-        attribs = hiccup.mergeEmmetAttribs(Object.assign({}, attribs), match[2], match[3]);
-        tag = match[1];
-    }
-    let el;
-    const qidx = tag.indexOf(":");
-    if (qidx < 0) {
-        el = hiccup.SVG_TAGS[tag]
-            ? document.createElementNS(prefixes.XML_SVG, tag)
-            : document.createElement(tag);
-    }
-    else {
-        el = document.createElementNS(PREFIXES[tag.substr(0, qidx)], tag);
-    }
-    attribs && $attribs(el, attribs);
-    body != null && $text(el, body);
-    parent && $addChild(parent, el, idx);
-    return el;
-};
-const $addChild = (parent, child, idx = -1) => {
-    checks.isNumber(idx)
-        ? idx < 0 || idx >= parent.children.length
-            ? parent.appendChild(child)
-            : parent.insertBefore(child, parent.children[idx])
-        : parent.insertBefore(child, idx);
-};
-const $remove = (el) => el.remove();
-const $moveTo = (newParent, el, idx = -1) => {
-    $remove(el);
-    $addChild(newParent, el, idx);
-};
-const $clear = (el) => ((el.innerHTML = ""), el);
-const $text = (el, body) => {
-    el.innerText = String(api.deref(body));
-};
-const $html = (el, body) => {
-    el.innerHTML = String(api.deref(body));
-};
-const $attribs = (el, attribs) => {
-    for (let id in attribs) {
-        setAttrib(el, id, attribs[id], attribs);
-    }
-};
-const setAttrib = (el, id, val, attribs) => {
-    checks.implementsFunction(val, "deref") && (val = val.deref());
-    const isListener = id.startsWith("on");
-    if (isListener) {
-        if (checks.isString(val)) {
-            el.setAttribute(id, val);
-        }
-        else {
-            id = id.substr(2);
-            checks.isArray(val)
-                ? el.addEventListener(id, val[0], val[1])
-                : el.addEventListener(id, val);
-        }
-        return;
-    }
-    checks.isFunction(val) && (val = val(attribs));
-    checks.isArray(val) && (val = val.join(hiccup.ATTRIB_JOIN_DELIMS[id] || " "));
-    switch (id) {
-        case "class":
-            el.className = checks.isString(val)
-                ? val
-                : hiccup.mergeClasses(el.className, val);
-            break;
-        case "style":
-            $style(el, val);
-            break;
-        case "value":
-            updateValueAttrib(el, val);
-            break;
-        case "data":
-            updateDataAttribs(el, val);
-            break;
-        case "prefix":
-            el.setAttribute(id, checks.isString(val) ? val : hiccup.formatPrefixes(val));
-            break;
-        case "accessKey":
-        case "autocapitalize":
-        case "checked":
-        case "contentEditable":
-        case "dir":
-        case "draggable":
-        case "hidden":
-        case "id":
-        case "indeterminate":
-        case "lang":
-        case "scrollLeft":
-        case "scrollTop":
-        case "selectionEnd":
-        case "selectionStart":
-        case "slot":
-        case "spellcheck":
-        case "tabIndex":
-        case "title":
-            el[id] = val;
-            break;
-        default: {
-            const idx = id.indexOf(":");
-            if (idx < 0) {
-                val === false || val == null
-                    ? el.removeAttribute(id)
-                    : el.setAttribute(id, val);
-            }
-            else {
-                const ns = PREFIXES[id.substr(0, idx)];
-                val === false || val == null
-                    ? el.removeAttributeNS(ns, id)
-                    : el.setAttributeNS(ns, id, val);
-            }
-        }
-    }
-};
-const updateValueAttrib = (el, value) => {
-    let ev;
-    switch (el.type) {
-        case "text":
-        case "textarea":
-        case "password":
-        case "search":
-        case "number":
-        case "email":
-        case "url":
-        case "tel":
-        case "date":
-        case "datetime-local":
-        case "time":
-        case "week":
-        case "month":
-            if ((ev = el.value) !== undefined && checks.isString(value)) {
-                const off = value.length - (ev.length - (el.selectionStart || 0));
-                el.value = value;
-                el.selectionStart = el.selectionEnd = off;
-                break;
-            }
-        default:
-            el.value = value;
-    }
-};
-const updateDataAttribs = (el, attribs) => {
-    const data = el.dataset;
-    for (let id in attribs) {
-        const v = api.deref(attribs[id]);
-        data[id] = checks.isFunction(v) ? v(attribs) : v;
-    }
-};
-const $style = (el, rules) => {
-    if (checks.isString(rules)) {
-        el.setAttribute("style", rules);
-    }
-    else {
-        const style = el.style;
-        for (let id in rules) {
-            let v = api.deref(rules[id]);
-            checks.isFunction(v) && (v = v(rules));
-            style[id] = v != null ? v : "";
-        }
-    }
-};
-const PREFIXES = {
-    svg: prefixes.XML_SVG,
-    xlink: prefixes.XML_XLINK,
-    xmlns: prefixes.XML_XMLNS,
-};
-const registerPrefix = (prefix, url) => {
-    api.assert(!PREFIXES[prefix], `${prefix} already registered: ${PREFIXES[prefix]}`);
-    PREFIXES[prefix] = url;
-};
-
-class RAFScheduler {
-    constructor() {
-        this.tasks = new Map();
-        this.raf = -1;
-    }
-    add(scope, fn) {
-        const tasks = this.tasks.get(scope);
-        tasks ? tasks.push(fn) : this.tasks.set(scope, [fn]);
-        this.raf < 0 &&
-            (this.raf = requestAnimationFrame(this.update.bind(this)));
-    }
-    cancel(scope) {
-        this.tasks.delete(scope);
-    }
-    update() {
-        for (let tasks of this.tasks.values()) {
-            for (let i = tasks.length; --i >= 0; tasks[i]())
-                ;
-        }
-        this.tasks.clear();
-        this.raf = -1;
-    }
-}
-class NullScheduler {
-    add(_, fn) {
-        fn();
-    }
-    cancel() { }
-}
-exports.SCHEDULER = new NullScheduler();
-const setScheduler = (s) => (exports.SCHEDULER = s);
-
-const wrapper = (update) => (tag, attribs, body) => ({
-    el: undefined,
-    async mount(parent, index, state) {
-        this.el = $el(tag, attribs, null, parent, index);
-        update(this.el, state != null ? state : body);
-        return this.el;
-    },
-    async unmount() {
-        $remove(this.el);
-        this.el = undefined;
-    },
-    update(body) {
-        exports.SCHEDULER.add(this, () => this.el && update(this.el, body));
-    },
-});
-const $wrapText = wrapper($text);
-const $wrapHtml = wrapper($html);
-
-function $sub(src, tag, attribs) {
-    return (src.subscribe(new $Sub(checks.isString(tag) ? $wrapText(tag, attribs) : tag)));
-}
-class $Sub extends rstream.Subscription {
-    constructor(inner) {
-        super(undefined, { id: `rdom$sub-${rstream.nextID()}` });
-        this.inner = inner;
-    }
-    async mount(parent, index = -1) {
-        return (this.el = await this.inner.mount(parent, index, this.parent.deref()));
-    }
-    async unmount() {
-        this.unsubscribe();
-        exports.SCHEDULER.cancel(this);
-        this.el = undefined;
-        await this.inner.unmount();
-    }
-    update(x) {
-        this.next(x);
-    }
-    next(x) {
-        exports.SCHEDULER.add(this, () => this.el && this.inner.update(x));
-    }
-}
-class $SubA extends rstream.Subscription {
-    constructor(comp, path) {
-        super(undefined, { id: `rdom$sub-${rstream.nextID()}` });
-        this.comp = comp;
-        this.attr = {};
-        this.setter = paths.defSetterUnsafe(path);
-    }
-    next(a) {
-        const $ = this.comp;
-        exports.SCHEDULER.add($, () => $.el && $attribs($.el, this.setter(this.attr, a)));
-    }
-}
-
-const $compile = (tree) => checks.isArray(tree)
-    ? isComplexComponent(tree)
-        ? complexComponent(tree)
-        : basicComponent(tree)
-    : isComponent(tree)
-        ? tree
-        : isSubscribable(tree)
-            ? $sub(tree, "span")
-            : $wrapText("span", null, tree);
-const walk = (f, x, path = []) => {
-    if (checks.isPlainObject(x)) {
-        for (const k in x) {
-            walk(f, x[k], [...path, k]);
-        }
-    }
-    f(x, path);
-};
-const isComplexComponent = (x) => {
-    if (checks.isPlainObject(x)) {
-        for (const k in x) {
-            if (isComplexComponent(x[k]))
-                return true;
-        }
-    }
-    else if (checks.isArray(x)) {
-        for (let i = 0, n = x.length; i < n; i++) {
-            if (isComplexComponent(x[i]))
-                return true;
-        }
-    }
-    return isSubscribable(x) || isComponent(x);
-};
-const complexComponent = (tree) => ({
-    async mount(parent, index = -1) {
-        this.subs = [];
-        walk((x, path) => {
-            isSubscribable(x) &&
-                this.subs.push(x.subscribe(new $SubA(this, path)));
-        }, tree[1]);
-        this.children = [];
-        this.el = $el(tree[0], tree[1], null, parent, index);
-        for (let i = 2; i < tree.length; i++) {
-            const child = $compile(tree[i]);
-            child.mount(this.el, i - 2);
-            this.children.push(child);
-        }
-        return this.el;
-    },
-    async unmount() {
-        exports.SCHEDULER.cancel(this);
-        if (this.children) {
-            for (let c of this.children) {
-                await c.unmount();
-            }
-        }
-        this.subs && this.subs.forEach((s) => s.unsubscribe());
-        $remove(this.el);
-        this.children = undefined;
-        this.subs = undefined;
-        this.el = undefined;
-    },
-    update() { },
-});
-const basicComponent = (tree) => ({
-    async mount(parent, index = -1) {
-        return (this.el = await $tree(tree, parent, index));
-    },
-    async unmount() {
-        $remove(this.el);
-        this.el = undefined;
-    },
-    update() { },
-});
-
-class Component {
-    async unmount() {
-        this.$remove();
-        this.el = undefined;
-    }
-    update(state) { }
-    $el(tag, attribs, body, parent = this.el, idx) {
-        return $el(tag, attribs, body, parent, idx);
-    }
-    $clear(el = this.el) {
-        return $clear(el);
-    }
-    $compile(tree) {
-        return $compile(tree);
-    }
-    $tree(tree, root = this.el, index) {
-        return $tree(tree, root, index);
-    }
-    $text(body) {
-        this.el && $text(this.el, body);
-    }
-    $html(body) {
-        this.el && $html(this.el, body);
-    }
-    $attribs(attribs, el = this.el) {
-        $attribs(el, attribs);
-    }
-    $style(rules, el = this.el) {
-        $style(el, rules);
-    }
-    $remove(el = this.el) {
-        $remove(el);
-    }
-    $moveTo(newParent, el = this.el, idx) {
-        $moveTo(newParent, el, idx);
-    }
-}
-
-const $input = (stream) => (e) => stream.next(e.target.value);
-const $inputNum = (stream, fallback = 0) => (e) => stream.next(strings.maybeParseFloat(e.target.value, fallback));
-const $inputCheckbox = (stream) => (e) => stream.next(e.target.checked);
-const $inputTrigger = (stream) => () => stream.next(true);
-const $inputFile = (stream) => (e) => stream.next(e.target.files[0]);
-const $inputFiles = (stream) => (e) => stream.next(e.target.files);
-
-const $klist = (src, tag, attribs, childCtor, keyFn) => $sub(src, new KList(tag, attribs, childCtor, keyFn));
-class KList extends Component {
-    constructor(tag, attribs, ctor, keyFn = (_, i) => i) {
-        super();
-        this.tag = tag;
-        this.attribs = attribs;
-        this.ctor = ctor;
-        this.keyFn = keyFn;
-        this.items = [];
-    }
-    async mount(parent, index, state) {
-        this.items = [];
-        this.cache = new Map();
-        this.el = this.$el(this.tag, this.attribs, null, parent, index);
-        this.update(state);
-        return this.el;
-    }
-    async unmount() {
-        this.items.forEach((c) => c.v.unmount());
-        this.$remove();
-        this.el = undefined;
-        this.items = undefined;
-        this.cache = undefined;
-    }
-    async update(curr) {
-        if (!curr)
-            return;
-        const { keyFn, items, ctor, cache, el: parent } = this;
-        const currItems = [];
-        const currCache = new Map();
-        const offsets = new Map();
-        const deltas = new Map();
-        let numPrev = items.length;
-        let numCurr = curr.length;
-        let i;
-        for (i = numPrev; --i >= 0;) {
-            offsets.set(items[i].k, i);
-        }
-        for (i = numCurr; --i >= 0;) {
-            const val = curr[i];
-            const key = keyFn(val, i);
-            let item = cache.get(key);
-            item
-                ? item.v.update(val)
-                : (item = {
-                    k: key,
-                    v: $compile(ctor(val)),
-                });
-            currCache.set(key, (currItems[i] = item));
-            const off = offsets.get(key);
-            off != undefined && deltas.set(key, Math.abs(i - off));
-        }
-        const willMove = new Set();
-        const didMove = new Set();
-        let next;
-        const insert = async (item) => {
-            if (cache.has(item.k)) {
-                $moveTo(parent, item.v.el, next);
-                next = item.v.el;
-            }
-            else {
-                cache.set(item.k, item);
-                next = await item.v.mount(parent, next);
-            }
-            numCurr--;
-        };
-        while (numPrev && numCurr) {
-            const prevItem = items[numPrev - 1];
-            const prevKey = prevItem.k;
-            const currItem = currItems[numCurr - 1];
-            const currKey = currItem.k;
-            if (currItem === prevItem) {
-                next = currItem.v.el;
-                numPrev--;
-                numCurr--;
-            }
-            else if (!currCache.has(prevKey)) {
-                await prevItem.v.unmount();
-                cache.delete(prevKey);
-                numPrev--;
-            }
-            else if (!cache.has(currKey) || willMove.has(currKey)) {
-                await insert(currItem);
-            }
-            else if (didMove.has(prevKey)) {
-                numPrev--;
-            }
-            else if (deltas.get(currKey) > deltas.get(prevKey)) {
-                await insert(currItem);
-                didMove.add(currKey);
-            }
-            else {
-                willMove.add(prevKey);
-                numPrev--;
-            }
-        }
-        while (numPrev--) {
-            const item = items[numPrev];
-            if (!currCache.has(item.k)) {
-                await item.v.unmount();
-                cache.delete(item.k);
-            }
-        }
-        while (numCurr) {
-            await insert(currItems[numCurr - 1]);
-        }
-        this.items = currItems;
-    }
-}
-
-const $list = (src, tag, attribs, ctor, equiv) => $sub(src, new List(tag, attribs, ctor, equiv));
-class List extends Component {
-    constructor(tag, attribs, ctor, equiv = (a, b) => a === b) {
-        super();
-        this.tag = tag;
-        this.attribs = attribs;
-        this.ctor = ctor;
-        this.equiv = equiv;
-    }
-    async mount(parent, index, state) {
-        this.prev = [];
-        this.items = [];
-        this.el = this.$el(this.tag, this.attribs, null, parent, index);
-        this.update(state);
-        return this.el;
-    }
-    async unmount() {
-        this.items.forEach((c) => c.unmount());
-        this.$remove();
-        this.el = undefined;
-        this.items = undefined;
-        this.prev = undefined;
-    }
-    async update(curr) {
-        if (!curr)
-            return;
-        const { ctor, equiv, items, prev, el: parent } = this;
-        const nb = curr.length;
-        let na = prev.length;
-        let n = Math.min(na, nb);
-        for (let i = 0; i < n; i++) {
-            if (!equiv(prev[i], curr[i])) {
-                await items[i].unmount();
-                const val = curr[i];
-                const child = $compile(ctor(val));
-                await child.mount(parent, i);
-                items[i] = child;
-                prev[i] = val;
-            }
-        }
-        if (na < nb) {
-            for (; n < nb; n++) {
-                const val = curr[n];
-                const child = $compile(ctor(val));
-                await child.mount(parent, -1);
-                items[n] = child;
-                prev[n] = val;
-            }
-        }
-        else {
-            while (--na >= nb) {
-                await items[na].unmount();
-                items.pop();
-                prev.pop();
-            }
-        }
-    }
-}
-
-const $object = (src, opts, inner) => new $Object(src, opts, inner);
-const $subObject = (src, opts, inner) => $sub(src, $object(src.deref() || {}, opts, inner));
-class $Object extends Component {
-    constructor(src, opts, ctor) {
-        super();
-        this.ctor = ctor;
-        this.obj = rstream.fromObject(src, opts);
-    }
-    async mount(parent, index = -1, state) {
-        state !== undefined && this.obj.next(state);
-        this.inner = this.$compile(await this.ctor(this.obj.streams));
-        this.el = await this.inner.mount(parent, index);
-        return this.el;
-    }
-    async unmount() {
-        this.obj.done();
-        await this.inner.unmount();
-        this.el = undefined;
-        this.inner = undefined;
-    }
-    update(state) {
-        this.obj.next(state);
-    }
-}
-
-const $promise = (prom, error) => new $Promise(prom, error);
-class $Promise extends Component {
-    constructor(promise, error = (e) => e) {
-        super();
-        this.promise = promise;
-        this.error = error;
-    }
-    async mount(parent, index) {
-        try {
-            this.inner = this.$compile(await this.promise);
-        }
-        catch (e) {
-            this.inner = this.$compile(this.error(e));
-        }
-        return (this.el = await this.inner.mount(parent, index));
-    }
-    async unmount() {
-        await this.inner.unmount();
-        this.inner = undefined;
-        this.el = undefined;
-    }
-}
-
-const $switch = (src, keyFn, ctors, error, loader) => $sub(src, new Switch(keyFn, ctors, error, loader));
-const $refresh = (src, ctor, error, loader) => $switch(src, () => 0, { 0: ctor }, error, loader);
-class Switch extends Component {
-    constructor(keyFn, ctors, error = async (e) => $wrapText("span", {}, e), loader = async () => $wrapText("span", {
-        hidden: true,
-    })) {
-        super();
-        this.keyFn = keyFn;
-        this.ctors = ctors;
-        this.error = error;
-        this.loader = loader;
-    }
-    async mount(parent, index, val) {
-        this.parent = parent;
-        this.index = index;
-        await this.update(val);
-        return this.inner.el;
-    }
-    async unmount() {
-        this.inner && (await this.inner.unmount());
-        this.val = undefined;
-        this.parent = undefined;
-        this.inner = undefined;
-    }
-    async update(val) {
-        this.inner && (await this.inner.unmount());
-        this.inner = undefined;
-        if (val != null) {
-            this.val = val;
-            let loader;
-            if (this.loader) {
-                loader = $compile(await this.loader(val));
-                await loader.mount(this.parent, this.index);
-            }
-            try {
-                const key = this.keyFn(val);
-                const next = this.ctors[key];
-                api.assert(!!next, `missing component for key: ${key}`);
-                this.inner = $compile(await next(val));
-                loader && (await loader.unmount());
-            }
-            catch (e) {
-                if (this.error) {
-                    this.inner = $compile(await this.error(e));
-                    loader && (await loader.unmount());
-                }
-            }
-        }
-        else {
-            this.loader && (this.inner = $compile(await this.loader(val)));
-        }
-        this.inner && (await this.inner.mount(this.parent, this.index));
-    }
-}
-
-exports.$Object = $Object;
-exports.$Promise = $Promise;
-exports.$Sub = $Sub;
-exports.$SubA = $SubA;
-exports.$addChild = $addChild;
-exports.$attribs = $attribs;
-exports.$clear = $clear;
-exports.$compile = $compile;
-exports.$el = $el;
-exports.$html = $html;
-exports.$input = $input;
-exports.$inputCheckbox = $inputCheckbox;
-exports.$inputFile = $inputFile;
-exports.$inputFiles = $inputFiles;
-exports.$inputNum = $inputNum;
-exports.$inputTrigger = $inputTrigger;
-exports.$klist = $klist;
-exports.$list = $list;
-exports.$moveTo = $moveTo;
-exports.$object = $object;
-exports.$promise = $promise;
-exports.$refresh = $refresh;
-exports.$remove = $remove;
-exports.$style = $style;
-exports.$sub = $sub;
-exports.$subObject = $subObject;
-exports.$switch = $switch;
-exports.$text = $text;
-exports.$tree = $tree;
-exports.$wrapHtml = $wrapHtml;
-exports.$wrapText = $wrapText;
-exports.Component = Component;
-exports.KList = KList;
-exports.List = List;
-exports.NullScheduler = NullScheduler;
-exports.RAFScheduler = RAFScheduler;
-exports.Switch = Switch;
-exports.isComponent = isComponent;
-exports.isSubscribable = isSubscribable;
-exports.registerPrefix = registerPrefix;
-exports.setScheduler = setScheduler;