implab/implabjs-djx Commit - r98:12074cb11473

file rename

cin -

r98:12074cb11473 v1.3

parent child

Context file:

r98:12074cb11473

Collapse all files

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

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

             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";
+            import { getItemDom } from "./render";
             export class HtmlRendition extends RenditionBase<HTMLElement> {
                 elementType: string;
                 _element: HTMLElement | undefined;
                 constructor(elementType: string) {
                     argumentNotEmptyString(elementType, "elementType");
                     super();
                     this.elementType = elementType;
                 }
                 _addChild(child: unknown, scope: IScope): void {
                     if (!this._element)
                         throw new Error("The HTML element isn't created");
                     placeAt(getItemDom(child, scope), this._element);
                 }
                 _create(attrs: object, children: unknown[], scope: IScope) {
                     this._element = dom.create(this.elementType, attrs);
                     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/RenditionBase.ts +1 -1

             import { isNull, mixin } from "@implab/core-amd/safe";
             import { isPlainObject, DojoNodePosition, Rendition, isDocumentFragmentNode, placeAt, collectNodes, autostartWidgets } from "./traits";
             import { IScope } from "./Scope";
-            import { getScope } from "./Renderer";
+            import { getScope } from "./render";
             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);
                     }
                 }
                 ensureCreated(scope: IScope) {
                     if (!this._created) {
                         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(scope?: IScope) {
                     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 = "last") {
                     const domNode = this.getDomNode();
                     const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.children) : [domNode];
                     placeAt(domNode, refNode, position);
                     startupPending.forEach(autostartWidgets);
                 }
                 protected abstract _create(attrs: object, children: unknown[], scope: IScope): void;
                 protected abstract _getDomNode(): TNode;
             }

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

             import { id as mid } from "module";
             import { TraceSource } from "@implab/core-amd/log/TraceSource";
             import { argumentNotNull } from "@implab/core-amd/safe";
-            import { render } from "./Renderer";
+            import { getItemDom, render } from "./render";
             import { RenditionBase } from "./RenditionBase";
             import { IScope, Scope } from "./Scope";
             import { Observable } from "../observable";
             const trace = TraceSource.get(mid);
-            const noop = () => {};
             export class WatchRendition<T> extends RenditionBase<Node> {
-                private readonly _factory: (arg: T) => any;
+                private readonly _component: (arg: T) => unknown;
                 private _node: Node;
                 private readonly _scope = new Scope();
                 private readonly _subject: Observable<T>;
-                constructor(component: (arg: T) => any, subject: Observable<T>) {
+                constructor(component: (arg: T) => unknown, subject: Observable<T>) {
                     super();
                     argumentNotNull(component, "component");
-                    this._factory = component;
+                    this._component = component;
                     this._subject = subject;
                     this._node = document.createComment("WatchRendition placeholder");
                 }
                 protected _create(attrs: object, children: any[], scope: IScope) {
                     scope.own(this._scope);
                     scope.own(this._subject.on({ next: this._onValue }));
                 }
-                private _onValue = (value: T) => void this._render(value).catch( e => trace.error(e));
+                private _onValue = (value: T) =>
+                    void this._render(value).catch( e => trace.error(e));
                 private async _render(value: T) {
                     const prevNode = this._node;
                     this._scope.clean();
-                    this._node = await render(() => this._factory(value), this._scope);
+                    this._node = await render(this._component(value), this._scope);
                     this.placeAt(prevNode, "replace");
                 }
                 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 +1 -1

             import { argumentNotNull } from "@implab/core-amd/safe";
             import { RenditionBase } from "./RenditionBase";
             import { DojoNodePosition, isElementNode, isInPage, isWidget, placeAt } from "./traits";
             import registry = require("dijit/registry");
             import ContentPane = require("dijit/layout/ContentPane");
             import { IScope } from "./Scope";
-            import { getItemDom, getScope } from "./Renderer";
+            import { getItemDom, getScope } from "./render";
             // 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, 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(scope));
                         } else if (isWidget(child)) {
                             instance.addChild(child);
                         } else {
                             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
                                 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
                         placeAt(getItemDom(child, scope), instance.containerNode, "last");
                     }
                 }
                 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(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, 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(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(scope?: IScope) {
                     this.ensureCreated(scope || getScope());
                     return this._getInstance();
                 }
             }

djx/src/main/ts/tsx/render.ts ~~djx/src/main/ts/tsx/Renderer.ts~~ renamed +13 -2

             import { IScope, Scope } from "./Scope";
             import { destroy, isNode, isRendition, isWidget, Rendition } from "./traits";
             let _scope = Scope.dummy;
             const beginRender = async () => {
             }
             const endRender = () => {
             }
+            /** Returns the current scope */
             export const getScope = () => _scope;
-            export const render = async (rendition: () => Rendition, scope = Scope.dummy) => {
+            /** Schedules the rendition to be rendered to the DOM Node
+             * @param rendition The rendition to be rendered
+             * @param scope The scope
+             */
+            export const render = async (rendition: unknown, scope = Scope.dummy) => {
                 await beginRender();
                 const prev = _scope;
                 _scope = scope;
                 try {
-                    const node = rendition().getDomNode();
+                    const node = getItemDom(rendition, scope);
                     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 if (v instanceof Array) {
+                    // arrays will be translated to document fragments
+                    const fragment = document.createDocumentFragment();
+                    v.map(item => getItemDom(item, scope))
+                        .forEach(node => fragment.appendChild(node));
+                    return fragment;
                 } else {
                     // bug: explicit error otherwise
                     throw new Error("Invalid parameter: " + v);
                 }
             }

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