-
Notifications
You must be signed in to change notification settings - Fork 0
/
utils.ts
52 lines (45 loc) · 1.57 KB
/
utils.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { GdprManager } from "gdpr-guard";
import { render, RenderPayload } from "./render";
import { Rendered } from "./Renderer";
import { DiffDOM } from "diff-dom";
/**
* @global diffing
* Used for DOM diffing operations (to efficiently reduce DOM manipulations)
*/
const diffing = new DiffDOM();
/**
* Mount the rendered element in the target (using diffs)
* @param target - The target in which the rendered element will be mounted
* @param rendered - The rendered element to mount
*/
export const mountOnTarget = (target: Element, rendered: Rendered) => {
if (target.childElementCount) {
const diffSource = target.children.item(0);
const diff = diffing.diff(diffSource, rendered);
diffing.apply(diffSource, diff);
} else // for very first render (otherwise diff root is !=)
target.appendChild(rendered);
};
export type ReRenderFunction = () => Promise<void>;
export interface ReRenderResult {
render: ReRenderFunction;
manager: GdprManager;
}
/**
* Render the GDPR state inside of the given target (provides re-render function)
* @param target - The target in which the rendered element will be mounted
* @param manager - The manager to render
* @param payload - The render configuration
* @returns The function to call to re-render
*/
export const renderInside = async (target: Element, manager: GdprManager, payload: RenderPayload): Promise<ReRenderResult> => {
const doRender: ReRenderFunction = async () => {
const { rendered } = await render(manager, payload);
mountOnTarget(target, rendered);
};
await doRender();
return {
render: doRender,
manager,
};
}