git » hoplite.git » commit be53040

$el => h

author Alan Dipert
2021-06-14 20:31:44 UTC
committer Alan Dipert
2021-06-14 20:31:44 UTC
parent ee3c93e03d7583d9a19d080c6d751699ad52813a

$el => h

el.mjs +2 -2
hntr2.mjs +26 -26
todo.mjs +7 -7

diff --git a/el.mjs b/el.mjs
index 9bdd873..d2df0dd 100644
--- a/el.mjs
+++ b/el.mjs
@@ -62,7 +62,7 @@ function el(tag, attrs, kids) {
   return el;
 }
 
-const $el = new Proxy({}, {
+const h = new Proxy({}, {
   get: (obj, name) => (attrs = {}, ...kids) => {
     if (typeof attrs === "string"
         || attrs instanceof Node
@@ -254,4 +254,4 @@ function bindTo(input, cell, event = "change") {
   return input;
 }
 
-export { $el, entities, nbsp, entitiesBy, bindTo };
+export { h, entities, nbsp, entitiesBy, bindTo };
diff --git a/hntr2.mjs b/hntr2.mjs
index 435362f..4cb3114 100644
--- a/hntr2.mjs
+++ b/hntr2.mjs
@@ -1,5 +1,5 @@
 import { input, formula, watch, cond, not, database, transaction } from './reactives.mjs';
-import { $el, nbsp, entities, bindTo } from './el.mjs';
+import { h, nbsp, entities, bindTo } from './el.mjs';
 import { record } from './record.mjs';
 
 let user = input(),
@@ -15,25 +15,25 @@ firebase.auth().onAuthStateChanged(result => {
 
 function authed() {
   let rec = record("site", "username", "password", "note")
-  return $el.div(
-    $el.p(
+  return h.div(
+    h.p(
       formula(u => `Signed in as ${u?.email}`)(user),
       nbsp,
-      $el.a({href: "#", onclick: () => {
+      h.a({href: "#", onclick: () => {
         firebase.auth().signOut().then(() => user.set());
       }}, "Sign out")
     ),
-    $el.div(
-      $el.table(
-        $el.tr(
-          $el.th("Action"),
-          $el.th("Site"),
-          $el.th("Username"),
-          $el.th("Password"),
-          $el.th("Note")
+    h.div(
+      h.table(
+        h.tr(
+          h.th("Action"),
+          h.th("Site"),
+          h.th("Username"),
+          h.th("Password"),
+          h.th("Note")
         ),
-        $el.tr(
-          $el.td($el.input({
+        h.tr(
+          h.td(h.input({
             type: "button",
             value: "Add",
             onclick: () => {
@@ -41,19 +41,19 @@ function authed() {
               rec.clear();
             }
           })),
-          rec.fieldNames.map(f => $el.td(bindTo($el.input({type: "text"}), rec.get[f])))
+          rec.fieldNames.map(name => h.td(bindTo(h.input({type: "text"}), rec.get[name])))
         ),
         entities(db, "_eid", "asc", attrs => {
-          return $el.tr(
-            $el.td($el.input({
+          return h.tr(
+            h.td(h.input({
               type: "button",
               value: "Delete",
               onclick: () => db.deleteEntity(attrs._eid.value)
             })),
-            $el.td(attrs.site),
-            $el.td(attrs.username),
-            $el.td(attrs.password),
-            $el.td(attrs.note)
+            h.td(attrs.site),
+            h.td(attrs.username),
+            h.td(attrs.password),
+            h.td(attrs.note)
           )
         })
       )
@@ -61,7 +61,7 @@ function authed() {
     (() => {
       let prdb = input();
       watch(() => prdb.set(js_beautify(JSON.stringify([...db]))))(db);
-      return $el.pre(prdb);
+      return h.pre(prdb);
     })()
   );
 }
@@ -70,14 +70,14 @@ function login() {
   let provider = new firebase.auth.GoogleAuthProvider(),
       errorCode = input(),
       errorMessage = input();
-  return $el.div(
+  return h.div(
     cond(
       errorCode,
       formula((code, message) => {
         return `Error ${code}: ${message}`
       })(errorCode, errorMessage)
     ),
-    $el.a({
+    h.a({
       href: "#",
       onclick: () => firebase.auth()
         .setPersistence(firebase.auth.Auth.Persistence.SESSION)
@@ -92,8 +92,8 @@ function login() {
 }
 
 function app() {
-  return $el.div(
-    $el.h1("hntr2"),
+  return h.div(
+    h.h1("hntr2"),
     cond(
       not(loaded),
       "Loading...",
diff --git a/todo.mjs b/todo.mjs
index 34f02ea..e858e68 100644
--- a/todo.mjs
+++ b/todo.mjs
@@ -1,17 +1,17 @@
 import { input, database, transaction } from './reactives.mjs';
-import { $el, entities } from './el.mjs';
+import { h, entities } from './el.mjs';
 
 function todoList() {
   let todos = database([]),
       newTodo = input("");
-  return $el.div(
-    $el.h3("TODO"),
-    $el.input({
+  return h.div(
+    h.h3("TODO"),
+    h.input({
       type: "text",
       value: newTodo,
       onchange: ({target: {value}}) => newTodo.set(value)
     }),
-    $el.input({
+    h.input({
       type: "button",
       value: "Add",
       onclick: () => transaction(() => {
@@ -21,8 +21,8 @@ function todoList() {
         newTodo.set("");
       })
     }),
-    $el.ul(
-      entities(todos, "_eid", "asc", attrs => $el.li(attrs.text))
+    h.ul(
+      entities(todos, "_eid", "asc", attrs => h.li(attrs.text))
     )
   )
 }