implab/implabjs-djx Commit - r102:c65ea2350b1a

`Subscribable` is made compatible with rxjs, added map, filter and scan...

cin -

r102:c65ea2350b1a v1.3

parent child

Context file:

r102:c65ea2350b1a

Expand all files

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

djx/src/test/ts/declare-tests.ts created 644 +13 0

@@ -0,0 +1,13
	1	import * as t from "tap";
	2	import { Baz } from "./mock/Baz";
	3
	4	t.comment("Declare tests");
	5
	6	const baz = new Baz();
	7
	8	const data: string[] = [];
	9	baz.writeHello(data);
	10	t.pass("Test complete");
	11
	12	// tslint:disable-next-line: no-console
	13	t.comment(data.join("\n"));

djx/src/test/ts/observable-tests.ts created 644 +52 0

@@ -0,0 +1,52
	1	import { observe } from "./observable";
	2	import * as t from "tap";
	3
	4	const subj1 = observe<number>(({ next, complete }) => {
	5	next(1);
	6	complete();
	7	next(2);
	8	});
	9
	10	const consumer1 = {
	11	sum: 0,
	12	next(v: number) {
	13	this.sum += v;
	14	}
	15	}
	16
	17	subj1.subscribe(consumer1);
	18	t.equal(consumer1.sum, 1, "Should get only one value");
	19
	20	subj1.subscribe(consumer1);
	21	t.equal(consumer1.sum, 2, "Should get the value again");
	22
	23	const consumer2 = {
	24	value: 0,
	25	completed: false,
	26	next(v: number) { this.value = v; },
	27	complete() { this.completed = true; }
	28	};
	29
	30	let maps = 0;
	31
	32	subj1
	33	.map(v => {
	34	t.comment("map1: " + v * 2);
	35	maps++;
	36	return v * 2;
	37	})
	38	.map (v => {
	39	t.comment("map2: " + v * 2);
	40	maps++;
	41	return v * 2;
	42	})
	43	.map(v => {
	44	t.comment("map3: " + v * 2);
	45	maps++;
	46	return v * 2
	47	})
	48	.subscribe(consumer2);
	49
	50	t.equal(consumer2.value, 8, "Should map");
	51	t.equal(maps, 3, "The map chain should not be executed after completion");
	52	t.ok(consumer2.completed, "The completion signal should pass through"); No newline at end of file

playground/src/test/ts/index.ts created 644 0 0

NO CONTENT: new file 100644

djx/package-lock.json 0 0

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

djx/package.json +4 -2

                     "@types/chai": "4.1.3",
                     "@types/requirejs": "2.1.31",
                     "@types/yaml": "1.2.0",
+                    "@types/tap": "15.0.7",
                     "dojo": "1.16.0",
                     "@implab/dojo-typings": "1.0.0",
                     "eslint": "6.8.0",
                     "requirejs": "2.3.6",
                     "tslint": "^6.1.3",
-                    "typescript": "4.7.4",
+                    "typescript": "4.8.2",
-                    "yaml": "~1.7.2"
+                    "yaml": "~1.7.2",
+                    "tap": "16.3.0"
                 }
             }

djx/src/main/ts/observable.ts +129 -16

@@ -1,34 +1,147
1	import { IDestroyable } from "@implab/core-amd/interfaces";	1	/**
		2	* The interface for the consumer of an observable sequence
		3	*/
		4	export interface Observer<T> {
		5	/**
		6	* Called for the next element in the sequence
		7	*/
		8	next: (value: T) => void;
2		9
3	export interface Sink<T> {	10	/**
4	next: (value: T) => void;	11	* Called once when the error occurs in the sequence.
		12	*/
5	error: (e: unknown) => void;	13	error: (e: unknown) => void;
		14
		15	/**
		16	* Called once at the end of the sequence.
		17	*/
6	complete: () => void;	18	complete: () => void;
7	}	19	}
8		20
9	export type Consumer<T> = Partial<Sink<T>>;	21	/**
		22	* The group of functions to feed an observable. This methods are provided to
		23	* the producer to generate a stream of events.
		24	*/
		25	export type Sink<T> = {
		26	[k in keyof Observer<T>]: (this: void, ...args: Parameters<Observer<T>[k]>) => void;
		27	};
