implab/implabjs-djx Commit - r110:1a190b3a757d

corrected tear down logic handling in observables. Added support for observable query results

cin -

r110:1a190b3a757d v1.4.0 default

parent child

Context file:

r110:1a190b3a757d

Collapse all files

The requested changes are too big and content was truncated. Show full diff

playground/src/main/ts/logging.ts created 644 0 0

	1	NO CONTENT: new file 100644			NO CONTENT: new file 100644
The requested commit or file is too big and content was truncated. Show full diff

djx/package-lock.json 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

djx/package.json +1 0

             {
                 "name": "@implab/djx",
                 "version": "0.0.1-dev",
                 "description": "Supports using dojo version 1 with typescript and .tsx files",
                 "keywords": [
                     "dojo",
                     "tsx",
                     "typescript",
                     "widgets"
                 ],
                 "author": "Implab team",
                 "license": "BSD-2-Clause",
                 "repository": "https://code.implab.org/implab/implabjs-djx",
                 "publishConfig": {
                     "access": "public"
                 },
                 "peerDependencies": {
                     "@implab/core-amd": "^1.4.0",
                     "dojo": "^1.10.0"
                 },
                 "devDependencies": {
                     "@implab/core-amd": "^1.4.0",
                     "@types/chai": "4.1.3",
                     "@types/requirejs": "2.1.31",
                     "@types/yaml": "1.2.0",
                     "@types/tap": "15.0.7",
+                    "rxjs": "7.5.6",
                     "dojo": "1.16.0",
                     "@implab/dojo-typings": "1.0.3",
                     "@typescript-eslint/eslint-plugin": "^5.23.0",
                     "@typescript-eslint/parser": "^5.23.0",
                     "eslint": "^8.23.0",
                     "eslint-config-standard": "^17.0.0",
                     "eslint-plugin-import": "^2.26.0",
                     "eslint-plugin-n": "^15.2.0",
                     "eslint-plugin-promise": "^6.0.0",
                     "eslint-plugin-react": "^7.29.4",
                     "requirejs": "2.3.6",
                     "typescript": "4.8.3",
                     "yaml": "~1.7.2",
                     "tap": "16.3.0"
                 }
             }

djx/src/main/ts/observable.ts +134 -52

@@ -1,147 +1,229
		1	import { PromiseOrValue } from "@implab/core-amd/interfaces";
		2	import { isPromise } from "@implab/core-amd/safe";
		3
