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

             {
                 "java.configuration.updateBuildConfiguration": "automatic",
                 "files.exclude": {
                     "**/.classpath": true,
                     "**/.project": true,
                     "**/.settings": true,
                     "**/.factorypath": true
                 },
                 "cSpell.words": [
                     "dijit",
                     "djbase",
-                    "djclass"
+                    "djclass",
+                    "Unsubscribable"
                 ]
             }

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

             import { Cancellation } from "@implab/core-amd/Cancellation";
             import { ICancellation } from "@implab/core-amd/interfaces";
             /**
              * The interface for the consumer of an observable sequence
              */
             export interface Observer<T> {
                 /**
                  * Called for the next element in the sequence
                  */
                 next: (value: T) => void;
                 /**
                  * Called once when the error occurs in the sequence.
                  */
                 error: (e: unknown) => void;
                 /**
                  * Called once at the end of the sequence.
                  */
                 complete: () => void;
             }
             /**
              * The group of functions to feed an observable. These methods are provided to
              * the producer to generate a stream of events.
              */
             export type Sink<T> = {
                 /**
                  * Call to send the next element in the sequence
                  */
                 next: (value: T) => void;
                 /**
                  * Call to notify about the error occurred in the sequence.
                  */
                 error: (e: unknown) => void;
                 /**
                  * Call to signal the end of the sequence.
                  */
                 complete: () => void;
                 /**
                  * Checks whether the sink is accepting new elements. It's safe to
                  * send elements to the closed sink.
                  */
                 isClosed: () => boolean;
             };
             export type Producer<T> = (sink: Sink<T>) => (void | (() => void));
             export interface Unsubscribable {
                 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> {
                 subscribe(consumer: Partial<Observer<T>>): Unsubscribable;
             }
             export type AccumulatorFn<T, A> = (acc: A, value: T) => A;
             /** The observable source of items. */
             export interface Observable<T> extends Subscribable<T> {
                 /** Transforms elements of the sequence with the specified mapper
                  *
                  * @param mapper The mapper used to transform the values
                  */
                 map<T2>(mapper: (value: T) => T2): Observable<T2>;
                 /** Filters elements of the sequence. The resulting sequence will
                  * contain only elements which match the specified predicate.
                  *
                  * @param predicate The filter predicate.
                  */
                 filter(predicate: (value: T) => boolean): Observable<T>;
                 /** Applies accumulator to each value in the sequence and
                  * emits the accumulated value for each source element
                  *
                  * @param accumulator
                  * @param initial
                  */
                 scan<A>(accumulator: AccumulatorFn<T, A>, initial: A): Observable<A>;
                 scan(accumulator: AccumulatorFn<T, T>): Observable<T>;
                 /** Applies accumulator to each value in the sequence and
                  * emits the accumulated value at the end of the sequence
                  *
                  * @param accumulator
                  * @param initial
                  */
                 reduce<A>(accumulator: AccumulatorFn<T, A>, initial: A): Observable<A>;
                 reduce(accumulator: AccumulatorFn<T, T>): Observable<T>;
                 /** Concatenates the specified sequences with this observable
                  *
                  * @param seq sequences to concatenate with the current observable
                  */
                 cat(...seq: Subscribable<T>[]): Observable<T>;
                 /** Pipes the specified operator to produce the new observable
                  * @param op The operator which consumes this observable and produces a new one
                  */
                 pipe<U>(op: (source: Observable<T>) => Producer<U>): Observable<U>;
                 /** Waits for the next event to occur and returns a promise for the next value
                  * @param ct Cancellation token to
                 */
                 next(ct?: ICancellation): Promise<T>;
             }
             const noop = () => { };
             const sink = <T>(consumer: Partial<Observer<T>>) => {
                 const { next, error, complete } = consumer;
                 return {
                     next: next ? next.bind(consumer) : noop,
                     error: error ? error.bind(consumer) : noop,
                     complete: complete ? complete.bind(consumer) : noop,
                     isClosed: () => false
                 };
             };
             /** Wraps the producer to handle tear down logic and subscription management
              *
              * @param producer The producer to wrap
              * @returns The wrapper producer
              */
             const fuse = <T>(producer: Producer<T>) => ({ next, error, complete }: Sink<T>) => {
                 let done = false;
                 let cleanup = noop;
                 const _fin = <A extends unknown[]>(fn: (...args: A) => void) =>
                     (...args: A) => done ?
                         void (0) :
                         (done = true, cleanup(), fn(...args));
                 const safeSink = {
                     next: (value: T) => { !done && next(value); },
                     error: _fin(error),
                     complete: _fin(complete),
                     isClosed: () => done
                 };
                 cleanup = producer(safeSink) ?? noop;
                 return done ?
                     (cleanup(), noop) :
                     _fin(noop);
             };
             const _observe = <T>(producer: Producer<T>): Observable<T> => ({
                 subscribe: (consumer: Partial<Observer<T>>) => ({
                     unsubscribe: producer(sink(consumer)) ?? noop
                 }),
                 map: (mapper) => _observe(({ next, ...rest }) =>
                     producer({
                         next: next !== noop ? (v: T) => next(mapper(v)) : noop,
                         ...rest
                     })
                 ),
                 filter: (predicate) => _observe(({ next, ...rest }) =>
                     producer({
                         next: next !== noop ? (v: T) => predicate(v) ? next(v) : void (0) : noop,
                         ...rest
                     })
                 ),
                 scan: <A>(...args: [AccumulatorFn<T, A>, A] | [AccumulatorFn<T, T>]) => _observe<T | A>(({ next, ...rest }) => {
                     if (args.length === 1) {
                         const [accumulator] = args;
                         let _acc: T;
                         let index = 0;
                         return producer({
                             next: next !== noop ? (v: T) => next(index++ === 0 ? _acc = v : _acc = accumulator(_acc, v)) : noop,
                             ...rest
                         });
                     } else {
                         const [accumulator, initial] = args;
                         let _acc = initial;
                         return producer({
                             next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop,
                             ...rest
                         });
                     }
                 }),
                 reduce: <A>(...args: [AccumulatorFn<T, A>, A] | [AccumulatorFn<T, T>]) => _observe<T | A>(({ next, complete, error, ...rest }) => {
                     if (args.length === 1) {
                         const [accumulator] = args;
                         let _acc: T;
                         let index = 0;
                         return producer({
                             next: next !== noop ? (v: T) => {
                                 _acc = index++ === 0 ? v : accumulator(_acc, v);
                             } : noop,
                             complete: () => {
                                 if (index === 0) {
                                     error(new Error("The sequence can't be empty"));
                                 } else {
                                     next(_acc);
                                     complete();
                                 }
                             },
                             error,
                             ...rest
                         });
                     } else {
                         const [accumulator, initial] = args;
                         let _acc = initial;
                         return producer({
                             next: next !== noop ? (v: T) => {
                                 _acc = accumulator(_acc, v);
                             } : noop,
                             complete: () => {
                                 next(_acc);
                                 complete();
                             },
                             error,
                             ...rest
                         });
                     }
                 }),
                 cat: (...seq) => _observe(({ next, complete: final, ...rest }) => {
                     let cleanup: () => void;
                     const complete = () => {
                         const continuation = seq.shift();
                         if (continuation) {
                             // if we have a next sequence, subscribe to it
                             const subscription = continuation.subscribe({ next, complete, ...rest });
                             cleanup = subscription.unsubscribe.bind(subscription);
                         } else {
                             // otherwise notify the consumer about completion
                             final();
                         }
                     };
                     cleanup = producer({ next, complete, ...rest }) ?? noop;
                     return () => cleanup();
                 }),
                 pipe: <U>(op: (source: Observable<T>) => Producer<U>) => observe(op(_observe(producer))),
                 next: (ct?: ICancellation) => {
                     const _ct = ct ?? Cancellation.none;
                     return new Promise<T>((resolve, reject) => {
                         // wrap the producer to handle only single event
                         const once = fuse<T>(({ next, complete, error, isClosed }) => {
                             const h = _ct.register(error);
                             // is the _ct fires it will call error() and isClosed() will return true
                             const cleanup = !isClosed() ?
                                 producer({
                                     next: v => (next(v), complete()),
                                     complete: () => error(new Error("The sequence is empty")),
                                     error,
                                     isClosed
                                 }) ?? noop :
                                 noop;
                             return () => {
                                 h.destroy();
                                 cleanup();
                             };
                         });
                         once({
                             next: resolve,
                             error: reject,
                             complete: noop,
                             isClosed: () => false
                         });
                     });
                 }
             });
             export const observe = <T>(producer: Producer<T>) => _observe(fuse(producer));
             export const streamArray = <T>(items: T[]) => _observe<T>(
                 ({ next, complete }) => (
                     items.forEach(next),
                     complete()
                 )
             );
             export const streamPromise = <T>(promise: PromiseLike<T>) => observe<T>(
                 ({next, error, complete}) => void promise.then(v => (next(v), complete()), error)
             );
             export const of = <T>(...items: T[]) => _observe<T>(
                 ({ next, complete }) => (
                     items.forEach(next),
                     complete()
                 )
             );
             export const empty = _observe<never>(({ complete }) => complete());

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

             import { PromiseOrValue } from "@implab/core-amd/interfaces";
             import { isPromise } from "@implab/core-amd/safe";
             import { observe, Observable } from "./observable";
             export interface OrderedUpdate<T> {
                 /** The item is being updated */
                 readonly item: T;
                 /** The previous index of the item, -1 in case it is inserted */
                 readonly prevIndex: number;
                 /** The new index of the item, -1 in case it is deleted */
                 readonly newIndex: number;
             }
             export type QueryResults<T> = Observable<OrderedUpdate<T>>;
             interface DjObservableResults<T> {
                 /**
                  * Allows observation of results
                  */
                 observe(listener: (object: T, previousIndex: number, newIndex: number) => void, includeUpdates?: boolean): {
                     remove(): void;
                 };
             }
-            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);
                             } else {
                                 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 {
                                 complete();
                             }
                         } catch (err) {
                             error(err);
                         }
                     });
                 };

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

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

