@jinntec/fore 2.9.0 → 3.1.0

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/abstract-control.js

@@ -335,17 +335,25 @@ export default class AbstractControl extends UIElement {
   }
 
   // todo - review alert handling altogether. There could be potentially multiple ones in model
+  // TODO: both required and handleValid set valid attrs and aria attrs. Duplicate code
   handleValid() {
     // console.log('mip valid', this.modelItem.required);
 
     // console.log('late modelItem', mi);
-    if (this.isValid() !== this.modelItem.constraint) {
-      if (this.modelItem.constraint) {
+    const hasValue = this.modelItem.value !== '';
+    const isRequired = this.modelItem.required;
+    const isValidAccordingToRequired = isRequired ? hasValue : true;
+    const isValidNow = this.modelItem.constraint && isValidAccordingToRequired;
+
+    if (this.isValid() !== isValidNow) {
+      if (isValidNow) {
         // if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
         this.setAttribute('valid', '');
         this.removeAttribute('invalid');
         this.getWidget().setAttribute('aria-invalid', 'false');
+        // also reset other dependent CSS classes
+        this.classList.remove('isEmpty');
       } else {
         this.setAttribute('invalid', '');
         this.getWidget().setAttribute('aria-invalid', 'true');
@@ -379,7 +387,6 @@ export default class AbstractControl extends UIElement {
     // Ensure aria-invalid matches the current control state even if
     // we didn't enter the state-change branch above.
     this._syncAriaInvalid();
-
   }
 
   handleRelevant() {
@@ -400,12 +407,12 @@ export default class AbstractControl extends UIElement {
 
     // Apply attributes
     if (newEnabled) {
-        this.setAttribute('relevant', '');
+      this.setAttribute('relevant', '');
       this.removeAttribute('nonrelevant');
-      } else {
-        this.setAttribute('nonrelevant', '');
+    } else {
+      this.setAttribute('nonrelevant', '');
       this.removeAttribute('relevant');
-      }
+    }
 
     // Dispatch only on actual change
     if (wasEnabled !== newEnabled) {

package/src/ui/fx-case.js

@@ -65,6 +65,7 @@ export class FxCase extends FxContainer {
 
     this.addEventListener('select', async () => {
       const ownerForm = this.getOwnerForm();
+      let target = this;
       if (this.src) {
         // We will replace the node. So this node will be detached after these async function
         // calls. Save all important state first.
@@ -79,9 +80,10 @@ export class FxCase extends FxContainer {
           return;
         }
         await parentNode.replaceCase(this, replacement);
+        target = replacement;
       }
       const model = ownerForm.getModel();
-      ownerForm.addToBatchedNotifications(this);
+      ownerForm.addToBatchedNotifications(target);
       ownerForm.refresh(false);
     });
     this.addEventListener('deselect', (event) => {

package/src/ui/fx-control.js

@@ -441,7 +441,7 @@ export default class FxControl extends XfAbstractControl {
     }
 
     // ### when there's a src Fore is used as widget and will be loaded from external file
-    if (this.src && !this.loaded && this.modelItem.relevant) {
+    if (this.src && !this.loaded && !this.loading && this.modelItem.relevant) {
       // ### evaluate initial data if necessary
 
       if (this.initial) {
@@ -449,9 +449,11 @@ export default class FxControl extends XfAbstractControl {
         // console.log('initialNodes', this.initialNode);
       }
 
+      this.loading = true;
       // ### load the markup from src
       await this._loadForeFromSrc();
       this.loaded = true;
+      this.loading = false;
 
       // ### replace default instance of embedded Fore with initial nodes
       // const innerInstance = this.querySelector('fx-instance');
@@ -577,7 +579,7 @@ export default class FxControl extends XfAbstractControl {
     } finally {
       this._isRefreshing = false;
     }
-    Fore.refreshChildren(this, force);
+    await Fore.refreshChildren(this, force);
   }
 
   /**

package/src/ui/fx-group.js

@@ -93,7 +93,7 @@ class FxGroup extends FxContainer {
     super.refresh(force);
     // Make the maybe filtered refresh an unconditional forced refresh: This fx-group changes the
     // context item
-    Fore.refreshChildren(this, !!force);
+    return Fore.refreshChildren(this, !!force);
   }
 
   // todo: this code should go