simplyview 3.0.2 → 3.0.4

package/dist/simply.app.js

@@ -7,13 +7,15 @@
     constructor(options = {}) {
       this.root = options.root || "/";
       this.app = options.app;
+      this.addMissingSlash = !!options.addMissingSlash;
+      this.matchExact = !!options.matchExact;
       this.clear();
       if (options.routes) {
         this.load(options.routes);
       }
     }
     load(routes2) {
-      parseRoutes(routes2, this.routeInfo);
+      parseRoutes(routes2, this.routeInfo, this.matchExact);
     }
     clear() {
       this.routeInfo = [];
@@ -41,13 +43,22 @@
       path = getPath(path);
       for (let route of this.routeInfo) {
         matches = route.match.exec(path);
+        if (this.addMissingSlash && !matches?.length) {
+          if (path && path[path.length - 1] != "/") {
+            matches = route.match.exec(path + "/");
+            if (matches) {
+              path += "/";
+              history.replaceState({}, "", getURL(path));
+            }
+          }
+        }
         if (matches && matches.length) {
           var params = {};
-          route.params.forEach((key, i) => {
+          route.params.forEach((key, i2) => {
             if (key == "*") {
               key = "remainder";
             }
-            params[key] = matches[i + 1];
+            params[key] = matches[i2 + 1];
           });
           Object.assign(params, options);
           args.route = route;
@@ -59,9 +70,6 @@
           return args.result;
         }
       }
-      if (path && path[path.length - 1] != "/") {
-        return this.match(path + "/", options);
-      }
       return false;
     }
     runListeners(action, params) {
@@ -88,7 +96,7 @@
           this.match(getPath(document.location.pathname, this.root));
         }
       });
-      globalThis.document.addEventListener("click", (evt) => {
+      this.app.container.addEventListener("click", (evt) => {
         if (evt.ctrlKey) {
           return;
         }
@@ -107,10 +115,11 @@
           if (this.has(path)) {
             let params = this.runListeners("goto", { path });
             if (params.path) {
-              this.goto(params.path);
+              if (this.goto(params.path)) {
+                evt.preventDefault();
+                return false;
+              }
             }
-            evt.preventDefault();
-            return false;
           }
         }
       });
@@ -171,11 +180,13 @@
     }
     return root + path;
   }