djx/src/main/ts/tsx/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;
             }
             export class Scope implements IDestroyable, IScope {
                 private readonly _cleanup: (() => void)[] = [];
                 static readonly dummy: IScope = { own() { } };
                 own(target: (() => void) | IDestroyable | IRemovable | Unsubscribable) {
                     if (target instanceof Function) {
                         this._cleanup.push(target);
                     } else if (isDestroyable(target)) {
                         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());
                     }
                 }
                 clean() {
                     const guard = (cb: () => void) => {
                         try {
                             cb();
                         } catch {
                             // guard
                         }
                     };
                     this._cleanup.forEach(guard);
                     this._cleanup.length = 0;
                 }
                 destroy() {
                     this.clean();
                 }
             }

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

             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 { collectNodes, destroy as safeDestroy, isDocumentFragmentNode, isElementNode, isMounted, placeAt, startupWidgets } from "./traits";
             import { IDestroyable } from "@implab/core-amd/interfaces";
             import { play } from "../play";
             import * as fx from "dojo/fx";
-            import { isSubsribable, Subscribable } from "../observable";
+            import { isSubscribable, Subscribable } from "../observable";
-            import { isObservableResults, OrderedUpdate } from "../store";
+            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>>;
+                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;
                 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;
                     this._animateIn = animateIn ?? fadeIn;
                     this._animateOut = animateOut ?? fadeOut;
                 }
                 protected _create() {
                     const scope = getScope();
                     scope.own(() => {
                         this._itemRenditions.forEach(safeDestroy);
                         safeDestroy(this._node);
                     });
                     const result = this._subject;
                     if (result) {
-                        if (isSubsribable<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++)
                                 this._onItemUpdated({ item: result[i], prevIndex: -1, newIndex: i, animate: this._animate });
                         }
                     }
                     this._ct = new Cancellation(cancel => scope.own(cancel));
                 }
                 private readonly _onItemUpdated = (item: RenderTask<T>) => {
                     if (!this._renderTasks.length) {
                         // schedule a new job
                         this._renderTasks.push(item);
                         this._render().catch(e => trace.error(e));
                     } else {
                         // update existing job
                         this._renderTasks.push(item);
                     }
                 };
                 private async _render() {
                     // fork
-                    await Promise.resolve();
+                    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 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 +8 -7

             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";
             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;
                 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();
                     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));
                     } else {
                         // update existing job
                         this._renderJob = { value };
                     }
                 };
                 private async _render() {
-                    // fork
+                    const beginRender = await scheduleRender(this._scope);
-                    await Promise.resolve();
+                    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 = 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
                         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 +88 -5

             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { isPromise } from "@implab/core-amd/safe";
             import { id as mid } from "module";
             import { IScope, Scope } from "./Scope";
             import { isNode, isRendition, isWidget } from "./traits";
             const trace = TraceSource.get(mid);
             interface Context {
-                scope: IScope;
+                readonly scope: IScope;
-                hooks?: (() => void)[];
+                readonly hooks?: (() => void)[];
             }
             let _context: Context = {
                 scope: Scope.dummy
             };
+            let _renderCount = 0;
+            let _renderId = 1;
+            let _renderedHooks: (() => void)[] = [];
             const guard = (cb: () => unknown) => {
                 try {
                     const result = cb();
                     if (isPromise(result)) {
                         const warn = (ret: unknown) => trace.error("The callback {0} competed asynchronously. result = {1}", cb, ret);
                         result.then(warn, warn);
                     }
                 } catch (e) {
                     trace.error(e);
                 }
             };
-            export const beginRender = (scope: IScope = getScope()) => {
+            /**
+             *
+             * @param scope
+             * @returns
+             */
+            export const beginRender = (scope = getScope()) => {
                 const prev = _context;
+                _renderCount++;
+                const renderId = _renderId++;
+                trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount);
+                if (_renderCount === 1)
+                    onRendering();
                 _context = {
                     scope,
                     hooks: []
                 };
-                return endRender(prev);
+                return endRender(prev, _context, renderId);
+            };
+            /**
+             * Method for a deferred rendering. Returns a promise with `beginRender()` function.
+             * Call to `scheduleRender` will save the current context, and will increment pending
+             * operations counter.
+             *
+             * @example
+             *
+             * const begin = await scheduleRender();
+             * const end = begin();
+             * try {
+             *     // do some DOM manipulations
+             * } finally {
+             *     end();
+             * }
+             *
+             * @param scope
+             * @returns
+             */
+            export const scheduleRender = async (scope = getScope()) => {
+                const prev = _context;
+                _renderCount++;
+                const renderId = _renderId ++;
+                trace.debug("scheduleRender [{0}], pending = {1}", renderId, _renderCount);
+                if (_renderCount === 1)
+                    onRendering();
+                await Promise.resolve();
+                return () => {
+                    trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount);
+                    _context = {
+                        scope,
+                        hooks: []
+                    };
+                    return endRender(prev, _context, renderId);
+                };
             };
             /**
              * Completes render operation
              */
