lightview 2.2.2 → 2.3.4

package/src/lightview-cdom.js

@@ -33,6 +33,96 @@ registerLookupHelpers(registerHelper);
 registerStatsHelpers(registerHelper);
 registerStateHelpers((name, fn) => registerHelper(name, fn, { pathAware: true }));
 registerNetworkHelpers(registerHelper);
+registerHelper('move', (selector, location = 'beforeend') => {
+    return {
+        isLazy: true,
+        resolve: (eventOrNode) => {
+            const isEvent = eventOrNode && typeof eventOrNode === 'object' && 'target' in eventOrNode;
+            const node = isEvent ? (eventOrNode.currentTarget || eventOrNode.target) : eventOrNode;
+            if (!(node instanceof Node) || !selector) return;
+
+            const target = document.querySelector(selector);
+            if (!target) {
+                console.warn(`[Lightview-CDOM] move target not found: ${selector}`);
+                return;
+            }
+
+            // Identity logic: if node has ID, check for existing sibling or descendant in target
+            if (node.id) {
+                // We escape the ID for querySelector
+                const escapedId = CSS.escape(node.id);
+                // Check if the target itself is the node (unlikely but safe)
+                if (target.id === node.id && target !== node) {
+                    target.replaceWith(node);
+                    return;
+                }
+                // Check for existing element in target
+                const existing = target.querySelector(`#${escapedId}`);
+                if (existing && existing !== node) {
+                    existing.replaceWith(node);
+                    return;
+                }
+            }
+
+            // Use Lightview's standard placement logic
+            globalThis.Lightview.$(target).content(node, location);
+        }
+    };
+}, { pathAware: true });
+
+registerHelper('mount', async (url, options = {}) => {
+    const { target = 'body', location = 'beforeend' } = options;
+
+    try {
+        const fetchOptions = { ...options };
+        delete fetchOptions.target;
+        delete fetchOptions.location;
+
+        const headers = { ...fetchOptions.headers };
+        let body = fetchOptions.body;
+
+        if (body !== undefined) {
+            if (body !== null && typeof body === 'object') {
+                body = JSON.stringify(body);
+                if (!headers['Content-Type']) headers['Content-Type'] = 'application/json';
+            } else {
+                body = String(body);
+                if (!headers['Content-Type']) headers['Content-Type'] = 'text/plain';
+            }
+            fetchOptions.body = body;
+            fetchOptions.headers = headers;
+        }
+
+        const response = await globalThis.fetch(url, fetchOptions);
+        const contentType = response.headers.get('Content-Type') || '';
+        const text = await response.text();
+
+        let content = text;
+        const isCDOM = contentType.includes('application/cdom') ||
+            contentType.includes('application/jprx') ||
+            contentType.includes('application/vdom') ||
+            contentType.includes('application/odom') ||
+            url.endsWith('.cdom') || url.endsWith('.jprx') ||
+            url.endsWith('.vdom') || url.endsWith('.odom');
+
+        if (isCDOM || (contentType.includes('application/json') && text.trim().startsWith('{'))) {
+            try {
+                content = hydrate(parseJPRX(text));
+            } catch (e) {
+                // Fail gracefully to text
+            }
+        }
+
+        const targetEl = document.querySelector(target);
+        if (targetEl) {
+            globalThis.Lightview.$(targetEl).content(content, location);
+        } else {
+            console.warn(`[Lightview-CDOM] $mount target not found: ${target}`);
+        }
+    } catch (err) {
+        console.error(`[Lightview-CDOM] $mount failed for ${url}:`, err);
+    }
+});
 
 // Register Standard Operators
 // Mutation operators (prefix and postfix)
