diff --git a/packages/hdom/src/api.ts b/packages/hdom/src/api.ts index f7fda74bf1..461285df3d 100644 --- a/packages/hdom/src/api.ts +++ b/packages/hdom/src/api.ts @@ -18,11 +18,12 @@ export interface ComponentAttribs { export interface HDOMOpts { /** - * Root element or ID + * Root element or ID (default: "app"). */ root: Element | string; /** - * Arbitrary user context object + * Arbitrary user context object, passed to all component functions + * embedded in the tree. */ ctx?: any; /** @@ -40,6 +41,12 @@ export interface HDOMOpts { * undefined behavior. */ hydrate?: boolean; + /** + * If true (default), the hdom component tree will be first + * normalized before diffing (using `normalizeTree()`). Unless you + * know what you're doing, it's best to leave this enabled. + */ + normalize?: boolean; } export const DEBUG = false; diff --git a/packages/hdom/src/start.ts b/packages/hdom/src/start.ts index 669b49c276..d40f7ce45b 100644 --- a/packages/hdom/src/start.ts +++ b/packages/hdom/src/start.ts @@ -43,21 +43,21 @@ import { hydrateDOM } from "@thi.ng/hdom/src/dom"; * @param opts options */ export const start = (tree: any, opts?: Partial) => { - opts = { root: "app", span: true, ...opts }; + opts = { root: "app", span: true, normalize: true, ...opts }; let prev = []; let isActive = true; - let hydrate = opts.hydrate; - const spans = opts.span !== false; const root = isString(opts.root) ? document.getElementById(opts.root) : opts.root; - function update() { + const update = () => { if (isActive) { - const curr = normalizeTree(tree, opts.ctx, [0], true, spans); + const curr = opts.normalize ? + normalizeTree(tree, opts.ctx, [0], true, opts.span) : + tree; if (curr != null) { - if (hydrate) { + if (opts.hydrate) { hydrateDOM(root, curr); - hydrate = false; + opts.hydrate = false; } else { diffElement(root, prev, curr); } @@ -66,7 +66,7 @@ export const start = (tree: any, opts?: Partial) => { // check again in case one of the components called cancel isActive && requestAnimationFrame(update); } - } + }; requestAnimationFrame(update); return () => (isActive = false); };