cleanup html utils

src/ui/web/ListView.js

@@ -1,4 +1,4 @@
-import * as html from "./html.js";
+import {tag} from "./html.js";
 
 class UIView {
     mount() {}
@@ -47,7 +47,7 @@ export default class ListView {
     }
 
     mount() {
-        this._root = html.ul({className: "ListView"});
+        this._root = tag.ul({className: "ListView"});
         this._loadList();
         if (this._onItemClick) {
             this._root.addEventListener("click", this._onClick);

src/ui/web/RoomView.js

@@ -1,6 +1,6 @@
 import TimelineTile from "./TimelineTile.js";
 import ListView from "./ListView.js";
-import * as html from "./html.js";
+import {tag} from "./html.js";
 import GapView from "./timeline/GapView.js";
 
 export default class RoomView {
@@ -14,15 +14,15 @@ export default class RoomView {
 
     mount() {
         this._viewModel.on("change", this._onViewModelUpdate);
-        this._nameLabel = html.h2(null, this._viewModel.name);
+        this._nameLabel = tag.h2(null, this._viewModel.name);
-        this._errorLabel = html.div({className: "RoomView_error"});
+        this._errorLabel = tag.div({className: "RoomView_error"});
 
         this._timelineList = new ListView({}, entry => {
             return entry.shape === "gap" ? new GapView(entry) : new TimelineTile(entry);
         });
         this._timelineList.mount();
 
-        this._root = html.div({className: "RoomView"}, [
+        this._root = tag.div({className: "RoomView"}, [
             this._nameLabel,
             this._errorLabel,
             this._timelineList.root()

src/ui/web/SessionView.js

@@ -1,7 +1,7 @@
 import ListView from "./ListView.js";
 import RoomTile from "./RoomTile.js";
 import RoomView from "./RoomView.js";
-import { div } from "./html.js";
+import {tag} from "./html.js";
 
 export default class SessionView {
     constructor(viewModel) {
@@ -19,7 +19,7 @@ export default class SessionView {
     mount() {
         this._viewModel.on("change", this._onViewModelChange);
 
-        this._root = div({className: "SessionView"});
+        this._root = tag.div({className: "SessionView"});
         this._roomList = new ListView(
             {
                 list: this._viewModel.roomList,

src/ui/web/TimelineTile.js

@@ -1,4 +1,4 @@
-import * as html from "./html.js";
+import {tag} from "./html.js";
 
 export default class TimelineTile {
     constructor(tileVM) {
@@ -24,10 +24,10 @@ export default class TimelineTile {
 function renderTile(tile) {
     switch (tile.shape) {
         case "message":
-            return html.li(null, [html.strong(null, tile.internalId+" "), tile.label]);
+            return tag.li(null, [tag.strong(null, tile.internalId+" "), tile.label]);
         case "announcement":
-            return html.li(null, [html.strong(null, tile.internalId+" "), tile.label]);
+            return tag.li(null, [tag.strong(null, tile.internalId+" "), tile.label]);
         default:
-            return html.li(null, [html.strong(null, tile.internalId+" "), "unknown tile shape: " + tile.shape]);
+            return tag.li(null, [tag.strong(null, tile.internalId+" "), "unknown tile shape: " + tile.shape]);
     }
 }

src/ui/web/html.js

@@ -1,3 +1,5 @@
+// DOM helper functions
+
 export function setAttribute(el, name, value) {
     if (name === "className") {
         name = "class";
@@ -23,9 +25,8 @@ export function el(elementName, attrs, children) {
         if (!Array.isArray(children)) {
             children = [children];
         }
-        // TODO: use fragment here?
         for (let c of children) {
-            if (typeof c === "string") {
+            if (!c.nodeType) {
                 c = text(c);
             }
             e.appendChild(c);
@@ -43,24 +44,10 @@ export const TAG_NAMES = [
     "p", "strong", "em", "span", "img", "section", "main", "article", "aside",
     "pre", "button"];
 
-export function ol(... params)      { return el("ol", ... params); }
+export const tag = {};
-export function ul(... params)      { return el("ul", ... params); }
+
-export function li(... params)      { return el("li", ... params); }
+for (const tagName of TAG_NAMES) {
-export function div(... params)     { return el("div", ... params); }
+    tag[tagName] = function(attributes, children) {
-export function h1(... params)      { return el("h1", ... params); }
+        return el(tagName, attributes, children);
-export function h2(... params)      { return el("h2", ... params); }
+    }
-export function h3(... params)      { return el("h3", ... params); }
+}
-export function h4(... params)      { return el("h4", ... params); }
-export function h5(... params)      { return el("h5", ... params); }
-export function h6(... params)      { return el("h6", ... params); }
-export function p(... params)       { return el("p", ... params); }
-export function strong(... params)  { return el("strong", ... params); }
-export function em(... params)      { return el("em", ... params); }
-export function span(... params)    { return el("span", ... params); }
-export function img(... params)     { return el("img", ... params); }
-export function section(... params) { return el("section", ... params); }
-export function main(... params)    { return el("main", ... params); }
-export function article(... params) { return el("article", ... params); }
-export function aside(... params)   { return el("aside", ... params); }
-export function pre(... params)   { return el("pre", ... params); }
-export function button(... params)   { return el("button", ... params); }