@jinntec/fore 3.3.2 → 4.0.0

package/src/actions/fx-redo.js

@@ -0,0 +1,58 @@
+import { Fore } from '../fore.js';
+import { AbstractAction } from './abstract-action.js';
+
+/**
+ * `fx-redo`
+ * re-applies the most recently undone action chain. Fires `redo-done` with
+ * `{canUndo, canRedo}` when a step was redone.
+ *
+ * @customElement
+ * @demo demo/undo-redo.html
+ */
+export class FxRedo extends AbstractAction {
+  async perform() {
+    // this element is a singleton reused across clicks - guard against a rapid
+    // double-click re-entering perform() while the first click's redo is still applying
+    if (this._busy) {
+      this.needsUpdate = false;
+      return;
+    }
+    this._busy = true;
+
+    this.dispatchEvent(
+      new CustomEvent('execute-action', {
+        composed: true,
+        bubbles: true,
+        cancelable: true,
+        detail: { action: this, event: this.event },
+      }),
+    );
+
+    // commit any in-progress widget edit first (matters for non-click triggers
+    // that don't move focus, e.g. custom keyboard bindings)
+    this.getOwnerForm().flushPendingWidgetEdit?.();
+
+    const undoManager = this.getModel().getEffectiveUndoManager();
+    // restoring a snapshot must not record itself as a new undo step
+    undoManager.suspended = true;
+    this.needsUpdate = undoManager.redo();
+  }
+
+  actionPerformed() {
+    if (this.needsUpdate) {
+      const model = this.getModel();
+      model.updateModel();
+      this.getOwnerForm().refresh(true);
+      Fore.dispatch(this, 'redo-done', {
+        canUndo: model.canUndo(),
+        canRedo: model.canRedo(),
+      });
+    }
+    this._busy = false;
+    this.dispatchActionPerformed();
+  }
+}
+
+if (!customElements.get('fx-redo')) {
+  window.customElements.define('fx-redo', FxRedo);
+}

package/src/actions/fx-refresh.js

@@ -33,7 +33,7 @@ class FxRefresh extends AbstractAction {
       this.getOwnerForm().refresh(true);
       return;
     }
