grainjs 0.1.0 → 1.0.2

package/dist/grain-full.debug.js

@@ -1,25 +1,32 @@
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.grainjs = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var computed_1 = require("./lib/computed");
-exports.Computed = computed_1.Computed;
-exports.computed = computed_1.computed;
-__export(require("./lib/dispose"));
-__export(require("./lib/dom"));
-__export(require("./lib/emit"));
-__export(require("./lib/kowrap"));
-__export(require("./lib/obsArray"));
-__export(require("./lib/observable"));
-__export(require("./lib/styled"));
-var subscribe_1 = require("./lib/subscribe");
-exports.Subscription = subscribe_1.Subscription;
-exports.subscribe = subscribe_1.subscribe;
-__export(require("./lib/util"));
+__exportStar(require("./lib/binding"), exports);
+__exportStar(require("./lib/computed"), exports);
+__exportStar(require("./lib/dispose"), exports);
+__exportStar(require("./lib/dom"), exports);
+__exportStar(require("./lib/emit"), exports);
+__exportStar(require("./lib/kowrap"), exports);
+__exportStar(require("./lib/obsArray"), exports);
+__exportStar(require("./lib/observable"), exports);
+__exportStar(require("./lib/pureComputed"), exports);
+__exportStar(require("./lib/styled"), exports);
+__exportStar(require("./lib/subscribe"), exports);
+__exportStar(require("./lib/util"), exports);
+__exportStar(require("./lib/widgets/input"), exports);
+__exportStar(require("./lib/widgets/select"), exports);
 
