@@ -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