implab/implabjs-djx Commit - r52:0b9593714536

Fixed startup of DjxWidgetBase to start inner widgets...

cin -

r52:0b9593714536 default

parent child

Context file:

r52:0b9593714536

Collapse all files

src/main/ts/dom-inject.ts +1 -1

             import { id as mid } from "module";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { MapOf } from "@implab/core-amd/interfaces";
             import { mixin } from "@implab/core-amd/safe";
             const trace = TraceSource.get(mid);
             function on<T extends keyof HTMLElementEventMap>(node: HTMLElement, eventName: T, handler: (this: HTMLElement, ev: HTMLElementEventMap[T]) => any): () => void {
                 // Add an event listener to a DOM node
                 node.addEventListener(eventName, handler, false);
                 return () => node.removeEventListener(eventName, handler, false);
             }
             interface NodeLoadResult {
                 node: HTMLElement;
             }
             class DomInject {
                 injectionPoint?: HTMLElement;
                 injectAfter?: HTMLElement;
                 _map: MapOf<Promise<NodeLoadResult>> = {};
                 _inject<T extends keyof HTMLElementTagNameMap>(name: T, attr: Partial<HTMLElementTagNameMap[T]>) {
                     const node = document.createElement(name);
                     return new Promise<NodeLoadResult>((ok, fail) => {
                         const cleanup = () => {
                             noerr();
                             noload();
                         };
                         const noload = on(node, "load", () => {
                             ok({ node });
                             cleanup();
                         });
                         const noerr = on(node, "error", e => {
                             fail({
-                                erorr: e,
+                                error: e,
                                 node
                             });
                             cleanup();
                         });
                         mixin(node, attr);
                         const _injectionPoint = this.injectionPoint || document.head;
                         const _injectBefore = this.injectAfter ? this.injectAfter.nextSibling : null;
                         _injectionPoint.insertBefore(node, _injectBefore);
                     });
                 }
                 async injectScript(url: string) {
                     let d = this._map[url];
                     if (!d) {
                         trace.log("js {0}", url);
                         d = this._inject("script", {
                             type: "text/javascript",
                             charset: "utf-8",
                             src: url
                         });
                         this._map[url] = d;
                     }
                     try {
                         await d;
                         trace.log("done {0}", url);
                     } catch (e) {
                         trace.error("failed {0}: {1}", url, e);
                         throw e;
                     }
                 }
                 async injectStylesheet(url: string) {
                     let d = this._map[url];
                     if (!d) {
                         trace.log("js {0}", url);
                         d = this._inject("link", {
                             type: "text/css",
                             rel: "stylesheet",
                             href: url
                         });
                         this._map[url] = d;
                     }
                     try {
                         await d;
                         trace.log("done {0}", url);
                     } catch (e) {
                         trace.error("failed {0}: {1}", url, e);
                         throw e;
                     }
                 }
             };
             const instance = new DomInject();
             export default instance;

src/main/ts/tsx/DjxWidgetBase.ts +9 -1

             import { djbase, djclass } from "../declare";
             import _WidgetBase = require("dijit/_WidgetBase");
             import _AttachMixin = require("dijit/_AttachMixin");
-            import { BuildContext, isNode } from "./traits";
+            import { BuildContext, isNode, startupWidgets } from "./traits";
             import registry = require("dijit/registry");
             // type Handle = dojo.Handle;
             export interface EventArgs {
                 bubbles?: boolean;
                 cancelable?: boolean;
                 composed?: boolean;
             }
             export interface DjxWidgetBase<Attrs = any, Events extends { [name in keyof Events]: Event } = any> {
                 set<K extends keyof Attrs & string>(key: K, value: Attrs[K]): this;
                 set(props: Partial<Attrs>): this;
                 get<K extends keyof Attrs & string>(key: K): Attrs[K];
                 on<K extends keyof Events & string>(eventName: K, cb: (evt: Events[K]) => void): dojo.WatchHandle;
                 emit<K extends keyof Events & string>(eventName: K, evt: Omit<Events[K], keyof Event> & EventArgs ): void;
             }
             @djclass
             export abstract class DjxWidgetBase<Attrs = any, Events = any> extends djbase(_WidgetBase, _AttachMixin) {
                 buildRendering() {
                     this.domNode = this.render().getDomNode();
                     super.buildRendering();
                 }
                 abstract render(): BuildContext<HTMLElement>;
                 _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
                     baseNode: T,
                     getAttrFunc: (baseNode: T, attr: string) => string,
                     // tslint:disable-next-line: ban-types
                     attachFunc: (node: T, type: string, func?: Function) => dojo.Handle
                 ): boolean {
                     if (isNode(baseNode)) {
                         const w = registry.byNode(baseNode);
                         if (w) {
                             // from dijit/_WidgetsInTemplateMixin
                             this._processTemplateNode(w,
                                 (n, p) => n.get(p), // callback to get a property of a widget
                                 (widget, type, callback) => {
                                     if (!callback)
                                         throw new Error("The callback must be specified");
                                     // callback to do data-dojo-attach-event to a widget
                                     if (type in widget) {
                                         // back-compat, remove for 2.0
                                         return widget.connect(widget, type, callback as EventListener);
                                     } else {
                                         // 1.x may never hit this branch, but it's the default for 2.0
                                         return widget.on(type, callback);
                                     }
                                 });
                             // don't process widgets internals
                             return false;
                         }
                     }
                     return super._processTemplateNode(baseNode, getAttrFunc, attachFunc);
                 }
