grainjs 1.0.1 → 1.1.0

package/dist/cjs/lib/dom.js

@@ -1,34 +1,28 @@
 "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.
- */
-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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.
-__export(require("./domImpl"));
-__export(require("./domComponent"));
-__export(require("./domComputed"));
-__export(require("./domDispose"));
-__export(require("./domForEach"));
-__export(require("./domMethods"));
-__export(require("./domevent"));
+__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");
@@ -37,10 +31,48 @@ const _domImpl = require("./domImpl");
 const _domMethods = require("./domMethods");
 const domevent = require("./domevent");
 const domImpl_1 = require("./domImpl");
+/**
+ * `dom()` provides a way to build a DOM tree easily.
+ *
+ * The first argument is a string consisting of a lowercase tag name (e.g. `"div"`), with optional
+ * `"#foo"` suffix to add the ID `'foo'`, and zero or more `".bar"` suffixes to add a CSS class
+ * `'bar'`.
+ *
+ * The rest of the arguments are optional and may be any number, of these types:
+ *
+ * @param Nodes - become children of the created element
+ * @param strings - become text node children
+ * @param objects - Literal objects to set string attributes on the element.
+ *    E.g. `{title: "foo"}`.
+ * @param null - The values `null` and `undefined` values are ignored completely.
+ * @param Arrays - flattened with each item processed recursively
+ * @param functions - called with the element being built as the argument, for a chance to modify
+ *    the element as it's being created. Return values are processed recursively.
+ * @param functions - "dom methods" are a expressions such as `dom.attr('href', url)` or
+ *    `dom.hide(obs)`, which are special cases of the "functions" category.
+ *
+ * @example
+ * ```ts
+ * import {dom} from 'grainjs';
+ * dom('a', {href: url, className: 'myclass'}, 'Hello ', dom('strong', 'world'));
+ * ```
+ * creates HTML element `<a href={{url}} class="myclass">Hello <strong>world</strong></a>`.
+ *
+ * @example
+ * Here's an example equivalent to the one above, using dom methods `dom.cls`, `dom.attr`,
+ * `dom.text`. In reality, these methods are useful with observable values rather than constant
+ * strings.
+ * ```ts
+ *  dom('a', dom.attr('href', url), dom.cls('myclass'),
+ *      dom.text('Hello '), dom('strong', dom.text('world')));
+ * ```
+ *
+ * @see [DOM & Observables](/basics).
+ */
 // 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);
+    return (0, domImpl_1.dom)(tagString, ...args);
 }
 exports.dom = dom;
 // Additionally export all methods as properties of dom() function.
@@ -79,7 +111,9 @@ exports.dom = dom;
     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;

package/dist/cjs/lib/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../lib/dom.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../lib/dom.ts"],"names":[],"mappings":"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"}

package/dist/cjs/lib/domComponent.d.ts

