@jinntec/fore 3.2.1 → 3.3.1

package/src/fx-fore.js

@@ -102,6 +102,7 @@ export class FxFore extends HTMLElement {
       },
       /**
        * merge-partial
+       * @deprecated
        */
       mergePartial: {
         type: Boolean,
@@ -346,15 +347,92 @@ export class FxFore extends HTMLElement {
     this.initialRun = true;
     this._scanForNewTemplateExpressionsNextRefresh = false;
     this.repeatsFromAttributesCreated = false;
+/*
     this.validateOn = this.hasAttribute('validate-on')
       ? this.getAttribute('validate-on')
       : 'update';
+*/
     // this.mergePartial = this.hasAttribute('merge-partial')? true:false;
     this.mergePartial = false;
     this.createNodes = this.hasAttribute('create-nodes') ? true : false;
     this._localNamesWithChanges = new Set();
     this.setAttribute('role', 'form'); // set aria role
     this._pendingRefresh = false;
+
+    this.debugInfo = {
+      id: this.id || null,
+      debugId: crypto.randomUUID ? crypto.randomUUID() : `fore-${Date.now()}`,
+      createdAt: performance.now(),
+      readyAt: null,
+      modelConstructStartedAt: null,
+      modelConstructDoneAt: null,
+      refreshCount: 0,
+      lastRefreshAt: null,
+      lastRefreshForce: null,
+      lastRefresh: null,
+    };
+  }
+
+  getDebugInfo() {
+    return {
+      ...this.debugInfo,
+      id: this.id || null,
+      ready: this.ready,
+      lazyRefresh: this.lazyRefresh,
+      createNodes: this.createNodes,
+
+      initOn: this.getAttribute('init-on') || null,
+      initOnTarget: this.getAttribute('init-on-target') || null,
+      ignoreExpressions: this.getAttribute('ignore-expressions') || null,
+
+      model: this.model?.getDebugInfo?.() || null,
+    };
+  }
+
+  getDebugSnapshot(options = {}) {
+    const model = this.model;
+
+    const debugRefElements = Array.from(this.querySelectorAll('[ref]'))
+        .filter(element => typeof element.getDebugInfo === 'function');
+
+    const bindingElements = debugRefElements
+        .filter(element => element.localName === 'fx-bind');
+
+    const boundElementNames = new Set([
+      'fx-control',
+      'fx-output',
+      'fx-upload',
+      'fx-group',
+      'fx-repeat',
+      'fx-switch',
+    ]);
+
+    const boundUiElements = debugRefElements
+        .filter(element => boundElementNames.has(element.localName));
+
+    const bindings = bindingElements.map(element => element.getDebugInfo());
+
+    const boundElements = boundUiElements.map(element => element.getDebugInfo());
+
+    const submissions = Array.from(this.querySelectorAll('fx-submission'))
+        .filter(element => typeof element.getDebugInfo === 'function')
+        .map(element => element.getDebugInfo());
+
+    return {
+      fore: this.getDebugInfo?.() || null,
+
+      model:
+          model?.getDebugInfo?.({
+            includeGraphs: options.includeGraphs === true,
+          }) || null,
+
+      instances: model?.instances?.map(instance => instance.getDebugInfo?.()) || [],
+      modelItems: model?.modelItems?.map(item => item.getDebugInfo?.()) || [],
+
+      bindings,
+      boundElements,
+      submissions
+    };
   }
 
   /**
@@ -638,7 +716,10 @@ export class FxFore extends HTMLElement {
       const libs = Array.from(this.querySelectorAll('fx-functionlib'));
       await Promise.all(libs.map(l => l.readyPromise || Promise.resolve()));
 
+      this.debugInfo.modelConstructStartedAt = performance.now();
       await modelElement.modelConstruct();
+      this.debugInfo.modelConstructDoneAt = performance.now();
+
       console.log('varbindings ', this._instanceVarBindings);
       this._handleModelConstructDone();
     }
@@ -713,9 +794,8 @@ export class FxFore extends HTMLElement {
               // e.stopImmediatePropagation();
             },true);
         */
-    this.ignoreExpressions = this.hasAttribute('ignore-expressions')
-      ? this.getAttribute('ignore-expressions')
-      : null;
+    const userIgnore = this.getAttribute('ignore-expressions');
+    this.ignoreExpressions = userIgnore ? `[pattern], ${userIgnore}` : '[pattern]';
 
     this.lazyRefresh = this.hasAttribute('refresh-on-view');
     if (this.lazyRefresh) {
@@ -956,6 +1036,11 @@ export class FxFore extends HTMLElement {
   async refresh(force) {
     // If we're already refreshing, do NOT drop the request.
     // Queue a hard refresh and return a promise that resolves when the next refresh finishes.
+
+    this.debugInfo.refreshCount += 1;
+    this.debugInfo.lastRefreshAt = performance.now();
+    this.debugInfo.lastRefreshForce = !!force;
+
     if (this.isRefreshing) {
       // keep "strongest" request: any true means hard refresh
       this._pendingRefresh = this._pendingRefresh || force === true;
@@ -968,8 +1053,12 @@ export class FxFore extends HTMLElement {
     this.isRefreshing = true;
     this.isRefreshPhase = true;
 
+    const refreshStart = performance.now();
+    const isFullRefresh = force === true || this.initialRun;
+    const batchedCount = this.batchedNotifications.size;
+
     try {
-      if (force === true || this.initialRun) {
+      if (isFullRefresh) {
         performance.mark('force-refresh-start');
         console.log('🔄 🔴🔴🔴 ### full refresh() on ', this);
         await Fore.refreshChildren(this, force);
@@ -996,6 +1085,15 @@ export class FxFore extends HTMLElement {
         this.getModel().modelItems,
       );
 
+      // Record timing before dispatching 'refresh-done' since listeners (eg. fx-debugger)
+      // may synchronously read this.debugInfo.lastRefresh in response to the event.
+      this.debugInfo.lastRefresh = {
+        timestamp: performance.now(),
+        kind: isFullRefresh ? 'full' : 'partial',
+        durationMs: performance.now() - refreshStart,
+        batchedCount,
+      };
+
       Fore.dispatch(this, 'refresh-done', {});
 
       const subFores = Array.from(this.querySelectorAll('fx-fore'));
@@ -1029,59 +1127,63 @@ export class FxFore extends HTMLElement {
   }
 
   /**
-   * Process all batched notifications at the end of the refresh phase
+   * Process all batched notifications at the end of the refresh phase.
+   * Async so that all control refresh() calls (which are themselves async) are awaited
+   * before refresh-done fires — prevents _isRefreshing from being true when the
+   * next user input event arrives.
    */
-  _processBatchedNotifications() {
+  async _processBatchedNotifications() {
     if (this.batchedNotifications.size > 0) {
       console.log(`🔄 🎯  ### processing ${this.batchedNotifications.size} batched notifications`);
       console.log('🔄 🎯  ### processing ', Array.from(this.batchedNotifications));
 
-      // console.log(`🔍 Processing ${this.batchedNotifications.size} batched notifications`);
+      const refreshPromises = [];
 
-      // Process all batched notifications
+      // Process all batched notifications.
+      // Note: Set.forEach visits items added during iteration (they are appended to the end),
+      // so controls added via observer.update() (which calls addToBatchedNotifications) are
+      // also visited and their refresh() promises collected.
       this.batchedNotifications.forEach(entry => {
-        // console.log('batched update', entry);
-        // handle repeatitems created via data-ref
         if (entry.classList && entry.classList.contains('fx-repeatitem')) {
-          Fore.refreshChildren(entry, true);
+          refreshPromises.push(Fore.refreshChildren(entry, true));
         }
         if (entry && typeof entry.refresh === 'function') {
-          // Entry is a Ui Element
-          // Force refresh for this whole subtree
           const uiElement = /** @type {import('./ui/UIElement.js').UIElement} */ (entry);
           if (!uiElement.ownerDocument.contains(uiElement)) {
-            // Something already removed this ui element. Skip.
             return;
           }
-          uiElement.refresh(true);
+          refreshPromises.push(uiElement.refresh(true));
         }
         const nonrelevant = Array.from(this.querySelectorAll('[nonrelevant]'));
-        // loop nonrelevant elements
         if (nonrelevant) {
-          nonrelevant.forEach(entry => {
-            if (entry.refresh) {
-              entry.refresh();
+          nonrelevant.forEach(el => {
+            if (el.refresh) {
+              refreshPromises.push(el.refresh());
             }
           });
         }
         if (entry.observers) {
-          // Item is a model item
           entry.observers.forEach(observer => {
-            // console.log('🔍 processing observer', observer);
             if (typeof observer.update === 'function') {
-              // console.log('updating observer', observer);
               observer.update(entry);
             }
           });
         }
       });
 
-      // Update template expressions after processing batched notifications
-      // This ensures template expressions are re-evaluated when data changes
       this._processTemplateExpressions();
-
-      // Clear the batch
       this.batchedNotifications.clear();
+
+      if (refreshPromises.length > 0) {
+        await Promise.all(refreshPromises);
+      }
+
+      // Items added to batchedNotifications during the async Promise.all phase
+      // (e.g. by a second event listener that fired after the batch was cleared)
+      // are picked up here so they aren't lost.
+      if (this.batchedNotifications.size > 0) {
+        await this._processBatchedNotifications();
+      }
     }
   }
 
@@ -1241,10 +1343,8 @@ export class FxFore extends HTMLElement {
   } // eslint-disable-next-line class-methods-use-this
   _getTemplateExpression(node) {
     if (this.ignoredNodes) {
-      if (node.nodeType === Node.ATTRIBUTE_NODE) {
-        node = node.ownerElement;
-      }
-      const found = this.ignoredNodes.find(n => n.contains(node));
+      const checkNode = node.nodeType === Node.ATTRIBUTE_NODE ? node.ownerElement : node;
+      const found = this.ignoredNodes.find(n => n.contains(checkNode));
       if (found) return null;
     }
     if (node.nodeType === Node.ATTRIBUTE_NODE) {
@@ -1263,6 +1363,7 @@ export class FxFore extends HTMLElement {
    * @private
    */
   _handleModelConstructDone() {
+    this.debugInfo.modelConstructDoneAt = performance.now();
     if (this.showConfirmation) {
       window.addEventListener('beforeunload', event => {
         if (this.dirtyState === dirtyStates.DIRTY) {
@@ -1429,6 +1530,7 @@ export class FxFore extends HTMLElement {
     // console.log(`### <<<<< ${this.id} ready >>>>>`);
 
     Fore.dispatch(this, 'ready', {});
+    this.debugInfo.readyAt = performance.now();
     // console.log('dataChanged', FxModel.dataChanged);
     this.markAsClean();
 

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 });
@@ -284,6 +406,7 @@ export class FxModel extends HTMLElement {
       // Tabula rasa for computed facets; keep identity (boundControls/observers)
       mi.readonly = ModelItem.READONLY_DEFAULT;
       mi.relevant = ModelItem.RELEVANT_DEFAULT;
+      mi._parentModelItem = undefined;
       mi.required = ModelItem.REQUIRED_DEFAULT;
       mi.constraint = ModelItem.CONSTRAINT_DEFAULT;
       mi.type = ModelItem.TYPE_DEFAULT;
@@ -361,7 +484,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 +495,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 +557,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 +596,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 +767,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 +814,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 +875,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 +1033,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 `