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

              *
              * 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

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

             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 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))
                     }
                 }
+                /** 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() {

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

             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";
                 private _ct = Cancellation.none;
+                private _priority = 0;
                 constructor({ subject, component, animate, animateIn, animateOut }: WatchForRenditionAttrs<T>) {
                     super();
                     argumentNotNull(component, "component");
                 }
                 protected _create() {
+                    this._priority = getPriority() + 1;
                     const scope = getScope();
                     scope.own(() => {
                         this._itemRenditions.forEach(safeDestroy);
                     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
+                    // don't render destroyed rendition
-                    const beginRender = await scheduleRender();
+                    if (this._ct.isRequested())
-                    const endRender = beginRender();
+                        return;
-                    try {
-                        // 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>) => {
                     const animate = _animate && prevIndex !== newIndex;

djx/src/main/ts/tsx/WatchRendition.ts +27 -32

-            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 _ct = Cancellation.none;
+                private _priority = 0;
                 constructor(component: (arg: T) => unknown, subject: Subscribable<T>) {
                     super();
                     argumentNotNull(component, "component");
                 protected _create() {
                     const scope = getScope();
+                    this._priority = getPriority() + 1;
                     scope.own(() => {
                         this._scope.destroy();
                         destroy(this._node);
                     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();
+                    // 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 = getItemDom(this._renderJob ? this._component(this._renderJob.value) : undefined);
+                    const node = getItemDom(this._renderJob ? this._component(this._renderJob.value) : undefined);
-                        // 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)
-                            this._scope.own(() => pending.forEach(destroy));
-                        this._renderJob = undefined;
+                    if (pending.length)
-                    } finally {
+                        this._scope.own(() => pending.forEach(destroy));
-                        endRender();
+                    this._renderJob = undefined;
+                };
                 protected _getDomNode() {
                     if (!this._node)

djx/src/main/ts/tsx/render.ts +213 -79

@@ -1,5 +1,4
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";
@@ -9,108 +8,223 const trace = TraceSource.get(mid);
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++;	81	const prev = _context;
76	const renderId = _renderId ++;	82	const captured = _context = { scope, priority, hooks: [] };
77	trace.debug("scheduleRender [{0}], pending = {1}", renderId, _renderCount);	83	return () => {
78	if (_renderCount === 1)	84	if (_context !== captured)
79	onRendering();	85	trace.error("endRender mismatched beginRender call");
80
81	await Promise.resolve();
82		86
83	return () => {	87	const { hooks } = _context;
84	trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount);	88	if (hooks)
85	const prev = _context;	89	hooks.forEach(guard);
86		90
87	_context = {	91	_context = prev;
88	scope,
89	hooks: []
90	};
91	return endRender(prev, _context, renderId);
92	};	92	};
93	};	93	};
94		94
95	/**	95	/**
96	* Completes render operation	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.
97	*/	101	*/
98	const endRender = (prev: Context, current: Context, renderId: number) => () => {	102	const startRender = () => {
99	if (_context !== current)	103	_renderCount++;
100	trace.error("endRender mismatched beginRender call");	104	if (_renderCount === 1)
		105	onRendering();
101		106
102	const { hooks } = _context;	107	return _renderId++;
103	if (hooks)	108	};
104	hooks.forEach(guard);
105		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");
@@ -127,6 +241,7 const onRendered = () => {
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);
@@ -134,6 +249,12 export const whenRendered = () => new Pr
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)
@@ -142,6 +263,16 export const renderHook = (hook: () => v
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)
@@ -152,21 +283,24 export const refHook = <T>(value: T, ref
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

playground/src/main/ts/model/MainContext.ts +21 -3

@@ -41,16 +41,34 export class MainContext implements IDes
41	);	41	);
42	}	42	}
43		43
		44	async removeAppointment(appointmentId: string) {
		45	await delay(10);
		46	this._members.query({ appointmentId })
		47	.map(m => this._members.getIdentity(m))
		48	.forEach(id => this._members.remove(id));
		49	this._appointments.remove(appointmentId);
		50	}
		51
44	async load() {	52	async load() {
45	await ~~Promise~~.~~resolve~~();	53	await delay(10);
46	for (let i = 0; i < 2; i++) {	54	for (let i = 0; i < 5; i++) {
47	const id = Uuid();	55	const id = Uuid();
48	this._appointments.add({	56	this._appointments.add({
49	id,	57	id,
50	startAt: new Date(),	58	startAt: new Date(),
51	duration: 30,	59	duration: 30,
52	title: `Hello ${i+1}`	60	title: `Hello ${i + 1}`
53	});	61	});
		62
		63	for (let ii = 0; ii < 3; ii++)
		64
		65	this._members.add({
		66	appointmentId: id,
		67	email: "some@no.mail",
		68	name: `Peter ${ii}`,
		69	position: "Manager",
		70	role: "participant"
		71	}, { id: Uuid() });
54	}	72	}
55	}	73	}
56		74

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

                     .catch(error(trace));
                 }
+                removeAppointment(appointmentId: string)  {
+                    this._context.removeAppointment(appointmentId).catch(error(trace));
+                }
                 load() {
                     this._context.load().catch(error(trace));

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 { 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) {
                                         </ul>
                                         <div>
                                             <Button onClick={() => this._onAddMemberClick(id)}>Add member</Button>
+                                            <Button onClick={() => this._onRemoveAppointmentClick(id)}>Remove appointment</Button>
                                         </div>
                                     </li>
                                 )}
                 }
                 load() {
+                    trace.log("Loading data");
                     this.model.load();
                 }
                     });
                 };
+                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