implab/implabjs-djx Commit - r93:d99e2014cea4

minor code cleanups

cin -

r93:d99e2014cea4 default

parent child

Context file:

r93:d99e2014cea4

Collapse all files

djx/build.gradle +2 -2

             plugins {
                 id "org.implab.gradle-typescript" version "1.3.3"
                 id "ivy-publish"
             }
             typescript {
                 compilerOptions {
                     lib = ["es5", "dom", "scripthost", "es2015.promise", "es2015.symbol", "es2015.iterable"]
-                    //listFiles = true
+                    // listFiles = true
                     declaration = true
                     strict = true
                     types = []
                     module = "amd"
                     it.target = "es5"
                     experimentalDecorators = true
-                    noUnusedLocals = true
+                    noUnusedLocals = false
                     jsx = "react"
                     jsxFactory = "createElement"
                     moduleResolution = "node"
                     // dojo-typings are sick
                     skipLibCheck = true
                     // traceResolution = true
                     // baseUrl = "./"
                     // paths = [ "*": [ "$projectDir/src/typings/*" ] ]
                     // baseUrl = "$projectDir/src/typings"
                     // typeRoots = ["$projectDir/src/typings"]
                 }
                 tscCmd = "$projectDir/node_modules/.bin/tsc"
                 tsLintCmd = "$projectDir/node_modules/.bin/tslint"
             	esLintCmd = "$projectDir/node_modules/.bin/eslint"
             }
             configureTsMain {
                 sourceFiles {
                     from sources.main.typings
                 }
                 compilerOptions {
                     // baseUrl = "$projectDir/src"
                     /*paths = [
                         "dojo/*" : [ "typings/dojo/*" ],
                         "dijit/*" : [ "typings/dijit/*" ]
                     ]*/
                     types = ["requirejs", "@implab/dojo-typings"]
                 }
             }
             configureTsTest {
                 compilerOptions {
                     typeRoots = []
                     types = ["requirejs", sources.main.output.typingsDir.get().toString() ]
                 }
             }
             npmPackMeta {
                 meta {
                     name = "@$npmScope/$project.name"
                 }
             }
             task npmPackTypings(type: Copy) {
                 dependsOn typings
                 npmPackContents.dependsOn it
                 from typescript.typingsDir
                 into npm.packageDir
             }
             task printVersion {
                 doLast {
                     println "packageName: ${npmPackMeta.metadata.get().name}";
                     println "version: $version";
                     println "target: $typescript.compilerOptions.target";
                     println "module: $typescript.compilerOptions.module";
                     println "symbols: $symbols";
                 }
             }

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

             import { Constructor, IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
             import { HtmlRendition } from "./tsx/HtmlRendition";
             import { WidgetRendition } from "./tsx/WidgetRendition";
             import { destroy, 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";
             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,
                 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,
                 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,
                 cleanupOrOwner: { own: CleanFn } | CleanFn = () => { }
             ) {
                 let rendition = new FunctionRendition(() => render(target.get(prop)));
                 const _own = cleanupOrOwner instanceof Function ? cleanupOrOwner : (x: IRemovable) => cleanupOrOwner.own(x);
                 _own(target.watch(prop, (_name, oldValue, newValue) => {
                     if (oldValue !== newValue) {
                         const newRendition = new FunctionRendition(() => render(newValue));
                         newRendition.placeAt(rendition.getDomNode(), "replace");
                         destroy(rendition.getDomNode());
                         rendition = newRendition;
                     }
                 }));
                 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 }))
+                    const handlers = eventNames.map(eventName => ({ eventName, handlerMethod: key }));
                     target._eventHandlers = target._eventHandlers ? target._eventHandlers.concat(handlers) : handlers;
                 };

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

             import dom = require("dojo/dom-construct");
             import { argumentNotEmptyString } from "@implab/core-amd/safe";
             import { RenditionBase } from "./RenditionBase";
             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 {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     dom.place(this.getItemDom(child), this._element);
                 }
                 _create(attrs: object, children: any[]) {
                     this._element = dom.create(this.elementType, attrs);
-                    if (children)
+                    children.forEach(v => this._addChild(v));
-                        children.forEach(v => this._addChild(v));
                 }
                 _getDomNode() {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     return this._element;
                 }
             }

