feat(hdom): update HDOMOpts & start()

- add `normalize` option - simplify `start()`
thi-ng · Aug 31, 2018 · 5e74a9c · 5e74a9c
1 parent 1e8b4ef
commit 5e74a9c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git 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
@@ -43,21 +43,21 @@ import { hydrateDOM } from "@thi.ng/hdom/src/dom";
  * @param opts options
  */
 export const start = (tree: any, opts?: Partial<HDOMOpts>) => {
-    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<HDOMOpts>) => {
             // check again in case one of the components called cancel
             isActive && requestAnimationFrame(update);
         }
-    }
+    };
     requestAnimationFrame(update);
     return () => (isActive = false);
 };