grainjs 1.0.2 → 1.1.0

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

@@ -12,10 +12,11 @@ import { MaybeObsArray } from './obsArray';
  * 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.
  *
- * 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.
+ * Note that itemCreateFunc() is called with an index as the second argument, but that index is
+ * only accurate at the time of the call, and will stop reflecting the true index if more items
+ * are inserted or removed before it.
  *
  * If you'd like to map the DOM node back to its source item, use dom.data() and dom.getData() in
  * itemCreateFunc().
  */
-export declare function forEach<T>(obsArray: MaybeObsArray<T>, itemCreateFunc: (item: T) => Node | null): DomContents;
+export declare function forEach<T>(obsArray: MaybeObsArray<T>, itemCreateFunc: (item: T, index: number) => Node | null): DomContents;

package/dist/cjs/lib/domForEach.js

@@ -19,8 +19,9 @@ const browserGlobals_1 = require("./browserGlobals");
  * 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.
  *
- * 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.
+ * Note that itemCreateFunc() is called with an index as the second argument, but that index is
+ * only accurate at the time of the call, and will stop reflecting the true index if more items
+ * are inserted or removed before it.
  *
  * If you'd like to map the DOM node back to its source item, use dom.data() and dom.getData() in
  * itemCreateFunc().
@@ -30,18 +31,18 @@ function forEach(obsArray, itemCreateFunc) {
     const markerPost = browserGlobals_1.G.document.createComment('b');
     return [markerPre, markerPost, (elem) => {
             if (Array.isArray(obsArray)) {
-                domComputed_1.replaceContent(markerPre, markerPost, obsArray.map(itemCreateFunc));
+                (0, domComputed_1.replaceContent)(markerPre, markerPost, obsArray.map(itemCreateFunc));
                 return;
             }
-            const nodes = obsArray_1.computedArray(obsArray, itemCreateFunc);
+            const nodes = (0, 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);
+            (0, 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);
+                            (0, domDispose_1.domDispose)(node);
                             elem.removeChild(node);
                         }
                     }
@@ -57,15 +58,15 @@ function forEach(obsArray, itemCreateFunc) {
                             }
                         }
                         // Insert the new elements.
-                        const content = domImpl_1.frag(newArr.slice(splice.start, endIndex));
+                        const content = (0, domImpl_1.frag)(newArr.slice(splice.start, endIndex));
                         elem.insertBefore(content, nextElem);
                     }
                 }
                 else {
-                    domComputed_1.replaceContent(markerPre, markerPost, newArr);
+                    (0, domComputed_1.replaceContent)(markerPre, markerPost, newArr);
                 }
             });
-            domComputed_1.replaceContent(markerPre, markerPost, nodes.get());
+            (0, domComputed_1.replaceContent)(markerPre, markerPost, nodes.get());
         }];
 }
 exports.forEach = forEach;

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