@@ -1,74 +1,79 @@
+import { MultiHolder } from './dispose';
+import { DomContents } from './domComputed';
+export interface IDomComponent {
+    buildDom(): DomContents;
+}
+export type DomComponentReturn = DomContents | IDomComponent;
+export type IDomCreateFunc<Args extends any[]> = (owner: MultiHolder, ...args: Args) => DomComponentReturn;
+export interface IDomCreateClass<Args extends any[]> {
+    create: IDomCreateFunc<Args>;
+    new (...args: Args): DomComponentReturn;
+}
+export type IDomCreator<Args extends any[]> = IDomCreateFunc<Args> | IDomCreateClass<Args>;
+export type DomCreatorArgs<T> = T extends (owner: MultiHolder, ...args: infer P) => any ? P : (T extends new (...args: infer P) => any ? P : never);
 /**
- * UI components that can be inserted into dom().
- *
- * Components are created and inserted using dom.create():
+ * UI components that can be inserted into `dom()`.
  *
- *    dom('div',
- *      dom.create(MyWidget, ...myArgs),        // Calls MyWidget.create(owner, ...myArgs)
- *      dom.create(createMyWidget, ...myArgs),  // Calls createMyWidget(owner, ...myArgs)
- *    )
+ * Components are created and inserted using `dom.create()`:
+ * ```ts
+ * dom('div',
+ *   dom.create(MyWidget, ...myArgs),        // Calls MyWidget.create(owner, ...myArgs)
+ *   dom.create(createMyWidget, ...myArgs),  // Calls createMyWidget(owner, ...myArgs)
+ * )
+ * ```
  *
- * The first argument may be a function, which is called directly, or a class with a .create()
+ * The first argument may be a function, which is called directly, or a class with a `.create()`
  * static method, in which case that's what gets called.
  *
  * In both cases, the call gets a first argument of `owner` followed by the rest of the arguments
- * to dom.create(). The `owner` is a MultiHolder that will own this component. This works
+ * to `dom.create()`. The `owner` is a `MultiHolder` that will own this component. This works
  * naturally with any class that derives from Disposable, since it then has a suitable static
- * create() method.
+ * `create()` method.
  *
  * Function-based components may use owner to easily handle disposal. For example:
- *
- *    dom.create(createMyWidget)
- *    function createMyWidget(owner) {
- *      const foo = Foo.create(owner);
- *      return dom('div', foo.getTitle());
- *    }
- *
- * The `owner` argument is the main benefit of dom.create(). Logically, the owner is the DOM where
+ * ```ts
+ * dom.create(createMyWidget)
+ * function createMyWidget(owner) {
+ *   const foo = Foo.create(owner);
+ *   return dom('div', foo.getTitle());
+ * }
+ * ```
+ *
+ * The `owner` argument is the main benefit of `dom.create()`. Logically, the owner is the DOM where
  * the component is attached. When the parent DOM element is disposed, so is the component.
  *
- *    [Explanation] To understand why the syntax is such, consider a potential alternative such as:
+ * :::info Explanation
+ *
+ * To understand why the syntax is such, consider a potential alternative such as:
+ * ```ts
+ * dom('div', _insert_(new Comp1()), _insert_(new Comp2(...args)))
+ * ```
  *
- *       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. With `dom.create()`, the DOM
+ * gets ownership of Comp1 early enough and will dispose it.
  *
- *    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. With dom.create(), the DOM
- *    gets ownership of Comp1 early enough and will dispose it.
+ * :::
  *
  * A function component may return DOM directly. A class component returns the class instance,
- * which must have a .buildDom() method which will be called right after the constructor to get
+ * which must have a `.buildDom()` method which will be called right after the constructor to get
  * the DOM. Note that buildDom is only called once.
  *
- * A function component may also return an object with .buildDom(). So these are equivalent:
- *
- *    dom.create(MyWidget)
- *    dom.create((owner) => MyWidget.create(owner))
+ * A function component may also return an object with `.buildDom()`. So these are equivalent:
+ * ```ts
+ * dom.create(MyWidget)
+ * dom.create((owner) => MyWidget.create(owner))
+ * ```
  *
  * Note that ownership should be handled using the `owner` argument. Don't do this:
+ * ```ts
+ * // NON-EXAMPLE: Nothing will dispose the created object:
+ * // dom.create(() => new MyWidget());
+ * ```
  *
- *    // NON-EXAMPLE: Nothing will dispose the created object:
- *    // dom.create(() => new MyWidget());
- *
- * The returned DOM may includes Nodes, strings, and domComputed() values, as well as arrays of
- * any of these. In other words, any DomArg goes except DomMethods. All the DOM returned will be
+ * The returned DOM may includes Nodes, strings, and `domComputed()` values, as well as arrays of
+ * any of these. In other words, any `DomArg` goes except `DomMethods`. All the DOM returned will be
  * disposed when the containing element is disposed, followed by the `owner` itself.
  */