1	/**	4	/**
2	* The interface for the consumer of an observable sequence	5	* The interface for the consumer of an observable sequence
3	*/	6	*/
4	export interface Observer<T> {	7	export interface Observer<T> {
5	/**	8	/**
6	* Called for the next element in the sequence	9	* Called for the next element in the sequence
7	*/	10	*/
8	next: (value: T) => void;	11	next: (value: T) => void;
9		12
10	/**	13	/**
11	* Called once when the error occurs in the sequence.	14	* Called once when the error occurs in the sequence.
12	*/	15	*/
13	error: (e: unknown) => void;	16	error: (e: unknown) => void;
14		17
15	/**	18	/**
16	* Called once at the end of the sequence.	19	* Called once at the end of the sequence.
17	*/	20	*/
18	complete: () => void;	21	complete: () => void;
19	}	22	}
20		23
21	/**	24	/**
22	* The group of functions to feed an observable. This methods are provided to	25	* The group of functions to feed an observable. These methods are provided to
23	* the producer to generate a stream of events.	26	* the producer to generate a stream of events.
24	*/	27	*/
25	export type Sink<T> = {	28	export type Sink<T> = {
26	[k in keyof Observer<T>]: (this: void, ...args: Parameters<Observer<T>[k]>) => void;	29	/**
		30	* Call to send the next element in the sequence
		31	*/
		32	next: (value: T) => void;
		33
		34	/**
		35	* Call to notify about the error occurred in the sequence.
		36	*/
		37	error: (e: unknown) => void;
		38
		39	/**
		40	* Call to signal the end of the sequence.
		41	*/
		42	complete: () => void;
		43
		44	/**
		45	* Checks whether the sink is accepting new elements. It's safe to
		46	* send elements to the closed sink.
		47	*/
		48	isClosed: () => boolean;
27	};	49	};
28		50
29	export type Producer<T> = (sink: Sink<T>) => (void \| (() => void));	51	export type Producer<T> = (sink: Sink<T>) => (void \| (() => void));
30		52
31	export interface Unsubscribable {	53	export interface Unsubscribable {
32	unsubscribe(): void;	54	unsubscribe(): void;
33	}	55	}
34		56
35	export const isUnsubsribable = (v: unknown): v is Unsubscribable =>	57	export const isUnsubsribable = (v: unknown): v is Unsubscribable =>
36	v !== null && v !== undefined && typeof (v as Unsubscribable).unsubscribe === "function";	58	v !== null && v !== undefined && typeof (v as Unsubscribable).unsubscribe === "function";
37		59
38	export const isSubsribable = <T = unknown>(v: unknown): v is Subscribable<T> =>	60	export const isSubsribable = <T = unknown>(v: unknown): v is Subscribable<T> =>
39	v !== null && v !== undefined && typeof (v as Subscribable<unknown>).subscribe === "function";	61	v !== null && v !== undefined && typeof (v as Subscribable<unknown>).subscribe === "function";
40		62
41	export interface Subscribable<T> {	63	export interface Subscribable<T> {
42	subscribe(consumer: Partial<Observer<T>>): Unsubscribable;	64	subscribe(consumer: Partial<Observer<T>>): Unsubscribable;
43	}	65	}
44		66
45	/** The observable source of items. */	67	/** The observable source of items. */
46	export interface Observable<T> extends Subscribable<T> {	68	export interface Observable<T> extends Subscribable<T> {
47	/** Transforms elements of the sequence with the specified mapper	69	/** Transforms elements of the sequence with the specified mapper
48	*	70	*
49	* @param mapper The mapper used to transform the values	71	* @param mapper The mapper used to transform the values
50	*/	72	*/
51	map<T2>(mapper: (value: T) => T2): Observable<T2>;	73	map<T2>(mapper: (value: T) => T2): Observable<T2>;
52		74
53	/** Filters elements of the sequence. The resulting sequence will	75	/** Filters elements of the sequence. The resulting sequence will
54	* contain only elements which match the specified predicate.	76	* contain only elements which match the specified predicate.
55	*	77	*
56	* @param predicate The filter predicate.	78	* @param predicate The filter predicate.
57	*/	79	*/
58	filter(predicate: (value: T) => boolean): Observable<T>;	80	filter(predicate: (value: T) => boolean): Observable<T>;
59		81
60	/** Applies accumulator to each value in the sequence and	82	/** Applies accumulator to each value in the sequence and
61	* emits the accumulated value for each source element	83	* emits the accumulated value for each source element
62	*	84	*
63	* @param accumulator	85	* @param accumulator
64	* @param initial	86	* @param initial
65	*/	87	*/
66	scan<A>(accumulator: (acc: A, value: T) => A, initial: A): Observable<A>;	88	scan<A>(accumulator: (acc: A, value: T) => A, initial: A): Observable<A>;
		89
		90	cat(...seq: Subscribable<T>[]): Observable<T>;
67	}	91	}
68		92
69	const noop = () => { };	93	const noop = () => { };
70		94
71	const sink = <T>(consumer: Partial<Observer<T>>) => {	95	const sink = <T>(consumer: Partial<Observer<T>>) => {
72	const { next, error, complete } = consumer;	96	const { next, error, complete } = consumer;
73	return {	97	return {
74	next: next ? next.bind(consumer) : noop,	98	next: next ? next.bind(consumer) : noop,
75	error: error ? error.bind(consumer) : noop,	99	error: error ? error.bind(consumer) : noop,
76	complete: complete ? complete.bind(consumer) : noop	100	complete: complete ? complete.bind(consumer) : noop,
		101	isClosed: () => false
77	};	102	};
78	};	103	};
79		104
80	const fuse = <T>({ next, error, complete }: Sink<T>) => {	105	/** Wraps the producer to handle tear down logic and subscription management
		106	*
		107	* @param producer The producer to wrap
		108	* @returns The wrapper producer
		109	*/
		110	const fuse = <T>(producer: Producer<T>) => ({ next, error, complete }: Sink<T>) => {
81	let done = false;	111	let done = false;
82	return {	112	let cleanup = noop;
		113
		114	const _fin = <A extends unknown[]>(fn: (...args: A) => void) =>
		115	(...args: A) => done ?
		116	void (0) :
		117	(done = true, cleanup(), fn(...args));
		118
		119	const safeSink = {
83	next: (value: T) => { !done && next(value); },	120	next: (value: T) => { !done && next(value); },
84	error: (e: unknown) => { !done && (done = true, error(e)); },	121	error: _fin(error),
85	complete: () => { !done && (done = true, complete()); }	122	complete: _fin(complete),
		123	isClosed: () => done
86	};	124	};
		125	cleanup = producer(safeSink) ?? noop;
		126	return done ?
		127	(cleanup(), noop) :
		128	_fin(noop);
87	};	129	};
88		130
89	const _observe = <T>(producer: Producer<T>): Observable<T> => ({	131	const _observe = <T>(producer: Producer<T>): Observable<T> => ({
90	subscribe: (consumer: Partial<Observer<T>>) => ({	132	subscribe: (consumer: Partial<Observer<T>>) => ({
91	unsubscribe: producer(sink(consumer)) ?? noop	133	unsubscribe: producer(sink(consumer)) ?? noop
92	}),	134	}),
93	map: (mapper) => _observe(({ next, ~~error~~, ~~complete~~ }) =>	135	map: (mapper) => _observe(({ next, ...rest }) =>
94	producer({	136	producer({
95	next: next !== noop ? (v: T) => next(mapper(v)) : noop,	137	next: next !== noop ? (v: T) => next(mapper(v)) : noop,
96	~~error~~,	138	...rest
97	complete	139	})
		140	),
		141	filter: (predicate) => _observe(({ next, ...rest }) =>
		142	producer({
		143	next: next !== noop ? (v: T) => predicate(v) ? next(v) : void (0) : noop,
		144	...rest
98	})	145	})
99	),	146	),
100	~~filter~~: (~~predicate~~) => _observe(({ next, ~~error~~, ~~complete~~ }) =>	147	scan: (accumulator, initial) => _observe(({ next, ...rest }) => {
101	producer({
102	next: next !== noop ?
103	(v: T) => predicate(v) ? next(v) : void (0) : noop,
104	error,
105	complete
106	})
107	),
108	scan: (accumulator, initial) => _observe(({ next, error, complete }) => {
109	let _acc = initial;	148	let _acc = initial;
110	return producer({	149	return producer({
111	next: next !== noop ?	150	next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop,
112	(v: T) => next(_acc = accumulator(_acc, v)) : noop,	151	...rest
113	error,
114	complete
115	});	152	});
		153	}),
		154
		155	cat: (...seq) => _observe(({ next, complete: final, ...rest }) => {
		156	let cleanup: () => void;
		157	const complete = () => {
		158	const continuation = seq.shift();
		159	if (continuation) {
		160	// if we have a next sequence, subscribe to it
		161	const subscription = continuation.subscribe({ next, complete, ...rest });
		162	cleanup = subscription.unsubscribe.bind(subscription);
		163	} else {
		164	// otherwise notify the consumer about completion
		165	final();
		166	}
		167	};
		168
		169	cleanup = producer({ next, complete, ...rest }) ?? noop;
		170
		171	return () => cleanup();
116	})	172	})
117	});	173	});
118		174
119	export const observe = <T>(producer: Producer<T>): Observable<T> => ({	175	export interface OrderUpdate<T> {
120	subscribe: (consumer: Partial<Observer<T>>) => ({	176	/** The item is being updated */
121	unsubscribe: producer(fuse(sink(consumer))) ?? noop	177	item: T;
122	}),	178
123	map: (mapper) => _observe(({ next, error, complete }) =>	179	/** The previous index of the item, -1 in case it is inserted */
124	producer(fuse({	180	prevIndex: number;
125	next: next !== noop ?	181
126	(v: T) => next(mapper(v)) : noop,	182	/** The new index of the item, -1 in case it is deleted */
127	error,	183	newIndex: number;
128	complete	184	}
129	}))	185
130	),	186	interface ObservableResults<T> {
131	filter: (predicate) => _observe(({ next, error, complete }) =>	187	/**
132	producer(fuse({	188	* Allows observation of results
133	next: next !== noop ?	189	*/
134	(v: T) => predicate(v) ? next(v) : void (0) : noop,	190	observe(listener: (object: T, previousIndex: number, newIndex: number) => void, includeUpdates?: boolean): {
135	error,	191	remove(): void;
136	complete	192	};
137	}))	193	}
138	),	194
139	scan: (accumulator, initial) => observe(({ next, error, complete }) => {	195	interface Queryable<T, A extends unknown[]> {
140	let _acc = initial;	196	query(...args: A): PromiseOrValue<T[]>;
141	return producer(fuse({	197	}
142	next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop,	198
143	error,	199	export const isObservableResults = <T>(v: object): v is ObservableResults<T> =>
144	complete	200	v && (typeof (v as { observe?: unknown; }).observe === "function");
145	}));	201
146	})	202	export const observe = <T>(producer: Producer<T>) => _observe(fuse(producer));
147	});	203
		204	export const empty = observe<never>(({ complete }) => complete());
		205
		206	export const query = <T, A extends unknown[]>(store: Queryable<T, A>) =>
		207	(...args: A) => {
		208	return observe<OrderUpdate<T>>(({ next, complete, error }) => {
		209	try {
		210	const results = store.query(...args);
		211	if (isPromise(results)) {
		212	results.then(items => items.forEach((item, newIndex) => next({ item, newIndex, prevIndex: -1 })))
		213	.then(undefined, error);
		214	} else {
		215	results.forEach((item, newIndex) => next({ item, newIndex, prevIndex: -1 }));
		216	}
		217
		218	if (isObservableResults<T>(results)) {
		219	const h = results.observe((item, prevIndex, newIndex) => next({ item, prevIndex, newIndex }));
		220	return () => h.remove();
		221	} else {
		222	complete();
		223	}
		224	} catch (err) {
		225	error(err);
		226	}
		227	});
		228
		229	};

