implab/implabjs-djx Commit - r146:af4f8424e83d

Added priorities to render tasks, revisited rendering scheduler...

cin -

r146:af4f8424e83d v1.9.0 default

parent child

Context file:

r146:af4f8424e83d

Collapse all files

djx/src/main/ts/operators/subject.ts +2 -2

             import { Observable, Sink, Subscribable, observe } from "../observable";
             const noop = () => { };
             /** Connects multiple subscribers to the single producer. The producer
              * will be created when the first client subscribes and will be released
              * with the the last client unsubscribed.
              *
              * Use this wrapper to prevent spawning multiple producers.
              *
-             * The emitted values are not cached therefore the new subscriber will not receive
+             * The emitted values are not cached therefore new subscribers will not receive
-             * the values emitted before it has been subscribed.
+             * the values emitted before they had subscribed.
              *
              * @param source The source observable
              * @returns The new observable
              */
             export const subject = <T>(source: Subscribable<T>): Observable<T> => {
                 let subscribers: Sink<T>[] = []; // the list of active subscribers
                 let subscription = { unsubscribe: noop }; // current subscription
                 // cleanup method to release resources held by this subscription
                 const cleanup = (cb: (item: Sink<T>) => void) => {
                     const _subscribers = subscribers;
                     subscribers = []; // this will prevent a client cleanup login to run
                     _subscribers.forEach(cb);
                     // we don't need subscription.unsubscribe(), because cleanup is called
                     // from complete or error methods.
                 };
                 const sink: Sink<T> = {
                     isClosed: () => false,
                     complete: () => cleanup(s => s.complete()),
                     error: e => cleanup(s => s.error(e)),
                     next: v => subscribers.forEach(s => s.next(v))
                 };
                 return observe(client => {
                     const _subscribers = subscribers;
                     subscribers.push(client);
                     if (subscribers.length === 1) // this is the first client
                         subscription = source.subscribe(sink); // activate the producer
                     return () => {
                         // this is a cleanup logic for an individual client
                         if (_subscribers === subscribers) {
                             // is the current subscription to the producer is active
                             // find this client in the list of subscribers
                             const pos = subscribers.indexOf(client);
                             if (pos >= 0)
                                 subscribers.splice(pos, 1);
                             // is this is the last subscriber we need to release the producer
                             if (!subscribers.length)
                                 subscription.unsubscribe();
                         }
                     };
                 });
             };

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

             import { djbase, djclass } from "../declare";
             import _WidgetBase = require("dijit/_WidgetBase");
             import _AttachMixin = require("dijit/_AttachMixin");
             import { isNode, isElementNode } from "./traits";
             import registry = require("dijit/registry");
             import on = require("dojo/on");
             import { Scope } from "./Scope";