-    if(this.hasAttribute('selector')){
+    if (this.hasAttribute('selector')) {
       const target = document.querySelector(this.getAttribute('selector'));
       if (target && Fore.isUiElement(target.nodeName) && typeof target.refresh === 'function') {
         target.refresh(true);
@@ -44,7 +44,7 @@ class FxRefresh extends AbstractAction {
       const targetId = this.getAttribute('control');
       console.log(`### <<<<< refresh() control '${targetId}' >>>>>`);
       let ctrl = resolveId(targetId, this);
-      if(!ctrl){
+      if (!ctrl) {
         ctrl = document.querySelector(`#${targetId}`);
       }
       if (ctrl && Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {

package/src/actions/fx-reload.js

@@ -33,7 +33,7 @@ export class FxReload extends AbstractAction {
       }),
     );
 
-    Fore.dispatch(this, 'reload', {});
+    await Fore.dispatch(this, 'reload', {});
   }
 }
 

package/src/actions/fx-replace.js

@@ -46,7 +46,7 @@ export default class FxReplace extends AbstractAction {
 
   actionPerformed() {
     this.getModel().updateModel();
-    this.getOwnerForm().refresh(true); //todo: optimize and update only the affected subtree
+    this.getOwnerForm().refresh(true); // todo: optimize and update only the affected subtree
     this.dispatchActionPerformed();
   }
 

package/src/actions/fx-send.js

@@ -86,17 +86,39 @@ class FxSend extends AbstractAction {
       submission.parameters.set('target', resolved);
     }
 
+    // Capture before submit.submit() runs: fx-submission#_handleResponse() itself already
+    // runs the full updateModel()+refresh(true) cycle for a replace="instance" response,
+    // unless the model wasn't inited yet (see the `model.inited` guard there) - in that one
+    // case it skips its own cycle and we still need to do it below. Reading `inited` now (not
+    // after submit()) avoids mistaking "became inited during this very submit()" for "was
+    // already inited", which would wrongly skip the only cycle that ran.
+    const modelWasInited = this.getModel().inited;
     await submission.submit();
     if (submission.replace === 'instance') {
-      this.getModel().updateModel();
-      // todo: this bypasses observers...
-      this.getOwnerForm().refresh(true); //whole instance changes - full refresh necessary
-      // this.getOwnerForm().addToBatchedNotifications(this.getOwnerForm());
-      // this.needsUpdate = true;
+      if (!modelWasInited) {
+        this.getModel().updateModel();
+        // todo: this bypasses observers...
+        this.getOwnerForm().refresh(true); // whole instance changes - full refresh necessary
+        // this.getOwnerForm().addToBatchedNotifications(this.getOwnerForm());
+      }
+      // needsUpdate is set (below, via actionPerformed override) so the undo hook records
+      // this replace as an undo step - it is NOT read by the default actionPerformed cycle
+      // here, since that would run a second, redundant recalculate/revalidate/refresh(false)
+      // on top of the full refresh(true) already done (either just above, or inside
+      // fx-submission#_handleResponse)
+      this.needsUpdate = true;
     }
     // if not of type fx-submission signal error
   }
 
+  actionPerformed() {
+    // the instance-replace branch above already ran the full update+refresh cycle itself;
+    // skip the default gated cycle (see the comment at the needsUpdate assignment) while
+    // still calling dispatchActionPerformed() - the generic undo commit/discard hook in
+    // _finalizePerform() runs independently of this override and needs nothing extra here
+    this.dispatchActionPerformed();
+  }
+
   _emitToChannel() {
     const channel = this.getModel().querySelector(`#${this.connection}`);
     if (channel === null) {

package/src/actions/fx-setattribute.js

@@ -47,7 +47,7 @@ export default class FxSetattribute extends AbstractAction {
     this.attrName = this.hasAttribute('name') ? this.getAttribute('name') : null;
     this.attrValue = this.hasAttribute('value') ? this.getAttribute('value') : '';
     if (!this.attrName) {
-      Fore.dispatch('this', 'error', { message: 'name or value not specified' });
+      Fore.dispatch(this, 'error', { message: 'name or value not specified' });
     }
   }
 
@@ -55,7 +55,7 @@ export default class FxSetattribute extends AbstractAction {
     super.perform();
     const mi = this.getModelItem();
     if (mi.node.nodeType !== Node.ELEMENT_NODE) {
-      Fore.dispatch('this', 'error', { message: 'referenced item is not an element' });
+      await Fore.dispatch(this, 'error', { message: 'referenced item is not an element' });
       return;
     }
     mi.node.setAttribute(this.attrName, this.attrValue);
@@ -65,12 +65,16 @@ export default class FxSetattribute extends AbstractAction {
       this,
       null,
     );
-  // IMPORTANT: registerModelItem may return an existing canonical ModelItem for the same path.
-  // Always use the returned instance for notifications.
-  const canonical = this.getOwnerForm().getModel().registerModelItem(newModelItem);
-  this.getOwnerForm().addToBatchedNotifications(canonical);
+    // IMPORTANT: registerModelItem may return an existing canonical ModelItem for the same path.
+    // Always use the returned instance for notifications.
+    const canonical = this.getOwnerForm().getModel().registerModelItem(newModelItem);
+    this.getOwnerForm().addToBatchedNotifications(canonical);
     this.needsUpdate = true;
-  canonical.notify();
+    canonical.notify();
+    // On first-time attribute creation the ModelItem has no observers yet (no ref
+    // could have read a nonexistent attribute), so notify() alone reaches nobody.
+    // Signal a structural change so refs matching the owner element re-evaluate.
+    this.getOwnerForm().signalChangeToElement(mi.node.localName);
   }
 }
 

package/src/actions/fx-undo.js

@@ -0,0 +1,58 @@
+import { Fore } from '../fore.js';
+import { AbstractAction } from './abstract-action.js';
+
+/**
+ * `fx-undo`
+ * restores the instance data of the model to the state before the last undoable
+ * action chain. Fires `undo-done` with `{canUndo, canRedo}` when a step was undone.
+ *
+ * @customElement
+ * @demo demo/undo-redo.html
+ */
+export class FxUndo extends AbstractAction {
+  async perform() {
+    // this element is a singleton reused across clicks - guard against a rapid
+    // double-click re-entering perform() while the first click's undo is still applying
+    if (this._busy) {
+      this.needsUpdate = false;
+      return;
+    }
+    this._busy = true;
+
+    this.dispatchEvent(
+      new CustomEvent('execute-action', {
+        composed: true,
+        bubbles: true,
+        cancelable: true,
+        detail: { action: this, event: this.event },
+      }),
+    );
+
+    // commit any in-progress widget edit first (matters for non-click triggers
+    // that don't move focus, e.g. custom keyboard bindings)
+    this.getOwnerForm().flushPendingWidgetEdit?.();
+
+    const undoManager = this.getModel().getEffectiveUndoManager();
+    // restoring a snapshot must not record itself as a new undo step
+    undoManager.suspended = true;
+    this.needsUpdate = undoManager.undo();
+  }
+
+  actionPerformed() {
+    if (this.needsUpdate) {
+      const model = this.getModel();
+      model.updateModel();
+      this.getOwnerForm().refresh(true);
+      Fore.dispatch(this, 'undo-done', {
+        canUndo: model.canUndo(),
+        canRedo: model.canRedo(),
+      });
+    }
+    this._busy = false;
+    this.dispatchActionPerformed();
+  }
+}
+
+if (!customElements.get('fx-undo')) {
+  window.customElements.define('fx-undo', FxUndo);
+}

package/src/createNodes.js

@@ -0,0 +1,314 @@
+import { createNamespaceResolver } from './xpath-evaluation.js';
+/**
+ * @typedef {{nameTest: string, predicates: string[]}} RawStep
+ */
+
+/*
+ * Determine whether a string is a valid Name
+ *
+ * @param {string} name
+ * @returns {boolean} whether the name is a valid one
+ */
+function isValidName(name) {
+  const result = new window.DOMParser().parseFromString(`<${name}/>`, 'application/xml');
+  return result.querySelector('parsererror') === null;
+}
+
+/**
+ * @param {string} xpath - the xpath to tokenize to steps
+ */
+function splitSteps(xpath) {
+  /**
+   * @type {RawStep[]}
+   */
+  const steps = [];
+  let nameTestScratch = '';
+  let predicates = [];
+  let predicateScratch = '';
+  let predicateDepth = 0;
+
+  for (const char of xpath.split('')) {
+    if (char === '[') {
+      predicateDepth += 1;
+      if (predicateDepth > 1) {
+        // Keep the `[` in nested predicates
+        predicateScratch += char;
+      }
+      continue;
+    }
+    if (char === ']') {
+      predicateDepth -= 1;
+      if (predicateDepth < 1) {
+        // Outer predicate closed. Write away scratch. Do not keep the ']'
+        predicates.push(predicateScratch.trim());
+        predicateScratch = '';
+      } else {
+        predicateScratch += char;
+      }
+      continue;
+    }
+    if (predicateDepth > 0) {
+      // We are in a predicate. Just write away!
+      predicateScratch += char;
+      continue;
+    }
+
+    // Predicate is zero at this point. Check if we are in a nametest or if we just stopped one
+    if (char === '/') {
+      // Consume this path step
+      if (nameTestScratch) {
+        steps.push({
+          nameTest: nameTestScratch.trim(),
+          predicates,
+        });
+        nameTestScratch = '';
+        predicates = [];
+      }
+      continue;
+    }
+
+    nameTestScratch += char;
+  }
+
+  if (nameTestScratch) {
+    // Flush it
+    steps.push({
+      nameTest: nameTestScratch.trim(),
+      predicates,
+    });
+  }
+
+  return steps;
+}
+
+/**
+ * @param {string} possibleAttributeTest
+ */
+function extractAttributeTest(possibleAttributeTest) {
+  possibleAttributeTest = possibleAttributeTest.trim();
+  if (!possibleAttributeTest.startsWith('@')) {
+    return null;
+  }
+  const predicateRegex = /@(.*)\s*=\s*(['"])(.*)\2/g;
+  const match = predicateRegex.exec(possibleAttributeTest);
+  if (match) {
+    // Yep, this has the form `@type="my-type"`
+    return { name: match[1].trim(), value: match[3] };
+  }
+
+  // This is of the form `@attr`
+  return { name: possibleAttributeTest.substring(1), value: null };
+}
+
+/**
+ * @typedef {{form: 'attributes', found: {name: string, value: string}} | {form: 'nested-path', found: RawStep[]}} ParsedPredicate
+ */
+
+/**
+ * @param {string} predicate - The clean predicate string, everything between the (outer) `[` and `]`
+ *
+ * @returns {ParsedPredicate}
+ */
+function parsePredicate(predicate) {
+  const attributeTest = extractAttributeTest(predicate);
+  if (attributeTest) {
+    // Yep, this has the form `@type="my-type"`
+    return {
+      form: 'attributes',
+      found: attributeTest,
+    };
+  }
+
+  // No. Is this a path?
+  const nestedPath = splitSteps(predicate);
+  if (nestedPath) {
+    return {
+      form: 'nested-path',
+      found: nestedPath,
+    };
+  }
+  // Don't know.
+  return null;
+}
+
+/**
+ * Create a structure from an XPath
+ *
+ * @param {string} xpath - The XPath to create the structure for
+ * @param {Element} baseElement -  The parent of the new element
+ * @param {import('./fx-fore').FxFore} foreElement - The Fore element in which this is created. Used for namespace resolving
+ */
+export default function createNodes(xpath, baseElement, foreElement) {
+  const baseNamespace = baseElement?.namespaceURI || null;
+  const namespaceResolver = createNamespaceResolver(xpath, foreElement);
+
+  const ownerDoc = baseElement.ownerDocument;
+
+  /**
+   * @param {string} token
+   */
+  const parseName = token => {
+    const raw = token.trim();
+
+    if (raw.startsWith('@')) {
+      const { name, value } = extractAttributeTest(raw);
+
+      if (name.startsWith('*:')) {
+        return { isAttribute: true, namespaceURI: null, localName: name.substring(2) };
+      }
+      if (name.includes(':')) {
+        const [prefix, localName] = name.split(':');
+        return {
+          isAttribute: true,
+          namespaceURI: prefix === '*' ? null : namespaceResolver(prefix) || null,
+          localName,
+          value,
+        };
+      }
+      return { isAttribute: true, namespaceURI: null, localName: name, value };
+    }
+
+    if (raw.startsWith('*:')) {
+      return { isAttribute: false, namespaceURI: baseNamespace, localName: raw.substring(2) };
+    }
+    if (raw.includes(':')) {
+      const [prefix, localName] = raw.split(':');
+      return {
+        isAttribute: false,
+        namespaceURI: prefix === '*' ? baseNamespace : namespaceResolver(prefix) || baseNamespace,
+        localName,
+      };
+    }
+    return { isAttribute: false, namespaceURI: baseNamespace, localName: raw };
+  };
+
+  const steps = splitSteps(xpath).filter(step => step.nameTest !== '.');
+
+  if (!steps.length) return null;
+
+  /**
+   * Process a single step
+   *
+   * @param {RawStep} rawStep
+   * @param {Element} current
+   * @param {boolean} isRoot - True if this is the 'root' expression, false if we are in a predicate already
+   *
+   * @returns {({action: 'continue', element: Element} | {action: 'abort'} | {action: 'return', attr: Attr})}
+   */
+  const processStep = (rawStep, current, isRoot) => {
+    const { nameTest, predicates } = rawStep;
+    if (!nameTest || nameTest === '.') {
+      return {
+        action: 'continue',
+        element: current,
+      };
+    }
+
+    const parsed = parseName(nameTest);
+
+    if (!isValidName(parsed.localName)) {
+      // This did not result in a valid name. Stop.
+      console.warn(
+        `Creating node for the XPath ${xpath} failed because the part ${parsed.localName} is not a valid Name.`,
+      );
+      return {
+        action: 'abort',
+      };
+    }
+
+    if (parsed.isAttribute) {
+      if (!current) {
+        const attr = ownerDoc.createAttribute(parsed.localName);
+        attr.value = parsed.value;
+        return {
+          action: 'return',
+          attr,
+        };
+      }
+      if (isRoot && parsed.value !== null) {
+        // Prevent a path shaped like `./@value="a"` to just set an attribute. This should only be done in predicates
+        return {
+          action: 'abort',
+        };
+      }
+      current.setAttribute(parsed.localName, parsed.value ?? '');
+      return {
+        action: 'continue',
+        element: current,
+      };
+    }
+
+    /**
+     * @type {Element}
+     */
+    const element = parsed.namespaceURI
+      ? ownerDoc.createElementNS(parsed.namespaceURI, parsed.localName)
+      : ownerDoc.createElement(parsed.localName);
+
+    for (const predicate of predicates) {
+      const parsedPredicate = parsePredicate(predicate);
+      if (!parsedPredicate) {
+        // This did not result in a valid name. Stop.
+        console.warn(
+          `Creating node for the XPath ${xpath} failed because the part ${predicates} could not be processed.`,
+        );
+        return {
+          action: 'abort',
+        };
+      }
+      if (parsedPredicate.form === 'attributes') {
+        const attrName = parsedPredicate.found.name.includes(':')
+          ? parsedPredicate.found.name.split(':')[1]
+          : parsedPredicate.found.name;
+        element.setAttribute(attrName, parsedPredicate.found.value);
+      } else {
+        const nestedPath = parsedPredicate.found;
+        let subtree = element;
+        for (const step of nestedPath) {
+          const result = processStep(step, subtree, false);
+          if (result.action === 'abort') {
+            return result;
+          }
+
+          if (result.action === 'continue') {
+            subtree = result.element;
+          }
+        }
+      }
+    }
+
+    if (current) {
+      current.appendChild(element);
+    }
+    current = element;
+    return {
+      action: 'continue',
+      element,
+    };
+  };
+
+  let current = null;
+
+  let subtreeRoot = null;
+
+  for (const rawStep of steps) {
+    const result = processStep(rawStep, current, true);
+    switch (result.action) {
+      case 'abort':
+        return null;
+      case 'return':
+        return subtreeRoot;
+      case 'continue':
+        if (!current) {
+          // This is the absolute root now
+          subtreeRoot = result.element;
+        }
+        current = result.element;
+        break;
+
+      default:
+    }
+  }
+
+  return subtreeRoot;
+}

package/src/fore.js

@@ -23,6 +23,33 @@ export class Fore {
 
   static TYPE_DEFAULT = 'xs:string';
 
+  static _styleSheetCache = new Map();
+
+  /**
+   * Returns a `CSSStyleSheet` for the given (static) CSS text, memoized by the CSS text itself so
+   * that a repeated element (e.g. `fx-output`/`fx-control` inside an `fx-repeat` with hundreds or
+   * thousands of rows) shares one parsed sheet via `shadowRoot.adoptedStyleSheets` instead of every
+   * instance re-parsing an identical `<style>` block via `shadowRoot.innerHTML`. Returns `null` when
+   * constructable stylesheets aren't supported so callers can fall back to inline `<style>`.
+   *
+   * @param cssText {String} - static CSS, must not contain per-instance interpolation
+   * @returns {CSSStyleSheet|null}
+   */
+  static getSharedStyleSheet(cssText) {
+    if (typeof CSSStyleSheet === 'undefined') return null;
+    let sheet = Fore._styleSheetCache.get(cssText);
+    if (!sheet) {
+      try {
+        sheet = new CSSStyleSheet();
+        sheet.replaceSync(cssText);
+        Fore._styleSheetCache.set(cssText, sheet);
+      } catch (e) {
+        return null;
+      }
+    }
+    return sheet;
+  }
+
   /**
    * Loads and return a piece of HTML
    * @param url {String} - the Url to load from
@@ -160,6 +187,32 @@ export class Fore {
     return input;
   }
 
+  /**
+   * Evaluates all `{expr}` occurrences within a string against a given context node and
+   * form element, substituting each with its evaluated string value while leaving any
+   * surrounding static text untouched (e.g. `'foo {name}'` -> `'foo bar'`).
+   *
+   * Unlike `getExpression()`, this does not require the whole string to be a single
+   * expression - it supports static text mixed with one or more `{expr}` placeholders.
+   *
+   * @param {string} input the string possibly containing one or more `{expr}` placeholders
+   * @param {Node} contextNode the node the expression(s) are evaluated against
+   * @param {HTMLElement} formElement the Fore element providing variable/namespace scope
+   * @returns {string}
+   */
+  static evaluateTemplateString(input, contextNode, formElement) {
+    return String(input ?? '').replace(/{[^}]*}/g, match => {
+      if (match === '{}') return match;
+      const naked = match.substring(1, match.length - 1);
+      try {
+        return evaluateXPathToString(naked, contextNode, formElement);
+      } catch (error) {
+        console.warn('ignoring unparseable expr', error);
+        return match;
+      }
+    });
+  }
+
   /**
    * returns the next `fx-fore` element upwards in tree
    *
@@ -440,24 +493,6 @@ export class Fore {
     return 'done';
   }
 
-  /*
-  static evaluateAttributeTemplateExpression(expr, node) {
-    const matches = expr.match(/{[^}]*}/g);
-    if (matches) {
-      matches.forEach(match => {
-        console.log('match ', match);
-        const naked = match.substring(1, match.length - 1);
-        const inscope = getInScopeContext(node, naked);
-        const result = evaluateXPathToString(naked, inscope, node.getOwnerForm());
-        const replaced = expr.replaceAll(match, result);
-        console.log('replacing ', expr, ' with ', replaced);
-        expr = replaced;
-      });
-    }
-    return expr;
-  }
-*/
-
   static fadeInElement(element) {
     const duration = 600;
     let fadeIn = () => {

package/src/functions/fx-functionlib.js

@@ -134,7 +134,7 @@ export class FxFunctionlib extends ForeElementMixin {
 
   _ensurePrefixDeclared(prefix) {
     const ownerForm =
-        (typeof this.getOwnerForm === 'function' && this.getOwnerForm()) || this.closest('fx-fore');
+      (typeof this.getOwnerForm === 'function' && this.getOwnerForm()) || this.closest('fx-fore');
 
     if (!ownerForm) return;
 
@@ -149,8 +149,8 @@ export class FxFunctionlib extends ForeElementMixin {
 
     // If prefix is given: register ONLY the prefixed signature (no unprefixed alias).
     const sig = prefix
-        ? applyPrefixToSignature(functionObject.signature, prefix)
-        : functionObject.signature;
+      ? applyPrefixToSignature(functionObject.signature, prefix)
+      : functionObject.signature;
 
     registerFunction({ ...functionObject, signature: sig }, this);
   }
@@ -168,12 +168,12 @@ export class FxFunctionlib extends ForeElementMixin {
         if (typeof signature !== 'string' || !signature.trim()) continue;
 
         this._register(
-            {
-              type: 'text/javascript',
-              signature: signature.trim(),
-              implementation: item,
-            },
-            prefix,
+          {
+            type: 'text/javascript',
+            signature: signature.trim(),
+            implementation: item,
+          },
+          prefix,
         );
       } else if (item && typeof item === 'object' && typeof item.signature === 'string') {
         this._register(item, prefix);
@@ -209,4 +209,4 @@ export class FxFunctionlib extends ForeElementMixin {
 
 if (!customElements.get('fx-functionlib')) {
   customElements.define('fx-functionlib', FxFunctionlib);
-}
+}