10		28
11	export type Producer<T> = (sink: Sink<T>) => (void \| (() => void));	29	export type Producer<T> = (sink: Sink<T>) => (void \| (() => void));
12		30
13	export interface ~~Observable~~<T> {	31	export interface Unsubscribable {
14	on(consumer: Partial<Sink<T>>): IDestroyable;	32	unsubscribe(): void;
		33	}
		34
		35	export const isUnsubsribable = (v: unknown): v is Unsubscribable =>
		36	v !== null && v !== undefined && typeof (v as Unsubscribable).unsubscribe === "function";
		37
		38	export const isSubsribable = (v: unknown): v is Subscribable<unknown> =>
		39	v !== null && v !== undefined && typeof (v as Subscribable<unknown>).subscribe === "function";
		40
		41	export interface Subscribable<T> {
		42	subscribe(consumer: Partial<Observer<T>>): Unsubscribable;
		43	}
		44
		45	/** The observable source of items. */
		46	export interface Observable<T> extends Subscribable<T> {
		47	/** Transforms elements of the sequence with the specified mapper
		48	*
		49	* @param mapper The mapper used to transform the values
		50	*/
		51	map<T2>(mapper: (value: T) => T2): Observable<T2>;
		52
		53	/** Filters elements of the sequence. The resulting sequence will
		54	* contain only elements which match the specified predicate.
		55	*
		56	* @param predicate The filter predicate.
		57	*/
		58	filter(predicate: (value: T) => boolean): Observable<T>;
		59
		60	/** Applies accumulator to each value in the sequence and
		61	* emits the accumulated value for each source element
		62	*
		63	* @param accumulator
		64	* @param initial
		65	*/
		66	scan<A>(accumulator: (acc: A, value: T) => A, initial: A): Observable<A>;
15	}	67	}
16		68
17	const noop = () => {};	69	const noop = () => { };
18		70
19	const sink = <T>(consumer: ~~Consum~~er<T>) => {	71	const sink = <T>(consumer: Partial<Observer<T>>) => {
20	const { next = ~~noop~~, error = ~~noop~~, complete = ~~noop~~ } = consumer;	72	const { next, error, complete } = consumer;
21	let done = false;
22
23	return {	73	return {
24	next: (value: T) => !done && next(value),	74	next: next ? next.bind(consumer) : noop,
25	error: (e: unknown) => !done && (done = true, error(e)),	75	error: error ? error.bind(consumer) : noop,
26	complete: () => !done && (done = true, complete())	76	complete: complete ? complete.bind(consumer) : noop
		77	}
27	};	78	};
		79
		80	const fuse = <T>({ next, error, complete }: Sink<T>) => {
		81	let done = false;
		82	return {
		83	next: (value: T) => { !done && next(value) },
		84	error: (e: unknown) => { !done && (done = true, error(e)) },
		85	complete: () => { !done && (done = true, complete()) }
		86	}
28	}	87	}
29		88
30	~~export~~ const observe = <T>(producer: Producer<T>) : Observable<T> => ({	89	const _observe = <T>(producer: Producer<T>): Observable<T> => ({
31	on: (consumer: ~~Consum~~er<T>) => ({	90	subscribe: (consumer: Partial<Observer<T>>) => ({
32	~~destroy~~: producer(sink(consumer)) ?? noop	91	unsubscribe: producer(sink(consumer)) ?? noop
		92	}),
		93	map: (mapper) => _observe(({ next, error, complete }) =>
		94	producer({
		95	next: next !== noop ? (v: T) => next(mapper(v)) : noop,
		96	error,
		97	complete
		98	})
		99	),
		100	filter: (predicate) => _observe(({ next, error, complete }) =>
		101	producer({
		102	next: next !== noop ?
		103	(v: T) => predicate(v) ? next(v) : void(0) : noop,
		104	error,
		105	complete
		106	})
		107	),
		108	scan: (accumulator, initial) => _observe(({ next, error, complete }) => {
		109	let _acc = initial;
		110	return producer({
		111	next: next !== noop ?
		112	(v: T) => next(_acc = accumulator(_acc, v)) : noop,
		113	error,
		114	complete
		115	});
33	})	116	})
34	});	117	});
		118
		119	export const observe = <T>(producer: Producer<T>): Observable<T> => ({
		120	subscribe: (consumer: Partial<Observer<T>>) => ({
		121	unsubscribe: producer(fuse(sink(consumer))) ?? noop
		122	}),
		123	map: (mapper) => _observe(({ next, error, complete }) =>
		124	producer(fuse({
		125	next: next !== noop ?
		126	(v: T) => next(mapper(v)) : noop,
		127	error,
		128	complete
		129	}))
		130	),
		131	filter: (predicate) => _observe(({ next, error, complete }) =>
		132	producer(fuse({
		133	next: next !== noop ?
		134	(v: T) => predicate(v) ? next(v) : void (0) : noop,
		135	error,
		136	complete
		137	}))
		138	),
		139	scan: (accumulator, initial?) => observe(({ next, error, complete }) => {
		140	let _acc = initial;
		141	return producer(fuse({
		142	next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop,
		143	error,
		144	complete
		145	}));
		146	})
		147	});

djx/src/main/ts/tsx.ts +70 -10