-            const endRender = (prev: Context) => () => {
+            const endRender = (prev: Context, current: Context, renderId: number) => () => {
+                if (_context !== current)
+                    trace.error("endRender mismatched beginRender call");
                 const { hooks } = _context;
                 if (hooks)
                     hooks.forEach(guard);
+                _renderCount--;
                 _context = prev;
+                trace.debug("endRender [{0}], pending = {1}", renderId, _renderCount);
+                if (_renderCount === 0)
+                    onRendered();
             };
+            // called when the first beginRender is called for this iteration
+            const onRendering = () => {
+                setTimeout(() => {
+                    if (_renderCount !== 0)
+                        trace.error("Rendering tasks aren't finished, currently running = {0}", _renderCount);
+                });
+            };
+            // called when all render operations are complete
+            const onRendered = () => {
+                _renderedHooks.forEach(guard);
+                _renderedHooks = [];
+            };
+            export const whenRendered = () => new Promise<void>((resolve) => {
+                if (_renderCount)
+                    _renderedHooks.push(resolve);
+                else
+                    resolve();
+            });
             export const renderHook = (hook: () => void) => {
                 const { hooks } = _context;
                 if (hooks)
                     hooks.push(hook);
                 else
                     guard(hook);
             };
             export const refHook = <T>(value: T, ref: JSX.Ref<T>) => {
                 const { hooks, scope } = _context;
                 if (hooks)
                     hooks.push(() => ref(value));
                 else
                     guard(() => ref(value));
                 scope.own(() => ref(undefined));
             };
             /** Returns the current scope */
             export const getScope = () => _context.scope;
             /** Schedules the rendition to be rendered to the DOM Node
              * @param rendition The rendition to be rendered
              * @param scope The scope
              */
             export const render = (rendition: unknown, scope = Scope.dummy) => {
                 const complete = beginRender(scope);
                 try {
                     return getItemDom(rendition);
                 } finally {
                     complete();
                 }
             };
             /** Renders DOM element for different types of the argument. */
             export const getItemDom = (v: unknown) => {
                 if (typeof v === "string" || typeof v === "number" || v instanceof RegExp || v instanceof Date) {
                     // primitive types converted to the text nodes
                     return document.createTextNode(v.toString());
                 } else if (isNode(v)) {
                     // nodes are kept as is
                     return v;
                 } else if (isRendition(v)) {
                     // renditions are instantiated
                     return v.getDomNode();
                 } else if (isWidget(v)) {
                     // widgets are converted to it's markup
                     return v.domNode;
                 } else if (typeof v === "boolean" || v === null || v === undefined) {
                     // null | undefined | boolean are removed
                     return document.createDocumentFragment();
                 } else if (v instanceof Array) {
                     // arrays will be translated to document fragments
                     const fragment = document.createDocumentFragment();
                     v.map(item => getItemDom(item))
                         .forEach(node => fragment.appendChild(node));
                     return fragment;
                 } else {
                     // bug: explicit error otherwise
                     throw new Error(`Invalid parameter: ${String(v)}`);
                 }
             };

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

             import MainWidget from "./view/MainWidget";
             import "@implab/djx/css!dojo/resources/dojo.css";
             import "@implab/djx/css!dijit/themes/dijit.css";
             import "@implab/djx/css!dijit/themes/tundra/tundra.css";
+            import { TraceSource } from "@implab/core-amd/log/TraceSource";
+            import { ConsoleLogger } from "@implab/core-amd/log/writers/ConsoleLogger";
+            const logger = new ConsoleLogger();
+            TraceSource.on(source => {
+                source.level = 400;
+                logger.writeEvents(source.events);
+            });
             const w = new MainWidget();
             w.placeAt(document.body);
             w.load();

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

             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 load() {
+                    await Promise.resolve();
+                    for (let i = 0; i < 2; i++) {
+                        const id = Uuid();
+                        this._appointments.add({
+                            id,
+                            startAt: new Date(),
+                            duration: 30,
+                            title: `Hello ${i+1}`
+                        });
+                    }
+                }
                 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 +12 -1

             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, []).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() {
                     this._context.destroy();
                 }
             }

playground/src/tsconfig.json +1 -1

             {
                 "compilerOptions": {
                     "moduleResolution": "node",
                     "experimentalDecorators": true,
                     "module": "AMD",
                     "jsx": "react",
                     "jsxFactory": "createElement",
                     "strict": true,
                     "types": [
                         "requirejs",
                         "@implab/djx",
                         "@implab/dojo-typings"
                     ],
                     "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