@muze-labs/simplyflow 0.9.0 → 0.10.0

package/dist/simply.flow.js

@@ -5,9 +5,9 @@
       __defProp(target, name, { get: all[name], enumerable: true });
   };
 
-  // src/state.mjs
-  var state_exports = {};
-  __export(state_exports, {
+  // ../state/src/index.mjs
+  var src_exports = {};
+  __export(src_exports, {
     addTracer: () => addTracer,
     batch: () => batch,
     clockEffect: () => clockEffect,
@@ -29,7 +29,7 @@
     untracked: () => untracked
   });
 
-  // src/symbols.mjs
+  // ../state/src/symbols.mjs
   var DEP = {
     ITERATE: Symbol.for("@simplyedit/simplyflow.iterate"),
     XRAY: Symbol.for("@simplyedit/simplyflow.xRay"),
@@ -40,7 +40,7 @@
     SIZE: "size"
   };
 
-  // src/state.mjs
+  // ../state/src/index.mjs
   var MAP_READS_KEY = /* @__PURE__ */ new Set(["get", "has"]);
   var MAP_READS_ITERATION = /* @__PURE__ */ new Set(["keys", "values", "entries", "forEach", Symbol.iterator]);
   var MAP_WRITES = /* @__PURE__ */ new Set(["set", "delete", "clear"]);
@@ -666,7 +666,6 @@
       runTracked(compute, connectedSignal, fn, throttledEffect);
       hasChange = false;
       throttledUntil = Date.now() + throttleTime;
-      schedule();
     };
     function schedule() {
       if (timeout) {
@@ -983,29 +982,7 @@
     return cloneValue(value);
   }
 
-  // src/bind.transformers.mjs
-  function escape_html(context, next) {
-    let content = context.value?.innerHTML;
-    if (typeof context.value == "string") {
-      content = context.value;
-      context.value = { innerHTML: content };
-    }
-    if (content) {
-      content = content.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-      context.value.innerHTML = content;
-    }
-    next(context);
-  }
-  function fixed_content(context, next) {
-    if (typeof context.value == "string") {
-      context.value = {};
-    } else {
-      delete context.value?.innerHTML;
-    }
-    next(context);
-  }
-
-  // src/dom.mjs
+  // ../bind/src/dom.mjs
   var dom_exports = {};
   __export(dom_exports, {
     findAttribute: () => findAttribute,
@@ -1013,210 +990,8 @@
     trackDomField: () => trackDomField,
     trackDomList: () => trackDomList
   });
-  var domSignals = /* @__PURE__ */ new WeakMap();
-  var observers = /* @__PURE__ */ new WeakMap();
-  var domSignalHandler = {
-    get: (target, property, receiver) => {
-      const value = target?.[property];
-      notifyGet(receiver, property);
-      if (typeof value === "function") {
-        return value.bind(target);
-      }
-      if (value && typeof value == "object") {
-        return signal(value);
-      }
-      return value;
-    },
-    set: (target, property, value, receiver) => {
-      const current = target[property];
-      target[property] = value;
-      const now = target[property];
-      if (!Object.is(current, now)) {
-        notifySet(receiver, makeContext(property, { was: current, now }));
-      }
-      return true;
-    },
-    has: (target, property) => {
-      const receiver = getSignal(target);
-      if (receiver) {
-        notifyGet(receiver, property);
-      }
-      return Reflect.has(target, property);
-    },
-    ownKeys: (target) => {
-      const receiver = getSignal(target);
-      if (receiver) {
-        notifyGet(receiver, DEP.ITERATE);
-      }
-      return Reflect.ownKeys(target);
-    }
-  };
-  function signal2(el, options) {
-    if (isSignal(el)) {
-      return el;
-    }
-    const existing = getSignal(el);
-    if (existing) {
-      return existing;
-    }
-    return createSignal(el, domSignalHandler, (target, proxy) => {
-      domListen(target, proxy, options);
-    });
-  }
-  function domListen(el, signal3, options) {
-    const defaultOptions = {
-      characterData: true,
-      subtree: true,
-      attributes: true,
-      attributesOldValue: true,
-      childList: true
-    };
-    if (!options) {
-      options = defaultOptions;
-    }
-    let oldContentHTML = el.innerHTML;
-    let oldContentText = el.innerText;
-    if (!observers.has(el)) {
-      const observer = new MutationObserver((mutationList, observer2) => {
-        const changes = {};
-        for (const mutation of mutationList) {
-          if (mutation.type === "attributes") {
-            changes[mutation.attributeName] = mutation.attributeOldValue;
-          } else if (mutation.type === "subtree" || mutation.type === "characterData") {
-            if (el.innerHTML != oldContentHTML) {
-              changes.innerHTML = oldContentHTML;
-              oldContentHTML = el.innerHTML;
-            }
-            if (el.innerText != oldContentText) {
-              changes.innerText = oldContentText;
-              oldContentText = el.innerText;
-            }
-          } else if (mutation.type === "childList") {
-            changes.children = {
-              //FIXME: overwrites changes in this list path if list is rendered multiple times
-              was: Array.from(el.children)
-              //FIXME; fill in 'now'
-            };
-            changes.length = -1;
-            if (el.innerHTML != oldContentHTML) {
-              changes.innerHTML = oldContentHTML;
-              oldContentHTML = el.innerHTML;
-            }
-            if (el.innerText != oldContentText) {
-              changes.innerText = oldContentText;
-              oldContentText = el.innerText;
-            }
-          } else {
-            console.log("nothing to do for", el, mutation.type);
-          }
-        }
-        for (const prop in changes) {
-          notifySet(signal3, makeContext(prop, { was: changes[prop], now: el[prop] }));
-        }
-      });
-      observer.observe(el, options);
-      observers.set(el, observer);
-      if (el.matches("input, textarea, select")) {
-        let prevValue = el.value;
-        let prevChecked = el.checked;
-        const notifyFormValue = () => {
-          notifySet(signal3, makeContext("value", { was: prevValue, now: el.value }));
-          prevValue = el.value;
-          if ("checked" in el) {
-            notifySet(signal3, makeContext("checked", { was: prevChecked, now: el.checked }));
-            prevChecked = el.checked;
-          }
-        };
-        el.addEventListener("change", notifyFormValue);
-        if (el.matches("input, textarea")) {
-          el.addEventListener("input", notifyFormValue);
-        }
-      }
-    }
-  }
-  function trackDomList(element2) {
-    const path2 = this.getBindingPath(element2);
-    if (!path2) {
-      throw new Error("Could not find binding path for element", { cause: element2 });
-    }
-    const s = signal2(element2, {
-      childList: true
-    });
-    throttledEffect(() => {
-      const children = Array.from(s.children);
-      untracked(() => {
-        batch(() => {
-          let key = 0;
-          const currentList = getValueByPath(this.options.root, path2);
-          const source = currentList.slice();
-          for (const item of children) {
-            if (item.tagName === "TEMPLATE") {
-              continue;
-            }
-            if (item.dataset.flowKey) {
-              if (item.dataset.flowKey != key) {
-                setValueByPath(
-                  this.options.root,
-                  path2 + "." + key,
-                  source[item.dataset.flowKey]
-                );
-              }
-              key++;
-            }
-          }
-          if (currentList.length > key) {
-            currentList.length = key;
-          }
-        });
-      });
-    }, 50);
-    return s;
-  }
-  function trackDomField(element2, props, valueIsString, stringProperty = "innerHTML", getUpdateValue) {
-    if (domSignals.has(element2)) {
-      return;
-    }
-    const path2 = this.getBindingPath(element2);
-    if (!path2) {
-      throw new Error("Could not find binding path for element", { cause: element2 });
-    }
-    const s = signal2(element2);
-    domSignals.set(element2, s);
-    batch(() => {
-      throttledEffect(() => {
-        let updateValue;
-        if (getUpdateValue) {
-          for (const prop of props) {
-            s[prop];
-          }
-        } else {
-          updateValue = s[stringProperty];
-          if (!valueIsString) {
-            updateValue = getProperties(s, ...props);
-          }
-        }
-        untracked(() => {
-          const currentValue = getValueByPath(this.options.root, path2);
-          if (getUpdateValue) {
-            updateValue = getUpdateValue.call(this, s, currentValue);
-          }
-          if (typeof updateValue === "undefined") {
-            return;
-          }
-          if (valueIsString && !Object.is(currentValue, updateValue) && String(currentValue) === updateValue) {
-            return;
-          }
-          setValueByPath(this.options.root, path2, updateValue);
-        });
-      }, 50);
-    });
-    return s;
-  }
-  function findAttribute(el, attr) {
-    return el.closest("[" + attr + "]")?.getAttribute(attr);
-  }
 
-  // src/bind.render.mjs
+  // ../bind/src/render.mjs
   function writesFromDom(binding, context) {
     return binding.options.twoway || context.edit;
   }
@@ -1260,7 +1035,7 @@
       return true;
     }
   }
