implab/implabjs-djx Commit - r96:a316cfea8bb1

refactoring, adding scope to rendering methods

cin -

r96:a316cfea8bb1 v1.3

parent child

Context file:

r96:a316cfea8bb1

Collapse all files

djx/src/main/ts/observable.ts created 644 +34 0

@@ -0,0 +1,34
	1	import { IDestroyable } from "@implab/core-amd/interfaces";
	2
	3	export interface Sink<T> {
	4	next: (value: T) => void;
	5	error: (e: unknown) => void;
	6	complete: () => void;
	7	}
	8
	9	export type Consumer<T> = Partial<Sink<T>>;
	10
	11	export type Producer<T> = (sink: Sink<T>) => (void \| (() => void));
	12
	13	export interface Observable<T> {
	14	on(sink: Partial<Sink<T>>): IDestroyable;
	15	}
	16
	17	const noop = () => {};
	18
	19	const sink = <T>(consumer: Consumer<T>) => {
	20	const { next = noop, error = noop, complete = noop } = consumer;
	21	let done = false;
	22
	23	return {
	24	next: (value: T) => done && next(value),
	25	error: (e: unknown) => done && (done = true, error(e)),
	26	complete: () => done && (done = true, complete())
	27	};
	28	}
	29
	30	export const observe = <T>(producer: Producer<T>) => ({
	31	on: (consumer: Consumer<T>) => ({
	32	destroy: producer(sink(consumer)) ?? noop
	33	})
	34	});

djx/src/main/ts/tsx.ts +17 -22

