cdom 0.0.15 → 0.0.16

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|=\$|[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) {
@@ -852,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 () => {
@@ -906,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) {
@@ -1497,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) {
@@ -1554,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;
@@ -1571,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');
@@ -1578,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.15",
+  "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;