-  function setValueByPath(root, path2, value) {
+  function setValueByPath(root, path2, value, options = {}) {
     batch(() => {
       let parts = path2.split(".");
       let curr = root;
@@ -1296,7 +1071,9 @@
           curr = prevCurr[prevPart];
         }
       }
-      if (prev && prevPart && prev[prevPart] !== value) {
+      if (prev && prevPart && options.replace) {
+        prev[prevPart] = value;
+      } else if (prev && prevPart && prev[prevPart] !== value) {
         if (Array.isArray(value)) {
           prev[prevPart] = value;
         } else if (value && typeof value == "object") {
@@ -1318,8 +1095,8 @@
   }
   function arrayByTemplates(context) {
     const attribute = this.options.attribute;
-    const attributes = [attribute + "-field", attribute + "-edit", attribute + "-list", attribute + "-map", attribute + "-value-path"];
-    const attrQuery = "[" + attributes.join("],[") + "]";
+    const attributes2 = [attribute + "-field", attribute + "-edit", attribute + "-list", attribute + "-map", attribute + "-value-path"];
+    const attrQuery = "[" + attributes2.join("],[") + "]";
     const keyAttribute = attribute + "-key";
     const items = Array.from(context.element.querySelectorAll(":scope > [" + keyAttribute + "]"));
     const usedItems = /* @__PURE__ */ new Set();
@@ -1340,8 +1117,10 @@
         if (newTemplate != reusableItem[DEP.TEMPLATE]) {
           context.element.replaceChild(this.applyTemplate(context), reusableItem);
         } else {
-          context.element.insertBefore(reusableItem, item);
-          updateItemKey(reusableItem, index, context.path, keyAttribute, attributes, attrQuery);
+          if (reusableItem !== item) {
+            context.element.insertBefore(reusableItem, item);
+          }
+          updateItemKey(reusableItem, index, context.path, keyAttribute, attributes2, attrQuery);
           reusableItem[DEP.VALUE] = value;
         }
         usedItems.add(reusableItem);
@@ -1378,7 +1157,7 @@
       }
     }
   }
-  function updateItemKey(item, key, path2, keyAttribute, attributes, attrQuery) {
+  function updateItemKey(item, key, path2, keyAttribute, attributes2, attrQuery) {
     const oldKey = item.getAttribute(keyAttribute);
     const newKey = "" + key;
     if (oldKey === newKey) {
@@ -1392,7 +1171,7 @@
       bindings.unshift(item);
     }
     for (let binding of bindings) {
-      for (let attr of attributes) {
+      for (let attr of attributes2) {
         const bindPath = binding.getAttribute(attr);
         if (!bindPath || bindPath.substr(0, 5) === ":root") {
           continue;
@@ -1407,8 +1186,8 @@
   }
   function objectByTemplates(context) {
     const attribute = this.options.attribute;
-    const attributes = [attribute + "-field", attribute + "-edit", attribute + "-list", attribute + "-map", attribute + "-value-path"];
-    const attrQuery = "[" + attributes.join("],[") + "]";
+    const attributes2 = [attribute + "-field", attribute + "-edit", attribute + "-list", attribute + "-map", attribute + "-value-path"];
+    const attrQuery = "[" + attributes2.join("],[") + "]";
     const keyAttribute = attribute + "-key";
     const items = Array.from(context.element.querySelectorAll(":scope > [" + keyAttribute + "]"));
     const usedItems = /* @__PURE__ */ new Set();
@@ -1433,8 +1212,10 @@
         if (newTemplate != reusableItem[DEP.TEMPLATE]) {
           context.element.replaceChild(this.applyTemplate(context), reusableItem);
         } else {
-          context.element.insertBefore(reusableItem, item);
-          updateItemKey(reusableItem, key, context.path, keyAttribute, attributes, attrQuery);
+          if (reusableItem !== item) {
+            context.element.insertBefore(reusableItem, item);
+          }
+          updateItemKey(reusableItem, key, context.path, keyAttribute, attributes2, attrQuery);
           reusableItem[DEP.VALUE] = value;
         }
         usedItems.add(reusableItem);
@@ -1506,11 +1287,11 @@
     }
     if (writesFromDom(this, context)) {
       if (el.type == "checkbox") {
-        trackDomField.call(this, context.element, ["checked"], true, "checked", checkboxEditValue);
+        trackDomField.call(this, context.element, ["checked"], true, "checked", checkboxEditValue, context);
       } else if (el.type == "radio") {
-        trackDomField.call(this, context.element, ["checked"], true, "checked", radioEditValue);
+        trackDomField.call(this, context.element, ["checked"], true, "checked", radioEditValue, context);
       } else {
-        trackDomField.call(this, context.element, ["value"], true, "value");
+        trackDomField.call(this, context.element, ["value"], true, "value", void 0, context);
       }
     }
   }
@@ -1581,9 +1362,9 @@
     }
     if (writesFromDom(this, context)) {
       if (el.multiple) {
-        trackDomField.call(this, context.element, ["value"], true, "value", selectMultipleEditValue);
+        trackDomField.call(this, context.element, ["value"], true, "value", selectMultipleEditValue, context);
       } else {
-        trackDomField.call(this, context.element, ["value"], true, "value");
+        trackDomField.call(this, context.element, ["value"], true, "value", void 0, context);
       }
     }
   }
@@ -1661,7 +1442,7 @@
     const props = ["innerHTML", "title", "id", "className"].concat(extraprops);
     setProperties(el, value, ...props);
     if (writesFromDom(this, context)) {
-      trackDomField.call(this, context.element, props, valueIsString);
+      trackDomField.call(this, context.element, props, valueIsString, "innerHTML", void 0, context);
     }
   }
   function setProperties(el, data, ...properties) {
@@ -1683,7 +1464,7 @@
     }
   }
   function updateProperties(context, properties) {
-    trackDomField.call(this, context.element, properties, false);
+    trackDomField.call(this, context.element, properties, false, "innerHTML", void 0, context);
   }
   function getProperties(el, ...properties) {
     const result = {};
@@ -1709,7 +1490,321 @@
     return false;
   }
 
-  // src/bind.mjs
+  // ../bind/src/dom.mjs
+  var domSignals = /* @__PURE__ */ new WeakMap();
+  var observers = /* @__PURE__ */ new WeakMap();
+  var domSignalHandler = {
+    get: (target, property, receiver) => {
+      const value = target?.[property];
+      notifyGet(receiver, property);
+      if (typeof value === "function") {
+        return value.bind(target);
+      }
+      if (value && typeof value == "object") {
+        return signal(value);
+      }
+      return value;
+    },
+    set: (target, property, value, receiver) => {
+      const current = target[property];
+      target[property] = value;
+      const now = target[property];
+      if (!Object.is(current, now)) {
+        notifySet(receiver, makeContext(property, { was: current, now }));
+      }
+      return true;
+    },
+    has: (target, property) => {
+      const receiver = getSignal(target);
+      if (receiver) {
+        notifyGet(receiver, property);
+      }
+      return Reflect.has(target, property);
+    },
+    ownKeys: (target) => {
+      const receiver = getSignal(target);
+      if (receiver) {
+        notifyGet(receiver, DEP.ITERATE);
+      }
+      return Reflect.ownKeys(target);
+    }
+  };
+  function signal2(el, options) {
+    if (isSignal(el)) {
+      return el;
+    }
+    const existing = getSignal(el);
+    if (existing) {
+      return existing;
+    }
+    return createSignal(el, domSignalHandler, (target, proxy) => {
+      domListen(target, proxy, options);
+    });
+  }
+  function domListen(el, signal3, options) {
+    const defaultOptions = {
+      characterData: true,
+      subtree: true,
+      attributes: true,
+      attributesOldValue: true,
+      childList: true
+    };
+    if (!options) {
+      options = defaultOptions;
+    }
+    let oldContentHTML = el.innerHTML;
+    let oldContentText = el.innerText;
+    if (!observers.has(el)) {
+      const observer = new MutationObserver((mutationList, observer2) => {
+        const changes = {};
+        for (const mutation of mutationList) {
+          if (mutation.type === "attributes") {
+            changes[mutation.attributeName] = mutation.attributeOldValue;
+          } else if (mutation.type === "subtree" || mutation.type === "characterData") {
+            if (el.innerHTML != oldContentHTML) {
+              changes.innerHTML = oldContentHTML;
+              oldContentHTML = el.innerHTML;
+            }
+            if (el.innerText != oldContentText) {
+              changes.innerText = oldContentText;
+              oldContentText = el.innerText;
+            }
+          } else if (mutation.type === "childList") {
+            changes.children = {
+              //FIXME: overwrites changes in this list path if list is rendered multiple times
+              was: Array.from(el.children)
+              //FIXME; fill in 'now'
+            };
+            changes.length = -1;
+            if (el.innerHTML != oldContentHTML) {
+              changes.innerHTML = oldContentHTML;
+              oldContentHTML = el.innerHTML;
+            }
+            if (el.innerText != oldContentText) {
+              changes.innerText = oldContentText;
+              oldContentText = el.innerText;
+            }
+          } else {
+            console.log("nothing to do for", el, mutation.type);
+          }
+        }
+        for (const prop in changes) {
+          notifySet(signal3, makeContext(prop, { was: changes[prop], now: el[prop] }));
+        }
+      });
+      observer.observe(el, options);
+      observers.set(el, observer);
+      if (el.matches("input, textarea, select")) {
+        let prevValue = el.value;
+        let prevChecked = el.checked;
+        const notifyFormValue = () => {
+          notifySet(signal3, makeContext("value", { was: prevValue, now: el.value }));
+          prevValue = el.value;
+          if ("checked" in el) {
+            notifySet(signal3, makeContext("checked", { was: prevChecked, now: el.checked }));
+            prevChecked = el.checked;
+          }
+        };
+        el.addEventListener("change", notifyFormValue);
+        if (el.matches("input, textarea")) {
+          el.addEventListener("input", notifyFormValue);
+        }
+      }
+    }
+  }
+  function trackDomList(element2) {
+    const path2 = this.getBindingPath(element2);
+    if (!path2) {
+      throw new Error("Could not find binding path for element", { cause: element2 });
+    }
+    const s = signal2(element2, {
+      childList: true
+    });
+    throttledEffect(() => {
+      const children = Array.from(s.children);
+      untracked(() => {
+        batch(() => {
+          let key = 0;
+          const currentList = getValueByPath(this.options.root, path2);
+          const source = currentList.slice();
+          for (const item of children) {
+            if (item.tagName === "TEMPLATE") {
+              continue;
+            }
+            if (item.dataset.flowKey) {
+              if (item.dataset.flowKey != key) {
+                setValueByPath(
+                  this.options.root,
+                  path2 + "." + key,
+                  source[item.dataset.flowKey]
+                );
+              }
+              key++;
+            }
+          }
+          if (currentList.length > key) {
+            currentList.length = key;
+          }
+        });
+      });
+    }, 50);
+    return s;
+  }
+  function trackDomField(element2, props, valueIsString, stringProperty = "innerHTML", getUpdateValue, context) {
+    if (domSignals.has(element2)) {
+      return;
+    }
+    const path2 = this.getBindingPath(element2);
+    if (!path2) {
+      throw new Error("Could not find binding path for element", { cause: element2 });
+    }
+    const s = signal2(element2);
+    domSignals.set(element2, s);
+    batch(() => {
+      throttledEffect(() => {
+        let updateValue;
+        if (getUpdateValue) {
+          for (const prop of props) {
+            s[prop];
+          }
+        } else {
+          updateValue = s[stringProperty];
+          if (!valueIsString) {
+            updateValue = getProperties(s, ...props);
+          }
+        }
+        untracked(() => {
+          const currentValue = getValueByPath(this.options.root, path2);
+          if (getUpdateValue) {
+            updateValue = getUpdateValue.call(this, s, currentValue);
+          }
+          if (typeof updateValue === "undefined") {
+            return;
+          }
+          updateValue = this.extractValue?.(context, updateValue, currentValue) ?? updateValue;
+          if (typeof updateValue === "undefined") {
+            return;
+          }
+          if (valueIsString && !Object.is(currentValue, updateValue) && String(currentValue) === updateValue) {
+            return;
+          }
+          setValueByPath(this.options.root, path2, updateValue, { replace: context?.replaceValue });
+        });
+      }, 50);
+    });
+    return s;
+  }
+  function findAttribute(el, attr) {
+    return el.closest("[" + attr + "]")?.getAttribute(attr);
+  }
+
+  // ../bind/src/transformers.mjs
+  var escape_html = {
+    render(context, next) {
+      if (typeof context.value !== "string") {
+        return next(context);
+      }
+      if (usesValueProperty(context.element)) {
+        context.value = { value: context.value };
+      } else {
+        context.value = { innerHTML: escapeHTML(context.value) };
+      }
+      return next(context);
+    },
+    extract(context, next) {
+      if (typeof context.value === "string") {
+        context.value = unescapeHTML(context.value);
+      } else if (context.value && typeof context.value === "object") {
+        if (typeof context.value.innerHTML === "string") {
+          context.value = unescapeHTML(context.value.innerHTML);
+        } else if (typeof context.value.value === "string") {
+          context.value = context.value.value;
+        }
+      }
+      return next(context);
+    }
+  };
+  function usesValueProperty(element2) {
+    return element2?.tagName === "INPUT" || element2?.tagName === "TEXTAREA";
+  }
+  function escapeHTML(value) {
+    return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  function unescapeHTML(value) {
+    const textarea = document.createElement("textarea");
+    textarea.innerHTML = value;
+    return textarea.value;
+  }
+  function fixed_content(context, next) {
+    if (typeof context.value == "string") {
+      context.value = {};
+    } else {
+      delete context.value?.innerHTML;
+    }
+    next(context);
+  }
+  var attributes = {
+    render(context) {
+      const names = getAttributeNames.call(this, context);
+      setAttributes(context.element, context.value, names);
+      if (context.edit) {
+        trackDomField.call(
+          this,
+          context.element,
+          names,
+          false,
+          "innerHTML",
+          () => readAttributes(context.element, names),
+          context
+        );
+      }
+      return context;
+    },
+    extract(context, next) {
+      const names = getAttributeNames.call(this, context);
+      context.value = readAttributes(context.element, names);
+      context.replaceValue = true;
+      return next ? next(context) : context;
+    }
+  };
+  function getAttributeNames(context) {
+    const attribute = this.options.attribute + "-attributes";
+    const configured = context.element.getAttribute(attribute);
+    if (configured) {
+      return configured.split(/[\s,]+/).filter(Boolean);
+    }
+    if (context.value && typeof context.value === "object" && !Array.isArray(context.value)) {
+      return Object.keys(context.value);
+    }
+    if (context.currentValue && typeof context.currentValue === "object" && !Array.isArray(context.currentValue)) {
+      return Object.keys(context.currentValue);
+    }
+    return [];
+  }
+  function setAttributes(element2, data, names) {
+    if (!names.length || !data || typeof data !== "object" || Array.isArray(data)) {
+      return;
+    }
+    for (const name of names) {
+      const value = data[name];
+      if (typeof value === "undefined" || value === null) {
+        element2.removeAttribute(name);
+      } else if (element2.getAttribute(name) !== "" + value) {
+        element2.setAttribute(name, "" + value);
+      }
+    }
+  }
+  function readAttributes(element2, names) {
+    const data = {};
+    for (const name of names) {
+      if (element2.hasAttribute(name)) {
+        data[name] = element2.getAttribute(name);
+      }
+    }
+    return data;
+  }
+
+  // ../bind/src/index.mjs
   var SimplyBind = class {
     /**
      * @param Object options - a set of options for this instance, options may include:
@@ -1723,7 +1818,8 @@
       this.bindings = /* @__PURE__ */ new Map();
       const defaultTransformers = {
         escape_html,
-        fixed_content
+        fixed_content,
+        attributes
       };
       const defaultOptions = {
         container: document.body,
@@ -1754,10 +1850,11 @@
       this.options = Object.assign({}, defaultOptions, options);
       if (options.transformers) {
         this.options.transformers = Object.assign({}, defaultTransformers, options?.transformers);
+      } else {
+        this.options.transformers = defaultTransformers;
       }
       const attribute = this.options.attribute;
       const bindAttributes = [attribute + "-field", attribute + "-edit", attribute + "-list", attribute + "-map"];
-      const transformAttribute = attribute + "-transform";
       const getBindingAttribute = (el) => {
         const foundAttribute = bindAttributes.find((attr) => el.hasAttribute(attr));
         if (!foundAttribute) {
@@ -1805,24 +1902,8 @@
             throw new Error("no valid context attribute specified", context);
             break;
         }
-        if (context.element.hasAttribute(transformAttribute)) {
-          context.element.getAttribute(transformAttribute).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 });
-            }
-          });
-        }
-        let next;
-        for (let transformer of transformers) {
-          next = /* @__PURE__ */ ((next2, transformer2) => {
-            return (context2) => {
-              return transformer2.call(this, context2, next2);
-            };
-          })(next, transformer);
-        }
-        next(context);
+        transformers.push(...this.getNamedTransformers(context.element).map((transformer) => getTransformerPhase(transformer, "render")).filter(Boolean));
+        runTransformerStack.call(this, transformers, context);
       };
       const applyBindings = (bindings2) => {
         for (let bindingEl of bindings2) {
@@ -1895,13 +1976,13 @@
         throw new Error("template must contain a single root node", { cause: template });
       }
       const attribute = this.options.attribute;
-      const attributes = [attribute + "-field", attribute + "-edit", attribute + "-list", attribute + "-map"];
+      const attributes2 = [attribute + "-field", attribute + "-edit", attribute + "-list", attribute + "-map"];
       const bindings = clone2.querySelectorAll(`[${attribute}-field],[${attribute}-edit],[${attribute}-list],[${attribute}-map]`);
       for (let binding of bindings) {
         if (binding.tagName == "TEMPLATE") {
           continue;
         }
-        const attr = attributes.find((attr2) => binding.hasAttribute(attr2));
+        const attr = attributes2.find((attr2) => binding.hasAttribute(attr2));
         let bind2 = binding.getAttribute(attr);
         bind2 = this.applyLinks(template.links, bind2);
         if (bind2.substring(0, ":root.".length) == ":root.") {
@@ -1967,18 +2048,50 @@
      * @return string The path referenced, or void
      */
     getBindingPath(el) {
-      const attributes = [
+      const attributes2 = [
         this.options.attribute + "-field",
         this.options.attribute + "-edit",
         this.options.attribute + "-list",
         this.options.attribute + "-map"
       ];
-      for (let attr of attributes) {
+      for (let attr of attributes2) {
         if (el.hasAttribute(attr)) {
           return el.getAttribute(attr);
         }
       }
     }
+    getNamedTransformers(el) {
+      const transformAttribute = this.options.attribute + "-transform";
+      if (!el.hasAttribute(transformAttribute)) {
+        return [];
+      }
+      return el.getAttribute(transformAttribute).split(" ").filter(Boolean).map((name) => {
+        const transformer = this.options.transformers[name];
+        if (!transformer) {
+          console.warn("No transformer with name " + name + " configured", { cause: el });
+          return null;
+        }
+        return transformer;
+      }).filter(Boolean);
+    }
+    extractValue(context, value, currentValue) {
+      if (!context?.element) {
+        return value;
+      }
+      const transformers = this.getNamedTransformers(context.element).map((transformer) => getTransformerPhase(transformer, "extract")).filter(Boolean).reverse();
+      if (!transformers.length) {
+        return value;
+      }
+      delete context.replaceValue;
+      const extractContext = Object.assign({}, context, {
+        value,
+        currentValue,
+        originalValue: currentValue
+      });
+      runTransformerStack.call(this, transformers, extractContext);
+      context.replaceValue = extractContext.replaceValue;
+      return extractContext.value;
+    }
     /**
      * Finds the first template from an array of templates that
      * matches the given value. 
@@ -2042,6 +2155,26 @@
   function bind(options) {
     return new SimplyBind(options);
   }
+  function getTransformerPhase(transformer, phase) {
+    if (typeof transformer === "function") {
+      return phase === "render" ? transformer : null;
+    }
+    if (transformer && typeof transformer[phase] === "function") {
+      return transformer[phase];
+    }
+    return null;
+  }
+  function runTransformerStack(transformers, context) {
+    let next = (context2) => context2;
+    for (let transformer of transformers) {
+      next = /* @__PURE__ */ ((next2, transformer2) => {
+        return (context2) => {
+          return transformer2.call(this, context2, next2);
+        };
+      })(next, transformer);
+    }
+    return next?.(context);
+  }
   var tracking = /* @__PURE__ */ new Map();
   function track(el, context) {
     untrack(el);
@@ -2118,9 +2251,9 @@
     return curr;
   }
 
-  // src/model.mjs
-  var model_exports = {};
-  __export(model_exports, {
+  // ../model/src/index.mjs
+  var src_exports2 = {};
+  __export(src_exports2, {
     columns: () => columns,
     filter: () => filter,
     model: () => model,
@@ -2272,12 +2405,35 @@
     }
     return function(data) {
       this.state.options.columns = columnOptions;
+      const projections = /* @__PURE__ */ new WeakMap();
       return throttledEffect(() => {
+        const visibleKeys = [];
+        const visible = /* @__PURE__ */ new Set();
+        const columns2 = this.state.options.columns;
+        for (let key of Object.keys(columns2)) {
+          if (columns2[key]?.visible !== false) {
+            visibleKeys.push(key);
+            visible.add(key);
+          }
+        }
         return data.current.map((input2) => {
-          let result = {};
-          for (let key of Object.keys(this.state.options.columns)) {
-            if (!this.state.options.columns[key]?.hidden) {
-              result[key] = input2[key] ?? null;
+          const source = raw(input2);
+          let result = source && typeof source === "object" ? projections.get(source) : null;
+          if (!result) {
+            result = {};
+            if (source && typeof source === "object") {
+              projections.set(source, result);
+            }
+          }
+          for (let key of visibleKeys) {
+            const value = input2?.[key] ?? null;
+            if (result[key] !== value) {
+              result[key] = value;
+            }
+          }
+          for (let key of Object.keys(result)) {
+            if (!visible.has(key)) {
+              delete result[key];
             }
           }
           return result;
@@ -2376,7 +2532,7 @@
     customElements.define("simply-render", SimplyRender);
   }
 
-  // src/suggest.mjs
+  // ../app/src/suggest.mjs
   function closest(name, options, { maxDistance = 2, minLength = 4 } = {}) {
     if (name.length < minLength) {
       return;
@@ -2414,7 +2570,7 @@
     return previous[b.length];
   }
 
-  // src/route.mjs
+  // ../app/src/route.mjs
   function routes(options) {
     return new SimplyRoute(options);
   }
@@ -2759,7 +2915,7 @@
     return routeInfo;
   }
 
-  // src/path.mjs
+  // ../app/src/path.mjs
   var path = {
     get(dataset, pointer) {
       if (typeof pointer !== "string") {
@@ -2807,7 +2963,7 @@
   };
   var path_default = path;
 
-  // src/command.mjs
+  // ../app/src/command.mjs
   var commandState = /* @__PURE__ */ new WeakMap();
   var COMMAND_OPTIONS = [
     "commands",
@@ -3006,7 +3162,7 @@
     });
   }
 
-  // src/action.mjs
+  // ../app/src/action.mjs
   var warnedUnknownActions = /* @__PURE__ */ new WeakMap();
   function actions(options) {
     if (options.app) {
@@ -3061,7 +3217,7 @@
     console.warn(`simplyflow/action: unknown action "${property}"${suffix}`);
   }
 
-  // src/shortcut.mjs
+  // ../app/src/shortcut.mjs
   var shortcutState = /* @__PURE__ */ new WeakMap();
   var accesskeyState = /* @__PURE__ */ new WeakMap();
   var KEY = Object.freeze({
@@ -3191,7 +3347,7 @@
     accesskeyState.delete(accesskeyApi);
   }
 
-  // src/behavior.mjs
+  // ../app/src/behavior.mjs
   var BEHAVIOR_SELECTOR = "[data-simply-behavior]";
   var SimplyBehaviors = class {
     constructor(options = {}) {
@@ -3288,7 +3444,7 @@
     return nodes;
   }
 
-  // src/include.mjs
+  // ../app/src/include.mjs
   function throttle(callbackFunction, intervalTime) {
     let eventId = 0;
     return function throttledCallback(...params) {
@@ -3486,7 +3642,7 @@
     links: (links) => defaultInclude().includeLinks(Array.from(links))
   };
 
-  // src/app.mjs
+  // ../app/src/index.mjs
   var APP_OPTIONS = [
     "container",
     "data",
@@ -3500,7 +3656,8 @@
     "commands",
     "shortcuts",
     "routes",
-    "actions"
+    "actions",
+    "transformers"
   ];
   var SimplyApp = class {
     constructor(options = {}) {
@@ -3517,6 +3674,7 @@
       this.onError = options.onError;
       this.components = options.components;
       this.baseURL = options.baseURL;
+      this.transformers = options.transformers;
       installTemplates(this.container, options.templates);
       installStyles(this.container, options.styles);
       for (const key of Object.keys(options)) {
@@ -3529,6 +3687,7 @@
           case "onError":
           case "components":
           case "baseURL":
+          case "transformers":
             break;
           case "commands":
             this.commands = commands({ app: this, container: this.container, commands: options.commands });
@@ -3557,7 +3716,8 @@
       this.binding = bind({
         root: this.data,
         container: this.container,
-        attribute: "data-simply"
+        attribute: "data-simply",
+        transformers: this.transformers
       });
       this.includes = includes({ container: this.container });
       this.accesskeys = accesskeys({ app: this, container: this.container });
@@ -3724,7 +3884,7 @@
     }
   }
 
-  // src/highlight.mjs
+  // ../app/src/highlight.mjs
   function html(strings, ...values) {
     const outputArray = values.map(
       (value, index) => `${strings[index]}${value}`
@@ -3735,7 +3895,7 @@
     return html(strings, ...values);
   }
 
-  // src/flow.mjs
+  // src/index.mjs
   if (!globalThis.simply) {
     globalThis.simply = {};
   }
@@ -3753,7 +3913,7 @@
     app,
     bind,
     model: modelApi,
-    state: state_exports,
+    state: src_exports,
     signal,
     effect,
     batch,
@@ -3776,5 +3936,5 @@
     routes
   });
   delete globalThis.simply.advanced;
-  var flow_default = globalThis.simply;
+  var index_default = globalThis.simply;
 })();