-},{"./lib/computed":11,"./lib/dispose":12,"./lib/dom":13,"./lib/emit":15,"./lib/kowrap":16,"./lib/obsArray":17,"./lib/observable":18,"./lib/styled":19,"./lib/subscribe":20,"./lib/util":21}],2:[function(require,module,exports){
+},{"./lib/binding":4,"./lib/computed":6,"./lib/dispose":7,"./lib/dom":8,"./lib/emit":16,"./lib/kowrap":17,"./lib/obsArray":18,"./lib/observable":19,"./lib/pureComputed":20,"./lib/styled":21,"./lib/subscribe":22,"./lib/util":23,"./lib/widgets/input":24,"./lib/widgets/select":25}],2:[function(require,module,exports){
 "use strict";
 /**
  * A simple and fast priority queue with a limited interface to push, pop, peek, and get size. It
@@ -30,6 +37,7 @@ __export(require("./lib/util"));
  * returns the most-prior element.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriorityQueue = void 0;
 class PriorityQueue {
     constructor(_isPrior) {
         this._isPrior = _isPrior;
@@ -107,6 +115,7 @@ exports.PriorityQueue = PriorityQueue;
  * call, or of bundleChanges() call, the queue gets processed in order of _priority.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.bundleChanges = exports.compute = exports._getPriority = exports.DepItem = void 0;
 const PriorityQueue_1 = require("./PriorityQueue");
 /**
  * DepItem is an item in a dependency relationship. It may depend on other DepItems. It is used
@@ -119,11 +128,13 @@ class DepItem {
     constructor(callback, optContext) {
         this._priority = 0;
         this._enqueued = false;
+        // Order of creation, used for ordering items at same priority.
+        this._creation = ++_nextCreationNum;
         this._callback = callback;
         this._context = optContext;
     }
     static isPrioritySmaller(a, b) {
-        return a._priority < b._priority;
+        return a._priority < b._priority || (a._priority === b._priority && a._creation < b._creation);
     }
     /**
      * Mark depItem as a dependency of this DepItem. The argument may be null to indicate a leaf (an
@@ -155,6 +166,8 @@ class DepItem {
 exports.DepItem = DepItem;
 // The main compute queue.
 const queue = new PriorityQueue_1.PriorityQueue(DepItem.isPrioritySmaller);
+// Counter for creation order, used to create a stable ordering of DepItems at same priority.
+let _nextCreationNum = 0;
 // Array to keep track of items recomputed during this call to compute(). It could be a local
 // variable in compute(), but is made global to minimize allocations.
 const _seen = [];
@@ -220,707 +233,704 @@ exports.bundleChanges = bundleChanges;
 },{"./PriorityQueue":2}],4:[function(require,module,exports){
 "use strict";
 /**
- * Implementation of UI components that can be inserted into dom(). See documentation for
- * createElem() and create().
+ * binding.ts offers a convenient subscribe() function that creates a binding to an observable, a
+ * a plain value, or a function from which it builds a computed.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-const _domDispose_1 = require("./_domDispose");
-const _domImpl_1 = require("./_domImpl");
-const _domMethods_1 = require("./_domMethods");
-const dispose_1 = require("./dispose");
-// Use the browser globals in a way that allows replacing them with mocks in tests.
-const browserGlobals_1 = require("./browserGlobals");
-/**
- * Helper that takes ownership of a component by mounting it to a parent element.
- */
-class DomOwner {
-    constructor(_parentElem) {
-        this._parentElem = _parentElem;
-    }
-    autoDispose(comp) { comp.mount(this._parentElem); }
-}
-/**
- * A UI component should extend this base class and implement a constructor that creates some DOM
- * and calls this.setContent() with it. Compared to a simple function returning DOM (a
- * "functional" component), a "class" component makes it easier to organize code into methods.
- *
- * In addition, a "class" component may be disposed to remove it from the DOM, although this is
- * uncommon since a UI component is normally owned by its containing DOM.
- */
-class Component extends dispose_1.Disposable {
-    constructor() {
-        super();
-        this._markerPre = browserGlobals_1.G.document.createComment('A');
-        this._markerPost = browserGlobals_1.G.document.createComment('B');
-        this._contentToMount = null;
-        // If the containing DOM is disposed, it will dispose all of our DOM (included among children
-        // of the containing DOM). Let it also dispose this Component when it gets to _markerPost.
-        // Since _unmount() is unnecessary here, we skip its work by unseting _markerPre/_markerPost.
-        _domDispose_1.onDisposeElem(this._markerPost, () => {
-            this._markerPre = this._markerPost = undefined;
-            this.dispose();
-        });
-        // When the component is disposed, unmount the DOM we created (i.e. dispose and remove).
-        // Except that we skip this as unnecessary when the disposal is triggered by containing DOM.
-        this.onDispose(this._unmount, this);
-    }
-    /**
-     * Create a component using Foo.create(owner, ...args) similarly to creating any other
-     * Disposable object. The difference is that `owner` may be a DOM Element, and the content set
-     * by the constructor's setContent() call will be appended to and owned by that owner element.
-     *
-     * If the owner is not an Element, works like a regular Disposable. To add such a component to
-     * DOM, use the mount() method.
-     */
-    // TODO add typescript overloads for strict argument checks.
-    static create(owner, ...args) {
-        const _owner = owner instanceof browserGlobals_1.G.Element ? new DomOwner(owner) : owner;
-        return dispose_1.Disposable.create.call(this, _owner, ...args);
-    }
-    /**
-     * Inserts the content of this component into a parent DOM element.
-     */
-    mount(elem) {
-        // Insert the result of setContent() into the given parent element. Note that mount() must
-        // only ever be called once. It is normally called as part of .create().
-        if (!this._markerPost) {
-            throw new Error('Component mount() called when already disposed');
-        }
-        if (this._markerPost.parentNode) {
-            throw new Error('Component mount() called twice');
-        }
-        _domImpl_1.update(elem, this._markerPre, this._contentToMount, this._markerPost);
-        this._contentToMount = null;
-    }
-    /**
-     * Components should call setContent() with their DOM content, typically in the constructor. If
-     * called outside the constructor, setContent() will replace previously set DOM. It accepts any
-     * DOM Node; use dom.frag() to insert multiple nodes together.
-     */
-    setContent(content) {
-        if (this._markerPost) {
-            if (this._markerPost.parentNode) {
-                // Component is already mounted. Replace previous content.
-                _domMethods_1.replaceContent(this._markerPre, this._markerPost, content);
-            }
-            else {
-                // Component is created but not yet mounted. Save the content for the mount() call.
-                this._contentToMount = content;
-            }
+exports.subscribeElem = exports.subscribeBindable = void 0;
+const computed_1 = require("./computed");
+const domDispose_1 = require("./domDispose");
+const observable_1 = require("./observable");
+const subscribe_1 = require("./subscribe");
+function subscribeBindable(valueObs, callback) {
+    // A plain function (to make a computed from), or a knockout observable.
+    if (typeof valueObs === 'function') {
+        // Knockout observable.
+        const koValue = valueObs;
+        if (typeof koValue.peek === 'function') {
+            const sub = koValue.subscribe((val) => callback(val));
+            callback(koValue.peek());
+            return sub;
         }
+        // Function from which to make a computed. Note that this is also reasonable:
+        //    let sub = subscribe(use => callback(valueObs(use)));
+        // The difference is that when valueObs() evaluates to unchanged value, callback would be
+        // called in the version above, but not in the version below.
+        const comp = computed_1.computed(valueObs);
+        comp.addListener((val) => callback(val));
+        callback(comp.get());
+        return comp; // Disposing this will dispose its one listener.
     }
-    /**
-     * Detaches and disposes the DOM created and attached in mount().
-     */
-    _unmount() {
-        // Dispose the owned content, and remove it from the DOM. The conditional skips the work when
-        // the unmounting is triggered by the disposal of the containing DOM.
-        if (this._markerPost && this._markerPost.parentNode) {
-            const elem = this._markerPost.parentNode;
-            _domMethods_1.replaceContent(this._markerPre, this._markerPost, null);
-            elem.removeChild(this._markerPre);
-            elem.removeChild(this._markerPost);
-        }
-        this._markerPre = this._markerPost = undefined;
+    // An observable.
+    if (valueObs instanceof observable_1.BaseObservable) {
+        // Use subscribe() rather than addListener(), so that bundling of changes (implicit and with
+        // bundleChanges()) is respected. This matters when callback also uses observables.
+        return subscribe_1.subscribe(valueObs, (use, val) => callback(val));
     }
+    callback(valueObs);
+    return null;
 }
-exports.Component = Component;
-/**
- * Construct and insert a UI component into the given DOM element. The component must extend
- * dom.Component, and should build DOM and call setContent(DOM) in the constructor. DOM may be any
- * Node. Use dom.frag() to insert multiple nodes together.
- *
- * Logically, the parent `elem` owns the created component, and the component owns the DOM set by
- * setContent(). If the parent is disposed, so is the component and its DOM. If the component is
- * somehow disposed directly, then its DOM is disposed and removed from `elem`.
- *
- * Note the correct usage:
- *
- *       dom('div', dom.create(Comp1), dom.create(Comp2, ...args))
- *
- * To understand why the syntax is such, consider a potential alterntive such as:
- *
- *       dom('div', _insert_(new Comp1()), _insert_(new Comp2(...args))
- *
- *    In both cases, the constructor for Comp1 runs before the constructor for Comp2. What happens
- *    when Comp2's constructor throws an exception? In the second case, nothing yet owns the
- *    created Comp1 component, and it will never get cleaned up. In the first, correct case,
- *    dom('div') element gets ownership of it early enough and will dispose it.
- *
- * @param {Element} elem: The element to which to append the newly constructed component.
- * @param {Class} ComponentClass: The component class to instantiate. It must extend
- *    dom.Component(...) and implement the render() method.
- * @param {Objects} ...args: Arguments to the Component's constructor.
- */
-// TODO add typescript overloads for strict argument checks.
-function create(cls, ...args) {
-    return (elem) => { cls.create(elem, ...args); };
-}
-exports.create = create;
+exports.subscribeBindable = subscribeBindable;
 /**
- * If you need to initialize a component after creation, you may do it in the middle of a dom()
- * call using createInit(), in which the last of args is initFunc: a function called with the
- * constructed instance of the component:
- *    dom.createInit(MyComponent, ...args, c => {
- *      c.addChild(...);
- *      c.setOption(...);
- *    });
- * The benefit of such inline construction is that the component is owned by the dom element as
- * soon as it's created, so an exception in the init function or later among dom()'s arguments
- * will trigger a cleanup.
+ * Subscribes a callback to valueObs (which may be a value, observable, or function) using
+ * subscribe(), and disposes the subscription with the passed-in element.
  */
-function createInit(cls, ...args) {
-    return (elem) => {
-        const initFunc = args.pop();
-        const c = cls.create(elem, ...args);
-        initFunc(c);
-    };
+function subscribeElem(elem, valueObs, callback) {
+    domDispose_1.autoDisposeElem(elem, subscribeBindable(valueObs, callback));
 }
-exports.createInit = createInit;
+exports.subscribeElem = subscribeElem;
 
-},{"./_domDispose":5,"./_domImpl":7,"./_domMethods":8,"./browserGlobals":10,"./dispose":12}],5:[function(require,module,exports){
+},{"./computed":6,"./domDispose":11,"./observable":19,"./subscribe":22}],5:[function(require,module,exports){
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 /**
- * Private global disposal map. It maintains the association between DOM nodes and cleanup
- * functions added with dom.onDispose(). To support multiple disposers on one element, we use a
- * WeakMap-based linked list:
+ * Module that allows client-side code to use browser globals (such as `document` or `Node`) in a
+ * way that allows those globals to be replaced by mocks in browser-less tests.
  *
- *    _disposeMap[elem] = disposer2;
- *    _disposeMap[disposer2] = disposer1;
- *    etc.
+ *    import {G} from 'browserGlobals';
+ *    ... use G.document
+ *    ... use G.Node
  *
- * This avoids allocating arrays or using undeclared properties for a different linked list.
- */
-const _disposeMap = new WeakMap();
-// Internal helper to walk the DOM tree, calling visitFunc(elem) on all descendants of elem.
-// Descendants are processed first.
-function _walkDom(elem, visitFunc) {
-    let c = elem.firstChild;
-    while (c) {
-        // Note: this might be better done using an explicit stack, but in practice DOM trees aren't
-        // so deep as to cause problems.
-        _walkDom(c, visitFunc);
-        c = c.nextSibling;
-    }
-    visitFunc(elem);
-}
-// Internal helper to run all disposers for a single element.
-function _disposeElem(elem) {
-    let disposer = _disposeMap.get(elem);
-    if (disposer) {
-        let key = elem;
-        do {
-            _disposeMap.delete(key);
-            disposer(elem);
-            // Find the next disposer; these are chained when there are multiple.
-            key = disposer;
-            disposer = _disposeMap.get(key);
-        } while (disposer);
-    }
-}
-/**
- * Run disposers associated with any descendant of elem or with elem itself. Disposers get
- * associated with elements using dom.onDispose(). Descendants are processed first.
+ * Initially, the global `window` object, is the source of the global values.
  *
- * It is automatically called if one of the function arguments to dom() throws an exception during
- * element creation. This way any onDispose() handlers set on the unfinished element get called.
+ * To use a mock of globals in a test, use:
  *
- * @param {Element} elem: The element to run disposers on.
+ *    import {pushGlobals, popGlobals} as G from 'browserGlobals';
+ *    before(function() {
+ *      pushGlobals(mockWindow);    // e.g. jsdom.jsdom(...).defaultView
+ *    });
+ *    after(function() {
+ *      popGlobals();
+ *    });
  */
-function domDispose(elem) {
-    _walkDom(elem, _disposeElem);
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popGlobals = exports.pushGlobals = exports.G = void 0;
+;
+function _updateGlobals(dest, source) {
+    dest.DocumentFragment = source.DocumentFragment;
+    dest.Element = source.Element;
+    dest.Node = source.Node;
+    dest.document = source.document;
+    dest.window = source.window;
 }
-exports.domDispose = domDispose;
+// The initial IBrowserGlobals object.
+const initial = {};
+_updateGlobals(initial, (typeof window !== 'undefined' ? window : {}));
+// The globals G object strats out with a copy of `initial`.
+exports.G = Object.assign({}, initial);
+// The stack of globals that always has the intial object, but which may be overridden.
+const _globalsStack = [initial];
 /**
- * Associate a disposerFunc with a DOM element. It will be called when the element is disposed
- * using domDispose() on it or any of its parents. If onDispose is called multiple times, all
- * disposerFuncs will be called in reverse order.
- * @param {Element} elem: The element to associate the disposer with.
- * @param {Function} disposerFunc(elem): Will be called when domDispose() is called on the
- *    element or its ancestor.
- * Note that it is not necessary usually to dispose event listeners attached to an element (e.g.
- * with dom.on()) since their lifetime is naturally limited to the lifetime of the element.
+ * Replace globals with those from the given object. Use popGlobals() to restore previous values.
  */
-function onDisposeElem(elem, disposerFunc) {
-    const prevDisposer = _disposeMap.get(elem);
-    _disposeMap.set(elem, disposerFunc);
-    if (prevDisposer) {
-        _disposeMap.set(disposerFunc, prevDisposer);
-    }
-}
-exports.onDisposeElem = onDisposeElem;
-function onDispose(disposerFunc) {
-    return (elem) => onDisposeElem(elem, disposerFunc);
+function pushGlobals(globals) {
+    _globalsStack.push(globals);
+    _updateGlobals(exports.G, globals);
 }
-exports.onDispose = onDispose;
+exports.pushGlobals = pushGlobals;
 /**
- * Make the given element own the disposable, and call its dispose method when domDispose() is
- * called on the element or any of its parents.
- * @param {Element} elem: The element to own the disposable.
- * @param {Disposable} disposable: Anything with a .dispose() method.
+ * Restore the values of globals to undo the preceding pushGlobals() call.
  */
-function autoDisposeElem(elem, disposable) {
-    if (disposable) {
-        onDisposeElem(elem, () => disposable.dispose());
-    }
-}
-exports.autoDisposeElem = autoDisposeElem;
-function autoDispose(disposable) {
-    if (disposable) {
-        return (elem) => autoDisposeElem(elem, disposable);
+function popGlobals() {
+    if (_globalsStack.length > 1) {
+        _globalsStack.pop();
     }
+    _updateGlobals(exports.G, _globalsStack[_globalsStack.length - 1]);
 }
-exports.autoDispose = autoDispose;
+exports.popGlobals = popGlobals;
 
 },{}],6:[function(require,module,exports){
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const _domDispose_1 = require("./_domDispose");
-const _domImpl_1 = require("./_domImpl");
-const _domMethods_1 = require("./_domMethods");
-const obsArray_1 = require("./obsArray");
-// Use the browser globals in a way that allows replacing them with mocks in tests.
-const browserGlobals_1 = require("./browserGlobals");
 /**
- * Creates DOM elements for each element of an observable array. As the array is changed, children
- * are added or removed. This works for any array-valued observable, and for obsArray() and
- * computedArray() it works more efficiently for simple changes.
+ * computed.js implements a computed observable, whose value depends on other observables and gets
+ * recalculated automatically when they change.
  *
- * The given itemCreateFunc() should return a single DOM node for each item, or null to skip that
- * item. It is called for new items whenever they are spliced in, or the array replaced. The
- * forEach() owns the created nodes, and runs domDispose() on them when they are spliced out.
+ * E.g. if we have some existing observables (which may themselves be instances of `computed`),
+ * we can create a computed that subscribes to them explicitly:
+ *  let obs1 = observable(5), obs2 = observable(12);
+ *  let computed1 = computed(obs1, obs2, (use, v1, v2) => v1 + v2);
  *
- * If the created nodes are removed from their parent externally, forEach() will cope with it, but
- * will consider these elements as no longer owned, and will not run domDispose() on them.
+ * or implicitly by using `use(obs)` function:
+ *  let computed2 = computed(use => use(obs1) + use(obs2));
  *
- * Note that itemCreateFunc() does not receive an index: an index would only be correct at the
- * time the item is created, and would not reflect further changes to the array.
+ * In either case, computed1.get() and computed2.get() will have the value 17. If obs1 or obs2 is
+ * changed, computed1 and computed2 will get recomputed automatically.
  *
- * If you'd like to map the DOM node back to its source item, use dom.data() and dom.getData() in
- * itemCreateFunc().
- */
-function forEach(obsArray, itemCreateFunc) {
-    return (elem) => {
-        const markerPre = browserGlobals_1.G.document.createComment('a');
-        const markerPost = browserGlobals_1.G.document.createComment('b');
-        elem.appendChild(markerPre);
-        elem.appendChild(markerPost);
-        if (Array.isArray(obsArray)) {
-            _domMethods_1.replaceContent(markerPre, markerPost, obsArray.map(itemCreateFunc));
-            return;
-        }
-        const nodes = obsArray_1.computedArray(obsArray, itemCreateFunc);
-        nodes.addListener((newArr, oldArr, splice) => {
-            if (splice) {
-                // Remove the elements that are gone.
-                for (const node of splice.deleted) {
-                    if (node && node.parentNode === elem) {
-                        _domDispose_1.domDispose(node);
-                        elem.removeChild(node);
-                    }
-                }
-                if (splice.numAdded > 0) {
-                    // Find a valid child immediately following the spliced out portion, for DOM insertion.
-                    const endIndex = splice.start + splice.numAdded;
-                    let nextElem = markerPost;
-                    for (let i = endIndex; i < newArr.length; i++) {
-                        const node = newArr[i];
-                        if (node && node.parentNode === elem) {
-                            nextElem = node;
-                            break;
-                        }
-                    }
-                    // Insert the new elements.
-                    const content = _domImpl_1.frag(newArr.slice(splice.start, endIndex));
-                    elem.insertBefore(content, nextElem);
-                }
-            }
-            else {
-                _domMethods_1.replaceContent(markerPre, markerPost, newArr);
-            }
-        });
-        _domMethods_1.replaceContent(markerPre, markerPost, nodes.get());
-    };
-}
-exports.forEach = forEach;
-
-},{"./_domDispose":5,"./_domImpl":7,"./_domMethods":8,"./browserGlobals":10,"./obsArray":17}],7:[function(require,module,exports){
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const _domDispose_1 = require("./_domDispose");
-const _domMethods_1 = require("./_domMethods");
-// Use the browser globals in a way that allows replacing them with mocks in tests.
-const browserGlobals_1 = require("./browserGlobals");
-// The goal of the above declarations is to get help from TypeScript in detecting incorrect usage:
-//  import {text, hide} from './_domMethods';
-//  dom('div', text('hello'));        // OK
-//  dom('div', hide(true));           // OK
-//  dom('div', {title: 'hello'});     // OK
-//  frag(text('hello'));              // OK
-//  frag(hide(true));                 // Bad: DocumentFragment is not an Element
-//  frag({title: 'hello'});           // Bad: DocumentFragment is not an Element
-/**
- * dom('tag#id.class1.class2', ...args)
- *   The first argument is a string consisting of a tag name, with optional #foo suffix
- *   to add the ID 'foo', and zero or more .bar suffixes to add a CSS class 'bar'.
+ * Creating a computed allows any number of dependencies to be specified explicitly, and their
+ * values will be passed to the read() callback. These may be combined with automatic dependencies
+ * detected using use(). Note that constructor dependencies have less overhead.
  *
- * The rest of the arguments are optional and may be:
+ *  let val = computed(...deps, ((use, ...depValues) => READ_CALLBACK));
  *
- *   Nodes - which become children of the created element;
- *   strings - which become text node children;
- *   objects - of the form {attr: val} to set additional attributes on the element;
- *   Arrays - which are flattened with each item processed recursively;
- *   functions - which are called with elem as the argument, for a chance to modify the
- *       element as it's being created. Return values are processed recursively.
- *   "dom methods" - expressions such as `dom.attr('href', url)` or `dom.hide(obs)`, which
- *       are actually special cases of the "functions" category.
- */
-function dom(tagString, ...args) {
-    return _updateWithArgsOrDispose(_createFromTagString(_createElementHtml, tagString), args);
-}
-exports.dom = dom;
-/**
- * svg('tag#id.class1.class2', ...args)
- *  Same as dom(...), but creates an SVG element.
- */
-function svg(tagString, ...args) {
-    return _updateWithArgsOrDispose(_createFromTagString(_createElementSvg, tagString), args);
-}
-exports.svg = svg;
-// Internal helper used to create HTML elements.
-function _createElementHtml(tag) {
-    return browserGlobals_1.G.document.createElement(tag);
-}
-// Internal helper used to create SVG elements.
-function _createElementSvg(tag) {
-    return browserGlobals_1.G.document.createElementNS("http://www.w3.org/2000/svg", tag);
-}
-/**
- * Internal helper to parse tagString, create an element using createFunc with the given tag, and
- * set its id and classes from the tagString.
- * @param {Funtion} createFunc(tag): Function that should create an element given a tag name.
- *    It is passed in to allow creating elements in different namespaces (e.g. plain HTML vs SVG).
- * @param {String} tagString: String of the form "tag#id.class1.class2" where id and classes are
- *    optional.
- * @return {Element} The result of createFunc(), possibly with id and class attributes also set.
+ * You may specify a `write` callback by calling `onWrite(WRITE_CALLBACK)`, which will be called
+ * whenever set() is called on the computed by its user. If a `write` bacllback is not specified,
+ * calling `set` on a computed observable will throw an exception.
+ *
+ * Note that pureComputed.js offers a variation of computed() with the same interface, but which
+ * stays unsubscribed from dependencies while it itself has no subscribers.
+ *
+ * A computed may be used with a disposable value using `use.owner` as the value's owner. E.g.
+ *    let val = computed((use) => Foo.create(use.owner, use(a), use(b)));
+ *
+ * When the computed() is re-evaluated, and when it itself is disposed, it disposes the previously
+ * owned value. Note that only the pattern above works, i.e. use.owner may only be used to take
+ * ownership of the same disposable that the callback returns.
  */
-function _createFromTagString(createFunc, tagString) {
-    // We do careful hand-written parsing rather than use a regexp for speed. Using a regexp is
-    // significantly more expensive.
-    let tag;
-    let id;
-    let classes;
-    let dotPos = tagString.indexOf(".");
-    const hashPos = tagString.indexOf('#');
-    if (dotPos === -1) {
-        dotPos = tagString.length;
-    }
-    else {
-        classes = tagString.substring(dotPos + 1).replace(/\./g, ' ');
-    }
-    if (hashPos === -1) {
-        tag = tagString.substring(0, dotPos);
-    }
-    else if (hashPos > dotPos) {
-        throw new Error(`ID must come before classes in dom("${tagString}")`);
-    }
-    else {
-        tag = tagString.substring(0, hashPos);
-        id = tagString.substring(hashPos + 1, dotPos);
-    }
-    const elem = createFunc(tag);
-    if (id) {
-        elem.setAttribute('id', id);
-    }
-    if (classes) {
-        elem.setAttribute('class', classes);
-    }
-    return elem;
-}
-function update(elem, ...args) {
-    return _updateWithArgs(elem, args);
-}
-exports.update = update;
-function _updateWithArgs(elem, args) {
-    for (const arg of args) {
-        _updateWithArg(elem, arg);
-    }
-    return elem;
-}
-function _updateWithArgsOrDispose(elem, args) {
-    try {
-        return _updateWithArgs(elem, args);
-    }
-    catch (e) {
-        _domDispose_1.domDispose(elem);
-        throw e;
-    }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computed = exports.Computed = void 0;
+const dispose_1 = require("./dispose");
+const observable_1 = require("./observable");
+const subscribe_1 = require("./subscribe");
+function _noWrite() {
+    throw new Error("Can't write to non-writable computed");
 }
-function _updateWithArg(elem, arg) {
-    if (typeof arg === 'function') {
-        const value = arg(elem);
-        // Skip the recursive call in the common case when the function returns nothing.
-        if (value !== undefined && value !== null) {
-            _updateWithArg(elem, value);
-        }
+class Computed extends observable_1.Observable {
+    /**
+     * Internal constructor for a Computed observable. You should use computed() function instead.
+     */
+    constructor(callback, dependencies) {
+        // At initialization we force an undefined value even though it's not of type T: it gets set
+        // to a proper value during the creation of new Subscription, which calls this._read.
+        super(undefined);
+        this._callback = callback;
+        this._write = _noWrite;
+        this._sub = new subscribe_1.Subscription(this._read.bind(this), dependencies, this);
     }
-    else if (Array.isArray(arg)) {
-        _updateWithArgs(elem, arg);
+    /**
+     * Creates a new Computed, owned by the given owner.
+     * @param owner: Object to own this Computed, or null to handle disposal manually.
+     * @param ...observables: Zero or more observables on which this computes depends. The callback
+     *        will get called when any of these changes.
+     * @param callback: Read callback that will be called with (use, ...values),
+     *    i.e. the `use` function and values for all of the ...observables. The callback is called
+     *    immediately and whenever any dependency changes.
+     * @returns {Computed} The newly created computed observable.
+     */
+    static create(owner, ...args) {
+        const readCb = args.pop();
+        return dispose_1.setDisposeOwner(owner, new Computed(readCb, args));
     }
-    else if (arg === undefined || arg === null) {
-        // Nothing to do.
+    /**
+     * Used by subscriptions to keep track of dependencies.
+     */
+    _getDepItem() {
+        return this._sub._getDepItem();
     }
-    else if (arg instanceof browserGlobals_1.G.Node) {
-        elem.appendChild(arg);
+    /**
+     * "Sets" the value of the computed by calling the write() callback if one was provided in the
+     * constructor. Throws an error if there was no such callback (not a "writable" computed).
+     * @param {Object} value: The value to pass to the write() callback.
+     */
+    set(value) { this._write(value); }
+    /**
+     * Set callback to call when this.set(value) is called, to make it a writable computed. If not
+     * set, attempting to write to this computed will throw an exception.
+     */
+    onWrite(writeFunc) {
+        this._write = writeFunc;
+        return this;
     }
-    else if (typeof arg === 'object') {
-        _domMethods_1.attrsElem(elem, arg);
+    /**
+     * Disposes the computed, unsubscribing it from all observables it depends on.
+     */
+    dispose() {
+        this._sub.dispose();
+        super.dispose();
     }
-    else {
-        elem.appendChild(browserGlobals_1.G.document.createTextNode(arg));
+    _read(use, ...args) {
+        super.set(this._callback(use, ...args));
     }
 }
+exports.Computed = Computed;
 /**
- * Creates a DocumentFragment processing arguments the same way as the dom() function.
+ * Creates a new Computed.
+ * @param {Observable} ...observables: The initial params, of which there may be zero or more, are
+ *    observables on which this computed depends. When any of them change, the read() callback
+ *    will be called with the values of these observables as arguments.
+ * @param {Function} readCallback: Read callback that will be called with (use, ...values),
+ *    i.e. the `use` function and values for all of the ...observables. The callback is called
+ *    immediately and whenever any dependency changes.
+ * @returns {Computed} The newly created computed observable.
  */
-function frag(...args) {
-    const elem = browserGlobals_1.G.document.createDocumentFragment();
-    return _updateWithArgsOrDispose(elem, args);
+function computed(...args) {
+    const readCb = args.pop();
+    return new Computed(readCb, args);
 }
-exports.frag = frag;
-/**
- * Find the first element matching a selector; just an abbreviation for document.querySelector().
- */
-function find(selector) { return browserGlobals_1.G.document.querySelector(selector); }
-exports.find = find;
-/**
- * Find all elements matching a selector; just an abbreviation for document.querySelectorAll().
- */
-function findAll(selector) { return browserGlobals_1.G.document.querySelectorAll(selector); }
-exports.findAll = findAll;
+exports.computed = computed;
+// TODO Consider implementing .singleUse() method.
+// An open question is in how to pass e.g. kd.hide(computed(x, x => !x)) in such a way that
+// the temporary computed can be disposed when temporary, but not otherwise. A function-only
+// syntax is kd.hide(use => !use(x)), but prevents use of static subscriptions.
+//
+// (a) function-only use of computeds is fine and useful.
+// (b) pureComputed is another option, and doesn't technically require getting disposed.
+// (c) kd.hide(compObs), kd.autoDispose(compObs) is more general and
+//     can be replaced more concisely by kd.hide(compObs.singleUse())
+// .singleUse() automatically disposes a computed (or an observable?) once there are no
+// subscriptions to it. If there are no subscriptions at the time of this call, waits for the next
+// tick, and possibly disposes then.
 
-},{"./_domDispose":5,"./_domMethods":8,"./browserGlobals":10}],8:[function(require,module,exports){
+},{"./dispose":7,"./observable":19,"./subscribe":22}],7:[function(require,module,exports){
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const _domDispose_1 = require("./_domDispose");
-const _domImpl_1 = require("./_domImpl");
-const binding_1 = require("./binding");
-// Use the browser globals in a way that allows replacing them with mocks in tests.
-const browserGlobals_1 = require("./browserGlobals");
 /**
- * Private global map for associating arbitrary data with DOM. It's a WeakMap, so does not prevent
- * values from being garbage collected when the owning DOM elements are no longer used.
+ * dispose.js provides tools to objects that needs to dispose resources, such as destroy DOM, and
+ * unsubscribe from events. The motivation with examples is presented here:
+ *
+ *    https://phab.getgrist.com/w/disposal/
+ *
+ * Disposable is a class for components that need cleanup (e.g. maintain DOM, listen to events,
+ * subscribe to anything). It provides a .dispose() method that should be called to destroy the
+ * component, and .onDispose()/.autoDispose() methods that the component should use to take
+ * responsibility for other pieces that require cleanup.
+ *
+ * To define a disposable class:
+ *    class Foo extends Disposable { ... }
+ *
+ * To create Foo:
+ *    const foo = Foo.create(owner, ...args);
+ * This is better than `new Foo` for two reasons:
+ *    1. If Foo's constructor throws an exception, any disposals registered in that constructor
+ *       before the exception are honored.
+ *    2. It ensures you specify the owner of the new instance (but you can use null to skip it).
+ *
+ * In Foo's constructor (or rarely methods), take ownership of other Disposable objects:
+ *    this.bar = Bar.create(this, ...);
+ *
+ * For objects that are not instances of Disposable but have a .dispose() methods, use:
+ *    this.bar = this.autoDispose(createSomethingDisposable());
+ *
+ * To call a function on disposal (e.g. to add custom disposal logic):
+ *    this.onDispose(() => this.myUnsubscribeAllMethod());
+ *    this.onDispose(this.myUnsubscribeAllMethod, this);    // slightly more efficient
+ *
+ * To mark this object to be wiped out on disposal (i.e. set all properties to null):
+ *    this.wipeOnDispose();
+ * See the documentation of that method for more info.
+ *
+ * To dispose Foo directly:
+ *    foo.dispose();
+ * To determine if an object has already been disposed:
+ *    foo.isDisposed()
+ *
+ * If you need to replace an owned object, or release, or dispose it early, use a Holder:
+ *    this._holder = Holder.create(this);
+ *    Bar.create(this._holder, 1);      // creates new Bar(1)
+ *    Bar.create(this._holder, 2);      // creates new Bar(2) and disposes previous object
+ *    this._holder.clear();             // disposes contained object
+ *    this._holder.release();           // releases contained object
+ *
+ * If you need a container for multiple objects and dispose them all together, use a MultiHolder:
+ *    this._mholder = MultiHolder.create(null);
+ *    Bar.create(this._mholder, 1);     // create new Bar(1)
+ *    Bar.create(this._mholder, 2);     // create new Bar(2)
+ *    this._mholder.dispose();          // disposes both objects
+ *
+ * If creating your own class with a dispose() method, do NOT throw exceptions from dispose().
+ * These cannot be handled properly in all cases. Read here about the same issue in C++:
+ *    http://bin-login.name/ftp/pub/docs/programming_languages/cpp/cffective_cpp/MAGAZINE/SU_FRAME.HTM#destruct
+ *
+ * Using a parametrized (generic) class as a Disposable is tricky. E.g.
+ *    class Bar<T> extends Disposable { ... }
+ *    // Bar<T>.create(...)   <-- doesn't work
+ *    // Bar.create<T>(...)   <-- doesn't work
+ *    // Bar.create(...)      <-- works, but with {} for Bar's type parameters
+ *
+ * The solution is to expose the constructor type using a helper method:
+ *    class Bar<T> extends Disposable {
+ *      // Note the tuple below which must match the constructor parameters of Bar<U>.
+ *      public static ctor<U>(): IDisposableCtor<Bar<U>, [U, boolean]> { return this; }
+ *      constructor(a: T, b: boolean) { ... }
+ *    }
+ *    Bar.ctor<T>().create(...)   // <-- works, creates Bar<T>, and does type-checking!
  */
-const _dataMap = new WeakMap();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setDisposeOwner = exports.MultiHolder = exports.Holder = exports.Disposable = void 0;
+const emit_1 = require("./emit");
+// Internal "owner" of disposable objects which doesn't actually dispose or keep track of them. It
+// is the effective owner when creating a Disposable with `new Foo()` rather than `Foo.create()`.
+const _noopOwner = {
+    autoDispose(obj) { },
+};
+// Newly-created Disposable instances will have this as their owner. This is not a constant, it
+// is used by create() for the safe creation of Disposables.
+let _defaultDisposableOwner = _noopOwner;
 /**
- * Internal helper that binds the callback to valueObs, which may be a value, observble, or
- * function, and attaches a disposal callback to the passed-in element.
+ * Base class for disposable objects that can own other objects. See the module documentation.
  */
-function _subscribe(elem, valueObs, callback) {
-    _domDispose_1.autoDisposeElem(elem, binding_1.subscribe(valueObs, callback));
-}
-/**
- * Sets multiple attributes of a DOM element. The `attrs()` variant takes no `elem` argument.
- * Null and undefined values are omitted, and booleans are either omitted or set to empty string.
- * @param {Object} attrsObj: Object mapping attribute names to attribute values.
- */
-function attrsElem(elem, attrsObj) {
-    for (const key of Object.keys(attrsObj)) {
-        const val = attrsObj[key];
-        if (val != null && val !== false) {
-            elem.setAttribute(key, val === true ? '' : val);
+class Disposable {
+    constructor() {
+        this._disposalList = new DisposalList();
+        // This registers with a temp Holder when using create(), and is a no-op when using `new Foo`.
+        _defaultDisposableOwner.autoDispose(this);
+        // Be sure to reset to no-op, so that a (non-recommended) direct call like 'new Bar()', from
+        // inside Foo's constructor doesn't use the same Holder that's temporarily holding Foo.
+        _defaultDisposableOwner = _noopOwner;
+    }
+    /**
+     * Create Disposable instances using `Class.create(owner, ...)` rather than `new Class(...)`.
+     *
+     * This reminds you to provide an owner, and ensures that if the constructor throws an
+     * exception, dispose() gets called to clean up the partially-constructed object.
+     *
+     * Owner may be null if intend to ensure disposal some other way.
+     */
+    static create(owner, ...args) {
+        const origDefaultOwner = _defaultDisposableOwner;
+        const holder = new Holder();
+        try {
+            // The newly-created object will have holder as its owner.
+            _defaultDisposableOwner = holder;
+            return setDisposeOwner(owner, new this(...args));
+        }
+        catch (e) {
+            try {
+                // This calls dispose on the partially-constructed object
+                holder.clear();
+            }
+            catch (e2) {
+                // tslint:disable-next-line:no-console
+                console.error("Error disposing partially constructed %s:", this.name, e2);
+            }
+            throw e;
+        }
+        finally {
+            // On success, the new object has a new owner, and we release it from holder.
+            // On error, the holder has been cleared, and the release() is a no-op.
+            holder.release();
+            _defaultDisposableOwner = origDefaultOwner;
+        }
+    }
+    /** Take ownership of obj, and dispose it when this.dispose() is called. */
+    autoDispose(obj) {
+        this.onDispose(obj.dispose, obj);
+        return obj;
+    }
+    /** Call the given callback when this.dispose() is called. */
+    onDispose(callback, context) {
+        return this._disposalList.addListener(callback, context);
+    }
+    /**
+     * Wipe out this object when it is disposed, i.e. set all its properties to null. It is
+     * recommended to call this early in the constructor.
+     *
+     * This makes disposal more costly, but has certain benefits:
+     * - If anything still refers to the object and uses it, we'll get an early error, rather than
+     *   silently keep going, potentially doing useless work (or worse) and wasting resources.
+     * - If anything still refers to the object (even without using it), the fields of the object
+     *   can still be garbage-collected.
+     * - If there are circular references involving this object, they get broken, making the job
+     *   easier for the garbage collector.
+     *
+     * The recommendation is to use it for complex, longer-lived objects, but to skip for objects
+     * which are numerous and short-lived (and less likely to be referenced from unexpected places).
+     */
+    wipeOnDispose() {
+        this.onDispose(this._wipeOutObject, this);
+    }
+    /**
+     * Returns whether this object has already been disposed.
+     */
+    isDisposed() {
+        return this._disposalList === null;
+    }
+    /**
+     * Clean up `this` by disposing all owned objects, and calling onDispose() callbacks, in reverse
+     * order to that in which they were added.
+     */
+    dispose() {
+        const disposalList = this._disposalList;
+        if (!disposalList) {
+            // tslint:disable-next-line:no-console
+            console.error("Error disposing %s which is already disposed", _describe(this));
+        }
+        else {
+            this._disposalList = null;
+            disposalList.callAndDispose(this);
+        }
+    }
+    /**
+     * Wipe out this object by setting each property to null. This is helpful for objects that are
+     * disposed and should be ready to be garbage-collected.
+     */
+    _wipeOutObject() {
+        // The sentinel value doesn't have to be null, but some values cause more helpful errors than
+        // others. E.g. if a.x = "disposed", then a.x.foo() throws "undefined is not a function", but
+        // when a.x = null, a.x.foo() throws a more helpful "Cannot read property 'foo' of null".
+        for (const k of Object.keys(this)) {
+            this[k] = null;
         }
     }
 }
-exports.attrsElem = attrsElem;
-function attrs(attrsObj) {
-    return (elem) => attrsElem(elem, attrsObj);
-}
-exports.attrs = attrs;
+exports.Disposable = Disposable;
 /**
- * Sets an attribute of a DOM element to the given value. Removes the attribute when the value is
- * null or undefined. The `attr()` variant takes no `elem` argument, and `attrValue` may be an
- * observable or function.
- * @param {Element} elem: The element to update.
- * @param {String} attrName: The name of the attribute to bind, e.g. 'href'.
- * @param {String|null} attrValue: The string value or null to remove the attribute.
+ * Holder keeps a single disposable object. If given responsibility for another object using
+ * holder.autoDispose() or Foo.create(holder, ...), it automatically disposes the currently held
+ * object. It also disposes it when the holder itself is disposed.
+ *
+ * If the object is an instance of Disposable, the holder will also notice when the object gets
+ * disposed from outside of it, in which case the holder will become empty again.
  */
-function attrElem(elem, attrName, attrValue) {
-    if (attrValue === null || attrValue === undefined) {
-        elem.removeAttribute(attrName);
+class Holder {
+    constructor() {
+        this._owned = null;
+        this._disposalListener = undefined;
     }
-    else {
-        elem.setAttribute(attrName, attrValue);
+    static create(owner) {
+        return setDisposeOwner(owner, new Holder());
+    }
+    /** Take ownership of a new object, disposing the previously held one. */
+    autoDispose(obj) {
+        this.clear();
+        this._owned = obj;
+        if (obj instanceof Disposable) {
+            this._disposalListener = obj.onDispose(this._onOutsideDispose, this);
+        }
+        return obj;
+    }
+    /** Releases the held object without disposing it, emptying the holder. */
+    release() {
+        this._unlisten();
+        const ret = this._owned;
+        this._owned = null;
+        return ret;
+    }
+    /** Disposes the held object and empties the holder. */
+    clear() {
+        this._unlisten();
+        const owned = this._owned;
+        if (owned) {
+            this._owned = null;
+            owned.dispose();
+        }
+    }
+    /** Returns the held object, or null if the Holder is empty. */
+    get() { return this._owned; }
+    /** Returns whether the Holder is empty. */
+    isEmpty() { return !this._owned; }
+    /** When the holder is disposed, it disposes the held object if any. */
+    dispose() { this.clear(); }
+    /** Stop listening for the disposal of this._owned. */
+    _unlisten() {
+        const disposalListener = this._disposalListener;
+        if (disposalListener) {
+            this._disposalListener = undefined;
+            disposalListener.dispose();
+        }
+    }
+    _onOutsideDispose() {
+        this._disposalListener = undefined;
+        this._owned = null;
     }
 }
-exports.attrElem = attrElem;
-function attr(attrName, attrValueObs) {
-    return (elem) => _subscribe(elem, attrValueObs, (val) => attrElem(elem, attrName, val));
-}
-exports.attr = attr;
+exports.Holder = Holder;
 /**
- * Sets or removes a boolean attribute of a DOM element. According to the spec, empty string is a
- * valid true value for the attribute, and the false value is indicated by the attribute's absence.
- * The `boolAttr()` variant takes no `elem`, and `boolValue` may be an observable or function.
- * @param {Element} elem: The element to update.
- * @param {String} attrName: The name of the attribute to bind, e.g. 'checked'.
- * @param {Boolean} boolValue: Boolean value whether to set or unset the attribute.
+ * MultiHolder keeps multiple disposable object. It disposes all held object when the holder
+ * itself is disposed. It's actually nothing more than the Disposable base class itself, just
+ * exposed with a clearer name that describes its purpose.
  */
-function boolAttrElem(elem, attrName, boolValue) {
-    attrElem(elem, attrName, boolValue ? '' : null);
+class MultiHolder extends Disposable {
 }
-exports.boolAttrElem = boolAttrElem;
-function boolAttr(attrName, boolValueObs) {
-    return (elem) => _subscribe(elem, boolValueObs, (val) => boolAttrElem(elem, attrName, val));
-}
-exports.boolAttr = boolAttr;
+exports.MultiHolder = MultiHolder;
 /**
- * Adds a text node to the element. The `text()` variant takes no `elem`, and `value` may be an
- * observable or function.
- * @param {Element} elem: The element to update.
- * @param {String} value: The text value to add.
+ * Sets owner of obj (i.e. calls owner.autoDispose(obj)) unless owner is null. Returns obj.
  */
-function textElem(elem, value) {
-    elem.appendChild(browserGlobals_1.G.document.createTextNode(value));
-}
-exports.textElem = textElem;
-function text(valueObs) {
-    return (elem) => {
-        const textNode = browserGlobals_1.G.document.createTextNode('');
-        _subscribe(elem, valueObs, (val) => { textNode.nodeValue = val; });
-        elem.appendChild(textNode);
-    };
+function setDisposeOwner(owner, obj) {
+    if (owner) {
+        owner.autoDispose(obj);
+    }
+    return obj;
 }
-exports.text = text;
+exports.setDisposeOwner = setDisposeOwner;
 /**
- * Sets a style property of a DOM element to the given value. The `style()` variant takes no
- * `elem`, and `value` may be an observable or function.
- * @param {Element} elem: The element to update.
- * @param {String} property: The name of the style property to update, e.g. 'fontWeight'.
- * @param {String} value: The value for the property.
+ * Helper for reporting errors during disposal. Try to report the type of the object.
  */
-function styleElem(elem, property, value) {
-    elem.style[property] = value;
-}
-exports.styleElem = styleElem;
-function style(property, valueObs) {
-    return (elem) => _subscribe(elem, valueObs, (val) => styleElem(elem, property, val));
+function _describe(obj) {
+    return (obj && obj.constructor && obj.constructor.name ? obj.constructor.name : '' + obj);
 }
-exports.style = style;
 /**
- * Sets the property of a DOM element to the given value.
- * The `prop()` variant takes no `elem`, and `value` may be an observable or function.
- * @param {Element} elem: The element to update.
- * @param {String} property: The name of the property to update, e.g. 'disabled'.
- * @param {Object} value: The value for the property.
+ * DisposalList is an internal class mimicking emit.Emitter. The difference is that callbacks are
+ * called in reverse order, and exceptions in callbacks are reported and swallowed.
  */
-function propElem(elem, property, value) {
-    elem[property] = value;
-}
-exports.propElem = propElem;
-function prop(property, valueObs) {
-    return (elem) => _subscribe(elem, valueObs, (val) => propElem(elem, property, val));
+class DisposalList extends emit_1.LLink {
+    constructor() { super(); }
+    addListener(callback, optContext) {
+        const lis = new DisposeListener(callback, optContext);
+        this._insertBefore(this._next, lis);
+        return lis;
+    }
+    /**
+     * Call all callbacks and dispose this object. The owner is required for better reporting of
+     * errors if any callback throws.
+     */
+    callAndDispose(owner) {
+        try {
+            DisposeListener.callAll(this._next, this, owner);
+        }
+        finally {
+            this._disposeList();
+        }
+    }
 }
-exports.prop = prop;
 /**
- * Shows or hides the element depending on a boolean value. Note that the element must be visible
- * initially (i.e. unsetting style.display should show it).
- * The `show()` variant takes no `elem`, and `boolValue` may be an observable or function.
- * @param {Element} elem: The element to update.
- * @param {Boolean} boolValue: True to show the element, false to hide it.
+ * Internal class that keeps track of one item of the DisposalList. It mimicks emit.Listener, but
+ * reports and swallows erros when it calls the callbacks in the list.
  */
-function showElem(elem, boolValue) {
-    elem.style.display = boolValue ? '' : 'none';
-}
-exports.showElem = showElem;
-function show(boolValueObs) {
-    return (elem) => _subscribe(elem, boolValueObs, (val) => showElem(elem, val));
-}
-exports.show = show;
-/**
- * The opposite of show, hiding the element when boolValue is true.
- * The `hide()` variant takes no `elem`, and `boolValue` may be an observable or function.
- * @param {Element} elem: The element to update.
- * @param {Boolean} boolValue: True to hide the element, false to show it.
- */
-function hideElem(elem, boolValue) {
-    elem.style.display = boolValue ? 'none' : '';
-}
-exports.hideElem = hideElem;
-function hide(boolValueObs) {
-    return (elem) => _subscribe(elem, boolValueObs, (val) => hideElem(elem, val));
-}
-exports.hide = hide;
-/**
- * Sets or toggles the given css class className.
- */
-function clsElem(elem, className, boolValue = true) {
-    elem.classList.toggle(className, Boolean(boolValue));
-}
-exports.clsElem = clsElem;
-function cls(className, boolValue) {
-    if (typeof className !== 'string') {
-        return _clsDynamicPrefix('', className);
-    }
-    else if (!boolValue || typeof boolValue === 'boolean') {
-        return (elem) => clsElem(elem, className, boolValue);
-    }
-    else {
-        return (elem) => _subscribe(elem, boolValue, (val) => clsElem(elem, className, val));
-    }
-}
-exports.cls = cls;
-function clsPrefix(prefix, className, boolValue) {
-    if (typeof className !== 'string') {
-        return _clsDynamicPrefix(prefix, className);
-    }
-    else {
-        return cls(prefix + className, boolValue);
+class DisposeListener extends emit_1.LLink {
+    constructor(callback, context) {
+        super();
+        this.callback = callback;
+        this.context = context;
     }
-}
-exports.clsPrefix = clsPrefix;
-function _clsDynamicPrefix(prefix, className) {
-    return (elem) => {
-        let prevClass = null;
-        _subscribe(elem, className, (name) => {
-            if (prevClass) {
-                elem.classList.remove(prevClass);
+    static callAll(begin, end, owner) {
+        while (begin !== end) {
+            const lis = begin;
+            try {
+                lis.callback.call(lis.context);
             }
-            prevClass = name ? prefix + name : null;
-            if (prevClass) {
-                elem.classList.add(prevClass);
+            catch (e) {
+                // tslint:disable-next-line:no-console
+                console.error("While disposing %s, error disposing %s: %s", _describe(owner), _describe(this), e);
             }
-        });
-    };
-}
-/**
- * Associate arbitrary data with a DOM element. The `data()` variant takes no `elem`, and `value`
- * may be an observable or function.
- * @param {Element} elem: The element with which to associate data.
- * @param {String} key: Key to identify this piece of data among others attached to elem.
- * @param {Object} value: Arbitrary value to associate with elem.
- */
-function dataElem(elem, key, value) {
-    const obj = _dataMap.get(elem);
-    if (obj) {
-        obj[key] = value;
+            begin = lis._next;
+        }
     }
-    else {
-        _domDispose_1.onDisposeElem(elem, () => _dataMap.delete(elem));
-        _dataMap.set(elem, { [key]: value });
+    dispose() {
+        if (this.isDisposed()) {
+            return;
+        }
+        this._removeNode(this);
     }
 }
-exports.dataElem = dataElem;
-function data(key, valueObs) {
-    return (elem) => _subscribe(elem, valueObs, (val) => dataElem(elem, key, val));
+
+},{"./emit":16}],8:[function(require,module,exports){
+"use strict";
+/**
+ * dom.js provides a way to build a DOM tree easily.
+ *
+ * E.g.
+ *  import {dom} from 'grainjs';
+ *  dom('a#link.c1.c2', {'href': url}, 'Hello ', dom('span', 'world'));
+ *    creates Node <a id="link" class="c1 c2" href={{url}}Hello <span>world</span></a>.
+ *
+ *  dom.frag(dom('span', 'Hello'), ['blah', dom('div', 'world')])
+ *    creates document fragment with <span>Hello</span>blah<div>world</div>.
+ *
+ * DOM can also be created and modified inline during creation:
+ *  dom('a#id.c1',
+ *      dom.cls('c2'), dom.attr('href', url),
+ *      dom.text('Hello '), dom('span', dom.text('world')))
+ *    creates Node <a id="link" class="c1 c2" href={{url}}Hello <span>world</span></a>,
+ *    identical to the first example above.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dom = void 0;
+// We keep various dom-related functions organized in private modules, but they are exposed here.
+__exportStar(require("./domImpl"), exports);
+__exportStar(require("./domComponent"), exports);
+__exportStar(require("./domComputed"), exports);
+__exportStar(require("./domDispose"), exports);
+__exportStar(require("./domForEach"), exports);
+__exportStar(require("./domMethods"), exports);
+__exportStar(require("./domevent"), exports);
+const _domComponent = require("./domComponent");
+const _domComputed = require("./domComputed");
+const _domDispose = require("./domDispose");
+const _domForEach = require("./domForEach");
+const _domImpl = require("./domImpl");
+const _domMethods = require("./domMethods");
+const domevent = require("./domevent");
+const domImpl_1 = require("./domImpl");
+// We just want to re-export _domImpl.dom, but to allow adding methods to it in a typesafe way,
+// TypeScript wants us to declare a real function in the same file.
+function dom(tagString, ...args) {
+    return domImpl_1.dom(tagString, ...args);
 }
-exports.data = data;
-function getData(elem, key) {
-    const obj = _dataMap.get(elem);
-    return obj && obj[key];
+exports.dom = dom;
+// Additionally export all methods as properties of dom() function.
+(function (dom) {
+    dom.svg = _domImpl.svg;
+    dom.frag = _domImpl.frag;
+    dom.update = _domImpl.update;
+    dom.find = _domImpl.find;
+    dom.findAll = _domImpl.findAll;
+    dom.domDispose = _domDispose.domDispose;
+    dom.onDisposeElem = _domDispose.onDisposeElem;
+    dom.onDispose = _domDispose.onDispose;
+    dom.autoDisposeElem = _domDispose.autoDisposeElem;
+    dom.autoDispose = _domDispose.autoDispose;
+    dom.attrsElem = _domMethods.attrsElem;
+    dom.attrs = _domMethods.attrs;
+    dom.attrElem = _domMethods.attrElem;
+    dom.attr = _domMethods.attr;
+    dom.boolAttrElem = _domMethods.boolAttrElem;
+    dom.boolAttr = _domMethods.boolAttr;
+    dom.textElem = _domMethods.textElem;
+    dom.text = _domMethods.text;
+    dom.styleElem = _domMethods.styleElem;
+    dom.style = _domMethods.style;
+    dom.propElem = _domMethods.propElem;
+    dom.prop = _domMethods.prop;
+    dom.showElem = _domMethods.showElem;
+    dom.show = _domMethods.show;
+    dom.hideElem = _domMethods.hideElem;
+    dom.hide = _domMethods.hide;
+    dom.clsElem = _domMethods.clsElem;
+    dom.cls = _domMethods.cls;
+    dom.clsPrefix = _domMethods.clsPrefix;
+    dom.dataElem = _domMethods.dataElem;
+    dom.data = _domMethods.data;
+    dom.getData = _domMethods.getData;
+    dom.replaceContent = _domComputed.replaceContent;
+    dom.domComputed = _domComputed.domComputed;
+    dom.domComputedOwned = _domComputed.domComputedOwned;
+    dom.maybe = _domComputed.maybe;
+    dom.maybeOwned = _domComputed.maybeOwned;
+    dom.forEach = _domForEach.forEach;
+    dom.create = _domComponent.create;
+    dom.onElem = domevent.onElem;
+    dom.on = domevent.on;
+    dom.onMatchElem = domevent.onMatchElem;
+    dom.onMatch = domevent.onMatch;
+    dom.onKeyElem = domevent.onKeyElem;
+    dom.onKeyPress = domevent.onKeyPress;
+    dom.onKeyDown = domevent.onKeyDown;
+})(dom = exports.dom || (exports.dom = {}));
+
+},{"./domComponent":9,"./domComputed":10,"./domDispose":11,"./domForEach":12,"./domImpl":13,"./domMethods":14,"./domevent":15}],9:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = void 0;
+const domComputed_1 = require("./domComputed");
+function create(fn, ...args) {
+    return domComputed_1.domComputedOwned(null, (owner) => {
+        const value = ('create' in fn) ?
+            fn.create(owner, ...args) :
+            fn(owner, ...args);
+        return (value && typeof value === 'object' && 'buildDom' in value) ?
+            value.buildDom() : value;
+    });
 }
-exports.getData = getData;
+exports.create = create;
+
+},{"./domComputed":10}],10:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.maybeOwned = exports.maybe = exports.domComputedOwned = exports.domComputed = exports.replaceContent = void 0;
+const binding_1 = require("./binding");
+const dispose_1 = require("./dispose");
+const domDispose_1 = require("./domDispose");
+const domImpl_1 = require("./domImpl");
+// Use the browser globals in a way that allows replacing them with mocks in tests.
+const browserGlobals_1 = require("./browserGlobals");
 /**
  * Replaces the content between nodeBefore and nodeAfter, which should be two siblings within the
  * same parent node. New content may be anything allowed as an argument to dom(), including null
@@ -932,26 +942,39 @@ function replaceContent(nodeBefore, nodeAfter, content) {
         let next;
         for (let n = nodeBefore.nextSibling; n && n !== nodeAfter; n = next) {
             next = n.nextSibling;
-            _domDispose_1.domDispose(n);
+            domDispose_1.domDispose(n);
             elem.removeChild(n);
         }
         if (content) {
-            elem.insertBefore(content instanceof browserGlobals_1.G.Node ? content : _domImpl_1.frag(content), nodeAfter);
+            elem.insertBefore(content instanceof browserGlobals_1.G.Node ? content : domImpl_1.frag(content), nodeAfter);
         }
     }
 }
 exports.replaceContent = replaceContent;
-function domComputed(valueObs, contentFunc) {
-    const _contentFunc = contentFunc || identity;
-    return (elem) => {
-        const markerPre = browserGlobals_1.G.document.createComment('a');
-        const markerPost = browserGlobals_1.G.document.createComment('b');
-        elem.appendChild(markerPre);
-        elem.appendChild(markerPost);
-        _subscribe(elem, valueObs, (value) => replaceContent(markerPre, markerPost, _contentFunc(value)));
-    };
+function domComputed(valueObs, contentFunc = identity) {
+    const markerPre = browserGlobals_1.G.document.createComment('a');
+    const markerPost = browserGlobals_1.G.document.createComment('b');
+    // Function is added after markerPre and markerPost, so that it runs once they have already been
+    // attached to elem (the parent element).
+    return [markerPre, markerPost, (elem) => {
+            binding_1.subscribeElem(markerPost, valueObs, (value) => replaceContent(markerPre, markerPost, contentFunc(value)));
+        }];
 }
 exports.domComputed = domComputed;
+/**
+ * Like domComputed(), but the callback gets an additional first argument, owner, which may be
+ * used to take ownership of objects created by the callback. These will be disposed before each
+ * new call to the callback, and when the containing DOM is disposed.
+ *
+ *    domComputedOwned(valueObs, (owner, value) => Editor.create(owner, value).renderSomething());
+ */
+function domComputedOwned(valueObs, contentFunc) {
+    const holder = dispose_1.Holder.create(null);
+    const [markerPre, markerPost, func] = domComputed(valueObs, (val) => contentFunc(dispose_1.MultiHolder.create(holder), val));
+    domDispose_1.autoDisposeElem(markerPost, holder);
+    return [markerPre, markerPost, func];
+}
+exports.domComputedOwned = domComputedOwned;
 function identity(arg) { return arg; }
 /**
  * Conditionally appends DOM to an element. The value may be an observable or function (from which
@@ -972,607 +995,606 @@ function identity(arg) { return arg; }
  *
  * The latter is preferred for being simpler.
  *
- * @param {Element} elem: The element to which to append the DOM content.
- * @param {Object} boolValueObs: Observable or function for a computed.
- * @param [Function] contentFunc: Function called with the result of boolValueObs when it is
- *    truthy. Should returning DOM as output.
+ * @param boolValueObs: Observable or function for a computed.
+ * @param contentFunc: Called with the result of boolValueObs when it is truthy. Should return DOM.
  */
 function maybe(boolValueObs, contentFunc) {
     return domComputed(boolValueObs, (value) => value ? contentFunc(value) : null);
 }
 exports.maybe = maybe;
-
-},{"./_domDispose":5,"./_domImpl":7,"./binding":9,"./browserGlobals":10}],9:[function(require,module,exports){
-"use strict";
 /**
- * binding.ts offers a convenient subscribe() function that creates a binding to an observable, a
- * a plain value, or a function from which it builds a computed.
+ * Like maybe(), but the callback gets an additional first argument, owner, which may be used to
+ * take ownership of objects created by the callback. These will be disposed before each new call
+ * to the callback, and when the condition becomes false or the containing DOM gets disposed.
+ *
+ *    maybeOwned(showEditor, (owner) => Editor.create(owner).renderSomething());
  */
+function maybeOwned(boolValueObs, contentFunc) {
+    return domComputedOwned(boolValueObs, (owner, value) => value ? contentFunc(owner, value) : null);
+}
+exports.maybeOwned = maybeOwned;
+
+},{"./binding":4,"./browserGlobals":5,"./dispose":7,"./domDispose":11,"./domImpl":13}],11:[function(require,module,exports){
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const computed_1 = require("./computed");
-const observable_1 = require("./observable");
+exports.autoDispose = exports.autoDisposeElem = exports.onDispose = exports.onDisposeElem = exports.domDispose = exports.domDisposeHooks = exports._disposeNode = void 0;
 /**
- * Subscribes a callback to valueObs, which may be one a plain value, an observable, a knockout
- * observable, or a function. If a function, it's used to create a computed() and will be called
- * with a context function `use`, allowing it to depend on other observable values (see
- * documentation for `computed`).
+ * Private global disposal map. It maintains the association between DOM nodes and cleanup
+ * functions added with dom.onDispose(). To support multiple disposers on one element, we use a
+ * WeakMap-based linked list:
  *
- * In all cases, `callback(newValue, oldValue)` is called immediately and whenever the value
- * changes. On the initial call, oldValue is undefined.
+ *    _disposeMap[elem] = disposer2;
+ *    _disposeMap[disposer2] = disposer1;
+ *    etc.
  *
- * Returns an object which should be disposed to remove the created subscriptions, or null.
+ * This avoids allocating arrays or using undeclared properties for a different linked list.
  */
-function subscribe(valueObs, callback) {
-    // A plain function (to make a computed from), or a knockout observable.
-    if (typeof valueObs === 'function') {
-        // Knockout observable.
-        const koValue = valueObs;
-        if (typeof koValue.peek === 'function') {
-            let savedValue = koValue.peek();
-            const sub = koValue.subscribe((val) => {
-                const old = savedValue;
-                savedValue = val;
-                callback(val, old);
-            });
-            callback(savedValue, undefined);
-            return sub;
-        }
-        // Function from which to make a computed. Note that this is also reasonable:
-        //    let sub = subscribe(use => callback(valueObs(use)));
-        // The difference is that when valueObs() evaluates to unchanged value, callback would be
-        // called in the version above, but not in the version below.
-        const comp = computed_1.computed(valueObs);
-        comp.addListener(callback);
-        callback(comp.get(), undefined);
-        return comp; // Disposing this will dispose its one listener.
+const _disposeMap = new WeakMap();
+// Internal helper to walk the DOM tree, calling visitFunc(elem) on all descendants of elem.
+// Descendants are processed first.
+function _walkDom(elem, visitFunc) {
+    let c = elem.firstChild;
+    while (c) {
+        // Note: this might be better done using an explicit stack, but in practice DOM trees aren't
+        // so deep as to cause problems.
+        _walkDom(c, visitFunc);
+        c = c.nextSibling;
     }
-    // An observable.
-    if (valueObs instanceof observable_1.Observable) {
-        const sub = valueObs.addListener(callback);
-        callback(valueObs.get(), undefined);
-        return sub;
+    visitFunc(elem);
+}
+// Internal helper to run all disposers for a single element.
+function _disposeNode(node) {
+    let disposer = _disposeMap.get(node);
+    if (disposer) {
+        let key = node;
+        do {
+            _disposeMap.delete(key);
+            disposer(node);
+            // Find the next disposer; these are chained when there are multiple.
+            key = disposer;
+            disposer = _disposeMap.get(key);
+        } while (disposer);
     }
-    callback(valueObs, undefined);
-    return null;
 }
-exports.subscribe = subscribe;
-
-},{"./computed":11,"./observable":18}],10:[function(require,module,exports){
-"use strict";
+exports._disposeNode = _disposeNode;
+function _disposeNodeRecursive(node) {
+    _walkDom(node, exports.domDisposeHooks.disposeNode);
+}
 /**
- * Module that allows client-side code to use browser globals (such as `document` or `Node`) in a
- * way that allows those globals to be replaced by mocks in browser-less tests.
- *
- *    import {G} from 'browserGlobals';
- *    ... use G.document
- *    ... use G.Node
- *
- * Initially, the global `window` object, is the source of the global values.
+ * Support for extending dom disposal. This is very low-level, and needs utmost care. Any
+ * disposers set should take care of calling the original versions of the disposers.
+ */
+exports.domDisposeHooks = {
+    disposeNode: _disposeNode,
+    disposeRecursive: _disposeNodeRecursive,
+};
+/**
+ * Run disposers associated with any descendant of elem or with elem itself. Disposers get
+ * associated with elements using dom.onDispose(). Descendants are processed first.
  *
- * To use a mock of globals in a test, use:
+ * It is automatically called if one of the function arguments to dom() throws an exception during
+ * element creation. This way any onDispose() handlers set on the unfinished element get called.
  *
- *    import {pushGlobals, popGlobals} as G from 'browserGlobals';
- *    before(function() {
- *      pushGlobals(mockWindow);    // e.g. jsdom.jsdom(...).defaultView
- *    });
- *    after(function() {
- *      popGlobals();
- *    });
+ * @param {Node} node: The element to run disposers on.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-function _updateGlobals(dest, source) {
-    dest.DocumentFragment = source.DocumentFragment;
-    dest.Element = source.Element;
-    dest.Node = source.Node;
-    dest.document = source.document;
-    dest.window = source.window;
+function domDispose(node) {
+    exports.domDisposeHooks.disposeRecursive(node);
 }
-// The initial IBrowserGlobals object.
-const initial = {};
-_updateGlobals(initial, (typeof window !== 'undefined' ? window : {}));
-// The globals G object strats out with a copy of `initial`.
-exports.G = Object.assign({}, initial);
-// The stack of globals that always has the intial object, but which may be overridden.
-const _globalsStack = [initial];
+exports.domDispose = domDispose;
 /**
- * Replace globals with those from the given object. Use popGlobals() to restore previous values.
+ * Associate a disposerFunc with a DOM element. It will be called when the element is disposed
+ * using domDispose() on it or any of its parents. If onDispose is called multiple times, all
+ * disposerFuncs will be called in reverse order.
+ * @param {Element} elem: The element to associate the disposer with.
+ * @param {Function} disposerFunc(elem): Will be called when domDispose() is called on the
+ *    element or its ancestor.
+ * Note that it is not necessary usually to dispose event listeners attached to an element (e.g.
+ * with dom.on()) since their lifetime is naturally limited to the lifetime of the element.
  */
-function pushGlobals(globals) {
-    _globalsStack.push(globals);
-    _updateGlobals(exports.G, globals);
+function onDisposeElem(elem, disposerFunc) {
+    const prevDisposer = _disposeMap.get(elem);
+    _disposeMap.set(elem, disposerFunc);
+    if (prevDisposer) {
+        _disposeMap.set(disposerFunc, prevDisposer);
+    }
 }
-exports.pushGlobals = pushGlobals;
+exports.onDisposeElem = onDisposeElem;
+function onDispose(disposerFunc) {
+    return (elem) => onDisposeElem(elem, disposerFunc);
+}
+exports.onDispose = onDispose;
 /**
- * Restore the values of globals to undo the preceding pushGlobals() call.
+ * Make the given element own the disposable, and call its dispose method when domDispose() is
+ * called on the element or any of its parents.
+ * @param {Element} elem: The element to own the disposable.
+ * @param {Disposable} disposable: Anything with a .dispose() method.
  */
-function popGlobals() {
-    if (_globalsStack.length > 1) {
-        _globalsStack.pop();
+function autoDisposeElem(elem, disposable) {
+    if (disposable) {
+        onDisposeElem(elem, () => disposable.dispose());
     }
-    _updateGlobals(exports.G, _globalsStack[_globalsStack.length - 1]);
 }
-exports.popGlobals = popGlobals;
+exports.autoDisposeElem = autoDisposeElem;
+function autoDispose(disposable) {
+    if (disposable) {
+        return (elem) => autoDisposeElem(elem, disposable);
+    }
+}
+exports.autoDispose = autoDispose;
 
-},{}],11:[function(require,module,exports){
+},{}],12:[function(require,module,exports){
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forEach = void 0;
+const domComputed_1 = require("./domComputed");
+const domDispose_1 = require("./domDispose");
+const domImpl_1 = require("./domImpl");
+const obsArray_1 = require("./obsArray");
+// Use the browser globals in a way that allows replacing them with mocks in tests.
+const browserGlobals_1 = require("./browserGlobals");
 /**
- * computed.js implements a computed observable, whose value depends on other observables and gets
- * recalculated automatically when they change.
- *
- * E.g. if we have some existing observables (which may themselves be instances of `computed`),
- * we can create a computed that subscribes to them explicitly:
- *  let obs1 = observable(5), obs2 = observable(12);
- *  let computed1 = computed(obs1, obs2, (use, v1, v2) => v1 + v2);
- *
- * or implicitly by using `use(obs)` function:
- *  let computed2 = computed(use => use(obs1) + use(obs2));
+ * Creates DOM elements for each element of an observable array. As the array is changed, children
+ * are added or removed. This works for any array-valued observable, and for obsArray() and
+ * computedArray() it works more efficiently for simple changes.
  *
- * In either case, computed1.get() and computed2.get() will have the value 17. If obs1 or obs2 is
- * changed, computed1 and computed2 will get recomputed automatically.
+ * The given itemCreateFunc() should return a single DOM node for each item, or null to skip that
+ * item. It is called for new items whenever they are spliced in, or the array replaced. The
+ * forEach() owns the created nodes, and runs domDispose() on them when they are spliced out.
  *
- * Creating a computed allows any number of dependencies to be specified explicitly, and their
- * values will be passed to the read() callback. These may be combined with automatic dependencies
- * detected using use(). Note that constructor dependencies have less overhead.
+ * If the created nodes are removed from their parent externally, forEach() will cope with it, but
+ * will consider these elements as no longer owned, and will not run domDispose() on them.
  *
- *  let val = computed(...deps, ((use, ...depValues) => READ_CALLBACK));
+ * Note that itemCreateFunc() does not receive an index: an index would only be correct at the
+ * time the item is created, and would not reflect further changes to the array.
  *
- * You may specify a `write` callback by calling `onWrite(WRITE_CALLBACK)`, which will be called
- * whenever set() is called on the computed by its user. If a `write` bacllback is not specified,
- * calling `set` on a computed observable will throw an exception.
+ * If you'd like to map the DOM node back to its source item, use dom.data() and dom.getData() in
+ * itemCreateFunc().
+ */
+function forEach(obsArray, itemCreateFunc) {
+    const markerPre = browserGlobals_1.G.document.createComment('a');
+    const markerPost = browserGlobals_1.G.document.createComment('b');
+    return [markerPre, markerPost, (elem) => {
+            if (Array.isArray(obsArray)) {
+                domComputed_1.replaceContent(markerPre, markerPost, obsArray.map(itemCreateFunc));
+                return;
+            }
+            const nodes = obsArray_1.computedArray(obsArray, itemCreateFunc);
+            // Be sure to dispose the newly-created array when the DOM it's associated with is gone.
+            domDispose_1.autoDisposeElem(markerPost, nodes);
+            nodes.addListener((newArr, oldArr, splice) => {
+                if (splice) {
+                    // Remove the elements that are gone.
+                    for (const node of splice.deleted) {
+                        if (node && node.parentNode === elem) {
+                            domDispose_1.domDispose(node);
+                            elem.removeChild(node);
+                        }
+                    }
+                    if (splice.numAdded > 0) {
+                        // Find a valid child immediately following the spliced out portion, for DOM insertion.
+                        const endIndex = splice.start + splice.numAdded;
+                        let nextElem = markerPost;
+                        for (let i = endIndex; i < newArr.length; i++) {
+                            const node = newArr[i];
+                            if (node && node.parentNode === elem) {
+                                nextElem = node;
+                                break;
+                            }
+                        }
+                        // Insert the new elements.
+                        const content = domImpl_1.frag(newArr.slice(splice.start, endIndex));
+                        elem.insertBefore(content, nextElem);
+                    }
+                }
+                else {
+                    domComputed_1.replaceContent(markerPre, markerPost, newArr);
+                }
+            });
+            domComputed_1.replaceContent(markerPre, markerPost, nodes.get());
+        }];
+}
+exports.forEach = forEach;
+
+},{"./browserGlobals":5,"./domComputed":10,"./domDispose":11,"./domImpl":13,"./obsArray":18}],13:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findAll = exports.find = exports.frag = exports.update = exports.svg = exports.dom = void 0;
+const domDispose_1 = require("./domDispose");
+const domMethods_1 = require("./domMethods");
+// Use the browser globals in a way that allows replacing them with mocks in tests.
+const browserGlobals_1 = require("./browserGlobals");
+// The goal of the above declarations is to get help from TypeScript in detecting incorrect usage:
+// (See test/types/dom.ts for a test of this.)
+//  import {text, hide} from './domMethods';
+//  dom('div', text('hello'));        // OK
+//  dom('div', hide(true));           // OK
+//  dom('div', {title: 'hello'});     // OK
+//  frag(text('hello'));              // OK
+//  frag(hide(true));                 // Bad: DocumentFragment is not an Element
+//  frag({title: 'hello'});           // Bad: DocumentFragment is not an Element
+/**
+ * dom('tag#id.class1.class2', ...args)
+ *   The first argument is a string consisting of a tag name, with optional #foo suffix
+ *   to add the ID 'foo', and zero or more .bar suffixes to add a CSS class 'bar'.
  *
- * Note that pureComputed.js offers a variation of computed() with the same interface, but which
- * stays unsubscribed from dependencies while it itself has no subscribers.
+ *   NOTE that better typings are available when a tag is used directly, e.g.
+ *      dom('input', {id: 'foo'}, (elem) => ...) --> elem has type HTMLInputElement
+ *      dom('input#foo',          (elem) => ...) --> elem has type HTMLElement
  *
- * A computed may be used with a disposable value using `use.owner` as the value's owner. E.g.
- *    let val = computed((use) => Foo.create(use.owner, use(a), use(b)));
+ * The rest of the arguments are optional and may be:
  *
- * When the computed() is re-evaluated, and when it itself is disposed, it disposes the previously
- * owned value. Note that only the pattern above works, i.e. use.owner may only be used to take
- * ownership of the same disposable that the callback returns.
+ *   Nodes - which become children of the created element;
+ *   strings - which become text node children;
+ *   objects - of the form {attr: val} to set additional attributes on the element;
+ *   Arrays - which are flattened with each item processed recursively;
+ *   functions - which are called with elem as the argument, for a chance to modify the
+ *       element as it's being created. Return values are processed recursively.
+ *   "dom methods" - expressions such as `dom.attr('href', url)` or `dom.hide(obs)`, which
+ *       are actually special cases of the "functions" category.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-const observable_1 = require("./observable");
-const subscribe_1 = require("./subscribe");
-function _noWrite() {
-    throw new Error("Can't write to non-writable computed");
+function dom(tagString, ...args) {
+    return _updateWithArgsOrDispose(_createFromTagString(_createElementHtml, tagString), args);
 }
-class Computed extends observable_1.Observable {
-    /**
-     * Internal constructor for a Computed observable. You should use computed() function instead.
-     */
-    constructor(callback, dependencies) {
-        // At initialization we force an undefined value even though it's not of type T: it gets set
-        // to a proper value during the creation of new Subscription, which calls this._read.
-        super(undefined);
-        this._callback = callback;
-        this._write = _noWrite;
-        this._sub = new subscribe_1.Subscription(this._read.bind(this), dependencies, this);
+exports.dom = dom;
+/**
+ * svg('tag#id.class1.class2', ...args)
+ *  Same as dom(...), but creates an SVG element.
+ */
+function svg(tagString, ...args) {
+    return _updateWithArgsOrDispose(_createFromTagString(_createElementSvg, tagString), args);
+}
+exports.svg = svg;
+// Internal helper used to create HTML elements.
+function _createElementHtml(tag) {
+    return browserGlobals_1.G.document.createElement(tag);
+}
+// Internal helper used to create SVG elements.
+function _createElementSvg(tag) {
+    return browserGlobals_1.G.document.createElementNS("http://www.w3.org/2000/svg", tag);
+}
+/**
+ * Internal helper to parse tagString, create an element using createFunc with the given tag, and
+ * set its id and classes from the tagString.
+ * @param {Funtion} createFunc(tag): Function that should create an element given a tag name.
+ *    It is passed in to allow creating elements in different namespaces (e.g. plain HTML vs SVG).
+ * @param {String} tagString: String of the form "tag#id.class1.class2" where id and classes are
+ *    optional.
+ * @return {Element} The result of createFunc(), possibly with id and class attributes also set.
+ */
+function _createFromTagString(createFunc, tagString) {
+    // We do careful hand-written parsing rather than use a regexp for speed. Using a regexp is
+    // significantly more expensive.
+    let tag;
+    let id;
+    let classes;
+    let dotPos = tagString.indexOf(".");
+    const hashPos = tagString.indexOf('#');
+    if (dotPos === -1) {
+        dotPos = tagString.length;
     }
-    /**
-     * Used by subscriptions to keep track of dependencies.
-     */
-    _getDepItem() {
-        return this._sub._getDepItem();
+    else {
+        classes = tagString.substring(dotPos + 1).replace(/\./g, ' ');
     }
-    /**
-     * "Sets" the value of the computed by calling the write() callback if one was provided in the
-     * constructor. Throws an error if there was no such callback (not a "writable" computed).
-     * @param {Object} value: The value to pass to the write() callback.
-     */
-    set(value) { this._write(value); }
-    /**
-     * Set callback to call when this.set(value) is called, to make it a writable computed. If not
-     * set, attempting to write to this computed will throw an exception.
-     */
-    onWrite(writeFunc) {
-        this._write = writeFunc;
-        return this;
+    if (hashPos === -1) {
+        tag = tagString.substring(0, dotPos);
     }
-    /**
-     * Disposes the computed, unsubscribing it from all observables it depends on.
-     */
-    dispose() {
-        this._sub.dispose();
-        super.dispose();
+    else if (hashPos > dotPos) {
+        throw new Error(`ID must come before classes in dom("${tagString}")`);
     }
-    _read(use, ...args) {
-        super.set(this._callback(use, ...args));
+    else {
+        tag = tagString.substring(0, hashPos);
+        id = tagString.substring(hashPos + 1, dotPos);
+    }
+    const elem = createFunc(tag);
+    if (id) {
+        elem.setAttribute('id', id);
+    }
+    if (classes) {
+        elem.setAttribute('class', classes);
     }
+    return elem;
 }
-exports.Computed = Computed;
 /**
- * Creates a new Computed.
- * @param {Observable} ...observables: The initial params, of which there may be zero or more, are
- *    observables on which this computed depends. When any of them change, the read() callback
- *    will be called with the values of these observables as arguments.
- * @param {Function} readCallback: Read callback that will be called with (use, ...values),
- *    i.e. the `use` function and values for all of the ...observables. The callback is called
- *    immediately and whenever any dependency changes.
- * @returns {Computed} The newly created computed observable.
+ * Update an element with any number of arguments, as documented in dom().
  */
-function computed(...args) {
-    const readCb = args.pop();
-    return new Computed(readCb, args);
+function update(elem, ...args) {
+    return _updateWithArgs(elem, args);
 }
-exports.computed = computed;
-// TODO Consider implementing .singleUse() method.
-// An open question is in how to pass e.g. kd.hide(computed(x, x => !x)) in such a way that
-// the temporary computed can be disposed when temporary, but not otherwise. A function-only
-// syntax is kd.hide(use => !use(x)), but prevents use of static subscriptions.
-//
-// (a) function-only use of computeds is fine and useful.
-// (b) pureComputed is another option, and doesn't technically require getting disposed.
-// (c) kd.hide(compObs), kd.autoDispose(compObs) is more general and
-//     can be replaced more concisely by kd.hide(compObs.singleUse())
-// .singleUse() automatically disposes a computed (or an observable?) once there are no
-// subscriptions to it. If there are no subscriptions at the time of this call, waits for the next
-// tick, and possibly disposes then.
-
-},{"./observable":18,"./subscribe":20}],12:[function(require,module,exports){
-"use strict";
+exports.update = update;
 /**
- * dispose.js provides tools to objects that needs to dispose resources, such as destroy DOM, and
- * unsubscribe from events. The motivation with examples is presented here:
- *
- *    https://phab.getgrist.com/w/disposal/
- *
- * Disposable is a class for components that need cleanup (e.g. maintain DOM, listen to events,
- * subscribe to anything). It provides a .dispose() method that should be called to destroy the
- * component, and .onDispose()/.autoDispose() methods that the component should use to take
- * responsibility for other pieces that require cleanup.
- *
- * To define a disposable class:
- *    class Foo extends Disposable { ... }
- *
- * To create Foo:
- *    const foo = Foo.create(owner, ...args);
- * This is better than `new Foo` for two reasons:
- *    1. If Foo's constructor throws an exception, any disposals registered in that constructor
- *       before the exception are honored.
- *    2. It ensures you specify the owner of the new instance (but you can use null to skip it).
- *
- * In Foo's constructor (or rarely methods), take ownership of other Disposable objects:
- *    this.bar = Bar.create(this, ...);
- *
- * For objects that are not instances of Disposable but have a .dispose() methods, use:
- *    this.bar = this.autoDispose(createSomethingDisposable());
- *
- * To call a function on disposal (e.g. to add custom disposal logic):
- *    this.onDispose(() => this.myUnsubscribeAllMethod());
- *    this.onDispose(this.myUnsubscribeAllMethod, this);    // slightly more efficient
- *
- * To mark this object to be wiped out on disposal (i.e. set all properties to null):
- *    this.wipeOnDispose();
- * See the documentation of that method for more info.
- *
- * To dispose Foo directly:
- *    foo.dispose();
- * To determine if an object has already been disposed:
- *    foo.isDisposed()
- *
- * If you need to replace an owned object, or release, or dispose it early, use a Holder:
- *    this._holder = Holder.create(this);
- *    Bar.create(this._holder, 1);      // creates new Bar(1)
- *    Bar.create(this._holder, 2);      // creates new Bar(2) and disposes previous object
- *    this._holder.clear();             // disposes contained object
- *    this._holder.release();           // releases contained object
- *
- * If creating your own class with a dispose() method, do NOT throw exceptions from dispose().
- * These cannot be handled properly in all cases. Read here about the same issue in C++:
- *    http://bin-login.name/ftp/pub/docs/programming_languages/cpp/cffective_cpp/MAGAZINE/SU_FRAME.HTM#destruct
+ * Update an element with an array of arguments.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-const emit_1 = require("./emit");
-// Internal "owner" of disposable objects which doesn't actually dispose or keep track of them. It
-// is the effective owner when creating a Disposable with `new Foo()` rather than `Foo.create()`.
-const _noopOwner = {
-    autoDispose(obj) { },
-};
-// Newly-created Disposable instances will have this as their owner. This is not a constant, it
-// is used by create() for the safe creation of Disposables.
-let _defaultDisposableOwner = _noopOwner;
+function _updateWithArgs(elem, args) {
+    for (const arg of args) {
+        _updateWithArg(elem, arg);
+    }
+    return elem;
+}
 /**
- * Base class for disposable objects that can own other objects. See the module documentation.
+ * Update an element with an array of arguments, calling disposers in case of an exception. It is
+ * an internal helper to be used whenever elem is a newly-created element. If elem is an existing
+ * element which the user already knows about, then _updateWithArgs should be called.
  */
-class Disposable {
-    constructor() {
-        this._disposalList = new DisposalList();
-        // This registers with a temp Holder when using create(), and is a no-op when using `new Foo`.
-        _defaultDisposableOwner.autoDispose(this);
+function _updateWithArgsOrDispose(elem, args) {
+    try {
+        return _updateWithArgs(elem, args);
     }
-    static create(owner, ...args) {
-        const origDefaultOwner = _defaultDisposableOwner;
-        const holder = new Holder();
-        try {
-            // The newly-created object will have holder as its owner.
-            _defaultDisposableOwner = holder;
-            return setDisposeOwner(owner, new this(...args));
-        }
-        catch (e) {
-            try {
-                // This calls dispose on the partially-constructed object
-                holder.clear();
-            }
-            catch (e2) {
-                // tslint:disable-next-line:no-console
-                console.error("Error disposing partially constructed %s:", this.name, e2);
-            }
-            throw e;
-        }
-        finally {
-            // On success, the new object has a new owner, and we release it from holder.
-            // On error, the holder has been cleared, and the release() is a no-op.
-            holder.release();
-            _defaultDisposableOwner = origDefaultOwner;
-        }
+    catch (e) {
+        domDispose_1.domDispose(elem);
+        throw e;
     }
-    /** Take ownership of obj, and dispose it when this.dispose() is called. */
-    autoDispose(obj) {
-        this.onDispose(obj.dispose, obj);
-        return obj;
+}
+function _updateWithArg(elem, arg) {
+    if (typeof arg === 'function') {
+        const value = arg(elem);
+        // Skip the recursive call in the common case when the function returns nothing.
+        if (value !== undefined && value !== null) {
+            _updateWithArg(elem, value);
+        }
     }
-    /** Call the given callback when this.dispose() is called. */
-    onDispose(callback, context) {
-        this._disposalList.addListener(callback, context);
+    else if (Array.isArray(arg)) {
+        _updateWithArgs(elem, arg);
     }
-    /**
-     * Wipe out this object when it is disposed, i.e. set all its properties to null. It is
-     * recommended to call this early in the constructor.
-     *
-     * This makes disposal more costly, but has certain benefits:
-     * - If anything still refers to the object and uses it, we'll get an early error, rather than
-     *   silently keep going, potentially doing useless work (or worse) and wasting resources.
-     * - If anything still refers to the object (even without using it), the fields of the object
-     *   can still be garbage-collected.
-     * - If there are circular references involving this object, they get broken, making the job
-     *   easier for the garbage collector.
-     *
-     * The recommendation is to use it for complex, longer-lived objects, but to skip for objects
-     * which are numerous and short-lived (and less likely to be referenced from unexpected places).
-     */
-    wipeOnDispose() {
-        this.onDispose(this._wipeOutObject, this);
+    else if (arg === undefined || arg === null) {
+        // Nothing to do.
     }
-    /**
-     * Returns whether this object has already been disposed.
-     */
-    isDisposed() {
-        return this._disposalList === null;
+    else if (arg instanceof browserGlobals_1.G.Node) {
+        elem.appendChild(arg);
     }
-    /**
-     * Clean up `this` by disposing all owned objects, and calling onDispose() callbacks, in reverse
-     * order to that in which they were added.
-     */
-    dispose() {
-        const disposalList = this._disposalList;
-        this._disposalList = null;
-        disposalList.callAndDispose(this);
+    else if (typeof arg === 'object') {
+        domMethods_1.attrsElem(elem, arg);
     }
-    /**
-     * Wipe out this object by setting each property to null. This is helpful for objects that are
-     * disposed and should be ready to be garbage-collected.
-     */
-    _wipeOutObject() {
-        // The sentinel value doesn't have to be null, but some values cause more helpful errors than
-        // others. E.g. if a.x = "disposed", then a.x.foo() throws "undefined is not a function", but
-        // when a.x = null, a.x.foo() throws a more helpful "Cannot read property 'foo' of null".
-        for (const k of Object.keys(this)) {
-            this[k] = null;
-        }
+    else {
+        elem.appendChild(browserGlobals_1.G.document.createTextNode(arg));
     }
 }
-exports.Disposable = Disposable;
 /**
- * Holder keeps a single disposable object. If given responsibility for another object using
- * holder.autoDispose() or Foo.create(holder, ...), it automatically disposes the currently held
- * object. It also disposes it when the holder itself is disposed.
- *
- * If the object is an instance of Disposable, the holder will also notice when the object gets
- * disposed from outside of it, in which case the holder will become empty again.
- *
- * TODO Holder needs unittests.
+ * Creates a DocumentFragment processing arguments the same way as the dom() function.
  */
-class Holder {
-    constructor() {
-        this._owned = null;
-    }
-    static create(owner) {
-        return setDisposeOwner(owner, new Holder());
-    }
-    /** Take ownership of a new object, disposing the previously held one. */
-    autoDispose(obj) {
-        if (this._owned) {
-            this._owned.dispose();
-        }
-        this._owned = obj;
-        if (obj instanceof Disposable) {
-            obj.onDispose(this.release, this);
+function frag(...args) {
+    const elem = browserGlobals_1.G.document.createDocumentFragment();
+    return _updateWithArgsOrDispose(elem, args);
+}
+exports.frag = frag;
+/**
+ * Find the first element matching a selector; just an abbreviation for document.querySelector().
+ */
+function find(selector) { return browserGlobals_1.G.document.querySelector(selector); }
+exports.find = find;
+/**
+ * Find all elements matching a selector; just an abbreviation for document.querySelectorAll().
+ */
+function findAll(selector) { return browserGlobals_1.G.document.querySelectorAll(selector); }
+exports.findAll = findAll;
+
+},{"./browserGlobals":5,"./domDispose":11,"./domMethods":14}],14:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noTestId = exports.makeTestId = exports.getData = exports.data = exports.dataElem = exports.clsPrefix = exports.cls = exports.clsElem = exports.hide = exports.hideElem = exports.show = exports.showElem = exports.prop = exports.propElem = exports.style = exports.styleElem = exports.text = exports.textElem = exports.boolAttr = exports.boolAttrElem = exports.attr = exports.attrElem = exports.attrs = exports.attrsElem = void 0;
+const binding_1 = require("./binding");
+const domDispose_1 = require("./domDispose");
+// Use the browser globals in a way that allows replacing them with mocks in tests.
+const browserGlobals_1 = require("./browserGlobals");
+/**
+ * Private global map for associating arbitrary data with DOM. It's a WeakMap, so does not prevent
+ * values from being garbage collected when the owning DOM elements are no longer used.
+ */
+const _dataMap = new WeakMap();
+/**
+ * Sets multiple attributes of a DOM element. The `attrs()` variant takes no `elem` argument.
+ * Null and undefined values are omitted, and booleans are either omitted or set to empty string.
+ * @param {Object} attrsObj: Object mapping attribute names to attribute values.
+ */
+function attrsElem(elem, attrsObj) {
+    for (const key of Object.keys(attrsObj)) {
+        const val = attrsObj[key];
+        if (val != null && val !== false) {
+            elem.setAttribute(key, val === true ? '' : val);
         }
-        return obj;
     }
-    /** Releases the held object without disposing it, emptying the holder. */
-    release() {
-        const ret = this._owned;
-        this._owned = null;
-        return ret;
+}
+exports.attrsElem = attrsElem;
+function attrs(attrsObj) {
+    return (elem) => attrsElem(elem, attrsObj);
+}
+exports.attrs = attrs;
+/**
+ * Sets an attribute of a DOM element to the given value. Removes the attribute when the value is
+ * null or undefined. The `attr()` variant takes no `elem` argument, and `attrValue` may be an
+ * observable or function.
+ * @param {Element} elem: The element to update.
+ * @param {String} attrName: The name of the attribute to bind, e.g. 'href'.
+ * @param {String|null} attrValue: The string value or null to remove the attribute.
+ */
+function attrElem(elem, attrName, attrValue) {
+    if (attrValue === null || attrValue === undefined) {
+        elem.removeAttribute(attrName);
     }
-    /** Disposes the held object and empties the holder. */
-    clear() {
-        if (this._owned) {
-            this._owned.dispose();
-            this._owned = null;
-        }
+    else {
+        elem.setAttribute(attrName, attrValue);
     }
-    /** Returns the held object, or null if the Holder is empty. */
-    get() { return this._owned; }
-    /** Returns whether the Holder is empty. */
-    isEmpty() { return !this._owned; }
-    /** When the holder is disposed, it disposes the held object if any. */
-    dispose() { this.clear(); }
 }
-exports.Holder = Holder;
+exports.attrElem = attrElem;
+function attr(attrName, attrValueObs) {
+    return (elem) => binding_1.subscribeElem(elem, attrValueObs, (val) => attrElem(elem, attrName, val));
+}
+exports.attr = attr;
 /**
- * Sets owner of obj (i.e. calls owner.autoDispose(obj)) unless owner is null. Returns obj.
+ * Sets or removes a boolean attribute of a DOM element. According to the spec, empty string is a
+ * valid true value for the attribute, and the false value is indicated by the attribute's absence.
+ * The `boolAttr()` variant takes no `elem`, and `boolValue` may be an observable or function.
+ * @param {Element} elem: The element to update.
+ * @param {String} attrName: The name of the attribute to bind, e.g. 'checked'.
+ * @param {Boolean} boolValue: Boolean value whether to set or unset the attribute.
  */
-function setDisposeOwner(owner, obj) {
-    if (owner) {
-        owner.autoDispose(obj);
-    }
-    return obj;
+function boolAttrElem(elem, attrName, boolValue) {
+    attrElem(elem, attrName, boolValue ? '' : null);
 }
-exports.setDisposeOwner = setDisposeOwner;
+exports.boolAttrElem = boolAttrElem;
+function boolAttr(attrName, boolValueObs) {
+    return (elem) => binding_1.subscribeElem(elem, boolValueObs, (val) => boolAttrElem(elem, attrName, val));
+}
+exports.boolAttr = boolAttr;
 /**
- * Helper for reporting errors during disposal. Try to report the type of the object.
+ * Adds a text node to the element. The `text()` variant takes no `elem`, and `value` may be an
+ * observable or function.
+ * @param {Element} elem: The element to update.
+ * @param {String} value: The text value to add.
  */
-function _describe(obj) {
-    return (obj && obj.constructor && obj.constructor.name ? obj.constructor.name : '' + obj);
+function textElem(elem, value) {
+    elem.appendChild(browserGlobals_1.G.document.createTextNode(value));
+}
+exports.textElem = textElem;
+function text(valueObs) {
+    return (elem) => {
+        const textNode = browserGlobals_1.G.document.createTextNode('');
+        binding_1.subscribeElem(elem, valueObs, (val) => { textNode.nodeValue = val; });
+        elem.appendChild(textNode);
+    };
+}
+exports.text = text;
+/**
+ * Sets a style property of a DOM element to the given value. The `style()` variant takes no
+ * `elem`, and `value` may be an observable or function.
+ * @param {Element} elem: The element to update.
+ * @param {String} property: The name of the style property to update, e.g. 'fontWeight'.
+ * @param {String} value: The value for the property.
+ */
+function styleElem(elem, property, value) {
+    elem.style[property] = value;
+}
+exports.styleElem = styleElem;
+function style(property, valueObs) {
+    return (elem) => binding_1.subscribeElem(elem, valueObs, (val) => styleElem(elem, property, val));
+}
+exports.style = style;
+/**
+ * Sets the property of a DOM element to the given value.
+ * The `prop()` variant takes no `elem`, and `value` may be an observable or function.
+ * @param {Element} elem: The element to update.
+ * @param {String} property: The name of the property to update, e.g. 'disabled'.
+ * @param {Object} value: The value for the property.
+ */
+function propElem(elem, property, value) {
+    elem[property] = value;
+}
+exports.propElem = propElem;
+function prop(property, valueObs) {
+    return (elem) => binding_1.subscribeElem(elem, valueObs, (val) => propElem(elem, property, val));
+}
+exports.prop = prop;
+/**
+ * Shows or hides the element depending on a boolean value. Note that the element must be visible
+ * initially (i.e. unsetting style.display should show it).
+ * The `show()` variant takes no `elem`, and `boolValue` may be an observable or function.
+ * @param {Element} elem: The element to update.
+ * @param {Boolean} boolValue: True to show the element, false to hide it.
+ */
+function showElem(elem, boolValue) {
+    elem.style.display = boolValue ? '' : 'none';
+}
+exports.showElem = showElem;
+function show(boolValueObs) {
+    return (elem) => binding_1.subscribeElem(elem, boolValueObs, (val) => showElem(elem, val));
+}
+exports.show = show;
+/**
+ * The opposite of show, hiding the element when boolValue is true.
+ * The `hide()` variant takes no `elem`, and `boolValue` may be an observable or function.
+ * @param {Element} elem: The element to update.
+ * @param {Boolean} boolValue: True to hide the element, false to show it.
+ */
+function hideElem(elem, boolValue) {
+    elem.style.display = boolValue ? 'none' : '';
+}
+exports.hideElem = hideElem;
+function hide(boolValueObs) {
+    return (elem) => binding_1.subscribeElem(elem, boolValueObs, (val) => hideElem(elem, val));
+}
+exports.hide = hide;
+/**
+ * Sets or toggles the given css class className.
+ */
+function clsElem(elem, className, boolValue = true) {
+    elem.classList.toggle(className, Boolean(boolValue));
+}
+exports.clsElem = clsElem;
+function cls(className, boolValue) {
+    if (typeof className !== 'string') {
+        return _clsDynamicPrefix('', className);
+    }
+    else if (!boolValue || typeof boolValue === 'boolean') {
+        return (elem) => clsElem(elem, className, boolValue);
+    }
+    else {
+        return (elem) => binding_1.subscribeElem(elem, boolValue, (val) => clsElem(elem, className, val));
+    }
+}
+exports.cls = cls;
+function clsPrefix(prefix, className, boolValue) {
+    if (typeof className !== 'string') {
+        return _clsDynamicPrefix(prefix, className);
+    }
+    else {
+        return cls(prefix + className, boolValue);
+    }
+}
+exports.clsPrefix = clsPrefix;
+function _clsDynamicPrefix(prefix, className) {
+    return (elem) => {
+        let prevClass = null;
+        binding_1.subscribeElem(elem, className, (name) => {
+            if (prevClass) {
+                elem.classList.remove(prevClass);
+            }
+            prevClass = name ? prefix + name : null;
+            if (prevClass) {
+                elem.classList.add(prevClass);
+            }
+        });
+    };
 }
 /**
- * DisposalList is an internal class mimicking emit.Emitter. The difference is that callbacks are
- * called in reverse order, and exceptions in callbacks are reported and swallowed.
+ * Associate arbitrary data with a DOM element. The `data()` variant takes no `elem`, and `value`
+ * may be an observable or function.
+ * @param {Element} elem: The element with which to associate data.
+ * @param {String} key: Key to identify this piece of data among others attached to elem.
+ * @param {Object} value: Arbitrary value to associate with elem.
  */
-class DisposalList extends emit_1.LLink {
-    constructor() { super(); }
-    addListener(callback, optContext) {
-        const lis = new DisposeListener(callback, optContext);
-        this._insertBefore(this._next, lis);
+function dataElem(elem, key, value) {
+    const obj = _dataMap.get(elem);
+    if (obj) {
+        obj[key] = value;
     }
-    /**
-     * Call all callbacks and dispose this object. The owner is required for better reporting of
-     * errors if any callback throws.
-     */
-    callAndDispose(owner) {
-        try {
-            DisposeListener.callAll(this._next, this, owner);
-        }
-        finally {
-            this._disposeList();
-        }
+    else {
+        domDispose_1.onDisposeElem(elem, () => _dataMap.delete(elem));
+        _dataMap.set(elem, { [key]: value });
     }
 }
+exports.dataElem = dataElem;
+function data(key, valueObs) {
+    return (elem) => binding_1.subscribeElem(elem, valueObs, (val) => dataElem(elem, key, val));
+}
+exports.data = data;
+function getData(elem, key) {
+    const obj = _dataMap.get(elem);
+    return obj && obj[key];
+}
+exports.getData = getData;
 /**
- * Internal class that keeps track of one item of the DisposalList. It mimicks emit.Listener, but
- * reports and swallows erros when it calls the callbacks in the list.
+ * See documentation for TestId above.
  */
-class DisposeListener extends emit_1.LLink {
-    constructor(callback, context) {
-        super();
-        this.callback = callback;
-        this.context = context;
-    }
-    static callAll(begin, end, owner) {
-        while (begin !== end) {
-            const lis = begin;
-            try {
-                lis.callback.call(lis.context);
-            }
-            catch (e) {
-                // tslint:disable-next-line:no-console
-                console.error("While disposing %s, error disposing %s: %s", _describe(owner), _describe(this), e);
-            }
-            begin = lis._next;
-        }
-    }
+function makeTestId(prefix) {
+    return clsPrefix.bind(null, prefix);
 }
-
-},{"./emit":15}],13:[function(require,module,exports){
-"use strict";
+exports.makeTestId = makeTestId;
 /**
- * dom.js provides a way to build a DOM tree easily.
- *
- * E.g.
- *  import {dom} from 'grainjs';
- *  dom('a#link.c1.c2', {'href': url}, 'Hello ', dom('span', 'world'));
- *    creates Node <a id="link" class="c1 c2" href={{url}}Hello <span>world</span></a>.
- *
- *  dom.frag(dom('span', 'Hello'), ['blah', dom('div', 'world')])
- *    creates document fragment with <span>Hello</span>blah<div>world</div>.
- *
- * DOM can also be created and modified inline during creation:
- *  dom('a#id.c1',
- *      dom.cls('c2'), dom.attr('href', url),
- *      dom.text('Hello '), dom('span', dom.text('world')))
- *    creates Node <a id="link" class="c1 c2" href={{url}}Hello <span>world</span></a>,
- *    identical to the first example above.
+ * See documentation for TestId above.
  */
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-// We keep various dom-related functions organized in private modules, but they are exposed here.
-var _domImpl_1 = require("./_domImpl");
-exports.svg = _domImpl_1.svg;
-exports.update = _domImpl_1.update;
-exports.frag = _domImpl_1.frag;
-exports.find = _domImpl_1.find;
-exports.findAll = _domImpl_1.findAll;
-__export(require("./_domComponent"));
-__export(require("./_domDispose"));
-__export(require("./_domForEach"));
-__export(require("./_domMethods"));
-__export(require("./domevent"));
-const _domComponent = require("./_domComponent");
-const _domDispose = require("./_domDispose");
-const _domForEach = require("./_domForEach");
-const _domImpl = require("./_domImpl");
-const _domMethods = require("./_domMethods");
-const domevent = require("./domevent");
-// We just want to re-export _domImpl.dom, but to allow adding methods to it in a typesafe way,
-// TypeScript wants us to declare a real function in the same file.
-function dom(tagString, ...args) {
-    return _domImpl.dom(tagString, ...args);
-}
-exports.dom = dom;
-// Additionally export all methods as properties of dom() function.
-(function (dom) {
-    dom.svg = _domImpl.svg;
-    dom.frag = _domImpl.frag;
-    dom.update = _domImpl.update;
-    dom.find = _domImpl.find;
-    dom.findAll = _domImpl.findAll;
-    dom.domDispose = _domDispose.domDispose;
-    dom.onDisposeElem = _domDispose.onDisposeElem;
-    dom.onDispose = _domDispose.onDispose;
-    dom.autoDisposeElem = _domDispose.autoDisposeElem;
-    dom.autoDispose = _domDispose.autoDispose;
-    dom.attrsElem = _domMethods.attrsElem;
-    dom.attrs = _domMethods.attrs;
-    dom.attrElem = _domMethods.attrElem;
-    dom.attr = _domMethods.attr;
-    dom.boolAttrElem = _domMethods.boolAttrElem;
-    dom.boolAttr = _domMethods.boolAttr;
-    dom.textElem = _domMethods.textElem;
-    dom.text = _domMethods.text;
-    dom.styleElem = _domMethods.styleElem;
-    dom.style = _domMethods.style;
-    dom.propElem = _domMethods.propElem;
-    dom.prop = _domMethods.prop;
-    dom.showElem = _domMethods.showElem;
-    dom.show = _domMethods.show;
-    dom.hideElem = _domMethods.hideElem;
-    dom.hide = _domMethods.hide;
-    dom.clsElem = _domMethods.clsElem;
-    dom.cls = _domMethods.cls;
-    dom.clsPrefix = _domMethods.clsPrefix;
-    dom.dataElem = _domMethods.dataElem;
-    dom.data = _domMethods.data;
-    dom.getData = _domMethods.getData;
-    dom.replaceContent = _domMethods.replaceContent;
-    dom.domComputed = _domMethods.domComputed;
-    dom.maybe = _domMethods.maybe;
-    dom.forEach = _domForEach.forEach;
-    dom.Component = _domComponent.Component;
-    dom.create = _domComponent.create;
-    dom.createInit = _domComponent.createInit;
-    dom.onElem = domevent.onElem;
-    dom.on = domevent.on;
-    dom.onMatchElem = domevent.onMatchElem;
-    dom.onMatch = domevent.onMatch;
-    dom.onKeyPressElem = domevent.onKeyPressElem;
-    dom.onKeyPress = domevent.onKeyPress;
-})(dom = exports.dom || (exports.dom = {}));
+const noTestId = (name) => null;
+exports.noTestId = noTestId;
 
-},{"./_domComponent":4,"./_domDispose":5,"./_domForEach":6,"./_domImpl":7,"./_domMethods":8,"./domevent":14}],14:[function(require,module,exports){
+},{"./binding":4,"./browserGlobals":5,"./domDispose":11}],15:[function(require,module,exports){
 "use strict";
 /**
  * domevent provides a way to listen to DOM events, similar to JQuery's `on()` function. Its
@@ -1615,6 +1637,7 @@ exports.dom = dom;
  *    let lis = domevent.onElem(elem, 'mouseup', e => { lis.dispose(); other_work(); });
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.onKeyDown = exports.onKeyPress = exports.onKeyElem = exports.onMatch = exports.onMatchElem = exports.on = exports.onElem = void 0;
 function _findMatch(inner, outer, selector) {
     for (let el = inner; el && el !== outer; el = el.parentElement) {
         if (el.matches(selector)) {
@@ -1693,35 +1716,55 @@ function onMatch(selector, eventType, callback, { useCapture = false } = {}) {
 }
 exports.onMatch = onMatch;
 /**
- * Listen to key presses, with specified per-key callbacks. The `onKeyPress()` variant takes no
- * `elem` argument, and may be used as an argument to dom().
- *
+ * Listen to key events (typically 'keydown' or 'keypress'), with specified per-key callbacks.
  * Key names are listed at https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
  *
+ * Methods onKeyPress() and onKeyDown() are intended to be used as arguments to dom().
+ *
+ * By default, handled events are stopped from bubbling with stopPropagation() and
+ * preventDefault(). If, however, you register a key with a "$" suffix (i.e. "Enter$" instead of
+ * "Enter"), then the event is allowed to bubble normally.
+ *
+ * When this handler is set on an element, we automatically ensure that tabindex attribute is set,
+ * to allow this element to receive keyboard events.
+ *
  * For example:
  *
  *    dom('input', ...
- *      dom.onKeyPress({
+ *      dom.onKeyDown({
  *        Enter: (e, elem) => console.log("Enter pressed"),
  *        Escape: (e, elem) => console.log("Escape pressed"),
+ *        Delete$: (e, elem) => console.log("Delete pressed, will bubble"),
  *      })
  *    )
  */
-function onKeyPressElem(elem, callbacks) {
-    return onElem(elem, 'keypress', (e, _elem) => {
-        const cb = callbacks[e.key];
-        if (cb) {
-            cb(e, _elem);
+function onKeyElem(elem, evType, keyHandlers) {
+    if (!(elem.tabIndex >= 0)) { // If tabIndex property is undefined or -1,
+        elem.setAttribute('tabindex', '-1'); // Set tabIndex attribute to make the element focusable.
+    }
+    return onElem(elem, evType, (ev, _elem) => {
+        const plainHandler = keyHandlers[ev.key];
+        const handler = plainHandler || keyHandlers[ev.key + '$'];
+        if (handler) {
+            if (plainHandler) {
+                ev.stopPropagation();
+                ev.preventDefault();
+            }
+            handler(ev, _elem);
         }
     });
 }
-exports.onKeyPressElem = onKeyPressElem;
-function onKeyPress(callbacks) {
-    return (elem) => { onKeyPressElem(elem, callbacks); };
+exports.onKeyElem = onKeyElem;
+function onKeyPress(keyHandlers) {
+    return (elem) => { onKeyElem(elem, 'keypress', keyHandlers); };
 }
 exports.onKeyPress = onKeyPress;
+function onKeyDown(keyHandlers) {
+    return (elem) => { onKeyElem(elem, 'keydown', keyHandlers); };
+}
+exports.onKeyDown = onKeyDown;
 
-},{}],15:[function(require,module,exports){
+},{}],16:[function(require,module,exports){
 "use strict";
 /**
  * emit.js implements an Emitter class which emits events to a list of listeners. Listeners are
@@ -1746,6 +1789,7 @@ exports.onKeyPress = onKeyPress;
  *    emitter.emit("hello", "world");
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Listener = exports.Emitter = exports.LLink = void 0;
 // Note about a possible alternative implementation.
 //
 // We could implement the same interface using an array of listeners. Certain issues apply, in
@@ -1828,7 +1872,8 @@ class Emitter extends LLink {
      * Sets the single callback that would get called when a listener is added or removed.
      * @param {Function} changeCB(hasListeners): Function to call after a listener is added or
      *    removed. It's called with a boolean indicating whether this Emitter has any listeners.
-     *    Pass in `null` to unset the callback.
+     *    Pass in `null` to unset the callback. Note that it can be called multiple times in a row
+     *    with hasListeners `true`.
      */
     setChangeCB(changeCB, optContext) {
         this._changeCB = changeCB || _noop;
@@ -1887,7 +1932,7 @@ class Listener extends LLink {
 }
 exports.Listener = Listener;
 
-},{}],16:[function(require,module,exports){
+},{}],17:[function(require,module,exports){
 "use strict";
 /**
  * Grain.js observables and computeds are similar to (and mostly inspired by) those in
@@ -1910,26 +1955,56 @@ exports.Listener = Listener;
  * knockout as a dependency of grainjs.
  *
  * In both cases, calling fromKo/toKo twice on the same observable will return the same wrapper,
- * and subscriptions and disposal are appropriately set up to make usage seamless.
+ * and subscriptions and disposal are appropriately set up to make usage seamless. In particular,
+ * the returned wrapper should not be disposed; it's tied to the lifetime of the wrapped object.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupKoDisposal = exports.toKo = exports.KoWrapObs = exports.fromKo = void 0;
+const domDispose_1 = require("./domDispose");
 const observable_1 = require("./observable");
 const fromKoWrappers = new WeakMap();
 const toKoWrappers = new WeakMap();
 /**
  * Returns a Grain.js observable which mirrors a Knockout observable.
+ *
+ * Do not dispose this wrapper, as it is shared by all code using koObs, and its lifetime is tied
+ * to the lifetime of koObs. If unused, it consumes minimal resources, and should get garbage
+ * collected along with koObs.
  */
-function fromKo(koObservable) {
-    const prevObs = fromKoWrappers.get(koObservable);
-    if (prevObs) {
-        return prevObs;
-    }
-    const newObs = observable_1.observable(koObservable.peek());
-    fromKoWrappers.set(koObservable, newObs);
-    koObservable.subscribe((val) => newObs.set(val));
-    return newObs;
+function fromKo(koObs) {
+    return fromKoWrappers.get(koObs) || fromKoWrappers.set(koObs, new KoWrapObs(koObs)).get(koObs);
 }
 exports.fromKo = fromKo;
+/**
+ * An Observable that wraps a Knockout observable, created via fromKo(). It keeps minimal overhead
+ * when unused by only subscribing to the wrapped observable while it itself has subscriptions.
+ *
+ * This way, when unused, the only reference is from the wrapper to the wrapped object. KoWrapObs
+ * should not be disposed; its lifetime is tied to that of the wrapped object.
+ */
+class KoWrapObs extends observable_1.Observable {
+    constructor(_koObs) {
+        super(_koObs.peek());
+        this._koObs = _koObs;
+        this._koSub = null;
+        this.setListenerChangeCB((hasListeners) => {
+            if (!hasListeners) {
+                this._koSub.dispose();
+                this._koSub = null;
+            }
+            else if (!this._koSub) {
+                // TODO this is a little hack, really, BaseObservable should expose a way to set the value
+                // directly by derived classes, i.e. a protected setter.
+                this._value = this._koObs.peek();
+                this._koSub = this._koObs.subscribe((val) => this.setAndTrigger(val));
+            }
+        });
+    }
+    get() { return this._koObs.peek(); }
+    set(value) { observable_1.bundleChanges(() => this._koObs(value)); }
+    dispose() { throw new Error("KoWrapObs should not be disposed"); }
+}
+exports.KoWrapObs = KoWrapObs;
 /**
  * Returns a Knockout observable which mirrors a Grain.js observable.
  */
@@ -1944,8 +2019,61 @@ function toKo(knockout, grainObs) {
     return newKoObs;
 }
 exports.toKo = toKo;
+// Marker for when knockout-disposal integration has already been setup.
+let koDisposalIsSetup = false;
+/**
+ * Set up integration between grainjs and knockout disposal. Knockout does cleanup using
+ * ko.removeNode / ko.cleanNode (it also takes care of JQuery cleanup if needed). GrainJS does
+ * cleanup using dom.domDispose(). By default these don't know about each other.
+ *
+ * If you mix the two libraries, however, disposing an element may need to trigger disposers
+ * registered by either library.
+ *
+ * This method ensures that this happens.
+ *
+ * Note: grainjs disposes text nodes too, but nothing relies on it. When disposal is triggered via
+ * knockout, we are forced to rely on knockout's node traversal which ignores text nodes.
+ */
+function setupKoDisposal(ko) {
+    // Ensure we don't do the setup more than once, or things will get called multiple times.
+    if (koDisposalIsSetup) {
+        return;
+    }
+    koDisposalIsSetup = true;
+    const koDomNodeDisposal = ko.utils.domNodeDisposal;
+    // Knockout by default has an external-data-cleanup func set to cleanup JQuery. Whatever it is
+    // set to, we will continue calling it, and also will call grainjs domDisposeNode.
+    const origKoCleanExternalData = koDomNodeDisposal.cleanExternalData;
+    // The original function called by grainjs to clean nodes recursively. We'll override it.
+    const origGrainDisposeRecursive = domDispose_1.domDisposeHooks.disposeRecursive;
+    // New function called by knockout to do extra cleanup. Now calls grainjs single-node cleanup.
+    // (In knockout, we can only override single-node cleanup.)
+    function newKoCleanExternalData(node) {
+        origKoCleanExternalData(node);
+        domDispose_1.domDisposeHooks.disposeNode(node);
+    }
+    // Function called by grainjs to clean nodes recursively. We override the recursive cleanup
+    // function to call the recursive knockout cleanup (letting knockout do the dom traversal it
+    // normally does).
+    function newGrainDisposeRecursive(node) {
+        origGrainDisposeRecursive(node);
+        // While doing knockout cleanup, do NOT have it call grainjs cleanup too, as that would cause
+        // multiple unnecessary traversals of DOM.
+        koDomNodeDisposal.cleanExternalData = origKoCleanExternalData;
+        try {
+            ko.cleanNode(node);
+        }
+        finally {
+            koDomNodeDisposal.cleanExternalData = newKoCleanExternalData;
+        }
+    }
+    // Use knockout and grainjs hooks to actually set the new cleanup functions.
+    koDomNodeDisposal.cleanExternalData = newKoCleanExternalData;
+    domDispose_1.domDisposeHooks.disposeRecursive = newGrainDisposeRecursive;
+}
+exports.setupKoDisposal = setupKoDisposal;
 
-},{"./observable":18}],17:[function(require,module,exports){
+},{"./domDispose":11,"./observable":19}],18:[function(require,module,exports){
 "use strict";
 /**
  * ObsArray extends a plain Observable to allow for more efficient observation of array changes.
@@ -1980,6 +2108,7 @@ exports.toKo = toKo;
  * ownership of those disposables that are added to it as array elements.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiveIndex = exports.makeLiveIndex = exports.computedArray = exports.ComputedArray = exports.obsArray = exports.MutableObsArray = exports.ObsArray = void 0;
 const dispose_1 = require("./dispose");
 const observable_1 = require("./observable");
 const subscribe_1 = require("./subscribe");
@@ -2243,7 +2372,7 @@ class LiveIndex extends observable_1.Observable {
 }
 exports.LiveIndex = LiveIndex;
 
-},{"./dispose":12,"./observable":18,"./subscribe":20}],18:[function(require,module,exports){
+},{"./dispose":7,"./observable":19,"./subscribe":22}],19:[function(require,module,exports){
 "use strict";
 /**
  * observable.js implements an observable value, which lets other code subscribe to changes.
@@ -2268,10 +2397,12 @@ exports.LiveIndex = LiveIndex;
  * dependency is created, and which observables the dependency connects.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.obsHolder = exports.observable = exports.Observable = exports.BaseObservable = exports.bundleChanges = void 0;
 const _computed_queue_1 = require("./_computed_queue");
+const dispose_1 = require("./dispose");
 const emit_1 = require("./emit");
 var _computed_queue_2 = require("./_computed_queue");
-exports.bundleChanges = _computed_queue_2.bundleChanges;
+Object.defineProperty(exports, "bundleChanges", { enumerable: true, get: function () { return _computed_queue_2.bundleChanges; } });
 class BaseObservable {
     /**
      * Internal constructor for an Observable. You should use observable() function instead.
@@ -2326,7 +2457,8 @@ class BaseObservable {
      * previously-set such callback.
      * @param {Function} changeCB(hasListeners): Function to call after a listener is added or
      *    removed. It's called with a boolean indicating whether this observable has any listeners.
-     *    Pass in `null` to unset the callback.
+     *    Pass in `null` to unset the callback. Note that it can be called multiple times in a row
+     *    with hasListeners `true`.
      */
     setListenerChangeCB(changeCB, optContext) {
         this._onChange.setChangeCB(changeCB, optContext);
@@ -2377,6 +2509,12 @@ class Observable extends BaseObservable {
         obs._owned = value;
         return obs;
     }
+    /**
+     * Creates a new Observable with the given initial value, and owned by owner.
+     */
+    static create(owner, value) {
+        return dispose_1.setDisposeOwner(owner, new Observable(value));
+    }
     /**
      * The use an observable for a disposable object, use it a DisposableOwner:
      *
@@ -2426,7 +2564,124 @@ function obsHolder(value) {
 }
 exports.obsHolder = obsHolder;
 
-},{"./_computed_queue":3,"./emit":15}],19:[function(require,module,exports){
+},{"./_computed_queue":3,"./dispose":7,"./emit":16}],20:[function(require,module,exports){
+"use strict";
+/**
+ * pureComputed.js implements a variant of computed() suitable for use with a pure read function
+ * (free of side-effects). A pureComputed is only subscribed to its dependencies when something is
+ * subscribed to it. At other times, it is not subscribed to anything, and calls to `get()` will
+ * recompute its value each time by calling its read() function.
+ *
+ * Its syntax and usage are otherwise exactly as for a computed.
+ *
+ * In addition to being cheaper when unused, a pureComputed() also avoids leaking memory when
+ * unused (since it's not registered with dependencies), so it is not necessary to dispose it.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pureComputed = exports.PureComputed = void 0;
+const observable_1 = require("./observable");
+const subscribe_1 = require("./subscribe");
+function _noWrite() {
+    throw new Error("Can't write to non-writable pureComputed");
+}
+function _useFunc(obs) {
+    return ('get' in obs) ? obs.get() : obs.peek();
+}
+// Constant empty array, which we use to avoid allocating new read-only empty arrays.
+const emptyArray = [];
+class PureComputed extends observable_1.Observable {
+    /**
+     * Internal constructor for a PureComputed. You should use pureComputed() function instead.
+     */
+    constructor(callback, dependencies) {
+        // At initialization we force an undefined value even though it's not of type T: it's not
+        // actually used as get() is overridden.
+        super(undefined);
+        this._callback = callback;
+        this._write = _noWrite;
+        this._dependencies = dependencies.length > 0 ? dependencies : emptyArray;
+        this._sub = null;
+        this._inCall = false;
+        this.setListenerChangeCB(this._onListenerChange, this);
+    }
+    _getDepItem() {
+        this._activate();
+        return this._sub._getDepItem();
+    }
+    get() {
+        if (!this._sub && !this._inCall) {
+            // _inCall member prevents infinite recursion.
+            this._inCall = true;
+            try {
+                const readArgs = [_useFunc];
+                // Note that this attempts to optimize for speed.
+                for (let i = 0, len = this._dependencies.length; i < len; i++) {
+                    readArgs[i + 1] = this._dependencies[i].get();
+                }
+                super.set(this._callback.apply(undefined, readArgs));
+            }
+            finally {
+                this._inCall = false;
+            }
+        }
+        return super.get();
+    }
+    /**
+     * "Sets" the value of the pure computed by calling the write() callback if one was provided in
+     * the constructor. Throws an error if there was no such callback (not a "writable" computed).
+     * @param {Object} value: The value to pass to the write() callback.
+     */
+    set(value) { this._write(value); }
+    /**
+     * Set callback to call when this.set(value) is called, to make it a writable computed. If not
+     * set, attempting to write to this computed will throw an exception.
+     */
+    onWrite(writeFunc) {
+        this._write = writeFunc;
+        return this;
+    }
+    /**
+     * Disposes the pureComputed, unsubscribing it from all observables it depends on.
+     */
+    dispose() {
+        if (this._sub) {
+            this._sub.dispose();
+        }
+        // Truthy value for _sub prevents some errors after disposal, by avoiding activation or
+        // _directRead calls.
+        this._sub = true;
+        super.dispose();
+    }
+    _activate() {
+        if (!this._sub) {
+            this._sub = new subscribe_1.Subscription(this._read.bind(this), this._dependencies);
+        }
+    }
+    _onListenerChange(hasListeners) {
+        if (hasListeners) {
+            this._activate();
+        }
+        else if (this._sub) {
+            this._sub.dispose();
+            this._sub = null;
+        }
+    }
+    _read(use, ...args) {
+        super.set(this._callback(use, ...args));
+    }
+}
+exports.PureComputed = PureComputed;
+/**
+ * Creates and returns a new PureComputed. The interface is identical to that of a Computed.
+ */
+function pureComputed(...args) {
+    const readCb = args.pop();
+    // The cast helps ensure that Observable is compatible with ISubscribable abstraction that we use.
+    return new PureComputed(readCb, args);
+}
+exports.pureComputed = pureComputed;
+
+},{"./observable":19,"./subscribe":22}],21:[function(require,module,exports){
 "use strict";
 /**
  * In-code styling for DOM components, inspired by Reacts Styled Components.
@@ -2484,11 +2739,25 @@ exports.obsHolder = obsHolder;
  *      myButton(myButton.cls('-small'), 'Test')
  *
  * creates a button with both the myButton style above, and the style specified under "&-small".
+ *
+ * Animations with @keyframes may be created with a unique name by using the keyframes() helper:
+ *
+ *    const rotate360 = keyframes(`
+ *      from { transform: rotate(0deg); }
+ *      to { transform: rotate(360deg); }
+ *    `);
+ *
+ *    const Rotate = styled('div', `
+ *      display: inline-block;
+ *      animation: ${rotate360} 2s linear infinite;
+ *    `);
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyframes = exports.styled = void 0;
 // Use the browser globals in a way that allows replacing them with mocks in tests.
 const browserGlobals_1 = require("./browserGlobals");
-const dom_1 = require("./dom");
+const domImpl_1 = require("./domImpl");
+const domMethods_1 = require("./domMethods");
 function styled(creator, styles) {
     // Note that we intentionally minimize the work done when styled() is called; it's better to do
     // any needed work on first use. That's when we will actually build the css rules.
@@ -2496,25 +2765,37 @@ function styled(creator, styles) {
     // Creator function reflects the input, with only the addition of style.use() at the end. Note
     // that it needs to be at the end because creator() might take special initial arguments.
     const newCreator = (typeof creator === 'string') ?
-        (...args) => dom_1.dom(creator, ...args, style.use()) :
-        (...args) => creator(...args, style.use());
+        (...args) => style.addToElem(domImpl_1.dom(creator, ...args)) :
+        (...args) => style.addToElem(creator(...args));
     return Object.assign(newCreator, {
         className: style.className,
-        cls: dom_1.dom.clsPrefix.bind(null, style.className),
+        cls: domMethods_1.clsPrefix.bind(null, style.className),
     });
 }
 exports.styled = styled;
+// Keyframes produces simply a string with the generated name. Note that these does not support
+// nesting or ampersand (&) handling, since these would be difficult and are entirely unneeded.
+function keyframes(styles) {
+    return (new KeyframePiece(styles)).className;
+}
+exports.keyframes = keyframes;
 function createCssRules(className, styles) {
-    const nestedRules = [];
-    // Parse out nested styles. Replacing them by empty string in the main section, and add them to
-    // nestedRules array to be joined up at the end. Replace & with .className.
-    const mainRules = styles.replace(/([^;]*)\s*{([^}]*)\s*}/g, (match, selector, rules) => {
-        const fullSelector = selector.replace(/&/g, '.' + className);
-        nestedRules.push(`${fullSelector} {${rules}}`);
-        return '';
-    });
-    // Actual styles to include into the generated stylesheet.
-    return `.${className} {${mainRules}}\n` + nestedRules.join('\n');
+    // The first time we encounter a nested section, we know which are the "main" rules, and can
+    // wrap them appropriately.
+    const nestedStart = styles.search(/[^;]*\{/);
+    const mainRules = nestedStart < 0 ? styles : styles.slice(0, nestedStart);
+    const nestedRules = nestedStart < 0 ? "" : styles.slice(nestedStart);
+    // At the end, replace all occurrences of & with ".className".
+    return `& {${mainRules}\n}\n${nestedRules}`.replace(/&/g, className);
+}
+// Used by getNextStyleNum when running without a global window object (e.g. in tests).
+const _global = {};
+// Keep the counter for next class attached to the global window object rather than be a library
+// global. This way if by some chance multiple instance of grainjs are loaded into the page, it
+// still works without overwriting class names (which would be extremely confusing).
+function getNextStyleNum() {
+    const g = browserGlobals_1.G.window || _global;
+    return g._grainNextStyleNum = (g._grainNextStyleNum || 0) + 1;
 }
 class StylePiece {
     constructor(_styles) {
@@ -2523,31 +2804,37 @@ class StylePiece {
         this.className = StylePiece._nextClassName();
         StylePiece._unmounted.add(this);
     }
-    // Generate a new css class name.
-    static _nextClassName() { return `_grain${this._next++}`; }
+    // Generate a new css class name. The suffix ensures that names like "&2" can't cause a conflict.
+    static _nextClassName() { return `_grain${getNextStyleNum()}_`; }
     // Mount all unmounted StylePieces, and clear the _unmounted map.
     static _mountAll() {
-        const sheet = Array.from(this._unmounted, (p) => createCssRules(p.className, p._styles))
-            .join('\n\n');
-        browserGlobals_1.G.document.head.appendChild(dom_1.dom('style', sheet));
+        const sheet = Array.from(this._unmounted, (p) => p._createRules()).join("\n\n");
+        browserGlobals_1.G.document.head.appendChild(domImpl_1.dom('style', sheet));
         for (const piece of this._unmounted) {
             piece._mounted = true;
         }
         this._unmounted.clear();
     }
-    use() {
+    addToElem(elem) {
         if (!this._mounted) {
             StylePiece._mountAll();
         }
-        return (elem) => { elem.classList.add(this.className); };
+        elem.classList.add(this.className);
+        return elem;
+    }
+    _createRules() {
+        return createCssRules('.' + this.className, this._styles);
     }
 }
-// Index of next auto-generated css class name.
-StylePiece._next = 1;
 // Set of all StylePieces created but not yet mounted.
 StylePiece._unmounted = new Set();
+class KeyframePiece extends StylePiece {
+    _createRules() {
+        return `@keyframes ${this.className} {${this._styles}}`;
+    }
+}
 
-},{"./browserGlobals":10,"./dom":13}],20:[function(require,module,exports){
+},{"./browserGlobals":5,"./domImpl":13,"./domMethods":14}],22:[function(require,module,exports){
 "use strict";
 /**
  * subscribe.js implements subscriptions to several observables at once.
@@ -2569,7 +2856,9 @@ StylePiece._unmounted = new Set();
  *    subscribe(...deps, ((use, ...depValues) => READ_CALLBACK));
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribe = exports.Subscription = void 0;
 const _computed_queue_1 = require("./_computed_queue");
+const kowrap_1 = require("./kowrap");
 // Constant empty array, which we use to avoid allocating new read-only empty arrays.
 const emptyArray = [];
 class Subscription {
@@ -2612,7 +2901,8 @@ class Subscription {
      * subscription to `obs` if one doesn't yet exist.
      * @param {Observable} obs: The observable being used as a dependency.
      */
-    _useDependency(obs) {
+    _useDependency(_obs) {
+        const obs = ('_getDepItem' in _obs) ? _obs : kowrap_1.fromKo(_obs);
         let listener = this._dynDeps.get(obs);
         if (!listener) {
             listener = this._subscribeTo(obs);
@@ -2658,7 +2948,8 @@ class Subscription {
      * @param {Observable} obs: The observable to subscribe to.
      * @returns {Listener} Listener object.
      */
-    _subscribeTo(obs) {
+    _subscribeTo(_obs) {
+        const obs = ('_getDepItem' in _obs) ? _obs : kowrap_1.fromKo(_obs);
         return obs.addListener(this._enqueue, this);
     }
     /**
@@ -2687,9 +2978,10 @@ function subscribe(...args) {
 }
 exports.subscribe = subscribe;
 
-},{"./_computed_queue":3}],21:[function(require,module,exports){
+},{"./_computed_queue":3,"./kowrap":17}],23:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.bindBU = exports.bindUB = exports.bindB = void 0;
 /**
  * Returns f such that f() calls func(...boundArgs), i.e. optimizes `() => func(...boundArgs)`.
  * It is faster on node6 by 57-92%.
@@ -2750,5 +3042,118 @@ function bindBU(func, b) {
 }
 exports.bindBU = bindBU;
 
-},{}]},{},[1])(1)
+},{}],24:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.input = void 0;
+/**
+ * General INPUT widget.
+ */
+const index_1 = require("../../index");
+/**
+ * Creates a input element tied to the given observable. The required options argument allows
+ * controlling the behavior, see IInputOptions for details.
+ *
+ * This is intended for string input elements, with "type" such as text, email, url, password,
+ * number, tel.
+ *
+ * Note that every change to the observable will affect the input element, but not every change to
+ * the input element will affect the observable. Specifically, unless {onInput: true} is set, the
+ * visible content may differ from the observable until the element loses focus or Enter is hit.
+ *
+ * Example usage:
+ *    input(obs, {}, {type: 'text', placeholder: 'Your name...'});
+ *    input(obs, {isValid: isValidObs}, {type: 'email', placeholder: 'Your email...'});
+ *    input(obs, {onInput: true}, {type: 'text'});
+ */
+function input(obs, options, ...args) {
+    const isValid = options.isValid;
+    function setValue(elem) {
+        index_1.bundleChanges(() => {
+            obs.set(elem.value);
+            if (isValid) {
+                isValid.set(elem.validity.valid);
+            }
+        });
+    }
+    return index_1.dom('input', ...args, index_1.dom.prop('value', obs), (isValid ?
+        (elem) => index_1.dom.autoDisposeElem(elem, index_1.subscribe(obs, (use) => isValid.set(elem.checkValidity()))) :
+        null), options.onInput ? index_1.dom.on('input', (e, elem) => setValue(elem)) : null, index_1.dom.on('change', (e, elem) => setValue(elem)), index_1.dom.onKeyPress({ Enter: (e, elem) => setValue(elem) }));
+}
+exports.input = input;
+
+},{"../../index":1}],25:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.select = void 0;
+/**
+ * Select dropdown widget.
+ */
+const index_1 = require("../../index");
+function unwrapMaybeObsArray(array) {
+    return Array.isArray(array) ? array : array.get();
+}
+function getOptionValue(option) {
+    return (typeof option === "string") ?
+        option : option.value;
+}
+/**
+ * Creates a select dropdown widget. The observable `obs` reflects the value of the selected
+ * option, and `optionArray` is an array (regular or observable) of option values and labels.
+ * These may be either strings, or {label, value, disabled} objects.
+ *
+ * The type of value may be any type at all; it is opaque to this widget.
+ *
+ * If obs is set to an invalid or disabled value, then defLabel option is used to determine the
+ * label that the select box will show, blank by default.
+ *
+ * Usage:
+ *    const fruit = observable("apple");
+ *    select(fruit, ["apple", "banana", "mango"]);
+ *
+ *    const employee = observable(17);
+ *    const employees = obsArray<IOption<number>>([
+ *      {value: 12, label: "Bob", disabled: true},
+ *      {value: 17, label: "Alice"},
+ *      {value: 21, label: "Eve"},
+ *    ]);
+ *    select(employee, employees, {defLabel: "Select employee:"});
+ */
+function select(obs, optionArray, options = {}) {
+    const { defLabel = "" } = options;
+    return index_1.dom('select', 
+    // Include a hidden option to represent a default value. This one gets shown when none of the
+    // options are selected. This is more consistent when showing the first valid option.
+    index_1.dom('option', index_1.dom.hide(true), defLabel), 
+    // Create all the option elements.
+    index_1.dom.forEach(optionArray, (option) => {
+        const obj = (typeof option === "string") ?
+            { value: option, label: option } : option;
+        // Note we only set 'selected' when an <option> is created; we are not subscribing to obs.
+        // This is to reduce the amount of subscriptions, esp. when number of options is large.
+        return index_1.dom('option', {
+            disabled: obj.disabled,
+            selected: obj.value === obs.get(),
+        }, obj.label);
+    }), 
+    // When obs changes, update select's value; we do it after <options> have been created.
+    // Note that autoDisposeElem ensures the subscription is disposed with the 'select' element.
+    (elem) => index_1.dom.autoDisposeElem(elem, index_1.subscribe(obs, (use, obsValue) => {
+        const arr = unwrapMaybeObsArray(optionArray);
+        const index = arr.findIndex((item) => getOptionValue(item) === obsValue);
+        elem.selectedIndex = index + 1; // +1 for default option
+    })), 
+    // When user picks a new item, use its value to update the observable.
+    index_1.dom.on('change', (e, elem) => {
+        const index = elem.selectedIndex;
+        const item = unwrapMaybeObsArray(optionArray)[index - 1]; // -1 for default option
+        // It should be impossible for the user to select an invalid option, but check just in case.
+        if (item !== undefined) {
+            obs.set(getOptionValue(item));
+        }
+    }));
+}
+exports.select = select;
+
+},{"../../index":1}]},{},[1])(1)
 });