@jinntec/fore 3.2.1 → 3.3.0

package/src/fx-instance.js

@@ -9,7 +9,11 @@ async function handleResponse(fxInstance, response) {
     alert(`response status:  ${status} - failed to load data for '${fxInstance.src}' - stopping.`);
     throw new Error(`failed to load data - status: ${status}`);
   }
-  let responseContentType = response.headers.get('content-type').split(';')[0].trim().toLowerCase();
+  const responseContentType = response.headers
+    .get('content-type')
+    .split(';')[0]
+    .trim()
+    .toLowerCase();
 
   if (responseContentType.startsWith('text/html')) {
     return response.text().then(result => new DOMParser().parseFromString(result, 'text/html'));
@@ -49,6 +53,37 @@ export class FxInstance extends HTMLElement {
 
     // JSON facade (only relevant for JSON instances)
     this.domFacade = null;
+
+    this.debugInfo = {
+      debugId: `instance-${Math.random().toString(36).slice(2, 9)}`,
+      createdAt: performance.now(),
+      initializedAt: null,
+      loadCount: 0,
+/*
+      mutationCount: 0,
+      lastMutationAt: null,
+*/
+    };
+  }
+
+  getDebugInfo() {
+    const defaultContext = this.getDefaultContext?.();
+
+    return {
+      ...this.debugInfo,
+      id: this.getAttribute('id') || null,
+      instanceId: this.instanceId,
+      type: this.type,
+      src: this.getAttribute('src') || null,
+      shared: this.hasAttribute('shared'),
+      hasData: !!this.instanceData,
+      hasNodeset: !!this.nodeset,
+      defaultContextType: defaultContext?.nodeType
+        ? 'xml-node'
+        : defaultContext?.__jsonlens__
+          ? 'json-lens'
+          : typeof defaultContext,
+    };
   }
 
   connectedCallback() {
@@ -61,7 +96,9 @@ export class FxInstance extends HTMLElement {
     // If the author did not provide an id on that first instance, we set id="default".
     // If the author provided an id on that first instance, we use that id instead.
     const parentModel =
-      this.parentNode && this.parentNode.nodeName && this.parentNode.nodeName.toUpperCase() === 'FX-MODEL'
+      this.parentNode &&
+      this.parentNode.nodeName &&
+      this.parentNode.nodeName.toUpperCase() === 'FX-MODEL'
         ? this.parentNode
         : null;
 
@@ -92,7 +129,9 @@ export class FxInstance extends HTMLElement {
       }
     }
 
-    this.credentials = this.hasAttribute('credentials') ? this.getAttribute('credentials') : 'same-origin';
+    this.credentials = this.hasAttribute('credentials')
+      ? this.getAttribute('credentials')
+      : 'same-origin';
     if (!['same-origin', 'include', 'omit'].includes(this.credentials)) {
       console.error(
         `fx-submission: the value of credentials is not valid. Expected 'same-origin', 'include' or 'omit' but got '${this.credentials}'`,
@@ -144,6 +183,8 @@ export class FxInstance extends HTMLElement {
 
     // Signal structure mutation (used by fx-fore for refresh decisions)
     this.dispatchEvent(new CustomEvent('path-mutated', { bubbles: true, composed: true }));
+    // this.debugInfo.mutationCount += 1;
+    // this.debugInfo.lastMutationAt = performance.now();
   }
 
   /**
@@ -162,6 +203,8 @@ export class FxInstance extends HTMLElement {
   }
 
   reset() {
+    // this.debugInfo.mutationCount += 1;
+    // this.debugInfo.lastMutationAt = performance.now();
     // use the setter so nodeset is rebuilt for JSON too
     if (this.originalInstance && this.type === 'xml') {
       this.instanceData = this.originalInstance.cloneNode(true);
@@ -193,6 +236,8 @@ export class FxInstance extends HTMLElement {
    * legacy setter API: keep it, but forward to instanceData setter
    */
   setInstanceData(data) {
+    // this.debugInfo.mutationCount += 1;
+    // this.debugInfo.lastMutationAt = performance.now();
     this.instanceData = data;
   }
 
@@ -224,6 +269,8 @@ export class FxInstance extends HTMLElement {
     } else if (this.childNodes.length !== 0) {
       this._useInlineData();
     }
+    this.debugInfo.initializedAt = performance.now();
+    this.debugInfo.loadCount += 1;
   }
 
   createInstanceData() {
@@ -339,4 +386,4 @@ export class FxInstance extends HTMLElement {
 
 if (!customElements.get('fx-instance')) {
   customElements.define('fx-instance', FxInstance);
-}
+}

package/src/fx-model.js

@@ -45,6 +45,127 @@ export class FxModel extends HTMLElement {
      * @type {import('./fx-bind.js').FxBind[]}
      */
     this.binds = [];
+
+    this.debugInfo = {
+      debugId: `model-${Math.random().toString(36).slice(2, 9)}`,
+      createdAt: performance.now(),
+      modelConstructCount: 0,
+      updateModelCount: 0,
+      rebuildCount: 0,
+      recalculateCount: 0,
+      revalidateCount: 0,
+      lastUpdateAt: null,
+      lastCycle: null,
+    };
+  }
+
+  getDebugInfo(options = {}) {
+    const info = {
+      ...this.debugInfo,
+      constructed: this.modelConstructed,
+      inited: this.inited,
+      instanceCount: this.instances.length,
+      modelItemCount: this.modelItems.length,
+      instances: this.instances.map(instance => instance.getDebugInfo?.()),
+      modelItems: this.modelItems.map(item => item.getDebugInfo?.()),
+    };
+
+    if (options.includeGraphs === true) {
+      info.graphs = this.getDebugGraphInfo();
+    }
+
+    return info;
+  }
+
+  getDebugGraphInfo() {
+    return {
+      computes: this.computes,
+      mainGraph: this.getDebugGraphSummary(this.mainGraph),
+      subGraph: this.getDebugGraphSummary(this.subgraph),
+    };
+  }
+
+  getDebugGraphSummary(graph) {
+    if (!graph) {
+      return null;
+    }
+
+    const nodes = Object.keys(graph.nodes || {});
+    const outgoingEdges = graph.outgoingEdges || {};
+    const incomingEdges = graph.incomingEdges || {};
+    const calculationOrder = this.getDebugGraphOrder(graph);
+
+    return {
+      nodeCount: typeof graph.size === 'function' ? graph.size() : nodes.length,
+      edgeCount: this.getDebugEdgeCount(outgoingEdges),
+      outgoingEdgeCount: this.getDebugEdgeCount(outgoingEdges),
+      incomingEdgeCount: this.getDebugEdgeCount(incomingEdges),
+      computeNodeCount: nodes.filter(node => typeof node === 'string' && node.includes(':')).length,
+      calculationOrderCount: calculationOrder.length,
+      calculationOrder: calculationOrder.map((path, index) =>
+          this.getDebugGraphNodeInfo(graph, path, index),
+      ),
+    };
+  }
+
+  getDebugGraphOrder(graph) {
+    if (!graph || typeof graph.overallOrder !== 'function') {
+      return [];
+    }
+
+    try {
+      return graph.overallOrder(false);
+    } catch (error) {
+      return [];
+    }
+  }
+
+  getDebugEdgeCount(edgeMap = {}) {
+    return Object.values(edgeMap).reduce((count, edges) => {
+      return count + (Array.isArray(edges) ? edges.length : 0);
+    }, 0);
+  }
+
+  getDebugGraphNodeInfo(graph, path, index = 0) {
+    let data = null;
+
+    try {
+      data = graph.getNodeData(path);
+    } catch (error) {
+      data = null;
+    }
+
+    const basePath =
+        typeof path === 'string' && path.includes(':')
+            ? path.substring(0, path.indexOf(':'))
+            : path;
+
+    const facet =
+        typeof path === 'string' && path.includes(':')
+            ? path.substring(path.indexOf(':') + 1)
+            : null;
+
+    const modelItem = this.getModelItem(basePath);
+
+    return {
+      index: index + 1,
+      path,
+      basePath,
+      facet,
+      isCompute: !!facet,
+      ref: modelItem?.ref || null,
+      instanceId: modelItem?.instanceId || null,
+      value: modelItem?.value,
+      dataType: data?.__jsonlens__
+          ? 'json-lens'
+          : data?.nodeType
+              ? 'xml-node'
+              : data === null || data === undefined
+                  ? null
+                  : typeof data,
+      dependencies: graph.outgoingEdges?.[path] || [],
+      dependants: graph.incomingEdges?.[path] || [],
+    };
   }
 
   /**
@@ -205,6 +326,7 @@ export class FxModel extends HTMLElement {
    */
   async modelConstruct() {
     console.info(`📌 model-construct for #${this.parentNode.id}`);
+    this.debugInfo.modelConstructCount += 1;
 
     // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
     Fore.dispatch(this, 'model-construct', { model: this });
@@ -361,7 +483,10 @@ export class FxModel extends HTMLElement {
    * update action triggering the update cycle
    */
   updateModel() {
-    // console.time('updateModel');
+    this.debugInfo.updateModelCount += 1;
+    this.debugInfo.lastUpdateAt = performance.now();
+
+    const rebuildStart = performance.now();
     this.rebuild();
     /*
         if (this.skipUpdate){
@@ -369,11 +494,21 @@ export class FxModel extends HTMLElement {
             return;
         }
 */
+    const recalculateStart = performance.now();
     this.recalculate();
+    const revalidateStart = performance.now();
     this.revalidate();
-    // console.log('updateModel finished with modelItems ', this.modelItems);
-
-    // console.timeEnd('updateModel');
+    const revalidateEnd = performance.now();
+
+    this.debugInfo.lastCycle = {
+      timestamp: revalidateEnd,
+      rebuildMs: recalculateStart - rebuildStart,
+      recalculateMs: revalidateStart - recalculateStart,
+      revalidateMs: revalidateEnd - revalidateStart,
+      totalMs: revalidateEnd - rebuildStart,
+      computes: this.computes || 0,
+      modelItemCount: this.modelItems.length,
+    };
   }
 
   /**
@@ -421,6 +556,7 @@ export class FxModel extends HTMLElement {
 
   rebuild() {
     console.log(`🔷   rebuild() '${this.fore.id}'`);
+    this.debugInfo.rebuildCount += 1;
 
     // Build a lookup for existing ModelItems so we can reuse them by path (approach A)
     const prevItems = Array.isArray(this.modelItems) ? this.modelItems : [];
@@ -459,6 +595,7 @@ export class FxModel extends HTMLElement {
    * todo: use 'changed' flag on modelItems to determine subgraph for recalculation. Flag already exists but is not used.
    */
   async recalculate() {
+    this.debugInfo.recalculateCount += 1;
     if (!this.mainGraph) {
       return;
     }
@@ -629,6 +766,36 @@ export class FxModel extends HTMLElement {
       this.computes += 1;
     }
   }
+
+  _getNativeValidity(widget) {
+    if (!widget?.validity) return true;
+
+    let nativeValid = widget.validity.valid;
+
+    // Browsers do not consistently report minlength/maxlength violations
+    // for values assigned programmatically. Fore values are often updated
+    // programmatically, so enforce these two constraints explicitly.
+    const value = widget.value ?? '';
+
+    const minlength = widget.getAttribute('minlength');
+    if (minlength !== null && value !== '') {
+      const min = Number.parseInt(minlength, 10);
+      if (!Number.isNaN(min) && value.length < min) {
+        nativeValid = false;
+      }
+    }
+
+    const maxlength = widget.getAttribute('maxlength');
+    if (maxlength !== null) {
+      const max = Number.parseInt(maxlength, 10);
+      if (!Number.isNaN(max) && value.length > max) {
+        nativeValid = false;
+      }
+    }
+
+    return nativeValid;
+  }
+
   /**
    * Iterates all modelItems to calculate the validation status.
    *
@@ -646,6 +813,7 @@ export class FxModel extends HTMLElement {
    *
    */
   revalidate() {
+    this.debugInfo.revalidateCount += 1;
     if (this.modelItems.length === 0) return true;
 
     console.log(`🔷🔷🔷 revalidate() '${this.fore.id}'`);
@@ -706,6 +874,22 @@ export class FxModel extends HTMLElement {
         }
       }
     });
+    // Native browser constraint validation — read ValidityState without side-effects.
+    // widget.validity.valid is a live property; no events are fired (unlike checkValidity()).
+    // Use querySelector instead of getWidget() to avoid DOM mutation (getWidget creates a
+    // fallback input if none exists).
+    this.fore.querySelectorAll('fx-control').forEach(control => {
+      if (!control.modelItem) return;
+      const widget = control.querySelector('.widget, input');
+      if (!widget?.validity) return;
+      const nativeValid = this._getNativeValidity(widget);
+      if (control.modelItem.nativeValid !== nativeValid) {
+        control.modelItem.nativeValid = nativeValid;
+        control.modelItem.notify();
+      }
+      if (!nativeValid) valid = false;
+    });
+
     console.log('modelItems after revalidate: ', this.modelItems);
     console.log('changed after revalidate: ', this.changed);
     console.log(
@@ -848,6 +1032,7 @@ export class FxModel extends HTMLElement {
     const result = this.instances[0].evalXPath(bindingExpr);
     return result;
   }
+
 }
 
 if (!customElements.get('fx-model')) {

package/src/fx-submission.js

@@ -70,6 +70,35 @@ export class FxSubmission extends ForeElementMixin {
     this.shadowRoot.innerHTML = this.renderHTML();
   }
 
+  getDebugInfo() {
+    return {
+      localName: this.localName,
+      id: this.id || null,
+
+      method: this.getAttribute('method') || null,
+      url: this.getAttribute('url') || null,
+      action: this.getAttribute('action') || null,
+      resource: this.getAttribute('resource') || null,
+
+      ref: this.getAttribute('ref') || null,
+      instance: this.getAttribute('instance') || null,
+      targetref: this.getAttribute('targetref') || null,
+      target: this.getAttribute('target') || null,
+
+      replace: this.getAttribute('replace') || null,
+      mediatype: this.getAttribute('mediatype') || null,
+      encoding: this.getAttribute('encoding') || null,
+      serialization: this.getAttribute('serialization') || null,
+
+      validate: this.getAttribute('validate') || null,
+      relevant: this.getAttribute('relevant') || null,
+
+      hasResponse: Boolean(this.response),
+      responseStatus: this.response?.status || null,
+      responseStatusText: this.response?.statusText || null,
+    };
+  }
+
   // eslint-disable-next-line class-methods-use-this
   renderHTML() {
     return `

package/src/modelitem.js

@@ -44,6 +44,7 @@ export class ModelItem {
     this.instanceId = instance;
     this.fore = fore;
     this.changed = false;
+    this.nativeValid = true;
 
     // console.log('[ModelItem] created:', this.path);
 
@@ -64,6 +65,39 @@ export class ModelItem {
     this.state = {}; // evaluated expression results
   }
 
+  getDebugInfo() {
+    return {
+      path: this.path,
+      ref: this.ref,
+      instanceId: this.instanceId,
+      type: this.type,
+
+      value: this.value,
+
+      facets: {
+        readonly: this.readonly,
+        relevant: this.relevant,
+        required: this.required,
+        constraint: this.constraint,
+        changed: this.changed,
+      },
+
+      backing: this.lens
+          ? 'json-lens'
+          : this.node
+              ? 'xml-node'
+              : 'unknown',
+
+      observerCount: this.observers?.size || 0,
+      boundControlCount: this.boundControls?.length || 0,
+      dependencyCount: this.dependencies?.size || 0,
+      alertCount: this.alerts?.length || 0,
+
+      stateExpressions: this.stateExpressions,
+      state: this.state,
+    };
+  }
+
   get value() {
     if (this.lens) return this.lens.get();
     if (!this.node) return null;
@@ -278,4 +312,5 @@ export class ModelItem {
 
     return [];
   }
+
 }

package/src/ui/abstract-control.js

@@ -343,7 +343,8 @@ export default class AbstractControl extends UIElement {
     const hasValue = this.modelItem.value !== '';
     const isRequired = this.modelItem.required;
     const isValidAccordingToRequired = isRequired ? hasValue : true;
-    const isValidNow = this.modelItem.constraint && isValidAccordingToRequired;
+    const nativeValid = this.modelItem.nativeValid !== false;
+    const isValidNow = this.modelItem.constraint && isValidAccordingToRequired && nativeValid;
 
     if (this.isValid() !== isValidNow) {
       if (isValidNow) {

package/src/ui/fx-control.js

@@ -1,3 +1,4 @@
+import { createTypedValueFactory, domFacade as fontoDomFacade } from 'fontoxpath';
 import XfAbstractControl from './abstract-control.js';
 import {
   evaluateXPath,
@@ -10,8 +11,10 @@ import { debounce } from '../events.js';
 import { FxModel } from '../fx-model.js';
 import { DependencyNotifyingDomFacade } from '../DependencyNotifyingDomFacade';
 import { extractPredicateDependencies } from '../extract-predicate-deps.js';
+import '../fx-instance.js';
 
 const WIDGETCLASS = 'widget';
+const typedValueFactory = createTypedValueFactory('item()*');
 
 /**
  * `fx-control`
@@ -568,12 +571,13 @@ export default class FxControl extends XfAbstractControl {
     try {
       this._isRefreshing = true;
       // console.log('🔄 fx-control refresh', this);
-      super.refresh(force);
+      await super.refresh(force);
       // console.log('refresh template', this.template);
       // const {widget} = this;
 
       // ### if we find a ref on control we have a 'select' control of some kind
       const widget = this.getWidget();
+      await this._loadDataSrc(widget);
       this._handleBoundWidget(widget, force);
       this._handleDataAttributeBinding();
     } finally {
@@ -582,6 +586,94 @@ export default class FxControl extends XfAbstractControl {
     await Fore.refreshChildren(this, force);
   }
 
+  /**
+   * Finds (or lazily creates) the anonymous `<fx-instance>` backing a
+   * `data-src` lookup document for the given URL, deduped per-model by URL.
+   *
+   * The created instance has no `id`, so it stays invisible to the global
+   * `$default`/`$<id>` variable mechanism. It is appended as the last child
+   * of the model, so it is never mistaken for the first/default instance
+   * (which assumes the model already declares its own default instance).
+   *
+   * @param {string} url
+   * @param {string|null} type
+   * @returns {import('../fx-instance.js').FxInstance}
+   * @private
+   */
+  _ensureDataSrcInstance(url, type) {
+    const model = this.getModel();
+    let instEl = Array.from(model.children).find(
+      el => el.localName === 'fx-instance' && el.getAttribute('data-src') === url,
+    );
+
+    if (!instEl) {
+      instEl = document.createElement('fx-instance');
+      instEl.setAttribute('data-src', url);
+      instEl.setAttribute('src', url);
+      if (type) {
+        instEl.setAttribute('type', type);
+      }
+      model.appendChild(instEl);
+      instEl._loadPromise = instEl.init();
+    }
+    return instEl;
+  }
+
+  /**
+   * Implements the `data-src` lookup-list shortcut: if the bound widget
+   * declares `data-src="<url>"`, lazily loads that document via an anonymous
+   * `<fx-instance>` and binds its root element as a control-local XPath
+   * variable (`$src` by default, or `$<data-id>`), available to this
+   * control's own `ref` and template expressions.
+   *
+   * @param {HTMLElement} widget
+   * @private
+   */
+  async _loadDataSrc(widget) {
+    const url = widget.getAttribute && widget.getAttribute('data-src');
+    if (!url) return;
+
+    const varName = widget.getAttribute('data-id') || 'src';
+
+    if (this._dataSrcUrl === url) return;
+    this._dataSrcUrl = url;
+
+    // ### bind to an empty sequence until loaded so `ref` evaluation doesn't
+    // throw on the not-yet-bound variable; `_handleBoundWidget` bails out
+    // gracefully on an empty nodeset.
+    this.inScopeVariables.set(varName, typedValueFactory([], fontoDomFacade));
+
+    const instEl = this._ensureDataSrcInstance(url, widget.getAttribute('data-type'));
+
+    try {
+      await (instEl._loadPromise ?? Promise.resolve());
+
+      // ### derive the xpath default namespace for `$src`/`$<data-id>` once per
+      // anonymous instance: an explicit `data-xpath-ns` override wins, otherwise
+      // fall back to the namespace the loaded document declares on its root element.
+      if (!instEl.hasAttribute('xpath-default-namespace')) {
+        const override = widget.getAttribute('data-xpath-ns');
+        const root = instEl.getDefaultContext();
+        const ns = override || (root && root.namespaceURI);
+        if (ns) {
+          instEl.setAttribute('xpath-default-namespace', ns);
+        }
+      }
+
+      this.inScopeVariables.set(
+        varName,
+        typedValueFactory([instEl.getDefaultContext()], fontoDomFacade),
+      );
+      this.refresh(true);
+    } catch (error) {
+      Fore.dispatch(this, 'error', {
+        origin: this,
+        message: `control couldn't load data-src '${url}'`,
+        level: 'Error',
+      });
+    }
+  }
+
   /**
    * handle non-Fore elements like 'select' and 'datalist' which have a 'data-ref' attribute
    * @private

package/src/ui/fx-items.js

@@ -56,8 +56,8 @@ export class FxItems extends FxControl {
     });
 
     this.addEventListener('click', e => {
-      e.preventDefault; // keep as-is (do not change behavior here)
-      e.stopPropagation();
+      // e.preventDefault(); // keep as-is (do not change behavior here)
+      // e.stopPropagation();
       const items = this.querySelectorAll('[value]');
 
       let val = '';
@@ -86,7 +86,7 @@ export class FxItems extends FxControl {
   }
 
   async refresh(force = false) {
-    super.refresh(force);
+    await super.refresh(force);
     // console.log('fx-items.refresh() called');
   }
 

package/src/xpath-evaluation.js

@@ -741,6 +741,41 @@ function findInstanceReferences(xpathQuery) {
   return instanceReferences;
 }
 
+/**
+ * Finds the anonymous `<fx-instance data-src="...">` (created by
+ * `fx-control._ensureDataSrcInstance`) backing a `$src`/`$<data-id>` variable
+ * referenced in `xpathQuery`, if any. Used so the namespace resolver can pick up
+ * that instance's `xpath-default-namespace` instead of inheriting it from the
+ * form's default instance.
+ */
+function findDataSrcInstance(xpathQuery, formElement) {
+  if (!formElement || typeof formElement.querySelectorAll !== 'function') return null;
+
+  const varNames = [...xpathQuery.matchAll(/\$([A-Za-z_][\w.-]*)/g)].map(m => m[1]);
+  if (varNames.length === 0) return null;
+
+  const widgets = Array.from(formElement.querySelectorAll('[data-src]')).filter(
+    widget => widget.closest('fx-control') === formElement,
+  );
+  if (widgets.length === 0) return null;
+
+  const model = typeof formElement.getModel === 'function' ? formElement.getModel() : null;
+  if (!model) return null;
+
+  for (const varName of varNames) {
+    const widget = widgets.find(w => (w.getAttribute('data-id') || 'src') === varName);
+    if (!widget) continue;
+
+    const url = widget.getAttribute('data-src');
+    const instance = Array.from(model.children).find(
+      el => el.localName === 'fx-instance' && el.getAttribute('data-src') === url,
+    );
+    if (instance) return instance;
+  }
+
+  return null;
+}
+
 function getCachedNamespaceResolver(xpath, node) {
   if (!createdNamespaceResolversByXPathQueryAndNode.has(xpath)) return null;
   return createdNamespaceResolversByXPathQueryAndNode.get(xpath).get(node) || null;
@@ -776,6 +811,14 @@ export function createNamespaceResolver(xpathQuery, formElement) {
   };
 
   if (instanceReferences.length === 0) {
+    const dataSrcInstance = findDataSrcInstance(xpathQuery, formElement);
+    if (dataSrcInstance && dataSrcInstance.hasAttribute('xpath-default-namespace')) {
+      const xpathDefaultNamespace = dataSrcInstance.getAttribute('xpath-default-namespace');
+      const resolveNamespacePrefix = prefix => (!prefix ? xpathDefaultNamespace : undefined);
+      setCachedNamespaceResolver(xpathQuery, formElement, resolveNamespacePrefix);
+      return resolveNamespacePrefix;
+    }
+
     const ancestorComponent = closestRefExcludingSelf(formElement);
 
     if (ancestorComponent && ancestorComponent !== formElement) {