implab/implabjs-djx Commit - r101:bb6b1db1b430

Testing nested watch, release candidate

cin -

r101:bb6b1db1b430 v1.3

parent child

Context file:

r101:bb6b1db1b430

Collapse all files

gradle.properties created 644 +1 0

			@@ -0,0 +1,1
		1	symbols=local No newline at end of file

djx/gradle.properties 0 -1

              license=BSD-2-Clause
              repository=http://hg.code.sf.net/p/implabjs/djx
              npmScope=implab
-             symbols=pack
  No newline at end of file

djx/src/main/ts/observable.ts +3 -3

                  let done = false;
                  return {
-                     next: (value: T) => done && next(value),
-                     error: (e: unknown) => done && (done = true, error(e)),
-                     complete: () => done && (done = true, complete())
+                     next: (value: T) => !done && next(value),
+                     error: (e: unknown) => !done && (done = true, error(e)),
+                     complete: () => !done && (done = true, complete())
                  };
              }

djx/src/main/ts/tsx.ts +2 0

                  prop: K,
                  render: (model: StatefulProps<T>[K]) => any
              ) {
                  return new WatchRendition(
                      render,
                      observe(({next}) => {
                              prop,
                              (_prop, oldValue, newValue) => oldValue !== newValue && next(newValue)
                          );
+                         next(target.get(prop));
                          return () => h.remove();
                      })
                  )

djx/src/main/ts/tsx/FunctionRendition.ts +3 -6

              import { argumentNotNull } from "@implab/core-amd/safe";
              import { getItemDom } from "./render";
              import { RenditionBase } from "./RenditionBase";
-             import { IScope } from "./Scope";
              export class FunctionRendition extends RenditionBase<Node> {
                  private _component: (...args: any[]) => any;
                      this._component = component;
                  }