djx/src/main/ts/tsx.ts +2 -13

             import { Constructor } from "@implab/core-amd/interfaces";
             import { HtmlRendition } from "./tsx/HtmlRendition";
             import { WidgetRendition } from "./tsx/WidgetRendition";
             import { isElementNode, isWidget, isWidgetConstructor, Rendition } from "./tsx/traits";
             import { FunctionRendition } from "./tsx/FunctionRendition";
             import Stateful = require("dojo/Stateful");
             import _WidgetBase = require("dijit/_WidgetBase");
             import { DjxWidgetBase } from "./tsx/DjxWidgetBase";
             import { WatchRendition } from "./tsx/WatchRendition";
-            import { Observable, observe, Subscribable } from "./observable";
+            import { Observable, observe, OrderUpdate, Subscribable } from "./observable";
             import djAttr = require("dojo/dom-attr");
             import djClass = require("dojo/dom-class");
             import { AnimationAttrs, WatchForRendition } from "./tsx/WatchForRendition";
             export function createElement<T extends Constructor | string | ((props: object) => Element)>(elementType: T, ...args: unknown[]): Rendition {
                 if (typeof elementType === "string") {
                     const ctx = new HtmlRendition(elementType);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else if (isWidgetConstructor(elementType)) {
                     const ctx = new WidgetRendition(elementType);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else if (typeof elementType === "function") {
                     const ctx = new FunctionRendition(elementType as (props: unknown) => Element);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else {
                     throw new Error(`The element type '${String(elementType)}' is unsupported`);
                 }
             }
             export interface EventDetails<T = unknown> {
                 detail: T;
             }
             export interface EventSelector {
                 selectorTarget: HTMLElement;
                 target: HTMLElement;
             }
-            export interface QueryResultUpdate<T> {
-                /** The item is being updated */
-                item: T;
-                /** The previous index of the item, -1 in case it is inserted */
-                prevIndex: number;
-                /** The new index of the item, -1 in case it is deleted */
-                newIndex: number;
             export type DojoMouseEvent<T = unknown> = MouseEvent & EventSelector & EventDetails<T>;
             type StatefulProps<T> = T extends Stateful<infer A> ? A :
                 T extends _WidgetBase ? T : never;
             /**
              * Observers the property and calls render callback each change.
              *
              * @param target The target object which property will be observed.
              * @param prop The name of the property.
              * @param render The callback which will be called every time the value is changed
              * @returns Rendition which is created instantly
              */
             export function watch<W extends _WidgetBase, K extends keyof W>(
                 target: W,
                 prop: K,
                 render: (model: W[K]) => unknown
             ): Rendition;
             /**
              * Observers the property and calls render callback each change.
              *
              * @param target The target object which property will be observed.
              * @param prop The name of the property.
              * @param render The callback which will be called every time the value is changed
              * @returns Rendition which is created instantly
              */
             export function watch<T extends Stateful, K extends keyof StatefulProps<T>>(
                 target: T,
                 prop: K,
                 render: (model: StatefulProps<T>[K]) => unknown
             ): Rendition;
             export function watch<V>(subj: Subscribable<V>, render: (model: V) => unknown): Rendition;
             export function watch(
                 ...args: [Stateful, string, (model: unknown) => unknown] |
                     [Subscribable<unknown>, (model: unknown) => unknown]
             ) {
                 if (args.length === 3) {
                     const [target, prop, render] = args;
                     return new WatchRendition(
                         render,
                         observe(({next}) => {
                             const h = target.watch(
                                 prop,
                                 (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
                             );
                             next(target.get(prop));
                             return () => h.remove();
                         })
                     );
                 } else {
                     const [subj, render] = args;
                     return new WatchRendition(render, subj);
                 }
             }
-            export const watchFor = <T>(source: T[] | Subscribable<QueryResultUpdate<T>>, render: (item: T, index: number) => unknown, opts:  AnimationAttrs = {}) => {
+            export const watchFor = <T>(source: T[] | Subscribable<OrderUpdate<T>>, render: (item: T, index: number) => unknown, opts:  AnimationAttrs = {}) => {
                 return new WatchForRendition({
                     ...opts,
                     subject: source,
                     component: render
                 });
             };
             export const prop: {
                 <T extends Stateful, K extends string & keyof StatefulProps<T>>(target: T, name: K): Observable<StatefulProps<T>[K]>;
                 <T extends _WidgetBase, K extends keyof T>(target: T, name: K): Observable<T[K]>;
             } = (target: Stateful, name: string) => {
                 return observe(({next}) => {
                     const h = target.watch(
                         name,
                         (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
                     );
                     next(target.get(name));
                     return () => h.remove();
                 });
             };
             export const attach = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
             export const bind = <K extends string, T>(attr: K, subj: Subscribable<T>) => {
                 let h = { unsubscribe() { } };
                 return (el: Element | { set(name: K, value: T): void; } | undefined) => {
                     if (el) {
                         if (isElementNode(el)) {
                             h = subj.subscribe({
                                 next: value => djAttr.set(el, attr, value)
                             });
                         } else {
                             h = subj.subscribe({
                                 next: value => el.set(attr, value)
                             });
                         }
                     } else {
                         h.unsubscribe();
                     }
                 };
             };
             export const toggleClass = (className: string, subj: Subscribable<boolean>) => {
                 let h = { unsubscribe() { } };
                 return (elOrWidget: HTMLElement | _WidgetBase | undefined) => {
                     const el = isWidget(elOrWidget) ? elOrWidget.domNode : elOrWidget;
                     if (el) {
                         h = subj.subscribe({
                             next: v => djClass.toggle(el, className, v)
                         });
                     } else {
                         h.unsubscribe();
                     }
                 };
             };
             export const all = <T, A extends JSX.Ref<T>[]>(...cbs: A): JSX.Ref<T> => (arg: T | undefined) => cbs.forEach(cb => cb(arg));
             /** Decorates the method which will be registered as the handle for the specified event.
              * This decorator can be applied to DjxWidgetBase subclass methods.
              *
              * ```
              *  @on("click")
              *  _onClick(eventObj: MouseEvent) {
              *      // ...
              *  }
              * ```
              */
             export const on = <E extends string>(...eventNames: E[]) =>
                 <K extends string,
                     T extends DjxWidgetBase<object, { [p in E]: EV }>,
                     EV extends Event
                 >(
                     target: T,
                     key: K,
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     _descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> | TypedPropertyDescriptor<() => void>
                 ) => {
                     const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key }));
                     target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers;
                 };

djx/src/main/ts/tsx/WatchForRendition.ts +6 -18

             import { id as mid } from "module";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { argumentNotNull } from "@implab/core-amd/safe";
             import { getScope, render } from "./render";
             import { RenditionBase } from "./RenditionBase";
             import { Scope } from "./Scope";
             import { Cancellation } from "@implab/core-amd/Cancellation";
             import { collectNodes, destroy as safeDestroy, isDocumentFragmentNode, isElementNode, isMounted, placeAt, startupWidgets } from "./traits";
             import { IDestroyable } from "@implab/core-amd/interfaces";
             import { play } from "../play";
             import * as fx from "dojo/fx";
-            import { isSubsribable, Subscribable } from "../observable";
+            import { isObservableResults, isSubsribable, OrderUpdate, Subscribable } from "../observable";
-            import { QueryResultUpdate } from "../tsx";
             const trace = TraceSource.get(mid);
             interface ItemRendition {
                 nodes: Node[];
                 scope: IDestroyable;
                 destroy(): void;
             }
-            interface ObservableResults<T> {
+            interface RenderTask<T> extends OrderUpdate<T> {
-                /**
-                 * Allows observation of results
-                 */
-                observe(listener: (object: T, previousIndex: number, newIndex: number) => void, includeUpdates?: boolean): {
-                    remove(): void;
-                };
-            interface RenderTask<T> extends QueryResultUpdate<T> {
                 animate: boolean;
             }
             export interface AnimationAttrs {
                 animate?: boolean;
                 animateIn?: (nodes: Node[]) => Promise<void>;
                 animateOut?: (nodes: Node[]) => Promise<void>;
             }
             export interface WatchForRenditionAttrs<T> extends AnimationAttrs {
-                subject: T[] | Subscribable<QueryResultUpdate<T>>;
+                subject: T[] | Subscribable<OrderUpdate<T>>;
                 component: (arg: T, index: number) => unknown;
             }
-            const isObservable = <T>(v: ArrayLike<T>): v is ArrayLike<T> & ObservableResults<T> =>
-                v && (typeof (v as { observe?: unknown; }).observe === "function");
             const noop = () => { };
             const fadeIn = (nodes: Node[]) => Promise.all(nodes
                 .filter(isElementNode)
                 .map(el => play(fx.fadeIn({ node: el as HTMLElement })))
             ).then(noop);
             const fadeOut = (nodes: Node[]) => Promise.all(nodes
                 .filter(isElementNode)
                 .map(el => play(fx.fadeOut({ node: el as HTMLElement })))
             ).then(noop);
             export class WatchForRendition<T> extends RenditionBase<Node> {
                 private readonly _component: (arg: T, index: number) => unknown;
                 private readonly _node: Node;
                 private readonly _itemRenditions: ItemRendition[] = [];
-                private readonly _subject: T[] | Subscribable<QueryResultUpdate<T>>;
+                private readonly _subject: T[] | Subscribable<OrderUpdate<T>>;
                 private readonly _renderTasks: RenderTask<T>[] = [];
                 private readonly _animate: boolean;
                 private readonly _animateIn: (nodes: Node[]) => Promise<void>;
                 private readonly _animateOut: (nodes: Node[]) => Promise<void>;
                 private _ct = Cancellation.none;
                 constructor({ subject, component, animate, animateIn, animateOut }: WatchForRenditionAttrs<T>) {
                     super();
                     argumentNotNull(component, "component");
                     argumentNotNull(subject, "component");
                     this._component = component;
                     this._subject = subject;
                     this._node = document.createComment("[WatchFor]");
                     this._animate = !!animate;
                     this._animateIn = animateIn ?? fadeIn;
                     this._animateOut = animateOut ?? fadeOut;
                 }
                 protected _create() {
                     const scope = getScope();
                     scope.own(() => {
                         this._itemRenditions.forEach(safeDestroy);
                         safeDestroy(this._node);
                     });
                     const result = this._subject;
                     if (result) {
-                        if (isSubsribable<QueryResultUpdate<T>>(result)) {
+                        if (isSubsribable<OrderUpdate<T>>(result)) {
                             let animate = false;
                             const subscription = result.subscribe({
                                 next: ({ item, prevIndex, newIndex }) => this._onItemUpdated({ item, prevIndex, newIndex, animate })
                             });
                             scope.own(subscription);
                             animate = this._animate;
                         } else {
-                            if (isObservable(result))
+                            if (isObservableResults<T>(result))
                                 scope.own(result.observe((item, prevIndex, newIndex) => this._onItemUpdated({ item, prevIndex, newIndex, animate: false }), true));
                             for (let i = 0, n = result.length; i < n; i++)
                                 this._onItemUpdated({ item: result[i], prevIndex: -1, newIndex: i, animate: this._animate });
                         }
                     }
                     this._ct = new Cancellation(cancel => scope.own(cancel));
                 }
                 private readonly _onItemUpdated = (item: RenderTask<T>) => {
                     if (!this._renderTasks.length) {
                         // schedule a new job
                         this._renderTasks.push(item);
                         this._render().catch(e => trace.error(e));
                     } else {
                         // update existing job
                         this._renderTasks.push(item);
                     }
                 };
                 private async _render() {
                     // fork
                     await Promise.resolve();
                     // don't render destroyed rendition
                     if (this._ct.isRequested())
                         return;
                     this._renderTasks.forEach(this._onRenderItem);
                     this._renderTasks.length = 0;
                 }
                 private readonly _onRenderItem = ({ item, newIndex, prevIndex, animate: _animate }: RenderTask<T>) => {
                     const animate = _animate && prevIndex !== newIndex;
                     if (prevIndex > -1) {
                         // if we need to delete previous rendition
                         const [{ nodes, destroy }] = this._itemRenditions.splice(prevIndex, 1);
                         if (animate) {
                             this._animateOut(nodes)
                                 .then(destroy)
                                 .catch(e => trace.error(e));
                         } else {
                             destroy();
                         }
                     }
                     if (newIndex > -1) {
                         // if we need to create the new rendition
                         // 1. create a new scope for rendering a content
                         const scope = new Scope();
                         // 2. render the content
                         const itemNode = render(this._component(item, newIndex), scope);
                         // 3. track nodes
                         const nodes = isDocumentFragmentNode(itemNode) ?
                             collectNodes(itemNode.childNodes) :
                             [itemNode];
                         // 5. insert node at the correct position
                         const { nodes: [beforeNode] } = this._itemRenditions[newIndex] ?? { nodes: [] };
                         if (beforeNode)
                             placeAt(itemNode, beforeNode, "before");
                         else
                             placeAt(itemNode, this._node, "before");
                         // 6. store information about rendition
                         this._itemRenditions.splice(newIndex, 0, {
                             scope,
                             nodes,
                             destroy: () => {
                                 scope.destroy();
                                 nodes.forEach(safeDestroy);
                             }
                         });
                         // 7. startup widgets if needed
                         if (isMounted(this._node))
                             nodes.forEach(n => startupWidgets(n));
                         // 8. optionally play the animation
                         if (animate)
                             this._animateIn(nodes).catch(e => trace.error(e));
                     }
                 };
                 protected _getDomNode() {
                     if (!this._node)
                         throw new Error("The instance of the widget isn't created");
                     return this._node;
                 }
             }

djx/src/test/ts/observable-tests.ts +1 -1

             import { observe } from "./observable";
             import * as t from "tap";
             const subj1 = observe<number>(({ next, complete }) => {
                 next(1);
                 complete();
                 next(2);
             });
             const consumer1 = {
                 sum: 0,
                 next(v: number) {
                     this.sum += v;
                 }
             };
             subj1.subscribe(consumer1);
             t.equal(consumer1.sum, 1, "Should get only one value");
             subj1.subscribe(consumer1);
             t.equal(consumer1.sum, 2, "Should get the value again");
             const consumer2 = {
                 value: 0,
                 completed: false,
                 next(v: number) { this.value = v; },
                 complete() { this.completed = true; }
             };
             let maps = 0;
             subj1
                 .map(v => {
                     t.comment(`map1: ${v * 2}`);
                     maps++;
                     return v * 2;
                 })
                 .map (v => {
                     t.comment(`map2: ${v * 2}`);
                     maps++;
                     return v * 2;
                 })
                 .map(v => {
                     t.comment(`map3: ${v * 2}`);
                     maps++;
                     return v * 2;
                 })
                 .subscribe(consumer2);
             t.equal(consumer2.value, 8, "Should map");
             t.equal(maps, 3, "The map chain should not be executed after completion");
-            t.ok(consumer2.completed, "The completion signal should pass through");
  No newline at end of file
+            t.ok(consumer2.completed, "The completion signal should pass through");

playground/build.gradle 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/package-lock.json 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/package.json 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/src/bundle/config.js 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/src/main/ts/main.ts 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/src/main/ts/model/Appointment.ts 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/src/main/ts/model/MainContext.ts 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/src/main/ts/model/MainModel.ts 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/src/main/ts/view/MainWidget.tsx 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

playground/src/tsconfig.json 0 0

	1	NO CONTENT: modified file			NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff

djx/src/main/ts/store/Observable.ts removed 0 -3

NO CONTENT: file was removed

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages