implab/implabjs-djx Commit - r94:131e369d1143

Added Renderer, WatchRendition

cin -

r94:131e369d1143 default

parent child

Context file:

r94:131e369d1143

Collapse all files

djx/src/main/ts/tsx/Renderer.ts created 644 +26 0

@@ -0,0 +1,26
	1	import { Scope } from "./Scope";
	2	import { destroy, Rendition } from "./traits";
	3
	4	let _scope = Scope.dummy;
	5
	6	const beginRender = async () => {
	7	}
	8
	9	const endRender = () => {
	10	}
	11
	12	export const getScope = () => _scope;
	13
	14	export const render = async (rendition: () => Rendition, scope = Scope.dummy) => {
	15	await beginRender();
	16	const prev = _scope;
	17	_scope = scope;
	18	try {
	19	const node = rendition().getDomNode();
	20	scope.own(() => destroy(node));
	21	return node;
	22	} finally {
	23	_scope = prev;
	24	endRender();
	25	}
	26	}

djx/src/main/ts/tsx/Scope.ts created 644 +40 0

@@ -0,0 +1,40
	1	import { IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
	2	import { isDestroyable, isRemovable } from "@implab/core-amd/safe";
	3
	4	export interface IScope {
	5	own(target: (() => void) \| IDestroyable \| IRemovable): void;
	6	}
	7
	8	export class Scope implements IDestroyable, IScope {
	9	private readonly _cleanup: (() => void)[] = [];
	10
	11	static readonly dummy: IScope = { own() { } };
	12
	13	own(target: (() => void) \| IDestroyable \| IRemovable) {
	14	if (target instanceof Function) {
	15	this._cleanup.push(target);
	16	} else if (isDestroyable(target)) {
	17	this._cleanup.push(() => target.destroy());
	18	} else if (isRemovable(target)) {
	19	this._cleanup.push(() => target.remove());
	20	}
	21	}
	22
	23	clean() {
	24	const guard = (cb: () => void) => {
	25	try {
	26	cb();
	27	} catch {
	28	// guard
	29	}
	30	}
	31
	32	this._cleanup.forEach(guard);
	33	this._cleanup.length = 0;
	34	}
	35
	36	destroy() {
	37	this.clean();
	38	}
	39
	40	} No newline at end of file

djx/src/main/ts/tsx/WatchRendition.ts created 644 +58 0

@@ -0,0 +1,58
	1	import { id as mid } from "module";
	2	import { TraceSource } from "@implab/core-amd/log/TraceSource";
	3	import { argumentNotNull } from "@implab/core-amd/safe";
	4	import { place } from "dojo/dom-construct";
	5	import { getScope, render } from "./Renderer";
	6	import { RenditionBase } from "./RenditionBase";
	7	import { Scope } from "./Scope";
	8	import { locateNode } from "./traits";
	9
	10	const trace = TraceSource.get(mid);
	11
	12	export class WatchRendition<T> extends RenditionBase<Node> {
	13	private readonly _factory: (arg: T) => any;
	14
	15	private _node: Node;
	16
	17	private readonly _scope = new Scope();
	18
	19	constructor(component: (arg: T) => any, subject: any) {
	20	super();
	21	argumentNotNull(component, "component");
	22
	23	this._factory = component;
	24
	25	this._node = document.createComment("WatchRendition placeholder");
	26	}
	27
	28	protected _create(attrs: object, children: any[]) {
	29	const _attrs: any = attrs \|\| {};
	30	const _children = children.map(x => this.getItemDom(x));
	31	this._node = this.getItemDom(
	32	this._factory.call(null, { ..._attrs, children: _children })
	33	);
	34
	35	const scope = getScope();
	36	scope.own(this._scope);
	37
	38	// если отрендерили текст? или DocumentFragment
	39	}
	40
	41	private async _render(value: T) {
	42	const [refNode, position] = locateNode(this._node);
	43	this._scope.clean();
	44
	45	this._node = await render(() => this._factory(value), this._scope);
	46
	47	if (refNode)
	48	place(this._node, refNode, position);
	49	}
	50
	51	protected _getDomNode() {
	52	if (!this._node)
	53	throw new Error("The instance of the widget isn't created");
	54	return this._node;
	55	}
	56
	57
	58	}

djx/src/main/ts/tsx/traits.ts +9 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 type DojoNodeLocation = [Node | null, DojoNodePosition];
             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)) {
                     if (isElementNode(target)) {
                         const w = registry.byNode(target);
                         if (w) {
                             w.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. 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)) {
                     if (isElementNode(target)) {
                         const w = registry.byNode(target);
                         if (w) {
                             if (w.startup)
                                 w.startup();
                         } else {
                             registry.findWidgets(target, skipNode).forEach(x => x.startup());
                         }
                     }
                 } else {
                     if (target.startup)
                         target.startup();
                 }
             }
+            export function locateNode(node: Node): DojoNodeLocation {
+                const next = node.nextSibling;
+                return next ?
+                    [next, "before"] :
+                    [node.parentNode, "last"];
+            }
  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