npm - cdom - Versions diffs - 0.0.3 → 0.0.5 - Mend

cdom 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -498,14 +498,22 @@ Converts cDOM object to DOM and optionally inserts it.
 **Parameters:**
 - `object`: cDOM object or JSON string
 - `options`: Optional configuration
-  - `target`: Element to insert into (default: `document.currentScript`)
+  - `target`: Element or CSS selector string (default: `document.currentScript`). If a selector matches multiple elements, the component will be instantiated for each.
   - `location`: Where to insert - `'innerHTML'`, `'outerHTML'`, `'beforeend'`, etc.
   - `unsafe`: Allow unsafe eval (default: `false`)
-**Returns:** DOM element
+**Returns:** The (first) created DOM element
 If an options object is provided, the default location will be outerHTML on the current script, i.e. replace the script. If you do not want to replace anything and just want the reactive element, DO NOT pass in an options object.
+```javascript
+// Target a specific element by ID
+cDOM({ h1: "Hello" }, { target: "#header" });
+// Target all elements with a class
+cDOM({ button: "Click Me" }, { target: ".action-buttons", location: "beforeend" });
+```
 ### `cDOM.state(value, options)` / `cDOM.signal(value, options)`
 Create reactive state or signals.

package/examples/dashboard.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TechMonitor PRO | Safe & Reactive cDOM</title>
     <!-- We still need expr-eval if cdom.js uses it, but we will avoid operator expressions -->
-    <script src="https://unpkg.com/expr-eval@2.0.2/dist/bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/expr-eval/dist/bundle.min.js"></script>
     <script src="../index.js"></script>

package/examples/scratch.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <html>
-<script src="https://unpkg.com/expr-eval@2.0.2/dist/bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/expr-eval/dist/bundle.min.js"></script>
 <script src="../index.js"></script>
 <body>

package/examples/spreadsheet.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CryptoSheet | Reactive cDOM Spreadsheet</title>
-    <script src="https://unpkg.com/expr-eval@2.0.2/dist/bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/expr-eval/dist/bundle.min.js"></script>
     <script src="../index.js"></script>
     <link rel="stylesheet" href="spreadsheet.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">

package/index.js CHANGED Viewed

@@ -609,8 +609,12 @@
                         args[i] = argVal;
                     }
                 }
-                const result = fn(...args);
-                return result;
+                try {
+                    return fn(...args);
+                } catch (e) {
+                    console.error(`[cDOM] Helper error in "${funcName}":`, e, { expression, contextNode: ctx });
+                    return `_(${expression})`;
+                }
             };
         }
@@ -632,7 +636,10 @@
                         return id;
                     });
                     return mathParser.evaluate(processedExpr, scope);
-                } catch (e) { return `[Math Error]`; }
+                } catch (e) {
+                    console.error(`[cDOM] Math Error in "${expression}":`, e, { contextNode: ctx });
+                    return `_(${expression})`;
+                }
             };
         }
@@ -774,6 +781,7 @@
             return { type: 'value', value: elements.map(el => el.textContent || '').join(', ') };
         } catch (e) {
+            console.error(`[cDOM] CSS Error: "${selector}"`, e, { contextNode });
             return { type: 'value', value: `[CSS Error: ${selector}]` };
         }
     }
@@ -809,6 +817,7 @@
                 default: return { type: 'value', value: '' };
             }
         } catch (e) {
+            console.error(`[cDOM] XPath Error: "${expression}"`, e, { contextNode });
             return { type: 'value', value: `[XPath Error: ${expression}]` };
         }
     }
@@ -945,7 +954,7 @@
                     continue;
                 } else if (key.startsWith('on')) {
                     if (typeof val === "string") {
-                        if (val.startsWith('_(') && val.endsWith(')')) {
+                        if ((val.startsWith('_(') || val.startsWith('=(')) && val.endsWith(')')) {
                             const expr = val.substring(2, val.length - 1);
                             el[key] = (event) => evaluateStateExpression(expr, el, event);
                         } else if (!wasString || unsafe) {
@@ -1082,13 +1091,26 @@
     // call with options to insert into the DOM
     const cDOM = (cdom, options, script = document.currentScript) => {
         const type = typeof cdom;
+        const wasString = type === 'string' || (options && options._wasString);
+        let cdomObj = cdom;
         if (type === 'string') {
-            cdom = JSON.parse(cdom);
+            cdomObj = JSON.parse(cdom);
         }
-        const dom = cdomToDOM(cdom, type === 'string', options?.unsafe, options?.context);
         if (options) {
             let { target = script, location = 'outerHTML' } = options;
-            location = location.toLowerCase();
+            if (typeof target === 'string') {
+                const targets = Array.from(document.querySelectorAll(target));
+                let firstRes = null;
+                for (let i = 0; i < targets.length; i++) {
+                    const res = cDOM(cdomObj, { ...options, target: targets[i], _wasString: wasString }, script);
+                    if (i === 0) firstRes = res;
+                }
+                return firstRes;
+            }
+            const dom = cdomToDOM(cdomObj, wasString, options.unsafe, options.context);
+            location = (location || 'outerHTML').toLowerCase();
             if (location === 'outerhtml') target.replaceWith(dom);
             else if (location === 'innerhtml') { target.replaceChildren(dom); }
             else if (location === 'beforebegin') { target.insertAdjacentElement('beforebegin', dom); }
@@ -1099,8 +1121,9 @@
                 if (!target.shadowRoot) target.attachShadow({ mode: 'open' });
                 target.shadowRoot.replaceChildren(dom);
             }
+            return dom;
         }
-        return dom;
+        return cdomToDOM(cdomObj, wasString);
     }
     // Standalone src/href handling

package/package.json CHANGED Viewed

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