djx/src/main/ts/tsx/RenditionBase.ts +5 -4

             import { isNull, mixin } from "@implab/core-amd/safe";
             import { isPlainObject, isNode, isRendition, DojoNodePosition, Rendition, isInPage, isWidget, isDocumentFragmentNode, startupWidgets } from "./traits";
             import dom = require("dojo/dom-construct");
             import registry = require("dijit/registry");
             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. */
                 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 as instantinated
+                        // 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._children = [];
                         this._attrs = {};
                         this._created = true;
                     }
                 }
-                /** @deprecated will be removed in 1.0.0, use getDomNode() */
+                /** Is rendition was instantiated to the DOM node */
-                getDomElement() {
+                isCreated() {
-                    return this.getDomNode();
+                    return this._created;
                 }
                 /** Creates DOM node if not created. No additional actions are taken. */
                 getDomNode() {
                     this.ensureCreated();
                     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) {
                     const domNode = this.getDomNode();
                     const collect = (collection: HTMLCollection) => {
                         const items = [];
                         for (let i = 0, n = collection.length; i < n; i++) {
                             items.push(collection[i]);
                         }
                         return items;
                     };
                     const startup = (node: Node) => {
                         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];
                     dom.place(domNode, refNode, position);
                     startupPending.forEach(startup);
                 }
                 protected abstract _create(attrs: object, children: any[]): void;
                 protected abstract _getDomNode(): TNode;
             }

djx/src/main/ts/tsx/traits.ts +16 -12

             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 Rendition<TNode extends Node = Node> {
                 getDomNode(): 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 {
                 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 isRendition(v: any): v is Rendition {
                 return v && typeof v.getDomElement === "function";
             }
             /**
              * @deprecated use isRendition
              */
             export const isBuildContext = isRendition;
             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 w = isElementNode(target) ? registry.byNode(target) : undefined;
+                    if (isElementNode(target)) {
-                    if (w) {
+                        const w = registry.byNode(target);
-                        w.destroyRecursive();
+                        if (w) {
-                    } else {
+                            w.destroyRecursive();
-                        registry.findWidgets(target).forEach(destroy);
+                        } else {
-                        dom.destroy(target);
+                            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. 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) {
                 if (isNode(target)) {
-                    const w = isElementNode(target) ? registry.byNode(target) : undefined;
+                    if (isElementNode(target)) {
-                    if (w) {
+                        const w = registry.byNode(target);
-                        if (w.startup)
+                        if (w) {
-                            w.startup();
+                            if (w.startup)
-                    } else {
+                                w.startup();
-                        registry.findWidgets(target, skipNode).forEach(x => x.startup());
+                        } else {
+                            registry.findWidgets(target, skipNode).forEach(x => x.startup());
+                        }
                     }
                 } else {
                     if (target.startup)
                         target.startup();
                 }
             }

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

             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>;
                     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>
                             <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")
-                _onCounterInc(evt: Event & { detail: number; x?: number; }) {
+                private _onCounterInc(evt: Event & { detail: number; x?: number; }) {
                 }
                 @on("click", "keydown")
                 protected _onClick(event: MouseEvent | KeyboardEvent) {
                 }
             }

djx/src/test/tsconfig.json +1 0

             {
                 "extends": "../tsconfig",
                 "compilerOptions": {
+                    "noUnusedLocals": false,
                     //"rootDir": "ts",
                     "rootDirs": [
                         "ts",
                         "typings",
                         "../main/ts",
                         "../main/typings"
                     ],
                     "types": ["requirejs", "../main/typings", "@implab/dojo-typings"]
                 }
             }

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