grainjs 1.0.1 → 1.1.0

package/dist/cjs/lib/pureComputed.js

@@ -1,16 +1,6 @@
 "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() {
@@ -21,10 +11,19 @@ function _useFunc(obs) {
 }
 // Constant empty array, which we use to avoid allocating new read-only empty arrays.
 const emptyArray = [];
+/**
+ * `PureComputed` is 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.
+ */
 class PureComputed extends observable_1.Observable {
-    /**
-     * Internal constructor for a PureComputed. You should use pureComputed() function instead.
-     */
+    // 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.
@@ -36,10 +35,12 @@ class PureComputed extends observable_1.Observable {
         this._inCall = false;
         this.setListenerChangeCB(this._onListenerChange, this);
     }
+    /** @internal */
     _getDepItem() {
         this._activate();
         return this._sub._getDepItem();
     }
+    /** @override */
     get() {
         if (!this._sub && !this._inCall) {
             // _inCall member prevents infinite recursion.
@@ -61,7 +62,7 @@ class PureComputed extends observable_1.Observable {
     /**
      * "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.
+     * @param value - The value to pass to the write() callback.
      */
     set(value) { this._write(value); }
     /**
@@ -103,9 +104,6 @@ class PureComputed extends observable_1.Observable {
     }
 }
 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.

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

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

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

@@ -1,79 +1,96 @@
+import { IDomArgs, TagElem, TagName } from './domImpl';
+import { cls } from './domMethods';
+export interface IClsName {
+    className: string;
+    cls: typeof cls;
+}
+export type DomCreateFunc<R, Args extends IDomArgs<R> = IDomArgs<R>> = (...args: Args) => R;
 /**
  * In-code styling for DOM components, inspired by Reacts Styled Components.
  *
  * Usage:
- *    const title = styled('h1', `
- *      font-size: 1.5em;
- *      text-align: center;
- *      color: palevioletred;
- *    `);
- *
- *    const wrapper = styled('section', `
- *      padding: 4em;
- *      background: papayawhip;
- *    `);
- *
- *    wrapper(title('Hello world'))
- *
- * This generates class names for title and wrapper, adds the styles to the document on first use,
- * and the result is equivalent to:
- *
- *    dom(`section.${wrapper.className}`, dom(`h1.${title.className}`, 'Hello world'));
- *
- * Calls to styled() should happen at the top level, at import time, in order to register all
+ * ```ts
+ * const cssTitle = styled('h1', `
+ *   font-size: 1.5em;
+ *   text-align: center;
+ *   color: palevioletred;
+ * `);
+ *
+ * const cssWrapper = styled('section', `
+ *   padding: 4em;
+ *   background: papayawhip;
+ * `);
+ *
+ * cssWrapper(cssTitle('Hello world'))
+ * ```
+ *
+ * This generates class names for `cssTitle` and `cssWrapper`, adds the styles to the document on
+ * first use, and the result is equivalent to:
+ * ```ts
+ * dom(`section.${cssWrapper.className}`, dom(`h1.${cssTitle.className}`, 'Hello world'));
+ * ```
+ *
+ * What `styled(tag)` returns is a function that takes the same arguments `...args` as
+ * `dom(tag, ...args)`. In particular, you may call it with all the arguments that
+ * [`dom()`](#dom) takes: content, DOM methods, event handlers, etc.
+ *
+ * Calls to `styled()` should happen at the top level, at import time, in order to register all
  * styles upfront. Actual work happens the first time a style is needed to create an element.
- * Calling styled() elsewhere than at top level is wasteful and bad for performance.
- *
- * You may create a style that modifies an existing styled() or other component, e.g.
+ * Calling `styled()` elsewhere than at top level is wasteful and bad for performance.
  *
- *    const title2 = styled(title, `font-size: 1rem; color: red;`);
+ * You may create a style that modifies an existing `styled()` or other component, e.g.
+ * ```ts
+ * const cssTitle2 = styled(cssTitle, `font-size: 1rem; color: red;`);
+ * ```
  *
- * Calling title2('Foo') becomes equivalent to dom(`h1.${title.className}.${title2.className}`).
+ * Now calling `cssTitle2('Foo')` becomes equivalent to
+ * `dom('h1', {className: cssTitle.className + ' ' + cssTitle2.className})`.
  *
  * Styles may incorporate other related styles by nesting them under the main one as follows:
- *
- *     const myButton = styled('button', `
- *       border-radius: 0.5rem;
- *       border: 1px solid grey;
- *       font-size: 1rem;
- *
- *       &:active {
- *         background: lightblue;
- *       }
- *       &-small {
- *         font-size: 0.6rem;
- *       }
- *     `);
+ * ```ts
+ * const myButton = styled('button', `
+ *   border-radius: 0.5rem;
+ *   border: 1px solid grey;
+ *   font-size: 1rem;
+ *
+ *   &:active {
+ *     background: lightblue;
+ *   }
+ *   &-small {
+ *     font-size: 0.6rem;
+ *   }
+ * `);
+ * ```
  *
  * In nested styles, ampersand (&) gets replaced with the generated .className of the main element.
  *
- * The resulting styled component provides a .cls() helper to simplify using prefixed classes. It
- * behaves as dom.cls(), but prefixes the class names with the generated className of the main
+ * The resulting styled component provides a `.cls()` helper to simplify using prefixed classes. It
+ * behaves as `dom.cls()`, but prefixes the class names with the generated className of the main
  * element. E.g. for the example above,
+ * ```ts
+ * myButton(myButton.cls('-small'), 'Test')
+ * ```
  *
- *      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;
- *    `);
+ * creates a button with both the `myButton` style above, and the style specified under "&-small".
  */
-import { IDomArgs, TagElem, TagName } from './domImpl';
-import { cls } from './domMethods';
-export interface IClsName {
-    className: string;
-    cls: typeof cls;
-}
-export declare type DomCreateFunc<R, Args extends IDomArgs<R> = IDomArgs<R>> = (...args: Args) => R;
 export declare function styled<Tag extends TagName>(tag: Tag, styles: string): DomCreateFunc<TagElem<Tag>> & IClsName;
 export declare function styled<Args extends any[], R extends Element>(creator: (...args: Args) => R, styles: string): typeof creator & IClsName;
+/**
+ * Animations with `@keyframes` may be created with a unique name by using the keyframes() helper:
+ * ```ts
+ * const rotate360 = keyframes(`
+ *   from { transform: rotate(0deg); }
+ *   to { transform: rotate(360deg); }
+ * `);
+ *
+ * const Rotate = styled('div', `
+ *   display: inline-block;
+ *   animation: ${rotate360} 2s linear infinite;
+ * `);
+ * ```
+ *
+ * This function returns simply a string with the generated name. Note that keyframes do not
+ * support nesting or ampersand (&) handling, like `styled()` does, since these would be difficult
+ * and are entirely unneeded.
+ */
 export declare function keyframes(styles: string): string;

package/dist/cjs/lib/styled.js

@@ -1,74 +1,6 @@
 "use strict";
-/**
- * In-code styling for DOM components, inspired by Reacts Styled Components.
- *
- * Usage:
- *    const title = styled('h1', `
- *      font-size: 1.5em;
- *      text-align: center;
- *      color: palevioletred;
- *    `);
- *
- *    const wrapper = styled('section', `
- *      padding: 4em;
- *      background: papayawhip;
- *    `);
- *
- *    wrapper(title('Hello world'))
- *
- * This generates class names for title and wrapper, adds the styles to the document on first use,
- * and the result is equivalent to:
- *
- *    dom(`section.${wrapper.className}`, dom(`h1.${title.className}`, 'Hello world'));
- *
- * Calls to styled() should happen at the top level, at import time, in order to register all
- * styles upfront. Actual work happens the first time a style is needed to create an element.
- * Calling styled() elsewhere than at top level is wasteful and bad for performance.
- *
- * You may create a style that modifies an existing styled() or other component, e.g.
- *
- *    const title2 = styled(title, `font-size: 1rem; color: red;`);
- *
- * Calling title2('Foo') becomes equivalent to dom(`h1.${title.className}.${title2.className}`).
- *
- * Styles may incorporate other related styles by nesting them under the main one as follows:
- *
- *     const myButton = styled('button', `
- *       border-radius: 0.5rem;
- *       border: 1px solid grey;
- *       font-size: 1rem;
- *
- *       &:active {
- *         background: lightblue;
- *       }
- *       &-small {
- *         font-size: 0.6rem;
- *       }
- *     `);
- *
- * In nested styles, ampersand (&) gets replaced with the generated .className of the main element.
- *
- * The resulting styled component provides a .cls() helper to simplify using prefixed classes. It
- * behaves as dom.cls(), but prefixes the class names with the generated className of the main
- * element. E.g. for the example above,
- *
- *      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 domImpl_1 = require("./domImpl");
@@ -80,7 +12,7 @@ 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) => style.addToElem(domImpl_1.dom(creator, ...args)) :
+        (...args) => style.addToElem((0, domImpl_1.dom)(creator, ...args)) :
         (...args) => style.addToElem(creator(...args));
     return Object.assign(newCreator, {
         className: style.className,
@@ -88,8 +20,24 @@ function styled(creator, styles) {
     });
 }
 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.
+/**
+ * Animations with `@keyframes` may be created with a unique name by using the keyframes() helper:
+ * ```ts
+ * const rotate360 = keyframes(`
+ *   from { transform: rotate(0deg); }
+ *   to { transform: rotate(360deg); }
+ * `);
+ *
+ * const Rotate = styled('div', `
+ *   display: inline-block;
+ *   animation: ${rotate360} 2s linear infinite;
+ * `);
+ * ```
+ *
+ * This function returns simply a string with the generated name. Note that keyframes do not
+ * support nesting or ampersand (&) handling, like `styled()` does, since these would be difficult
+ * and are entirely unneeded.
+ */
 function keyframes(styles) {
     return (new KeyframePiece(styles)).className;
 }
@@ -113,23 +61,23 @@ function getNextStyleNum() {
     return g._grainNextStyleNum = (g._grainNextStyleNum || 0) + 1;
 }
 class StylePiece {
-    constructor(_styles) {
-        this._styles = _styles;
-        this._mounted = false;
-        this.className = StylePiece._nextClassName();
-        StylePiece._unmounted.add(this);
-    }
     // 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) => p._createRules()).join("\n\n");
-        browserGlobals_1.G.document.head.appendChild(domImpl_1.dom('style', sheet));
+        browserGlobals_1.G.document.head.appendChild((0, domImpl_1.dom)('style', sheet));
         for (const piece of this._unmounted) {
             piece._mounted = true;
         }
         this._unmounted.clear();
     }
+    constructor(_styles) {
+        this._styles = _styles;
+        this._mounted = false;
+        this.className = StylePiece._nextClassName();
+        StylePiece._unmounted.add(this);
+    }
     addToElem(elem) {
         if (!this._mounted) {
             StylePiece._mountAll();

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

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

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

@@ -1,40 +1,47 @@
-/**
- * subscribe.js implements subscriptions to several observables at once.
- *
- * E.g. if we have some existing observables (which may be instances of `computed`),
- * we can subscribe to them explicitly:
- *    let obs1 = observable(5), obs2 = observable(12);
- *    subscribe(obs1, obs2, (use, v1, v2) => console.log(v1, v2));
- *
- * or implicitly by using `use(obs)` function, which allows dynamic subscriptions:
- *    subscribe(use => console.log(use(obs1), use(obs2)));
- *
- * In either case, if obs1 or obs2 is changed, the callbacks will get called automatically.
- *
- * Creating a subscription allows any number of dependencies to be specified explicitly, and their
- * values will be passed to the callback(). These may be combined with automatic dependencies
- * detected using use(). Note that constructor dependencies have less overhead.
- *
- *    subscribe(...deps, ((use, ...depValues) => READ_CALLBACK));
- */
 import { DepItem } from './_computed_queue';
 import { IDisposableOwner } from './dispose';
 import { Listener } from './emit';
 import { IKnockoutReadObservable } from './kowrap';
 import { BaseObservable as Obs } from './observable';
 export interface ISubscribableObs {
+    /** @internal */
     _getDepItem(): DepItem | null;
     addListener(callback: (val: any, prev: any) => void, optContext?: object): Listener;
     get(): any;
 }
-export declare type ISubscribable = ISubscribableObs | IKnockoutReadObservable<any>;
-export declare type InferUseType<TObs extends Obs<any> | IKnockoutReadObservable<any>> = TObs extends Obs<infer T> ? T : TObs extends {
+export type ISubscribable = ISubscribableObs | IKnockoutReadObservable<any>;
+export type InferUseType<TObs extends Obs<any> | IKnockoutReadObservable<any>> = TObs extends Obs<infer T> ? T : TObs extends {
     peek(): infer U;
 } ? U : never;
-export declare type UseCB = <TObs extends Obs<any> | IKnockoutReadObservable<any>>(obs: TObs) => InferUseType<TObs>;
+export type UseCB = <TObs extends Obs<any> | IKnockoutReadObservable<any>>(obs: TObs) => InferUseType<TObs>;
 export interface UseCBOwner extends UseCB {
     owner: IDisposableOwner;
 }
+/**
+ * `Subscription` allows subscribing to several observables at once. It's the foundation for a
+ * `Computed`, but may also be used directly.
+ *
+ * E.g. if we have some existing observables (which may be instances of `Computed`),
+ * we can subscribe to them explicitly:
+ * ```ts
+ * const obs1 = observable(5), obs2 = observable(12);
+ * subscribe(obs1, obs2, (use, v1, v2) => console.log(v1, v2));
+ * ```
+ *
+ * or implicitly by using `use(obs)` function, which allows dynamic subscriptions:
+ * ```ts
+ * subscribe(use => console.log(use(obs1), use(obs2)));
+ * ```
+ *
+ * In either case, if `obs1` or `obs2` is changed, the callbacks will get called automatically.
+ *
+ * Creating a subscription allows any number of dependencies to be specified explicitly, and their
+ * values will be passed to the `callback`. These may be combined with automatic dependencies
+ * detected using `use()`. Note that constructor dependencies have less overhead.
+ * ```ts
+ * subscribe(...deps, ((use, ...depValues) => READ_CALLBACK));
+ * ```
+ */
 export declare class Subscription {
     private readonly _depItem;
     private readonly _dependencies;
@@ -42,11 +49,6 @@ export declare class Subscription {
     private _dynDeps;
     private _callback;
     private _useFunc;
-    /**
-     * Internal constructor for a Subscription. You should use subscribe() function instead.
-     * The last owner argument is used by computed() to make itself available as the .owner property
-     * of the 'use' function that gets passed to the callback.
-     */
     constructor(callback: (use: UseCB, ...args: any[]) => void, dependencies: ReadonlyArray<ISubscribable>, owner?: any);
     /**
      * Disposes the computed, unsubscribing it from all observables it depends on.
@@ -54,38 +56,40 @@ export declare class Subscription {
     dispose(): void;
     /**
      * For use by computed(): returns this subscription's hook into the _computed_queue.
+     * @internal
      */
     _getDepItem(): DepItem;
     /**
-     * @private
      * Gets called when the callback calls `use(obs)` for an observable. It creates a
      * subscription to `obs` if one doesn't yet exist.
-     * @param {Observable} obs: The observable being used as a dependency.
+     * @param obs - The observable being used as a dependency.
      */
     private _useDependency;
     /**
-     * @private
      * Calls the callback() with appropriate args, and updates subscriptions when it is done.
      * I.e. adds dynamic subscriptions created via `use(obs)`, and disposes those no longer used.
      */
     private _evaluate;
     /**
-     * @private
      * Subscribes this computed to another observable that it depends on.
-     * @param {Observable} obs: The observable to subscribe to.
-     * @returns {Listener} Listener object.
+     * @param obs - The observable to subscribe to.
+     * @returns Listener object.
      */
     private _subscribeTo;
     /**
-     * @private
      * Adds this item to the recompute queue.
      */
     private _enqueue;
 }
 /**
- * This is the type-checking interface for subscribe(), which allows TypeScript to do helpful
- * type-checking when using it. We can only support a fixed number of argumnets (explicit
- * dependencies), but 5 should almost always be enough.
+ * Creates a new Subscription.
+ * @param 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 `callback`
+ *    will be called with the values of these observables as arguments.
+ * @param callback - will be called with arguments `(use, ...values)`, i.e. the
+ *    `use` function and values for all of the `...observables` that precede this argument.
+ *    This callback is called immediately, and whenever any dependency changes.
+ * @returns The new `Subscription` which may be disposed to unsubscribe.
  */
 export declare function subscribe(cb: (use: UseCB) => void): Subscription;
 export declare function subscribe<A>(a: Obs<A>, cb: (use: UseCB, a: A) => void): Subscription;

package/dist/cjs/lib/subscribe.js

@@ -1,34 +1,39 @@
 "use strict";
+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 = [];
 /**
- * subscribe.js implements subscriptions to several observables at once.
+ * `Subscription` allows subscribing to several observables at once. It's the foundation for a
+ * `Computed`, but may also be used directly.
  *
- * E.g. if we have some existing observables (which may be instances of `computed`),
+ * E.g. if we have some existing observables (which may be instances of `Computed`),
  * we can subscribe to them explicitly:
- *    let obs1 = observable(5), obs2 = observable(12);
- *    subscribe(obs1, obs2, (use, v1, v2) => console.log(v1, v2));
+ * ```ts
+ * const obs1 = observable(5), obs2 = observable(12);
+ * subscribe(obs1, obs2, (use, v1, v2) => console.log(v1, v2));
+ * ```
  *
  * or implicitly by using `use(obs)` function, which allows dynamic subscriptions:
- *    subscribe(use => console.log(use(obs1), use(obs2)));
+ * ```ts
+ * subscribe(use => console.log(use(obs1), use(obs2)));
+ * ```
  *
- * In either case, if obs1 or obs2 is changed, the callbacks will get called automatically.
+ * In either case, if `obs1` or `obs2` is changed, the callbacks will get called automatically.
  *
  * Creating a subscription allows any number of dependencies to be specified explicitly, and their
- * values will be passed to the callback(). These may be combined with automatic dependencies
- * detected using use(). Note that constructor dependencies have less overhead.
- *
- *    subscribe(...deps, ((use, ...depValues) => READ_CALLBACK));
+ * values will be passed to the `callback`. These may be combined with automatic dependencies
+ * detected using `use()`. Note that constructor dependencies have less overhead.
+ * ```ts
+ * subscribe(...deps, ((use, ...depValues) => READ_CALLBACK));
+ * ```
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-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 {
-    /**
-     * Internal constructor for a Subscription. You should use subscribe() function instead.
-     * The last owner argument is used by computed() to make itself available as the .owner property
-     * of the 'use' function that gets passed to the callback.
-     */
+    // Internal constructor for a Subscription. You should use subscribe() function instead.
+    // The last owner argument is used by computed() to make itself available as the .owner property
+    // of the 'use' function that gets passed to the callback.
     constructor(callback, dependencies, owner) {
         this._depItem = new _computed_queue_1.DepItem(this._evaluate, this);
         this._dependencies = dependencies.length > 0 ? dependencies : emptyArray;
@@ -55,16 +60,16 @@ class Subscription {
     }
     /**
      * For use by computed(): returns this subscription's hook into the _computed_queue.
+     * @internal
      */
     _getDepItem() { return this._depItem; }
     /**
-     * @private
      * Gets called when the callback calls `use(obs)` for an observable. It creates a
      * subscription to `obs` if one doesn't yet exist.
-     * @param {Observable} obs: The observable being used as a dependency.
+     * @param obs - The observable being used as a dependency.
      */
     _useDependency(_obs) {
-        const obs = ('_getDepItem' in _obs) ? _obs : kowrap_1.fromKo(_obs);
+        const obs = ('_getDepItem' in _obs) ? _obs : (0, kowrap_1.fromKo)(_obs);
         let listener = this._dynDeps.get(obs);
         if (!listener) {
             listener = this._subscribeTo(obs);
@@ -75,7 +80,6 @@ class Subscription {
         return obs.get();
     }
     /**
-     * @private
      * Calls the callback() with appropriate args, and updates subscriptions when it is done.
      * I.e. adds dynamic subscriptions created via `use(obs)`, and disposes those no longer used.
      */
@@ -105,17 +109,15 @@ class Subscription {
         }
     }
     /**
-     * @private
      * Subscribes this computed to another observable that it depends on.
-     * @param {Observable} obs: The observable to subscribe to.
-     * @returns {Listener} Listener object.
+     * @param obs - The observable to subscribe to.
+     * @returns Listener object.
      */
     _subscribeTo(_obs) {
-        const obs = ('_getDepItem' in _obs) ? _obs : kowrap_1.fromKo(_obs);
+        const obs = ('_getDepItem' in _obs) ? _obs : (0, kowrap_1.fromKo)(_obs);
         return obs.addListener(this._enqueue, this);
     }
     /**
-     * @private
      * Adds this item to the recompute queue.
      */
     _enqueue() {
@@ -123,16 +125,6 @@ class Subscription {
     }
 }
 exports.Subscription = Subscription;
-/**
- * Creates a new Subscription.
- * @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 callback()
- *    will be called with the values of these observables as arguments.
- * @param {Function} callback: will be called with arguments (use, ...values), i.e. the
- *    `use` function and values for all of the ...observables that precede this argument.
- *    This callback is called immediately, and whenever any dependency changes.
- * @returns {Subscription} The new subscription which may be disposed to unsubscribe.
- */
 function subscribe(...args) {
     const cb = args.pop();
     // The cast helps ensure that Observable is compatible with ISubscribable abstraction that we use.