@@ -1,13 +1,15
1	import { Constructor } from "@implab/core-amd/interfaces";	1	import { Constructor } from "@implab/core-amd/interfaces";
2	import { HtmlRendition } from "./tsx/HtmlRendition";	2	import { HtmlRendition } from "./tsx/HtmlRendition";
3	import { WidgetRendition } from "./tsx/WidgetRendition";	3	import { WidgetRendition } from "./tsx/WidgetRendition";
4	import { isWidgetConstructor, Rendition } from "./tsx/traits";	4	import { isElementNode, isWidget, isWidgetConstructor, Rendition } from "./tsx/traits";
5	import { FunctionRendition } from "./tsx/FunctionRendition";	5	import { FunctionRendition } from "./tsx/FunctionRendition";
6	import Stateful = require("dojo/Stateful");	6	import Stateful = require("dojo/Stateful");
7	import _WidgetBase = require("dijit/_WidgetBase");	7	import _WidgetBase = require("dijit/_WidgetBase");
8	import { DjxWidgetBase } from "./tsx/DjxWidgetBase";	8	import { DjxWidgetBase } from "./tsx/DjxWidgetBase";
9	import { WatchRendition } from "./tsx/WatchRendition";	9	import { WatchRendition } from "./tsx/WatchRendition";
10	import { observe } from "./observable";	10	import { Observable, observe, Subscribable } from "./observable";
		11	import djAttr = require("dojo/dom-attr");
		12	import djClass = require("dojo/dom-class");
