grainjs 0.1.0 → 1.0.2

package/dist/cjs/lib/{_domMethods.js → domMethods.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const _domDispose_1 = require("./_domDispose");
-const _domImpl_1 = require("./_domImpl");
+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");
 /**
@@ -10,13 +10,6 @@ const browserGlobals_1 = require("./browserGlobals");
  * values from being garbage collected when the owning DOM elements are no longer used.
  */
 const _dataMap = new WeakMap();
-/**
- * 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.
- */
-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.
@@ -53,7 +46,7 @@ function attrElem(elem, attrName, attrValue) {
 }
 exports.attrElem = attrElem;
 function attr(attrName, attrValueObs) {
-    return (elem) => _subscribe(elem, attrValueObs, (val) => attrElem(elem, attrName, val));
+    return (elem) => binding_1.subscribeElem(elem, attrValueObs, (val) => attrElem(elem, attrName, val));
 }
 exports.attr = attr;
 /**
@@ -69,7 +62,7 @@ function boolAttrElem(elem, attrName, boolValue) {
 }
 exports.boolAttrElem = boolAttrElem;
 function boolAttr(attrName, boolValueObs) {
-    return (elem) => _subscribe(elem, boolValueObs, (val) => boolAttrElem(elem, attrName, val));
+    return (elem) => binding_1.subscribeElem(elem, boolValueObs, (val) => boolAttrElem(elem, attrName, val));
 }
 exports.boolAttr = boolAttr;
 /**
@@ -85,7 +78,7 @@ exports.textElem = textElem;
 function text(valueObs) {
     return (elem) => {
         const textNode = browserGlobals_1.G.document.createTextNode('');
-        _subscribe(elem, valueObs, (val) => { textNode.nodeValue = val; });
+        binding_1.subscribeElem(elem, valueObs, (val) => { textNode.nodeValue = val; });
         elem.appendChild(textNode);
     };
 }
@@ -102,7 +95,7 @@ function styleElem(elem, property, value) {
 }
 exports.styleElem = styleElem;
 function style(property, valueObs) {
-    return (elem) => _subscribe(elem, valueObs, (val) => styleElem(elem, property, val));
+    return (elem) => binding_1.subscribeElem(elem, valueObs, (val) => styleElem(elem, property, val));
 }
 exports.style = style;
 /**
@@ -117,7 +110,7 @@ function propElem(elem, property, value) {
 }
 exports.propElem = propElem;
 function prop(property, valueObs) {
-    return (elem) => _subscribe(elem, valueObs, (val) => propElem(elem, property, val));
+    return (elem) => binding_1.subscribeElem(elem, valueObs, (val) => propElem(elem, property, val));
 }
 exports.prop = prop;
 /**
@@ -132,7 +125,7 @@ function showElem(elem, boolValue) {
 }
 exports.showElem = showElem;
 function show(boolValueObs) {
-    return (elem) => _subscribe(elem, boolValueObs, (val) => showElem(elem, val));
+    return (elem) => binding_1.subscribeElem(elem, boolValueObs, (val) => showElem(elem, val));
 }
 exports.show = show;
 /**
@@ -146,7 +139,7 @@ function hideElem(elem, boolValue) {
 }
 exports.hideElem = hideElem;
 function hide(boolValueObs) {
-    return (elem) => _subscribe(elem, boolValueObs, (val) => hideElem(elem, val));
+    return (elem) => binding_1.subscribeElem(elem, boolValueObs, (val) => hideElem(elem, val));
 }
 exports.hide = hide;
 /**
@@ -164,7 +157,7 @@ function cls(className, boolValue) {
         return (elem) => clsElem(elem, className, boolValue);
     }
     else {
-        return (elem) => _subscribe(elem, boolValue, (val) => clsElem(elem, className, val));
+        return (elem) => binding_1.subscribeElem(elem, boolValue, (val) => clsElem(elem, className, val));
     }
 }
 exports.cls = cls;
@@ -180,7 +173,7 @@ exports.clsPrefix = clsPrefix;
 function _clsDynamicPrefix(prefix, className) {
     return (elem) => {
         let prevClass = null;
-        _subscribe(elem, className, (name) => {
+        binding_1.subscribeElem(elem, className, (name) => {
             if (prevClass) {
                 elem.classList.remove(prevClass);
             }
@@ -204,13 +197,13 @@ function dataElem(elem, key, value) {
         obj[key] = value;
     }
     else {
-        _domDispose_1.onDisposeElem(elem, () => _dataMap.delete(elem));
+        domDispose_1.onDisposeElem(elem, () => _dataMap.delete(elem));
         _dataMap.set(elem, { [key]: value });
     }
 }
 exports.dataElem = dataElem;
 function data(key, valueObs) {
-    return (elem) => _subscribe(elem, valueObs, (val) => dataElem(elem, key, val));
+    return (elem) => binding_1.subscribeElem(elem, valueObs, (val) => dataElem(elem, key, val));
 }
 exports.data = data;
 function getData(elem, key) {
@@ -219,63 +212,15 @@ function getData(elem, key) {
 }
 exports.getData = getData;
 /**
- * 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.
+ * See documentation for TestId above.
  */
-function replaceContent(nodeBefore, nodeAfter, content) {
-    const elem = nodeBefore.parentNode;
-    if (elem) {
-        let next;
-        for (let n = nodeBefore.nextSibling; n && n !== nodeAfter; n = next) {
-            next = n.nextSibling;
-            _domDispose_1.domDispose(n);
-            elem.removeChild(n);
-        }
-        if (content) {
-            elem.insertBefore(content instanceof browserGlobals_1.G.Node ? content : _domImpl_1.frag(content), nodeAfter);
-        }
-    }
+function makeTestId(prefix) {
+    return clsPrefix.bind(null, prefix);
 }
-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)));
-    };
-}
-exports.domComputed = domComputed;
-function identity(arg) { return arg; }
+exports.makeTestId = makeTestId;
 /**
- * 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
- * should return DOM content. If the value is falsy, DOM content is removed.
- *
- * 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.
- *
- *    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:
- *
- *    dom(..., dom.maybe(myValue, () => dom(...)));
- *    dom(..., myValue ? dom(...) : null);
- *
- * 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.
+ * See documentation for TestId above.
  */
