render.ts
198 lines
| 5.1 KiB
| video/mp2t
|
TypeScriptLexer
cin
|
r101 | import { TraceSource } from "@implab/core-amd/log/TraceSource"; | ||
| import { isPromise } from "@implab/core-amd/safe"; | ||||
| import { id as mid } from "module"; | ||||
|
cin
|
r102 | import { IScope, Scope } from "./Scope"; | ||
| import { isNode, isRendition, isWidget } from "./traits"; | ||||
|
cin
|
r101 | |||
| const trace = TraceSource.get(mid); | ||||
|
cin
|
r98 | |||
|
cin
|
r102 | interface Context { | ||
|
cin
|
r118 | readonly scope: IScope; | ||
|
cin
|
r98 | |||
|
cin
|
r118 | readonly hooks?: (() => void)[]; | ||
|
cin
|
r102 | } | ||
|
cin
|
r101 | |||
|
cin
|
r102 | let _context: Context = { | ||
| scope: Scope.dummy | ||||
|
cin
|
r109 | }; | ||
|
cin
|
r101 | |||
|
cin
|
r118 | let _renderCount = 0; | ||
| let _renderId = 1; | ||||
| let _renderedHooks: (() => void)[] = []; | ||||
|
cin
|
r101 | const guard = (cb: () => unknown) => { | ||
| try { | ||||
|
cin
|
r109 | const result = cb(); | ||
|
cin
|
r101 | if (isPromise(result)) { | ||
| const warn = (ret: unknown) => trace.error("The callback {0} competed asynchronously. result = {1}", cb, ret); | ||||
| result.then(warn, warn); | ||||
| } | ||||
| } catch (e) { | ||||
| trace.error(e); | ||||
| } | ||||
|
cin
|
r109 | }; | ||
|
cin
|
r98 | |||
|
cin
|
r118 | /** | ||
| * | ||||
| * @param scope | ||||
| * @returns | ||||
| */ | ||||
| export const beginRender = (scope = getScope()) => { | ||||
|
cin
|
r102 | const prev = _context; | ||
|
cin
|
r118 | _renderCount++; | ||
| const renderId = _renderId++; | ||||
| trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount); | ||||
| if (_renderCount === 1) | ||||
| onRendering(); | ||||
|
cin
|
r102 | _context = { | ||
| scope, | ||||
| hooks: [] | ||||
| }; | ||||
|
cin
|
r118 | return endRender(prev, _context, renderId); | ||
| }; | ||||
| /** | ||||
| * Method for a deferred rendering. Returns a promise with `beginRender()` function. | ||||
| * Call to `scheduleRender` will save the current context, and will increment pending | ||||
| * operations counter. | ||||
| * | ||||
| * @example | ||||
| * | ||||
| * const begin = await scheduleRender(); | ||||
| * const end = begin(); | ||||
| * try { | ||||
| * // do some DOM manipulations | ||||
| * } finally { | ||||
| * end(); | ||||
| * } | ||||
| * | ||||
| * @param scope | ||||
| * @returns | ||||
| */ | ||||
| export const scheduleRender = async (scope = getScope()) => { | ||||
| _renderCount++; | ||||
| const renderId = _renderId ++; | ||||
| trace.debug("scheduleRender [{0}], pending = {1}", renderId, _renderCount); | ||||
| if (_renderCount === 1) | ||||
| onRendering(); | ||||
| await Promise.resolve(); | ||||
| return () => { | ||||
| trace.debug("beginRender [{0}], pending = {1}", renderId, _renderCount); | ||||
|
cin
|
r122 | const prev = _context; | ||
|
cin
|
r118 | _context = { | ||
| scope, | ||||
| hooks: [] | ||||
| }; | ||||
| return endRender(prev, _context, renderId); | ||||
| }; | ||||
|
cin
|
r109 | }; | ||
|
cin
|
r101 | |||
| /** | ||||
| * Completes render operation | ||||
| */ | ||||
|
cin
|
r118 | const endRender = (prev: Context, current: Context, renderId: number) => () => { | ||
| if (_context !== current) | ||||
| trace.error("endRender mismatched beginRender call"); | ||||
|
cin
|
r102 | const { hooks } = _context; | ||
| if (hooks) | ||||
|
cin
|
r101 | hooks.forEach(guard); | ||
|
cin
|
r102 | |||
|
cin
|
r118 | _renderCount--; | ||
|
cin
|
r102 | _context = prev; | ||
|
cin
|
r118 | |||
| trace.debug("endRender [{0}], pending = {1}", renderId, _renderCount); | ||||
| if (_renderCount === 0) | ||||
| onRendered(); | ||||
|
cin
|
r109 | }; | ||
|
cin
|
r101 | |||
|
cin
|
r118 | // called when the first beginRender is called for this iteration | ||
| const onRendering = () => { | ||||
| setTimeout(() => { | ||||
| if (_renderCount !== 0) | ||||
| trace.error("Rendering tasks aren't finished, currently running = {0}", _renderCount); | ||||
| }); | ||||
| }; | ||||
| // called when all render operations are complete | ||||
| const onRendered = () => { | ||||
| _renderedHooks.forEach(guard); | ||||
| _renderedHooks = []; | ||||
| }; | ||||
| export const whenRendered = () => new Promise<void>((resolve) => { | ||||
| if (_renderCount) | ||||
| _renderedHooks.push(resolve); | ||||
| else | ||||
| resolve(); | ||||
| }); | ||||
|
cin
|
r101 | export const renderHook = (hook: () => void) => { | ||
|
cin
|
r102 | const { hooks } = _context; | ||
| if (hooks) | ||||
|
cin
|
r101 | hooks.push(hook); | ||
| else | ||||
| guard(hook); | ||||
|
cin
|
r109 | }; | ||
|
cin
|
r98 | |||
|
cin
|
r102 | export const refHook = <T>(value: T, ref: JSX.Ref<T>) => { | ||
| const { hooks, scope } = _context; | ||||
| if (hooks) | ||||
| hooks.push(() => ref(value)); | ||||
| else | ||||
| guard(() => ref(value)); | ||||
| scope.own(() => ref(undefined)); | ||||
|
cin
|
r109 | }; | ||
|
cin
|
r102 | |||
|
cin
|
r98 | /** Returns the current scope */ | ||
|
cin
|
r102 | export const getScope = () => _context.scope; | ||
|
cin
|
r98 | |||
| /** Schedules the rendition to be rendered to the DOM Node | ||||
| * @param rendition The rendition to be rendered | ||||
| * @param scope The scope | ||||
| */ | ||||
|
cin
|
r102 | export const render = (rendition: unknown, scope = Scope.dummy) => { | ||
| const complete = beginRender(scope); | ||||
|
cin
|
r98 | try { | ||
|
cin
|
r102 | return getItemDom(rendition); | ||
|
cin
|
r98 | } finally { | ||
|
cin
|
r102 | complete(); | ||
|
cin
|
r98 | } | ||
|
cin
|
r109 | }; | ||
|
cin
|
r98 | |||
|
cin
|
r120 | const emptyFragment = document.createDocumentFragment(); | ||
|
cin
|
r98 | /** Renders DOM element for different types of the argument. */ | ||
|
cin
|
r101 | export const getItemDom = (v: unknown) => { | ||
|
cin
|
r98 | if (typeof v === "string" || typeof v === "number" || v instanceof RegExp || v instanceof Date) { | ||
| // primitive types converted to the text nodes | ||||
| return document.createTextNode(v.toString()); | ||||
| } else if (isNode(v)) { | ||||
| // nodes are kept as is | ||||
| return v; | ||||
| } else if (isRendition(v)) { | ||||
| // renditions are instantiated | ||||
|
cin
|
r101 | return v.getDomNode(); | ||
|
cin
|
r98 | } else if (isWidget(v)) { | ||
| // widgets are converted to it's markup | ||||
| return v.domNode; | ||||
| } else if (typeof v === "boolean" || v === null || v === undefined) { | ||||
|
cin
|
r102 | // null | undefined | boolean are removed | ||
|
cin
|
r120 | return emptyFragment; | ||
|
cin
|
r98 | } else if (v instanceof Array) { | ||
| // arrays will be translated to document fragments | ||||
| const fragment = document.createDocumentFragment(); | ||||
|
cin
|
r101 | v.map(item => getItemDom(item)) | ||
|
cin
|
r98 | .forEach(node => fragment.appendChild(node)); | ||
| return fragment; | ||||
| } else { | ||||
| // bug: explicit error otherwise | ||||
|
cin
|
r109 | throw new Error(`Invalid parameter: ${String(v)}`); | ||
|
cin
|
r98 | } | ||
|
cin
|
r109 | }; | ||