-            import { render } from "./render";
+            import { queueRenderTask, getPriority, render } from "./render";
             import { isNull } from "@implab/core-amd/safe";
             // type Handle = dojo.Handle;
             export interface EventArgs {
                 bubbles?: boolean;
                 cancelable?: boolean;
                 composed?: boolean;
             }
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             export interface DjxWidgetBase<Attrs = object, Events extends { [name in keyof Events]: Event } = object> extends
                 _WidgetBase<Events> {
                 /** This property is declared only for type inference to work, it is never assigned
                  * and should not be used.
                  */
                 readonly _eventMap: Events & GlobalEventHandlersEventMap;
                 /** The list of pairs of event and method names. When the widget is created all methods from
                  * this list will be connected to corresponding events.
                  *
                  * This property is maintained in the prototype
                  */
                 _eventHandlers: Array<{
                     eventName: string,
                     handlerMethod: string;
                 }>;
             }
             type _super = {
                 startup(): void;
                 destroy(preserveDom?: boolean): void;
             };
             @djclass
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             export abstract class DjxWidgetBase<Attrs = object, Events = object> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) {
                 private readonly _scope = new Scope();
+                private readonly _priority = getPriority() + 1;
                 buildRendering() {
                     const node = render(this.render(), this._scope);
                     if (!isElementNode(node))
                         throw new Error("The render method must return a single DOM element");
                     this.domNode = node as HTMLElement;
                     super.buildRendering();
                     // now we should get assigned data-dojo-attach-points
                     // place the contents of the original srcNode to the containerNode
                     const src = this.srcNodeRef;
                     const dest = this.containerNode;
                     // the donNode is constructed now we need to connect event handlers
                     this._connectEventHandlers();
                     if (src && dest) {
                         while (src.firstChild)
                             dest.appendChild(src.firstChild);
                     }
                 }
+                /** Schedules a new deferred rendition within the scope of the widget */
+                scheduleRender(task: () => void) {
+                    return queueRenderTask(task, this._scope, this._priority);
+                }
                 abstract render(): JSX.Element;
                 private _connectEventHandlers() {
                     if (this._eventHandlers)
                         this._eventHandlers.forEach(({ eventName, handlerMethod }) => {
                             const handler = this[handlerMethod as keyof this];
                             if (typeof handler === "function")
                                 on(this.domNode, eventName, handler.bind(this) as (...args: unknown[]) => unknown);
                         });
                 }
                 _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
                     baseNode: T,
                     getAttrFunc: (baseNode: T, attr: string) => string | undefined,
                     // tslint:disable-next-line: ban-types
                     attachFunc: (node: T, type: string, func?: (...args: unknown[]) => unknown) => dojo.Handle
                 ): boolean {
                     if (isNode(baseNode)) {
                         const w = registry.byNode(baseNode);
                         if (w) {
                             // from dijit/_WidgetsInTemplateMixin
                             this._processTemplateNode(w,
                                 (n, p) => {
                                     const v = n.get(p as keyof typeof n);
                                     return isNull(v) ? undefined : String(v);
                                 }, // callback to get a property of a widget
                                 (widget, type, callback) => {
                                     if (!callback)
                                         throw new Error("The callback must be specified");
                                     // callback to do data-dojo-attach-event to a widget
                                     if (type in widget) {
                                         // back-compat, remove for 2.0
                                         return widget.connect(widget, type, callback as EventListener);
                                     } else {
                                         // 1.x may never hit this branch, but it's the default for 2.0
                                         return widget.on(type as keyof GlobalEventHandlersEventMap, callback);
                                     }
                                 });
                             // don't process widgets internals
                             return false;
                         }
                     }
                     // eslint-disable-next-line @typescript-eslint/ban-types
                     return super._processTemplateNode(baseNode, getAttrFunc as (baseNode: T, attr: string) => string, attachFunc as (node: T, type: string, func?: Function) => dojo.Handle);
                 }
                 /** Starts current widget and all its supporting widgets (placed outside
                  * `containerNode`) and child widgets (placed inside `containerNode`)
                  */
                 startup() {
                     // startup supporting widgets
                     registry.findWidgets(this.domNode, this.containerNode).forEach(w => w.startup());
                     super.startup();
                 }
                 destroy(preserveDom?: boolean) {
                     this._scope.destroy();
                     super.destroy(preserveDom);
                 }
             }

djx/src/main/ts/tsx/WatchForRendition.ts +10 -11

             import { id as mid } from "module";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { argumentNotNull } from "@implab/core-amd/safe";
-            import { getScope, render, scheduleRender } from "./render";
+            import { queueRenderTask, getPriority, 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 { isSubscribable, Subscribable } from "../observable";
             import { isDjObservableResults, OrderedUpdate } from "../store";
             const trace = TraceSource.get(mid);
             interface ItemRendition {
                 nodes: Node[];
                 scope: IDestroyable;
                 destroy(): void;
             }
             interface RenderTask<T> extends OrderedUpdate<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<OrderedUpdate<T>> | undefined | null;
                 component: (arg: T, index: number) => unknown;
             }
             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<OrderedUpdate<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;
+                private _priority = 0;
                 constructor({ subject, component, animate, animateIn, animateOut }: WatchForRenditionAttrs<T>) {
                     super();
                     argumentNotNull(component, "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() {
+                    this._priority = getPriority() + 1;
                     const scope = getScope();
                     scope.own(() => {
                         this._itemRenditions.forEach(safeDestroy);
                         safeDestroy(this._node);
                     });
                     const result = this._subject;
                     if (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 (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++)
                                 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));
+                        // fork
+                        // use dummy scope, because every item will have it's own scope
+                        queueRenderTask(this._render, Scope.dummy, this._priority);
                     } else {
                         // update existing job
                         this._renderTasks.push(item);
                     }
                 };
-                private async _render() {
+                private readonly _render = () => {
-                    // fork
-                    const beginRender = await scheduleRender();
-                    const endRender = beginRender();
-                    try {
                     // don't render destroyed rendition
                     if (this._ct.isRequested())
                         return;
                     this._renderTasks.forEach(this._onRenderItem);
                     this._renderTasks.length = 0;
-                    } finally {
+                };
-                        endRender();
                 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 rendition isn't created");
                     return this._node;
                 }
             }

djx/src/main/ts/tsx/WatchRendition.ts +9 -14

