author | Alan Dipert
<alan@dipert.org> 2021-06-14 20:31:44 UTC |
committer | Alan Dipert
<alan@dipert.org> 2021-06-14 20:31:44 UTC |
parent | ee3c93e03d7583d9a19d080c6d751699ad52813a |
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)) ) ) }