| @@ -1,5 +1,5 | |||||
| 1 | import { argumentNotNull } from "@implab/core-amd/safe"; |
|
1 | import { argumentNotNull } from "@implab/core-amd/safe"; | |
| 2 |
import { getItemDom } from "./ |
|
2 | import { getItemDom } from "./render"; | |
| 3 | import { RenditionBase } from "./RenditionBase"; |
|
3 | import { RenditionBase } from "./RenditionBase"; | |
| 4 | import { IScope } from "./Scope"; |
|
4 | import { IScope } from "./Scope"; | |
| 5 |
|
5 | |||
| @@ -3,7 +3,7 import { argumentNotEmptyString } from " | |||||
| 3 | import { RenditionBase } from "./RenditionBase"; |
|
3 | import { RenditionBase } from "./RenditionBase"; | |
| 4 | import { placeAt } from "./traits"; |
|
4 | import { placeAt } from "./traits"; | |
| 5 | import { IScope } from "./Scope"; |
|
5 | import { IScope } from "./Scope"; | |
| 6 |
import { getItemDom } from "./ |
|
6 | import { getItemDom } from "./render"; | |
| 7 |
|
7 | |||
| 8 | export class HtmlRendition extends RenditionBase<HTMLElement> { |
|
8 | export class HtmlRendition extends RenditionBase<HTMLElement> { | |
| 9 | elementType: string; |
|
9 | elementType: string; | |
| @@ -2,7 +2,7 import { isNull, mixin } from "@implab/c | |||||
| 2 | import { isPlainObject, DojoNodePosition, Rendition, isDocumentFragmentNode, placeAt, collectNodes, autostartWidgets } from "./traits"; |
|
2 | import { isPlainObject, DojoNodePosition, Rendition, isDocumentFragmentNode, placeAt, collectNodes, autostartWidgets } from "./traits"; | |
| 3 |
|
3 | |||
| 4 | import { IScope } from "./Scope"; |
|
4 | import { IScope } from "./Scope"; | |
| 5 |
import { getScope } from "./ |
|
5 | import { getScope } from "./render"; | |
| 6 |
|
6 | |||
| 7 | export abstract class RenditionBase<TNode extends Node> implements Rendition<TNode> { |
|
7 | export abstract class RenditionBase<TNode extends Node> implements Rendition<TNode> { | |
| 8 | private _attrs = {}; |
|
8 | private _attrs = {}; | |
| @@ -1,17 +1,15 | |||||
| 1 | import { id as mid } from "module"; |
|
1 | import { id as mid } from "module"; | |
| 2 | import { TraceSource } from "@implab/core-amd/log/TraceSource"; |
|
2 | import { TraceSource } from "@implab/core-amd/log/TraceSource"; | |
| 3 | import { argumentNotNull } from "@implab/core-amd/safe"; |
|
3 | import { argumentNotNull } from "@implab/core-amd/safe"; | |
| 4 |
import { render } from "./ |
|
4 | import { getItemDom, render } from "./render"; | |
| 5 | import { RenditionBase } from "./RenditionBase"; |
|
5 | import { RenditionBase } from "./RenditionBase"; | |
| 6 | import { IScope, Scope } from "./Scope"; |
|
6 | import { IScope, Scope } from "./Scope"; | |
| 7 | import { Observable } from "../observable"; |
|
7 | import { Observable } from "../observable"; | |
| 8 |
|
8 | |||
| 9 | const trace = TraceSource.get(mid); |
|
9 | const trace = TraceSource.get(mid); | |
| 10 |
|
10 | |||
| 11 | const noop = () => {}; |
|
|||
| 12 |
|
||||
| 13 | export class WatchRendition<T> extends RenditionBase<Node> { |
|
11 | export class WatchRendition<T> extends RenditionBase<Node> { | |
| 14 |
private readonly _ |
|
12 | private readonly _component: (arg: T) => unknown; | |
| 15 |
|
13 | |||
| 16 | private _node: Node; |
|
14 | private _node: Node; | |
| 17 |
|
15 | |||
| @@ -19,11 +17,11 export class WatchRendition<T> extends R | |||||
| 19 |
|
17 | |||
| 20 | private readonly _subject: Observable<T>; |
|
18 | private readonly _subject: Observable<T>; | |
| 21 |
|
19 | |||
| 22 |
constructor(component: (arg: T) => |
|
20 | constructor(component: (arg: T) => unknown, subject: Observable<T>) { | |
| 23 | super(); |
|
21 | super(); | |
| 24 | argumentNotNull(component, "component"); |
|
22 | argumentNotNull(component, "component"); | |
| 25 |
|
23 | |||
| 26 |
this._ |
|
24 | this._component = component; | |
| 27 |
|
25 | |||
| 28 | this._subject = subject; |
|
26 | this._subject = subject; | |
| 29 |
|
27 | |||
| @@ -35,13 +33,14 export class WatchRendition<T> extends R | |||||
| 35 | scope.own(this._subject.on({ next: this._onValue })); |
|
33 | scope.own(this._subject.on({ next: this._onValue })); | |
| 36 | } |
|
34 | } | |
| 37 |
|
35 | |||
| 38 | private _onValue = (value: T) => void this._render(value).catch( e => trace.error(e)); |
|
36 | private _onValue = (value: T) => | |
|
|
37 | void this._render(value).catch( e => trace.error(e)); | |||
| 39 |
|
38 | |||
| 40 | private async _render(value: T) { |
|
39 | private async _render(value: T) { | |
| 41 | const prevNode = this._node; |
|
40 | const prevNode = this._node; | |
| 42 | this._scope.clean(); |
|
41 | this._scope.clean(); | |
| 43 |
|
42 | |||
| 44 |
this._node = await render( |
|
43 | this._node = await render(this._component(value), this._scope); | |
| 45 |
|
44 | |||
| 46 | this.placeAt(prevNode, "replace"); |
|
45 | this.placeAt(prevNode, "replace"); | |
| 47 | } |
|
46 | } | |
| @@ -4,7 +4,7 import { DojoNodePosition, isElementNode | |||||
| 4 | import registry = require("dijit/registry"); |
|
4 | import registry = require("dijit/registry"); | |
| 5 | import ContentPane = require("dijit/layout/ContentPane"); |
|
5 | import ContentPane = require("dijit/layout/ContentPane"); | |
| 6 | import { IScope } from "./Scope"; |
|
6 | import { IScope } from "./Scope"; | |
| 7 |
import { getItemDom, getScope } from "./ |
|
7 | import { getItemDom, getScope } from "./render"; | |
| 8 |
|
8 | |||
| 9 | // tslint:disable-next-line: class-name |
|
9 | // tslint:disable-next-line: class-name | |
| 10 | export interface _Widget { |
|
10 | export interface _Widget { | |
| @@ -9,14 +9,19 const beginRender = async () => { | |||||
| 9 | const endRender = () => { |
|
9 | const endRender = () => { | |
| 10 | } |
|
10 | } | |
| 11 |
|
11 | |||
|
|
12 | /** Returns the current scope */ | |||
| 12 | export const getScope = () => _scope; |
|
13 | export const getScope = () => _scope; | |
| 13 |
|
14 | |||
| 14 | export const render = async (rendition: () => Rendition, scope = Scope.dummy) => { |
|
15 | /** Schedules the rendition to be rendered to the DOM Node | |
|
|
16 | * @param rendition The rendition to be rendered | |||
|
|
17 | * @param scope The scope | |||
|
|
18 | */ | |||
|
|
19 | export const render = async (rendition: unknown, scope = Scope.dummy) => { | |||
| 15 | await beginRender(); |
|
20 | await beginRender(); | |
| 16 | const prev = _scope; |
|
21 | const prev = _scope; | |
| 17 | _scope = scope; |
|
22 | _scope = scope; | |
| 18 | try { |
|
23 | try { | |
| 19 |
const node = rendition |
|
24 | const node = getItemDom(rendition, scope); | |
| 20 | scope.own(() => destroy(node)); |
|
25 | scope.own(() => destroy(node)); | |
| 21 | return node; |
|
26 | return node; | |
| 22 | } finally { |
|
27 | } finally { | |
| @@ -42,6 +47,12 export const getItemDom = (v: unknown, s | |||||
| 42 | } else if (typeof v === "boolean" || v === null || v === undefined) { |
|
47 | } else if (typeof v === "boolean" || v === null || v === undefined) { | |
| 43 | // null | undefined | boolean are removed, converted to comments |
|
48 | // null | undefined | boolean are removed, converted to comments | |
| 44 | return document.createComment(`[${typeof v} ${String(v)}]`); |
|
49 | return document.createComment(`[${typeof v} ${String(v)}]`); | |
|
|
50 | } else if (v instanceof Array) { | |||
|
|
51 | // arrays will be translated to document fragments | |||
|
|
52 | const fragment = document.createDocumentFragment(); | |||
|
|
53 | v.map(item => getItemDom(item, scope)) | |||
|
|
54 | .forEach(node => fragment.appendChild(node)); | |||
|
|
55 | return fragment; | |||
| 45 | } else { |
|
56 | } else { | |
| 46 | // bug: explicit error otherwise |
|
57 | // bug: explicit error otherwise | |
| 47 | throw new Error("Invalid parameter: " + v); |
|
58 | throw new Error("Invalid parameter: " + v); | |
General Comments 0
You need to be logged in to leave comments.
Login now
