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