@@ -60,372 +150,178 @@ const localStates = new WeakMap();
 
 /**
  * Builds a reactive context object for a node by chaining all ancestor states.
- * Global state -> cdom-state1 -> cdom-state2 -> ... -> current
  */
 export const getContext = (node, event = null) => {
-    const chain = [];
-    let cur = node;
-    const ShadowRoot = globalThis.ShadowRoot;
-
-    // Collate all ancestor states
-    while (cur) {
-        const local = localStates.get(cur) || (cur && typeof cur === 'object' ? cur.__state__ : null);
-        if (local) chain.unshift(local);
-        cur = cur.parentElement || (cur && typeof cur === 'object' ? cur.__parent__ : null) || (ShadowRoot && cur.parentNode instanceof ShadowRoot ? cur.parentNode.host : null);
-    }
-
-    // Access global registry for fallback
-    const globalRegistry = getRegistry();
-
-    const handler = {
-        get(target, prop, receiver) {
+    return new Proxy({}, {
+        get(_, prop) {
             if (prop === '$event' || prop === 'event') return event;
-            if (prop === '__parent__') return undefined; // Should be handled by resolvePath
-
-            // Search chain from bottom to top (most local first)
-            for (let i = chain.length - 1; i >= 0; i--) {
-                const s = chain[i];
-                if (prop in s) return s[prop];
-            }
-
-            // Fall back to global state accessed via registry
-            if (globalRegistry && globalRegistry.has(prop)) return unwrapSignal(globalRegistry.get(prop));
-
-            // Or maybe global state object if user manually set Lightview.state
-            const globalState = globalThis.Lightview?.state;
-            if (globalState && prop in globalState) return unwrapSignal(globalState[prop]);
-
-            return undefined;
+            if (prop === '$this' || prop === 'this' || prop === '__node__') return node;
+            return unwrapSignal(globalThis.Lightview.getState(prop, { scope: node }));
         },
-        set(target, prop, value, receiver) {
-
-
-            // Search chain for existing property to update
-            for (let i = chain.length - 1; i >= 0; i--) {
-                const s = chain[i];
-                if (prop in s) {
-
-                    s[prop] = value;
-                    return true;
-                }
-            }
-
-            // If not found, set on the most local state if it exists
-            if (chain.length > 0) {
-
-                chain[chain.length - 1][prop] = value;
-                return true;
-            }
-
-            // Fall back to global state
-            const globalState = globalThis.Lightview?.state;
-            if (globalState && prop in globalState) {
-
-                globalState[prop] = value;
+        set(_, prop, value) {
+            const res = globalThis.Lightview.getState(prop, { scope: node });
+            if (res && (typeof res === 'object' || typeof res === 'function') && 'value' in res) {
+                res.value = value;
                 return true;
             }
-
-            // Fall back to global registry
-            if (globalRegistry && globalRegistry.has(prop)) {
-                const s = globalRegistry.get(prop);
-
-                // Signals are functions with a .value property
-                if (s && (typeof s === 'object' || typeof s === 'function') && 'value' in s) {
-                    s.value = value;
-                    return true;
-                }
-            }
-
-
             return false;
-        },
-        has(target, prop) {
-            const exists = (prop === '$event' || prop === 'event' || !!chain.find(s => prop in s));
-            const inGlobal = (globalThis.Lightview?.state && prop in globalThis.Lightview.state) || (globalRegistry && globalRegistry.has(prop));
-
-            const isStructural = prop === 'constructor' || prop === 'toJSON' || prop === 'value' || prop === 'isLazy';
-            if (!isStructural) {
-
-            }
-            return exists || inGlobal;
-        },
-        ownKeys(target) {
-            const keys = new Set();
-            if (event) { keys.add('$event'); keys.add('event'); }
-            for (const s of chain) {
-                for (const key in s) keys.add(key);
-            }
-            const globalState = globalThis.Lightview?.state;
-            if (globalState) {
-                for (const key in globalState) keys.add(key);
-            }
-            return Array.from(keys);
-        },
-        getOwnPropertyDescriptor(target, prop) {
-            return { enumerable: true, configurable: true };
         }
-    };
-
-    return new Proxy({}, handler);
+    });
 };
 
 /**
- * Handles cdom-state directive.
+ * Hook for Lightview core to process $bind markers.
  */
-export const handleCDOMState = (node) => {
-    const attr = node['cdom-state'] || (node.getAttribute && node.getAttribute('cdom-state'));
-    if (!attr || localStates.has(node)) return;
-
-    try {
-        const data = typeof attr === 'object' ? attr : JSON.parse(attr);
-        // Use imported state factory
-        const s = state(data);
-        localStates.set(node, s);
-        // Also attach to the object for non-DOM traversal (e.g. during hydration)
-        if (node && typeof node === 'object') {
-            node.__state__ = s;
+globalThis.Lightview.hooks.processAttribute = (domNode, key, value) => {
+    if (value?.__JPRX_BIND__) {
+        const { path, options } = value;
+        const type = domNode.type || '';
+        const tagName = domNode.tagName.toLowerCase();
+        let prop = 'value';
+        let event = 'input';
+
+        if (type === 'checkbox' || type === 'radio') {
+            prop = 'checked';
+            event = 'change';
+        } else if (tagName === 'select') {
+            event = 'change';
         }
-    } catch (e) {
-        globalThis.console?.error('LightviewCDOM: Failed to parse cdom-state', e);
-    }
-};
-
-/**
- * Handles cdom-bind directive.
- */
-export const handleCDOMBind = (node) => {
-    const path = node['cdom-bind'] || node.getAttribute('cdom-bind');
-    if (!path) return;
-
-    const type = node.type || '';
-    const tagName = node.tagName.toLowerCase();
-    let prop = 'value';
-    let event = 'input';
-
-    if (type === 'checkbox' || type === 'radio') {
-        prop = 'checked';
-        event = 'change';
-    } else if (tagName === 'select') {
-        event = 'change';
-    }
 
-    const context = getContext(node);
-    let target = resolvePathAsContext(path, context);
+        const res = globalThis.Lightview.get(path.replace(/^=/, ''), { scope: domNode });
 
-    // Smart initialization: if state is undefined, initialize from DOM
-    if (target && target.isBindingTarget && target.value === undefined) {
-        const val = node[prop];
-        if (val !== undefined && val !== '') {
-            set(context, { [target.key]: val });
-            // Re-resolve to get the now-reactive target if it was newly created
-            target = resolvePathAsContext(path, context);
-        }
-    }
+        // State -> DOM
+        const runner = globalThis.Lightview.effect(() => {
+            const val = unwrapSignal(res);
+            if (domNode[prop] !== val) {
+                domNode[prop] = val === undefined ? '' : val;
+            }
+        });
+        globalThis.Lightview.internals.trackEffect(domNode, runner);
 
-    // State -> DOM
-    effect(() => {
-        const val = unwrapSignal(target);
-        if (node[prop] !== val) {
-            node[prop] = val === undefined ? '' : val;
-        }
-    });
+        // DOM -> State
+        domNode.addEventListener(event, () => {
+            if (res && 'value' in res) res.value = domNode[prop];
+        });
 
-    // DOM -> State
-    node.addEventListener(event, () => {
-        const val = node[prop];
-        if (target && target.isBindingTarget) {
-            target.value = val;
-        } else {
-            // Fallback for non-BindingTarget targets
-            set(context, { [path]: val });
-        }
-    });
+        // Use initial value if available
+        return unwrapSignal(res) ?? domNode[prop];
+    }
+    return undefined;
 };
 
-
 /**
- * Scans a subtree and activates CDOM directives.
+ * Legacy activation no longer needed.
  */
-export const activate = (root = document.body) => {
-    const walk = (node) => {
-        if (node.nodeType === 1) {
-            if (node.hasAttribute('cdom-state')) handleCDOMState(node);
-            if (node.hasAttribute('cdom-bind')) handleCDOMBind(node);
-        }
-        let child = node.firstChild;
-        while (child) {
-            walk(child);
-            child = child.nextSibling;
-        }
-    };
-    walk(root);
+export const activate = (root = document.body) => { };
+
+const makeEventHandler = (expr) => (eventOrNode) => {
+    const isEvent = eventOrNode && typeof eventOrNode === 'object' && 'target' in eventOrNode;
+    const target = isEvent ? (eventOrNode.currentTarget || eventOrNode.target) : eventOrNode;
+    const context = getContext(target, isEvent ? eventOrNode : null);
+    const result = resolveExpression(expr, context);
+    if (result && typeof result === 'object' && result.isLazy) return result.resolve(eventOrNode);
+    return result;
 };
 
 /**
  * Hydrates a static CDOM object into a reactive CDOM graph.
- * Traverses the object, converting expression strings ($...) into Signals/Computeds.
+ * Traverses the object, converting expression strings (=...) into Signals/Computeds.
  * Establishes a __parent__ link for relative path resolution.
  */
 export const hydrate = (node, parent = null) => {
     if (!node) return node;
 
-    // 1. Handle Expressions (Strings starting with $)
-    if (typeof node === 'string' && node.startsWith('$')) {
+    // 1. Handle Escape and Expressions
+    // Escape sequence: '= at start produces a literal string starting with =
+    if (typeof node === 'string' && node.startsWith("'=")) {
+        return node.slice(1); // Strip the ' and return as literal
+    }
+    if (typeof node === 'string' && node.startsWith('=')) {
         return parseExpression(node, parent);
     }
 
+    if (typeof node !== 'object') return node;
+
     // 2. Handle Arrays
     if (Array.isArray(node)) {
         return node.map(item => hydrate(item, parent));
     }
 
-    // 3. Handle String Objects (Quoted literals from parser)
-    if (node instanceof String) {
-        return node.toString();
+    // 2. Handle String Objects (rare but possible)
+    if (node instanceof String) return node.toString();
+
+    // 3. Handle Nodes
+    // Parent link
+    if (parent && !('__parent__' in node)) {
+        Object.defineProperty(node, '__parent__', { value: parent, enumerable: false, writable: true });
+        globalThis.Lightview?.internals?.parents?.set(node, parent);
     }
 
-    // 4. Handle Objects (Nodes)
-    if (typeof node === 'object' && node !== null) {
-        // Set back-reference for relative path resolution (../)
-        if (parent && !('__parent__' in node)) {
-            Object.defineProperty(node, '__parent__', {
-                value: parent,
-                enumerable: false,
-                writable: true,
-                configurable: true
-            });
+    // oDOM Normalization - convert shorthand { div: "text" } to { tag: "div", children: ["text"] }
+    if (!node.tag) {
+        let potentialTag = null;
+        const reserved = ['children', 'attributes', 'tag', '__parent__'];
+        for (const key in node) {
+            if (reserved.includes(key) || key.startsWith('on')) continue;
+            potentialTag = key;
+            break;
         }
 
-        // NEW: Normalize cDOM shorthand { tag: content } -> { tag: 'tag', ...content }
-        // But skip if this looks like pure data (no potential tag keys)
-        if (!node.tag) {
-            let potentialTag = null;
-            for (const key in node) {
-                // Skip reserved keys and directives
-                if (key === 'children' || key === 'attributes' || key === 'tag' ||
-                    key.startsWith('cdom-') || key.startsWith('on') || key === '__parent__') {
-                    continue;
-                }
-                // Skip common HTML attribute names (not tag names)
-                const attrNames = [
-                    // Form/input attributes
-                    'type', 'name', 'value', 'placeholder', 'step', 'min', 'max', 'pattern',
-                    'disabled', 'checked', 'selected', 'readonly', 'required', 'multiple',
-                    'rows', 'cols', 'size', 'maxlength', 'minlength', 'autocomplete',
-                    // Common element attributes
-                    'id', 'class', 'className', 'style', 'title', 'tabindex', 'role',
-                    'href', 'src', 'alt', 'width', 'height', 'target', 'rel',
-                    // Data attributes
-                    'data', 'label', 'text', 'description', 'content',
-                    // Common data property names
-                    'price', 'qty', 'items', 'count', 'total', 'amount', 'url'
-                ];
-                if (attrNames.includes(key)) {
-                    continue;
+        if (potentialTag) {
+            const content = node[potentialTag];
+            node.tag = potentialTag;
+            if (Array.isArray(content)) {
+                node.children = content;
+            } else if (typeof content === 'object') {
+                node.attributes = node.attributes || {};
+                for (const k in content) {
+                    if (k === 'children') node.children = content[k];
+                    else node.attributes[k] = content[k];
                 }
-                // If we find a key that looks like a tag name, use it
-                potentialTag = key;
-                break;
-            }
+            } else node.children = [content];
+            delete node[potentialTag];
+        }
+    }
 
-            if (potentialTag) {
-                const content = node[potentialTag];
-                if (content !== undefined && content !== null) {
-                    node.tag = potentialTag;
-                    // Move the content into the node
-                    if (Array.isArray(content)) {
-                        node.children = content;
-                    } else if (typeof content === 'object') {
-                        // Separate children, directives from attributes
-                        node.attributes = node.attributes || {};
-                        for (const k in content) {
-                            if (k === 'children') {
-                                node.children = content[k];
-                            } else if (k.startsWith('cdom-')) {
-                                // cDOM directives go on the node directly
-                                node[k] = content[k];
-                            } else {
-                                // Everything else (including event handlers) is an attribute
-                                node.attributes[k] = content[k];
-                            }
-                        }
+    // Recursive Processing
+    for (const key in node) {
+        if (key === 'tag' || key === '__parent__') continue;
+        const value = node[key];
+
+        // Special case: attributes object
+        if (key === 'attributes' && typeof value === 'object' && value !== null) {
+            for (const attrKey in value) {
+                const attrVal = value[attrKey];
+                // Escape sequence: '= at start produces a literal string starting with =
+                if (typeof attrVal === 'string' && attrVal.startsWith("'=")) {
+                    value[attrKey] = attrVal.slice(1);
+                } else if (typeof attrVal === 'string' && attrVal.startsWith('=')) {
+                    if (attrKey.startsWith('on')) {
+                        value[attrKey] = makeEventHandler(attrVal);
                     } else {
-                        // Treat primitive value as text child
-                        node.children = [content];
+                        value[attrKey] = parseExpression(attrVal, node);
                     }
-                    // Remove the shorthand key to avoid processing it again
-                    delete node[potentialTag];
+                } else if (typeof attrVal === 'object' && attrVal !== null) {
+                    value[attrKey] = hydrate(attrVal, node);
                 }
             }
+            continue;
         }
 
-        // IMPORTANT: Handle cdom-state FIRST before any other processing
-        // This ensures state is available when children expressions are evaluated
-        if (node['cdom-state']) {
-            handleCDOMState(node);
-        }
-
-        // Process each property
-        for (const key in node) {
-            const value = node[key];
-
-            // Skip cdom-state as we already processed it
-            if (key === 'cdom-state') {
-                continue;
-            }
-
-            // Handle $ expressions - convert to reactive computed values or event handlers
-            if (typeof value === 'string' && value.startsWith('$')) {
-                if (key.startsWith('on')) {
-                    // Event handlers: create a function that resolves the expression with event context
-                    node[key] = (event) => {
-                        const element = event.currentTarget;
-                        const context = getContext(element, event);
-                        const result = resolveExpression(value, context);
-
-                        // If it's a lazy value (contains $event or _), resolve it
-                        if (result && typeof result === 'object' && result.isLazy && typeof result.resolve === 'function') {
-                            return result.resolve(event);
-                        }
-                        return result;
-                    };
-                } else if (key === 'children') {
-                    // Children must always be an array. If it's a reactive expression (like $map),
-                    // wrap the computed signal in an array so Lightview can process it.
-                    node[key] = [parseExpression(value, node)];
-                } else {
-                    // Other properties: create a computed expression that evaluates reactively
-                    node[key] = parseExpression(value, node);
-                }
-            } else if (key === 'attributes' && typeof value === 'object' && value !== null) {
-                // Process attributes object - convert $expressions there too
-                for (const attrKey in value) {
-                    const attrValue = value[attrKey];
-                    if (typeof attrValue === 'string' && attrValue.startsWith('$')) {
-                        if (attrKey.startsWith('on')) {
-                            // Event handlers in attributes
-                            value[attrKey] = (event) => {
-                                const element = event.currentTarget;
-                                const context = getContext(element, event);
-                                const result = resolveExpression(attrValue, context);
-                                if (result && typeof result === 'object' && result.isLazy && typeof result.resolve === 'function') {
-                                    return result.resolve(event);
-                                }
-                                return result;
-                            };
-                        } else {
-                            // Other reactive attributes
-                            value[attrKey] = parseExpression(attrValue, node);
-                        }
-                    }
-                }
-                node[key] = value;
+        // Escape sequence: '= at start produces a literal string starting with =
+        if (typeof value === 'string' && value.startsWith("'=")) {
+            node[key] = value.slice(1);
+        } else if (typeof value === 'string' && value.startsWith('=')) {
+            if (key === 'onmount' || key === 'onunmount' || key.startsWith('on')) {
+                node[key] = makeEventHandler(value);
+            } else if (key === 'children') {
+                node[key] = [parseExpression(value, node)];
             } else {
-                // Recursively hydrate other values
-                node[key] = hydrate(value, node);
+                node[key] = parseExpression(value, node);
             }
+        } else {
+            node[key] = hydrate(value, node);
         }
-        return node;
     }
 
     return node;
@@ -442,8 +338,8 @@ const LightviewCDOM = {
     parseJPRX,
     unwrapSignal,
     getContext,
-    handleCDOMState,
-    handleCDOMBind,
+    handleCDOMState: () => { },
+    handleCDOMBind: () => { },
     activate,
     hydrate,
     version: '1.0.0'

package/src/lightview-router.js

@@ -115,6 +115,11 @@
 
         const handleRequest = async (path) => {
             if (onStart) onStart(path);
+
+            // Snapshot scroll positions document-wide before content swap
+            const internals = globalThis.Lightview?.internals;
+            const scrollMap = internals?.saveScrolls?.();
+
             const res = await route(path);
             if (!res) return console.warn(`[Router] No route: ${path}`);
 
@@ -127,6 +132,11 @@
                     s.replaceWith(n);
                 });
 
+                // Restore scroll positions after content has been updated
+                if (internals?.restoreScrolls && scrollMap) {
+                    internals.restoreScrolls(scrollMap);
+                }
+
                 // Handle hash scrolling if present in the target path
                 const urlParts = path.split('#');
                 const hash = urlParts.length > 1 ? '#' + urlParts[1] : '';