11		13
12	export function createElement<T extends Constructor \| string \| ((props: any) => Element)>(elementType: T, ...args: any[]): Rendition {	14	export function createElement<T extends Constructor \| string \| ((props: any) => Element)>(elementType: T, ...args: any[]): Rendition {
13	if (typeof elementType === "string") {	15	if (typeof elementType === "string") {
@@ -44,7 +46,8 export interface EventSelector {
44		46
45	export type DojoMouseEvent<T = any> = MouseEvent & EventSelector & EventDetails<T>;	47	export type DojoMouseEvent<T = any> = MouseEvent & EventSelector & EventDetails<T>;
46		48
47	type StatefulProps<T> = T extends Stateful<infer A> ? A : ~~never~~;	49	type StatefulProps<T> = T extends Stateful<infer A> ? A :
		50	T extends _WidgetBase ? T : never;
48		51
49		52
50	/**	53	/**
@@ -73,25 +76,82 export function watch<T extends Stateful
73	prop: K,	76	prop: K,
74	render: (model: StatefulProps<T>[K]) => any	77	render: (model: StatefulProps<T>[K]) => any
75	): Rendition;	78	): Rendition;
76	export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>(	79	export function watch<V>(subj: Subscribable<V>, render: (model: V) => unknown): Rendition;
77	target: T,	80	export function watch(
78	prop: K,	81	...args: [Stateful, string, (model: unknown) => unknown] \|
79	render: (model: StatefulProps<T>[K]) => any	82	[Subscribable<unknown>, (model: unknown) => unknown]
80	) {	83	) {
81		84	if (args.length === 3) {
		85	const [target, prop, render] = args;
82	return new WatchRendition(	86	return new WatchRendition(
83	render,	87	render,
84	observe(({next}) => {	88	observe(({next}) => {
85	const h = target.watch(	89	const h = target.watch<any>(
86	prop,	90	prop,
87	(_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)	91	(_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
88	);	92	);
89	next(target.get(prop));	93	next(target.get(prop));
90	return () => h.remove();	94	return () => h.remove();
91	})	95	})
92	)	96	);
		97	} else {
		98	const [subj, render] = args;
		99	return new WatchRendition(render, subj);
		100	}
93	}	101	}
94		102
		103	export const prop: {
		104	<T extends Stateful, K extends string & keyof StatefulProps<T>>(target: T, name: K): Observable<StatefulProps<T>[K]>;
		105	<T extends _WidgetBase, K extends keyof T>(target: T, name: K): Observable<T[K]>;
		106	} = (target: Stateful, name: string) => {
		107	return observe(({next}) => {
		108	const h = target.watch(
		109	name,
		110	(_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
		111	);
		112	next(target.get(name));
		113	return () => h.remove();
		114	})
		115	};
		116
		117	export const attach = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
		118
		119	export const bind = <K extends string, T>(attr: K, subj: Subscribable<T>) => {
		120	let h = { unsubscribe() { } };
		121
		122	return <E extends (HTMLElement & { [p in K]: T }) \| { set(name: K, value: T): void; }>(el: E \| undefined) => {
		123	if (el) {
		124	if (isElementNode(el)) {
		125	h = subj.subscribe({
		126	next: value => djAttr.set(el, attr, value)
		127	});
		128	} else {
		129	h = subj.subscribe({
		130	next: value => el.set(attr, value)
		131	});
		132	}
		133	} else {
		134	h.unsubscribe();
		135	}
		136	}
		137	};
		138
		139	export const toggleClass = (className: string, subj: Subscribable<boolean>) => {
		140	let h = { unsubscribe() { } };
		141	return (elOrWidget: HTMLElement \| _WidgetBase \| undefined) => {
		142	const el = isWidget(elOrWidget) ? elOrWidget.domNode : elOrWidget;
		143	if (el) {
		144	h = subj.subscribe({
		145	next: v => djClass.toggle(el, className, v)
		146	});
		147	} else {
		148	h.unsubscribe();
		149	}
		150	}
		151	}
		152
		153	export const all = <T, A extends JSX.Ref<T>[]>(...cbs: A): JSX.Ref<T> => (arg: T \| undefined) => cbs.forEach(cb => cb(arg));
		154
95	/** Decorates the method which will be registered as the handle for the specified event.	155	/** Decorates the method which will be registered as the handle for the specified event.
96	* This decorator can be applied to DjxWidgetBase subclass methods.	156	* This decorator can be applied to DjxWidgetBase subclass methods.
97	*	157	*

djx/src/main/ts/tsx/DjxWidgetBase.ts +16 -2

             import { djbase, djclass } from "../declare";
             import _WidgetBase = require("dijit/_WidgetBase");
             import _AttachMixin = require("dijit/_AttachMixin");
-            import { Rendition, isNode } from "./traits";
+            import { Rendition, isNode, isElementNode } from "./traits";
             import registry = require("dijit/registry");
             import on = require("dojo/on");
+            import { Scope } from "./Scope";
+            import { render } from "./render";
             // type Handle = dojo.Handle;
             type _super = {
                 startup(): void;
+                destroy(preserveDom?: boolean): void;
             };
             @djclass
             export abstract class DjxWidgetBase<Attrs = {}, Events = {}> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) {
+                private readonly _scope = new Scope();
                 buildRendering() {
-                    this.domNode = this.render().getDomNode();
+                    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
                     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/HtmlRendition.ts +5 -6

             import { argumentNotEmptyString } from "@implab/core-amd/safe";
             import { RenditionBase } from "./RenditionBase";
             import { placeAt } from "./traits";
-            import { IScope } from "./Scope";
+            import { getItemDom, refHook } from "./render";
-            import { getItemDom, renderHook } from "./render";
             export class HtmlRendition extends RenditionBase<Element> {
                 elementType: string;
                     this.elementType = elementType;
                 }
-                _addChild(child: unknown, scope: IScope): void {
+                _addChild(child: unknown): void {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     placeAt(getItemDom(child), this._element);
                 }
-                _create({ xmlns, ref, ...attrs }: { xmlns?: string, ref?: JSX.Ref<Element> }, children: unknown[], scope: IScope) {
+                _create({ xmlns, ref, ...attrs }: { xmlns?: string, ref?: JSX.Ref<Element> }, children: unknown[]) {
                     if (xmlns) {
                         this._element = document.createElementNS(xmlns, this.elementType);
                         this._element = djDom.create(this.elementType, attrs);
                     }
-                    children.forEach(v => this._addChild(v, scope));
+                    children.forEach(v => this._addChild(v));
                     const element =  this._element;
                     if (ref)
-                        renderHook(() => ref(element));
+                        refHook(element, ref);
                 }
                 _getDomNode() {

djx/src/main/ts/tsx/RenditionBase.ts +11 -14

-            import { isNull, mixin } from "@implab/core-amd/safe";
+            import { isPlainObject, DojoNodePosition, Rendition, isDocumentFragmentNode, placeAt, collectNodes, isMounted, startupWidgets } from "./traits";
-            import { isPlainObject, DojoNodePosition, Rendition, isDocumentFragmentNode, placeAt, collectNodes, autostartWidgets } from "./traits";
-            import { IScope } from "./Scope";
-            import { getScope } from "./render";
             export abstract class RenditionBase<TNode extends Node> implements Rendition<TNode> {
                 private _attrs = {};
                     if (this._created)
                         throw new Error("The Element is already created");
-                    if (isNull(v) || typeof v === "boolean")
+                    if (v === null || v === undefined || typeof v === "boolean")
                         // skip null, undefined, booleans ( this will work:  {value && <span>{value}</span>} )
                         return;
                     if (isPlainObject(v)) {
-                        mixin(this._attrs, v);
+                        this._attrs = {... this._attrs, ...v};
                     } else if (v instanceof Array) {
                         v.forEach(x => this.visitNext(x));
                     } else {
                     }
                 }
-                ensureCreated(scope: IScope) {
+                ensureCreated() {
                     if (!this._created) {
-                        this._create(this._attrs, this._children, scope);
+                        this._create(this._attrs, this._children);
                         this._children = [];
                         this._attrs = {};
                         this._created = true;
                 }
                 /** Creates DOM node if not created. No additional actions are taken. */
-                getDomNode(scope?: IScope) {
+                getDomNode() {
-                    this.ensureCreated(scope || getScope());
+                    this.ensureCreated();
                     return this._getDomNode();
                 }
                 placeAt(refNode: string | Node, position: DojoNodePosition = "last") {
                     const domNode = this.getDomNode();
-                    const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.children) : [domNode];
+                    const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.childNodes) : [domNode];
                     placeAt(domNode, refNode, position);
-                    startupPending.forEach(autostartWidgets);
+                    if (isMounted(startupPending[0]))
+                        startupPending.forEach(n => startupWidgets(n));
                 }
-                protected abstract _create(attrs: object, children: unknown[], scope: IScope): void;
+                protected abstract _create(attrs: object, children: unknown[]): void;
                 protected abstract _getDomNode(): TNode;
             }

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

             import { IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
             import { isDestroyable, isRemovable } from "@implab/core-amd/safe";
+            import { isUnsubsribable, Unsubscribable } from "../observable";
             export interface IScope {
-                own(target: (() => void) | IDestroyable | IRemovable): void;
+                own(target: (() => void) | IDestroyable | IRemovable | Unsubscribable): void;
             }
             export class Scope implements IDestroyable, IScope {
                 static readonly dummy: IScope = { own() { } };
-                own(target: (() => void) | IDestroyable | IRemovable) {
+                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)) {
+                        this._cleanup.push(() => target.unsubscribe());
                     }
                 }

djx/src/main/ts/tsx/WatchRendition.ts +58 -16

@@ -4,21 +4,26 import { argumentNotNull } from "@implab
4	import { getScope, render } from "./render";	4	import { getScope, render } from "./render";
5	import { RenditionBase } from "./RenditionBase";	5	import { RenditionBase } from "./RenditionBase";
6	import { Scope } from "./Scope";	6	import { Scope } from "./Scope";
7	import { ~~Observ~~able } from "../observable";	7	import { Subscribable } from "../observable";
8	import { destroy } from "./traits";	8	import { Cancellation } from "@implab/core-amd/Cancellation";
		9	import { collectNodes, destroy, isDocumentFragmentNode, isMounted, placeAt, startupWidgets } from "./traits";
9		10
10	const trace = TraceSource.get(mid);	11	const trace = TraceSource.get(mid);
11		12
12	export class WatchRendition<T> extends RenditionBase<Node> {	13	export class WatchRendition<T> extends RenditionBase<Node> {
13	private readonly _component: (arg: T) => unknown;	14	private readonly _component: (arg: T) => unknown;
14		15
15	private _node: Node;	16	private readonly _node: Node;
16		17
17	private readonly _scope = new Scope();	18	private readonly _scope = new Scope();
18		19
19	private readonly _subject: ~~Observ~~able<T>;	20	private readonly _subject: Subscribable<T>;
		21
		22	private _renderJob?: { value: T };
20		23
21	constructor(component: (arg: T) => unknown, subject: Observable<T>) {	24	private _ct = Cancellation.none;
		25
		26	constructor(component: (arg: T) => unknown, subject: Subscribable<T>) {
22	super();	27	super();
23	argumentNotNull(component, "component");	28	argumentNotNull(component, "component");
24		29
@@ -26,23 +31,60 export class WatchRendition<T> extends R
26		31
27	this._subject = subject;	32	this._subject = subject;
28		33
29	this._node = document.createComment("~~WatchRendition placeholder~~");	34	this._node = document.createComment("[Watch]");
30	}	35	}
31		36
32	protected _create(~~attrs~~: ~~object~~, ~~children~~: ~~any~~[]) {	37	protected _create() {
33	const scope = getScope();	38	const scope = getScope();
34	scope.own(~~this~~.~~_scope~~);	39	scope.own(() => {
35	scope.own(this._subject.on({ next: this._onValue }));	40	this._scope.destroy();
		41	destroy(this._node);
		42	});
		43	scope.own(this._subject.subscribe({ next: this._onValue }));
		44	this._ct = new Cancellation(cancel => scope.own(cancel));
		45	}
		46
		47	private _onValue = (value: T) => {
		48	if (!this._renderJob) {
		49	// schedule a new job
		50	this._renderJob = { value };
		51	this._render().catch(e => trace.error(e));
		52	} else {
		53	// update existing job
		54	this._renderJob = { value };
		55	}
36	}	56	}
37		57
38	private _onValue = (value: T) =>	58	private async _render() {
39	void this._render(value).catch( e => trace.error(e));	59	// fork
		60	await Promise.resolve();
		61	// don't render destroyed rendition
		62	if (this._ct.isRequested())
		63	return;
		64
		65	// remove all previous content
		66	this._scope.clean();
40		67
41	private async _render(value: T) {	68	// render the new node
42	this._scope.clean();	69	const node = render(
43	const [refNode, ...rest] = await render(this._component(value), this._node, "replace", this._scope);	70	this._renderJob ? this._component(this._renderJob.value) : undefined,
44	this._~~node~~ = ~~refNode~~;	71	this._scope
45	this._scope.own(() => rest.forEach(destroy));	72	);
		73
		74	// get actual content
		75	const pending = isDocumentFragmentNode(node) ?
		76	collectNodes(node.childNodes) :
		77	[node];
		78
		79	placeAt(node, this._node, "after");
		80
		81	if (isMounted(this._node))
		82	pending.forEach(n => startupWidgets(n));
		83
		84	if (pending.length)
		85	this._scope.own(() => pending.forEach(destroy));
		86
		87	this._renderJob = undefined;
46	}	88	}
47		89
48	protected _getDomNode() {	90	protected _getDomNode() {

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

             import { DojoNodePosition, isElementNode, isInPage, isWidget, placeAt } from "./traits";
             import registry = require("dijit/registry");
             import ContentPane = require("dijit/layout/ContentPane");
-            import { IScope } from "./Scope";
+            import { getItemDom, refHook } from "./render";
-            import { getItemDom, getScope, renderHook } from "./render";
             // tslint:disable-next-line: class-name
             export interface _Widget {
                     this.widgetClass = widgetClass;
                 }
-                _addChild(child: unknown, scope: IScope): void {
+                _addChild(child: unknown): void {
                     const instance = this._getInstance();
                     if (instance.addChild) {
                         if (child instanceof WidgetRendition) {
                             // layout containers add custom logic to addChild methods
-                            instance.addChild(child.getWidgetInstance(scope));
+                            instance.addChild(child.getWidgetInstance());
                         } else if (isWidget(child)) {
                             instance.addChild(child);
                         } else {
                     }
                 }
-                protected _create({ref, ...attrs}: {ref?: JSX.Ref<_Widget>}, children: unknown[], scope: IScope) {
+                protected _create({ref, ...attrs}: {ref?: JSX.Ref<_Widget>}, children: unknown[]) {
                     if (this.widgetClass.prototype instanceof ContentPane) {
                         // a special case for the ContentPane this is for
                         // compatibility with that heavy widget, all
                         this._instance = new this.widgetClass(_attrs);
                     } else {
                         this._instance = new this.widgetClass(attrs);
-                        children.forEach(x => this._addChild(x, scope));
+                        children.forEach(x => this._addChild(x));
                     }
-                    if (ref) {
+                    if (ref)
-                        const instance = this._instance;
+                        refHook(this._instance, ref);
-                        renderHook(() => ref(instance));
                 }
                 private _getInstance() {
                  * @param position A position relative to refNode.
                  */
                 placeAt(refNode: string | Node, position?: DojoNodePosition) {
-                    this.ensureCreated(getScope());
+                    this.ensureCreated();
                     const instance = this._getInstance();
                     if (typeof instance.placeAt === "function") {
                         instance.placeAt(refNode, position);
                     }
                 }
-                getWidgetInstance(scope?: IScope) {
+                getWidgetInstance() {
-                    this.ensureCreated(scope || getScope());
+                    this.ensureCreated();
                     return this._getInstance();
                 }

djx/src/main/ts/tsx/render.ts +40 -32

             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { isPromise } from "@implab/core-amd/safe";
             import { id as mid } from "module";
-            import { Scope } from "./Scope";
+            import { IScope, Scope } from "./Scope";
-            import { autostartWidgets, collectNodes, DojoNodePosition, isDocumentFragmentNode, isNode, isRendition, isWidget, placeAt } from "./traits";
+            import { isNode, isRendition, isWidget } from "./traits";
             const trace = TraceSource.get(mid);
-            let _scope = Scope.dummy;
+            interface Context {
+                scope: IScope;
-            let renderCount = 0;
+                hooks?: (() => void)[];
+            }
-            const hooks: (() => void)[] = [];
+            let _context: Context = {
+                scope: Scope.dummy
+            }
             const guard = (cb: () => unknown) => {
                 try {
                 }
             }
-            /**
+            export const beginRender = (scope: IScope = getScope()) => {
-             * Schedules rendering micro task
+                const prev = _context;
-             * @returns Promise
+                _context = {
-             */
+                    scope,
-            const beginRender = () => {
+                    hooks: []
-                renderCount++;
+                };
-                return Promise.resolve();
+                return endRender(prev);
             }
             /**
              * Completes render operation
              */
-            const endRender = () => {
+            const endRender = (prev: Context) => () => {
-                if (!--renderCount) {
+                const { hooks } = _context;
+                if (hooks)
                     hooks.forEach(guard);
-                    hooks.length = 0;
+                _context = prev;
             }
             export const renderHook = (hook: () => void) => {
-                if (renderCount)
+                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 = () => _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 = async (rendition: unknown, refNode: Node, position: DojoNodePosition = "last", scope = Scope.dummy) => {
+            export const render = (rendition: unknown, scope = Scope.dummy) => {
-                await beginRender();
+                const complete = beginRender(scope);
-                const prev = _scope;
-                _scope = scope;
                 try {
-                    const domNode = getItemDom(rendition);
+                    return getItemDom(rendition);
-                    const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.children) : [domNode];
-                    placeAt(domNode, refNode, position);
-                    startupPending.forEach(autostartWidgets);
-                    return startupPending;
                 } finally {
-                    _scope = prev;
+                    complete();
-                    endRender();
                 }
             }
                     // widgets are converted to it's markup
                     return v.domNode;
                 } else if (typeof v === "boolean" || v === null || v === undefined) {
-                    // null | undefined | boolean are removed, converted to comments
+                    // null | undefined | boolean are removed
-                    return document.createComment(`[${typeof v} ${String(v)}]`);
+                    return document.createDocumentFragment();
                 } else if (v instanceof Array) {
                     // arrays will be translated to document fragments
                     const fragment = document.createDocumentFragment();

djx/src/main/ts/tsx/traits.ts +10 -10

                         const w = registry.byNode(target);
                         if (w) {
                             w.destroyRecursive();
+                            return;
                         } else {
                             emptyNode(target);
+                        }
+                    }
                     const parent = target.parentNode;
                     if (parent)
                         parent.removeChild(target);
                 }
             }
              * @param collection The collection of nodes.
              * @returns The array of nodes.
              */
-            export const collectNodes = (collection: HTMLCollection) => {
+            export const collectNodes = (collection: NodeListOf<ChildNode>) => {
                 const items = [];
                 for (let i = 0, n = collection.length; i < n; i++) {
                     items.push(collection[i]);
                 return items;
             };
-            /** Starts widgets if the node contained in the document or in the started widget.
+            export const isMounted = (node: Node) => {
-             * @param node The node to start.
-            */
-            export const autostartWidgets = (node: Node) => {
                 if (node.parentNode) {
                     const parentWidget = registry.getEnclosingWidget(node.parentNode);
                     if (parentWidget && parentWidget._started)
-                        return startupWidgets(node);
+                        return true;
                 }
                 if (isInPage(node))
-                    startupWidgets(node);
+                    return true;
+                return false;
             };

djx/src/main/typings/index.d.ts +1 -1

             declare namespace JSX {
-                type Ref<T> = (value: T) => void;
+                type Ref<T> = ((value: T | undefined) => void);
                 interface DjxIntrinsicAttributes<E> {
                     /** alias for className */

djx/src/test/ts/plan.ts +2 -1

@@ -1,1 +1,2
1	import "./~~DeclareT~~ests"; No newline at end of file	1	import "./declare-tests";
		2	import "./observable-tests"; No newline at end of file

playground/build.gradle +3 0

                 pack("@implab/core-amd")
                 pack("dojo")
                 pack("dijit")
+                into("rxjs") {
+                    from(npm.module("rxjs/dist/bundles"))
+                }
                 from npm.module("requirejs/require.js")
             }

playground/package-lock.json +28 -1

@@ -8,7 +8,8
8	"dependencies": {	8	"dependencies": {
9	"dijit": "1.17.3",	9	"dijit": "1.17.3",
10	"dojo": "1.17.3",	10	"dojo": "1.17.3",
11	"requirejs": "2.3.6"	11	"requirejs": "2.3.6",
		12	"rxjs": "7.5.6"
12	},	13	},
13	"devDependencies": {	14	"devDependencies": {
14	"@implab/core-amd": "1.4.6",	15	"@implab/core-amd": "1.4.6",
@@ -77,6 +78,19
77	"node": ">=0.4.0"	78	"node": ">=0.4.0"
78	}	79	}
79	},	80	},
		81	"node_modules/rxjs": {
		82	"version": "7.5.6",
		83	"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz",
		84	"integrity": "sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==",
		85	"dependencies": {
		86	"tslib": "^2.1.0"
		87	}
		88	},
		89	"node_modules/tslib": {
		90	"version": "2.4.0",
		91	"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
		92	"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
		93	},
80	"node_modules/typescript": {	94	"node_modules/typescript": {
81	"version": "4.8.2",	95	"version": "4.8.2",
82	"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",	96	"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
@@ -133,6 +147,19
133	"resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.6.tgz",	147	"resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.6.tgz",
134	"integrity": "sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg=="	148	"integrity": "sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg=="
135	},	149	},
		150	"rxjs": {
		151	"version": "7.5.6",
		152	"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz",
		153	"integrity": "sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==",
		154	"requires": {
		155	"tslib": "^2.1.0"
		156	}
		157	},
		158	"tslib": {
		159	"version": "2.4.0",
		160	"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
		161	"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
		162	},
136	"typescript": {	163	"typescript": {
137	"version": "4.8.2",	164	"version": "4.8.2",
138	"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",	165	"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",

playground/package.json +2 -1

                 "dependencies": {
                     "dijit": "1.17.3",
                     "dojo": "1.17.3",
-                    "requirejs": "2.3.6"
+                    "requirejs": "2.3.6",
+                    "rxjs": "7.5.6"
                 },
                 "devDependencies": {
                     "@implab/core-amd": "1.4.6",

playground/src/bundle/config.js +6 -1

                     "@implab/djx",
                     "@implab/core-amd",
                     "dojo",
-                    "dijit"
+                    "dijit",
+                    {
+                        name: "rxjs",
+                        location: "rxjs",
+                        main: "rxjs.umd.min"
+                    }
                 ],
                 deps: ["app"]
             });

playground/src/main/ts/MainWidget.tsx +46 -13

@@ -1,10 +1,9
1	import { djbase, djclass } from "@implab/djx/declare";	1	import { djbase, djclass } from "@implab/djx/declare";
2	import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";	2	import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
3	import { createElement, watch } from "@implab/djx/tsx";	3	import { createElement, watch, prop, attach, all, bind, toggleClass } from "@implab/djx/tsx";
4	import ProgressBar from "./ProgressBar";	4	import ProgressBar from "./ProgressBar";
5	import Button = require("dijit/form/Button");	5	import Button = require("dijit/form/Button");
6		6	import { interval } from "rxjs";
7	const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
8		7
9	@djclass	8	@djclass
10	export default class MainWidget extends djbase(DjxWidgetBase) {	9	export default class MainWidget extends djbase(DjxWidgetBase) {
@@ -17,17 +16,42 export default class MainWidget extends
17		16
18	showCounter = false;	17	showCounter = false;
19		18
		19	counterNode?: HTMLInputElement;
		20
		21	paused = false;
		22
20	render() {	23	render() {
		24	const Counter = ({ children }: { children: unknown[] }) => <span>Counter: {children}</span>;
		25
21	return <div className="tundra">	26	return <div className="tundra">
22	<h2 ref={~~ref~~(this, "titleNode")}>Hi!</h2>	27	<h2 ref={attach(this, "titleNode")}>Hi!</h2>
23	<ProgressBar ref={~~ref~~(this, "progressBar")} />	28	<ProgressBar ref={attach(this, "progressBar")} />
24	{watch(this, "showCounter", flag => flag &&
25	<section style={{padding: "10px"}}>	29	<section style={{ padding: "10px" }}>
26	<label>	30	{watch(prop(this, "showCounter"), flag => flag &&
27	Counter: {watch(this, "count", v => [<span>{v}</span>, " ", <span>sec</span>])}	31	[
28	</label>	32	<Counter><input ref={all(
		33	bind("value", prop(this, "count")
		34	.map(x => x*10)
		35	.map(String)
		36	),
		37	attach(this, "counterNode")
		38	)} /> <span>ms</span></Counter>,
		39	" \| ",
		40	<span ref={bind("innerHTML", interval(1000))}></span>,
		41	" \| ",
		42	<Button
		43	ref={all(
		44	bind("label", prop(this, "paused")
		45	.map(x => x ? "Unpause" : "Pause")
		46	),
		47	toggleClass("paused", prop(this,"paused"))
		48	)}
		49	onClick={this._onPauseClick}
		50	/>
		51	]
		52
		53	)}
29	</section>	54	</section>
30	)}
31	<Button onClick={this._onToggleCounterClick}>Toggle counter</Button>	55	<Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
32	</div>;	56	</div>;
33	}	57	}
@@ -35,12 +59,21 export default class MainWidget extends
35	postCreate(): void {	59	postCreate(): void {
36	super.postCreate();	60	super.postCreate();
37		61
38	const ~~inc~~ = () => {	62	const h = setInterval(
		63	() => {
39	this.set("count", this.count + 1);	64	this.set("count", this.count + 1);
40	this.defer(inc, 1000);	65	},
		66	10
		67	);
		68	this.own({
		69	destroy: () => {
		70	clearInterval(h);
		71	}
		72	});
41	}	73	}
42		74
43	inc();	75	private _onPauseClick = () => {
		76	this.set("paused", !this.paused);
44	}	77	}
45		78
46	private _onToggleCounterClick = () => {	79	private _onToggleCounterClick = () => {

djx/src/test/ts/DeclareTests.ts removed 0 -12

NO CONTENT: file was removed

djx/src/test/ts/Tap.ts removed 0 -148

NO CONTENT: file was removed

djx/src/test/ts/TestTraits.ts removed 0 -60

NO CONTENT: file was removed

djx/src/test/ts/TextTapWriter.ts removed 0 -18

NO CONTENT: file was removed

djx/src/test/ts/dummy.ts removed 0 -16

NO CONTENT: file was removed

djx/src/test/ts/i18nTests.ts removed 0 0

NO CONTENT: file was removed

General Comments 0

Write
Preview

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

No TODOs yet

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

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