-                 protected _create(attrs: object, children: any[], scope: IScope) {
+                 protected _create(attrs: object, children: any[]) {
                      const _attrs: any = attrs || {};
-                     const _children = children.map(x => getItemDom(x, scope));
+                     const _children = children.map(x => getItemDom(x));
                      this._node = getItemDom(
-                         this._component.call(null, { ..._attrs, children: _children }),
-                         scope
-                     );
+                         this._component.call(null, { ..._attrs, children: _children }));
                  }
                  protected _getDomNode() {

djx/src/main/ts/tsx/HtmlRendition.ts +19 -7

-             import dom = require("dojo/dom-construct");
+             import djDom = require("dojo/dom-construct");
+             import djAttr = require("dojo/dom-attr");
              import { argumentNotEmptyString } from "@implab/core-amd/safe";
              import { RenditionBase } from "./RenditionBase";
              import { placeAt } from "./traits";
              import { IScope } from "./Scope";
-             import { getItemDom } from "./render";
+             import { getItemDom, renderHook } from "./render";
-             export class HtmlRendition extends RenditionBase<HTMLElement> {
+             export class HtmlRendition extends RenditionBase<Element> {
                  elementType: string;
-                 _element: HTMLElement | undefined;
+                 _element: Element | undefined;
                  constructor(elementType: string) {
                      argumentNotEmptyString(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);
+                     placeAt(getItemDom(child), this._element);
                  }
-                 _create(attrs: object, children: unknown[], scope: IScope) {
-                     this._element = dom.create(this.elementType, attrs);
+                 _create({ xmlns, ref, ...attrs }: { xmlns?: string, ref?: JSX.Ref<Element> }, children: unknown[], scope: IScope) {
+                     if (xmlns) {
+                         this._element = document.createElementNS(xmlns, this.elementType);
+                         djAttr.set(this._element, attrs);
+                     } else {
+                         this._element = djDom.create(this.elementType, attrs);
+                     }
                      children.forEach(v => this._addChild(v, scope));
+                     const element =  this._element;
+                     if (ref)
+                         renderHook(() => ref(element));
                  }
                  _getDomNode() {

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

              import { id as mid } from "module";
              import { TraceSource } from "@implab/core-amd/log/TraceSource";
              import { argumentNotNull } from "@implab/core-amd/safe";
-             import { getItemDom, render } from "./render";
+             import { getScope, render } from "./render";
              import { RenditionBase } from "./RenditionBase";
-             import { IScope, Scope } from "./Scope";
+             import { Scope } from "./Scope";
              import { Observable } from "../observable";
+             import { destroy } from "./traits";
              const trace = TraceSource.get(mid);
                      this._node = document.createComment("WatchRendition placeholder");
                  }
-                 protected _create(attrs: object, children: any[], scope: IScope) {
+                 protected _create(attrs: object, children: any[]) {
+                     const scope = getScope();
                      scope.own(this._scope);
                      scope.own(this._subject.on({ next: this._onValue }));
                  }
                      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._component(value), this._scope);
-                     this.placeAt(prevNode, "replace");
+                     const [refNode, ...rest] = await render(this._component(value), this._node, "replace", this._scope);
+                     this._node = refNode;
+                     this._scope.own(() => rest.forEach(destroy));
                  }
                  protected _getDomNode() {

djx/src/main/ts/tsx/WidgetRendition.ts +15 -10

              import registry = require("dijit/registry");
              import ContentPane = require("dijit/layout/ContentPane");
              import { IScope } from "./Scope";
-             import { getItemDom, getScope } from "./render";
+             import { getItemDom, getScope, renderHook } from "./render";
              // tslint:disable-next-line: class-name
              export interface _Widget {
                  placeAt?(refNode: string | Node, position?: DojoNodePosition): void;
                  startup?(): void;
-                 addChild?(widget: any, index?: number): void;
+                 addChild?(widget: unknown, index?: number): void;
              }
-             export type _WidgetCtor = new (attrs: any, srcNode?: string | Node) => _Widget;
+             export type _WidgetCtor = new (attrs: {}, srcNode?: string | Node) => _Widget;
              export class WidgetRendition extends RenditionBase<Node> {
                  readonly widgetClass: _WidgetCtor;
                      this.widgetClass = widgetClass;
                  }
-                 _addChild(child: any, scope: IScope): void {
+                 _addChild(child: unknown, scope: IScope): void {
                      const instance = this._getInstance();
                      if (instance.addChild) {
                          } else if (isWidget(child)) {
                              instance.addChild(child);
                          } else {
-                             const childDom = getItemDom(child, scope);
+                             const childDom = getItemDom(child);
                              const w = isElementNode(childDom) ? registry.byNode(childDom) : undefined;
                              if (w) {
                                      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");
+                                 placeAt(getItemDom(child), instance.containerNode, "last");
                              }
                          }
                      } else {
                              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");
+                         placeAt(getItemDom(child), instance.containerNode, "last");
                      }
                  }
-                 protected _create(attrs: any, children: any[], scope: IScope) {
+                 protected _create({ref, ...attrs}: {ref?: JSX.Ref<_Widget>}, children: unknown[], scope: IScope) {
                      if (this.widgetClass.prototype instanceof ContentPane) {
                          // a special case for the ContentPane this is for
-                         // the compatibility with this heavy widget, all
+                         // compatibility with that 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)));
+                         children.forEach(child => content.appendChild(getItemDom(child)));
                          // set the content property to the parameters of the widget
                          const _attrs = { ...attrs, content };
                          children.forEach(x => this._addChild(x, scope));
                      }
+                     if (ref) {
+                         const instance = this._instance;
+                         renderHook(() => ref(instance));
+                     }
                  }
                  private _getInstance() {

djx/src/main/ts/tsx/render.ts +54 -10

-             import { IScope, Scope } from "./Scope";
-             import { destroy, isNode, isRendition, isWidget, Rendition } from "./traits";
+             import { TraceSource } from "@implab/core-amd/log/TraceSource";
+             import { isPromise } from "@implab/core-amd/safe";
+             import { id as mid } from "module";
+             import { Scope } from "./Scope";
+             import { autostartWidgets, collectNodes, DojoNodePosition, isDocumentFragmentNode, isNode, isRendition, isWidget, placeAt } from "./traits";
+             const trace = TraceSource.get(mid);
              let _scope = Scope.dummy;
-             const beginRender = async () => {
+             let renderCount = 0;
+             const hooks: (() => void)[] = [];
+             const guard = (cb: () => unknown) => {
+                 try {
+                     const result = cb()
+                     if (isPromise(result)) {
+                         const warn = (ret: unknown) => trace.error("The callback {0} competed asynchronously. result = {1}", cb, ret);
+                         result.then(warn, warn);
+                     }
+                 } catch (e) {
+                     trace.error(e);
+                 }
              }
+             /**
+              * Schedules rendering micro task
+              * @returns Promise
+              */
+             const beginRender = () => {
+                 renderCount++;
+                 return Promise.resolve();
+             }
+             /**
+              * Completes render operation
+              */
              const endRender = () => {
+                 if (!--renderCount) {
+                     hooks.forEach(guard);
+                     hooks.length = 0;
+                 }
+             }
+             export const renderHook = (hook: () => void) => {
+                 if (renderCount)
+                     hooks.push(hook);
+                 else
+                     guard(hook);
              }
              /** Returns the current scope */
               * @param rendition The rendition to be rendered
               * @param scope The scope
               */
-             export const render = async (rendition: unknown, scope = Scope.dummy) => {
+             export const render = async (rendition: unknown, refNode: Node, position: DojoNodePosition = "last", scope = Scope.dummy) => {
                  await beginRender();
                  const prev = _scope;
                  _scope = scope;
                  try {
-                     const node = getItemDom(rendition, scope);
-                     scope.own(() => destroy(node));
-                     return node;
+                     const domNode = getItemDom(rendition);
+                     const startupPending = isDocumentFragmentNode(domNode) ? collectNodes(domNode.children) : [domNode];
+                     placeAt(domNode, refNode, position);
+                     startupPending.forEach(autostartWidgets);
+                     return startupPending;
                  } finally {
                      _scope = prev;
                      endRender();
              }
              /** Renders DOM element for different types of the argument. */
-             export const getItemDom = (v: unknown, scope: IScope) => {
+             export const getItemDom = (v: unknown) => {
                  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());
                      return v;
                  } else if (isRendition(v)) {
                      // renditions are instantiated
-                     return v.getDomNode(scope);
+                     return v.getDomNode();
                  } else if (isWidget(v)) {
                      // widgets are converted to it's markup
                      return v.domNode;
                  } else if (v instanceof Array) {
                      // arrays will be translated to document fragments
                      const fragment = document.createDocumentFragment();
-                     v.map(item => getItemDom(item, scope))
+                     v.map(item => getItemDom(item))
                          .forEach(node => fragment.appendChild(node));
                      return fragment;
                  } else {

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

              import { isDestroyable } from "@implab/core-amd/safe";
              import _WidgetBase = require("dijit/_WidgetBase");
              import registry = require("dijit/registry");
-             import { IScope } from "./Scope";
              interface _WidgetBaseConstructor {
                  new <A = {}, E extends { [k in keyof E]: Event } = {}>(params?: Partial<_WidgetBase<E> & A>, srcNodeRef?: dojo.NodeOrString): _WidgetBase<E> & dojo._base.DeclareCreatedObject;
              export type DojoNodeLocation = [Node, DojoNodePosition];
              export interface Rendition<TNode extends Node = Node> {
-                 getDomNode(scope?: IScope): TNode;
+                 getDomNode(): TNode;
                  placeAt(refNode: string | Node, position?: DojoNodePosition): void;
              }

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

                  }
                  interface IntrinsicClassAttributes<T> {
-                     ref: (value: T) => void;
+                     ref?: (value: T) => void;
+                     children?: unknown;
                  }
              }

playground/build.gradle +15 0

                  id "ivy-publish"
              }
+             def container = "djx-playground"
              configurations {
                  npmLocal
              }
              task bundle {
                  dependsOn copyModules, processResourcesBundle, copyApp
+             }
+             task up(type: Exec) {
+                 dependsOn bundle
+                 commandLine "podman", "run", "--rm", "-d",
+                     "--name", container,
+                     "-p", "2078:80",
+                     "-v", "$buildDir/bundle:/srv/www/htdocs",
+                     "registry.implab.org/implab/apache2:latest"
+             }
+             task stop(type: Exec) {
+                 commandLine "podman", "stop", container
              }
  No newline at end of file

playground/src/main/ts/MainWidget.tsx +30 -2

              import { djbase, djclass } from "@implab/djx/declare";
              import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase";
-             import { createElement } from "@implab/djx/tsx";
+             import { createElement, watch } from "@implab/djx/tsx";
              import ProgressBar from "./ProgressBar";
+             import Button = require("dijit/form/Button");
              const ref = <W extends DjxWidgetBase, K extends keyof W>(target: W, name: K) => (v: W[K]) => target.set(name, v);
                  progressBar?: ProgressBar;
+                 count = 0;
+                 showCounter = false;
                  render() {
-                     return <div>
+                     return <div className="tundra">
                          <h2 ref={ref(this, "titleNode")}>Hi!</h2>
                          <ProgressBar ref={ref(this, "progressBar")}/>
+                         {watch(this, "showCounter", flag => flag &&
+                             <section style={{padding: "10px"}}>
+                                 <label>
+                                     Counter: {watch(this, "count", v => [<span>{v}</span>, " ", <span>sec</span>])}
+                                 </label>
+                             </section>
+                         )}
+                         <Button onClick={this._onToggleCounterClick}>Toggle counter</Button>
                      </div>;
                  }
+                 postCreate(): void {
+                     super.postCreate();
+                     const inc = () => {
+                         this.set("count", this.count + 1);
+                         this.defer(inc, 1000);
              }
+                     inc();
+                 }
+                 private _onToggleCounterClick = () => {
+                     this.set("showCounter", !this.showCounter);
+                 }
+             }

playground/src/main/ts/main.ts +3 0

              import MainWidget from "./MainWidget";
+             import "@implab/djx/css!dojo/resources/dojo.css"
+             import "@implab/djx/css!dijit/themes/dijit.css"
+             import "@implab/djx/css!dijit/themes/tundra/tundra.css"
              const w = new MainWidget();
              w.placeAt(document.body);
  No newline at end of file

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