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") {
                     const ctx = new HtmlRendition(elementType);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else if (isWidgetConstructor(elementType)) {
                     const ctx = new WidgetRendition(elementType);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else if (typeof elementType === "function") {
                     const ctx = new FunctionRendition(elementType as (props: any) => Element);
                     if (args)
                         args.forEach(x => ctx.visitNext(x));
                     return ctx;
                 } else {
                     throw new Error(`The element type '${elementType}' is unsupported`);
                 }
             }
             export interface EventDetails<T = any> {
                 detail: T;
             }
             export interface EventSelector {
                 selectorTarget: HTMLElement;
                 target: HTMLElement;
             }
             export type DojoMouseEvent<T = any> = MouseEvent & EventSelector & EventDetails<T>;
             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.
              * This decorator can be applied to DjxWidgetBase subclass methods.
              *
              * ```
              *  @on("click")
              *  _onClick(eventObj: MouseEvent) {
              *      // ...
              *  }
              * ```
              */
             export const on = <E extends string>(...eventNames: E[]) =>
                 <K extends string,
                     T extends DjxWidgetBase<any, { [p in E]: EV }>,
                     EV extends Event
                 >(
                     target: T,
                     key: K,
                     _descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> | TypedPropertyDescriptor<() => void>
                 ): any => {
                     const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key }));
                     target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers;
                 };

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;
                 private _node: Node | undefined;
                 constructor(component: (...args: any[]) => any) {
                     super();
                     argumentNotNull(component, "component");
                     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
                     );
                 }
                 protected _getDomNode() {
                     if (!this._node)
                         throw new Error("The instance of the widget isn't created");
                     return this._node;
                 }
             }

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;
                 _element: HTMLElement | undefined;
                 constructor(elementType: string) {
                     argumentNotEmptyString(elementType, "elementType");
                     super();
                     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() {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     return this._element;
                 }
             }

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

-            import { Scope } from "./Scope";
+            import { IScope, Scope } from "./Scope";
-            import { destroy, Rendition } from "./traits";
+            import { destroy, isNode, isRendition, isWidget, Rendition } from "./traits";
             let _scope = Scope.dummy;
             const beginRender = async () => {
             }
             const endRender = () => {
             }
             export const getScope = () => _scope;
             export const render = async (rendition: () => Rendition, scope = Scope.dummy) => {
                 await beginRender();
                 const prev = _scope;
                 _scope = scope;
                 try {
                     const node = rendition().getDomNode();
                     scope.own(() => destroy(node));
                     return node;
                 } finally {
                     _scope = prev;
                     endRender();
                 }
             }
+            /** Renders DOM element for different types of the argument. */
+            export const getItemDom = (v: unknown, scope: IScope) => {
+                if (typeof v === "string" || typeof v === "number" || v instanceof RegExp || v instanceof Date) {
+                    // primitive types converted to the text nodes
+                    return document.createTextNode(v.toString());
+                } else if (isNode(v)) {
+                    // nodes are kept as is
+                    return v;
+                } else if (isRendition(v)) {
+                    // renditions are instantiated
+                    return v.getDomNode(scope);
+                } else if (isWidget(v)) {
+                    // widgets are converted to it's markup
+                    return v.domNode;
+                } else if (typeof v === "boolean" || v === null || v === undefined) {
+                    // null | undefined | boolean are removed, converted to comments
+                    return document.createComment(`[${typeof v} ${String(v)}]`);
+                } else {
+                    // bug: explicit error otherwise
+                    throw new Error("Invalid parameter: " + v);
+                }
+            }

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

             import { isNull, mixin } from "@implab/core-amd/safe";
