implab/implabjs-djx Commit - r118:e07418577cbc

added whenRendered() method to wait for pending oprations to complete

cin -

r118:e07418577cbc v1.6.1 default

parent child

Context file:

r118:e07418577cbc

Collapse all files

.vscode/settings.json +2 -1

                 "cSpell.words": [
                     "dijit",
                     "djbase",
-                    "djclass"
+                    "djclass",
+                    "Unsubscribable"
                 ]
             }

djx/src/main/ts/observable.ts +2 -2

                 unsubscribe(): void;
             }
-            export const isUnsubsribable = (v: unknown): v is Unsubscribable =>
+            export const isUnsubscribable = (v: unknown): v is Unsubscribable =>
                 v !== null && v !== undefined && typeof (v as Unsubscribable).unsubscribe === "function";
-            export const isSubsribable = <T = unknown>(v: unknown): v is Subscribable<T> =>
+            export const isSubscribable = <T = unknown>(v: unknown): v is Subscribable<T> =>
                 v !== null && v !== undefined && typeof (v as Subscribable<unknown>).subscribe === "function";
             export interface Subscribable<T> {

djx/src/main/ts/store.ts +7 -7

                 };
             }
-            interface Queryable<T, A extends unknown[]> {
+            interface Queryable<T, Q, O> {
-                query(...args: A): PromiseOrValue<T[]>;
+                query(query?: Q, options?: O): PromiseOrValue<T[]>;
             }
-            export const isObservableResults = <T>(v: object): v is DjObservableResults<T> =>
+            export const isDjObservableResults = <T>(v: object): v is DjObservableResults<T> =>
                 v && (typeof (v as { observe?: unknown; }).observe === "function");
-            export const query = <T, A extends unknown[]>(store: Queryable<T, A>, includeUpdates = true) =>
+            export const query = <T, Q, O>(store: Queryable<T, Q, O>, includeUpdates = true) =>
-                (...args: A) => {
+                (query?: Q, options?: O & { observe: boolean }) => {
                     return observe<OrderedUpdate<T>>(({ next, complete, error, isClosed }) => {
                         try {
-                            const results = store.query(...args);
+                            const results = store.query(query, options);
                             if (isPromise(results)) {
                                 results.then(items => items.forEach((item, newIndex) => next({ item, newIndex, prevIndex: -1 })))
                                     .then(undefined, error);
                                 results.forEach((item, newIndex) => next({ item, newIndex, prevIndex: -1 }));
                             }
-                            if (!isClosed() && isObservableResults<T>(results)) {
+                            if (!isClosed() && (options?.observe !== false) && isDjObservableResults<T>(results)) {
                                 const h = results.observe((item, prevIndex, newIndex) => next({ item, prevIndex, newIndex }), includeUpdates);
                                 return () => h.remove();
                             } else {

djx/src/main/ts/tsx.ts +1 -1

                 }
             }
-            export const watchFor = <T>(source: T[] | Subscribable<OrderedUpdate<T>>, render: (item: T, index: number) => unknown, opts:  AnimationAttrs = {}) => {
+            export const watchFor = <T>(source: T[] | Subscribable<OrderedUpdate<T>> | null | undefined, render: (item: T, index: number) => unknown, opts:  AnimationAttrs = {}) => {
                 return new WatchForRendition({
                     ...opts,
                     subject: source,

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

             import { IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
             import { isDestroyable, isRemovable } from "@implab/core-amd/safe";
-            import { isUnsubsribable, Unsubscribable } from "../observable";
+            import { isUnsubscribable, Unsubscribable } from "../observable";
             export interface IScope {
                 own(target: (() => void) | IDestroyable | IRemovable | Unsubscribable): void;
                         this._cleanup.push(() => target.destroy());
                     } else if (isRemovable(target)) {
                         this._cleanup.push(() => target.remove());
-                    } else if (isUnsubsribable(target)) {
+                    } else if (isUnsubscribable(target)) {
                         this._cleanup.push(() => target.unsubscribe());
                     }
                 }

djx/src/main/ts/tsx/WatchForRendition.ts +19 -15

             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 { getScope, render, scheduleRender } from "./render";
             import { RenditionBase } from "./RenditionBase";
             import { Scope } from "./Scope";
             import { Cancellation } from "@implab/core-amd/Cancellation";
             import { IDestroyable } from "@implab/core-amd/interfaces";
             import { play } from "../play";
             import * as fx from "dojo/fx";
-            import { isSubsribable, Subscribable } from "../observable";
+            import { isSubscribable, Subscribable } from "../observable";
-            import { isObservableResults, OrderedUpdate } from "../store";
+            import { isDjObservableResults, OrderedUpdate } from "../store";
             const trace = TraceSource.get(mid);
             }
             export interface WatchForRenditionAttrs<T> extends AnimationAttrs {
-                subject: T[] | Subscribable<OrderedUpdate<T>>;
+                subject: T[] | Subscribable<OrderedUpdate<T>> | undefined | null;
                 component: (arg: T, index: number) => unknown;
             }
                 constructor({ subject, component, animate, animateIn, animateOut }: WatchForRenditionAttrs<T>) {
                     super();
                     argumentNotNull(component, "component");
-                    argumentNotNull(subject, "component");
                     this._component = component;
-                    this._subject = subject;
+                    this._subject = subject ?? [];
                     this._node = document.createComment("[WatchFor]");
                     this._animate = !!animate;
                     const result = this._subject;
                     if (result) {
-                        if (isSubsribable<OrderedUpdate<T>>(result)) {
+                        if (isSubscribable<OrderedUpdate<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 (isObservableResults<T>(result))
+                            if (isDjObservableResults<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++)
                 private async _render() {
                     // fork
-                    await Promise.resolve();
+                    const beginRender = await scheduleRender();
-                    // don't render destroyed rendition
+                    const endRender = beginRender();
-                    if (this._ct.isRequested())
+                    try {
-                        return;
+                        // don't render destroyed rendition
+                        if (this._ct.isRequested())
+                            return;
-                    this._renderTasks.forEach(this._onRenderItem);
+                        this._renderTasks.forEach(this._onRenderItem);
-                    this._renderTasks.length = 0;
+                        this._renderTasks.length = 0;
+                    } finally {
+                        endRender();
+                    }
                 }
                 private readonly _onRenderItem = ({ item, newIndex, prevIndex, animate: _animate }: RenderTask<T>) => {
                 protected _getDomNode() {
                     if (!this._node)
-                        throw new Error("The instance of the widget isn't created");
+                        throw new Error("The instance of the rendition isn't created");
                     return this._node;
                 }
             }

djx/src/main/ts/tsx/WatchRendition.ts +24 -23

             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 { getItemDom, getScope, scheduleRender } from "./render";
             import { RenditionBase } from "./RenditionBase";
             import { Scope } from "./Scope";
             import { Subscribable } from "../observable";
                 };
                 private async _render() {
-                    // fork
+                    const beginRender = await scheduleRender(this._scope);
-                    await Promise.resolve();
+                    const endRender = beginRender();
-                    // don't render destroyed rendition
+                    try {
-                    if (this._ct.isRequested())
+                        // don't render destroyed rendition
-                        return;
+                        if (this._ct.isRequested())
+                            return;
-                    // remove all previous content
+                        // remove all previous content
-                    this._scope.clean();
+                        this._scope.clean();
-                    // render the new node
+                        // render the new node
-                    const node = render(
+                        const node = getItemDom(this._renderJob ? this._component(this._renderJob.value) : undefined);
-                        this._renderJob ? this._component(this._renderJob.value) : undefined,
-                        this._scope
-                    );
-                    // get actual content
+                        // get actual content
-                    const pending = isDocumentFragmentNode(node) ?
+                        const pending = isDocumentFragmentNode(node) ?
-                        collectNodes(node.childNodes) :
+                            collectNodes(node.childNodes) :
-                        [node];
+                            [node];
-                    placeAt(node, this._node, "after");
+                        placeAt(node, this._node, "after");
-                    if (isMounted(this._node))
+                        if (isMounted(this._node))
-                        pending.forEach(n => startupWidgets(n));
+                            pending.forEach(n => startupWidgets(n));
-                    if (pending.length)
+                        if (pending.length)
-                        this._scope.own(() => pending.forEach(destroy));
+                            this._scope.own(() => pending.forEach(destroy));
-                    this._renderJob = undefined;
+                        this._renderJob = undefined;
+                    } finally {
+                        endRender();
+                    }
                 }
                 protected _getDomNode() {

djx/src/main/ts/tsx/render.ts +88 -5

@@ -7,15 +7,20 import { isNode, isRendition, isWidget }
7	const trace = TraceSource.get(mid);	7	const trace = TraceSource.get(mid);
8		8
9	interface Context {	9	interface Context {
10	scope: IScope;	10	readonly scope: IScope;
11		11
12	hooks?: (() => void)[];	12	readonly hooks?: (() => void)[];
13	}	13	}
14		14
15	let _context: Context = {	15	let _context: Context = {
16	scope: Scope.dummy	16	scope: Scope.dummy
17	};	17	};
18		18
		19	let _renderCount = 0;
		20	let _renderId = 1;
		21	let _renderedHooks: (() => void)[] = [];
		22
		23
19	const guard = (cb: () => unknown) => {	24	const guard = (cb: () => unknown) => {
20	try {	25	try {
21	const result = cb();	26	const result = cb();
@@ -28,26 +33,104 const guard = (cb: () => unknown) => {
28	}	33	}
29	};	34	};
30		35
31	export const beginRender = (scope: IScope = getScope()) => {	36	/**
		37	*
		38	* @param scope
		39	* @returns
		40	*/
		41	export const beginRender = (scope = getScope()) => {
32	const prev = _context;	42	const prev = _context;
		43	_renderCount++;
		44	const renderId = _renderId++;
		45	trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount);
		46	if (_renderCount === 1)
		47	onRendering();
		48
33	_context = {	49	_context = {
34	scope,	50	scope,
35	hooks: []	51	hooks: []
36	};	52	};
37	return endRender(prev);	53	return endRender(prev, _context, renderId);
		54	};
		55
		56	/**
		57	* Method for a deferred rendering. Returns a promise with `beginRender()` function.
		58	* Call to `scheduleRender` will save the current context, and will increment pending
		59	* operations counter.
		60	*
		61	* @example
		62	*
		63	* const begin = await scheduleRender();
		64	* const end = begin();
		65	* try {
		66	* // do some DOM manipulations
		67	* } finally {
		68	* end();
		69	* }
		70	*
		71	* @param scope
		72	* @returns
		73	*/
		74	export const scheduleRender = async (scope = getScope()) => {
		75	const prev = _context;
		76	_renderCount++;
		77	const renderId = _renderId ++;
		78	trace.debug("scheduleRender [{0}], pending = {1}", renderId, _renderCount);
		79	if (_renderCount === 1)
		80	onRendering();
		81
		82	await Promise.resolve();
		83
		84	return () => {
		85	trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount);
		86	_context = {
		87	scope,
		88	hooks: []
		89	};
		90	return endRender(prev, _context, renderId);
		91	};
38	};	92	};
39		93
40	/**	94	/**
41	* Completes render operation	95	* Completes render operation
42	*/	96	*/
43	const endRender = (prev: Context) => () => {	97	const endRender = (prev: Context, current: Context, renderId: number) => () => {
		98	if (_context !== current)
		99	trace.error("endRender mismatched beginRender call");
		100
44	const { hooks } = _context;	101	const { hooks } = _context;
45	if (hooks)	102	if (hooks)
46	hooks.forEach(guard);	103	hooks.forEach(guard);
47		104
		105	_renderCount--;
48	_context = prev;	106	_context = prev;
		107
		108	trace.debug("endRender [{0}], pending = {1}", renderId, _renderCount);
		109	if (_renderCount === 0)
		110	onRendered();
49	};	111	};
50		112
		113	// called when the first beginRender is called for this iteration
		114	const onRendering = () => {
		115	setTimeout(() => {
		116	if (_renderCount !== 0)
		117	trace.error("Rendering tasks aren't finished, currently running = {0}", _renderCount);
		118	});
		119	};
		120
		121	// called when all render operations are complete
		122	const onRendered = () => {
		123	_renderedHooks.forEach(guard);
		124	_renderedHooks = [];
		125	};
		126
		127	export const whenRendered = () => new Promise<void>((resolve) => {
		128	if (_renderCount)
		129	_renderedHooks.push(resolve);
		130	else
		131	resolve();
		132	});
		133
51	export const renderHook = (hook: () => void) => {	134	export const renderHook = (hook: () => void) => {
52	const { hooks } = _context;	135	const { hooks } = _context;
53	if (hooks)	136	if (hooks)

playground/src/main/ts/main.ts +9 0

@@ -2,6 +2,15 import MainWidget from "./view/MainWidge
2	import "@implab/djx/css!dojo/resources/dojo.css";	2	import "@implab/djx/css!dojo/resources/dojo.css";
3	import "@implab/djx/css!dijit/themes/dijit.css";	3	import "@implab/djx/css!dijit/themes/dijit.css";
4	import "@implab/djx/css!dijit/themes/tundra/tundra.css";	4	import "@implab/djx/css!dijit/themes/tundra/tundra.css";
		5	import { TraceSource } from "@implab/core-amd/log/TraceSource";
		6	import { ConsoleLogger } from "@implab/core-amd/log/writers/ConsoleLogger";
		7
		8	const logger = new ConsoleLogger();
		9
		10	TraceSource.on(source => {
		11	source.level = 400;
		12	logger.writeEvents(source.events);
		13	});
5		14
6	const w = new MainWidget();	15	const w = new MainWidget();
7	w.placeAt(document.body);	16	w.placeAt(document.body);

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

@@ -41,6 +41,19 export class MainContext implements IDes
41	);	41	);
42	}	42	}
43		43
		44	async load() {
		45	await Promise.resolve();
		46	for (let i = 0; i < 2; i++) {
		47	const id = Uuid();
		48	this._appointments.add({
		49	id,
		50	startAt: new Date(),
		51	duration: 30,
		52	title: `Hello ${i+1}`
		53	});
		54	}
		55	}
		56
44	private readonly _queryAppointmentsRx = query(this._appointments);	57	private readonly _queryAppointmentsRx = query(this._appointments);
45		58
46	private readonly _queryMembersRx = query(this._members);	59	private readonly _queryMembersRx = query(this._members);

playground/src/main/ts/model/MainModel.ts +12 -1

             import { LocalDate } from "@js-joda/core";
             import { error } from "../logging";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
+            import { whenRendered } from "@implab/djx/tsx/render";
             const trace = TraceSource.get(mid);
                 }
                 addAppointment(title: string, startAt: Date, duration: number) {
-                    this._context.createAppointment(title,startAt, duration, []).catch(error(trace));
+                    this._context.createAppointment(title,startAt, duration, [])
+                    .then(() => {
+                        trace.debug("addAppointment done");
+                        return whenRendered();
+                    })
+                    .then(() => {
+                        trace.debug("Render dome");
+                    })
+                    .catch(error(trace));
                 }
                 load() {
+                    this._context.load().catch(error(trace));
                 }
                 destroy() {

playground/src/tsconfig.json +1 -1

                     ],
                     "skipLibCheck": true,
                     "target": "ES5",
-                    "lib": ["ES2015"]
+                    "lib": ["ES2015", "DOM"]
                 }
             }

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