WatchRendition.ts
98 lines
| 2.9 KiB
| video/mp2t
|
TypeScriptLexer
cin
|
r94 | import { id as mid } from "module"; | ||
| import { TraceSource } from "@implab/core-amd/log/TraceSource"; | ||||
| import { argumentNotNull } from "@implab/core-amd/safe"; | ||||
|
cin
|
r118 | import { getItemDom, getScope, scheduleRender } from "./render"; | ||
|
cin
|
r94 | import { RenditionBase } from "./RenditionBase"; | ||
|
cin
|
r101 | import { Scope } from "./Scope"; | ||
|
cin
|
r102 | import { Subscribable } from "../observable"; | ||
| import { Cancellation } from "@implab/core-amd/Cancellation"; | ||||
| import { collectNodes, destroy, isDocumentFragmentNode, isMounted, placeAt, startupWidgets } from "./traits"; | ||||
|
cin
|
r94 | |||
| const trace = TraceSource.get(mid); | ||||
| export class WatchRendition<T> extends RenditionBase<Node> { | ||||
|
cin
|
r98 | private readonly _component: (arg: T) => unknown; | ||
|
cin
|
r94 | |||
|
cin
|
r102 | private readonly _node: Node; | ||
|
cin
|
r94 | |||
| private readonly _scope = new Scope(); | ||||
|
cin
|
r102 | private readonly _subject: Subscribable<T>; | ||
| private _renderJob?: { value: T }; | ||||
|
cin
|
r96 | |||
|
cin
|
r102 | private _ct = Cancellation.none; | ||
| constructor(component: (arg: T) => unknown, subject: Subscribable<T>) { | ||||
|
cin
|
r94 | super(); | ||
| argumentNotNull(component, "component"); | ||||
|
cin
|
r98 | this._component = component; | ||
|
cin
|
r94 | |||
|
cin
|
r96 | this._subject = subject; | ||
|
cin
|
r102 | this._node = document.createComment("[Watch]"); | ||
|
cin
|
r94 | } | ||
|
cin
|
r102 | protected _create() { | ||
|
cin
|
r101 | const scope = getScope(); | ||
|
cin
|
r102 | scope.own(() => { | ||
| this._scope.destroy(); | ||||
| destroy(this._node); | ||||
| }); | ||||
| scope.own(this._subject.subscribe({ next: this._onValue })); | ||||
| this._ct = new Cancellation(cancel => scope.own(cancel)); | ||||
| } | ||||
|
cin
|
r107 | private readonly _onValue = (value: T) => { | ||
|
cin
|
r102 | if (!this._renderJob) { | ||
| // schedule a new job | ||||
| this._renderJob = { value }; | ||||
| this._render().catch(e => trace.error(e)); | ||||
| } else { | ||||
| // update existing job | ||||
| this._renderJob = { value }; | ||||
| } | ||||
|
cin
|
r107 | }; | ||
|
cin
|
r94 | |||
|
cin
|
r102 | private async _render() { | ||
|
cin
|
r118 | const beginRender = await scheduleRender(this._scope); | ||
| const endRender = beginRender(); | ||||
| try { | ||||
| // don't render destroyed rendition | ||||
| if (this._ct.isRequested()) | ||||
| return; | ||||
|
cin
|
r102 | |||
|
cin
|
r118 | // remove all previous content | ||
| this._scope.clean(); | ||||
|
cin
|
r96 | |||
|
cin
|
r118 | // render the new node | ||
| const node = getItemDom(this._renderJob ? this._component(this._renderJob.value) : undefined); | ||||
|
cin
|
r102 | |||
|
cin
|
r118 | // get actual content | ||
| const pending = isDocumentFragmentNode(node) ? | ||||
| collectNodes(node.childNodes) : | ||||
| [node]; | ||||
|
cin
|
r102 | |||
|
cin
|
r118 | placeAt(node, this._node, "after"); | ||
|
cin
|
r102 | |||
|
cin
|
r118 | if (isMounted(this._node)) | ||
| pending.forEach(n => startupWidgets(n)); | ||||
|
cin
|
r102 | |||
|
cin
|
r118 | if (pending.length) | ||
| this._scope.own(() => pending.forEach(destroy)); | ||||
|
cin
|
r102 | |||
|
cin
|
r118 | this._renderJob = undefined; | ||
| } finally { | ||||
| endRender(); | ||||
| } | ||||
|
cin
|
r94 | } | ||
| protected _getDomNode() { | ||||
| if (!this._node) | ||||
| throw new Error("The instance of the widget isn't created"); | ||||
| return this._node; | ||||
| } | ||||
| } | ||||