-            import { Constructor, IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
+            import { Constructor } from "@implab/core-amd/interfaces";
             import { HtmlRendition } from "./tsx/HtmlRendition";
             import { WidgetRendition } from "./tsx/WidgetRendition";
-            import { destroy, isWidgetConstructor, Rendition } from "./tsx/traits";
+            import { 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 { observe } from "./observable";
             export function createElement<T extends Constructor | string | ((props: any) => Element)>(elementType: T, ...args: any[]): Rendition {
                 if (typeof elementType === "string") {
             type StatefulProps<T> = T extends Stateful<infer A> ? A : never;
-            type CleanFn = (instance: IRemovable | IDestroyable) => void;
             /**
              * 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
-             * @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer.
              * @returns Rendition which is created instantly
              */
             export function watch<W extends _WidgetBase, K extends keyof W>(
                 target: W,
                 prop: K,
-                render: (model: W[K]) => any,
+                render: (model: W[K]) => any
-                cleanupOrOwner?: { own: CleanFn } | CleanFn
             ): 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
-             * @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer.
              * @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]) => any,
+                render: (model: StatefulProps<T>[K]) => any
-                cleanupOrOwner?: { own: CleanFn } | CleanFn
             ): Rendition;
             export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>(
                 target: T,
                 prop: K,
-                render: (model: StatefulProps<T>[K]) => any,
+                render: (model: StatefulProps<T>[K]) => any
-                cleanupOrOwner: { own: CleanFn } | CleanFn = () => { }
             ) {
-                let rendition = new FunctionRendition(() => render(target.get(prop)));
+                return new WatchRendition(
-                const _own = cleanupOrOwner instanceof Function ? cleanupOrOwner : (x: IRemovable) => cleanupOrOwner.own(x);
+                    render,
-                _own(target.watch(prop, (_name, oldValue, newValue) => {
+                    observe(({next}) => {
-                    if (oldValue !== newValue) {
+                        const h = target.watch(
-                        const newRendition = new FunctionRendition(() => render(newValue));
+                            prop,
-                        newRendition.placeAt(rendition.getDomNode(), "replace");
+                            (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
-                        destroy(rendition.getDomNode());
+                        );
-                        rendition = newRendition;
+                        return () => h.remove();
+                    })
-                }));
-                return rendition;
             }
             /** Decorates the method which will be registered as the handle for the specified event.

djx/src/main/ts/tsx/FunctionRendition.ts +7 -4

             import { argumentNotNull } from "@implab/core-amd/safe";
+            import { getItemDom } from "./Renderer";
             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[]) {
+                protected _create(attrs: object, children: any[], scope: IScope) {
                     const _attrs: any = attrs || {};
-                    const _children = children.map(x => this.getItemDom(x));
+                    const _children = children.map(x => getItemDom(x, scope));
-                    this._node = this.getItemDom(
+                    this._node = getItemDom(
-                        this._component.call(null, { ..._attrs, children: _children })
+                        this._component.call(null, { ..._attrs, children: _children }),
+                        scope
                     );
                 }

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

             import dom = require("dojo/dom-construct");
             import { argumentNotEmptyString } from "@implab/core-amd/safe";
             import { RenditionBase } from "./RenditionBase";
+            import { placeAt } from "./traits";
+            import { IScope } from "./Scope";
+            import { getItemDom } from "./Renderer";
             export class HtmlRendition extends RenditionBase<HTMLElement> {
                 elementType: string;
                     this.elementType = elementType;
                 }
-                _addChild(child: any): void {
+                _addChild(child: unknown, scope: IScope): void {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
-                    dom.place(this.getItemDom(child), this._element);
+                    placeAt(getItemDom(child, scope), this._element);
                 }
-                _create(attrs: object, children: any[]) {
+                _create(attrs: object, children: unknown[], scope: IScope) {
                     this._element = dom.create(this.elementType, attrs);
-                    children.forEach(v => this._addChild(v));
+                    children.forEach(v => this._addChild(v, scope));
                 }
                 _getDomNode() {

djx/src/main/ts/tsx/Renderer.ts +25 -2

@@ -1,5 +1,5
1	import { Scope } from "./Scope";	1	import { IScope, Scope } from "./Scope";
2	import { destroy, Rendition } from "./traits";	2	import { destroy, isNode, isRendition, isWidget, Rendition } from "./traits";
3		3
4	let _scope = Scope.dummy;	4	let _scope = Scope.dummy;
5		5
@@ -24,3 +24,26 export const render = async (rendition:
24	endRender();	24	endRender();
25	}	25	}
26	}	26	}
		27
		28	/** Renders DOM element for different types of the argument. */
		29	export const getItemDom = (v: unknown, scope: IScope) => {
		30	if (typeof v === "string" \|\| typeof v === "number" \|\| v instanceof RegExp \|\| v instanceof Date) {
		31	// primitive types converted to the text nodes
		32	return document.createTextNode(v.toString());
		33	} else if (isNode(v)) {
		34	// nodes are kept as is
		35	return v;
		36	} else if (isRendition(v)) {
		37	// renditions are instantiated
		38	return v.getDomNode(scope);
		39	} else if (isWidget(v)) {
		40	// widgets are converted to it's markup
		41	return v.domNode;
		42	} else if (typeof v === "boolean" \|\| v === null \|\| v === undefined) {
		43	// null \| undefined \| boolean are removed, converted to comments
		44	return document.createComment(`[${typeof v} ${String(v)}]`);
		45	} else {
		46	// bug: explicit error otherwise
		47	throw new Error("Invalid parameter: " + v);
		48	}
		49	}

djx/src/main/ts/tsx/RenditionBase.ts +12 -56

@@ -1,9 +1,8
1	import { isNull, mixin } from "@implab/core-amd/safe";	1	import { isNull, mixin } from "@implab/core-amd/safe";
2	import { isPlainObject, ~~isNode~~, ~~isRendition~~, DojoNodePosition, Rendition, ~~isInPage~~, ~~isWidget~~, isDocumentFragmentNode, startupWidgets } from "./traits";	2	import { isPlainObject, DojoNodePosition, Rendition, isDocumentFragmentNode, placeAt, collectNodes, autostartWidgets } from "./traits";
3		3
4	import dom = require("dojo/dom-construct");	4	import { IScope } from "./Scope";
5	import registry = require("dijit/registry");	5	import { getScope } from "./Renderer";
6
7		6
8	export abstract class RenditionBase<TNode extends Node> implements Rendition<TNode> {	7	export abstract class RenditionBase<TNode extends Node> implements Rendition<TNode> {
9	private _attrs = {};	8	private _attrs = {};
@@ -29,34 +28,9 export abstract class RenditionBase<TNod
29	}	28	}
30	}	29	}
31		30
32	/** Renders DOM element for different types of the argument. */	31	ensureCreated(scope: IScope) {
33	protected getItemDom(v: any) {
34	const tv = typeof v;
35
36	if (tv === "string" \|\| tv === "number" \|\| v instanceof RegExp \|\| v instanceof Date) {
37	// primitive types converted to the text nodes
38	return document.createTextNode(v.toString());
39	} else if (isNode(v)) {
40	// nodes are kept as is
41	return v;
42	} else if (isRendition(v)) {
43	// renditions are instantiated
44	return v.getDomNode();
45	} else if (isWidget(v)) {
46	// widgets are converted to it's markup
47	return v.domNode;
48	} else if (tv === "boolean" \|\| v === null \|\| v === undefined) {
49	// null \| undefined \| boolean are removed, converted to comments
50	return document.createComment(`[${tv} ${String(v)}]`);
51	} else {
52	// bug: explicit error otherwise
53	throw new Error("Invalid parameter: " + v);
54	}
55	}
56
57	ensureCreated() {
58	if (!this._created) {	32	if (!this._created) {
59	this._create(this._attrs, this._children);	33	this._create(this._attrs, this._children, scope);
60	this._children = [];	34	this._children = [];
61	this._attrs = {};	35	this._attrs = {};
62	this._created = true;	36	this._created = true;
@@ -69,8 +43,8 export abstract class RenditionBase<TNod
69	}	43	}
70		44
71	/** Creates DOM node if not created. No additional actions are taken. */	45	/** Creates DOM node if not created. No additional actions are taken. */
72	getDomNode() {	46	getDomNode(scope?: IScope) {
73	this.ensureCreated();	47	this.ensureCreated(scope \|\| getScope());
74	return this._getDomNode();	48	return this._getDomNode();
75	}	49	}
76		50
@@ -82,36 +56,18 export abstract class RenditionBase<TNod
82	* @param {DojoNodePosition} position Optional parameter, specifies the	56	* @param {DojoNodePosition} position Optional parameter, specifies the
83	* position relative to refNode. Default is "last" (i.e. last child).	57	* position relative to refNode. Default is "last" (i.e. last child).
84	*/	58	*/
85	placeAt(refNode: string \| Node, position?: DojoNodePosition) {	59	placeAt(refNode: string \| Node, position: DojoNodePosition = "last") {
86	const domNode = this.getDomNode();	60	const domNode = this.getDomNode();
87		61
88	const collect = (collection: HTMLCollection) => {	62	const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.children) : [domNode];
89	const items = [];
90	for (let i = 0, n = collection.length; i < n; i++) {
91	items.push(collection[i]);
92	}
93	return items;
94	};
95		63
96	const startup = (node: Node) => {	64	placeAt(domNode, refNode, position);
97	if (node.parentNode) {
98	const parentWidget = registry.getEnclosingWidget(node.parentNode);
99	if (parentWidget && parentWidget._started)
100	return startupWidgets(node);
101	}
102	if (isInPage(node))
103	startupWidgets(node);
104	};
105		65
106	const startupPending = isDocumentFragmentNode(domNode) ? collect(domNode.children) : [domNode];	66	startupPending.forEach(autostartWidgets);
107
108	dom.place(domNode, refNode, position);
109
110	startupPending.forEach(startup);
111		67
112	}	68	}
113		69
114	protected abstract _create(attrs: object, children: ~~any~~[]): void;	70	protected abstract _create(attrs: object, children: unknown[], scope: IScope): void;
115		71
116	protected abstract _getDomNode(): TNode;	72	protected abstract _getDomNode(): TNode;
117	}	73	}

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

             import { id as mid } from "module";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { argumentNotNull } from "@implab/core-amd/safe";
-            import { place } from "dojo/dom-construct";
+            import { render } from "./Renderer";
-            import { getScope, render } from "./Renderer";
             import { RenditionBase } from "./RenditionBase";
-            import { Scope } from "./Scope";
+            import { IScope, Scope } from "./Scope";
-            import { locateNode } from "./traits";
+            import { Observable } from "../observable";
             const trace = TraceSource.get(mid);
                 private readonly _scope = new Scope();
-                constructor(component: (arg: T) => any, subject: any) {
+                private readonly _subject: Observable<T>;
+                constructor(component: (arg: T) => any, subject: Observable<T>) {
                     super();
                     argumentNotNull(component, "component");
                     this._factory = component;
+                    this._subject = subject;
                     this._node = document.createComment("WatchRendition placeholder");
                 }
-                protected _create(attrs: object, children: any[]) {
+                protected _create(attrs: object, children: any[], scope: IScope) {
-                    const _attrs: any = attrs || {};
-                    const _children = children.map(x => this.getItemDom(x));
-                    this._node = this.getItemDom(
-                        this._factory.call(null, { ..._attrs, children: _children })
-                    );
-                    const scope = getScope();
                     scope.own(this._scope);
+                    scope.own(this._subject.on({ next: this._onValue }))
-                    // если отрендерили текст? или DocumentFragment
                 }
+                private _onValue = (value: T) => void this._render(value).catch( e => trace.error(e));
                 private async _render(value: T) {
-                    const [refNode, position] = locateNode(this._node);
+                    const prevNode = this._node;
                     this._scope.clean();
                     this._node = await render(() => this._factory(value), this._scope);
-                    if (refNode)
+                    this.placeAt(prevNode, "replace");
-                        place(this._node, refNode, position);
                 }
                 protected _getDomNode() {

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

-            import dom = require("dojo/dom-construct");
             import { argumentNotNull } from "@implab/core-amd/safe";
-            import { RenditionBase } from "./RenditionBase";
+            import { getItemDom, RenditionBase } from "./RenditionBase";
-            import { DojoNodePosition, isElementNode, isInPage, isWidget } from "./traits";
+            import { DojoNodePosition, isElementNode, isInPage, isWidget, placeAt } from "./traits";
             import registry = require("dijit/registry");
             import ContentPane = require("dijit/layout/ContentPane");
+            import { IScope } from "./Scope";
+            import { getScope } from "./Renderer";
             // tslint:disable-next-line: class-name
             export interface _Widget {
                     this.widgetClass = widgetClass;
                 }
-                _addChild(child: any): void {
+                _addChild(child: any, scope: IScope): void {
                     const instance = this._getInstance();
                     if (instance.addChild) {
                         if (child instanceof WidgetRendition) {
                             // layout containers add custom logic to addChild methods
-                            instance.addChild(child.getWidgetInstance());
+                            instance.addChild(child.getWidgetInstance(scope));
                         } else if (isWidget(child)) {
                             instance.addChild(child);
                         } else {
-                            const childDom = this.getItemDom(child);
+                            const childDom = getItemDom(child, scope);
                             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
-                                dom.place(this.getItemDom(child), instance.containerNode);
+                                placeAt(getItemDom(child,scope), 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
-                        dom.place(this.getItemDom(child), instance.containerNode);
+                        placeAt(getItemDom(child, scope), instance.containerNode, "last");
                     }
                 }
-                protected _create(attrs: any, children: any[]) {
+                protected _create(attrs: any, children: any[], scope: IScope) {
                     if (this.widgetClass.prototype instanceof ContentPane) {
                         // a special case for the ContentPane this is for
                         // the compatibility with this heavy widget, all
                         // render children to the DocumentFragment
                         const content = document.createDocumentFragment();
-                        children.forEach(child => content.appendChild(this.getItemDom(child)));
+                        children.forEach(child => content.appendChild(getItemDom(child, scope)));
                         // set the content property to the parameters of the widget
                         const _attrs = { ...attrs, content };
                         this._instance = new this.widgetClass(_attrs);
                     } else {
                         this._instance = new this.widgetClass(attrs);
-                        children.forEach(x => this._addChild(x));
+                        children.forEach(x => this._addChild(x, scope));
                     }
                 }
                  * @param position A position relative to refNode.
                  */
                 placeAt(refNode: string | Node, position?: DojoNodePosition) {
-                    this.ensureCreated();
+                    this.ensureCreated(getScope());
                     const instance = this._getInstance();
                     if (typeof instance.placeAt === "function") {
                         instance.placeAt(refNode, position);
                     }
                 }
-                getWidgetInstance() {
+                getWidgetInstance(scope?: IScope) {
-                    this.ensureCreated();
+                    this.ensureCreated(scope || getScope());
                     return this._getInstance();
                 }

djx/src/main/ts/tsx/traits.ts +93 -85

@@ -2,16 +2,16 import { IDestroyable } from "@implab/co
2	import { isDestroyable } from "@implab/core-amd/safe";	2	import { isDestroyable } from "@implab/core-amd/safe";
3	import _WidgetBase = require("dijit/_WidgetBase");	3	import _WidgetBase = require("dijit/_WidgetBase");
4	import registry = require("dijit/registry");	4	import registry = require("dijit/registry");
5	import dom = require("dojo/dom-construct");	5	import { IScope } from "./Scope";
6		6
7	type _WidgetBaseConstructor = typeof _WidgetBase;	7	type _WidgetBaseConstructor = typeof _WidgetBase;
8		8
9	export type DojoNodePosition = "first" \| "after" \| "before" \| "last" \| "replace" \| "only" \| number;	9	export type DojoNodePosition = "first" \| "after" \| "before" \| "last" \| "replace" \| "only" \| number;
10		10
11	export type DojoNodeLocation = [Node \| ~~null~~, DojoNodePosition];	11	export type DojoNodeLocation = [Node, DojoNodePosition];
12		12
13	export interface Rendition<TNode extends Node = Node> {	13	export interface Rendition<TNode extends Node = Node> {
14	getDomNode(): TNode;	14	getDomNode(scope?: IScope): TNode;
15		15
16	placeAt(refNode: string \| Node, position?: DojoNodePosition): void;	16	placeAt(refNode: string \| Node, position?: DojoNodePosition): void;
17	}	17	}
@@ -25,52 +25,32 export interface IRecursivelyDestroyable
25	destroyRecursive(): void;	25	destroyRecursive(): void;
26	}	26	}
27		27
28	export function isNode(el: any): el is Node {	28	export const isNode = (el: unknown): el is Node => !!(el && (el as Node).nodeName && (el as Node).nodeType);
29	return el && el.nodeName && el.nodeType;
30	}
31		29
32	export ~~fun~~ction isElementNode(el: ~~any~~): el is Element {	30	export const isElementNode = (el: unknown): el is Element => isNode(el) && el.nodeType === 1;
33	return isNode(el) && el.nodeType === 1;
34	}
35		31
36	export ~~fun~~ction isTextNode(el: ~~any~~): el is Text {	32	export const isTextNode = (el: unknown): el is Text => isNode(el) && el.nodeType === 3;
37	return isNode(el) && el.nodeType === 3;
38	}
39		33
40	export ~~fun~~ction isProcessingInstructionNode(el: ~~any~~): el is ProcessingInstruction {	34	export const isProcessingInstructionNode = (el: unknown): el is ProcessingInstruction => isNode(el) && el.nodeType === 7;
41	return isNode(el) && el.nodeType === 7;
42	}
43		35
44	export ~~fun~~ction isCommentNode(el: ~~any~~): el is Comment {	36	export const isCommentNode = (el: unknown): el is Comment => isNode(el) && el.nodeType === 8;
45	return isNode(el) && el.nodeType === 8;
46	}
47		37
48	export ~~fun~~ction isDocumentNode(el: ~~any~~): el is Document {	38	export const isDocumentNode = (el: unknown): el is Document => isNode(el) && el.nodeType === 9;
49	return isNode(el) && el.nodeType === 9;
50	}
51		39
52	export ~~fun~~ction isDocumentTypeNode(el: ~~any~~): el is DocumentType {	40	export const isDocumentTypeNode = (el: unknown): el is DocumentType => isNode(el) && el.nodeType === 10;
53	return isNode(el) && el.nodeType === 10;
54	}
55		41
56	export ~~fun~~ction isDocumentFragmentNode(el: any): el is DocumentFragment {	42	export const isDocumentFragmentNode = (el: any): el is DocumentFragment => isNode(el) && el.nodeType === 11;
57	return isNode(el) && el.nodeType === 11;
58	}
59		43
60	export function isWidget(v: any): v is _WidgetBase {	44	export const isWidget = (v: unknown): v is _WidgetBase => !!(v && "domNode" in (v as _WidgetBase));
61	return v && "domNode" in v;
62	}
63		45
64	export function isRendition(v: any): v is Rendition {	46	export const isRendition = (v: unknown): v is Rendition => !!(v && typeof (v as Rendition).getDomNode === "function");
65	return v && typeof v.getDomElement === "function";
66	}
67		47
68	/**	48	/**
69	* @deprecated use isRendition	49	* @deprecated use isRendition
70	*/	50	*/
71	export const isBuildContext = isRendition;	51	export const isBuildContext = isRendition;
72		52
73	export ~~fun~~ction isPlainObject(v: object) {	53	export const isPlainObject = (v: object) => {
74	if (typeof v !== "object")	54	if (typeof v !== "object")
75	return false;	55	return false;
76		56
@@ -78,23 +58,21 export function isPlainObject(v: object)
78	return !vp \|\| vp === Object.prototype;	58	return !vp \|\| vp === Object.prototype;
79	}	59	}
80		60
81	export ~~fun~~ction isWidgetConstructor(v: ~~any~~): v is _WidgetBaseConstructor {	61	export const isWidgetConstructor = (v: unknown): v is _WidgetBaseConstructor =>
82	~~return~~ typeof v === "function" && v.prototype && (	62	typeof v === "function" && v.prototype && (
83	"domNode" in v.prototype \|\|	63	"domNode" in v.prototype \|\|
84	"buildRendering" in v.prototype	64	"buildRendering" in v.prototype
85	);	65	);
86	}	66
87		67
88	/** Tests whether the specified node is placed in visible dom.	68	/** Tests whether the specified node is placed in visible dom.
89	* @param {Node} node The node to test	69	* @param {Node} node The node to test
90	*/	70	*/
91	export function isInPage(node: Node) {	71	export const isInPage = (node: Node) => node === document.body ? false : document.body.contains(node);
92	return (node === document.body) ? false : document.body.contains(node);
93	}
94		72
95	export ~~fun~~ction isRecursivelyDestroyable(target: ~~any~~): target is IRecursivelyDestroyable {	73	export const isRecursivelyDestroyable = (target: unknown): target is IRecursivelyDestroyable =>
96	~~return~~ target && typeof target.destroyRecursive === "function";	74	!!(target && typeof (target as IRecursivelyDestroyable).destroyRecursive === "function");
97	}	75
98		76
99		77
100	/** Destroys DOM Node with all contained widgets.	78	/** Destroys DOM Node with all contained widgets.
@@ -103,7 +81,7 export function isRecursivelyDestroyable
103	*	81	*
104	* @param target DOM Node or widget to destroy	82	* @param target DOM Node or widget to destroy
105	*/	83	*/
106	export ~~fun~~ction destroy(target: Node \| IDestroyable \| IRecursivelyDestroyable) {	84	export const destroy = (target: Node \| IDestroyable \| IRecursivelyDestroyable) => {
107	if (isRecursivelyDestroyable(target)) {	85	if (isRecursivelyDestroyable(target)) {
108	target.destroyRecursive();	86	target.destroyRecursive();
109	} else if (isDestroyable(target)) {	87	} else if (isDestroyable(target)) {
@@ -114,8 +92,10 export function destroy(target: Node \| I
114	if (w) {	92	if (w) {
115	w.destroyRecursive();	93	w.destroyRecursive();
116	} else {	94	} else {
117	~~registry~~.~~findWidgets~~(target).~~forEach~~(~~destroy~~);	95	emptyNode(target);
118	~~dom~~.~~destroy~~(~~target~~);	96	const parent = target.parentNode;
		97	if (parent)
		98	parent.removeChild(target);
119	}	99	}
120	}	100	}
121	}	101	}
@@ -123,11 +103,14 export function destroy(target: Node \| I
123		103
124	/** Empties a content of the specified node and destroys all contained widgets.	104	/** Empties a content of the specified node and destroys all contained widgets.
125	*	105	*
126	* @param target DOM node to .	106	* @param target DOM node to empty.
127	*/	107	*/
128	export ~~fun~~ction emptyNode(target: Node) {	108	export const emptyNode = (target: Node) => {
129	registry.findWidgets(target).forEach(destroy);	109	registry.findWidgets(target).forEach(destroy);
130	dom.empty(target);	110
		111	for(let c; c = target.lastChild;){ // intentional assignment
		112	target.removeChild(c);
		113	}
131	}	114	}
132		115
133	/** This function starts all widgets inside the DOM node if the target is a node	116	/** This function starts all widgets inside the DOM node if the target is a node
@@ -136,7 +119,7 export function emptyNode(target: Node)
136	*	119	*
137	* @param target DOM node to find and start widgets or the widget itself.	120	* @param target DOM node to find and start widgets or the widget itself.
138	*/	121	*/
139	export ~~fun~~ction startupWidgets(target: Node \| _WidgetBase, skipNode?: Node) {	122	export const startupWidgets = (target: Node \| _WidgetBase, skipNode?: Node) => {
140	if (isNode(target)) {	123	if (isNode(target)) {
141	if (isElementNode(target)) {	124	if (isElementNode(target)) {
142	const w = registry.byNode(target);	125	const w = registry.byNode(target);
@@ -153,15 +136,62 export function startupWidgets(target: N
153	}	136	}
154	}	137	}
155		138
156	export function locateNode(node: Node): DojoNodeLocation {	139	/** Places the specified DOM node at the specified location.
157	const next = node.nextSibling;	140	*
158	return next ?	141	* @param node The node which should be placed
159	[next, "before"] :	142	* @param refNodeOrId The reference node where the created
160	[node.parentNode, "last"];	143	* DOM should be placed.
		144	* @param position Optional parameter, specifies the
		145	* position relative to refNode. Default is "last" (i.e. last child).
		146	*/
		147	export const placeAt = (node: Node, refNodeOrId: string \| Node, position: DojoNodePosition = "last") => {
		148	const ref = typeof refNodeOrId == "string" ? document.getElementById(refNodeOrId) : refNodeOrId;
		149	if (!ref)
		150	return;
		151
		152	const parent = ref.parentNode;
		153
		154	const insertBefore = (node: Node, refNode: Node \| null) => parent && parent.insertBefore(node, refNode);
		155
		156	if (typeof position == "number") {
		157	if (ref.childNodes.length <= position) {
		158	ref.appendChild(node);
		159	} else {
		160	ref.insertBefore(node, ref.childNodes[position]);
		161	}
		162	} else {
		163	switch (position) {
		164	case "before":
		165	insertBefore(node, ref);
		166	break;
		167	case "after":
		168	insertBefore(node, ref.nextSibling);
		169	break;
		170	case "first":
		171	insertBefore(node, parent && parent.firstChild);
		172	break;
		173	case "last":
		174	insertBefore(node, null);
		175	break;
		176	case "only":
		177	emptyNode(ref);
		178	ref.appendChild(node);
		179	break;
		180	case "replace":
		181	if (parent)
		182	parent.replaceChild(node, ref);
		183	destroy(ref);
		184	break;
		185	}
		186	}
161	}	187	}
162		188
163	export const placeAt = (node: Node, refNodeOrId: string \| Node, position: DojoNodePosition) => {	189	/** Collects nodes from collection to an array.
164	const collect = (collection: HTMLCollection) => {	190	*
		191	* @param collection The collection of nodes.
		192	* @returns The array of nodes.
		193	*/
		194	export const collectNodes = (collection: HTMLCollection) => {
165	const items = [];	195	const items = [];
166	for (let i = 0, n = collection.length; i < n; i++) {	196	for (let i = 0, n = collection.length; i < n; i++) {
167	items.push(collection[i]);	197	items.push(collection[i]);
@@ -169,7 +199,11 export const placeAt = (node: Node, refN
169	return items;	199	return items;
170	};	200	};
171		201
172	const startup = (node: Node) => {	202	/** Starts widgets if the node contained in the document or in the started widget.
		203	*
		204	* @param node The node to start.
		205	*/
		206	export const autostartWidgets = (node: Node) => {
173	if (node.parentNode) {	207	if (node.parentNode) {
174	const parentWidget = registry.getEnclosingWidget(node.parentNode);	208	const parentWidget = registry.getEnclosingWidget(node.parentNode);
175	if (parentWidget && parentWidget._started)	209	if (parentWidget && parentWidget._started)
@@ -177,30 +211,4 export const placeAt = (node: Node, refN
177	}	211	}
178	if (isInPage(node))	212	if (isInPage(node))
179	startupWidgets(node);	213	startupWidgets(node);
180	};	214	}; No newline at end of file
181
182	const ref = typeof refNodeOrId == "string" ? document.getElementById(refNodeOrId) : refNodeOrId;
183	if (!ref)
184	return;
185
186	const parent = ref.parentNode;
187
188	if (typeof position == "number") {
189
190	} else {
191	switch(position) {
192	case "before":
193	if (parent)
194	parent.insertBefore(node,ref);
195	case "after":
196	if (parent)
197	parent.insertBefore(node, ref.nextSibling);
198	}
199	}
200
201	const startupPending = isDocumentFragmentNode(node) ? collect(node.children) : [node];
202
203	dom.place(node, refNodeOrId, position);
204
205	startupPending.forEach(startup);
206	} No newline at end of file

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

             declare namespace JSX {
-                interface DjxIntrinsicAttributes {
+                type Ref<T> = (value: T) => void;
+                interface DjxIntrinsicAttributes<E> {
                     /** alias for className */
                     class: string;
                     /** specifies handlers map for the events */
                     "data-dojo-attach-event": string;
+                    ref: Ref<E>;
                     /** @deprecated */
                     [attr: string]: any;
                 }
                 type LaxElement<E extends object> =
                     Pick<E, AssignableElementAttrNames<E>> &
-                    DjxIntrinsicAttributes;
+                    DjxIntrinsicAttributes<E>;
                 type LaxIntrinsicElementsMap = {
                     [tag in keyof HTMLElementTagNameMap]: LaxElement<HTMLElementTagNameMap[tag]>
                 type IntrinsicElements = {
                     [tag in keyof LaxIntrinsicElementsMap]: RecursivePartial<LaxIntrinsicElementsMap[tag]>;
                 }
+                interface ElementChildrenAttribute {
+                    children: {};
                 }
+                interface IntrinsicClassAttributes<T> {
+                    ref: (value: T) => void;
+                }
+            }

djx/src/test/ts/view/MyWidget.tsx +2 -2

                 counter = 0;
                 render() {
-                    const Frame = (props: any) => <div>{props.children}</div>;
+                    const Frame = ({children, ref}: {ref: JSX.Ref<HTMLDivElement>, children: any[]}) => <div ref={ref} >{children}</div>;
                     return <div className="myWidget" onsubmit={e => this._onSubmit(e)} tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
                         <h1 data-dojo-attach-point="titleNode"></h1>
-                        <Frame>
+                        <Frame ref={ v => {}}>
                             <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
                             <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
                         </Frame>

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