@jinntec/fore 2.9.0 → 3.0.1

package/src/json/JSONDomFacade.js

@@ -0,0 +1,84 @@
+// src/json/JSONDomFacade.js
+export class JSONDomFacade {
+  // Treat JSONNodes as "element-like" nodes for XPath purposes.
+  // FontoXPath uses DOM nodeType numbers internally; 1 corresponds to ELEMENT_NODE.
+  getNodeType(/* node */) {
+    return 1;
+  }
+
+  getParentNode(node) {
+    return node.getParent();
+  }
+
+  getChildNodes(node) {
+    return node.getChildren();
+  }
+
+  getChildren(node) {
+    return node.getChildren();
+  }
+
+  getChildNodeCount(node) {
+    return node.getChildren().length;
+  }
+
+  getFirstChild(node) {
+    const children = node.getChildren();
+    return children.length ? children[0] : null;
+  }
+
+  getLastChild(node) {
+    const children = node.getChildren();
+    return children.length ? children[children.length - 1] : null;
+  }
+
+  getNextSibling(node) {
+    const parent = node.getParent();
+    if (!parent) return null;
+    const siblings = parent.getChildren();
+    const idx = siblings.indexOf(node);
+    return siblings[idx + 1] || null;
+  }
+
+  getPreviousSibling(node) {
+    const parent = node.getParent();
+    if (!parent) return null;
+    const siblings = parent.getChildren();
+    const idx = siblings.indexOf(node);
+    return idx > 0 ? siblings[idx - 1] : null;
+  }
+
+  getNodeName(node) {
+    return String(node.getKey());
+  }
+
+  getNodeValue(node) {
+    return node.getValue();
+  }
+
+  /**
+   * CRITICAL for fontoxpath: atomization / string-value.
+   * If this returns '' for JSON nodes, contains(), string(), lower-case(), etc. will behave as if empty.
+   */
+  getData(node) {
+    const v = node.getValue();
+    if (v === null || v === undefined) return '';
+    if (typeof v === 'string') return v;
+    if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+
+    // object/array: pragmatic string-value
+    try {
+      return JSON.stringify(v);
+    } catch (_e) {
+      return String(v);
+    }
+  }
+
+  getAllAttributes() {
+    return [];
+  }
+
+  getAttribute() {
+    return null;
+  }
+}

package/src/json/JSONLens.js

@@ -0,0 +1,67 @@
+// json-lens.js
+import { JSONNode } from './JSONNode.js';
+
+export function wrapJson(value, parent = null, keyOrIndex = null, instanceId = 'default') {
+  return new JSONNode(value, parent, keyOrIndex, instanceId);
+}
+
+export class JSONLens {
+  constructor(root, path = []) {
+    this.root = root; // the raw JSON object
+    this.path = path; // path to target node, e.g., ['invoice', 'items', 0]
+  }
+
+  _resolveParent() {
+    const lastKey = this.path[this.path.length - 1];
+    const parentPath = this.path.slice(0, -1);
+    const parent = parentPath.reduce((obj, key) => obj?.[key], this.root);
+    return [parent, lastKey];
+  }
+
+  get() {
+    return this.path.reduce((obj, key) => obj?.[key], this.root);
+  }
+
+  set(value) {
+    const [parent, key] = this._resolveParent();
+    if (parent !== undefined) {
+      parent[key] = value;
+    }
+  }
+
+  delete() {
+    const [parent, key] = this._resolveParent();
+    if (Array.isArray(parent)) {
+      parent.splice(key, 1);
+    } else if (parent && typeof parent === 'object') {
+      delete parent[key];
+    }
+  }
+
+  insert(value, keyOrIndex = null) {
+    const  target = this.get();
+
+    if (Array.isArray(target)) {
+      if (keyOrIndex === null || keyOrIndex >= target.length) {
+        target.push(value); // append
+      } else {
+        target.splice(keyOrIndex, 0, value); // insert at index
+      }
+    } else if (target && typeof target === 'object') {
+      if (typeof keyOrIndex !== 'string') {
+        throw new Error('Inserting into an object requires a string key.');
+      }
+      target[keyOrIndex] = value;
+    } else {
+      throw new Error('Target is not insertable (must be object or array).');
+    }
+  }
+
+  lensForChild(key) {
+    return new JSONLens(this.root, this.path.concat(key));
+  }
+
+  pathString() {
+    return '/' + this.path.map(k => (typeof k === 'number' ? `[${k}]` : k)).join('/');
+  }
+}