@@ -1 +1 @@
-{"version":3,"file":"domForEach.js","sourceRoot":"","sources":["../../../lib/domForEach.ts"],"names":[],"mappings":";;;AAAA,+CAA0D;AAC1D,6CAAyD;AACzD,uCAA+B;AAC/B,yCAAkE;AAElE,mFAAmF;AACnF,qDAAmC;AAEnC;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAgB,OAAO,CAAI,QAA0B,EAAE,cAAsC;IAC3F,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;IACjD,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,IAAU,EAAE,EAAE;YAC5C,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,4BAAc,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC;gBACpE,OAAO;aACR;YAED,MAAM,KAAK,GAAwB,wBAAa,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YAE3E,wFAAwF;YACxF,4BAAe,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;YAEnC,KAAK,CAAC,WAAW,CAAC,CAAC,MAAwB,EAAE,MAAwB,EAAE,MAAO,EAAE,EAAE;gBAChF,IAAI,MAAM,EAAE;oBACV,qCAAqC;oBACrC,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,OAAO,EAAE;wBACjC,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;4BACpC,uBAAU,CAAC,IAAI,CAAC,CAAC;4BACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;yBACxB;qBACF;oBAED,IAAI,MAAM,CAAC,QAAQ,GAAG,CAAC,EAAE;wBACvB,uFAAuF;wBACvF,MAAM,QAAQ,GAAW,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC;wBACxD,IAAI,QAAQ,GAAS,UAAU,CAAC;wBAChC,KAAK,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;4BAC7C,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;4BACvB,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;gCACpC,QAAQ,GAAG,IAAI,CAAC;gCAChB,MAAM;6BACP;yBACF;wBAED,2BAA2B;wBAC3B,MAAM,OAAO,GAAG,cAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;wBAC3D,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;qBACtC;iBACF;qBAAM;oBACL,4BAAc,CAAC,SAAS,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;iBAC/C;YACH,CAAC,CAAC,CAAC;YACH,4BAAc,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;AACL,CAAC;AA9CD,0BA8CC"}
+{"version":3,"file":"domForEach.js","sourceRoot":"","sources":["../../../lib/domForEach.ts"],"names":[],"mappings":";;;AAAA,+CAA0D;AAC1D,6CAAyD;AACzD,uCAA+B;AAC/B,yCAAkE;AAElE,mFAAmF;AACnF,qDAAmC;AAEnC;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAgB,OAAO,CACrB,QAA0B,EAC1B,cAAqD;IAErD,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;IACjD,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,IAAU,EAAE,EAAE;YAC5C,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,IAAA,4BAAc,EAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC;gBACpE,OAAO;aACR;YAED,MAAM,KAAK,GAAwB,IAAA,wBAAa,EAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YAE3E,wFAAwF;YACxF,IAAA,4BAAe,EAAC,UAAU,EAAE,KAAK,CAAC,CAAC;YAEnC,KAAK,CAAC,WAAW,CAAC,CAAC,MAAwB,EAAE,MAAwB,EAAE,MAAO,EAAE,EAAE;gBAChF,IAAI,MAAM,EAAE;oBACV,qCAAqC;oBACrC,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,OAAO,EAAE;wBACjC,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;4BACpC,IAAA,uBAAU,EAAC,IAAI,CAAC,CAAC;4BACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;yBACxB;qBACF;oBAED,IAAI,MAAM,CAAC,QAAQ,GAAG,CAAC,EAAE;wBACvB,uFAAuF;wBACvF,MAAM,QAAQ,GAAW,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC;wBACxD,IAAI,QAAQ,GAAS,UAAU,CAAC;wBAChC,KAAK,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;4BAC7C,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;4BACvB,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;gCACpC,QAAQ,GAAG,IAAI,CAAC;gCAChB,MAAM;6BACP;yBACF;wBAED,2BAA2B;wBAC3B,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;wBAC3D,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;qBACtC;iBACF;qBAAM;oBACL,IAAA,4BAAc,EAAC,SAAS,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;iBAC/C;YACH,CAAC,CAAC,CAAC;YACH,IAAA,4BAAc,EAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;AACL,CAAC;AAjDD,0BAiDC"}

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

@@ -1,26 +1,30 @@
-export declare type DomMethod<T = Node> = (elem: T) => DomArg<T> | void;
-export declare type DomElementMethod = DomMethod<HTMLElement>;
+export type DomMethod<T = Node> = (elem: T) => DomArg<T> | void;
+export type DomElementMethod = DomMethod<HTMLElement>;
+/**
+ * Object mapping attribute names to attribute values. When applied to a DOM element, null and
+ * undefined values are omitted, and booleans are either omitted or set to empty string.
+ */
 export interface IAttrObj {
     [attrName: string]: string | boolean | null | undefined;
 }
-export declare type DomArg<T = Node> = Node | string | void | null | undefined | IDomArgs<T> | DomMethod<T> | (T extends Element ? IAttrObj : never);
+export type DomArg<T = Node> = Node | string | void | null | undefined | IDomArgs<T> | DomMethod<T> | (T extends Element ? IAttrObj : never);
 export interface IDomArgs<T = Node> extends Array<DomArg<T>> {
 }
-export declare type DomElementArg = DomArg<HTMLElement>;
+export type DomElementArg = DomArg<HTMLElement>;
 /**
  * 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 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
+ *      `dom('input', {id: 'foo'}, (elem) => ...)` -- elem has type HTMLInputElement
+ *      `dom('input#foo',          (elem) => ...)` -- elem has type HTMLElement
  *
  * The rest of the arguments are optional and may be:
  *
  *   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;
+ *   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.
@@ -28,8 +32,8 @@ export declare type DomElementArg = DomArg<HTMLElement>;
  *       are actually special cases of the "functions" category.
  */
 export declare function dom<Tag extends TagName>(tagString: Tag, ...args: IDomArgs<TagElem<Tag>>): TagElem<Tag>;
