cdom 0.0.14 → 0.0.16

package/examples/macros.html

@@ -88,8 +88,8 @@
                         "div": {
                             "class": "test-section",
                             "children": [
-                                { "h2": { "children": ["Test 1: Define Macro"] } },
-                                { "p": { "children": ["Defining a macro called 'adjusted_price' with schema validation..."] } },
+                                { "h2": "Test 1: Define Macro" },
+                                { "p": "Defining a macro called 'adjusted_price' with schema validation..." },
                                 { "div": { "class": "json-label", "children": ["Macro Definition:"] } },
                                 {
                                     "pre": {
@@ -108,9 +108,9 @@
                                                     },
                                                     "body": {
                                                         "*": [
-                                                            "$.basePrice",
-                                                            { "+": [1, "$.taxRate"] },
-                                                            { "-": [1, "$.discount"] }
+                                                            "=$.basePrice",
+                                                            { "+": [1, "=$.taxRate"] },
+                                                            { "-": [1, "=$.discount"] }
                                                         ]
                                                     }
                                                 }
@@ -132,9 +132,9 @@
                                         },
                                         "body": {
                                             "*": [
-                                                "$.basePrice",
-                                                { "+": [1, "$.taxRate"] },
-                                                { "-": [1, "$.discount"] }
+                                                "=$.basePrice",
+                                                { "+": [1, "=$.taxRate"] },
+                                                { "-": [1, "=$.discount"] }
                                             ]
                                         }
                                     }
@@ -152,8 +152,8 @@
                         "div": {
                             "class": "test-section",
                             "children": [
-                                { "h2": { "children": ["Test 2: Call Macro with Literal Values"] } },
-                                { "p": { "children": ["Calling macro with basePrice=100, taxRate=0.08, discount=0.10"] } },
+                                { "h2": "Test 2: Call Macro with Literal Values" },
+                                { "p": "Calling macro with basePrice=100, taxRate=0.08, discount=0.10" },
                                 { "div": { "class": "json-label", "children": ["Macro Invocation:"] } },
                                 {
                                     "pre": {
@@ -183,7 +183,7 @@
                                         ]
                                     }
                                 },
-                                { "p": { "children": ["Expected: $97.20 (100 × 1.08 × 0.90)"] } }
+                                { "p": "Expected: $97.20 (100 × 1.08 × 0.90)" }
                             ]
                         }
                     },
