implab/implabjs-djx Commit - r101:bb6b1db1b430

Testing nested watch, release candidate

cin -

r101:bb6b1db1b430 v1.3

parent child

Context file:

r101:bb6b1db1b430

Collapse all files

gradle.properties created 644 +1 0

	@@ -0,0 +1,1
				1	symbols=local No newline at end of file

djx/gradle.properties 0 -1

             license=BSD-2-Clause
             repository=http://hg.code.sf.net/p/implabjs/djx
             npmScope=implab
-            symbols=pack
  No newline at end of file

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

                 let done = false;
                 return {
-                    next: (value: T) => done && next(value),
+                    next: (value: T) => !done && next(value),
-                    error: (e: unknown) => done && (done = true, error(e)),
+                    error: (e: unknown) => !done && (done = true, error(e)),
-                    complete: () => done && (done = true, complete())
+                    complete: () => !done && (done = true, complete())
                 };
             }

djx/src/main/ts/tsx.ts +2 0

                 prop: K,
                 render: (model: StatefulProps<T>[K]) => any
             ) {
                 return new WatchRendition(
                     render,
                     observe(({next}) => {
                             prop,
                             (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
                         );
+                        next(target.get(prop));
                         return () => h.remove();
                     })
                 )

djx/src/main/ts/tsx/FunctionRendition.ts +3 -6

             import { argumentNotNull } from "@implab/core-amd/safe";
             import { getItemDom } from "./render";
             import { RenditionBase } from "./RenditionBase";
-            import { IScope } from "./Scope";
             export class FunctionRendition extends RenditionBase<Node> {
                 private _component: (...args: any[]) => any;
                     this._component = component;
                 }
-                protected _create(attrs: object, children: any[], scope: IScope) {
+                protected _create(attrs: object, children: any[]) {
                     const _attrs: any = attrs || {};
-                    const _children = children.map(x => getItemDom(x, scope));
+                    const _children = children.map(x => getItemDom(x));
                     this._node = getItemDom(
-                        this._component.call(null, { ..._attrs, children: _children }),
+                        this._component.call(null, { ..._attrs, children: _children }));
-                        scope
-                    );
                 }
                 protected _getDomNode() {

djx/src/main/ts/tsx/HtmlRendition.ts +19 -7

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

djx/src/main/ts/tsx/WatchRendition.ts +8 -8

             import { id as mid } from "module";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { argumentNotNull } from "@implab/core-amd/safe";
-            import { getItemDom, render } from "./render";
+            import { getScope, render } from "./render";
             import { RenditionBase } from "./RenditionBase";
-            import { IScope, Scope } from "./Scope";
+            import { Scope } from "./Scope";
             import { Observable } from "../observable";
+            import { destroy } from "./traits";
             const trace = TraceSource.get(mid);
                     this._node = document.createComment("WatchRendition placeholder");
                 }
-                protected _create(attrs: object, children: any[], scope: IScope) {
+                protected _create(attrs: object, children: any[]) {
+                    const scope = getScope();
                     scope.own(this._scope);
                     scope.own(this._subject.on({ next: this._onValue }));
                 }
                     void this._render(value).catch( e => trace.error(e));
                 private async _render(value: T) {
-                    const prevNode = this._node;
                     this._scope.clean();
+                    const [refNode, ...rest] = await render(this._component(value), this._node, "replace", this._scope);
-                    this._node = await render(this._component(value), this._scope);
+                    this._node = refNode;
+                    this._scope.own(() => rest.forEach(destroy));
-                    this.placeAt(prevNode, "replace");
                 }
                 protected _getDomNode() {

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

             import registry = require("dijit/registry");
             import ContentPane = require("dijit/layout/ContentPane");
             import { IScope } from "./Scope";
-            import { getItemDom, getScope } from "./render";
+            import { getItemDom, getScope, renderHook } from "./render";
             // tslint:disable-next-line: class-name
             export interface _Widget {
                 placeAt?(refNode: string | Node, position?: DojoNodePosition): void;
                 startup?(): void;
-                addChild?(widget: any, index?: number): void;
+                addChild?(widget: unknown, index?: number): void;
             }
-            export type _WidgetCtor = new (attrs: any, srcNode?: string | Node) => _Widget;
+            export type _WidgetCtor = new (attrs: {}, srcNode?: string | Node) => _Widget;
             export class WidgetRendition extends RenditionBase<Node> {
                 readonly widgetClass: _WidgetCtor;
                     this.widgetClass = widgetClass;
                 }
-                _addChild(child: any, scope: IScope): void {
+                _addChild(child: unknown, scope: IScope): void {
                     const instance = this._getInstance();
                     if (instance.addChild) {
                         } else if (isWidget(child)) {
                             instance.addChild(child);
                         } else {
-                            const childDom = getItemDom(child, scope);
+                            const childDom = getItemDom(child);
                             const w = isElementNode(childDom) ? registry.byNode(childDom) : undefined;
                             if (w) {
                                     throw new Error("Failed to add DOM content. The widget doesn't have a containerNode");
                                 // the current widget isn't started, it's children shouldn't start too
-                                placeAt(getItemDom(child,scope), instance.containerNode, "last");
+                                placeAt(getItemDom(child), instance.containerNode, "last");
                             }
                         }
                     } else {
                             throw new Error("The widget doesn't have neither addChild nor containerNode");
                         // the current widget isn't started, it's children shouldn't start too
-                        placeAt(getItemDom(child, scope), instance.containerNode, "last");
+                        placeAt(getItemDom(child), instance.containerNode, "last");
                     }
                 }
-                protected _create(attrs: any, children: any[], scope: IScope) {
+                protected _create({ref, ...attrs}: {ref?: JSX.Ref<_Widget>}, children: unknown[], scope: IScope) {
                     if (this.widgetClass.prototype instanceof ContentPane) {
                         // a special case for the ContentPane this is for
-                        // the compatibility with this heavy widget, all
+                        // compatibility with that heavy widget, all
                         // regular containers could be easily manipulated
                         // through `containerNode` property or `addChild` method.
                         // render children to the DocumentFragment
                         const content = document.createDocumentFragment();
-                        children.forEach(child => content.appendChild(getItemDom(child, scope)));
+                        children.forEach(child => content.appendChild(getItemDom(child)));
                         // set the content property to the parameters of the widget
                         const _attrs = { ...attrs, content };
                         children.forEach(x => this._addChild(x, scope));
                     }
+                    if (ref) {
+                        const instance = this._instance;
+                        renderHook(() => ref(instance));
+                    }
                 }
                 private _getInstance() {

djx/src/main/ts/tsx/render.ts +54 -10

@@ -1,12 +1,53
1	import { IScope, Scope } from "./Scope";	1	import { TraceSource } from "@implab/core-amd/log/TraceSource";
2	import { destroy, isNode, isRendition, isWidget, Rendition } from "./traits";	2	import { isPromise } from "@implab/core-amd/safe";
		3	import { id as mid } from "module";
		4	import { Scope } from "./Scope";
		5	import { autostartWidgets, collectNodes, DojoNodePosition, isDocumentFragmentNode, isNode, isRendition, isWidget, placeAt } from "./traits";
		6
		7	const trace = TraceSource.get(mid);
3		8
4	let _scope = Scope.dummy;	9	let _scope = Scope.dummy;
5		10
6	const beginRender = async () => {	11	let renderCount = 0;
		12
		13	const hooks: (() => void)[] = [];
		14
		15	const guard = (cb: () => unknown) => {
		16	try {
		17	const result = cb()
		18	if (isPromise(result)) {
		19	const warn = (ret: unknown) => trace.error("The callback {0} competed asynchronously. result = {1}", cb, ret);
		20	result.then(warn, warn);
		21	}
		22	} catch (e) {
		23	trace.error(e);
		24	}
7	}	25	}
8		26
		27	/**
		28	* Schedules rendering micro task
		29	* @returns Promise
		30	*/
		31	const beginRender = () => {
		32	renderCount++;
		33	return Promise.resolve();
		34	}
		35
		36	/**
		37	* Completes render operation
		38	*/
9	const endRender = () => {	39	const endRender = () => {
		40	if (!--renderCount) {
		41	hooks.forEach(guard);
		42	hooks.length = 0;
		43	}
		44	}
		45
		46	export const renderHook = (hook: () => void) => {
		47	if (renderCount)
		48	hooks.push(hook);
		49	else
		50	guard(hook);
10	}	51	}
11		52
12	/** Returns the current scope */	53	/** Returns the current scope */
@@ -16,14 +57,17 export const getScope = () => _scope;
16	* @param rendition The rendition to be rendered	57	* @param rendition The rendition to be rendered
17	* @param scope The scope	58	* @param scope The scope
18	*/	59	*/
19	export const render = async (rendition: unknown, scope = Scope.dummy) => {	60	export const render = async (rendition: unknown, refNode: Node, position: DojoNodePosition = "last", scope = Scope.dummy) => {
20	await beginRender();	61	await beginRender();
21	const prev = _scope;	62	const prev = _scope;
22	_scope = scope;	63	_scope = scope;
23	try {	64	try {
24	const node = getItemDom(rendition, ~~scope~~);	65	const domNode = getItemDom(rendition);
25	scope.own(() => destroy(node));	66	const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.children) : [domNode];
26	return node;	67	placeAt(domNode, refNode, position);
		68	startupPending.forEach(autostartWidgets);
		69
		70	return startupPending;
27	} finally {	71	} finally {
28	_scope = prev;	72	_scope = prev;
29	endRender();	73	endRender();
@@ -31,7 +75,7 export const render = async (rendition:
31	}	75	}
32		76
33	/** Renders DOM element for different types of the argument. */	77	/** Renders DOM element for different types of the argument. */
34	export const getItemDom = (v: unknown, ~~scope~~: ~~IScope~~) => {	78	export const getItemDom = (v: unknown) => {
35	if (typeof v === "string" \|\| typeof v === "number" \|\| v instanceof RegExp \|\| v instanceof Date) {	79	if (typeof v === "string" \|\| typeof v === "number" \|\| v instanceof RegExp \|\| v instanceof Date) {
36	// primitive types converted to the text nodes	80	// primitive types converted to the text nodes
37	return document.createTextNode(v.toString());	81	return document.createTextNode(v.toString());
@@ -40,7 +84,7 export const getItemDom = (v: unknown, s
40	return v;	84	return v;
41	} else if (isRendition(v)) {	85	} else if (isRendition(v)) {
42	// renditions are instantiated	86	// renditions are instantiated
43	return v.getDomNode(~~scope~~);	87	return v.getDomNode();
44	} else if (isWidget(v)) {	88	} else if (isWidget(v)) {
45	// widgets are converted to it's markup	89	// widgets are converted to it's markup
46	return v.domNode;	90	return v.domNode;
@@ -50,7 +94,7 export const getItemDom = (v: unknown, s
50	} else if (v instanceof Array) {	94	} else if (v instanceof Array) {
51	// arrays will be translated to document fragments	95	// arrays will be translated to document fragments
52	const fragment = document.createDocumentFragment();	96	const fragment = document.createDocumentFragment();
53	v.map(item => getItemDom(item, ~~scope~~))	97	v.map(item => getItemDom(item))
54	.forEach(node => fragment.appendChild(node));	98	.forEach(node => fragment.appendChild(node));
55	return fragment;	99	return fragment;
56	} else {	100	} else {

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

             import { isDestroyable } from "@implab/core-amd/safe";
             import _WidgetBase = require("dijit/_WidgetBase");
             import registry = require("dijit/registry");
-            import { IScope } from "./Scope";
             interface _WidgetBaseConstructor {
                 new <A = {}, E extends { [k in keyof E]: Event } = {}>(params?: Partial<_WidgetBase<E> & A>, srcNodeRef?: dojo.NodeOrString): _WidgetBase<E> & dojo._base.DeclareCreatedObject;
             export type DojoNodeLocation = [Node, DojoNodePosition];
             export interface Rendition<TNode extends Node = Node> {
-                getDomNode(scope?: IScope): TNode;
+                getDomNode(): TNode;
                 placeAt(refNode: string | Node, position?: DojoNodePosition): void;
             }

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

                 }
                 interface IntrinsicClassAttributes<T> {
-                    ref: (value: T) => void;
+                    ref?: (value: T) => void;
+                    children?: unknown;
                 }
             }

playground/build.gradle +15 0

@@ -3,6 +3,8 plugins {
3	id "ivy-publish"	3	id "ivy-publish"
4	}	4	}
5		5
		6	def container = "djx-playground"
		7
6	configurations {	8	configurations {
7	npmLocal	9	npmLocal
8	}	10	}
@@ -105,4 +107,17 task copyApp(type: Copy) {
105		107
106	task bundle {	108	task bundle {
107	dependsOn copyModules, processResourcesBundle, copyApp	109	dependsOn copyModules, processResourcesBundle, copyApp
		110	}
		111
		112	task up(type: Exec) {
		113	dependsOn bundle
		114	commandLine "podman", "run", "--rm", "-d",
		115	"--name", container,
		116	"-p", "2078:80",
		117	"-v", "$buildDir/bundle:/srv/www/htdocs",
		118	"registry.implab.org/implab/apache2:latest"
		119	}
		120
		121	task stop(type: Exec) {
		122	commandLine "podman", "stop", container
108	} No newline at end of file	123	}

playground/src/main/ts/MainWidget.tsx +30 -2

@@ -1,7 +1,8
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 } from "@implab/djx/tsx";	3	import { createElement, watch } from "@implab/djx/tsx";
4	import ProgressBar from "./ProgressBar";	4	import ProgressBar from "./ProgressBar";
		5	import Button = require("dijit/form/Button");
5		6
6	const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);	7	const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
7		8
@@ -12,10 +13,37 export default class MainWidget extends
12		13
13	progressBar?: ProgressBar;	14	progressBar?: ProgressBar;
14		15
		16	count = 0;
		17
		18	showCounter = false;
		19
15	render() {	20	render() {
16	return <div>	21	return <div className="tundra">
17	<h2 ref={ref(this, "titleNode")}>Hi!</h2>	22	<h2 ref={ref(this, "titleNode")}>Hi!</h2>
18	<ProgressBar ref={ref(this, "progressBar")}/>	23	<ProgressBar ref={ref(this, "progressBar")} />
		24	{watch(this, "showCounter", flag => flag &&
		25	<section style={{padding: "10px"}}>
		26	<label>
		27	Counter: {watch(this, "count", v => [<span>{v}</span>, " ", <span>sec</span>])}
		28	</label>
		29	</section>
		30	)}
		31	<Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
19	</div>;	32	</div>;
20	}	33	}
		34
		35	postCreate(): void {
		36	super.postCreate();
		37
		38	const inc = () => {
		39	this.set("count", this.count + 1);
		40	this.defer(inc, 1000);
21	}	41	}
		42
		43	inc();
		44	}
		45
		46	private _onToggleCounterClick = () => {
		47	this.set("showCounter", !this.showCounter);
		48	}
		49	}

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

             import MainWidget from "./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"
             const w = new MainWidget();
             w.placeAt(document.body);

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