-  function getRegexpFromRoute(route) {
+  function getRegexpFromRoute(route, exact = false) {
+    if (exact) {
+      return new RegExp("^" + route.replace(/:\w+/g, "([^/]+)").replace(/:\*/, "(.*)") + "(\\?|$)");
+    }
     return new RegExp("^" + route.replace(/:\w+/g, "([^/]+)").replace(/:\*/, "(.*)"));
   }
-  function parseRoutes(routes2) {
-    let routeInfo = [];
+  function parseRoutes(routes2, routeInfo, exact = false) {
     const paths = Object.keys(routes2);
     const matchParams = /:(\w+|\*)/g;
     for (let path of paths) {
@@ -188,7 +199,7 @@
         }
       } while (matches);
       routeInfo.push({
-        match: getRegexpFromRoute(path),
+        match: getRegexpFromRoute(path, exact),
         params,
         action: routes2[path]
       });
@@ -219,7 +230,7 @@
           return;
         }
         const shouldContinue = this[command.name].call(options.app, command.source, command.value);
-        if (shouldContinue === false) {
+        if (shouldContinue !== true) {
           evt.preventDefault();
           evt.stopPropagation();
           return false;
@@ -331,7 +342,14 @@
   }
 
   // src/key.mjs
-  var SimplyKeys = class {
+  var KEY = Object.freeze({
+    Compose: 229,
+    Control: 17,
+    Meta: 224,
+    Alt: 18,
+    Shift: 16
+  });
+  var SimplyKey = class {
     constructor(options = {}) {
       if (!options.app) {
         options.app = {};
@@ -341,7 +359,7 @@
       }
       Object.assign(this, options.keys);
       const keyHandler = (e) => {
-        if (e.isComposing || e.keyCode === 229) {
+        if (e.isComposing || e.keyCode === KEY.Compose) {
           return;
         }
         if (e.defaultPrevented) {
@@ -354,714 +372,88 @@
         if (e.target.closest("[data-simply-keyboard]")) {
           selectedKeyboard = e.target.closest("[data-simply-keyboard]").dataset.simplyKeyboard;
         }
-        let key = "";
-        if (e.ctrlKey && e.keyCode != 17) {
-          key += "Control+";
-        }
-        if (e.metaKey && e.keyCode != 224) {
-          key += "Meta+";
-        }
-        if (e.altKey && e.keyCode != 18) {
-          key += "Alt+";
-        }
-        if (e.shiftKey && e.keyCode != 16) {
-          key += "Shift+";
-        }
-        key += e.key;
-        if (this[selectedKeyboard] && this[selectedKeyboard][key]) {
-          let keyboard = this[selectedKeyboard];
-          keyboard[key].call(options.app, e);
-        }
-      };
-      options.app.container.addEventListener("keydown", keyHandler);
-    }
-  };
-  function keys(options = {}) {
-    return new SimplyKeys(options);
-  }
-
-  // src/state.mjs
-  var iterate = Symbol("iterate");
-  if (!Symbol.xRay) {
-    Symbol.xRay = Symbol("xRay");
-  }
-  var signalHandler = {
-    get: (target, property, receiver) => {
-      if (property === Symbol.xRay) {
-        return target;
-      }
-      const value = target?.[property];
-      notifyGet(receiver, property);
-      if (typeof value === "function") {
-        if (Array.isArray(target)) {
-          return (...args) => {
-            let l = target.length;
-            let result = value.apply(receiver, args);
-            if (l != target.length) {
-              notifySet(receiver, makeContext("length", { was: l, now: target.length }));
-            }
-            return result;
-          };
-        } else if (target instanceof Set || target instanceof Map) {
-          return (...args) => {
-            let s = target.size;
-            let result = value.apply(target, args);
-            if (s != target.size) {
-              notifySet(receiver, makeContext("size", { was: s, now: target.size }));
-            }
-            if (["set", "add", "clear", "delete"].includes(property)) {
-              notifySet(receiver, makeContext({ entries: {}, forEach: {}, has: {}, keys: {}, values: {}, [Symbol.iterator]: {} }));
-            }
-            return result;
-          };
-        } else if (target instanceof HTMLElement || target instanceof Number || target instanceof String || target instanceof Boolean) {
-          return value.bind(target);
-        } else {
-          return value.bind(receiver);
-        }
-      }
-      if (value && typeof value == "object") {
-        return signal(value);
-      }
-      return value;
-    },
-    set: (target, property, value, receiver) => {
-      value = value?.[Symbol.xRay] || value;
-      let current = target[property];
-      if (current !== value) {
-        target[property] = value;
-        notifySet(receiver, makeContext(property, { was: current, now: value }));
-      }
-      if (typeof current === "undefined") {
-        notifySet(receiver, makeContext(iterate, {}));
-      }
-      return true;
-    },
-    has: (target, property) => {
-      let receiver = signals.get(target);
-      if (receiver) {
-        notifyGet(receiver, property);
-      }
-      return Object.hasOwn(target, property);
-    },
-    deleteProperty: (target, property) => {
-      if (typeof target[property] !== "undefined") {
-        let current = target[property];
-        delete target[property];
-        let receiver = signals.get(target);
-        notifySet(receiver, makeContext(property, { delete: true, was: current }));
-      }
-      return true;
-    },
-    defineProperty: (target, property, descriptor) => {
-      if (typeof target[property] === "undefined") {
-        let receiver = signals.get(target);
-        notifySet(receiver, makeContext(iterate, {}));
-      }
-      return Object.defineProperty(target, property, descriptor);
-    },
-    ownKeys: (target) => {
-      let receiver = signals.get(target);
-      notifyGet(receiver, iterate);
-      return Reflect.ownKeys(target);
-    }
-  };
-  var signals = /* @__PURE__ */ new WeakMap();
-  function signal(v) {
-    if (!signals.has(v)) {
-      signals.set(v, new Proxy(v, signalHandler));
-    }
-    return signals.get(v);
-  }
-  var batchedListeners = /* @__PURE__ */ new Set();
-  var batchMode = 0;
-  function notifySet(self, context = {}) {
-    let listeners = [];
-    context.forEach((change, property) => {
-      let propListeners = getListeners(self, property);
-      if (propListeners?.length) {
-        for (let listener of propListeners) {
-          addContext(listener, makeContext(property, change));
-        }
-        listeners = listeners.concat(propListeners);
-      }
-    });
-    listeners = new Set(listeners.filter(Boolean));
-    if (listeners) {
-      if (batchMode) {
-        batchedListeners = batchedListeners.union(listeners);
-      } else {
-        const currentEffect = computeStack[computeStack.length - 1];
-        for (let listener of Array.from(listeners)) {
-          if (listener != currentEffect && listener?.needsUpdate) {
-            listener();
-          }
-          clearContext(listener);
-        }
-      }
-    }
-  }
-  function makeContext(property, change) {
-    let context = /* @__PURE__ */ new Map();
-    if (typeof property === "object") {
-      for (let prop in property) {
-        context.set(prop, property[prop]);
-      }
-    } else {
-      context.set(property, change);
-    }
-    return context;
-  }
-  function addContext(listener, context) {
-    if (!listener.context) {
-      listener.context = context;
-    } else {
-      context.forEach((change, property) => {
-        listener.context.set(property, change);
-      });
-    }
-    listener.needsUpdate = true;
-  }
-  function clearContext(listener) {
-    delete listener.context;
-    delete listener.needsUpdate;
-  }
-  function notifyGet(self, property) {
-    let currentCompute = computeStack[computeStack.length - 1];
-    if (currentCompute) {
-      setListeners(self, property, currentCompute);
-    }
-  }
-  var listenersMap = /* @__PURE__ */ new WeakMap();
-  var computeMap = /* @__PURE__ */ new WeakMap();
-  function getListeners(self, property) {
-    let listeners = listenersMap.get(self);
-    return listeners ? Array.from(listeners.get(property) || []) : [];
-  }
-  function setListeners(self, property, compute) {
-    if (!listenersMap.has(self)) {
-      listenersMap.set(self, /* @__PURE__ */ new Map());
-    }
-    let listeners = listenersMap.get(self);
-    if (!listeners.has(property)) {
-      listeners.set(property, /* @__PURE__ */ new Set());
-    }
-    listeners.get(property).add(compute);
-    if (!computeMap.has(compute)) {
-      computeMap.set(compute, /* @__PURE__ */ new Map());
-    }
-    let connectedSignals = computeMap.get(compute);
-    if (!connectedSignals.has(property)) {
-      connectedSignals.set(property, /* @__PURE__ */ new Set());
-    }
-    connectedSignals.get(property).add(self);
-  }
-  function clearListeners(compute) {
-    let connectedSignals = computeMap.get(compute);
-    if (connectedSignals) {
-      connectedSignals.forEach((property) => {
-        property.forEach((s) => {
-          let listeners = listenersMap.get(s);
-          if (listeners.has(property)) {
-            listeners.get(property).delete(compute);
+        let keyCombination = [];
+        if (e.ctrlKey && e.keyCode != KEY.Control) {
+          keyCombination.push("Control");
+        }
+        if (e.metaKey && e.keyCode != KEY.Meta) {
+          keyCombination.push("Meta");
+        }
+        if (e.altKey && e.keyCode != KEY.Alt) {
+          keyCombination.push("Alt");
+        }
+        if (e.shiftKey && e.keyCode != KEY.Shift) {
+          keyCombination.push("Shift");
+        }
+        keyCombination.push(e.key.toLowerCase());
+        let keyboards = [];
+        let keyboardElement = event.target.closest("[data-simply-keyboard]");
+        while (keyboardElement) {
+          keyboards.push(keyboardElement.dataset.simplyKeyboard);
+          keyboardElement = keyboardElement.parentNode.closest("[data-simply-keyboard]");
+        }
+        keyboards.push("");
+        let keyboard, subkeyboard;
+        let separators = ["+", "-"];
+        for (i in keyboards) {
+          keyboard = keyboards[i];
+          if (keyboard == "") {
+            subkeyboard = "default";
+          } else {
+            subkeyboard = keyboard;
+            keyboard += ".";
           }
-        });
-      });
-    }
-  }
-  var computeStack = [];
-  var effectStack = [];
-  var effectMap = /* @__PURE__ */ new WeakMap();
-  var signalStack = [];
-  function destroy(connectedSignal) {
-    const computeEffect = effectMap.get(connectedSignal)?.deref();
-    if (!computeEffect) {
-      return;
-    }
-    clearListeners(computeEffect);
-    let fn = computeEffect.fn;
-    signals.remove(fn);
-    effectMap.delete(connectedSignal);
-  }
-  function throttledEffect(fn, throttleTime) {
-    if (effectStack.findIndex((f) => fn == f) !== -1) {
-      throw new Error("Recursive update() call", { cause: fn });
-    }
-    effectStack.push(fn);
-    let connectedSignal = signals.get(fn);
-    if (!connectedSignal) {
-      connectedSignal = signal({
-        current: null
-      });
-      signals.set(fn, connectedSignal);
-    }
-    let throttled = false;
-    let hasChange = true;
-    const computeEffect = function computeEffect2() {
-      if (signalStack.findIndex((s) => s == connectedSignal) !== -1) {
-        throw new Error("Cyclical dependency in update() call", { cause: fn });
-      }
-      if (throttled && throttled > Date.now()) {
-        hasChange = true;
-        return;
-      }
-      clearListeners(computeEffect2);
-      computeStack.push(computeEffect2);
-      signalStack.push(connectedSignal);
-      let result;
-      try {
-        result = fn(computeEffect2, computeStack, signalStack);
-      } finally {
-        hasChange = false;
-        computeStack.pop();
-        signalStack.pop();
-        if (result instanceof Promise) {
-          result.then((result2) => {
-            connectedSignal.current = result2;
-          });
-        } else {
-          connectedSignal.current = result;
-        }
-      }
-      throttled = Date.now() + throttleTime;
-      globalThis.setTimeout(() => {
-        if (hasChange) {
-          computeEffect2();
-        }
-      }, throttleTime);
-    };
-    computeEffect();
-    return connectedSignal;
-  }
-
-  // src/bind.mjs
-  var SimplyBind = class {
-    constructor(options) {
-      this.bindings = /* @__PURE__ */ new Map();
-      const defaultOptions = {
-        container: document.body,
-        attribute: "data-bind",
-        transformers: [],
-        defaultTransformers: [defaultTransformer]
-      };
-      if (!options?.root) {
-        throw new Error("bind needs at least options.root set");
-      }
-      this.options = Object.assign({}, defaultOptions, options);
-      const attribute = this.options.attribute;
-      const render = (el) => {
-        this.bindings.set(el, throttledEffect(() => {
-          const context = {
-            templates: el.querySelectorAll(":scope > template"),
-            path: this.getBindingPath(el)
-          };
-          context.value = getValueByPath(this.options.root, context.path);
-          context.element = el;
-          runTransformers(context);
-        }, 100));
-      };
-      const runTransformers = (context) => {
-        let transformers = this.options.defaultTransformers || [];
-        if (context.element.dataset.transform) {
-          context.element.dataset.transform.split(" ").filter(Boolean).forEach((t) => {
-            if (this.options.transformers[t]) {
-              transformers.push(this.options.transformers[t]);
-            } else {
-              console.warn("No transformer with name " + t + " configured", { cause: context.element });
+          for (let separator of separators) {
+            let keyString = keyCombination.join(separator);
+            if (this[subkeyboard] && typeof this[subkeyboard][keyString] == "function") {
+              let _continue = this[subkeyboard][keyString].call(this[subkeyboard], e);
+              if (!_continue) {
+                e.preventDefault();
+                return;
+              }
             }
-          });
-        }
-        let next;
-        for (let transformer of transformers) {
-          next = /* @__PURE__ */ ((next2, transformer2) => {
-            return (context2) => {
-              return transformer2.call(this, context2, next2);
-            };
-          })(next, transformer);
-        }
-        next(context);
-      };
-      const applyBindings = (bindings2) => {
-        for (let bindingEl of bindings2) {
-          render(bindingEl);
-        }
-      };
-      const updateBindings = (changes) => {
-        for (const change of changes) {
-          if (change.type == "childList" && change.addedNodes) {
-            for (let node of change.addedNodes) {
-              if (node instanceof HTMLElement) {
-                let bindings2 = Array.from(node.querySelectorAll(`[${attribute}]`));
-                if (node.matches(`[${attribute}]`)) {
-                  bindings2.unshift(node);
-                }
-                if (bindings2.length) {
-                  applyBindings(bindings2);
-                }
+            if (typeof this[subkeyboard + keyString] == "function") {
+              let _continue = this[subkeyboard + keyString].call(this, e);
+              if (!_continue) {
+                e.preventDefault();
+                return;
               }
             }
-          }
-        }
-      };
-      this.observer = new MutationObserver((changes) => {
-        updateBindings(changes);
-      });
-      this.observer.observe(options.container, {
-        subtree: true,
-        childList: true
-      });
-      const bindings = this.options.container.querySelectorAll("[" + this.options.attribute + "]:not(template)");
-      if (bindings.length) {
-        applyBindings(bindings);
-      }
-    }
-    /**
-     * Finds the first matching template and creates a new DocumentFragment
-     * with the correct data bind attributes in it (prepends the current path)
-     */
-    applyTemplate(context) {
-      const path = context.path;
-      const templates = context.templates;
-      const list = context.list;
-      const index = context.index;
-      const parent = context.parent;
-      const value = list ? list[index] : context.value;
-      let template = this.findTemplate(templates, value);
-      if (!template) {
-        let result = new DocumentFragment();
-        result.innerHTML = "<!-- no matching template -->";
-        return result;
-      }
-      let clone = template.content.cloneNode(true);
-      if (!clone.children?.length) {
-        throw new Error("template must contain a single html element", { cause: template });
-      }
-      if (clone.children.length > 1) {
-        throw new Error("template must contain a single root node", { cause: template });
-      }
-      const bindings = clone.querySelectorAll("[" + this.options.attribute + "]");
-      const attribute = this.options.attribute;
-      for (let binding of bindings) {
-        const bind2 = binding.getAttribute(attribute);
-        if (bind2.substring(0, "#root.".length) == "#root.") {
-          binding.setAttribute(attribute, bind2.substring("#root.".length));
-        } else if (bind2 == "#value" && index != null) {
-          binding.setAttribute(attribute, path + "." + index);
-        } else if (index != null) {
-          binding.setAttribute(attribute, path + "." + index + "." + bind2);
-        } else {
-          binding.setAttribute(attribute, parent + "." + bind2);
-        }
-      }
-      if (typeof index !== "undefined") {
-        clone.children[0].setAttribute(attribute + "-key", index);
-      }
-      clone.children[0].$bindTemplate = template;
-      return clone;
-    }
-    getBindingPath(el) {
-      return el.getAttribute(this.options.attribute);
-    }
-    /**
-     * Finds the first template from an array of templates that
-     * matches the given value. 
-     */
-    findTemplate(templates, value) {
-      const templateMatches = (t) => {
-        let path = this.getBindingPath(t);
-        let currentItem;
-        if (path) {
-          if (path.substr(0, 6) == "#root.") {
-            currentItem = getValueByPath(this.options.root, path);
-          } else {
-            currentItem = getValueByPath(value, path);
-          }
-        } else {
-          currentItem = value;
-        }
-        const strItem = "" + currentItem;
-        let matches = t.getAttribute(this.options.attribute + "-match");
-        if (matches) {
-          if (matches === "#empty" && !currentItem) {
-            return t;
-          } else if (matches === "#notempty" && currentItem) {
-            return t;
-          }
-          if (strItem.match(matches)) {
-            return t;
-          }
-        }
-        if (!matches) {
-          return t;
-        }
-      };
-      let template = Array.from(templates).find(templateMatches);
-      let rel = template?.getAttribute("rel");
-      if (rel) {
-        let replacement = document.querySelector("template#" + rel);
-        if (!replacement) {
-          throw new Error("Could not find template with id " + rel);
-        }
-        template = replacement;
-      }
-      return template;
-    }
-    destroy() {
-      this.bindings.forEach((binding) => {
-        destroy(binding);
-      });
-      this.bindings = /* @__PURE__ */ new Map();
-      this.observer.disconnect();
-    }
-  };
-  function bind(options) {
-    return new SimplyBind(options);
-  }
-  function matchValue(a, b) {
-    if (a == "#empty" && !b) {
-      return true;
-    }
-    if (b == "#empty" && !a) {
-      return true;
-    }
-    if ("" + a == "" + b) {
-      return true;
-    }
-    return false;
-  }
-  function getValueByPath(root, path) {
-    let parts = path.split(".");
-    let curr = root;
-    let part, prevPart;
-    while (parts.length && curr) {
-      part = parts.shift();
-      if (part == "#key") {
-        return prevPart;
-      } else if (part == "#value") {
-        return curr;
-      } else if (part == "#root") {
-        curr = root;
-      } else {
-        part = decodeURIComponent(part);
-        curr = curr[part];
-        prevPart = part;
-      }
-    }
-    return curr;
-  }
-  function defaultTransformer(context) {
-    const el = context.element;
-    const templates = context.templates;
-    const templatesCount = templates.length;
-    const path = context.path;
-    const value = context.value;
-    const attribute = this.options.attribute;
-    if (Array.isArray(value) && templates?.length) {
-      transformArrayByTemplates.call(this, context);
-    } else if (typeof value == "object" && templates?.length) {
-      transformObjectByTemplates.call(this, context);
-    } else if (templates?.length) {
-      transformLiteralByTemplates.call(this, context);
-    } else if (el.tagName == "INPUT") {
-      transformInput.call(this, context);
-    } else if (el.tagName == "BUTTON") {
-      transformButton.call(this, context);
-    } else if (el.tagName == "SELECT") {
-      transformSelect.call(this, context);
-    } else if (el.tagName == "A") {
-      transformAnchor.call(this, context);
-    } else {
-      transformElement.call(this, context);
-    }
-    return context;
-  }
-  function transformArrayByTemplates(context) {
-    const el = context.element;
-    const templates = context.templates;
-    const templatesCount = templates.length;
-    const path = context.path;
-    const value = context.value;
-    const attribute = this.options.attribute;
-    let items = el.querySelectorAll(":scope > [" + attribute + "-key]");
-    let lastKey = 0;
-    let skipped = 0;
-    context.list = value;
-    for (let item2 of items) {
-      let currentKey = parseInt(item2.getAttribute(attribute + "-key"));
-      if (currentKey > lastKey) {
-        context.index = lastKey;
-        el.insertBefore(this.applyTemplate(context), item2);
-      } else if (currentKey < lastKey) {
-        item2.remove();
-      } else {
-        let bindings = Array.from(item2.querySelectorAll(`[${attribute}]`));
-        if (item2.matches(`[${attribute}]`)) {
-          bindings.unshift(item2);
-        }
-        let needsReplacement = bindings.find((b) => {
-          let databind = b.getAttribute(attribute);
-          return databind.substr(0, 5) !== "#root" && databind.substr(0, path.length) !== path;
-        });
-        if (!needsReplacement) {
-          if (item2.$bindTemplate) {
-            let newTemplate = this.findTemplate(templates, value[lastKey]);
-            if (newTemplate != item2.$bindTemplate) {
-              needsReplacement = true;
-              if (!newTemplate) {
-                skipped++;
+            if (this[selectedKeyboard] && this[selectedKeyboard][keyString]) {
+              let targets = options.app.container.querySelectorAll('[data-simply-accesskey="' + keyboard + keyString + '"]');
+              if (targets.length) {
+                targets.forEach((t) => t.click());
+                e.preventDefault();
               }
             }
           }
         }
-        if (needsReplacement) {
-          context.index = lastKey;
-          el.replaceChild(this.applyTemplate(context), item2);
-        }
-      }
-      lastKey++;
-      if (lastKey >= value.length) {
-        break;
-      }
-    }
-    items = el.querySelectorAll(":scope > [" + attribute + "-key]");
-    let length = items.length + skipped;
-    if (length > value.length) {
-      while (length > value.length) {
-        let child = el.querySelectorAll(":scope > :not(template)")?.[length - 1];
-        child?.remove();
-        length--;
-      }
-    } else if (length < value.length) {
-      while (length < value.length) {
-        context.index = length;
-        el.appendChild(this.applyTemplate(context));
-        length++;
-      }
-    }
-  }
-  function transformObjectByTemplates(context) {
-    const el = context.element;
-    const templates = context.templates;
-    const templatesCount = templates.length;
-    const path = context.path;
-    const value = context.value;
-    const attribute = this.options.attribute;
-    context.list = value;
-    let items = Array.from(el.querySelectorAll(":scope > [" + attribute + "-key]"));
-    for (let key in context.list) {
-      context.index = key;
-      let item2 = items.shift();
-      if (!item2) {
-        el.appendChild(this.applyTemplate(context));
-        continue;
-      }
-      if (item2.getAttribute[attribute + "-key"] != key) {
-        items.unshift(item2);
-        let outOfOrderItem = el.querySelector(":scope > [" + attribute + '-key="' + key + '"]');
-        if (!outOfOrderItem) {
-          let clone = this.applyTemplate(context);
-          if (clone.firstElementChild) {
-            el.insertBefore(clone, item2);
-          }
-          continue;
-        } else {
-          el.insertBefore(outOfOrderItem, item2);
-          item2 = outOfOrderItem;
-          items = items.filter((i) => i != outOfOrderItem);
-        }
-      }
-      let newTemplate = this.findTemplate(templates, value[key]);
-      if (newTemplate != item2.$bindTemplate) {
-        let clone = this.applyTemplate(context);
-        el.replaceChild(clone, item2);
-      }
-    }
-    while (items.length) {
-      item = items.shift();
-      item.remove();
-    }
-  }
-  function transformLiteralByTemplates(context) {
-    const el = context.element;
-    const templates = context.templates;
-    const value = context.value;
-    const attribute = this.options.attribute;
-    const rendered = el.querySelector(":scope > :not(template)");
-    const template = this.findTemplate(templates, value);
-    context.parent = el.parentElement?.closest(`[${attribute}]`)?.getAttribute(attribute) || "#root";
-    if (rendered) {
-      if (template) {
-        if (rendered?.$bindTemplate != template) {
-          const clone = this.applyTemplate(context);
-          el.replaceChild(clone, rendered);
-        }
-      } else {
-        el.removeChild(rendered);
-      }
-    } else if (template) {
-      const clone = this.applyTemplate(context);
-      el.appendChild(clone);
+      };
+      options.app.container.addEventListener("keydown", keyHandler);
     }
+  };
+  function keys(options = {}) {
+    return new SimplyKey(options);
   }
-  function transformInput(context) {
-    const el = context.element;
-    const value = context.value;
-    if (el.type == "checkbox" || el.type == "radio") {
-      if (matchValue(el.value, value)) {
-        el.checked = true;
+
+  // src/view.mjs
+  function view(options) {
+    if (options.app) {
+      options.app.view = options.view || {};
+      const load = () => {
+        const data = options.app.view;
+        const path = globalThis.editor.data.getDataPath(options.app.container || document.body);
+        options.app.view = globalThis.editor.currentData[path];
+        Object.assign(options.app.view, data);
+      };
+      if (globalThis.editor && globalThis.editor.currentData) {
+        load();
       } else {
-        el.checked = false;
-      }
-    } else if (!matchValue(el.value, value)) {
-      el.value = "" + value;
-    }
-  }
-  function transformButton(context) {
-    const el = context.element;
-    const value = context.value;
-    if (!matchValue(el.value, value)) {
-      el.value = "" + value;
-    }
-  }
-  function transformSelect(context) {
-    const el = context.element;
-    const value = context.value;
-    if (el.multiple) {
-      if (Array.isArray(value)) {
-        for (let option of el.options) {
-          if (value.indexOf(option.value) === false) {
-            option.selected = false;
-          } else {
-            option.selected = true;
-          }
-        }
+        document.addEventListener("simply-content-loaded", load);
       }
+      return options.app.view;
     } else {
-      let option = el.options.find((o) => matchValue(o.value, value));
-      if (option) {
-        option.selected = true;
-      }
-    }
-  }
-  function transformAnchor(context) {
-    const el = context.element;
-    const value = context.value;
-    if (value?.innerHTML && !matchValue(el.innerHTML, value.innerHTML)) {
-      el.innerHTML = "" + value.innerHTML;
-    }
-    if (value?.href && !matchValue(el.href, value.href)) {
-      el.href = "" + value.href;
-    }
-  }
-  function transformElement(context) {
-    const el = context.element;
-    const value = context.value;
-    if (!matchValue(el.innerHTML, value)) {
-      if (typeof value == "undefined" || value == null) {
-        el.innerHTML = "";
-      } else {
-        el.innerHTML = "" + value;
-      }
+      return options.view;
     }
   }
 
@@ -1069,30 +461,29 @@
   var SimplyApp = class {
     constructor(options = {}) {
       this.container = options.container || document.body;
-      if (!options.state) {
-        options.state = {};
-      }
-      this.state = signal(options.state);
-      if (options.commands) {
-        this.commands = commands({ app: this, container: this.container, commands: options.commands });
-      }
-      if (options.keys) {
-        this.keys = keys({ app: this, keys: options.keys });
-      }
-      if (options.routes) {
-        this.routes = routes({ app: this, routes: options.routes });
-      }
-      if (options.actions) {
-        this.actions = actions({ app: this, actions: options.actions });
-      }
-      let bindOptions = { container: this.container, root: this.state };
-      if (options.defaultTransformers) {
-        bindOptions.defaultTransformers = options.defaultTransformers;
-      }
-      if (options.transformers) {
-        bindOptions.transformers = options.transformers;
+      for (let key in options) {
+        switch (key) {
+          case "commands":
+            this.commands = commands({ app: this, container: this.container, commands: options.commands });
+            break;
+          case "keys":
+          case "keyboard":
+            this.keys = keys({ app: this, keys: options.keys });
+            break;
+          case "routes":
+            this.routes = routes({ app: this, routes: options.routes });
+            break;
+          case "actions":
+            this.actions = actions({ app: this, actions: options.actions });
+            break;
+          case "view":
+            this.view = view({ app: this, view: options.view });
+            break;
+          default:
+            this[key] = options[key];
+            break;
+        }
       }
-      this.bind = bind(bindOptions);
     }
   };
   function app(options = {}) {