@jinntec/fore 3.2.0 → 3.3.0

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-include.js

@@ -1,4 +1,5 @@
 import { Fore } from '../fore.js';
+import { FxFore } from '../fx-fore.js';
 
 /**
  * <fx-include>
@@ -50,13 +51,30 @@ export class FxInclude extends HTMLElement {
     this.reload = this.hasAttribute('reload');
 
     if (this.immediate) {
-      queueMicrotask(() => this.include());
+      this._includeWhenReady();
       return;
     }
 
     this._bindListener();
   }
 
+  /**
+   * Includes content immediately, but waits until the closest `fx-fore` has
+   * finished its initial Rebuild/Recalculate/Revalidate/Refresh cycle (i.e. is
+   * "ready"), so the included content can resolve binding context against an
+   * already-initialized ancestor chain.
+   */
+  _includeWhenReady() {
+    const fore = this.closest('fx-fore');
+
+    if (!fore) {
+      queueMicrotask(() => this.include());
+      return;
+    }
+
+    FxFore.waitUntilReady(fore).then(() => this.include());
+  }
+
   disconnectedCallback() {
     this._unbindListener();
   }
@@ -182,12 +200,20 @@ export class FxInclude extends HTMLElement {
       return fragment;
     }
 
-    const template = parsed.querySelector('template');
+    const template = parsed.body.querySelector(':scope > template');
 
     if (template) {
       return document.importNode(template.content, true);
     }
 
+    const rootElements = Array.from(parsed.body.children);
+
+    if (rootElements.length === 1) {
+      const fragment = document.createDocumentFragment();
+      fragment.appendChild(document.importNode(rootElements[0], true));
+      return fragment;
+    }
+
     const fragment = document.createDocumentFragment();
 
     Array.from(parsed.body.childNodes).forEach(node => {
@@ -234,6 +260,12 @@ export class FxInclude extends HTMLElement {
 
   async _initializeInsertedContent(startElement) {
     this._initForeUiDescendants(startElement);
+
+    const fore = startElement.closest('fx-fore');
+    if (fore?.createNodes && typeof fore.initData === 'function') {
+      fore.initData(startElement);
+    }
+
     await Fore.refreshChildren(startElement, true);
   }
 

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) {