-function maybe(boolValueObs, contentFunc) {
-    return domComputed(boolValueObs, (value) => value ? contentFunc(value) : null);
-}
-exports.maybe = maybe;
-//# sourceMappingURL=_domMethods.js.map
+const noTestId = (name) => null;
+exports.noTestId = noTestId;
+//# sourceMappingURL=domMethods.js.map

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

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

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

@@ -38,9 +38,11 @@
  * If you need to remove the callback on first call, here's a useful pattern:
  *    let lis = domevent.onElem(elem, 'mouseup', e => { lis.dispose(); other_work(); });
  */
-import { DomElementMethod } from './_domImpl';
 import { IDisposable } from './dispose';
-export declare type EventCB = (this: void, event: Event, elem: Element) => void;
+import { DomElementMethod, DomMethod } from './domImpl';
+export declare type EventName = keyof HTMLElementEventMap;
+export declare type EventType<E extends EventName | string> = E extends EventName ? HTMLElementEventMap[E] : Event;
+export declare type EventCB<E extends Event = Event, T extends EventTarget = EventTarget> = (this: void, event: E, elem: T) => void;
 /**
  * Listen to a DOM event. The `on()` variant takes no `elem` argument, and may be used as an
  * argument to dom() function.
@@ -51,12 +53,12 @@ export declare type EventCB = (this: void, event: Event, elem: Element) => void;
  *    rarely be useful (e.g. JQuery doesn't even offer it as an option).
  * @returns {Object} Listener object whose .dispose() method will remove the event listener.
  */