-import { MultiHolder } from './dispose';
-import { DomComputed } from './domComputed';
-export declare type DomContents = Node | string | DomComputed | void | null | undefined | IDomContentsArray;
-export interface IDomContentsArray extends Array<DomContents> {
-}
-export interface IDomComponent {
-    buildDom(): DomContents;
-}
-export declare type DomComponentReturn = DomContents | IDomComponent;
-export declare type IDomCreateFunc<Args extends any[]> = (owner: MultiHolder, ...args: Args) => DomComponentReturn;
-export interface IDomCreateClass<Args extends any[]> {
-    create: IDomCreateFunc<Args>;
-    new (...args: Args): DomComponentReturn;
-}
-export declare type IDomCreator<Args extends any[]> = IDomCreateFunc<Args> | IDomCreateClass<Args>;
-declare type DomCreatorArgs<T> = T extends (owner: MultiHolder, ...args: infer P) => any ? P : (T extends new (...args: infer P) => any ? P : never);
 export declare function create<Fn extends IDomCreator<any[]>>(fn: Fn, ...args: DomCreatorArgs<Fn>): DomContents;
-export {};

package/dist/cjs/lib/domComponent.js

@@ -1,78 +1,80 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.create = void 0;
+const domComputed_1 = require("./domComputed");
 /**
- * UI components that can be inserted into dom().
- *
- * Components are created and inserted using dom.create():
+ * UI components that can be inserted into `dom()`.
  *
- *    dom('div',
- *      dom.create(MyWidget, ...myArgs),        // Calls MyWidget.create(owner, ...myArgs)
- *      dom.create(createMyWidget, ...myArgs),  // Calls createMyWidget(owner, ...myArgs)
- *    )
+ * Components are created and inserted using `dom.create()`:
+ * ```ts
+ * dom('div',
+ *   dom.create(MyWidget, ...myArgs),        // Calls MyWidget.create(owner, ...myArgs)
+ *   dom.create(createMyWidget, ...myArgs),  // Calls createMyWidget(owner, ...myArgs)
+ * )
+ * ```
  *
- * The first argument may be a function, which is called directly, or a class with a .create()
+ * The first argument may be a function, which is called directly, or a class with a `.create()`
  * static method, in which case that's what gets called.
  *
  * In both cases, the call gets a first argument of `owner` followed by the rest of the arguments
- * to dom.create(). The `owner` is a MultiHolder that will own this component. This works
+ * to `dom.create()`. The `owner` is a `MultiHolder` that will own this component. This works
  * naturally with any class that derives from Disposable, since it then has a suitable static
- * create() method.
+ * `create()` method.
  *
  * Function-based components may use owner to easily handle disposal. For example:
- *
- *    dom.create(createMyWidget)
- *    function createMyWidget(owner) {
- *      const foo = Foo.create(owner);
- *      return dom('div', foo.getTitle());
- *    }
- *
- * The `owner` argument is the main benefit of dom.create(). Logically, the owner is the DOM where
+ * ```ts
+ * dom.create(createMyWidget)
+ * function createMyWidget(owner) {
+ *   const foo = Foo.create(owner);
+ *   return dom('div', foo.getTitle());
+ * }
+ * ```
+ *
+ * The `owner` argument is the main benefit of `dom.create()`. Logically, the owner is the DOM where
  * the component is attached. When the parent DOM element is disposed, so is the component.
  *
- *    [Explanation] To understand why the syntax is such, consider a potential alternative such as:
+ * :::info Explanation
  *
- *       dom('div', _insert_(new Comp1()), _insert_(new Comp2(...args)))
+ * To understand why the syntax is such, consider a potential alternative such as:
+ * ```ts
+ * 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. With dom.create(), the DOM
- *    gets ownership of Comp1 early enough and will dispose it.
+ * 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. With `dom.create()`, the DOM
+ * gets ownership of Comp1 early enough and will dispose it.
+ *
+ * :::
  *
  * A function component may return DOM directly. A class component returns the class instance,
- * which must have a .buildDom() method which will be called right after the constructor to get
+ * which must have a `.buildDom()` method which will be called right after the constructor to get
  * the DOM. Note that buildDom is only called once.
  *
- * A function component may also return an object with .buildDom(). So these are equivalent:
- *
- *    dom.create(MyWidget)
- *    dom.create((owner) => MyWidget.create(owner))
+ * A function component may also return an object with `.buildDom()`. So these are equivalent:
+ * ```ts
+ * dom.create(MyWidget)
+ * dom.create((owner) => MyWidget.create(owner))
+ * ```
  *
  * Note that ownership should be handled using the `owner` argument. Don't do this:
+ * ```ts
+ * // NON-EXAMPLE: Nothing will dispose the created object:
+ * // dom.create(() => new MyWidget());
+ * ```
  *
- *    // NON-EXAMPLE: Nothing will dispose the created object:
- *    // dom.create(() => new MyWidget());
- *
- * The returned DOM may includes Nodes, strings, and domComputed() values, as well as arrays of
- * any of these. In other words, any DomArg goes except DomMethods. All the DOM returned will be
+ * The returned DOM may includes Nodes, strings, and `domComputed()` values, as well as arrays of
+ * any of these. In other words, any `DomArg` goes except `DomMethods`. All the DOM returned will be
  * disposed when the containing element is disposed, followed by the `owner` itself.
  */