+                /** Starts current widget and all its supporting widgets (placed outside
+                 * `containerNode`) and child widgets (placed inside `containerNode`)*/
+                startup() {
+                    // startup supporting widgets
+                    startupWidgets(this.domNode, this.containerNode);
+                    super.startup();
                 }
+            }

src/main/ts/tsx/HtmlElementContext.ts 0 -2

             import dom = require("dojo/dom-construct");
-            import attr = require("dojo/dom-attr");
             import { argumentNotEmptyString } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
-            import registry = require("dijit/registry");
             export class HtmlElementContext extends BuildContextBase<HTMLElement> {
                 elementType: string;
                 _element: HTMLElement | undefined;
                 constructor(elementType: string) {
                     argumentNotEmptyString(elementType, "elementType");
                     super();
                     this.elementType = elementType;
                 }
                 _addChild(child: any): void {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     dom.place(this.getChildDom(child), this._element);
                 }
                 _create(attrs: object, children: any[]) {
                     this._element = dom.create(this.elementType, attrs);
                     if (children)
                         children.forEach(v => this._addChild(v));
                 }
                 _getDomNode() {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     return this._element;
                 }
             }

src/main/ts/tsx/traits.ts +57 0

+            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");
             type _WidgetBaseConstructor = typeof _WidgetBase;
             export type DojoNodePosition = "first" | "after" | "before" | "last" | "replace" | "only" | number;
             export interface BuildContext<TNode extends Node = Node> {
                 getDomNode(): TNode;
                 placeAt(refNode: string | Node, position?: DojoNodePosition): void;
             }
+            export interface IRecursivelyDestroyable {
+                destroyRecursive(): void;
+            }
             export function isNode(el: any): el is Node {
                 return el && el.nodeName && el.nodeType;
             }
             export function isElementNode(el: any): el is Element {
                 return isNode(el) && el.nodeType === 1;
             }
             export function isTextNode(el: any): el is Text {
                 return isNode(el) && el.nodeType === 3;
             }
             export function isProcessingInstructionNode(el: any): el is ProcessingInstruction {
                 return isNode(el) && el.nodeType === 7;
             }
             export function isCommentNode(el: any): el is Comment {
                 return isNode(el) && el.nodeType === 8;
             }
             export function isDocumentNode(el: any): el is Document {
                 return isNode(el) && el.nodeType === 9;
             }
             export function isDocumentTypeNode(el: any): el is DocumentType {
                 return isNode(el) && el.nodeType === 10;
             }
             export function isDocumentFragmentNode(el: any): el is DocumentFragment {
                 return isNode(el) && el.nodeType === 11;
             }
             export function isWidget(v: any): v is _WidgetBase {
                 return v && "domNode" in v;
             }
             export function isBuildContext(v: any): v is BuildContext {
                 return typeof v === "object" && typeof v.getDomElement === "function";
             }
             export function 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 {
                 return 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) {
                 return (node === document.body) ? false : document.body.contains(node);
             }
+            export function isRecursivelyDestroyable(target: any): target is IRecursivelyDestroyable {
+                return target && typeof target.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) {
+                if (isRecursivelyDestroyable(target)) {
+                    target.destroyRecursive();
+                } else if (isDestroyable(target)) {
+                    target.destroy();
+                } else if (isNode(target)) {
+                    const self = registry.byNode(target);
+                    if (self) {
+                        self.destroyRecursive();
+                    } else {
+                        registry.findWidgets(target).forEach(destroy);
+                        dom.destroy(target);
+                    }
+                }
+            }
+            /** Empties a content of the specified node and destroys all contained widgets.
+             *
+             * @param target DOM node to .
+             */
+            export function emptyNode(target: Node) {
+                registry.findWidgets(target).forEach(destroy);
+                dom.empty(target);
+            }
+            /** 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.
+             *
+             * @param target DOM node to find and start widgets or the widget itself.
+             */
+            export function startupWidgets(target: Node | _WidgetBase, skipNode?: Node) {
+                if (isNode(target)) {
+                    registry.findWidgets(target, skipNode).forEach(w => w.startup());
+                } else {
+                    target.startup();
+                }
+            }
  No newline at end of file

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

             /// <reference path="./css.d.ts"/>
             /// <reference path="./dijit.d.ts"/>
             declare namespace JSX {
                 interface DjxIntrinsicAttributes {
                     /** 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;
+                    /** @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 LaxElement<E extends object> = ExcludeMembers<Omit<E, "children">, (...args: any[]) => any> & DjxIntrinsicAttributes;
+                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;
                 type LaxIntrinsicElementsMap = {
                     [tag in keyof HTMLElementTagNameMap]: LaxElement<HTMLElementTagNameMap[tag]>
                 } & DjxIntrinsicElements;
                 type IntrinsicElements = {
                     [tag in keyof LaxIntrinsicElementsMap]: RecursivePartial<LaxIntrinsicElementsMap[tag]>;
                 }
             }

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