lightview 2.3.8 → 2.4.7

package/lightview.js

@@ -133,65 +133,10 @@
   };
   const getRegistry = () => _LV.registry;
   const internals = _LV;
-  const stateCache = /* @__PURE__ */ new WeakMap();
-  const stateSignals = /* @__PURE__ */ new WeakMap();
-  const stateSchemas = /* @__PURE__ */ new WeakMap();
   const { parents, schemas, hooks } = internals;
-  const validate = (target, prop, value, schema) => {
-    var _a, _b;
-    const current = target[prop];
-    const type = typeof current;
-    const isNew = !(prop in target);
-    let behavior = schema;
-    if (typeof schema === "object" && schema !== null) behavior = schema.type;
-    if (behavior === "auto" && isNew) throw new Error(`Lightview: Cannot add new property "${prop}" to fixed 'auto' state.`);
-    if (behavior === "polymorphic" || typeof behavior === "object" && (behavior == null ? void 0 : behavior.coerce)) {
-      if (type === "number") return Number(value);
-      if (type === "boolean") return Boolean(value);
-      if (type === "string") return String(value);
-    } else if (behavior === "auto" || behavior === "dynamic") {
-      if (!isNew && typeof value !== type) {
-        throw new Error(`Lightview: Type mismatch for "${prop}". Expected ${type}, got ${typeof value}.`);
-      }
-    }
-    if (typeof schema === "object" && schema !== null && schema.transform) {
-      const trans = schema.transform;
-      const transformFn = typeof trans === "function" ? trans : internals.helpers.get(trans) || ((_b = (_a = globalThis.Lightview) == null ? void 0 : _a.helpers) == null ? void 0 : _b[trans]);
-      if (transformFn) value = transformFn(value);
-    }
-    if (hooks.validate(value, schema) === false) {
-      throw new Error(`Lightview: Validation failed for "${prop}".`);
-    }
-    return value;
-  };
   const protoMethods = (proto, test) => Object.getOwnPropertyNames(proto).filter((k) => typeof proto[k] === "function" && test(k));
-  const DATE_TRACKING = protoMethods(Date.prototype, (k) => /^(to|get|valueOf)/.test(k));
-  const DATE_MUTATING = protoMethods(Date.prototype, (k) => /^set/.test(k));
-  const ARRAY_TRACKING = [
-    "map",
-    "forEach",
-    "filter",
-    "find",
-    "findIndex",
-    "some",
-    "every",
-    "reduce",
-    "reduceRight",
-    "includes",
-    "indexOf",
-    "lastIndexOf",
-    "join",
-    "slice",
-    "concat",
-    "flat",
-    "flatMap",
-    "at",
-    "entries",
-    "keys",
-    "values"
-  ];
-  const ARRAY_MUTATING = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse", "fill", "copyWithin"];
-  const ARRAY_ITERATION = ["map", "forEach", "filter", "find", "findIndex", "some", "every", "flatMap"];
+  protoMethods(Date.prototype, (k) => /^(to|get|valueOf)/.test(k));
+  protoMethods(Date.prototype, (k) => /^set/.test(k));
   const getOrSet = (map, key, factory) => {
     let v = map.get(key);
     if (!v) {
@@ -200,169 +145,6 @@
     }
     return v;
   };
