lightview 2.3.4 → 2.3.6

package/lightview-x.js

@@ -734,14 +734,15 @@
     }
   };
   const parseElements = (content, isJson, isHtml, el, element, isCdom = false, ext = "") => {
-    var _a2;
     if (isJson) return Array.isArray(content) ? content : [content];
     if (isCdom && ext === "cdomc") {
-      const parser = (_a2 = globalThis.LightviewCDOM) == null ? void 0 : _a2.parseCDOMC;
+      const CDOM = globalThis.LightviewCDOM;
+      const parser = CDOM == null ? void 0 : CDOM.parseCDOMC;
       if (parser) {
         try {
           const obj = parser(content);
-          return Array.isArray(obj) ? obj : [obj];
+          const hydrated = CDOM.hydrate ? CDOM.hydrate(obj) : obj;
+          return Array.isArray(hydrated) ? hydrated : [hydrated];
         } catch (e) {
           console.warn("LightviewX: Failed to parse .cdomc:", e);
           return [];

package/lightview.js

@@ -586,6 +586,11 @@
   const makeReactiveAttributes = (attributes, domNode) => {
     const reactiveAttrs = {};
     for (let [key, value] of Object.entries(attributes)) {
+      if (value && typeof value === "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;
@@ -639,6 +644,7 @@
     return reactiveAttrs;
   };
   const processChildren = (children, targetNode, clearExisting = true) => {
+    var _a;
     if (clearExisting && targetNode.innerHTML !== void 0) {
       targetNode.innerHTML = "";
     }
@@ -687,6 +693,11 @@
         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);
@@ -706,6 +717,9 @@
         childElements.push(childEl);
       }
     }
+    if (typeof ((_a = globalThis.LightviewCDOM) == null ? void 0 : _a.resolveStaticXPath) === "function") {
+      globalThis.LightviewCDOM.resolveStaticXPath(targetNode);
+    }
     return childElements;
   };
   const setupChildrenInTarget = (children, targetNode) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "description": "A lightweight reactive UI library with features of Bau, Juris, and HTMX",
   "main": "lightview.js",
   "workspaces": [
@@ -35,7 +35,8 @@
     "wrangler": "^4.54.0"
   },
   "dependencies": {
-    "jprx": "^1.2.0",
+    "expr-eval": "^2.0.2",
+    "jprx": "^1.3.0",
     "linkedom": "^0.18.12",
     "marked": "^17.0.1"
   }

package/src/lightview-cdom.js

@@ -16,6 +16,8 @@ import { registerLookupHelpers } from '../jprx/helpers/lookup.js';
 import { registerStatsHelpers } from '../jprx/helpers/stats.js';
 import { registerStateHelpers, set } from '../jprx/helpers/state.js';
 import { registerNetworkHelpers } from '../jprx/helpers/network.js';
+import { registerCalcHelpers } from '../jprx/helpers/calc.js';
+import { registerDOMHelpers } from '../jprx/helpers/dom.js';
 
 import { signal, effect, getRegistry } from './reactivity/signal.js';
 import { state } from './reactivity/state.js';
@@ -33,6 +35,8 @@ registerLookupHelpers(registerHelper);
 registerStatsHelpers(registerHelper);
 registerStateHelpers((name, fn) => registerHelper(name, fn, { pathAware: true }));
 registerNetworkHelpers(registerHelper);
+registerCalcHelpers(registerHelper);
+registerDOMHelpers(registerHelper);
 registerHelper('move', (selector, location = 'beforeend') => {
     return {
         isLazy: true,
@@ -131,13 +135,14 @@ registerOperator('increment', '++', 'postfix', 80);
 registerOperator('decrement', '--', 'prefix', 80);
 registerOperator('decrement', '--', 'postfix', 80);
 registerOperator('toggle', '!!', 'prefix', 80);
+registerOperator('set', '=', 'infix', 20);
 
 // Math infix operators (for expression syntax like $/a + $/b)
 // These REQUIRE surrounding whitespace to avoid ambiguity with path separators (especially for /)
 registerOperator('+', '+', 'infix', 50);
-registerOperator('-', '-', 'infix', 50);
-registerOperator('*', '*', 'infix', 60);
-registerOperator('/', '/', 'infix', 60);
+registerOperator('-', '-', 'infix', 50, { requiresWhitespace: true });
+registerOperator('*', '*', 'infix', 60, { requiresWhitespace: true });
+registerOperator('/', '/', 'infix', 60, { requiresWhitespace: true });
 
 // Comparison infix operators
 registerOperator('gt', '>', 'infix', 40);
@@ -145,13 +150,16 @@ registerOperator('lt', '<', 'infix', 40);
 registerOperator('gte', '>=', 'infix', 40);
 registerOperator('lte', '<=', 'infix', 40);
 registerOperator('neq', '!=', 'infix', 40);
+registerOperator('strictNeq', '!==', 'infix', 40);
+registerOperator('eq', '==', 'infix', 40);
+registerOperator('strictEq', '===', 'infix', 40);
 
 const localStates = new WeakMap();
 
 /**
  * Builds a reactive context object for a node by chaining all ancestor states.
  */
-export const getContext = (node, event = null) => {
+const getContext = (node, event = null) => {
     return new Proxy({}, {
         get(_, prop) {
             if (prop === '$event' || prop === 'event') return event;
@@ -212,14 +220,14 @@ globalThis.Lightview.hooks.processAttribute = (domNode, key, value) => {
 /**
  * Legacy activation no longer needed.
  */
-export const activate = (root = document.body) => { };
+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);
+    if (result && typeof result === 'object' && result.isLazy) return result.resolve(context);
     return result;
 };
 
@@ -228,7 +236,7 @@ const makeEventHandler = (expr) => (eventOrNode) => {
  * Traverses the object, converting expression strings (=...) into Signals/Computeds.
  * Establishes a __parent__ link for relative path resolution.
  */
-export const hydrate = (node, parent = null) => {
+const hydrate = (node, parent = null) => {
     if (!node) return node;
 
     // 1. Handle Escape and Expressions
@@ -236,6 +244,14 @@ export const hydrate = (node, parent = null) => {
     if (typeof node === 'string' && node.startsWith("'=")) {
         return node.slice(1); // Strip the ' and return as literal
     }
+    // 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
+    }
+    // XPath expression: # at start marks for static resolution
+    if (typeof node === 'string' && node.startsWith('#')) {
+        return { __xpath__: node.slice(1), __static__: true };
+    }
     if (typeof node === 'string' && node.startsWith('=')) {
         return parseExpression(node, parent);
     }
@@ -295,6 +311,12 @@ export const hydrate = (node, parent = null) => {
                 // Escape sequence: '= at start produces a literal string starting with =
                 if (typeof attrVal === 'string' && attrVal.startsWith("'=")) {
                     value[attrKey] = attrVal.slice(1);
+                    // Escape sequence: '# at start produces a literal string starting with #
+                } else if (typeof attrVal === 'string' && attrVal.startsWith("'#")) {
+                    value[attrKey] = attrVal.slice(1);
+                    // XPath expression: # at start marks for static resolution
+                } else if (typeof attrVal === 'string' && attrVal.startsWith('#')) {
+                    value[attrKey] = { __xpath__: attrVal.slice(1), __static__: true };
                 } else if (typeof attrVal === 'string' && attrVal.startsWith('=')) {
                     if (attrKey.startsWith('on')) {
                         value[attrKey] = makeEventHandler(attrVal);
@@ -311,6 +333,12 @@ export const hydrate = (node, parent = null) => {
         // Escape sequence: '= at start produces a literal string starting with =
         if (typeof value === 'string' && value.startsWith("'=")) {
             node[key] = value.slice(1);
+            // Escape sequence: '# at start produces a literal string starting with #
+        } else if (typeof value === 'string' && value.startsWith("'#")) {
+            node[key] = value.slice(1);
+            // XPath expression: # at start marks for static resolution
+        } else if (typeof value === 'string' && value.startsWith('#')) {
+            node[key] = { __xpath__: value.slice(1), __static__: true };
         } else if (typeof value === 'string' && value.startsWith('=')) {
             if (key === 'onmount' || key === 'onunmount' || key.startsWith('on')) {
                 node[key] = makeEventHandler(value);
@@ -327,6 +355,103 @@ export const hydrate = (node, parent = null) => {
     return node;
 };
 
+/**
+ * Validates that an XPath expression only uses backward-looking axes.
+ * Throws an error if forward-looking axes are detected.
+ * @param {string} xpath - The XPath expression to validate
+ */
+const validateXPath = (xpath) => {
+    // Check for forbidden forward-looking axes
+    const forbiddenAxes = /\b(child|descendant|following|following-sibling)::/;
+    if (forbiddenAxes.test(xpath)) {
+        throw new Error(`XPath: Forward-looking axes not allowed during DOM construction: ${xpath}`);
+    }
+
+    // Also check for shorthand forward references like /div (implies child axis)
+    // But allow / for document root like /html
+    const hasShorthandChild = /\/[a-zA-Z]/.test(xpath) && !xpath.startsWith('/html');
+    if (hasShorthandChild) {
+        throw new Error(`XPath: Shorthand child axis (/) not allowed during DOM construction: ${xpath}`);
+    }
+};
+
+/**
+ * Resolves static XPath expressions marked during hydration.
+ * This is called after the DOM tree is fully constructed.
+ * Walks the tree and resolves all __xpath__ markers.
+ * @param {Node} rootNode - The root DOM node to start walking from
+ */
+const resolveStaticXPath = (rootNode) => {
+    if (!rootNode || !rootNode.nodeType) return;
+
+    const walker = document.createTreeWalker(
+        rootNode,
+        NodeFilter.SHOW_ALL
+    );
+
+    const nodesToProcess = [];
+    let node = walker.nextNode();
+    while (node) {
+        nodesToProcess.push(node);
+        node = walker.nextNode();
+    }
+
+    // Process all nodes
+    for (const node of nodesToProcess) {
+        // Check for XPath markers in attributes
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const attributes = [...node.attributes];
+            for (const attr of attributes) {
+                if (attr.name.startsWith('data-xpath-')) {
+                    const realAttr = attr.name.replace('data-xpath-', '');
+                    const xpath = attr.value;
+
+                    try {
+                        validateXPath(xpath);
+                        const result = document.evaluate(
+                            xpath,
+                            node,
+                            null,
+                            XPathResult.STRING_TYPE,
+                            null
+                        );
+                        node.setAttribute(realAttr, result.stringValue);
+                        node.removeAttribute(attr.name);
+                    } catch (e) {
+                        globalThis.console?.error(`[Lightview-CDOM] XPath resolution failed for attribute "${realAttr}":`, e.message);
+                    }
+                }
+            }
+        }
+
+        // Check for XPath markers in text nodes
+        if (node.__xpathExpr) {
+            const xpath = node.__xpathExpr;
+            try {
+                validateXPath(xpath);
+                const result = document.evaluate(
+                    xpath,
+                    node,  // Use text node as context, not its parent!
+                    null,
+                    XPathResult.STRING_TYPE,
+                    null
+                );
+                node.textContent = result.stringValue;
+                delete node.__xpathExpr;
+            } catch (e) {
+                globalThis.console?.error(`[Lightview-CDOM] XPath resolution failed for text node:`, e.message);
+            }
+        }
+    }
+};
+
+
+// Prevent tree-shaking of parser functions by creating a side-effect
+// These are used externally by lightview-x.js for .cdomc file loading
+// The typeof check creates a runtime branch the bundler can't eliminate
+if (typeof parseCDOMC !== 'function') throw new Error('parseCDOMC not found');
+if (typeof parseJPRX !== 'function') throw new Error('parseJPRX not found');
+
 const LightviewCDOM = {
     registerHelper,
     registerOperator,
@@ -342,12 +467,32 @@ const LightviewCDOM = {
     handleCDOMBind: () => { },
     activate,
     hydrate,
+    resolveStaticXPath,
     version: '1.0.0'
 };
 
 // Global export for non-module usage
 if (typeof window !== 'undefined') {
-    globalThis.LightviewCDOM = LightviewCDOM;
+    globalThis.LightviewCDOM = {};
+    Object.assign(globalThis.LightviewCDOM, LightviewCDOM);
 }
 
+
+export {
+    registerHelper,
+    registerOperator,
+    parseExpression,
+    resolvePath,
+    resolvePathAsContext,
+    resolveExpression,
+    parseCDOMC,
+    parseJPRX,
+    unwrapSignal,
+    BindingTarget,
+    getContext,
+    activate,
+    hydrate,
+    resolveStaticXPath
+};
+
 export default LightviewCDOM;

package/src/lightview-x.js

@@ -587,11 +587,14 @@ const fetchContent = async (src) => {
 const parseElements = (content, isJson, isHtml, el, element, isCdom = false, ext = '') => {
     if (isJson) return Array.isArray(content) ? content : [content];
     if (isCdom && ext === 'cdomc') {
-        const parser = globalThis.LightviewCDOM?.parseCDOMC;
+        const CDOM = globalThis.LightviewCDOM;
+        const parser = CDOM?.parseCDOMC;
         if (parser) {
             try {
                 const obj = parser(content);
-                return Array.isArray(obj) ? obj : [obj];
+                // Hydrate the parsed object to convert expression strings to reactive signals
+                const hydrated = CDOM.hydrate ? CDOM.hydrate(obj) : obj;
+                return Array.isArray(hydrated) ? hydrated : [hydrated];
             } catch (e) {
                 console.warn('LightviewX: Failed to parse .cdomc:', e);
                 return [];

package/src/lightview.js

@@ -339,6 +339,14 @@ const makeReactiveAttributes = (attributes, domNode) => {
     const reactiveAttrs = {};
 
     for (let [key, value] of Object.entries(attributes)) {
+        // Handle XPath markers from hydration
+        if (value && typeof value === 'object' && value.__xpath__ && value.__static__) {
+            // Mark attribute for later XPath resolution
+            domNode.setAttribute(`data-xpath-${key}`, value.__xpath__);
+            reactiveAttrs[key] = value;
+            continue;
+        }
+
         if (key === 'onmount' || key === 'onunmount') {
             const state = getOrSet(nodeState, domNode, nodeStateFactory);
             state[key] = value;
@@ -483,6 +491,12 @@ 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));
@@ -506,6 +520,11 @@ const processChildren = (children, targetNode, clearExisting = true) => {
         }
     }
 
+    // Resolve static XPath expressions after DOM tree is constructed
+    if (typeof globalThis.LightviewCDOM?.resolveStaticXPath === 'function') {
+        globalThis.LightviewCDOM.resolveStaticXPath(targetNode);
+    }
+
     return childElements;
 };
 

package/test-xpath-preprocess.js

@@ -0,0 +1,18 @@
+// Test preprocessXPath function
+import { parseCDOMC } from './jprx/parser.js';
+
+const testInput = `{
+  button: {
+    id: "7",
+    children: [#../@id]
+  }
+}`;
+
+console.log('Test input:', testInput);
+
+try {
+    const result = parseCDOMC(testInput);
+    console.log('Parsed successfully:', result);
+} catch (e) {
+    console.error('Parse failed:', e.message);
+}

package/test-xpath.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>XPath Test</title>
+    <script type="module">
+        import { parseCDOMC, hydrate } from './src/lightview-cdom.js';
+
+        // Test 1: Static XPath in attributes
+        const cdomcInput = `{
+            tag: div,
+            attributes: {
+                id: parent-div,
+                data-theme: dark
+            },
+            children: [{
+                tag: button,
+                attributes: {
+                    data-parent-id: #../@id,
+                    data-parent-theme: #../@data-theme
+                },
+                children: ["Button with parent data"]
+            }]
+        }`;
+
+        console.log('Parsing cDOMC input...');
+        const parsed = parseCDOMC(cdomcInput);
+        console.log('Parsed:', parsed);
+
+        console.log('Hydrating...');
+        const hydrated = hydrate(parsed);
+        console.log('Hydrated:', hydrated);
+
+        // Mount to DOM
+        document.addEventListener('DOMContentLoaded', () => {
+            const container = document.getElementById('app');
+            if (hydrated && hydrated.tag) {
+                const el = globalThis.Lightview.tags[hydrated.tag](
+                    hydrated.attributes || {},
+                    hydrated.children || []
+                );
+                container.appendChild(el.domEl);
+                console.log('Mounted to DOM');
+                console.log('Button element:', el.domEl.querySelector('button'));
+            }
+        });
+    </script>
+</head>
+
+<body>
+    <h1>XPath Test</h1>
+    <div id="app"></div>
+
+    <h2>Test Cases:</h2>
+    <ul>
+        <li>Button should have <code>data-parent-id="parent-div"</code></li>
+        <li>Button should have <code>data-parent-theme="dark"</code></li>
+    </ul>
+</body>
+
+</html>

package/tests/cdom/operators.test.js

@@ -0,0 +1,141 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import Lightview from '../../src/lightview.js';
+import LightviewX from '../../src/lightview-x.js';
+import LightviewCDOM from '../../src/lightview-cdom.js';
+import { resolveExpression, unwrapSignal } from '../../jprx/parser.js';
+
+/**
+ * Operator Tests
+ * 
+ * Tests all registered operators using property-based context.
+ */
+describe('JPRX Operators', () => {
+    beforeEach(() => {
+        globalThis.window = globalThis;
+        globalThis.Lightview = Lightview;
+        globalThis.LightviewX = LightviewX;
+        globalThis.LightviewCDOM = LightviewCDOM;
+        Lightview.registry.clear();
+    });
+
+    describe('Context-based Evaluation', () => {
+        it('resolves simple properties from context', () => {
+            const context = { a: 10, b: 20 };
+            expect(resolveExpression('a', context)).toBe(10);
+            expect(resolveExpression('b', context)).toBe(20);
+        });
+
+        it('performs math with context variables', () => {
+            const context = { a: 10, b: 5 };
+            expect(resolveExpression('a + b', context)).toBe(15);
+            expect(resolveExpression('a - b', context)).toBe(5);
+            expect(resolveExpression('a * b', context)).toBe(50);
+            expect(resolveExpression('a / b', context)).toBe(2);
+        });
+
+        it('handles comparison operators', () => {
+            const context = { a: 10, b: 5, c: 10 };
+            expect(resolveExpression('a > b', context)).toBe(true);
+            expect(resolveExpression('b > a', context)).toBe(false);
+            expect(resolveExpression('a < b', context)).toBe(false);
+            expect(resolveExpression('b < a', context)).toBe(true);
+            expect(resolveExpression('a >= c', context)).toBe(true);
+            expect(resolveExpression('a <= c', context)).toBe(true);
+            expect(resolveExpression('a == c', context)).toBe(true);
+            expect(resolveExpression('a === c', context)).toBe(true);
+            expect(resolveExpression('a != b', context)).toBe(true);
+            expect(resolveExpression('a == b', context)).toBe(false);
+            expect(resolveExpression('a === b', context)).toBe(false);
+        });
+
+        it('handles equality with different types', () => {
+            const context = { a: 5, b: '5' };
+            expect(resolveExpression('a == b', context)).toBe(true);
+            expect(resolveExpression('a === b', context)).toBe(false);
+        });
+    });
+
+    describe('Mutation Operators (Context-based)', () => {
+        it('increments a property: ++count', () => {
+            const context = { count: 5 };
+            const result = resolveExpression('++count', context);
+            expect(result).toBe(6);
+            expect(context.count).toBe(6);
+        });
+
+        it('decrements a property: count--', () => {
+            const context = { count: 10 };
+            const result = resolveExpression('count--', context);
+            expect(result).toBe(9);
+            expect(context.count).toBe(9);
+        });
+
+        it('toggles a property: !!flag', () => {
+            const context = { flag: false };
+            const result = resolveExpression('!!flag', context);
+            expect(result).toBe(true);
+            expect(context.flag).toBe(true);
+        });
+    });
+
+    describe('Assignment Operator', () => {
+        it('assigns value to context property: x = 42', () => {
+            const context = { x: 0 };
+            const result = resolveExpression('x = 42', context);
+            expect(result).toBe(42);
+            expect(context.x).toBe(42);
+        });
+
+        it('assigns complex values: x = a + b', () => {
+            const context = { x: 0, a: 10, b: 20 };
+            // Note: complex right-hand side currently requires helper syntax or better Pratt integration
+            // But with current parser, it should work if we use precedence correctly
+            const result = resolveExpression('x = a + b', context);
+            expect(result).toBe(30);
+            expect(context.x).toBe(30);
+        });
+
+        it('assigns object literals: user = { name: "Alice" }', () => {
+            const context = { user: null };
+            resolveExpression('user = { name: "Alice" }', context);
+            expect(context.user).toEqual({ name: 'Alice' });
+        });
+    });
+
+    describe('Whitespace and Ambiguity', () => {
+        it('handles packed assignment: count=0', () => {
+            const context = { count: 5 };
+            resolveExpression('count=0', context);
+            expect(context.count).toBe(0);
+        });
+
+        it('handles packed addition: a+b', () => {
+            const context = { a: 1, b: 2 };
+            expect(resolveExpression('a+b', context)).toBe(3);
+        });
+
+        it('requires whitespace for division: a / b', () => {
+            const context = { a: 10, b: 2, 'a/b': 99 };
+            // Correct division
+            expect(resolveExpression('a / b', context)).toBe(5);
+            // Path resolution (no spaces)
+            expect(resolveExpression('a/b', context)).toBe(99);
+        });
+
+        it('requires whitespace for subtraction: a - b', () => {
+            const context = { a: 10, b: 2, 'a-b': 42 };
+            // Subtraction
+            expect(resolveExpression('a - b', context)).toBe(8);
+            // Kebab-case path
+            expect(resolveExpression('a-b', context)).toBe(42);
+        });
+    });
+
+    describe('Registry Integration (Global Paths)', () => {
+        it('works with global paths: =/global/x + y', () => {
+            LightviewX.state({ x: 100 }, 'global');
+            const context = { y: 50 };
+            expect(resolveExpression('=/global/x + y', context)).toBe(150);
+        });
+    });
+});

package/wrangler.toml

@@ -13,3 +13,4 @@ compatibility_date = "2024-01-01"
 # Uncomment below for Workers mode (not Pages mode):
 [assets]
 directory = "./dist"
+