-            import { id as mid } from "module";
-            import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { argumentNotNull } from "@implab/core-amd/safe";
-            import { getItemDom, getScope, scheduleRender } from "./render";
+            import { queueRenderTask, getItemDom, getPriority, getScope } from "./render";
             import { RenditionBase } from "./RenditionBase";
             import { Scope } from "./Scope";
             import { Subscribable } from "../observable";
             import { Cancellation } from "@implab/core-amd/Cancellation";
             import { collectNodes, destroy, isDocumentFragmentNode, isMounted, placeAt, startupWidgets } from "./traits";
-            const trace = TraceSource.get(mid);
             export class WatchRendition<T> extends RenditionBase<Node> {
                 private readonly _component: (arg: T) => unknown;
                 private readonly _node: Node;
                 private readonly _scope = new Scope();
                 private readonly _subject: Subscribable<T>;
                 private _renderJob?: { value: T };
                 private _ct = Cancellation.none;
+                private _priority = 0;
                 constructor(component: (arg: T) => unknown, subject: Subscribable<T>) {
                     super();
                     argumentNotNull(component, "component");
                     this._component = component;
                     this._subject = subject;
                     this._node = document.createComment("[Watch]");
                 }
                 protected _create() {
                     const scope = getScope();
+                    this._priority = getPriority() + 1;
                     scope.own(() => {
                         this._scope.destroy();
                         destroy(this._node);
                     });
                     scope.own(this._subject.subscribe({ next: this._onValue }));
                     this._ct = new Cancellation(cancel => scope.own(cancel));
                 }
                 private readonly _onValue = (value: T) => {
                     if (!this._renderJob) {
                         // schedule a new job
                         this._renderJob = { value };
-                        this._render().catch(e => trace.error(e));
+                        queueRenderTask(this._render, this._scope, this._priority);
                     } else {
                         // update existing job
                         this._renderJob = { value };
                     }
                 };
-                private async _render() {
+                private readonly _render = () => {
-                    const beginRender = await scheduleRender(this._scope);
-                    const endRender = beginRender();
-                    try {
                     // don't render destroyed rendition
                     if (this._ct.isRequested())
                         return;
                     // remove all previous content
                     this._scope.clean();
                     // render the new node
                     const node = getItemDom(this._renderJob ? this._component(this._renderJob.value) : undefined);
                     // get actual content
                     const pending = isDocumentFragmentNode(node) ?
                         collectNodes(node.childNodes) :
                         [node];
                     placeAt(node, this._node, "after");
                     if (isMounted(this._node))
                         pending.forEach(n => startupWidgets(n));
                     if (pending.length)
                         this._scope.own(() => pending.forEach(destroy));
                     this._renderJob = undefined;
-                    } finally {
+                };
-                        endRender();
                 protected _getDomNode() {
                     if (!this._node)
                         throw new Error("The instance of the widget isn't created");
                     return this._node;
                 }
             }

djx/src/main/ts/tsx/render.ts +215 -81

@@ -1,200 +1,334
1	import { TraceSource } from "@implab/core-amd/log/TraceSource";	1	import { TraceSource } from "@implab/core-amd/log/TraceSource";
2	import { isPromise } from "@implab/core-amd/safe";
3	import { id as mid } from "module";	2	import { id as mid } from "module";
4	import { IScope, Scope } from "./Scope";	3	import { IScope, Scope } from "./Scope";
5	import { isNode, isRendition, isWidget } from "./traits";	4	import { isNode, isRendition, isWidget } from "./traits";
6		5
7	const trace = TraceSource.get(mid);	6	const trace = TraceSource.get(mid);
8		7
9	interface Context {	8	interface Context {
10	readonly scope: IScope;	9	readonly scope: IScope;
11		10
		11	readonly priority: number;
		12
12	readonly hooks?: (() => void)[];	13	readonly hooks?: (() => void)[];
13	}	14	}
14		15
15	let _context: Context = {	16	type RenderTask = {
16	scope: Scope.dummy	17	/**
		18	* The priority for this task
		19	*/
		20	readonly priority: number,
		21
		22	/**
		23	* The rendering action performed in this task
		24	*/
		25	readonly render: () => void;
		26	};
		27
		28	type Range = {
		29	/** minimum value in this range */
		30	readonly min: number;
		31	/** maximum value in this range */
		32	readonly max: number;
17	};	33	};
18		34
		35	// empty range
		36	const emptyPriorities: Range = { min: NaN, max: NaN };
		37
		38	// holds render tasks
		39	let _renderQueue: RenderTask[] = [];
		40
		41	// holds the minimum and the maximum task priorities in the queue. Used to
		42	// optimize rendering process is all tasks are with the same priority.
		43	let _renderQueuePriorities: Range = emptyPriorities;
		44
		45	// current context
		46	let _context: Context = {
		47	scope: Scope.dummy,
		48	priority: 0
		49	};
		50
		51	// started render operations
19	let _renderCount = 0;	52	let _renderCount = 0;
		53
		54	// next id for render operations
20	let _renderId = 1;	55	let _renderId = 1;
		56
		57	// hooks for render completion, executed when all render operations has
		58	// been completed
21	let _renderedHooks: (() => void)[] = [];	59	let _renderedHooks: (() => void)[] = [];
22		60
23		61	const guard = (cb: () => void) => {
24	const guard = (cb: () => unknown) => {
25	try {	62	try {
26	~~const~~ ~~result~~ = cb();	63	cb();
27	if (isPromise(result)) {
28	const warn = (ret: unknown) => trace.error("The callback {0} competed asynchronously. result = {1}", cb, ret);
29	result.then(warn, warn);
30	}
31	} catch (e) {	64	} catch (e) {
32	trace.error(e);	65	trace.error(e);
33	}	66	}
34	};	67	};
35		68
36	/**	69	/**
		70	* Creates a new rendition context with the specified parameters and makes it
		71	* an active context.
37	*	72	*
38	* @param scope	73	* @see getScope
39	* @returns	74	* @see getPriority
40	*/
41	export const beginRender = (scope = getScope()) => {
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
49	_context = {
50	scope,
51	hooks: []
52	};
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	*	75	*
63	* const begin = await scheduleRender();	76	* @param scope The scope for the current context
64	* const end = begin();	77	* @param priority The priority for the current context
65	* try {	78	* @returns The function to restore the previous context and execute pending hooks
66	* // do some DOM manipulations
67	* } finally {
68	* end();
69	* }
70	*
71	* @param scope
72	* @returns
73	*/	79	*/
74	export const scheduleRender = async (scope = getScope()) => {	80	const enterContext = (scope: IScope, priority: number) => {
75	_renderCount++;
76	const renderId = _renderId ++;
77	trace.debug("scheduleRender [{0}], pending = {1}", renderId, _renderCount);
78	if (_renderCount === 1)
79	onRendering();
80
81	await Promise.resolve();
82
83	return () => {
84	trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount);
85	const prev = _context;	81	const prev = _context;
86		82	const captured = _context = { scope, priority, hooks: [] };
87	_context = {	83	return () => {
88	scope,	84	if (_context !== captured)
89	hooks: []
90	};
91	return endRender(prev, _context, renderId);
92	};
93	};
94
95	/**
96	* Completes render operation
97	*/
98	const endRender = (prev: Context, current: Context, renderId: number) => () => {
99	if (_context !== current)
100	trace.error("endRender mismatched beginRender call");	85	trace.error("endRender mismatched beginRender call");
101		86
102	const { hooks } = _context;	87	const { hooks } = _context;
103	if (hooks)	88	if (hooks)
104	hooks.forEach(guard);	89	hooks.forEach(guard);
105		90
		91	_context = prev;
		92	};
		93	};
		94
		95	/**
		96	* Starts the new render operation. When the operation is started the counter
		97	* of running operations is increased. If this is the first render operation
		98	* then the `onRendering` event is fired.
		99	*
		100	* @returns The id of the started rendering operation.
		101	*/
		102	const startRender = () => {
		103	_renderCount++;
		104	if (_renderCount === 1)
		105	onRendering();
		106
		107	return _renderId++;
		108	};
		109
		110	/**
		111	* Completes the rendering operation. When the operation is completed the counter
		112	* of running operations is decreased. If there is no more running operations left
		113	* then the `onRendered` event is fired.
		114	*
		115	*/
		116	const completeRender = () => {
106	_renderCount--;	117	_renderCount--;
107	_context = prev;
108
109	trace.debug("endRender [{0}], pending = {1}", renderId, _renderCount);
110	if (_renderCount === 0)	118	if (_renderCount === 0)
111	onRendered();	119	onRendered();
112	};	120	};
113		121
		122	/**
		123	* Invokes the specified within the rendition context. The rendition context
		124	* is created for the task invocation and restored after the task is competed.
		125	*
		126	* @param scope The cope for the rendition context
		127	* @param priority The priority for the rendition context
		128	* @returns The result returned by the task
		129	*/
		130	export const renderTask = <T>(task: () => T, scope: IScope, priority: number, renderId: number) => {
		131	const restoreContext = enterContext(scope, priority);
		132	try {
		133	trace.debug("beginRender [{0}], priority = {1}", renderId, priority);
		134	return task();
		135	} finally {
		136	trace.debug("endRender [{0}]", renderId);
		137	restoreContext();
		138	completeRender();
		139	}
		140	};
		141
		142	const processRenderQueue = () => {
		143	const q = _renderQueue;
		144	const { min, max } = _renderQueuePriorities;
		145
		146	_renderQueue = [];
		147	_renderQueuePriorities = emptyPriorities;
		148
		149	// all tasks scheduled due queue processing will be queued to the next
		150	// processRenderQueue iteration
		151	if (min !== max) {
		152	// if there are tasks with different priorities in the queue
		153	trace.debug("Processing render queue, {0} tasks, priorities=[{1}..{2}] ", q.length, min, max);
		154	q.sort(({ priority: a }, { priority: b }) => a - b).forEach(({ render }) => guard(render));
		155	} else {
		156	// all tasks are have same priority
		157	trace.debug("Processing render queue, {0} tasks, priority = {1} ", q.length, min);
		158	q.forEach(({ render }) => guard(render));
		159	}
		160
		161	if (_renderQueue.length)
		162	trace.debug("Render queue is processed, {0} tasks rescheduled", _renderQueue.length);
		163	};
		164
		165	/**
		166	* Adds the specified task to the render queue. The task will be added with the
		167	* specified priority.
		168	*
		169	* Render queue contains a list of render tasks. Each task is executed within
		170	* its own rendering context with the specified scope. The priority determines
		171	* the order in which tasks will be executed where the tasks with lower priority
		172	* numbers are executed first.
		173	*
		174	* When the queue is empty and the task is added then the render queue will be
		175	* scheduled for execution. While the current queue is being executed all
		176	* enqueued tasks are added to the new queue and processed after the current
		177	* execution has been completed.
		178	*
		179	* @param task The action to execute. This action will be executed with
		180	* {@link renderTask} function in its own rendering context.
		181	* @param scope The scope used to create a rendering context for the task.
		182	* @param priority The priority
		183	*/
		184	export const queueRenderTask = (task: () => void, scope = Scope.dummy, priority = getPriority()) => {
		185	const renderId = startRender();
		186	trace.debug("scheduleRender [{0}], priority = {1}", renderId, priority);
		187
		188	const render = () => renderTask(task, scope, priority, renderId);
		189
		190	if (!_renderQueue.length) {
		191	// this is the first task, schedule next render queue processing
		192	Promise.resolve().then(processRenderQueue, e => trace.error(e));
		193
		194	// initialize priorities
		195	_renderQueuePriorities = { min: priority, max: priority };
		196	} else {
		197
		198	// update priorities if needed
		199	const { min, max } = _renderQueuePriorities;
		200	if (priority < min)
		201	_renderQueuePriorities = { min: priority, max };
		202	else if (priority > max)
		203	_renderQueuePriorities = { min, max: priority };
		204	}
		205
		206	_renderQueue.push({ priority, render });
		207	};
		208
		209	/**
		210	* Starts the synchronous rendering process with the specified scope and priority.
		211	*
		212	* @param scope The scope for the current rendition
		213	* @param priority The priority for the current scope
		214	* @returns The function to complete the current rendering
		215	*/
		216	export const beginRender = (scope = Scope.dummy, priority = 0) => {
		217	const renderId = startRender();
		218	const restoreContext = enterContext(scope, priority);
		219	trace.debug("beginRender [{0}], priority = {1}", renderId, priority);
		220
		221	return () => {
		222	trace.debug("endRender [{0}]", renderId);
		223	restoreContext();
		224	completeRender();
		225	};
		226	};
		227
114	// called when the first beginRender is called for this iteration	228	// called when the first beginRender is called for this iteration
115	const onRendering = () => {	229	const onRendering = () => {
116	trace.log("Rendering started");	230	trace.log("Rendering started");
117	setTimeout(() => {	231	setTimeout(() => {
118	if (_renderCount !== 0)	232	if (_renderCount !== 0)
119	trace.error("Rendering tasks aren't finished, currently running = {0}", _renderCount);	233	trace.error("Rendering tasks aren't finished, currently running = {0}", _renderCount);
120	});	234	});
121	};	235	};
122		236
123	// called when all render operations are complete	237	// called when all render operations are complete
124	const onRendered = () => {	238	const onRendered = () => {
125	trace.log("Rendering compete");	239	trace.log("Rendering compete");
126	_renderedHooks.forEach(guard);	240	_renderedHooks.forEach(guard);
127	_renderedHooks = [];	241	_renderedHooks = [];
128	};	242	};
129		243
		244	/** Returns promise when the rendering has been completed. */
130	export const whenRendered = () => new Promise<void>((resolve) => {	245	export const whenRendered = () => new Promise<void>((resolve) => {
131	if (_renderCount)	246	if (_renderCount)
132	_renderedHooks.push(resolve);	247	_renderedHooks.push(resolve);
133	else	248	else
134	resolve();	249	resolve();
135	});	250	});
136		251
		252	/**
		253	* Registers hook which is called after the render operation is completed. The
		254	* hook will be called once only for the current operation.
		255	*
		256	* @param hook The hook which should be called when rendering is complete.
		257	*/
137	export const renderHook = (hook: () => void) => {	258	export const renderHook = (hook: () => void) => {
138	const { hooks } = _context;	259	const { hooks } = _context;
139	if (hooks)	260	if (hooks)
140	hooks.push(hook);	261	hooks.push(hook);
141	else	262	else
142	guard(hook);	263	guard(hook);
143	};	264	};
144		265
		266	/**
		267	* Registers special hook which will be called with the specified state. The
		268	* hook is called once after the rendering is complete. When the rendition is
		269	* destroyed the hook is called with the undefined parameter.
		270	*
		271	* This function is used to register `ref` hooks form a tsx rendition.
		272	*
		273	* @param value The state which will be supplied as a parameter for the hook
		274	* @param ref reference hook
		275	*/
145	export const refHook = <T>(value: T, ref: JSX.Ref<T>) => {	276	export const refHook = <T>(value: T, ref: JSX.Ref<T>) => {
146	const { hooks, scope } = _context;	277	const { hooks, scope } = _context;
147	if (hooks)	278	if (hooks)
148	hooks.push(() => ref(value));	279	hooks.push(() => ref(value));
149	else	280	else
150	guard(() => ref(value));	281	guard(() => ref(value));
151		282
152	scope.own(() => ref(undefined));	283	scope.own(() => ref(undefined));
153	};	284	};
154		285
155	/** Returns the current scope */	286	/** Returns the current scope. Scope is used to track resources bound to the
		287	* current rendering. When the rendering is destroyed the scope is cleaned and
		288	* all bound resources are released.
		289	*/
156	export const getScope = () => _context.scope;	290	export const getScope = () => _context.scope;
157		291
		292	/**
		293	* Returns the current render task priority. This value is used by some renditions
		294	* to schedule asynchronous nested updates with lower priority then themselves.
		295	*/
		296	export const getPriority = () => _context.priority;
		297
158	/** Schedules the rendition to be rendered to the DOM Node	298	/** Schedules the rendition to be rendered to the DOM Node
159	* @param rendition The rendition to be rendered	299	* @param rendition The rendition to be rendered
160	* @param scope The scope	300	* @param scope The scope
161	*/	301	*/
162	export const render = (rendition: unknown, scope = Scope.dummy) => {	302	export const render = (rendition: unknown, scope = Scope.dummy) =>
163	const complete = beginRender(scope);	303	renderTask(() => getItemDom(rendition), scope, getPriority(), startRender());
164	try {
165	return getItemDom(rendition);
166	} finally {
167	complete();
168	}
169	};
170		304
171	const emptyFragment = document.createDocumentFragment();	305	const emptyFragment = document.createDocumentFragment();
172		306
173	/** Renders DOM element for different types of the argument. */	307	/** Renders DOM element for different types of the argument. */
174	export const getItemDom = (v: unknown) => {	308	export const getItemDom = (v: unknown) => {
175	if (typeof v === "string" \|\| typeof v === "number" \|\| v instanceof RegExp \|\| v instanceof Date) {	309	if (typeof v === "string" \|\| typeof v === "number" \|\| v instanceof RegExp \|\| v instanceof Date) {
176	// primitive types converted to the text nodes	310	// primitive types converted to the text nodes
177	return document.createTextNode(v.toString());	311	return document.createTextNode(v.toString());
178	} else if (isNode(v)) {	312	} else if (isNode(v)) {
179	// nodes are kept as is	313	// nodes are kept as is
180	return v;	314	return v;
181	} else if (isRendition(v)) {	315	} else if (isRendition(v)) {
182	// renditions are instantiated	316	// renditions are instantiated
183	return v.getDomNode();	317	return v.getDomNode();
184	} else if (isWidget(v)) {	318	} else if (isWidget(v)) {
185	// widgets are converted to it's markup	319	// widgets are converted to it's markup
186	return v.domNode;	320	return v.domNode;
187	} else if (typeof v === "boolean" \|\| v === null \|\| v === undefined) {	321	} else if (typeof v === "boolean" \|\| v === null \|\| v === undefined) {
188	// null \| undefined \| boolean are removed	322	// null \| undefined \| boolean are removed
189	return emptyFragment;	323	return emptyFragment;
190	} else if (v instanceof Array) {	324	} else if (v instanceof Array) {
191	// arrays will be translated to document fragments	325	// arrays will be translated to document fragments
192	const fragment = document.createDocumentFragment();	326	const fragment = document.createDocumentFragment();
193	v.map(item => getItemDom(item))	327	v.map(item => getItemDom(item))
194	.forEach(node => fragment.appendChild(node));	328	.forEach(node => fragment.appendChild(node));
195	return fragment;	329	return fragment;
196	} else {	330	} else {
197	// bug: explicit error otherwise	331	// bug: explicit error otherwise
198	throw new Error(`Invalid parameter: ${String(v)}`);	332	throw new Error(`Invalid parameter: ${String(v)}`);
199	}	333	}
200	};	334	};

playground/src/main/ts/model/MainContext.ts +20 -2

             import Memory = require("dojo/store/Memory");
             import Observable = require("dojo/store/Observable");
             import { Appointment, AppointmentRole, Member } from "./Appointment";
             import { Contact } from "./Contact";
             import { Uuid } from "@implab/core-amd/Uuid";
             import { IDestroyable } from "@implab/core-amd/interfaces";
             import { delay } from "@implab/core-amd/safe";
             import { query } from "@implab/djx/store";
             type AppointmentRecord = Omit<Appointment, "getMembers"> & { id: string };
             type ContactRecord = Contact;
             type MemberRecord = Member & { appointmentId: string; };
             const item = <T, T2>(map: (x: T) => T2) => <U extends { item: T }>({ item, ...props }: U) => ({ item: map(item), ...props });
             export class MainContext implements IDestroyable {
                 private readonly _appointments = new Observable(new Memory<AppointmentRecord>());
                 private readonly _contacts = new Observable(new Memory<ContactRecord>());
                 private readonly _members = new Observable(new Memory<MemberRecord>());
                 async createAppointment(title: string, startAt: Date, duration: number, members: Member[]) {
                     await delay(1000);
                     const id = Uuid();
                     this._appointments.add({
                         id,
                         startAt,
                         duration,
                         title
                     });
                     members.forEach(member =>
                         this._members.add({
                             appointmentId: id,
                             ...member
                         }, { id: Uuid() }) as void
                     );
                 }
+                async removeAppointment(appointmentId: string) {
+                    await delay(10);
+                    this._members.query({ appointmentId })
+                        .map(m => this._members.getIdentity(m))
+                        .forEach(id => this._members.remove(id));
+                    this._appointments.remove(appointmentId);
+                }
                 async load() {
-                    await Promise.resolve();
+                    await delay(10);
-                    for (let i = 0; i < 2; i++) {
+                    for (let i = 0; i < 5; i++) {
                         const id = Uuid();
                         this._appointments.add({
                             id,
                             startAt: new Date(),
                             duration: 30,
                             title: `Hello ${i + 1}`
                         });
+                        for (let ii = 0; ii < 3; ii++)
+                            this._members.add({
+                                appointmentId: id,
+                                email: "some@no.mail",
+                                name: `Peter ${ii}`,
+                                position: "Manager",
+                                role: "participant"
+                            }, { id: Uuid() });
                     }
                 }
                 private readonly _queryAppointmentsRx = query(this._appointments);
                 private readonly _queryMembersRx = query(this._members);
                 queryAppointments({ dateFrom, dateTo }: { dateFrom?: Date; dateTo?: Date; } = {}) {
                     return this._queryAppointmentsRx(({ startAt }) =>
                         (!dateFrom || dateFrom <= startAt) &&
                         (!dateTo || startAt <= dateTo)
                     ).map(item(this._mapAppointment));
                 }
                 async addMember(appointmentId: string, member: Member) {
                     await delay(1000);
                     this._members.add({
                         appointmentId,
                         ...member
                     });
                 }
                 private readonly _mapAppointment = ({ startAt, title, duration, id }: AppointmentRecord) => ({
                     id,
                     title,
                     startAt,
                     duration,
                     getMembers: (role?: AppointmentRole) => this._queryMembersRx(role ? { appointmentId: id, role } : { appointmentId: id })
                 });
                 destroy() {
                 }
             }

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

             import { id as mid } from "module";
             import { BehaviorSubject, Observer, Unsubscribable } from "rxjs";
             import { IDestroyable } from "@implab/core-amd/interfaces";
             import { Observable } from "@implab/djx/observable";
             import { OrderedUpdate } from "@implab/djx/store";
             import { Appointment, Member } from "./Appointment";
             import { MainContext } from "./MainContext";
             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);
             export interface State {
                 appointments: Observable<OrderedUpdate<Appointment>>;
                 dateTo: LocalDate;
                 dateFrom: LocalDate;
                 title: string;
             }
             export default class MainModel implements IDestroyable {
                 private readonly _state: BehaviorSubject<State>;
                 private readonly _context = new MainContext();
                 constructor() {
                     this._state = new BehaviorSubject<State>({
                         dateTo: LocalDate.now(),
                         dateFrom: LocalDate.now().minusMonths(1),
                         appointments: this._context.queryAppointments(),
                         title: "Appointments"
                     });
                 }
                 getState() {
                     return this._state.getValue();
                 }
                 subscribe(observer: Partial<Observer<State>>): Unsubscribable {
                     return this._state.subscribe(observer);
                 }
                 protected dispatch(command: Partial<State>) {
                     const state = this.getState();
                     this._state.next({ ...state, ...command });
                 }
                 addMember(appointmentId: string, member: Member) {
                     this._context.addMember(appointmentId, member).catch(error(trace));
                 }
                 addAppointment(title: string, startAt: Date, duration: number) {
                     this._context.createAppointment(title,startAt, duration, [])
                     .then(() => {
                         trace.debug("addAppointment done");
                         return whenRendered();
                     })
                     .then(() => {
                         trace.debug("Render dome");
                     })
                     .catch(error(trace));
                 }
+                removeAppointment(appointmentId: string)  {
+                    this._context.removeAppointment(appointmentId).catch(error(trace));
+                }
                 load() {
                     this._context.load().catch(error(trace));
                 }
                 destroy() {
                     this._context.destroy();
                 }
             }

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

+            import { id as mid } from "module";
             import { djbase, djclass } from "@implab/djx/declare";
             import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
             import { attach, bind, createElement, prop, watch, watchFor } from "@implab/djx/tsx";
             import MainModel from "../model/MainModel";
             import { Observable } from "@implab/djx/observable";
             import { OrderedUpdate } from "@implab/djx/store";
             import { Appointment } from "../model/Appointment";
             import { LocalDate } from "@js-joda/core";
             import Button = require("dijit/form/Button");
             import NewAppointment from "./NewAppointment";
+            import { TraceSource } from "@implab/core-amd/log/TraceSource";
+            const trace = TraceSource.get(mid);
             @djclass
             export default class MainWidget extends djbase(DjxWidgetBase) {
                 appointments?: Observable<OrderedUpdate<Appointment>>;
                 model: MainModel;
                 dateTo?: LocalDate;
                 dateFrom?: LocalDate;
                 toolbarNode?: HTMLDivElement;
                 constructor(opts?: Partial<MainWidget> & ThisType<MainWidget>, srcNode?: string | Node) {
                     super(opts, srcNode);
                     const model = this.model = new MainModel();
                     this.own(model);
                     model.subscribe({ next: x => this.set(x) });
                 }
                 render() {
                     return <div className="tundra">
                         <h2 ref={bind("innerHTML", prop(this, "title"))} />
                         {watch(prop(this, "appointments"), items => items &&
                             <ul>
                                 {watchFor(items, ({ id, title, getMembers }) =>
                                     <li>{title}
                                         <ul>
                                             {watchFor(getMembers(), ({ role, name, position }) =>
                                                 <li className={role}>{name}({position})</li>
                                             )}
                                         </ul>
                                         <div>
                                             <Button onClick={() => this._onAddMemberClick(id)}>Add member</Button>
+                                            <Button onClick={() => this._onRemoveAppointmentClick(id)}>Remove appointment</Button>
                                         </div>
                                     </li>
                                 )}
                             </ul>
                         )}
                         <NewAppointment/>
                         <div ref={attach(this, "toolbarNode")}>
                             <Button onClick={this._onAddAppointmentClick}>Add new appointment</Button>
                         </div>
                     </div>;
                 }
                 load() {
+                    trace.log("Loading data");
                     this.model.load();
                 }
                 private readonly _onAddMemberClick = (appointmentId: string) => {
                     this.model.addMember(appointmentId, {
                         email: "some-mail",
                         name: "Member Name",
                         position: "Member position",
                         role: "participant"
                     });
                 };
+                private readonly _onRemoveAppointmentClick = (appointmentId: string) => {
+                    this.model.removeAppointment(appointmentId);
+                };
                 private readonly _onAddAppointmentClick = () => {
                     this.model.addAppointment("Appointment", new Date, 30);
                 };
             }

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