V2

1 files changed, 55 insertions, 59 deletions

diff --git a/ka.js b/ka.js
index 09257c7..a14ae7f 100644
--- a/ka.js
+++ b/ka.js
@@ -1,64 +1,60 @@
-var doc = document;
-var elproto = Element.prototype;
-elproto.attr = function(name){
-  return this.getAttribute(name);
-};
-elproto.$attr = function(name, value) {
-  this.setAttribute(name, value);
-  return this;
-};
-elproto.$attrs = function(attrs) {
-  for (const [attr, value] of Object.entries(attrs)) {
-    this.$attr(attr, value);
-  }
-  return this;
-}
-elproto.$cls = function(cls) {
-  return this.$attr("class", cls);
-}
-elproto.$value = function(value) {
-  this.value = value;
-  return this;
-}
-elproto.$click = function(callback) {
-  this.onclick = callback;
-  return this;
-}
-const getvalue = x => x.value;
-elproto.$change2state = function(state, field, valgetter=getvalue) {
-  this.onchange = () => {
-    state[field] = valgetter(this);
+(()=>{
+  doc = document;
+
+  var ep = Element.prototype;
+  ep.attr = function(name){
+    return this.getAttribute(name);
+  };
+  ep.$attr = function(name, value) {
+    this.setAttribute(name, value);
+    return this;
   };
-  return this;
-}
-function tag(name, attrs, ...children) {
-  const el = doc.createElement(name);
-  el.$attrs(attrs||{});
-  for (const child of children.filter(x=>x)) {
-    el.appendChild((typeof(child) === 'string') ? doc.createTextNode(child) : child);
+  ep.$attrs = function(attrs) {
+    Object.entries(attrs).forEach(([attr, value]) => this.$attr(attr, value));
+    return this;
   }
-  return el;
-}
-
-const TRIVIAL = "h1,h2,h3,p,,div,span,select,table,tr,td";
-for (let name of TRIVIAL.split(",")) {
+  ep.$cls = function(cls) {
+    return this.$attr("class", cls);
+  }
+  ep.$value = function(value) {
+    this.value = value;
+    return this;
+  }
+  ep.$click = function(callback) {
+    this.onclick = callback;
+    return this;
+  }
+  const getvalue = x => x.value;
+  ep.$change2state = function(state, field, valgetter=getvalue) {
+    this.onchange = () => {
+      state[field] = valgetter(this);
+    };
+    return this;
+  }
+  tag = (name, attrs, ...children) => {
+    const el = doc.createElement(name);
+    el.$attrs(attrs||{});
+    for (const child of children.filter(x=>x)) {
+      el.appendChild((typeof(child) === 'string') ? doc.createTextNode(child) : child);
+    }
+    return el;
+  }
+  ahref = (href, ...children) => tag("a", {href}, ...children);
+  labelfor = (for_, ...children) => tag("label", {"for":for_}, ...children);
+  img = (src) => tag("img", {src});
+  input = (type) => tag("input", {type});
+  const TRIVIAL = "main,section,nav,h1,h2,h3,p,,div,span,select,table,tr,td";
+  for (let name of TRIVIAL.split(",")) {
     window[name] = (...children) => tag(name, null, ...children);
-}
-
-var ahref = (href, ...children) => tag("a", {href}, ...children);
-var img = (src) => tag("img", {src});
-var input = (type) => tag("input", {type});
+  }
 
-function router(root, routes, onreload) {
-  function reload() {
-    const h = doc.location.hash || "#";
-    const p = h.substr(1) || "/";
-    const r = p in routes ? p : "";
-    root.replaceChildren(routes[r]());
-    onreload && onreload(h);
+  mount = (root, app) => {
+    function reload() {
+      const h = doc.location.hash || "#";
+      root.replaceChildren(...app(h));
+    };
+    reload();
+    window.addEventListener("hashchange", reload);
+    app.reload = reload;
   };
-  reload();
-  window.addEventListener("hashchange", reload);
-  root.reload = reload;
-}
-
+})()