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