package/src/json/JSONNode.js

@@ -0,0 +1,248 @@
+// json-node.js
+
+export class JSONNode {
+  constructor(value, parent = null, keyOrIndex = null, instanceId = 'default') {
+    this.value = value;
+    this.parent = parent;
+    this.keyOrIndex = keyOrIndex;
+    this.instanceId = instanceId;
+    this.__jsonlens__ = true;
+
+    if (Array.isArray(value)) {
+      this.children = value.map((child, index) => new JSONNode(child, this, index, instanceId));
+    } else if (typeof value === 'object' && value !== null) {
+      this.children = Object.entries(value).map(
+        ([key, val]) => new JSONNode(val, this, key, instanceId),
+      );
+    } else {
+      this.children = [];
+    }
+  }
+
+  // Methods for JSONDomFacade compatibility
+  getParent() {
+    return this.parent;
+  }
+
+  getChildren() {
+    return this.children;
+  }
+
+  getKey() {
+    return this.keyOrIndex;
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  /**
+   * Get the value of this node or a child node by key.
+   * @param {string|number} [key] - Optional key or index to get a child node
+   * @returns {*|JSONNode|undefined} The raw value of this node or a child node
+   */
+  get(key) {
+    // If no key is provided, return the raw value of this node
+    if (arguments.length === 0) {
+      return this.value;
+    }
+
+    // Otherwise, get child node by key or index
+    if (Array.isArray(this.value) && typeof key === 'number') {
+      return this.children[key];
+    }
+    if (typeof this.value === 'object' && this.value !== null) {
+      return this.children.find(c => c.keyOrIndex === key);
+    }
+    return undefined;
+  }
+
+  /**
+   * Get the XPath-style path to this node including instance prefix.
+   * @returns {string|null}
+   */
+  getPath() {
+    // Detached: no parent and no key
+    const isDetached = this.parent === null && this.keyOrIndex === null;
+
+    // Special case: this is NOT the original root (value-only root has no children)
+    if (isDetached && this.children?.length === 0) {
+      return null;
+    }
+
+    const segments = [];
+    let node = this;
+
+    while (node.parent !== null) {
+      const key = node.keyOrIndex;
+
+      if (key === null || key === undefined) return null;
+
+      if (typeof key === 'number') {
+        segments.unshift(`[${key + 1}]`);
+      } else if (/^[a-zA-Z_][\w\-]*$/.test(key)) {
+        segments.unshift(`/${key}`);
+      } else {
+        const escaped = String(key).replace(/'/g, `''`);
+        segments.unshift(`/'${escaped}'`);
+      }
+
+      node = node.parent;
+    }
+
+    return `$${this.instanceId}${segments.join('')}`;
+  }
+
+  /**
+   * Set the raw value of this node.
+   * @param {*} value
+   */
+  set(value) {
+    this.value = value;
+
+    // Update the parent's data structure if this is a child node
+    if (this.parent && this.keyOrIndex !== null && this.keyOrIndex !== undefined) {
+      this.parent.value[this.keyOrIndex] = value;
+    }
+
+    this.children = [];
+    if (Array.isArray(value)) {
+      this.children = value.map(
+        (child, index) => new JSONNode(child, this, index, this.instanceId),
+      );
+    } else if (typeof value === 'object' && value !== null) {
+      this.children = Object.entries(value).map(
+        ([key, val]) => new JSONNode(val, this, key, this.instanceId),
+      );
+    }
+  }
+
+  /**
+   * Insert into array or object node.
+   * @param {*} value
+   * @param {string|number|null} keyOrIndex
+   */
+  insert(value, keyOrIndex = null) {
+    if (Array.isArray(this.value)) {
+      const index = keyOrIndex === null ? this.value.length : keyOrIndex;
+      this.value.splice(index, 0, value);
+      this.children.splice(index, 0, new JSONNode(value, this, index, this.instanceId));
+      // update keyOrIndex of all children after insertion
+      for (let i = index + 1; i < this.children.length; i++) {
+        this.children[i].keyOrIndex = i;
+      }
+    } else if (typeof this.value === 'object') {
+      if (typeof keyOrIndex !== 'string') {
+        throw new Error('Insert into object requires a string key.');
+      }
+      this.value[keyOrIndex] = value;
+      this.children.push(new JSONNode(value, this, keyOrIndex, this.instanceId));
+    } else {
+      throw new Error('Cannot insert into primitive value.');
+    }
+  }
+
+  delete() {
+    if (!this.parent || this.keyOrIndex == null) return;
+
+    const parentVal = this.parent.value;
+
+    if (Array.isArray(parentVal)) {
+      parentVal.splice(this.keyOrIndex, 1);
+      this.parent.set(parentVal);
+    } else if (typeof parentVal === 'object' && parentVal !== null) {
+      delete parentVal[this.keyOrIndex];
+      this.parent.set(parentVal);
+    } else {
+      // Parent is not deletable (primitive etc.)
+      throw new Error('Parent is not an object or array — cannot delete child');
+    }
+  }
+}
+
+/**
+ * Wrap a raw JSON value as a lensable node tree.
+ * @param {*} value
+ * @param {*} parent
+ * @param {*} keyOrIndex
+ * @param {string} instanceId
+ * @returns {JSONNode}
+ */
+export function wrapJson(value, parent = null, keyOrIndex = null, instanceId = 'default') {
+  const jsonNode = new JSONNode(value, parent, keyOrIndex, instanceId);
+  console.log('wrapJson', jsonNode);
+  return jsonNode;
+  // return new JSONNode(value, parent, keyOrIndex, instanceId);
+}
+
+/**
+ * Returns the correct lens for a JSON node based on its parent and key/index.
+ * Assumes the node is already in a wrapped structure, or retrievable via parent.
+ *
+ * @param {any} node - The JSON node (primitive value or structure)
+ * @param {JSONNode} parent - The parent JSONNode
+ * @param {string|number} keyOrIndex - The key (for objects) or index (for arrays)
+ * @returns {JSONNode} A JSONNode wrapping the value with lens and context
+ */
+
+/**
+ * Returns the correct lens for a JSON node based on its parent and key/index.
+ * Assumes the node is already in a wrapped structure, or retrievable via parent.
+ *
+ * @param {any} node - The JSON node (primitive value or structure)
+ * @param {JSONNode} parent - The parent JSONNode
+ * @param {string|number} keyOrIndex - The key (for objects) or index (for arrays)
+ * @returns {JSONNode} A JSONNode wrapping the value with lens and context
+ */
+/*
+export function getLensForNode(node, parent, keyOrIndex) {
+  if (!parent || !parent.__jsonlens__) {
+    console.warn('getLensForNode called without proper parent lens');
+    return node;
+  }
+
+  const lens = parent.__jsonlens__.lens;
+  const wrapped = lens.get(parent.value, keyOrIndex);
+  return wrapped;
+}
+*/
+
+/**
+ * Attempts to wrap a raw value into a JSONNode, using fallback logic if needed.
+ * @param {any} value - The raw value to wrap.
+ * @param {JSONNode|null} parent - The parent JSONNode (if known).
+ * @param {string|number|null} key - The key/index in the parent (if known).
+ * @param {string} instanceId - The ID of the instance.
+ * @param {Object} instanceRoot - The full wrapped instance root, to help recover parent/key.
+ * @returns {JSONNode|any}
+ */
+export function getLensForNode(value, parent = null, key = null, instanceId, instanceRoot = null) {
+  if (value?.__jsonlens__) return value;
+
+  // Attempt fallback recovery if key or parent missing
+  if ((!parent || typeof key === 'undefined') && instanceRoot) {
+    const queue = [instanceRoot];
+    while (queue.length) {
+      const current = queue.shift();
+      if (!current?.children) continue;
+
+      for (const child of current.children) {
+        if (child.value === value) {
+          parent = current;
+          key = child.keyOrIndex;
+          break;
+        } else {
+          queue.push(child);
+        }
+      }
+      if (parent) break;
+    }
+
+    if (!parent || typeof key === 'undefined') {
+      console.warn('[getLensForNode] Unable to determine parent/key for value:', value);
+      return value; // Bail out, return raw value
+    }
+  }
+
+  return new JSONNode(value, parent, key, instanceId);
+}

package/src/json/lensFromNode.js

@@ -0,0 +1,5 @@
+import { JSONLens } from './JSONLens.js';
+
+export function lensFromNode(jsonRoot, jsonNode) {
+  return new JSONLens(jsonRoot, jsonNode.getPath());
+}

package/src/modelitem.js

@@ -25,7 +25,7 @@ export class ModelItem {
    * @param {string} instance - The fx-instance id having created this ModelItem
    * @param {import('./fx-fore').FxFore} fore - The fx-fore element this ModelItem belongs to
    */
-  constructor(path, ref, node, bind, instance, fore) {
+  constructor(path, ref, nodeOrLens, bind, instance, fore) {
     this.path = path;
     this.ref = ref;
     this.readonly = ModelItem.READONLY_DEFAULT;
@@ -33,7 +33,13 @@ export class ModelItem {
     this.required = ModelItem.REQUIRED_DEFAULT;
     this.constraint = ModelItem.CONSTRAINT_DEFAULT;
     this.type = ModelItem.TYPE_DEFAULT;
-    this.node = node;
+    this.node = null;
+    this.lens = null;
+    if (nodeOrLens?.get && nodeOrLens?.set) {
+      this.lens = nodeOrLens;
+    } else {
+      this.node = nodeOrLens;
+    }
     this.bind = bind;
     this.instanceId = instance;
     this.fore = fore;
@@ -59,6 +65,7 @@ export class ModelItem {
   }
 
   get value() {
+    if (this.lens) return this.lens.get();
     if (!this.node) return null;
     if (!this.node.nodeType) return this.node;
     if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
@@ -68,6 +75,13 @@ export class ModelItem {
   }
 
   set value(newVal) {
+    if (this.lens) {
+      const oldVal = this.lens.get();
+      this.lens.set(newVal);
+      if (oldVal !== newVal) this.notify();
+      return;
+    }
+
     if (!this.node) return;
     const oldVal = this.value;
 

package/src/tools/fx-action-log.js

@@ -521,7 +521,7 @@ export class FxActionLog extends HTMLElement {
    */
   _logDetails(e) {
     const eventType = e.type;
-    const path = getPath(e.target, '');
+    const path = getDocPath(e.target);
     // console.log('>>>> _logDetails', path);
     const cut = path.substring(path.indexOf('/fx-fore'), path.length);
     const xpath = `/${cut}`;

package/src/ui/UIElement.js

@@ -1,7 +1,6 @@
 import ForeElementMixin from '../ForeElementMixin.js';
 import { Fore } from '../fore.js';
-import { evaluateXPath, evaluateXPathToBoolean, resolveId } from '../xpath-evaluation';
-import { DependencyNotifyingDomFacade } from '../DependencyNotifyingDomFacade';
+import { resolveId } from '../xpath-evaluation.js';
 
 export class UIElement extends ForeElementMixin {
   constructor() {
@@ -120,6 +119,8 @@ export class UIElement extends ForeElementMixin {
    * Called by ModelItem when it changes
    * @param {import('../modelitem.js').ModelItem} modelItem - The ModelItem that changed
    */
+
+/*
   update(modelItem) {
     if (this.isBound()) {
       // console.log('[UIElement] update()', modelItem);
@@ -127,7 +128,20 @@ export class UIElement extends ForeElementMixin {
       this.refresh();
     }
   }
+*/
+
+  update(_modelItem) {
+    if (!this.isBound()) return;
+    const fore = this.getOwnerForm();
+    if (!fore) return;
 
+    // Preserve legacy eager updates unless we're already in a refresh phase.
+    if (fore.isRefreshPhase) {
+      fore.addToBatchedNotifications(this);
+    } else {
+      this.refresh();
+    }
+  }
   // init() {
   //   throw new Error('You have to implement the method init!');
   // }

package/src/ui/fx-items.js

@@ -7,8 +7,6 @@ import { XPathUtil } from '../xpath-util.js';
  * FxItems provides a templated list over its bound nodes. It is not standalone but expects to be used
  * within an fx-control element.
  *
- *
- *
  * @demo demo/selects3.html
  */
 export class FxItems extends FxControl {
@@ -56,22 +54,19 @@ export class FxItems extends FxControl {
         target.focus();
       }
     });
+
     this.addEventListener('click', e => {
-      e.preventDefault;
+      e.preventDefault; // keep as-is (do not change behavior here)
       e.stopPropagation();
       const items = this.querySelectorAll('[value]');
-      /*
-      let target;
-      if (e.target.nodeName === 'LABEL') {
-        target = resolveId(e.target.getAttribute('for'), this);
-        target.checked = !target.checked;
-      }
-*/
 
       let val = '';
       Array.from(items).forEach(item => {
         if (item.checked) {
-          val += ` ${item.getAttribute('value')}`;
+          // ROOT FIX: for generated inputs, attribute "value" may still be "{value}".
+          // The DOM property .value is the authoritative one.
+          const v = item.value != null ? item.value : item.getAttribute('value');
+          val += ` ${v}`;
         }
       });
       this.setAttribute('value', val.trim());
@@ -90,6 +85,11 @@ export class FxItems extends FxControl {
     return this;
   }
 
+  async refresh(force = false) {
+    super.refresh(force);
+    // console.log('fx-items.refresh() called');
+  }
+
   async updateWidgetValue() {
     // console.log('setting items value');
 
@@ -108,8 +108,6 @@ export class FxItems extends FxControl {
    * attention: limitations here: assumes that there's an `label` element plus an element with an `value`
    * attribute which it will update.
    *
-   *
-   *
    * @param newEntry
    * @param node
    */
@@ -123,14 +121,12 @@ export class FxItems extends FxControl {
     const label = newEntry.querySelector('label');
     const lblExpr = Fore.getExpression(label.textContent);
 
-    // ### xml / JSON
-    if (node.nodeType) {
-      const lblEvaluated = evaluateXPathToString(lblExpr, node, this);
-      label.textContent = lblEvaluated;
-    } else {
-      const labelExpr = Fore.getExpression(lblExpr);
-      label.textContent = node[labelExpr];
-    }
+    // ROOT FIX: JSON lens nodes are objects; do NOT use direct JS property access.
+    // Always go through evaluateXPathToString() for JSON too.
+    const lblEvaluated = evaluateXPathToString(lblExpr, node, this);
+    // console.log('lblEvaluated ', lblEvaluated);
+    label.textContent = lblEvaluated;
+
     label.setAttribute('for', id);
 
     // ### handle the 'value'
@@ -138,24 +134,22 @@ export class FxItems extends FxControl {
     const input = newEntry.querySelector('[value]');
     // getting expr
     const expr = input.value;
-    // const cutted = expr.substring(1, expr.length - 1);
     const cutted = Fore.getExpression(expr);
-    let evaluated;
-    if (node.nodeType) {
-      evaluated = evaluateXPathToString(cutted, node, newEntry);
-    } else {
-      evaluated = node[cutted];
-    }
 
+    // ROOT FIX: same here
+    const evaluated = evaluateXPathToString(cutted, node, this);
+    // console.log('evaluated ', lblEvaluated);
+
+    // Set both property and attribute so *any* downstream code path works
     input.value = evaluated;
+    input.setAttribute('value', evaluated);
+
     input.setAttribute('id', id);
+
     // Normalize the current value (remove newlines, tabs, excessive spaces)
     const currentValue = (this.getAttribute('value') || '').replace(/\s+/g, ' ').trim();
     const valueList = currentValue.split(/\s+/); // Split on whitespace
 
-    // Check if the value is in the space-separated list of values
-    // const currentValue = this.getAttribute('value') || '';
-    // const valueList = currentValue.split(/\s+/);
     if (valueList.includes(evaluated)) {
       input.checked = true;
     }
@@ -164,4 +158,4 @@ export class FxItems extends FxControl {
 
 if (!customElements.get('fx-items')) {
   customElements.define('fx-items', FxItems);
-}
+}