@jinntec/fore 3.2.1 → 3.3.1

package/index.js

@@ -1,3 +1,4 @@
+import './tools/debug/auto-debugger.js';
 // core + models classes
 import './src/fx-bind.js';
 import './src/fx-connection.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -93,13 +93,15 @@
     "test:prune-snapshots": "karma start --prune-snapshots",
     "test:bs": "karma start karma.bs.config.js --coverage",
     "start:build": "cd dist && es-dev-server --open",
-    "build": "rimraf dist && rollup -c rollup.config.js",
+    "build": "rimraf dist && vite build --config vite.build.config.js && vite build --config vite.build-dev.config.js",
     "start": "vite --open --port 8090 --host",
     "preversion": "npm run test",
     "prepare": "npm run build",
     "install-demos": "npm i && cd demo && npm i",
     "start-cypress": "npm run start",
-    "websocket-server": "node websocket-server.js"
+    "websocket-server": "node websocket-server.js",
+    "release": "bash scripts/release.sh",
+    "release:demo": "bash scripts/update-demo.sh"
   },
   "keywords": [
     "Fore",

package/resources/fore.css

@@ -66,6 +66,25 @@
         display: block;
     }
 
+    /*
+     * Native-constraint alert visibility: show fx-alert only after the user has
+     * interacted with the field (:user-invalid fires after first dirty interaction).
+     * Complements .visited[invalid] above, which covers Fore-driven (XPath) invalidity.
+     */
+    fx-control:has(input.widget:user-invalid) fx-alert {
+        display: block;
+    }
+
+    /*
+     * Fallback for browsers without :user-invalid support.
+     * :placeholder-shown is false when a value is present, approximating "user typed".
+     */
+    @supports not selector(input:user-invalid) {
+        fx-control[invalid]:has(input.widget:not(:placeholder-shown)) fx-alert {
+            display: block;
+        }
+    }
+
     /* case not displayed by default - if you want e.g. apply transitions you have to overwrite this rule with display='inline' or similar */
     fx-case {
         display: none;
@@ -73,11 +92,58 @@
     fx-case.selected-case{
         display:block;
     }
+    fx-case.deselected-case{
+        display:none;
+    }
 
     fx-output[readonly] img {
         background: inherit;
     }
 
+    /*
+     * Default visual treatment for readonly controls (own or inherited via
+     * <fx-bind readonly="...">). Individual apps can override.
+     */
+    fx-control[readonly] .widget,
+    fx-control[readonly] input,
+    fx-control[readonly] textarea,
+    fx-control[readonly] select {
+        background: var(--paper-grey-200);
+        color: var(--paper-grey-600);
+        cursor: not-allowed;
+    }
+
+    /*
+     * The native `readonly` attribute is a no-op on checkboxes/radios per the HTML
+     * spec - only `disabled` blocks them, but that would also mute their styling
+     * and remove them from focus order. Fore already rejects the resulting
+     * value-changed on the model side (see fx-control#setValue), but without this
+     * the box still visibly toggles and snaps back, reading as "still clickable".
+     * Blocking pointer interaction avoids that flicker entirely.
+     */
+    fx-control[readonly] input[type="checkbox"],
+    fx-control[readonly] input[type="radio"] {
+        pointer-events: none;
+    }
+
+    /*
+     * Clicking a <label for="..."> forwards a native activation to its checkbox/
+     * radio that bypasses the input's own `pointer-events: none` entirely - the
+     * browser toggles the control directly, it's not a hit-test on the input. The
+     * label itself must be blocked too, or the box still visibly flips on click.
+     */
+    fx-control[readonly]:has(input[type="checkbox"]) label,
+    fx-control[readonly]:has(input[type="radio"]) label {
+        pointer-events: none;
+        cursor: not-allowed;
+    }
+
+    fx-trigger[readonly] .widget,
+    fx-trigger[readonly] button {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
     .error {
         background: var(--paper-red-500);
         display: flex;

package/src/ForeElementMixin.js

@@ -68,6 +68,24 @@ export default class ForeElementMixin extends HTMLElement {
     this.ownerForm = null;
   }
 
+  getDebugInfo() {
+    return {
+      localName: this.localName,
+      id: this.id || null,
+      ref: this.getAttribute?.('ref') || null,
+
+      modelItemPath: this.modelItem?.path || null,
+      instanceId: this.modelItem?.instanceId || null,
+
+      value: this.modelItem?.value,
+
+      relevant: this.modelItem?.relevant,
+      readonly: this.modelItem?.readonly,
+      required: this.modelItem?.required,
+      constraint: this.modelItem?.constraint,
+    };
+  }
+
   connectedCallback() {
     if (this.parentElement) {
       this.dependencies.setParentDependencies(this.parentElement?.closest('[ref]')?.dependencies);

package/src/actions/abstract-action.js

@@ -186,10 +186,69 @@ export class AbstractAction extends ForeElementMixin {
     }
   }
 
+  getActionDebugDetail(extra = {}) {
+    const getAttr = name => {
+      try {
+        return this.getAttribute(name) || null;
+      } catch (error) {
+        return null;
+      }
+    };
+
+    return {
+      action: this.localName || null,
+      actionClass: this.constructor?.name || null,
+      id: this.id || null,
+      event: this.event || null,
+      ref: getAttr('ref'),
+      target: getAttr('target'),
+      origin: getAttr('origin'),
+      submission: getAttr('submission'),
+      control: getAttr('control'),
+      if: getAttr('if'),
+      while: getAttr('while'),
+      iterate: getAttr('iterate'),
+      delay: this.delay || 0,
+      needsUpdate: this.needsUpdate,
+      ownerFore: this.getOwnerFormSafe()?.id || null,
+      ...extra,
+    };
+  }
+
+  dispatchActionDebugEvent(type, extra = {}) {
+    try {
+      const target = this.isConnected ? this : (this.getOwnerFormSafe() ?? this);
+      target.dispatchEvent(
+          new CustomEvent(type, {
+            composed: true,
+            bubbles: true,
+            cancelable: false,
+            detail: this.getActionDebugDetail(extra),
+          }),
+      );
+    } catch (error) {
+      // Debug events must never affect action execution.
+    }
+  }
+
+  getOwnerFormSafe() {
+    try {
+      return this.getOwnerForm?.() || null;
+    } catch (error) {
+      return null;
+    }
+  }
+
   async performSafe() {
+    let success = false;
+
+    this.dispatchActionDebugEvent('action-start', {
+      phase: 'start',
+    });
+
     try {
       await this.perform();
-      // Return true to indicate success
+      success = true;
       return true;
     } catch (error) {
       await Fore.dispatch(this, 'error', {
@@ -198,11 +257,15 @@ export class AbstractAction extends ForeElementMixin {
         expr: error,
         level: 'Error',
       });
-      // Return false to indicate failure. Any loops must be canceled
+
       return false;
+    } finally {
+      this.dispatchActionDebugEvent('action-end', {
+        phase: 'end',
+        success,
+      });
     }
   }
-
   /**
    * executes the action.
    *
@@ -263,8 +326,10 @@ export class AbstractAction extends ForeElementMixin {
 
     // Outermost handling
     if (FxFore.outermostHandler === null) {
+      const ownerForm = this.getOwnerFormSafe();
+
       console.log(
-        `%coutermost Action on ${this.getOwnerForm().id}`,
+        `%coutermost Action on ${ownerForm?.id || ''}`,
         'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
         this,
       );
@@ -319,7 +384,8 @@ export class AbstractAction extends ForeElementMixin {
     if (this.delay) {
       // Delay further execution until the delay is done
       await wait(this.delay);
-      if (!XPathUtil.contains(this.getOwnerForm(), this)) {
+      const ownerForm = this.getOwnerFormSafe();
+      if (!ownerForm || !XPathUtil.contains(ownerForm, this)) {
         // We are no longer in the document. Stop working
         this.actionPerformed();
         resolveThisEvent();
@@ -336,7 +402,8 @@ export class AbstractAction extends ForeElementMixin {
     // Start by waiting
     await wait(this.delay || 0);
 
-    if (!XPathUtil.contains(this.getOwnerForm(), this)) {
+    const ownerForm = this.getOwnerFormSafe();
+    if (!ownerForm || !XPathUtil.contains(ownerForm, this)) {
       // We are no longer in the document. Stop working
       return;
     }
@@ -347,7 +414,7 @@ export class AbstractAction extends ForeElementMixin {
     }
 
     // Perform the action once. But quit if it failed
-    if (!this.performSafe()) {
+    if (!(await this.performSafe())) {
       return;
     }
 
@@ -373,7 +440,8 @@ export class AbstractAction extends ForeElementMixin {
         return;
       }
 
-      if (!XPathUtil.contains(this.getOwnerForm(), this)) {
+      const ownerForm = this.getOwnerFormSafe();
+      if (!ownerForm || !XPathUtil.contains(ownerForm, this)) {
         // We are no longer in the document. Stop working
         return;
       }
@@ -400,8 +468,10 @@ export class AbstractAction extends ForeElementMixin {
     this.currentEvent = null;
     this.actionPerformed();
     if (FxFore.outermostHandler === this) {
+      const ownerForm = this.getOwnerFormSafe();
+
       console.log(
-        `%cfinalizing outermost Action on ${this.getOwnerForm()?.id}`,
+        `%cfinalizing outermost Action on ${ownerForm?.id || ''}`,
         'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
         this,
       );
@@ -430,24 +500,22 @@ export class AbstractAction extends ForeElementMixin {
    * Template method to be implemented by each action that is called by execute() as part of
    * the processing.
    *
-   * This function should not called on any action directly - call execute() instead to ensure proper execution of 'if' and 'while'
+   * This function should not called on any action directly - call execute() instead to ensure proper execution of 'if' and 'while'.
+   *
+   * TODO Fore DevTools:
+   * Concrete actions overriding perform() should call `await super.perform()` at the start.
+   * Otherwise the debugger will not see the `execute-action` event for that action.
    */
   async perform() {
-    // await Fore.dispatch(document, 'execute-action', {action:this, event:this.event});
-
-    // todo: review - this evaluation seems redundant as we already evaluated in execute
     if (this.isBound() || this.nodeName === 'FX-ACTION') {
       this.evalInContext();
     }
 
-    this.dispatchEvent(
-      new CustomEvent('execute-action', {
-        composed: true,
-        bubbles: true,
-        cancelable: true,
-        detail: { action: this, event: this.event },
-      }),
-    );
+/*
+    await Fore.dispatch(this, 'execute-action', this.getActionDebugDetail({
+      phase: 'before',
+    }));
+*/
   }
 
   /**
@@ -475,7 +543,8 @@ export class AbstractAction extends ForeElementMixin {
       // console.log('running update cycle for outermostHandler', this);
       model.recalculate();
       model.revalidate();
-      this.getOwnerForm().refresh(false);
+      const ownerForm = this.getOwnerFormSafe();
+      ownerForm?.refresh(false);
       this.dispatchActionPerformed();
     } else if (this.needsUpdate) {
       // console.log('Update delayed!');
@@ -493,8 +562,9 @@ export class AbstractAction extends ForeElementMixin {
    * @event action-performed - whenever an action has been run
    */
   dispatchActionPerformed() {
-    // console.log('action-performed ', this);
-    Fore.dispatch(this, 'action-performed', {});
+    Fore.dispatch(this, 'action-performed', this.getActionDebugDetail({
+      phase: 'after',
+    }));
   }
 }
 

package/src/actions/fx-insert.js

@@ -413,7 +413,7 @@ export class FxInsert extends AbstractAction {
       xpath,
     });
 
-    document.dispatchEvent(
+    this.dispatchEvent(
         new CustomEvent('index-changed', {
           composed: true,
           bubbles: true,
@@ -674,7 +674,7 @@ export class FxInsert extends AbstractAction {
       xpath,
     });
 
-    document.dispatchEvent(
+    this.dispatchEvent(
       new CustomEvent('index-changed', {
         composed: true,
         bubbles: true,

package/src/functions/fx-functionlib.js

@@ -7,6 +7,23 @@ const LOCAL_FUNCTIONS_NS = 'http://www.w3.org/2005/xquery-local-functions';
 // Keyed by resolved URL + prefix + mode.
 const _functionLibLoadCache = new Map();
 
+// registerFunction() enforces "first wins" for conflicting names, but library sources
+// (module imports, fetches) resolve asynchronously in whatever order the network/parser
+// finishes them in. To make "first" mean "first in document order" (deterministic, and
+// independent of load timing) rather than "first promise to resolve" (racy), every real
+// loader reserves its turn synchronously in connectedCallback -- before any await -- and
+// only applies its registrations once all earlier-reserved loaders have applied theirs.
+let _registrationOrderChain = Promise.resolve();
+
+function _reserveRegistrationTurn() {
+  const waitForTurn = _registrationOrderChain;
+  let releaseTurn;
+  _registrationOrderChain = new Promise(resolve => {
+    releaseTurn = resolve;
+  });
+  return { waitForTurn, releaseTurn };
+}
+
 function looksLikeModuleSrc(src) {
   return /\.m?js($|\?)/i.test(src);
 }
@@ -87,11 +104,19 @@ export class FxFunctionlib extends ForeElementMixin {
       return;
     }
 
+    // Reserve our place in the registration order now, synchronously, so it reflects
+    // document order rather than whichever loader's fetch/import happens to finish first.
+    const { waitForTurn, releaseTurn } = _reserveRegistrationTurn();
+
     const loadPromise = (async () => {
-      if (isModule) {
-        await this._loadModuleLibrary(resolvedUrl, src, prefix);
-      } else {
-        await this._loadHtmlLibrary(resolvedUrl, src, prefix);
+      try {
+        if (isModule) {
+          await this._loadModuleLibrary(resolvedUrl, src, prefix, waitForTurn);
+        } else {
+          await this._loadHtmlLibrary(resolvedUrl, src, prefix, waitForTurn);
+        }
+      } finally {
+        releaseTurn();
       }
     })();
 
@@ -130,11 +155,13 @@ export class FxFunctionlib extends ForeElementMixin {
     registerFunction({ ...functionObject, signature: sig }, this);
   }
 
-  async _loadModuleLibrary(resolvedUrl, src, prefix) {
+  async _loadModuleLibrary(resolvedUrl, src, prefix, waitForTurn) {
     const mod = await import(/* @vite-ignore */ resolvedUrl);
 
     const items = normalizeModuleExportToList(mod, src);
 
+    await waitForTurn;
+
     for (const item of items) {
       if (typeof item === 'function') {
         const { signature } = item;
@@ -154,7 +181,7 @@ export class FxFunctionlib extends ForeElementMixin {
     }
   }
 
-  async _loadHtmlLibrary(resolvedUrl, src, prefix) {
+  async _loadHtmlLibrary(resolvedUrl, src, prefix, waitForTurn) {
     const result = await fetch(resolvedUrl);
     if (!result.ok) {
       console.error(`Loading function library at ${src} failed.`);
@@ -165,6 +192,9 @@ export class FxFunctionlib extends ForeElementMixin {
     const document = new DOMParser().parseFromString(body, 'text/html');
 
     const functions = Array.from(document.querySelectorAll('fx-function'));
+
+    await waitForTurn;
+
     for (const func of functions) {
       const functionObject = {
         type: func.getAttribute('type'),

package/src/fx-bind.js

@@ -45,6 +45,34 @@ export class FxBind extends ForeElementMixin {
     this.inited = false;
   }
 
+  getDebugInfo() {
+    return {
+      ref: this.getAttribute('ref'),
+      id: this.id || null,
+      instanceId: this.instanceId,
+      bindType: this.bindType,
+
+      calculate: this.getAttribute('calculate'),
+      readonly: this.getAttribute('readonly'),
+      required: this.getAttribute('required'),
+      relevant: this.getAttribute('relevant'),
+      constraint: this.getAttribute('constraint'),
+      type: this.getAttribute('type'),
+
+      modelItemCount: this._debugModelItemCount?.() || null,
+    };
+  }
+
+  _debugModelItemCount() {
+    const model = this.getModel?.();
+
+    if (!model || !Array.isArray(model.modelItems)) {
+      return 0;
+    }
+
+    return model.modelItems.filter(item => item?.bind === this).length;
+  }
+
   connectedCallback() {
     // console.log('connectedCallback ', this);
     // this.id = this.hasAttribute('id')?this.getAttribute('id'):;