-export declare type TagName = keyof HTMLElementTagNameMap | string;
-export declare type TagElem<T extends TagName> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : HTMLElement;
+export type TagName = keyof HTMLElementTagNameMap | string;
+export type TagElem<T extends TagName> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : HTMLElement;
 /**
  * svg('tag#id.class1.class2', ...args)
  *  Same as dom(...), but creates an SVG element.
@@ -40,7 +44,26 @@ export declare function svg(tagString: string, ...args: IDomArgs<SVGElement>): S
  */
 export declare function update<T extends Node, Args extends IDomArgs<T>>(elem: T, ...args: Args): T;
 /**
- * Creates a DocumentFragment processing arguments the same way as the dom() function.
+ * Creates a `DocumentFragment`, processing arguments in the same way as the `dom()` function.
+ *
+ * It's rarely needed since an array of `dom()` arguments is treated the same as a
+ * `DocumentFragment` in most cases.
+ *
+ * @example
+ * ```ts
+ * dom.frag(dom('span', 'Hello'), ' good ', dom('div', 'world'))
+ * ```
+ * creates document fragment with `<span>Hello</span> good <div>world</div>`.
+ *
+ * @example
+ * These two examples are equivalent:
+ * ```ts
+ * const world1 = () => dom.frag(' good ', dom('div', 'world'));
+ * dom('div', 'Hello', world1);
+ *
+ * const world2 = () => [' good ', dom('div', 'world')];
+ * dom('div', 'Hello', world2);
+ * ```
  */
 export declare function frag(...args: IDomArgs<DocumentFragment>): DocumentFragment;
 /**

package/dist/cjs/lib/domImpl.js

@@ -20,14 +20,14 @@ const browserGlobals_1 = require("./browserGlobals");
  *   to add the ID 'foo', and zero or more .bar suffixes to add a CSS class 'bar'.
  *
  *   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
+ *      `dom('input', {id: 'foo'}, (elem) => ...)` -- elem has type HTMLInputElement
+ *      `dom('input#foo',          (elem) => ...)` -- elem has type HTMLElement
  *
  * The rest of the arguments are optional and may be:
  *
  *   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;
+ *   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.
@@ -57,11 +57,11 @@ function _createElementSvg(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.
+ * @param 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
+ * @param 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.
+ * @returns {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
@@ -122,7 +122,7 @@ function _updateWithArgsOrDispose(elem, args) {
         return _updateWithArgs(elem, args);
     }
     catch (e) {
-        domDispose_1.domDispose(elem);
+        (0, domDispose_1.domDispose)(elem);
         throw e;
     }
 }
@@ -144,14 +144,33 @@ function _updateWithArg(elem, arg) {
         elem.appendChild(arg);
     }
     else if (typeof arg === 'object') {
-        domMethods_1.attrsElem(elem, arg);
+        (0, domMethods_1.attrsElem)(elem, arg);
     }
     else {
         elem.appendChild(browserGlobals_1.G.document.createTextNode(arg));
     }
 }
 /**
- * Creates a DocumentFragment processing arguments the same way as the dom() function.
+ * Creates a `DocumentFragment`, processing arguments in the same way as the `dom()` function.
+ *
+ * It's rarely needed since an array of `dom()` arguments is treated the same as a
+ * `DocumentFragment` in most cases.
+ *
+ * @example
+ * ```ts
+ * dom.frag(dom('span', 'Hello'), ' good ', dom('div', 'world'))
+ * ```
+ * creates document fragment with `<span>Hello</span> good <div>world</div>`.
+ *
+ * @example
+ * These two examples are equivalent:
+ * ```ts
+ * const world1 = () => dom.frag(' good ', dom('div', 'world'));
+ * dom('div', 'Hello', world1);
+ *
+ * const world2 = () => [' good ', dom('div', 'world')];
+ * dom('div', 'Hello', world2);
+ * ```
  */
 function frag(...args) {
     const elem = browserGlobals_1.G.document.createDocumentFragment();

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

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

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

@@ -1,74 +1,109 @@
 import { BindableValue } from './binding';
 import { DomElementMethod, DomMethod, IAttrObj } from './domImpl';
 /**
- * Sets multiple attributes of a DOM element. The `attrs()` variant takes no `elem` argument.
+ * Sets multiple attributes of a DOM element.
  * 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.
+ * @param attrsObj - Object mapping attribute names to attribute values.
  */
 export declare function attrsElem(elem: Element, attrsObj: IAttrObj): void;
+/**
+ * Sets multiple attributes of a DOM element. Null and undefined values are omitted, and booleans
+ * are either omitted or set to empty string.
+ */
 export declare function attrs(attrsObj: IAttrObj): DomElementMethod;
 /**
  * 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.
+ * null or undefined.
+ * @param elem - The element to update.
+ * @param attrName - The name of the attribute to bind, e.g. 'href'.
+ * @param attrValue - The string value, or null or undefined to remove the attribute.
  */
-export declare function attrElem(elem: Element, attrName: string, attrValue: string | null): void;
-export declare function attr(attrName: string, attrValueObs: BindableValue<string>): DomElementMethod;
+export declare function attrElem(elem: Element, attrName: string, attrValue: string | null | undefined): void;
+/**
+ * Sets an attribute of a DOM element to the given value. Removes the attribute when the value is
+ * null or undefined.
+ *
+ * @example
+ * ```ts
+ * dom('a', dom.attr('href', urlObs))
+ * ```
+ */
+export declare function attr(attrName: string, attrValueObs: BindableValue<string | null | undefined>): DomElementMethod;
 /**
  * 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.
+ * @param elem - The element to update.
+ * @param attrName - The name of the attribute to bind, e.g. 'checked'.
+ * @param boolValue - Boolean value whether to set or unset the attribute.
  */
 export declare function boolAttrElem(elem: Element, attrName: string, boolValue: boolean): void;
+/**
+ * Dom-method that sets or removes a boolean attribute of a DOM element.
+ * @param attrName - The name of the attribute to bind, e.g. 'checked'.
+ * @param boolValueObs - Value, observable, or function for a whether to set or unset the attribute.
+ */
 export declare function boolAttr(attrName: string, boolValueObs: BindableValue<boolean>): DomElementMethod;
 /**
- * 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.
+ * Adds a text node to the element.
+ * @param elem - The element to update.
+ * @param value - The text value to add.
  */
 export declare function textElem(elem: Node, value: string): void;
+/**
+ * Sets text content of a DOM element to a value that may be an observable or a function.
+ */
 export declare function text(valueObs: BindableValue<string>): DomMethod;
 /**
- * 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.
+ * Sets a style property of a DOM element to the given value.
+ * @param elem - The element to update.
+ * @param property - The name of the style property to update, e.g. 'fontWeight'.
+ * @param value - The value for the property.
  */
 export declare function styleElem(elem: Element, property: string, value: string): void;
+/**
+ * Sets a style property of a DOM element to the given value, which may be an observable or a
+ * function.
+ * @param property - The name of the style property to update, e.g. 'fontWeight'.
+ * @param value - The value for the property.
+ */
 export declare function style(property: string, valueObs: BindableValue<string>): DomElementMethod;
 /**
  * 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.
+ * @param elem - The element to update.
+ * @param property - The name of the property to update, e.g. 'disabled'.
+ * @param value - The value for the property.
  */
 export declare function propElem<T>(elem: Node, property: string, value: T): void;
+/**
+ * Sets the property of a DOM element to the given value, which may be an observable or a
+ * function.
+ * @param property - The name of the property to update, e.g. 'disabled'.
+ * @param value - The value for the property.
+ */
 export declare function prop<T>(property: string, valueObs: BindableValue<T>): DomMethod;
 /**
  * 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.
+ * @param elem - The element to update.
+ * @param boolValue - True to show the element, false to hide it.
  */
 export declare function showElem(elem: HTMLElement, boolValue: boolean): void;
+/**
+ * Shows or hides the element depending on a boolean value, which may be an observable or a function.
+ * Note that the element must be visible by default (i.e. unsetting `style.display` should show it).
+ */
 export declare function show(boolValueObs: BindableValue<boolean>): DomElementMethod;
 /**
  * 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.
+ * @param elem - The element to update.
+ * @param boolValue - True to hide the element, false to show it.
  */
 export declare function hideElem(elem: HTMLElement, boolValue: boolean): void;
+/**
+ * The opposite of show, hiding the element when boolValue is true. `boolValueObs` may be an
+ * observable or a function.
+ * Note that the element must be visible by default (i.e. unsetting `style.display` should show it).
+ */
 export declare function hide(boolValueObs: BindableValue<boolean>): DomElementMethod;
 /**
  * Sets or toggles the given css class className.
@@ -78,12 +113,13 @@ export declare function clsElem(elem: Element, className: string, boolValue?: bo
  * Sets or toggles a css class className. If className is an observable, it will be replaced when
  * the observable changes. If a plain string, then an optional second boolean observable may be
  * given, which will toggle it.
- *
- *    dom.cls('foo')                                // Sets className 'foo'
- *    dom.cls('foo', isFoo);                        // Toggles 'foo' className according to observable.
- *    dom.cls('foo', (use) => use(isFoo));          // Toggles 'foo' className according to observable.
- *    dom.cls(fooClass);                            // Sets className to the value of fooClass observable
- *    dom.cls((use) => `prefix-${use(fooClass)}`);  // Sets className to prefix- plus fooClass observable.
+ * ```ts
+ * dom.cls('foo')                                // Sets className 'foo'
+ * dom.cls('foo', isFoo);                        // Toggles 'foo' className according to observable.
+ * dom.cls('foo', (use) => use(isFoo));          // Toggles 'foo' className according to observable.
+ * dom.cls(fooClass);                            // Sets className to the value of fooClass observable
+ * dom.cls((use) => `prefix-${use(fooClass)}`);  // Sets className to prefix- plus fooClass observable.
+ * ```
  */
 export declare function cls(className: string, boolValue?: BindableValue<boolean>): DomElementMethod;
 export declare function cls(className: BindableValue<string>): DomElementMethod;
@@ -93,19 +129,26 @@ export declare function cls(className: BindableValue<string>): DomElementMethod;
 export declare function clsPrefix(prefix: string, className: string, boolValue?: BindableValue<boolean>): DomElementMethod;
 export declare function clsPrefix(prefix: string, className: BindableValue<string>): DomElementMethod;
 /**
- * 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.
+ * Associate arbitrary data with a DOM element.
+ * @param elem - The element with which to associate data.
+ * @param key - Key to identify this piece of data among others attached to elem.
+ * @param value - Arbitrary value to associate with elem.
  */
 export declare function dataElem(elem: Node, key: string, value: any): void;
+/**
+ * Associate arbitrary data with a DOM element: `value` may be an observable or a function.
+ * @param key - Key to identify this piece of data among others attached to elem.
+ * @param value - Arbitrary value to associate with elem.
+ */
 export declare function data(key: string, valueObs: BindableValue<any>): DomMethod;
+/**
+ * Retrieve data associated with a DOM element using `data()` or `dataElem()`.
+ */
 export declare function getData(elem: Node, key: string): any;
 /**
  * A very simple setup to identify DOM elements for testing purposes. Here's the recommended
  * usage.
- *
+ * ```ts
  *   // In the component to be tested.
  *   import {noTestId, TestId} from 'grainjs';
  *
@@ -114,22 +157,25 @@ export declare function getData(elem: Node, key: string): any;
  *       dom(..., testId("another-name"), ...),
  *     );
  *   }
+ * ```
  *
  * In the fixture code using this component:
- *
+ * ```ts
  *   import {makeTestId} from 'grainjs';
  *
  *   dom(..., myComponent(myArgs, makeTestId('test-mycomp-'), ...)
+ * ```
  *
  * In the webdriver test code:
- *
+ * ```ts
  *   driver.find('.test-my-comp-some-name')
  *   driver.find('.test-my-comp-another-name')
+ * ```
  *
  * When myComponent() is created with testId argument omitted, the testId() calls are no-ops. When
  * makeTestId('test-foo-') is passed in, testId() calls simply add a css class with that prefix.
  */
-export declare type TestId = (name: string) => DomElementMethod | null;
+export type TestId = (name: string) => DomElementMethod | null;
 /**
  * See documentation for TestId above.
  */