-  const proxyGet = (target, prop, receiver, signals) => {
-    if (prop === "__parent__") return parents.get(receiver);
-    if (!signals.has(prop)) {
-      signals.set(prop, signal(Reflect.get(target, prop, receiver)));
-    }
-    const signal$1 = signals.get(prop);
-    const val = signal$1.value;
-    if (typeof val === "object" && val !== null) {
-      const childProxy = state(val);
-      parents.set(childProxy, receiver);
-      return childProxy;
-    }
-    return val;
-  };
-  const proxySet = (target, prop, value, receiver, signals) => {
-    const schema = stateSchemas.get(receiver);
-    const validatedValue = schema ? validate(target, prop, value, schema) : value;
-    if (!signals.has(prop)) {
-      signals.set(prop, signal(Reflect.get(target, prop, receiver)));
-    }
-    const success = Reflect.set(target, prop, validatedValue, receiver);
-    const signal$1 = signals.get(prop);
-    if (success && signal$1) signal$1.value = validatedValue;
-    return success;
-  };
-  const createSpecialProxy = (obj, monitor, trackingProps = []) => {
-    const signals = getOrSet(stateSignals, obj, () => /* @__PURE__ */ new Map());
-    if (!signals.has(monitor)) {
-      const initialValue = typeof obj[monitor] === "function" ? obj[monitor].call(obj) : obj[monitor];
-      signals.set(monitor, signal(initialValue));
-    }
-    const isDate = obj instanceof Date;
-    const isArray = Array.isArray(obj);
-    const trackingMethods = isDate ? DATE_TRACKING : isArray ? ARRAY_TRACKING : trackingProps;
-    const mutatingMethods = isDate ? DATE_MUTATING : isArray ? ARRAY_MUTATING : [];
-    return new Proxy(obj, {
-      get(target, prop, receiver) {
-        if (prop === "__parent__") return parents.get(receiver);
-        const value = target[prop];
-        if (typeof value === "function") {
-          const isTracking = trackingMethods.includes(prop);
-          const isMutating = mutatingMethods.includes(prop);
-          return function(...args) {
-            if (isTracking) {
-              const sig = signals.get(monitor);
-              if (sig) void sig.value;
-            }
-            const startValue = typeof target[monitor] === "function" ? target[monitor].call(target) : target[monitor];
-            if (isArray && ARRAY_ITERATION.includes(prop) && typeof args[0] === "function") {
-              const originalCallback = args[0];
-              args[0] = function(element2, index, array) {
-                const wrappedElement = typeof element2 === "object" && element2 !== null ? state(element2) : element2;
-                if (wrappedElement && typeof wrappedElement === "object") {
-                  parents.set(wrappedElement, receiver);
-                }
-                return originalCallback.call(this, wrappedElement, index, array);
-              };
-            }
-            const result = value.apply(target, args);
-            const endValue = typeof target[monitor] === "function" ? target[monitor].call(target) : target[monitor];
-            if (startValue !== endValue || isMutating) {
-              const sig = signals.get(monitor);
-              if (sig && sig.value !== endValue) {
-                sig.value = endValue;
-              }
-            }
-            return result;
-          };
-        }
-        if (prop === monitor) {
-          const sig = signals.get(monitor);
-          return sig ? sig.value : Reflect.get(target, prop, receiver);
-        }
-        if (isArray && !isNaN(parseInt(prop))) {
-          const monitorSig = signals.get(monitor);
-          if (monitorSig) void monitorSig.value;
-        }
-        return proxyGet(target, prop, receiver, signals);
-      },
-      set(target, prop, value, receiver) {
-        if (prop === monitor) {
-          const success = Reflect.set(target, prop, value, receiver);
-          if (success) {
-            const sig = signals.get(monitor);
-            if (sig) sig.value = value;
-          }
-          return success;
-        }
-        return proxySet(target, prop, value, receiver, signals);
-      }
-    });
-  };
-  const state = (obj, optionsOrName) => {
-    if (typeof obj !== "object" || obj === null) return obj;
-    const name = typeof optionsOrName === "string" ? optionsOrName : optionsOrName == null ? void 0 : optionsOrName.name;
-    const storage = optionsOrName == null ? void 0 : optionsOrName.storage;
-    const scope = optionsOrName == null ? void 0 : optionsOrName.scope;
-    const schema = optionsOrName == null ? void 0 : optionsOrName.schema;
-    if (name && storage) {
-      try {
-        const item = storage.getItem(name);
-        if (item) {
-          const loaded = JSON.parse(item);
-          Array.isArray(obj) && Array.isArray(loaded) ? (obj.length = 0, obj.push(...loaded)) : Object.assign(obj, loaded);
-        }
-      } catch (e) {
-      }
-    }
-    let proxy = stateCache.get(obj);
-    if (!proxy) {
-      const isArray = Array.isArray(obj), isDate = obj instanceof Date;
-      const isSpecial = isArray || isDate;
-      const monitor = isArray ? "length" : isDate ? "getTime" : null;
-      if (isSpecial || !(obj instanceof RegExp || obj instanceof Map || obj instanceof Set || obj instanceof WeakMap || obj instanceof WeakSet)) {
-        proxy = isSpecial ? createSpecialProxy(obj, monitor) : new Proxy(obj, {
-          get(t, p, r) {
-            if (p === "__parent__") return parents.get(r);
-            return proxyGet(t, p, r, getOrSet(stateSignals, t, () => /* @__PURE__ */ new Map()));
-          },
-          set(t, p, v, r) {
-            return proxySet(t, p, v, r, getOrSet(stateSignals, t, () => /* @__PURE__ */ new Map()));
-          }
-        });
-        stateCache.set(obj, proxy);
-      } else return obj;
-    }
-    if (schema) stateSchemas.set(proxy, schema);
-    if (name && storage) {
-      effect(() => {
-        try {
-          storage.setItem(name, JSON.stringify(proxy));
-        } catch (e) {
-        }
-      });
-    }
-    if (name) {
-      const registry2 = scope && typeof scope === "object" ? internals.localRegistries.get(scope) || internals.localRegistries.set(scope, /* @__PURE__ */ new Map()).get(scope) : getRegistry();
-      if (registry2 && registry2.has(name) && registry2.get(name) !== proxy) {
-        throw new Error(`Lightview: A signal or state with the name "${name}" is already registered.`);
-      }
-      if (registry2) registry2.set(name, proxy);
-      const futures = internals.futureSignals.get(name);
-      if (futures) {
-        futures.forEach((resolve) => resolve(proxy));
-      }
-    }
-    return proxy;
-  };
-  const getState = (name, defaultValueOrOptions) => {
-    const options = typeof defaultValueOrOptions === "object" && defaultValueOrOptions !== null ? defaultValueOrOptions : { defaultValue: defaultValueOrOptions };
-    const { scope, defaultValue } = options;
-    const existing = lookup(name, scope);
-    if (existing) return existing;
-    if (defaultValue !== void 0) return state(defaultValue, { name, scope });
-    const future = signal(void 0);
-    const handler = (realState) => {
-      future.value = realState;
-    };
-    if (!internals.futureSignals.has(name)) internals.futureSignals.set(name, /* @__PURE__ */ new Set());
-    internals.futureSignals.get(name).add(handler);
-    return future;
-  };
-  state.get = getState;
   const core = {
     get currentEffect() {
       return (globalThis.__LIGHTVIEW_INTERNALS__ || (globalThis.__LIGHTVIEW_INTERNALS__ = {})).currentEffect;
@@ -404,9 +186,9 @@
     });
   };
   const trackEffect = (node, effectFn) => {
-    const state2 = getOrSet(nodeState, node, nodeStateFactory);
-    if (!state2.effects) state2.effects = [];
-    state2.effects.push(effectFn);
+    const state = getOrSet(nodeState, node, nodeStateFactory);
+    if (!state.effects) state.effects = [];
+    state.effects.push(effectFn);
   };
   const SHADOW_DOM_MARKER = Symbol("lightview.shadowDOM");
   const createShadowDOMMarker = (attributes, children) => ({
@@ -458,6 +240,7 @@
       tag,
       attributes,
       children,
+      isProxy: true,
       get domEl() {
         return domNode;
       }
@@ -466,6 +249,10 @@
     domToElement.set(domNode, proxy);
     return proxy;
   };
+  const someRecursive = (item, predicate) => {
+    if (Array.isArray(item)) return item.some((i) => someRecursive(i, predicate));
+    return predicate(item);
+  };
   const element = (tag, attributes = {}, children = []) => {
     if (customTags[tag]) tag = customTags[tag];
     if (typeof tag === "function") {
@@ -486,38 +273,56 @@
         }
       };
       const update = () => {
-        const flat = (Array.isArray(el.children) ? el.children : [el.children]).flat(Infinity);
-        const bits = flat.map((c) => {
+        const bits = [];
+        const walk = (c) => {
+          if (Array.isArray(c)) {
+            for (let i = 0; i < c.length; i++) walk(c[i]);
+            return;
+          }
           const val = typeof c === "function" ? c() : c;
-          if (val && typeof val === "object" && val.domEl) return val.domEl.textContent;
-          return val === null || val === void 0 ? "" : String(val);
-        });
+          if (val && typeof val === "object" && val.domEl) bits.push(val.domEl.textContent);
+          else bits.push(val === null || val === void 0 ? "" : String(val));
+        };
+        walk(el.children);
         domNode2.textContent = bits.join(" ");
       };
-      const proxy2 = new Proxy(el, {
+      const proxy = new Proxy(el, {
         set(target, prop, value) {
           target[prop] = value;
           if (prop === "children") update();
           return true;
         }
       });
-      const hasReactive = children.flat(Infinity).some((c) => typeof c === "function");
+      const hasReactive = someRecursive(children, (c) => typeof c === "function");
       if (hasReactive) {
         const runner = effect(update);
         trackEffect(domNode2, runner);
       }
       update();
-      return proxy2;
+      return proxy;
     }
     const isSVG = tag.toLowerCase() === "svg";
     const wasInSVG = inSVG;
     if (isSVG) inSVG = true;
     const domNode = inSVG ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
-    const proxy = wrapDomElement(domNode, tag, attributes, children);
-    proxy.attributes = attributes;
-    proxy.children = children;
+    const hasReactiveAttr = Object.values(attributes).some((v) => typeof v === "function");
+    const hasReactiveChild = someRecursive(children, (c) => typeof c === "function" || c && c.isProxy);
+    if (hasReactiveAttr || hasReactiveChild) {
+      const proxy = wrapDomElement(domNode, tag, attributes, children);
+      proxy.attributes = attributes;
+      proxy.children = children;
+      if (isSVG) inSVG = wasInSVG;
+      return proxy;
+    }
+    makeReactiveAttributes(attributes, domNode);
+    setupChildren(children, domNode);
     if (isSVG) inSVG = wasInSVG;
-    return proxy;
+    return {
+      tag,
+      attributes,
+      children,
+      domEl: domNode
+    };
   };
   const processComponentResult = (result) => {
     if (!result) return null;
@@ -526,7 +331,7 @@
     }
     if (result.domEl) return result;
     const type = typeof result;
-    if (type === "object" && result instanceof HTMLElement) {
+    if (type === "object" && result && result.nodeType === 1) {
       return wrapDomElement(result, result.tagName.toLowerCase(), {}, []);
     }
     if (type === "object" && result instanceof String) {
@@ -538,7 +343,7 @@
       const template = document.createElement("template");
       template.innerHTML = result.trim();
       const content = template.content;
-      if (content.childNodes.length === 1 && content.firstChild instanceof HTMLElement) {
+      if (content.childNodes.length === 1 && content.firstChild && content.firstChild.nodeType === 1) {
         const el = content.firstChild;
         return wrapDomElement(el, el.tagName.toLowerCase(), {}, []);
       } else {
@@ -583,25 +388,26 @@
       domNode.setAttribute(key, value);
     }
   };
-  const makeReactiveAttributes = (attributes, domNode) => {
+  const makeReactiveAttributes = (attributes = {}, domNode) => {
     const reactiveAttrs = {};
-    for (let [key, value] of Object.entries(attributes)) {
-      if (value && typeof value === "object" && value.__xpath__ && value.__static__) {
+    for (const key in attributes) {
+      const value = attributes[key];
+      const type = typeof value;
+      if (value && type === "object" && value.__xpath__ && value.__static__) {
         domNode.setAttribute(`data-xpath-${key}`, value.__xpath__);
         reactiveAttrs[key] = value;
         continue;
       }
       if (key === "onmount" || key === "onunmount") {
-        const state2 = getOrSet(nodeState, domNode, nodeStateFactory);
-        state2[key] = value;
+        const state = getOrSet(nodeState, domNode, nodeStateFactory);
+        state[key] = value;
         if (key === "onmount" && domNode.isConnected) {
           value(domNode);
         }
       } else if (key.startsWith("on")) {
-        if (typeof value === "function") {
-          const eventName = key.slice(2).toLowerCase();
-          domNode.addEventListener(eventName, value);
-        } else if (typeof value === "string") {
+        if (type === "function") {
+          domNode.addEventListener(key.slice(2).toLowerCase(), value);
+        } else if (type === "string") {
           domNode.setAttribute(key, value);
         }
         reactiveAttrs[key] = value;
@@ -610,7 +416,8 @@
         if (processed !== void 0) {
           reactiveAttrs[key] = processed;
         } else if (key === "style") {
-          Object.entries(value).forEach(([styleKey, styleValue]) => {
+          for (const styleKey in entries) {
+            const styleValue = entries[styleKey];
             if (typeof styleValue === "function") {
               const runner = effect(() => {
                 domNode.style[styleKey] = styleValue();
@@ -619,13 +426,13 @@
             } else {
               domNode.style[styleKey] = styleValue;
             }
-          });
+          }
           reactiveAttrs[key] = value;
         } else {
           setAttributeValue(domNode, key, value);
           reactiveAttrs[key] = value;
         }
-      } else if (typeof value === "function") {
+      } else if (type === "function") {
         const runner = effect(() => {
           const result = value();
           if (key === "style" && typeof result === "object") {
@@ -649,21 +456,24 @@
     }
     const childElements = [];
     const isSpecialElement = targetNode.tagName && (targetNode.tagName.toLowerCase() === "script" || targetNode.tagName.toLowerCase() === "style");
-    const flatChildren = children.flat(Infinity);
-    for (let child of flatChildren) {
+    const walk = (child) => {
+      if (Array.isArray(child)) {
+        for (let i = 0; i < child.length; i++) walk(child[i]);
+        return;
+      }
+      if (child === null || child === void 0) return;
       if (Lightview.hooks.processChild && !isSpecialElement) {
         child = Lightview.hooks.processChild(child) ?? child;
       }
-      if (isShadowDOMMarker(child)) {
-        if (targetNode instanceof ShadowRoot) {
-          console.warn("Lightview: Cannot nest shadowDOM inside another shadowDOM");
-          continue;
-        }
-        processShadowDOM(child, targetNode);
-        continue;
-      }
       const type = typeof child;
-      if (type === "function") {
+      if (child && type === "object" && child.tag) {
+        const childEl = child.domEl ? child : element(child.tag, child.attributes || {}, child.children || []);
+        targetNode.appendChild(childEl.domEl);
+        childElements.push(childEl);
+      } else if (["string", "number", "boolean", "symbol"].includes(type) || child && type === "object" && child instanceof String) {
+        targetNode.appendChild(document.createTextNode(child));
+        childElements.push(child);
+      } else if (type === "function") {
         const startMarker = document.createComment("lv:s");
         const endMarker = document.createComment("lv:e");
         targetNode.appendChild(startMarker);
@@ -692,17 +502,9 @@
         runner = effect(update);
         trackEffect(startMarker, runner);
         childElements.push(child);
-      } else if (child && typeof child === "object" && child.__xpath__ && child.__static__) {
-        const textNode = document.createTextNode("");
-        textNode.__xpathExpr = child.__xpath__;
-        targetNode.appendChild(textNode);
-        childElements.push(child);
-      } else if (["string", "number", "boolean", "symbol"].includes(type) || child && type === "object" && child instanceof String) {
-        targetNode.appendChild(document.createTextNode(child));
-        childElements.push(child);
       } else if (child instanceof Node) {
         const node = child.domEl || child;
-        if (node instanceof HTMLElement || node instanceof SVGElement) {
+        if (node.nodeType === 1) {
           const wrapped = wrapDomElement(node, node.tagName.toLowerCase());
           targetNode.appendChild(node);
           childElements.push(wrapped);
@@ -710,12 +512,20 @@
           targetNode.appendChild(node);
           childElements.push(child);
         }
-      } else if (child && type === "object" && child.tag) {
-        const childEl = child.domEl ? child : element(child.tag, child.attributes || {}, child.children || []);
-        targetNode.appendChild(childEl.domEl);
-        childElements.push(childEl);
+      } else if (isShadowDOMMarker(child)) {
+        if (targetNode instanceof ShadowRoot) {
+          console.warn("Lightview: Cannot nest shadowDOM inside another shadowDOM");
+          return;
+        }
+        processShadowDOM(child, targetNode);
+      } else if (child && typeof child === "object" && child.__xpath__ && child.__static__) {
+        const textNode = document.createTextNode("");
+        textNode.__xpathExpr = child.__xpath__;
+        targetNode.appendChild(textNode);
+        childElements.push(child);
       }
-    }
+    };
+    walk(children);
     return childElements;
   };
   const setupChildrenInTarget = (children, targetNode) => {
@@ -727,7 +537,7 @@
   const enhance = (selectorOrNode, options = {}) => {
     const domNode = typeof selectorOrNode === "string" ? document.querySelector(selectorOrNode) : selectorOrNode;
     const node = domNode.domEl || domNode;
-    if (!(node instanceof HTMLElement)) return null;
+    if (!node || node.nodeType !== 1) return null;
     const tagName = node.tagName.toLowerCase();
     let el = domToElement.get(node);
     if (!el) {
@@ -819,8 +629,6 @@
     }
   });
   const Lightview = {
-    state,
-    getState,
     registerSchema: (name, definition) => internals.schemas.set(name, definition),
     signal,
     get: signal.get,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lightview",
-  "version": "2.3.8",
-  "description": "A lightweight reactive UI library with features of Bau, Juris, and HTMX",
+  "version": "2.4.7",
+  "description": "A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation",
   "main": "lightview.js",
   "workspaces": [
     "jprx"

package/src/lightview-cdom.js

@@ -432,13 +432,9 @@ const resolveTextNodeXPath = (node) => {
     try {
         validateXPath(xpath);
         const doc = globalThis.document || node.ownerDocument;
-        // Use the parent node (the element) as the context for evaluation
-        // This avoids errors in browsers that don't support Text nodes as context nodes
-        // and keeps evaluation consistent with attributes.
-        const contextNode = node.parentNode || node;
         const result = doc.evaluate(
             xpath,
-            contextNode,
+            node,
             null,
             XPathResult.STRING_TYPE,
             null