-            import { isPlainObject, isNode, isRendition, DojoNodePosition, Rendition, isInPage, isWidget, isDocumentFragmentNode, startupWidgets } from "./traits";
+            import { isPlainObject, DojoNodePosition, Rendition, isDocumentFragmentNode, placeAt, collectNodes, autostartWidgets } from "./traits";
-            import dom = require("dojo/dom-construct");
+            import { IScope } from "./Scope";
-            import registry = require("dijit/registry");
+            import { getScope } from "./Renderer";
             export abstract class RenditionBase<TNode extends Node> implements Rendition<TNode> {
                 private _attrs = {};
                 private _children = new Array();
                 private _created: boolean = false;
                 visitNext(v: any) {
                     if (this._created)
                         throw new Error("The Element is already created");
                     if (isNull(v) || typeof v === "boolean")
                         // skip null, undefined, booleans ( this will work:  {value && <span>{value}</span>} )
                         return;
                     if (isPlainObject(v)) {
                         mixin(this._attrs, v);
                     } else if (v instanceof Array) {
                         v.forEach(x => this.visitNext(x));
                     } else {
                         this._children.push(v);
                     }
                 }
-                /** Renders DOM element for different types of the argument. */
+                ensureCreated(scope: IScope) {
-                protected getItemDom(v: any) {
-                    const tv = typeof v;
-                    if (tv === "string" || tv === "number" || v instanceof RegExp || v instanceof Date) {
-                        // primitive types converted to the text nodes
-                        return document.createTextNode(v.toString());
-                    } else if (isNode(v)) {
-                        // nodes are kept as is
-                        return v;
-                    } else if (isRendition(v)) {
-                        // renditions are instantiated
-                        return v.getDomNode();
-                    } else if (isWidget(v)) {
-                        // widgets are converted to it's markup
-                        return v.domNode;
-                    } else if (tv === "boolean" || v === null || v === undefined) {
-                        // null | undefined | boolean are removed, converted to comments
-                        return document.createComment(`[${tv} ${String(v)}]`);
-                    } else {
-                        // bug: explicit error otherwise
-                        throw new Error("Invalid parameter: " + v);
-                ensureCreated() {
                     if (!this._created) {
-                        this._create(this._attrs, this._children);
+                        this._create(this._attrs, this._children, scope);
                         this._children = [];
                         this._attrs = {};
                         this._created = true;
                     }
                 }
                 /** Is rendition was instantiated to the DOM node */
                 isCreated() {
                     return this._created;
                 }
                 /** Creates DOM node if not created. No additional actions are taken. */
-                getDomNode() {
+                getDomNode(scope?: IScope) {
-                    this.ensureCreated();
+                    this.ensureCreated(scope || getScope());
                     return this._getDomNode();
                 }
                 /** Creates DOM node if not created, places it to the specified position
                  * and calls startup() method for all widgets contained by this node.
                  *
                  * @param {string | Node} refNode The reference node where the created
                  *   DOM should be placed.
                  * @param {DojoNodePosition} position Optional parameter, specifies the
                  *   position relative to refNode. Default is "last" (i.e. last child).
                  */
-                placeAt(refNode: string | Node, position?: DojoNodePosition) {
+                placeAt(refNode: string | Node, position: DojoNodePosition = "last") {
                     const domNode = this.getDomNode();
-                    const collect = (collection: HTMLCollection) => {
+                    const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.children) : [domNode];
-                        const items = [];
-                        for (let i = 0, n = collection.length; i < n; i++) {
-                            items.push(collection[i]);
-                        return items;
-                    };
-                    const startup = (node: Node) => {
+                    placeAt(domNode, refNode, position);
-                        if (node.parentNode) {
-                            const parentWidget = registry.getEnclosingWidget(node.parentNode);
-                            if (parentWidget && parentWidget._started)
-                                return startupWidgets(node);
-                        if (isInPage(node))
-                            startupWidgets(node);
-                    };
-                    const startupPending = isDocumentFragmentNode(domNode) ? collect(domNode.children) : [domNode];
+                    startupPending.forEach(autostartWidgets);
-                    dom.place(domNode, refNode, position);
-                    startupPending.forEach(startup);
                 }
-                protected abstract _create(attrs: object, children: any[]): void;
+                protected abstract _create(attrs: object, children: unknown[], scope: IScope): void;
                 protected abstract _getDomNode(): TNode;
             }

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);
             export class WatchRendition<T> extends RenditionBase<Node> {
                 private readonly _factory: (arg: T) => any;
                 private _node: Node;
                 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() {
                     if (!this._node)
                         throw new Error("The instance of the widget isn't created");
                     return this._node;
                 }
             }

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 {
                 domNode: Node;
                 containerNode?: Node;
                 placeAt?(refNode: string | Node, position?: DojoNodePosition): void;
                 startup?(): void;
                 addChild?(widget: any, index?: number): void;
             }
             export type _WidgetCtor = new (attrs: any, srcNode?: string | Node) => _Widget;
             export class WidgetRendition extends RenditionBase<Node> {
                 readonly widgetClass: _WidgetCtor;
                 _instance: _Widget | undefined;
                 constructor(widgetClass: _WidgetCtor) {
                     super();
                     argumentNotNull(widgetClass, "widgetClass");
                     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) {
                                 instance.addChild(w);
                             } else {
                                 if (!instance.containerNode)
                                     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 {
                         if (!instance.containerNode)
                             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
                         // 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(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));
                     }
                 }
                 private _getInstance() {
                     if (!this._instance)
                         throw new Error("The instance of the widget isn't created");
                     return this._instance;
                 }
                 protected _getDomNode() {
                     if (!this._instance)
                         throw new Error("The instance of the widget isn't created");
                     return this._instance.domNode;
                 }
                 /** Overrides default placeAt implementation. Calls placeAt of the
                  * widget and then starts it.
                  *
                  * @param refNode A node or id of the node where the widget should be placed.
                  * @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);
                         // fix the dojo startup behavior when the widget is placed
                         // directly to the document and doesn't have any enclosing widgets
                         const parentWidget = instance.domNode.parentNode ?
                             registry.getEnclosingWidget(instance.domNode.parentNode) : null;
                         if (!parentWidget && isInPage(instance.domNode) && typeof instance.startup === "function")
                             instance.startup();
                     } else {
                         // the widget doesn't have a placeAt method, strange but whatever
                         super.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

             import { IDestroyable } from "@implab/core-amd/interfaces";
             import { isDestroyable } from "@implab/core-amd/safe";
             import _WidgetBase = require("dijit/_WidgetBase");
             import registry = require("dijit/registry");
-            import dom = require("dojo/dom-construct");
+            import { IScope } from "./Scope";
             type _WidgetBaseConstructor = typeof _WidgetBase;
             export type DojoNodePosition = "first" | "after" | "before" | "last" | "replace" | "only" | number;
-            export type DojoNodeLocation = [Node | null, DojoNodePosition];
+            export type DojoNodeLocation = [Node, DojoNodePosition];
             export interface Rendition<TNode extends Node = Node> {
-                getDomNode(): TNode;
+                getDomNode(scope?: IScope): TNode;
                 placeAt(refNode: string | Node, position?: DojoNodePosition): void;
             }
             /**
              * @deprecated use Rendition
              */
             export type BuildContext<TNode extends Node = Node> = Rendition<TNode>;
             export interface IRecursivelyDestroyable {
                 destroyRecursive(): void;
             }
-            export function isNode(el: any): el is Node {
+            export const isNode = (el: unknown): el is Node => !!(el && (el as Node).nodeName && (el as Node).nodeType);
-                return el && el.nodeName && el.nodeType;
-            export function isElementNode(el: any): el is Element {
+            export const isElementNode = (el: unknown): el is Element => isNode(el) && el.nodeType === 1;
-                return isNode(el) && el.nodeType === 1;
-            export function isTextNode(el: any): el is Text {
+            export const isTextNode = (el: unknown): el is Text => isNode(el) && el.nodeType === 3;
-                return isNode(el) && el.nodeType === 3;
-            export function isProcessingInstructionNode(el: any): el is ProcessingInstruction {
+            export const isProcessingInstructionNode = (el: unknown): el is ProcessingInstruction => isNode(el) && el.nodeType === 7;
-                return isNode(el) && el.nodeType === 7;
-            export function isCommentNode(el: any): el is Comment {
+            export const isCommentNode = (el: unknown): el is Comment => isNode(el) && el.nodeType === 8;
-                return isNode(el) && el.nodeType === 8;
-            export function isDocumentNode(el: any): el is Document {
+            export const isDocumentNode = (el: unknown): el is Document => isNode(el) && el.nodeType === 9;
-                return isNode(el) && el.nodeType === 9;
-            export function isDocumentTypeNode(el: any): el is DocumentType {
+            export const isDocumentTypeNode = (el: unknown): el is DocumentType => isNode(el) && el.nodeType === 10;
-                return isNode(el) && el.nodeType === 10;
-            export function isDocumentFragmentNode(el: any): el is DocumentFragment {
+            export const isDocumentFragmentNode = (el: any): el is DocumentFragment => isNode(el) && el.nodeType === 11;
-                return isNode(el) && el.nodeType === 11;
-            export function isWidget(v: any): v is _WidgetBase {
+            export const isWidget = (v: unknown): v is _WidgetBase => !!(v && "domNode" in (v as _WidgetBase));
-                return v && "domNode" in v;
-            export function isRendition(v: any): v is Rendition {
+            export const isRendition = (v: unknown): v is Rendition => !!(v && typeof (v as Rendition).getDomNode === "function");
-                return v && typeof v.getDomElement === "function";
             /**
              * @deprecated use isRendition
              */
             export const isBuildContext = isRendition;
-            export function isPlainObject(v: object) {
+            export const isPlainObject = (v: object) => {
                 if (typeof v !== "object")
                     return false;
                 const vp = Object.getPrototypeOf(v);
                 return !vp || vp === Object.prototype;
             }
-            export function isWidgetConstructor(v: any): v is _WidgetBaseConstructor {
+            export const isWidgetConstructor = (v: unknown): v is _WidgetBaseConstructor =>
-                return typeof v === "function" && v.prototype && (
+                typeof v === "function" && v.prototype && (
                     "domNode" in v.prototype ||
                     "buildRendering" in v.prototype
                 );
             /** Tests whether the specified node is placed in visible dom.
              *  @param {Node} node The node to test
              */
-            export function isInPage(node: Node) {
+            export const isInPage = (node: Node) => node === document.body ? false : document.body.contains(node);
-                return (node === document.body) ? false : document.body.contains(node);
-            export function isRecursivelyDestroyable(target: any): target is IRecursivelyDestroyable {
+            export const isRecursivelyDestroyable = (target: unknown): target is IRecursivelyDestroyable =>
-                return target && typeof target.destroyRecursive === "function";
+                !!(target && typeof (target as IRecursivelyDestroyable).destroyRecursive === "function");
             /** Destroys DOM Node with all contained widgets.
              * If the specified node is the root node of a widget, then the
              * widget will be destroyed.
              *
              * @param target DOM Node or widget to destroy
              */
-            export function destroy(target: Node | IDestroyable | IRecursivelyDestroyable) {
+            export const destroy = (target: Node | IDestroyable | IRecursivelyDestroyable) => {
                 if (isRecursivelyDestroyable(target)) {
                     target.destroyRecursive();
                 } else if (isDestroyable(target)) {
                     target.destroy();
                 } else if (isNode(target)) {
                     if (isElementNode(target)) {
                         const w = registry.byNode(target);
                         if (w) {
                             w.destroyRecursive();
                         } else {
-                            registry.findWidgets(target).forEach(destroy);
+                            emptyNode(target);
-                            dom.destroy(target);
+                            const parent = target.parentNode;
+                            if (parent)
+                                parent.removeChild(target);
                         }
                     }
                 }
             }
             /** Empties a content of the specified node and destroys all contained widgets.
              *
-             * @param target DOM node to .
+             * @param target DOM node to empty.
              */
-            export function emptyNode(target: Node) {
+            export const emptyNode = (target: Node) => {
                 registry.findWidgets(target).forEach(destroy);
-                dom.empty(target);
+                for(let c; c = target.lastChild;){ // intentional assignment
+                    target.removeChild(c);
+                }
             }
             /** This function starts all widgets inside the DOM node if the target is a node
              * or starts widget itself if the target is the widget. If the specified node
              * associated with the widget that widget will be started.
              *
              * @param target DOM node to find and start widgets or the widget itself.
              */
-            export function startupWidgets(target: Node | _WidgetBase, skipNode?: Node) {
+            export const startupWidgets = (target: Node | _WidgetBase, skipNode?: Node) => {
                 if (isNode(target)) {
                     if (isElementNode(target)) {
                         const w = registry.byNode(target);
                         if (w) {
                             if (w.startup)
                                 w.startup();
                         } else {
                             registry.findWidgets(target, skipNode).forEach(x => x.startup());
                         }
                     }
                 } else {
                     if (target.startup)
                         target.startup();
                 }
             }
-            export function locateNode(node: Node): DojoNodeLocation {
+            /** Places the specified DOM node at the specified location.
-                const next = node.nextSibling;
-                return next ?
+             * @param node The node which should be placed
-                    [next, "before"] :
+             * @param refNodeOrId The reference node where the created
-                    [node.parentNode, "last"];
+             *  DOM should be placed.
+             * @param position  Optional parameter, specifies the
+             *  position relative to refNode. Default is "last" (i.e. last child).
+             */
+            export const placeAt = (node: Node, refNodeOrId: string | Node, position: DojoNodePosition = "last") => {
+                const ref = typeof refNodeOrId == "string" ? document.getElementById(refNodeOrId) : refNodeOrId;
+                if (!ref)
+                    return;
+                const parent = ref.parentNode;
+                const insertBefore = (node: Node, refNode: Node | null) => parent && parent.insertBefore(node, refNode);
+                if (typeof position == "number") {
+                    if (ref.childNodes.length <= position) {
+                        ref.appendChild(node);
+                    } else {
+                        ref.insertBefore(node, ref.childNodes[position]);
+                    }
+                } else {
+                    switch (position) {
+                        case "before":
+                            insertBefore(node, ref);
+                            break;
+                        case "after":
+                            insertBefore(node, ref.nextSibling);
+                            break;
+                        case "first":
+                            insertBefore(node, parent && parent.firstChild);
+                            break;
+                        case "last":
+                            insertBefore(node, null);
+                            break;
+                        case "only":
+                            emptyNode(ref);
+                            ref.appendChild(node);
+                            break;
+                        case "replace":
+                            if (parent)
+                                parent.replaceChild(node, ref);
+                            destroy(ref);
+                            break;
+                    }
+                }
             }
-            export const placeAt = (node: Node, refNodeOrId: string | Node, position: DojoNodePosition) => {
+            /** Collects nodes from collection to an array.
-                const collect = (collection: HTMLCollection) => {
+             * @param collection The collection of nodes.
+             * @returns The array of nodes.
+             */
+            export const collectNodes = (collection: HTMLCollection) => {
                 const items = [];
                 for (let i = 0, n = collection.length; i < n; i++) {
                     items.push(collection[i]);
                 }
                 return items;
             };
-                const startup = (node: Node) => {
+            /** Starts widgets if the node contained in the document or in the started widget.
+             *
+             * @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);
                 }
                 if (isInPage(node))
                     startupWidgets(node);
-                };
+            };
  No newline at end of file
-                const ref = typeof refNodeOrId == "string" ? document.getElementById(refNodeOrId) : refNodeOrId;
-                if (!ref)
-                    return;
-                const parent = ref.parentNode;
-                if (typeof position == "number") {
-                } else {
-                    switch(position) {
-                        case "before":
-                            if (parent)
-                                parent.insertBefore(node,ref);
-                        case "after":
-                            if (parent)
-                                parent.insertBefore(node, ref.nextSibling);
-                const startupPending = isDocumentFragmentNode(node) ? collect(node.children) : [node];
-                dom.place(node, refNodeOrId, position);
-                startupPending.forEach(startup);
-            }
  No newline at end of file

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

             /// <reference path="./css.d.ts"/>
             declare namespace JSX {
-                interface DjxIntrinsicAttributes {
+                type Ref<T> = (value: T) => void;
+                interface DjxIntrinsicAttributes<E> {
                     /** alias for className */
                     class: string;
                     /** specifies the name of the property in the widget where the the
                      * reference to the current object will be stored
                      */
                     "data-dojo-attach-point": string;
                     /** specifies handlers map for the events */
                     "data-dojo-attach-event": string;
+                    ref: Ref<E>;
                     /** @deprecated */
                     [attr: string]: any;
                 }
                 interface DjxIntrinsicElements {
                 }
                 type RecursivePartial<T> = T extends string | number | boolean | null | undefined | Function ?
                     T :
                     { [k in keyof T]?: RecursivePartial<T[k]> };
                 type MatchingMemberKeys<T, U> = {
                     [K in keyof T]: T[K] extends U ? K : never;
                 }[keyof T];
                 type NotMatchingMemberKeys<T, U> = {
                     [K in keyof T]: T[K] extends U ? never : K;
                 }[keyof T];
                 type ExtractMembers<T, U> = Pick<T, MatchingMemberKeys<T, U>>;
                 type ExcludeMembers<T, U> = Pick<T, NotMatchingMemberKeys<T, U>>;
                 type ElementAttrNames<E> = NotMatchingMemberKeys<E, (...args: any[]) => any>;
                 type ElementAttrType<E, K extends keyof any> = K extends keyof E ? RecursivePartial<E[K]> : string;
                 type ElementAttrNamesBlacklist = "children" | "getRootNode" | keyof EventTarget;
                 /** This type extracts keys of the specified parameter E by the following rule:
                  *  1. skips all ElementAttrNamesBlacklist
                  *  2. skips all methods except with the signature of event handlers
                  */
                 type AssignableElementAttrNames<E> = {
                     [K in keyof E]: K extends ElementAttrNamesBlacklist ? never :
                         ((evt: Event) => any) extends E[K] ? K :
                         E[K] extends ((...args: any[]) => any) ? never :
                         K;
                 }[keyof E];
                 type LaxElement<E extends object> =
                     Pick<E, AssignableElementAttrNames<E>> &
-                    DjxIntrinsicAttributes;
+                    DjxIntrinsicAttributes<E>;
                 type LaxIntrinsicElementsMap = {
                     [tag in keyof HTMLElementTagNameMap]: LaxElement<HTMLElementTagNameMap[tag]>
                 } & DjxIntrinsicElements;
                 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

             import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
             import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
             import { createElement, on } from "../tsx";
             interface MyWidgetAttrs {
                 title: string;
                 counter: number;
             }
             interface MyWidgetEvents {
                 "count-inc": Event & {
                     detail: number;
                 };
                 "count-dec": Event & {
                     detail: number;
                 };
             }
             @djclass
             export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {
                 @bind({ node: "titleNode", type: "innerHTML" })
                 title = "";
                 @prototype()
                 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>
                     </div>;
                 }
                 postCreate() {
                     super.postCreate();
                     this.on("click", () => {});
                 }
                 _onSubmit(e: Event) {
                 }
                 _onIncClick(e: MouseEvent) {
                     this.set("counter", this.counter + 1);
                     this.emit("count-inc", { bubbles: false });
                 }
                 _onDecClick() {
                     this.emit("count-dec", { bubbles: false, detail: this.counter });
                 }
                 @on("count-inc")
                 private _onCounterInc(evt: Event & { detail: number; x?: number; }) {
                 }
                 @on("click", "keydown")
                 protected _onClick(event: MouseEvent | KeyboardEvent) {
                 }
             }

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