-export declare function onElem(elem: EventTarget, eventType: string, callback: EventCB, {useCapture}?: {
-    useCapture?: boolean;
+export declare function onElem<E extends EventName | string, T extends EventTarget>(elem: T, eventType: E, callback: EventCB<EventType<E>, T>, { useCapture }?: {
+    useCapture?: boolean | undefined;
 }): IDisposable;
-export declare function on(eventType: string, callback: EventCB, {useCapture}?: {
-    useCapture?: boolean;
-}): DomElementMethod;
+export declare function on<E extends EventName | string, T extends EventTarget>(eventType: E, callback: EventCB<EventType<E>, T>, { useCapture }?: {
+    useCapture?: boolean | undefined;
+}): DomMethod<T>;
 /**
  * Listen to a DOM event on descendants of the given elem matching the given selector. The
  * `onMatch()` variant takes no `elem` argument, and may be used as an argument to dom().
@@ -72,30 +74,39 @@ export declare function on(eventType: string, callback: EventCB, {useCapture}?:
  *    rarely be useful (e.g. JQuery doesn't even offer it as an option).
  * @returns {Object} Listener object whose .dispose() method will remove the event listener.
  */
-export declare function onMatchElem(elem: EventTarget, selector: string, eventType: string, callback: EventCB, {useCapture}?: {
-    useCapture?: boolean;
+export declare function onMatchElem(elem: EventTarget, selector: string, eventType: string, callback: EventCB, { useCapture }?: {
+    useCapture?: boolean | undefined;
 }): IDisposable;
-export declare function onMatch(selector: string, eventType: string, callback: EventCB, {useCapture}?: {
-    useCapture?: boolean;
+export declare function onMatch(selector: string, eventType: string, callback: EventCB, { useCapture }?: {
+    useCapture?: boolean | undefined;
 }): DomElementMethod;
+export declare type KeyEventType = 'keypress' | 'keyup' | 'keydown';
+export interface IKeyHandlers<T extends HTMLElement = HTMLElement> {
+    [key: string]: (this: void, ev: KeyboardEvent, elem: T) => void;
+}
 /**
- * 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"),
  *      })
  *    )
  */
-export declare function onKeyPressElem(elem: EventTarget, callbacks: {
-    [key: string]: EventCB;
-}): IDisposable;
-export declare function onKeyPress(callbacks: {
-    [key: string]: EventCB;
-}): DomElementMethod;
+export declare function onKeyElem<T extends HTMLElement>(elem: T, evType: KeyEventType, keyHandlers: IKeyHandlers<T>): IDisposable;
+export declare function onKeyPress<T extends HTMLElement>(keyHandlers: IKeyHandlers<T>): DomMethod<T>;
+export declare function onKeyDown<T extends HTMLElement>(keyHandlers: IKeyHandlers<T>): DomMethod<T>;

package/dist/cjs/lib/domevent.js

@@ -40,6 +40,7 @@
  *    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)) {
@@ -118,31 +119,51 @@ 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;
 //# sourceMappingURL=domevent.js.map

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

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

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

@@ -1,3 +1,25 @@
+/**
+ * emit.js implements an Emitter class which emits events to a list of listeners. Listeners are
+ * simply functions to call, and "emitting an event" just calls those functions.
+ *
+ * This is similar to Backbone events, with more focus on efficiency. Both inserting and removing
+ * listeners is constant time.
+ *
+ * To create an emitter:
+ *    let emitter = new Emitter();
+ *
+ * To add a listener:
+ *    let listener = fooEmitter.addListener(callback);
+ * To remove a listener:
+ *    listener.dispose();
+ *
+ * The only way to remove a listener is to dispose the Listener object returned by addListener().
+ * You can often use autoDispose to do this automatically when subscribing in a constructor:
+ *    this.autoDispose(fooEmitter.addListener(this.onFoo, this));
+ *
+ * To emit an event, call emit() with any number of arguments:
+ *    emitter.emit("hello", "world");
+ */
 export declare type ListenerCB<T> = (this: T, ...args: any[]) => void;
 export declare type ChangeCB = (hasListeners: boolean) => void;
 /**
@@ -34,7 +56,8 @@ export declare 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: ChangeCB, optContext?: any): void;
     /**
@@ -58,7 +81,7 @@ export declare class Emitter extends LLink {
 export declare class Listener extends LLink {
     private emitter;
     private callback;
-    private context;
+    private context?;
     static callAll(begin: LLink, end: LLink, args: any[]): void;
     constructor(emitter: Emitter, callback: ListenerCB<any>, context?: any);
     dispose(): void;

package/dist/cjs/lib/emit.js

@@ -22,6 +22,7 @@
  *    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
@@ -104,7 +105,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;

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

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

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

@@ -19,22 +19,64 @@
  * 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.
  */
 import { Observable } from './observable';
-export interface IKnockoutObservable<T> {
+export interface IKnockoutObservable<T> extends IKnockoutReadObservable<T> {
     (val: T): void;
+}
+export interface IKnockoutReadObservable<T> {
+    (): T;
     peek(): T;
     subscribe(callback: (newValue: T) => void, target?: any, event?: "change"): any;
+    getSubscriptionsCount(): number;
 }
+export declare type InferKoType<KObs extends IKnockoutReadObservable<any>> = KObs extends {
+    peek(): infer T;
+} ? T : never;
 /**
  * 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.
+ */
+export declare function fromKo<KObs extends IKnockoutObservable<any>>(koObs: KObs): Observable<InferKoType<KObs>>;
+/**
+ * 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.
  */
-export declare function fromKo<T>(koObservable: IKnockoutObservable<T>): Observable<T>;
+export declare class KoWrapObs<T> extends Observable<T> {
+    private _koObs;
+    private _koSub;
+    constructor(_koObs: IKnockoutObservable<T>);
+    get(): T;
+    set(value: T): void;
+    dispose(): void;
+}
 export interface IKnockoutModule {
     observable<T>(value: T): IKnockoutObservable<T>;
+    cleanNode(node: Node): void;
 }
 /**
  * Returns a Knockout observable which mirrors a Grain.js observable.
  */
 export declare function toKo<T>(knockout: IKnockoutModule, grainObs: Observable<T>): IKnockoutObservable<T>;
+/**
+ * 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.
+ */
+export declare function setupKoDisposal(ko: IKnockoutModule): void;

package/dist/cjs/lib/kowrap.js

@@ -20,26 +20,56 @@
  * 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.
  */
@@ -54,4 +84,57 @@ 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;
 //# sourceMappingURL=kowrap.js.map