@@ -191,8 +191,8 @@
                         "div": {
                             "class": "test-section",
                             "children": [
-                                { "h2": { "children": ["Test 3: Call Macro with State References"] } },
-                                { "p": { "children": ["Calling macro with values from state..."] } },
+                                { "h2": "Test 3: Call Macro with State References" },
+                                { "p": "Calling macro with values from state..." },
                                 { "div": { "class": "json-label", "children": ["Macro Invocation (State References):"] } },
                                 {
                                     "pre": {
@@ -229,8 +229,8 @@
                         "div": {
                             "class": "test-section",
                             "children": [
-                                { "h2": { "children": ["Test 4: Macro Without Schema"] } },
-                                { "p": { "children": ["Defining a simple macro without schema validation..."] } },
+                                { "h2": "Test 4: Macro Without Schema" },
+                                { "p": "Defining a simple macro without schema validation..." },
                                 { "div": { "class": "json-label", "children": ["Macro Definition:"] } },
                                 {
                                     "pre": {
@@ -238,7 +238,7 @@
                                             JSON.stringify({
                                                 "=macro": {
                                                     "name": "simple_sum",
-                                                    "body": { "+": ["$.a", "$.b"] }
+                                                    "body": { "+": ["=$.a", "=$.b"] }
                                                 }
                                             }, null, 4)
                                         ]
@@ -247,11 +247,11 @@
                                 {
                                     "=macro": {
                                         "name": "simple_sum",
-                                        "body": { "+": ["$.a", "$.b"] }
+                                        "body": { "+": ["=$.a", "=$.b"] }
                                     }
                                 },
                                 { "p": { "class": "success", "children": ["✓ simple_sum macro registered (no schema)"] } },
-                                { "p": { "children": ["Calling: simple_sum(a=10, b=25)"] } },
+                                { "p": "Calling: simple_sum(a=10, b=25)" },
                                 { "div": { "class": "json-label", "children": ["Macro Invocation:"] } },
                                 {
                                     "pre": {
@@ -287,8 +287,8 @@
                         "div": {
                             "class": "test-section",
                             "children": [
-                                { "h2": { "children": ["Test 5: Macro With String Operations"] } },
-                                { "p": { "children": ["A macro that formats a greeting..."] } },
+                                { "h2": "Test 5: Macro With String Operations" },
+                                { "p": "A macro that formats a greeting..." },
                                 { "div": { "class": "json-label", "children": ["Macro Definition:"] } },
                                 {
                                     "pre": {
@@ -296,7 +296,7 @@
                                             JSON.stringify({
                                                 "=macro": {
                                                     "name": "greeting",
-                                                    "body": { "=concat": ["Hello, ", "$.name", "!"] }
+                                                    "body": { "=concat": ["Hello, ", "=$.name", "!"] }
                                                 }
                                             }, null, 4)
                                         ]
@@ -305,7 +305,7 @@
                                 {
                                     "=macro": {
                                         "name": "greeting",
-                                        "body": { "=concat": ["Hello, ", "$.name", "!"] }
+                                        "body": { "=concat": ["Hello, ", "=$.name", "!"] }
                                     }
                                 },
                                 { "p": { "class": "success", "children": ["✓ greeting macro registered"] } },

package/index.js

@@ -35,20 +35,20 @@
     };
 
 
+    function tokenize(src) {
+        const tokenRegex = /\s*(\d*\.\d+|\d+|"([^"\\]|\\.)*"|'([^'\\]|\\.)*'|=\/|=\$this|=\$event|=\$query|=\$|[a-zA-Z_$][\w$]*|==|!=|<=|>=|&&|\|\||[-+*/%^<>!?:.,(){}[\]])\s*/g;
+        const results = [];
+        let match;
+        while ((match = tokenRegex.exec(src)) !== null) {
+            results.push(match[1]);
+        }
+        return results;
+    }
+
     function createExpression(text) {
         let at = 0;
         const tokens = tokenize(text);
 
-        function tokenize(src) {
-            const results = [];
-            const tokenRegex = /\s*(\d*\.\d+|\d+|"([^"\\]|\\.)*"|'([^'\\]|\\.)*'|=\/|=\$this|=\$event|=\$query|=\$|\$this|\$event|\$query|[a-zA-Z_$][\w$]*|==|!=|<=|>=|&&|\|\||[-+*/%^<>!?:.,(){}[\]])\s*/g;
-            let match;
-            while ((match = tokenRegex.exec(src)) !== null) {
-                results.push(match[1]);
-            }
-            return results;
-        }
-
         function peek(offset = 0) { return tokens[at + offset]; }
         function next() { return tokens[at++]; }
         function consume(expected) {
@@ -272,11 +272,9 @@
                 return createPathFunction(path, 'state');
             }
 
-            // Handle $this and $event (and deprecated $this/$event)
-            if (t === '=$this' || t === '=$event' || t === '$this' || t === '$event') {
-                const isDeprecated = !t.startsWith('=');
-                let path = t;
-                if (!isDeprecated) path = t.slice(1);
+            // Handle =$this and =$event
+            if (t === '=$this' || t === '=$event') {
+                let path = t.slice(1); // Remove the '=' prefix
                 // Check for property access
                 while (true) {
                     const p = peek();
@@ -301,8 +299,8 @@
                 if (path.startsWith('$event.') || path.startsWith('$event/')) return createPathFunction(path.slice(7), '$event');
             }
 
-            // Handle $.propertyName and =$$.propertyName
-            if (t === '$' || t === '=$') {
+            // Handle =$.propertyName
+            if (t === '=$') {
                 const p = peek();
                 if (p === '.') {
                     next(); // consume '.'
@@ -327,8 +325,8 @@
                 }
             }
 
-            // Handle $query.propertyName and =$query.propertyName
-            if (t === '$query' || t === '=$query') {
+            // Handle =$query.propertyName
+            if (t === '=$query') {
                 const p = peek();
                 if (p === '.') {
                     next(); // consume '.'
@@ -854,6 +852,7 @@
     }
 
     async function loadHelper(name) {
+        if (helpers.has(name)) return Promise.resolve(helpers.get(name));
         if (pendingHelpers.has(name)) return pendingHelpers.get(name);
 
         const promise = (async () => {
@@ -908,6 +907,42 @@
         set.add(sub);
     }
 
+    function findNeededHelpers(obj, found = new Set()) {
+        if (!obj) return found;
+
+        if (typeof obj === 'string') {
+            if (obj.startsWith('=') && obj.length > 1) {
+                const tokens = tokenize(obj);
+                for (let i = 0; i < tokens.length; i++) {
+                    const t = tokens[i];
+                    if (/^[a-zA-Z_$][\w$]*$/.test(t) && !['true', 'false', 'null', 'undefined'].includes(t)) {
+                        if (i > 0 && tokens[i - 1] === '.') continue;
+                        found.add(t);
+                    }
+                }
+            }
+            return found;
+        }
+
+        if (typeof obj !== 'object' || obj.nodeType) return found;
+
+        if (Array.isArray(obj)) {
+            for (const item of obj) findNeededHelpers(item, found);
+            return found;
+        }
+
+        for (const key in obj) {
+            const alias = symbolicOperators.get(key);
+            if (key.startsWith('=') && key.length > 1) {
+                found.add(key.slice(1));
+            } else if (alias) {
+                found.add(alias);
+            }
+            findNeededHelpers(obj[key], found);
+        }
+        return found;
+    }
+
 
     function evaluateStructural(obj, context, event, unsafe) {
         if (typeof obj !== 'object' || obj === null || obj.nodeType) {
@@ -915,10 +950,6 @@
             if (typeof obj === 'string' && obj.startsWith('=')) {
                 return evaluateStateExpression(obj, context, event);
             }
-            // Temporarily support deprecated bare $. for backward compatibility
-            if (typeof obj === 'string' && obj.startsWith('$.')) {
-                return evaluateStateExpression(obj, context, event);
-            }
             return obj;
         }
         obj = unwrap(obj);
@@ -966,9 +997,10 @@
                         const v = val[k];
                         const isPath = typeof v === 'string' && (
                             v.startsWith('=/') ||
-                            v.startsWith('$.') ||
-                            v === '$this' || v.startsWith('$this/') || v.startsWith('$this.') ||
-                            v === '$event' || v.startsWith('$event/') || v.startsWith('$event.')
+                            v.startsWith('=$.') ||
+                            v.startsWith('=$this') ||
+                            v.startsWith('=$event') ||
+                            v.startsWith('=$query')
                         );
 
                         if (isPath) {
@@ -987,9 +1019,10 @@
                 const resolvedArgs = args.map(arg => {
                     const isPath = typeof arg === 'string' && (
                         arg.startsWith('=/') ||
-                        arg.startsWith('$.') ||
-                        arg === '$this' || arg.startsWith('$this/') || arg.startsWith('$this.') ||
-                        arg === '$event' || arg.startsWith('$event/') || arg.startsWith('$event.')
+                        arg.startsWith('=$.') ||
+                        arg.startsWith('=$this') ||
+                        arg.startsWith('=$event') ||
+                        arg.startsWith('=$query')
                     );
 
                     if (isPath) {
@@ -1501,6 +1534,13 @@
                 const query = Object.fromEntries(url.searchParams.entries());
                 element._queryContext = query;
                 if (!element._macroContext) element._macroContext = query;
+
+                // Pre-load all needed helpers to avoid "suspense" flickering during hypermedia loads
+                const helpersToLoad = findNeededHelpers(cdomData);
+                if (helpersToLoad.size > 0) {
+                    await Promise.all(Array.from(helpersToLoad).map(name => loadHelper(name)));
+                }
+
                 const dom = cdomToDOM(cdomData, true, false, element);
                 element.replaceChildren(dom);
             } else if (isHTML) {
@@ -1558,6 +1598,65 @@
         }
     }
 
+    // Core Library Functions (Inlined for performance/reliability)
+    const _sum = (...args) => args.flat(Infinity).reduce((a, b) => a + (Number(b) || 0), 0);
+    const _sub = (...args) => {
+        const flat = args.flat(Infinity).map(v => Number(v) || 0);
+        if (flat.length === 0) return 0;
+        if (flat.length === 1) return -flat[0];
+        return flat.reduce((a, b) => a - b);
+    };
+    const _mul = (...args) => args.flat(Infinity).reduce((a, b) => a * (Number(b) || 1), 1);
+    const _div = (a, b) => (Number(a) || 0) / (Number(b) || 1);
+
+    const _set = function (target, val) {
+        if (target && typeof target === 'object' && 'value' in target) {
+            target.value = val;
+        } else if (target && typeof target === 'function' && 'value' in target) {
+            target.value = val;
+        } else if (target && typeof target === 'object' && val && typeof val === 'object') {
+            Object.assign(target, val);
+        }
+        return val;
+    };
+    _set.mutates = true;
+
+    const _inc = function (target, by = 1) {
+        const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
+        const current = hasValue ? target.value : 0;
+        return _set(target, Number(current) + Number(by));
+    };
+    _inc.mutates = true;
+
+    const _dec = function (target, by = 1) {
+        const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
+        const current = hasValue ? target.value : 0;
+        return _set(target, Number(current) - Number(by));
+    };
+    _dec.mutates = true;
+
+    const _toggle = function (target) {
+        const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
+        const current = hasValue ? target.value : false;
+        return _set(target, !current);
+    };
+    _toggle.mutates = true;
+
+    const _if = (c, t, e) => c ? t : e;
+    const _ifs = (...args) => {
+        for (let i = 0; i < args.length; i += 2) {
+            if (i + 1 >= args.length) return args[i]; // Default case
+            if (args[i]) return args[i + 1];
+        }
+    };
+
+    const _switch = (exp, ...args) => {
+        for (let i = 0; i < args.length - 1; i += 2) {
+            if (exp === args[i]) return args[i + 1];
+        }
+        return args.length % 2 === 1 ? args[args.length - 1] : undefined;
+    };
+
     // Export to global scope
     cDOM.signal = signal;
     cDOM.state = state;
@@ -1575,6 +1674,27 @@
     // Register core helpers
     helpers.set('state', state);
     helpers.set('signal', signal);
+    helpers.set('sum', _sum);
+    helpers.set('add', _sum);
+    helpers.set('subtract', _sub);
+    helpers.set('multiply', _mul);
+    helpers.set('divide', _div);
+    helpers.set('eq', (a, b) => a == b);
+    helpers.set('neq', (a, b) => a != b);
+    helpers.set('gt', (a, b) => a > b);
+    helpers.set('lt', (a, b) => a < b);
+    helpers.set('gte', (a, b) => a >= b);
+    helpers.set('lte', (a, b) => a <= b);
+    helpers.set('and', (...args) => args.every(Boolean));
+    helpers.set('or', (...args) => args.some(Boolean));
+    helpers.set('not', (a) => !a);
+    helpers.set('set', _set);
+    helpers.set('increment', _inc);
+    helpers.set('decrement', _dec);
+    helpers.set('toggle', _toggle);
+    helpers.set('if', _if);
+    helpers.set('ifs', _ifs);
+    helpers.set('switch', _switch);
 
     // Default Operator Mappings
     cDOM.operator('+', 'add');
@@ -1582,8 +1702,11 @@
     cDOM.operator('*', 'multiply');
     cDOM.operator('/', 'divide');
     cDOM.operator('==', 'eq');
+    cDOM.operator('!=', 'neq');
     cDOM.operator('>', 'gt');
     cDOM.operator('<', 'lt');
+    cDOM.operator('>=', 'gte');
+    cDOM.operator('<=', 'lte');
     cDOM.operator('&&', 'and');
     cDOM.operator('||', 'or');
     cDOM.operator('!', 'not');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdom",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Safe, reactive UIs based on JSON Pointer, XPath, JSON Schema",
   "keywords": [
     "JPRX",

package/helpers/add.js

@@ -1,3 +0,0 @@
-// Example: { p: { "=add": [10, 20] } }
-import sum from './sum.js';
-export default sum;

package/helpers/and.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=and": [true, true] } }
-export default function (...args) {
-    return args.every(Boolean);
-}

package/helpers/decrement.js

@@ -1,10 +0,0 @@
-// Example: { onclick: { "=decrement": ["/counter/count", 1] } }
-import set from './set.js';
-const decrement = function (target, by = 1) {
-    const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
-    const current = hasValue ? target.value : 0;
-    const next = Number(current) - Number(by);
-    return set(target, next);
-}
-decrement.mutates = true;
-export default decrement;

package/helpers/divide.js

@@ -1,7 +0,0 @@
-// Example: { p: { "=divide": [10, 2] } }
-export default function (...args) {
-    const flat = args.flat(Infinity).map(v => Number(v) || 0);
-    if (flat.length === 0) return 0;
-    if (flat.length === 1) return 1 / flat[0];
-    return flat.reduce((a, b) => a / b);
-}

package/helpers/eq.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=eq": [1, 1] } }
-export default function (a, b) {
-    return a == b;
-}

package/helpers/gt.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=gt": [10, 5] } }
-export default function (a, b) {
-    return Number(a) > Number(b);
-}

package/helpers/if.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=if": [true, "Yes", "No"] } }
-export default function (condition, thenVal, elseVal) {
-    return condition ? thenVal : elseVal;
-}

package/helpers/ifs.js

@@ -1,7 +0,0 @@
-// Example: { p: { "=ifs": [true, "A", false, "B", "Default"] } }
-export default function (...args) {
-    for (let i = 0; i < args.length - 1; i += 2) {
-        if (args[i]) return args[i + 1];
-    }
-    return args.length % 2 === 1 ? args[args.length - 1] : undefined;
-}

package/helpers/increment.js

@@ -1,10 +0,0 @@
-// Example: { onclick: { "=increment": ["/counter/count", 1] } }
-import set from './set.js';
-const increment = function (target, by = 1) {
-    const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
-    const current = hasValue ? target.value : 0;
-    const next = Number(current) + Number(by);
-    return set(target, next);
-}
-increment.mutates = true;
-export default increment;

package/helpers/lt.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=lt": [5, 10] } }
-export default function (a, b) {
-    return Number(a) < Number(b);
-}

package/helpers/multiply.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=multiply": [2, 3, 4] } }
-export default function (...args) {
-    return args.flat(Infinity).reduce((a, b) => a * (Number(b) || 0), 1);
-}

package/helpers/not.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=not": [true] } }
-export default function (val) {
-    return !val;
-}

package/helpers/or.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=or": [true, false] } }
-export default function (...args) {
-    return args.some(Boolean);
-}

package/helpers/set.js

@@ -1,13 +0,0 @@
-// Example: { onclick: { "=set": ["/app/title", "New Title"] } }
-const set = function (target, val) {
-    if (target && typeof target === 'object' && 'value' in target) {
-        target.value = val;
-    } else if (target && typeof target === 'function' && 'value' in target) {
-        target.value = val;
-    } else if (target && typeof target === 'object' && val && typeof val === 'object') {
-        Object.assign(target, val);
-    }
-    return val;
-}
-set.mutates = true;
-export default set;

package/helpers/subtract.js

@@ -1,7 +0,0 @@
-// Example: { p: { "=subtract": [10, 5, 2] } }
-export default function (...args) {
-    const flat = args.flat(Infinity).map(v => Number(v) || 0);
-    if (flat.length === 0) return 0;
-    if (flat.length === 1) return -flat[0];
-    return flat.reduce((a, b) => a - b);
-}

package/helpers/sum.js

@@ -1,4 +0,0 @@
-// Example: { p: { "=sum": [10, 20, 30] } }
-export default function (...args) {
-    return args.flat(Infinity).reduce((a, b) => a + (Number(b) || 0), 0);
-}

package/helpers/switch.js

@@ -1,7 +0,0 @@
-// Example: { p: { "=switch": [2, 1, "One", 2, "Two", "Default"] } }
-export default function (expression, ...args) {
-    for (let i = 0; i < args.length - 1; i += 2) {
-        if (expression === args[i]) return args[i + 1];
-    }
-    return args.length % 2 === 1 ? args[args.length - 1] : undefined;
-}

package/helpers/toggle.js

@@ -1,9 +0,0 @@
-// Example: { onclick: { "=toggle": ["/user/isActive"] } }
-import set from './set.js';
-const toggle = function (target) {
-    const hasValue = target && (typeof target === 'object' || typeof target === 'function') && 'value' in target;
-    const current = hasValue ? target.value : false;
-    return set(target, !current);
-}
-toggle.mutates = true;
-export default toggle;