feat(rdom): update $tree() span handling, update $moveTo()

thi-ng · Jun 30, 2020 · 6d90187 · 6d90187
1 parent 9dddb77
commit 6d90187
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/packages/rdom/src/component.ts b/packages/rdom/src/component.ts
@@ -6,7 +6,7 @@ import {
     $clear,
     $el,
     $html,
-    $move,
+    $moveTo,
     $remove,
     $style,
     $text,
@@ -78,6 +78,6 @@ export abstract class Component<T = any> implements IComponent<T> {
     }
 
     $moveTo(newParent: Element, el = this.el!, idx?: NumOrElement) {
-        $move(el, newParent, idx);
+        $moveTo(newParent, el, idx);
     }
 }
diff --git a/packages/rdom/src/dom.ts b/packages/rdom/src/dom.ts
@@ -11,6 +11,7 @@ import { illegalArgs } from "@thi.ng/errors";
 import {
     ATTRIB_JOIN_DELIMS,
     mergeClasses,
+    NO_SPANS,
     RE_TAG,
     SVG_NS,
     SVG_TAGS,
@@ -29,8 +30,9 @@ import { isComponent } from "./utils";
  * - {@link IDeref} instance (must resolve to another supported type in
  *   this list)
  * - `["div#id.class", {...attribs}, ...children]`
+ * - `[IComponent, ...mountargs]`
  * - `[function, ...args]`
- * - ES6 iterator of the above (as children only!)
+ * - ES6 iterable of the above (for child values only!)
  *
  * Any other values will be cast to strings and added as spans to
  * current `parent`.
@@ -46,17 +48,30 @@ export const $tree = async (
 ): Promise<any> => {
     if (isArray(tree)) {
         const tag = tree[0];
+        // [tag, attribs, ...body]
         if (isString(tag)) {
-            parent = $el(tag, tree[1], null, parent, idx);
             const n = tree.length;
+            const { 1: attribs, 2: body } = tree;
+            if (n === 3 && (isString(body) || isNumber(body))) {
+                // emmet-free base tag
+                const tmp = /^\w+/.exec(tag);
+                if (tmp && NO_SPANS[tmp[0]]) {
+                    // don't wrap single body in <span> here
+                    parent = $el(tag, attribs, body, parent, idx);
+                    return parent;
+                }
+            }
+            parent = $el(tag, attribs, null, parent, idx);
             for (let i = 2; i < n; i++) {
                 $tree(tree[i], parent);
             }
             return parent;
         }
+        // [icomponent, ...args]
         if (isComponent(tag)) {
             return tag.mount(parent, idx, ...tree.slice(1));
         }
+        // [fn, ...args]
         if (isFunction(tag)) {
             return $tree(tag.apply(null, tree.slice(1)), parent);
         }
@@ -72,6 +87,7 @@ export const $tree = async (
         for (let t of tree) {
             $tree(t, parent);
         }
+        return;
     }
     return tree != null
         ? $el("span", null, tree, <HTMLElement>parent, idx)
@@ -139,11 +155,11 @@ export const $addChild = (
         : parent.insertBefore(child, idx);
 };
 
-export const $remove = (el: Element) => el.remove(); //el.parentNode!.removeChild(el);
+export const $remove = (el: Element) => el.remove();
 
-export const $move = (
-    el: Element,
+export const $moveTo = (
     newParent: Element,
+    el: Element,
     idx: NumOrElement = -1
 ) => {
     $remove(el);

diff --git a/packages/rdom/src/klist.ts b/packages/rdom/src/klist.ts
@@ -3,7 +3,7 @@ import type { ISubscribable } from "@thi.ng/rstream";
 import type { IComponent, IMountWithState, NumOrElement } from "./api";
 import { $compile } from "./compile";
 import { Component } from "./component";
-import { $move } from "./dom";
+import { $moveTo } from "./dom";
 import { $sub } from "./sub";
 
 interface KListItem {
@@ -83,7 +83,7 @@ export class KList<T> extends Component<T[]> implements IMountWithState<T[]> {
 
         const insert = async (item: KListItem) => {
             if (cache!.has(item.k)) {
-                $move(item.v.el!, parent!, next);
+                $moveTo(parent!, item.v.el!, next);
                 next = item.v.el!;
             } else {
                 cache!.set(item.k, item);