-const dispose_1 = require("./dispose");
-const domComputed_1 = require("./domComputed");
-const domDispose_1 = require("./domDispose");
 function create(fn, ...args) {
-    const [markerPre, markerPost, func] = domComputed_1.domComputed(null, () => {
-        // Note that the callback to domComputed() is not called until the markers have been attached
-        // to the parent element. We attach the MultiHolder's disposal to markerPost the way
-        // domComputed() normally attaches its own bindings.
-        const owner = dispose_1.MultiHolder.create(null);
-        domDispose_1.autoDisposeElem(markerPost, owner);
+    return (0, 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;
     });
-    return [markerPre, markerPost, func];
 }
 exports.create = create;
 //# sourceMappingURL=domComponent.js.map

package/dist/cjs/lib/domComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"domComponent.js","sourceRoot":"","sources":["../../../lib/domComponent.ts"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,uCAAsC;AACtC,+CAAuD;AACvD,6CAA6C;AA0B7C,SAAgB,MAAM,CAAgC,EAAM,EAAE,GAAG,IAAwB;IACvF,MAAM,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,GAAG,yBAAW,CAAC,IAAI,EAAE,GAAG,EAAE;QAC3D,6FAA6F;QAC7F,oFAAoF;QACpF,oDAAoD;QACpD,MAAM,KAAK,GAAG,qBAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACvC,4BAAe,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAEnC,MAAM,KAAK,GAAuB,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC;YACjD,EAA6B,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;YACtD,EAA4B,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC;QAChD,OAAO,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC;YAClE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;AACvC,CAAC;AAfD,wBAeC"}
+{"version":3,"file":"domComponent.js","sourceRoot":"","sources":["../../../lib/domComponent.ts"],"names":[],"mappings":";;;AACA,+CAA4D;AAuB5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,SAAgB,MAAM,CAAgC,EAAM,EAAE,GAAG,IAAwB;IACvF,OAAO,IAAA,8BAAgB,EAAC,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE;QACtC,MAAM,KAAK,GAAuB,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC;YACjD,EAA6B,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;YACtD,EAA4B,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC;QAChD,OAAO,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC;YAClE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,CAAC;AACL,CAAC;AARD,wBAQC"}

package/dist/cjs/lib/domComputed.d.ts

@@ -1,12 +1,16 @@
 import { BindableValue } from './binding';
+import { MultiHolder } from './dispose';
 import { DomArg, DomMethod } from './domImpl';
-export declare type DomComputed = [Node, Node, DomMethod];
+export type DomComputed = [Node, Node, DomMethod];
+export type DomContents = Node | string | DomComputed | void | null | undefined | IDomContentsArray;
+export interface IDomContentsArray extends Array<DomContents> {
+}
 /**
  * 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
  * to insert nothing. Runs disposers, if any, on all removed content.
  */
-export declare function replaceContent(nodeBefore: Node, nodeAfter: Node, content: DomArg): void;
+export declare function replaceContent(nodeBefore: Node, nodeAfter: Node, content: DomContents): void;
 /**
  * Appends dynamic DOM content to an element. The value may be an observable or function (from
  * which a computed is created), whose value will be passed to `contentFunc` which should return
@@ -17,33 +21,48 @@ export declare function replaceContent(nodeBefore: Node, nodeAfter: Node, conten
  * changes, previous content is disposed and removed, and new content added in its place.
  *
  * The following are roughly equivalent:
- *  (A) domComputed(nlinesObs, nlines => nlines > 1 ? dom('textarea') : dom('input'));
- *  (B) domComputed(use => use(nlinesObs) > 1 ? dom('textarea') : dom('input'));
- *  (C) domComputed(use => use(nlinesObs) > 1, isTall => isTall ? dom('textarea') : dom('input'));
+ * ```ts
+ * // (A)
+ * domComputed(nlinesObs, nlines => nlines > 1 ? dom('textarea') : dom('input'))
+ * // (B)
+ * domComputed(use => use(nlinesObs) > 1 ? dom('textarea') : dom('input'))
+ * // (C)
+ * domComputed(use => use(nlinesObs) > 1, isTall => isTall ? dom('textarea') : dom('input'))
+ * ```
  *
  * Here, (C) is best. Both (A) and (B) would rebuild DOM for any change in nlinesObs, but (C)
  * encapsulates meaningful changes in the observable, and only recreates DOM when necessary.
  *
  * Syntax (B), without the second argument, may be useful in cases of DOM depending on several
  * observables, e.g.
+ * ```ts
+ * domComputed(use => use(readonlyObs) ? dom('div') :
+ *     (use(nlinesObs) > 1 ? dom('textarea') : dom('input')))
+ * ```
  *
- *    domComputed(use => use(readonlyObs) ? dom('div') :
- *                          (use(nlinesObs) > 1 ? dom('textarea') : dom('input')));
- *
- * If the argument is not an observable, domComputed() may but should not be used. The following
+ * If the argument is not an observable, `domComputed()` may but should not be used. The following
  * are equivalent:
- *
- *    dom(..., domComputed(listValue, list => `Have ${list.length} items`), ...)
- *    dom(..., `Have ${listValue.length} items`, ...)
+ * ```ts
+ * dom(..., domComputed(listValue, list => `Have ${list.length} items`), ...);
+ * dom(..., `Have ${listValue.length} items`, ...);
+ * ```
  *
  * In this case, the latter is preferred as the clearly simpler one.
  *
- * @param valueObs: Observable or function for a computed.
- * @param contentFunc: Function called with the result of valueObs as the input, and
+ * @param valueObs - Observable or function for a computed.
+ * @param contentFunc - Function called with the result of valueObs as the input, and
  *    returning DOM as output. If omitted, defaults to the identity function.
  */
 export declare function domComputed(valueObs: BindableValue<Exclude<DomArg, DomMethod>>): DomComputed;
-export declare function domComputed<T>(valueObs: BindableValue<T>, contentFunc: (val: T) => DomArg): DomComputed;
+export declare function domComputed<T>(valueObs: BindableValue<T>, contentFunc: (val: T) => DomContents): 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())`
+ */
+export declare function domComputedOwned<T>(valueObs: BindableValue<T>, contentFunc: (owner: MultiHolder, val: T) => DomContents): DomComputed;
 /**
  * Conditionally appends DOM to an element. The value may be an observable or function (from which
  * a computed is created), whose value -- if truthy -- will be passed to `contentFunc` which
@@ -52,18 +71,29 @@ export declare function domComputed<T>(valueObs: BindableValue<T>, contentFunc:
  * Note that if the observable changes between different truthy values, contentFunc gets called
  * for each value, and previous content gets destroyed. To consider all truthy values the same,
  * use an observable that returns a proper boolean, e.g.
- *
+ * ```ts
  *    dom.maybe(use => Boolean(use(fooObs)), () => dom(...));
+ * ```
  *
  * As with domComputed(), dom.maybe() may but should not be used when the argument is not an
  * observable or function. The following are equivalent:
- *
+ * ```ts
  *    dom(..., dom.maybe(myValue, () => dom(...)));
  *    dom(..., myValue ? dom(...) : null);
+ * ```
  *
  * The latter is preferred for being simpler.
  *
- * @param boolValueObs: Observable or function for a computed.
- * @param contentFunc: Called with the result of boolValueObs when it is truthy. Should return DOM.
+ * @param boolValueObs - Observable or function for a computed.
+ * @param contentFunc - Called with the result of boolValueObs when it is truthy. Should return DOM.
+ */
+export declare function maybe<T>(boolValueObs: BindableValue<T>, contentFunc: (val: NonNullable<T>) => DomContents): DomComputed;
+/**
+ * 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.
+ * ```ts
+ *    maybeOwned(showEditor, (owner) => Editor.create(owner).renderSomething())
+ * ```
  */
-export declare function maybe<T>(boolValueObs: BindableValue<T>, contentFunc: (val: NonNullable<T>) => DomArg): DomComputed;
+export declare function maybeOwned<T>(boolValueObs: BindableValue<T>, contentFunc: (owner: MultiHolder, val: NonNullable<T>) => DomContents): DomComputed;

package/dist/cjs/lib/domComputed.js

@@ -1,6 +1,8 @@
 "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.
@@ -16,11 +18,11 @@ function replaceContent(nodeBefore, nodeAfter, content) {
         let next;
         for (let n = nodeBefore.nextSibling; n && n !== nodeAfter; n = next) {
             next = n.nextSibling;
-            domDispose_1.domDispose(n);
+            (0, 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 : (0, domImpl_1.frag)(content), nodeAfter);
         }
     }
 }
@@ -31,10 +33,24 @@ function domComputed(valueObs, contentFunc = identity) {
     // 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)));
+            (0, 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));
+    (0, 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
@@ -44,22 +60,36 @@ function identity(arg) { return arg; }
  * Note that if the observable changes between different truthy values, contentFunc gets called
  * for each value, and previous content gets destroyed. To consider all truthy values the same,
  * use an observable that returns a proper boolean, e.g.
- *
+ * ```ts
  *    dom.maybe(use => Boolean(use(fooObs)), () => dom(...));
+ * ```
  *
  * As with domComputed(), dom.maybe() may but should not be used when the argument is not an
  * observable or function. The following are equivalent:
- *
+ * ```ts
  *    dom(..., dom.maybe(myValue, () => dom(...)));
  *    dom(..., myValue ? dom(...) : null);
+ * ```
  *
  * The latter is preferred for being simpler.
  *
- * @param boolValueObs: Observable or function for a computed.
- * @param contentFunc: Called with the result of boolValueObs when it is truthy. Should return DOM.
+ * @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;
+/**
+ * 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.
+ * ```ts
+ *    maybeOwned(showEditor, (owner) => Editor.create(owner).renderSomething())
+ * ```
+ */
+function maybeOwned(boolValueObs, contentFunc) {
+    return domComputedOwned(boolValueObs, (owner, value) => value ? contentFunc(owner, value) : null);
+}
+exports.maybeOwned = maybeOwned;
 //# sourceMappingURL=domComputed.js.map

package/dist/cjs/lib/domComputed.js.map

@@ -1 +1 @@
-{"version":3,"file":"domComputed.js","sourceRoot":"","sources":["../../../lib/domComputed.ts"],"names":[],"mappings":";;AAAA,uCAAuD;AACvD,6CAAwC;AACxC,uCAAkD;AAElD,mFAAmF;AACnF,qDAAmC;AAMnC;;;;GAIG;AACH,SAAgB,cAAc,CAAC,UAAgB,EAAE,SAAe,EAAE,OAAe;IAC/E,MAAM,IAAI,GAAG,UAAU,CAAC,UAAU,CAAC;IACnC,IAAI,IAAI,EAAE;QACR,IAAI,IAAI,CAAC;QACT,KAAK,IAAI,CAAC,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,SAAS,EAAE,CAAC,GAAG,IAAI,EAAE;YACnE,IAAI,GAAG,CAAC,CAAC,WAAW,CAAC;YACrB,uBAAU,CAAC,CAAC,CAAC,CAAC;YACd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACrB;QACD,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,kBAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAI,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;SACnF;KACF;AACH,CAAC;AAbD,wCAaC;AAyCD,SAAgB,WAAW,CACzB,QAA0B,EAAE,cAAkC,QAAe;IAE7E,MAAM,SAAS,GAAG,kBAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,kBAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAEjD,gGAAgG;IAChG,yCAAyC;IACzC,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,IAAU,EAAE,EAAE;YAC5C,uBAAa,CAAC,UAAU,EAAE,QAAQ,EAChC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1E,CAAC,CAAC,CAAC;AACL,CAAC;AAZD,kCAYC;AAED,SAAS,QAAQ,CAAI,GAAM,IAAO,OAAO,GAAG,CAAC,CAAC,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAgB,KAAK,CAAI,YAA8B,EAAE,WAA4C;IACnG,OAAO,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AAClF,CAAC;AAFD,sBAEC"}
+{"version":3,"file":"domComputed.js","sourceRoot":"","sources":["../../../lib/domComputed.ts"],"names":[],"mappings":";;;AAAA,uCAAuD;AACvD,uCAA8C;AAC9C,6CAAyD;AACzD,uCAAkD;AAElD,mFAAmF;AACnF,qDAAmC;AAUnC;;;;GAIG;AACH,SAAgB,cAAc,CAAC,UAAgB,EAAE,SAAe,EAAE,OAAoB;IACpF,MAAM,IAAI,GAAG,UAAU,CAAC,UAAU,CAAC;IACnC,IAAI,IAAI,EAAE;QACR,IAAI,IAAI,CAAC;QACT,KAAK,IAAI,CAAC,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,SAAS,EAAE,CAAC,GAAG,IAAI,EAAE;YACnE,IAAI,GAAG,CAAC,CAAC,WAAW,CAAC;YACrB,IAAA,uBAAU,EAAC,CAAC,CAAC,CAAC;YACd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACrB;QACD,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,kBAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAA,cAAI,EAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;SACnF;KACF;AACH,CAAC;AAbD,wCAaC;AAgDD,SAAgB,WAAW,CACzB,QAA0B,EAAE,cAAuC,QAAe;IAElF,MAAM,SAAS,GAAG,kBAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,kBAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAEjD,gGAAgG;IAChG,yCAAyC;IACzC,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,IAAU,EAAE,EAAE;YAC5C,IAAA,uBAAa,EAAC,UAAU,EAAE,QAAQ,EAChC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1E,CAAC,CAAC,CAAC;AACL,CAAC;AAZD,kCAYC;AAED;;;;;;GAMG;AACH,SAAgB,gBAAgB,CAC9B,QAA0B,EAAE,WAAwD;IAEpF,MAAM,MAAM,GAAG,gBAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,GAAG,WAAW,CAAC,QAAQ,EACxD,CAAC,GAAM,EAAE,EAAE,CAAC,WAAW,CAAC,qBAAW,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;IAC5D,IAAA,4BAAe,EAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACpC,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;AACvC,CAAC;AARD,4CAQC;AAED,SAAS,QAAQ,CAAI,GAAM,IAAO,OAAO,GAAG,CAAC,CAAC,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAgB,KAAK,CAAI,YAA8B,EACnD,WAAiD;IACnD,OAAO,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AAClF,CAAC;AAHD,sBAGC;AAED;;;;;;;GAOG;AACH,SAAgB,UAAU,CAAI,YAA8B,EACxD,WAAqE;IACvE,OAAO,gBAAgB,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,EAAE,KAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AACrG,CAAC;AAHD,gCAGC"}