lightview 2.3.8 → 2.4.4

package/src/lightview-x.js

@@ -1,5 +1,5 @@
 import { signal, effect, getRegistry } from './reactivity/signal.js';
-import { state, getOrSet } from './reactivity/state.js';
+import { state, getState, getOrSet } from './reactivity/state.js';
 
 
 /**
@@ -552,15 +552,107 @@ const insert = (elements, parent, location, markerId, { element, setupChildren }
 
 const isPath = (s) => typeof s === 'string' && !isDangerousProtocol(s) && /^(https?:|\.|\/|[\w])|(\.(html|json|[vo]dom|cdomc?))$/i.test(s);
 
-const fetchContent = async (src) => {
+/**
+ * Resolves request information (method, body, headers) from an element's data- attributes.
+ * Supports data-method and data-body.
+ */
+const getRequestInfo = (el) => {
+    const domEl = el.domEl || el;
+    const method = (domEl.getAttribute('data-method') || 'GET').toUpperCase();
+    const bodyAttr = domEl.getAttribute('data-body');
+    let body = null;
+    let headers = {};
+
+    if (bodyAttr) {
+        if (bodyAttr.startsWith('javascript:')) {
+            const expr = bodyAttr.slice(11);
+            const LV = globalThis.Lightview;
+            try {
+                // Use the registry to resolve signals/state mentioned in expressions
+                body = new Function('state', 'signal', `return ${expr}`)(LV.state || {}, LV.signal || {});
+            } catch (e) {
+                console.warn(`[LightviewX] Failed to evaluate data-body expression: ${expr}`, e);
+            }
+        } else if (bodyAttr.startsWith('json:')) {
+            try {
+                body = JSON.parse(bodyAttr.slice(5));
+                headers['Content-Type'] = 'application/json';
+            } catch (e) {
+                console.warn(`[LightviewX] Failed to parse data-body JSON: ${bodyAttr.slice(5)}`, e);
+            }
+        } else if (bodyAttr.startsWith('text:')) {
+            body = bodyAttr.slice(5);
+            headers['Content-Type'] = 'text/plain';
+        } else {
+            // Assume CSS Selector
+            try {
+                const target = document.querySelector(bodyAttr);
+                if (target) {
+                    if (target.tagName === 'FORM') {
+                        body = new FormData(target);
+                    } else if (['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+                        const name = target.getAttribute('name') || 'body';
+                        body = { [name]: target.value };
+                    } else {
+                        body = target.innerText;
+                    }
+                }
+            } catch (e) {
+                // Not a valid selector, use raw string
+                body = bodyAttr;
+            }
+        }
+    }
+
+    return { method, body, headers };
+};
+
+/**
+ * Fetches content from a URL, respecting data-method and data-body settings.
+ */
+const fetchContent = async (src, requestOptions = {}) => {
+    const { method = 'GET', body = null, headers = {} } = requestOptions;
     try {
         const LV = globalThis.Lightview;
         if (LV?.hooks?.validateUrl && !LV.hooks.validateUrl(src)) {
             console.warn(`[LightviewX] Fetch blocked by validateUrl hook: ${src}`);
             return null;
         }
-        const url = new URL(src, document.baseURI);
-        const res = await fetch(url);
+
+        let url = new URL(src, document.baseURI);
+        const fetchOptions = { method, headers: { ...headers } };
+
+        if (body) {
+            if (method === 'GET') {
+                const params = new URLSearchParams(url.search);
+                if (body instanceof FormData) {
+                    for (const [key, value] of body.entries()) params.append(key, value);
+                } else if (typeof body === 'object' && body !== null) {
+                    for (const [key, value] of Object.entries(body)) params.append(key, String(value));
+                } else {
+                    params.append('body', String(body));
+                }
+                const queryString = params.toString();
+                if (queryString) {
+                    url = new URL(`${url.origin}${url.pathname}?${queryString}${url.hash}`, url.origin);
+                }
+            } else {
+                if (body instanceof FormData) {
+                    fetchOptions.body = body;
+                } else if (typeof body === 'object' && body !== null) {
+                    if (headers['Content-Type'] === 'application/json' || !headers['Content-Type']) {
+                        fetchOptions.body = JSON.stringify(body);
+                        fetchOptions.headers['Content-Type'] = 'application/json';
+                    } else {
+                        fetchOptions.body = String(body);
+                    }
+                } else {
+                    fetchOptions.body = String(body);
+                }
+            }
+        }
+
+        const res = await fetch(url, fetchOptions);
         if (!res.ok) return null;
         const ext = url.pathname.split('.').pop().toLowerCase();
         const isJson = (ext === 'vdom' || ext === 'odom' || ext === 'cdom');
@@ -626,7 +718,11 @@ const elementsFromSelector = (selector, element) => {
 };
 
 const updateTargetContent = (el, elements, raw, loc, contentHash, options, targetHash = null) => {
-    const { element, setupChildren, saveScrolls, restoreScrolls } = { ...options, ...globalThis.Lightview?.internals };
+    const { element, setupChildren, saveScrolls, restoreScrolls } = {
+        element: globalThis.Lightview?.element,
+        ...globalThis.Lightview?.internals,
+        ...options
+    };
     const markerId = `${loc}-${contentHash.slice(0, 8)}`;
     let track = getOrSet(insertedContentMap, el.domEl, () => ({}));
     if (track[loc]) removeInsertedContent(el.domEl, `${loc}-${track[loc].slice(0, 8)}`);
@@ -683,7 +779,8 @@ const handleSrcAttribute = async (el, src, tagName, { element, setupChildren })
         if (src.includes('#')) {
             [src, targetHash] = src.split('#');
         }
-        const result = await fetchContent(src);
+        const options = getRequestInfo(el);
+        const result = await fetchContent(src, options);
         if (result) {
             elements = parseElements(result.content, result.isJson, result.isHtml, el, element, result.isCdom, result.ext);
             raw = result.raw;
@@ -747,7 +844,7 @@ const parseTargetWithLocation = (targetStr) => {
  * Intercepts clicks on elements with 'href' attributes that are not standard links.
  * Enables HTMX-like SPA navigation by loading the href content into a target element.
  */
-const handleNonStandardHref = (e, { domToElement, wrapDomElement }) => {
+const handleNonStandardHref = async (e, { domToElement, wrapDomElement }) => {
     const clickedEl = e.target.closest('[href]');
     if (!clickedEl) return;
 
@@ -764,6 +861,9 @@ const handleNonStandardHref = (e, { domToElement, wrapDomElement }) => {
     }
     const targetAttr = clickedEl.getAttribute('target');
 
+    // Get request configuration (method, body) from the clicked element
+    const options = getRequestInfo(clickedEl);
+
     // Case 1: No target attribute - existing behavior (load into self)
     if (!targetAttr) {
         let el = domToElement.get(clickedEl);
@@ -772,6 +872,7 @@ const handleNonStandardHref = (e, { domToElement, wrapDomElement }) => {
             for (let attr of clickedEl.attributes) attrs[attr.name] = attr.value;
             el = wrapDomElement(clickedEl, tagName, attrs);
         }
+        // Setting src triggers handleSrcAttribute via property proxy
         const newAttrs = { ...el.attributes, src: href };
         el.attributes = newAttrs;
         return;
@@ -779,21 +880,16 @@ const handleNonStandardHref = (e, { domToElement, wrapDomElement }) => {
 
     // Case 2: Target starts with _ (browser navigation)
     if (targetAttr.startsWith('_')) {
+        if (options.method !== 'GET') {
+            console.warn('[LightviewX] Cannot use non-GET method for browser navigation (_blank, _top, etc.)');
+        }
+
         switch (targetAttr) {
-            case '_self':
-                globalThis.location.href = href;
-                break;
-            case '_parent':
-                globalThis.parent.location.href = href;
-                break;
-            case '_top':
-                globalThis.top.location.href = href;
-                break;
+            case '_self': globalThis.location.href = href; break;
+            case '_parent': globalThis.parent.location.href = href; break;
+            case '_top': globalThis.top.location.href = href; break;
             case '_blank':
-            default:
-                // _blank or any custom _name opens a new window/tab
-                globalThis.open(href, targetAttr);
-                break;
+            default: globalThis.open(href, targetAttr); break;
         }
         return;
     }
@@ -803,6 +899,15 @@ const handleNonStandardHref = (e, { domToElement, wrapDomElement }) => {
 
     try {
         const targetElements = document.querySelectorAll(selector);
+        if (targetElements.length === 0) return;
+
+        // Perform the fetch once for all targets
+        const result = await fetchContent(href, options);
+        if (!result) return;
+
+        const { setupChildren } = LV.internals;
+        const element = LV.element;
+
         targetElements.forEach(targetEl => {
             let el = domToElement.get(targetEl);
             if (!el) {
@@ -811,15 +916,17 @@ const handleNonStandardHref = (e, { domToElement, wrapDomElement }) => {
                 el = wrapDomElement(targetEl, targetEl.tagName.toLowerCase(), attrs);
             }
 
-            // Build new attributes
-            const newAttrs = { ...el.attributes, src: href };
-            if (location) {
-                newAttrs.location = location;
-            }
-            el.attributes = newAttrs;
+            const elements = parseElements(result.content, result.isJson, result.isHtml, el, element, result.isCdom, result.ext);
+            const loc = (location || targetEl.getAttribute('location') || 'innerhtml').toLowerCase();
+            const contentHash = hashContent(result.raw);
+
+            updateTargetContent(el, elements, result.raw, loc, contentHash, { element, setupChildren });
+
+            // Update the src attribute on the target to reflect current content
+            targetEl.setAttribute('src', href);
         });
     } catch (err) {
-        console.warn('Invalid target selector:', selector, err);
+        console.warn('Invalid target selector or fetch error:', selector, err);
     }
 };
 
@@ -1190,6 +1297,8 @@ const setupSrcObserver = (LV) => {
 // Auto-register with Lightview if available
 if (typeof window !== 'undefined' && globalThis.Lightview) {
     const LV = globalThis.Lightview;
+    LV.state = state;
+    LV.getState = getState;
 
     // Extend Lightview with simple named signal getter/setter if needed (already in Core now)
     // But for template literals we use processTemplateChild which needs access to registries
@@ -1696,8 +1805,23 @@ if (lvInternals) {
 }
 
 // Export for module usage
+const request = async (el) => {
+    const domEl = el.domEl || el;
+    const href = domEl.getAttribute('href');
+    if (!href) return;
+    return handleNonStandardHref({
+        target: domEl,
+        preventDefault: () => { },
+        stopPropagation: () => { }
+    }, {
+        domToElement: globalThis.Lightview.internals.domToElement,
+        wrapDomElement: globalThis.Lightview.internals.wrapDomElement
+    });
+};
+
 const LightviewX = {
     state,
+    getState,
     themeSignal,
     setTheme,
     registerStyleSheet,
@@ -1705,6 +1829,12 @@ const LightviewX = {
     // Gate modifiers
     throttle: gateThrottle,
     debounce: gateDebounce,
+    // Hypermedia Actions
+    request,
+    get: (el, url) => { if (url) el.setAttribute('href', url); el.setAttribute('data-method', 'GET'); return request(el); },
+    post: (el, url) => { if (url) el.setAttribute('href', url); el.setAttribute('data-method', 'POST'); return request(el); },
+    put: (el, url) => { if (url) el.setAttribute('href', url); el.setAttribute('data-method', 'PUT'); return request(el); },
+    delete: (el, url) => { if (url) el.setAttribute('href', url); el.setAttribute('data-method', 'DELETE'); return request(el); },
     // Component initialization
     initComponents,
     componentConfig,
@@ -1719,6 +1849,7 @@ const LightviewX = {
         parseElements
     }
 };
+if (globalThis.Lightview) globalThis.Lightview.request = request;
 
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = LightviewX;

package/src/lightview.js

@@ -1,5 +1,4 @@
 import { signal, effect, computed, getRegistry, internals } from './reactivity/signal.js';
-import { state, getState } from './reactivity/state.js';
 
 const core = {
     get currentEffect() {
@@ -164,6 +163,7 @@ const wrapDomElement = (domNode, tag, attributes = {}, children = []) => {
         tag,
         attributes,
         children,
+        isProxy: true,
         get domEl() { return domNode; }
     };
     const proxy = makeReactive(el);
@@ -171,6 +171,15 @@ const wrapDomElement = (domNode, tag, attributes = {}, children = []) => {
     return proxy;
 };
 
+/**
+ * Recursively checks if any item in a nested array matches a predicate.
+ * Replaces expensive .flat(Infinity).some() calls.
+ */
+const someRecursive = (item, predicate) => {
+    if (Array.isArray(item)) return item.some(i => someRecursive(i, predicate));
+    return predicate(item);
+};
+
 /**
  * The core virtual-DOM-to-real-DOM factory.
  * Handles tag functions (components), shadow DOM directives, and SVG namespaces.
@@ -199,12 +208,17 @@ const element = (tag, attributes = {}, children = []) => {
         };
 
         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 === undefined) ? '' : String(val);
-            });
+                if (val && typeof val === 'object' && val.domEl) bits.push(val.domEl.textContent);
+                else bits.push((val === null || val === undefined) ? '' : String(val));
+            };
+            walk(el.children);
             domNode.textContent = bits.join(' ');
         };
 
@@ -216,7 +230,7 @@ const element = (tag, attributes = {}, children = []) => {
             }
         });
 
-        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(domNode, runner);
@@ -233,12 +247,29 @@ const element = (tag, attributes = {}, children = []) => {
         ? 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;
+    // Optimization: Skip Proxy allocation for static nodes
+    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;
+    }
+
+    // Static path: Direct application to the DOM node
+    makeReactiveAttributes(attributes, domNode);
+    setupChildren(children, domNode);
 
     if (isSVG) inSVG = wasInSVG;
-    return proxy;
+    return {
+        tag,
+        attributes,
+        children,
+        domEl: domNode
+    };
 };
 
 // Process component function return value (HTML string, DOM node, vDOM, or Object DOM)
@@ -254,7 +285,7 @@ const processComponentResult = (result) => {
 
     const type = typeof result;
     // DOM node - wrap it
-    if (type === 'object' && result instanceof HTMLElement) {
+    if (type === 'object' && result && result.nodeType === 1) {
         return wrapDomElement(result, result.tagName.toLowerCase(), {}, []);
     }
 
@@ -271,7 +302,7 @@ const processComponentResult = (result) => {
         template.innerHTML = result.trim();
         const content = template.content;
         // If single element, return it; otherwise wrap in a fragment-like span
-        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 {
@@ -335,12 +366,14 @@ const setAttributeValue = (domNode, key, value) => {
 /**
  * Processes attributes, handling event listeners, reactive bindings, and special 'onmount' hooks.
  */
-const makeReactiveAttributes = (attributes, domNode) => {
+const makeReactiveAttributes = (attributes = {}, domNode) => {
     const reactiveAttrs = {};
 
-    for (let [key, value] of Object.entries(attributes)) {
+    for (const key in attributes) {
+        const value = attributes[key];
+        const type = typeof value;
         // Handle XPath markers from hydration
-        if (value && typeof value === 'object' && value.__xpath__ && value.__static__) {
+        if (value && type === 'object' && value.__xpath__ && value.__static__) {
             // Mark attribute for later XPath resolution
             domNode.setAttribute(`data-xpath-${key}`, value.__xpath__);
             reactiveAttrs[key] = value;
@@ -356,11 +389,10 @@ const makeReactiveAttributes = (attributes, domNode) => {
             }
         } else if (key.startsWith('on')) {
             // Event handler
-            if (typeof value === 'function') {
+            if (type === 'function') {
                 // Function handler - use addEventListener
-                const eventName = key.slice(2).toLowerCase();
-                domNode.addEventListener(eventName, value);
-            } else if (typeof value === 'string') {
+                domNode.addEventListener(key.slice(2).toLowerCase(), value);
+            } else if (type === 'string') {
                 // String handler (from parsed HTML) - use setAttribute
                 // Browser will compile the string into a handler function
                 domNode.setAttribute(key, value);
@@ -372,20 +404,21 @@ const makeReactiveAttributes = (attributes, domNode) => {
                 reactiveAttrs[key] = processed;
             } else if (key === 'style') {
                 // Style object support (merged from below)
-                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(); });
                         trackEffect(domNode, runner);
                     } 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') {
             // Reactive binding
             const runner = effect(() => {
                 const result = value();
@@ -429,29 +462,33 @@ const processChildren = (children, targetNode, clearExisting = true) => {
     const isSpecialElement = targetNode.tagName &&
         (targetNode.tagName.toLowerCase() === 'script' || targetNode.tagName.toLowerCase() === 'style');
 
-    const flatChildren = children.flat(Infinity);
+    const walk = (child) => {
+        if (Array.isArray(child)) {
+            for (let i = 0; i < child.length; i++) walk(child[i]);
+            return;
+        }
+
+        if (child === null || child === undefined) return;
 
-    for (let child of flatChildren) {
         // Allow extensions to transform children (e.g., template literals)
         // BUT skip for script/style elements which need raw content
         if (Lightview.hooks.processChild && !isSpecialElement) {
             child = Lightview.hooks.processChild(child) ?? child;
         }
 
-        // Handle shadowDOM markers - attach shadow to parent and process shadow children
-        if (isShadowDOMMarker(child)) {
-            // targetNode is the parent element that should get the shadow root
-            // For ShadowRoot targets, we can't attach another shadow, so warn
-            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) {
+            // 1. Child element (already wrapped or plain object) - tag can be string or function (structural)
+            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)) {
+            // 2. Static text (common leaf)
+            targetNode.appendChild(document.createTextNode(child));
+            childElements.push(child);
+        } else if (type === 'function') {
+            // 3. Reactive function
             const startMarker = document.createComment('lv:s');
             const endMarker = document.createComment('lv:e');
             targetNode.appendChild(startMarker);
@@ -462,7 +499,6 @@ const processChildren = (children, targetNode, clearExisting = true) => {
                 // 1. Cleanup: Remove everything between markers
                 while (startMarker.nextSibling && startMarker.nextSibling !== endMarker) {
                     startMarker.nextSibling.remove();
-                    // Note: MutationObserver handles cleanupNode(removedNode)
                 }
 
                 // 2. Execution: Get new value and process it
@@ -491,20 +527,10 @@ const processChildren = (children, targetNode, clearExisting = true) => {
             runner = effect(update);
             trackEffect(startMarker, runner);
             childElements.push(child);
-        } else if (child && typeof child === 'object' && child.__xpath__ && child.__static__) {
-            // XPath marker - create text node with marker for later resolution
-            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)) {
-            // Static text
-            targetNode.appendChild(document.createTextNode(child));
-            childElements.push(child);
         } else if (child instanceof Node) {
-            // Raw DOM node
+            // 4. Raw DOM node
             const node = child.domEl || child;
-            if (node instanceof HTMLElement || node instanceof SVGElement) {
+            if (node.nodeType === 1) { // ELEMENT_NODE
                 const wrapped = wrapDomElement(node, node.tagName.toLowerCase());
                 targetNode.appendChild(node);
                 childElements.push(wrapped);
@@ -512,13 +538,23 @@ const processChildren = (children, targetNode, clearExisting = true) => {
                 targetNode.appendChild(node);
                 childElements.push(child);
             }
-        } else if (child && type === 'object' && child.tag) {
-            // Child element (already wrapped or plain object) - tag can be string or function
-            const childEl = child.domEl ? child : element(child.tag, child.attributes || {}, child.children || []);
-            targetNode.appendChild(childEl.domEl);
-            childElements.push(childEl);
+        } else if (isShadowDOMMarker(child)) {
+            // 5. Shadow DOM marker
+            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__) {
+            // 6. XPath marker
+            const textNode = document.createTextNode('');
+            textNode.__xpathExpr = child.__xpath__;
+            targetNode.appendChild(textNode);
+            childElements.push(child);
         }
-    }
+    };
+
+    walk(children);
 
 
 
@@ -551,7 +587,7 @@ const enhance = (selectorOrNode, options = {}) => {
 
     // If it's already a Lightview element, use its domEl
     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);
@@ -670,8 +706,6 @@ const tags = new Proxy({}, {
 });
 
 const Lightview = {
-    state,
-    getState,
     registerSchema: (name, definition) => internals.schemas.set(name, definition),
     signal,
     get: signal.get,