@jinntec/fore 2.9.0 → 3.0.1

package/src/fx-instance.js

@@ -1,36 +1,27 @@
 import { Fore } from './fore.js';
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
+import { wrapJson } from './json/JSONNode.js';
+import { JSONDomFacade } from './json/JSONDomFacade.js';
 
 async function handleResponse(fxInstance, response) {
   const { status } = response;
   if (status >= 400) {
-    // console.log('response status', status);
     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();
-  // console.log('********** responseContentType *********', responseContentType);
+
   if (responseContentType.startsWith('text/html')) {
-    // const htmlResponse = response.text();
-    // return new DOMParser().parseFromString(htmlResponse, 'text/html');
-    // return response.text();
-    return response.text().then(result =>
-      // console.log('xml ********', result);
-      new DOMParser().parseFromString(result, 'text/html'),
-    );
+    return response.text().then(result => new DOMParser().parseFromString(result, 'text/html'));
   }
   if (responseContentType.endsWith('/json') || responseContentType.endsWith('+json')) {
-    // console.log("********** inside res json *********");
     return response.json();
   }
   if (responseContentType.endsWith('/xml') || responseContentType.endsWith('+xml')) {
-    // See https://www.rfc-editor.org/rfc/rfc7303
     const text = await response.text();
-    // console.log('xml ********', result);
     return new DOMParser().parseFromString(text, 'application/xml');
   }
   if (responseContentType.startsWith('text/')) {
-    // console.log("********** inside  res plain *********");
     return response.text();
   }
 
@@ -39,35 +30,69 @@ async function handleResponse(fxInstance, response) {
 
 /**
  * Container for data instances.
- *
- * Offers several ways of loading data from either inline content or via 'src' attribute which will use the fetch
- * API to resolve data.
  */
 export class FxInstance extends HTMLElement {
   constructor() {
     super();
     this.model = this.parentNode;
     this.attachShadow({ mode: 'open' });
+
     this.originalInstance = null;
     this.partialInstance = null;
     this.credentials = '';
+
+    // IMPORTANT: keep backing store private so setter can intercept updates
+    this._instanceData = null;
+
+    // Lens nodeset for JSON, DOM Document for XML
+    this.nodeset = null;
+
+    // JSON facade (only relevant for JSON instances)
+    this.domFacade = null;
   }
 
   connectedCallback() {
-    // console.log('connectedCallback ', this);
     if (this.hasAttribute('src')) {
       this.src = this.getAttribute('src');
     }
 
-    if (this.hasAttribute('id')) {
-      this.id = this.getAttribute('id');
+    // Default instance selection is positional:
+    // The first <fx-instance> child (doc order) of the owning <fx-model> is the default instance.
+    // 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
+        : null;
+
+    const explicitId = (this.getAttribute('id') || '').trim();
+
+    let isFirstInModel = false;
+    if (parentModel) {
+      const instances = Array.from(parentModel.children).filter(
+        el => el && el.nodeType === Node.ELEMENT_NODE && el.localName === 'fx-instance',
+      );
+      isFirstInModel = instances.length > 0 && instances[0] === this;
     } else {
-      this.id = 'default';
+      // Standalone <fx-instance> in tests/fixtures: treat as default.
+      isFirstInModel = true;
     }
 
-    this.credentials = this.hasAttribute('credentials')
-      ? this.getAttribute('credentials')
-      : 'same-origin';
+    if (isFirstInModel) {
+      // First instance defines the default instance
+      const effectiveId = explicitId || 'default';
+      this.instanceId = effectiveId;
+      // For backwards compatibility/tests, reflect as DOM id.
+      this.id = effectiveId;
+    } else {
+      // Non-first instances are only addressable by id if explicitly provided.
+      this.instanceId = explicitId || '';
+      if (explicitId) {
+        this.id = explicitId;
+      }
+    }
+
+    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}'`,
@@ -81,37 +106,51 @@ export class FxInstance extends HTMLElement {
       this.type = 'xml';
       this.setAttribute('type', this.type);
     }
+
     const style = `
-            :host {
-                display: none;
-            }
-            :host * {
-                display:none;
-            }
-            ::slotted(*){
-                display:none;
-            }
-        `;
-
-    const html = `
-        `;
-    this.shadowRoot.innerHTML = `
-            <style>
-                ${style}
-            </style>
-            ${html}
-        `;
+      :host { display: none; }
+      :host * { display:none; }
+      ::slotted(*){ display:none; }
+    `;
+
+    this.shadowRoot.innerHTML = `<style>${style}</style>`;
     this.partialInstance = {};
   }
 
+  /**
+   * Logical Fore instance identifier (NOT the HTML id).
+   * Prefer `instanceId` internally.
+   */
+  get foreId() {
+    return this.instanceId || (this.hasAttribute('id') ? this.getAttribute('id') : 'default');
+  }
+
+  /**
+   * IMPORTANT: canonical accessor for instance data.
+   * Any code that assigns `instance.instanceData = ...` will now rebuild nodeset correctly.
+   */
+  get instanceData() {
+    return this._instanceData;
+  }
+
+  set instanceData(data) {
+    if (!data) {
+      this.createInstanceData();
+      return;
+    }
+
+    // Route ALL updates through _setInitialData so nodeset + originalInstance stay consistent
+    this._setInitialData(data);
+
+    // Signal structure mutation (used by fx-fore for refresh decisions)
+    this.dispatchEvent(new CustomEvent('path-mutated', { bubbles: true, composed: true }));
+  }
+
   /**
    * Is called by fx-model during initialization phase (model-construct)
-   * @returns {Promise<void>}
    */
   async init() {
-    // console.log('fx-instance init');
     await this._initInstance();
-    // console.log(`### <<<<< instance ${this.id} loaded >>>>> `);
     this.dispatchEvent(
       new CustomEvent('instance-loaded', {
         composed: true,
@@ -123,8 +162,15 @@ export class FxInstance extends HTMLElement {
   }
 
   reset() {
-    // this._useInlineData();
-    this.instanceData = this.originalInstance.cloneNode(true);
+    // use the setter so nodeset is rebuilt for JSON too
+    if (this.originalInstance && this.type === 'xml') {
+      this.instanceData = this.originalInstance.cloneNode(true);
+    } else if (this.originalInstance && this.type === 'json') {
+      this.instanceData = structuredClone(this.originalInstance);
+    } else {
+      // fallback
+      this.instanceData = this.originalInstance;
+    }
   }
 
   evalXPath(xpath) {
@@ -135,8 +181,6 @@ export class FxInstance extends HTMLElement {
 
   /**
    * returns the current instance data
-   *
-   * @returns {Document | T | any}
    */
   getInstanceData() {
     if (!this.instanceData) {
@@ -145,44 +189,27 @@ export class FxInstance extends HTMLElement {
     return this.instanceData;
   }
 
+  /**
+   * legacy setter API: keep it, but forward to instanceData setter
+   */
   setInstanceData(data) {
-    if (!data) {
-      this.createInstanceData();
-      return;
-    }
-    this._setInitialData(data);
-    // this.instanceData = data;
+    this.instanceData = data;
   }
 
   /**
-   * return the default context (root node of respective instance) for XPath evalution.
-   *
-   * @returns {Document|T|any|Element}
+   * return the default context (root node of respective instance) for XPath evaluation.
    */
   getDefaultContext() {
-    // Note: use the getter here: it might provide us with stubbed data if anything async is racing,
-    // such as an @src attribute
     const instanceData = this.getInstanceData();
-    if (this.type === 'xml'  || this.type === 'html') {
-      return instanceData.firstElementChild;
+    if (this.type === 'xml' || this.type === 'html') {
+      return instanceData?.firstElementChild;
     }
-    return this.instanceData;
+    // JSON: use wrapped tree as context item
+    return this.nodeset;
   }
 
-  /**
-   * does the actual loading of data. Handles inline data, data loaded via fetch() or data constructed from
-   * querystring.
-   *
-   * @returns {Promise<void>}
-   * @private
-   */
   async _initInstance() {
     if (this.src === '#querystring') {
-      /*
-       * generate XML data from URL querystring
-       * todo: there's no variant to generate JSON yet
-       */
-      // eslint-disable-next-line no-restricted-globals
       const query = new URLSearchParams(location.search);
       const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
       const root = doc.firstElementChild;
@@ -201,19 +228,23 @@ export class FxInstance extends HTMLElement {
 
   createInstanceData() {
     if (this.type === 'xml') {
-      // const doc = new DOMParser().parseFromString('<data data-id="default"></data>', 'application/xml');
       const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
-      this.instanceData = doc;
-      this.originalInstance = this.instanceData.cloneNode(true);
+      this._instanceData = doc;
+      this.originalInstance = doc.cloneNode(true);
+      this.nodeset = doc;
+      return;
     }
     if (this.type === 'json') {
-      this.instanceData = {};
-      this.originalInstance = { ...this.instanceData };
+      this._instanceData = {};
+      this.originalInstance = { ...this._instanceData };
+      this.nodeset = wrapJson(this._instanceData, null, null, this.foreId);
+      this.domFacade = new JSONDomFacade();
+      return;
     }
     if (this.type === 'text') {
-      this.instanceData = this.innerText;
+      this._instanceData = this.innerText;
       this.originalInstance = this.innerText;
-      console.log('text data', this.instanceData);
+      this.nodeset = null;
     }
   }
 
@@ -224,8 +255,7 @@ export class FxInstance extends HTMLElement {
       const key = url.substring(url.indexOf(':') + 1);
 
       const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
-      this.instanceData = doc;
-      // ### does it make sense to store originalData here?
+      this._instanceData = doc;
 
       if (!key) {
         console.warn('no key specified for localStore');
@@ -239,10 +269,12 @@ export class FxInstance extends HTMLElement {
         return;
       }
       const data = new DOMParser().parseFromString(serialized, 'application/xml');
-      // let data = this._parse(serialized, instance);
       doc.firstElementChild.replaceWith(data.firstElementChild);
+      // IMPORTANT: keep nodeset consistent
+      this._setInitialData(doc);
       return;
     }
+
     const contentType = Fore.getContentType(this, 'get');
 
     try {
@@ -250,91 +282,55 @@ export class FxInstance extends HTMLElement {
         method: 'GET',
         credentials: this.credentials,
         mode: 'cors',
-        headers: {
-          'Content-Type': contentType,
-        },
+        headers: { 'Content-Type': contentType },
       });
       const data = await handleResponse(this, response);
       this._setInitialData(data);
-      /*
-      if (data.nodeType) {
-        this._setInitialData(data);
-        this.instanceData = data;
-        this.originalInstance = this.instanceData.cloneNode(true);
-        console.log('instanceData loaded: ', this.id, this.instanceData);
-        return;
-      }
-      this.instanceData = data;
-      this.originalInstance = [...data];
-*/
     } catch (error) {
       throw new Error(`failed loading data ${error}`);
     }
   }
 
   _setInitialData(data) {
-    this.instanceData = data;
-    if (data.nodeType) {
-      this.originalInstance = this.instanceData.cloneNode(true);
-    } else {
-      this.originalInstance = { ...this.instanceData };
-    }
-  }
+    // IMPORTANT: always store in backing field so getter/setter stays consistent
+    this._instanceData = data;
 
-  _getContentType() {
-    if (this.type === 'xml') {
-      return 'application/xml';
+    if (data?.nodeType) {
+      // XML/HTML instance
+      this.originalInstance = this._instanceData.cloneNode(true);
+      this.nodeset = this._instanceData;
+      // domFacade irrelevant
+      return;
     }
+
     if (this.type === 'json') {
-      return 'application/json';
+      // JSON instance
+      this.originalInstance = structuredClone(this._instanceData);
+      this.nodeset = wrapJson(this._instanceData, null, null, this.foreId);
+      if (!this.domFacade) this.domFacade = new JSONDomFacade();
+      return;
     }
-    console.warn('content-type unknown ', this.type);
-    return null;
+
+    // text (or unknown)
+    this.nodeset = null;
   }
 
   _useInlineData() {
     if (this.type === 'xml') {
-      // console.log('innerHTML ', this.innerHTML);
       const instanceData = new DOMParser().parseFromString(this.innerHTML, 'application/xml');
-
-      // console.log('fx-instance init id:', this.id);
-      // this.instanceData = instanceData;
       this._setInitialData(instanceData);
-      // console.log('instanceData ', this.instanceData);
-      // console.log('instanceData ', this.instanceData.firstElementChild);
-
-      // console.log('fx-instance data: ', this.instanceData);
-      // this.instanceData.firstElementChild.setAttribute('id', this.id);
-      // todo: move innerHTML out to shadowDOM (for later reset)
     } else if (this.type === 'json') {
-      // this.instanceData = JSON.parse(this.textContent);
       this._setInitialData(JSON.parse(this.textContent));
     } else if (this.type === 'html') {
-      // this.instanceData = this.firstElementChild.children;
       this._setInitialData(this.firstElementChild.children);
     } else if (this.type === 'text') {
-      // this.instanceData = this.textContent;
       this._setInitialData(this.textContent);
     } else {
-      console.warn('unknow type for data ', this.type);
+      console.warn('unknown type for data ', this.type);
     }
   }
-
-  // _handleResponse() {
-  //   console.log('_handleResponse ');
-  //   const ajax = this.shadowRoot.getElementById('loader');
-  //   const instanceData = new DOMParser().parseFromString(ajax.lastResponse, 'application/xml');
-  //   this.instanceData = instanceData;
-  //   console.log('data: ', this.instanceData);
-  // }
-
-  /*
-  _handleError() {
-    const loader = this.shadowRoot.getElementById('loader');
-    console.log('_handleResponse ', loader.lastError);
-  }
-*/
 }
+
 if (!customElements.get('fx-instance')) {
   customElements.define('fx-instance', FxInstance);
-}
+}