@jinntec/fore 3.3.0 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -94,13 +94,14 @@
     "test:bs": "karma start karma.bs.config.js --coverage",
     "start:build": "cd dist && es-dev-server --open",
     "build": "rimraf dist && vite build --config vite.build.config.js && vite build --config vite.build-dev.config.js",
-    "build:rollup": "rimraf dist && rollup -c rollup.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

@@ -100,6 +100,50 @@
         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/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-model.js

@@ -406,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;

package/src/modelitem.js

@@ -28,8 +28,10 @@ export class ModelItem {
   constructor(path, ref, nodeOrLens, bind, instance, fore) {
     this.path = path;
     this.ref = ref;
-    this.readonly = ModelItem.READONLY_DEFAULT;
-    this.relevant = ModelItem.RELEVANT_DEFAULT;
+    this._readonly = ModelItem.READONLY_DEFAULT;
+    this._relevant = ModelItem.RELEVANT_DEFAULT;
+    // undefined = not yet resolved; null = resolved, no ancestor ModelItem found
+    this._parentModelItem = undefined;
     this.required = ModelItem.REQUIRED_DEFAULT;
     this.constraint = ModelItem.CONSTRAINT_DEFAULT;
     this.type = ModelItem.TYPE_DEFAULT;
@@ -65,6 +67,79 @@ export class ModelItem {
     this.state = {}; // evaluated expression results
   }
 
+  /**
+   * `readonly` is inherited down the instance tree per XForms semantics: a node is
+   * readonly if its own bind says so, or if any ancestor node is readonly.
+   */
+  get readonly() {
+    return this._readonly || !!this.getParentModelItem()?.readonly;
+  }
+
+  set readonly(val) {
+    this._readonly = val;
+  }
+
+  /**
+   * `relevant` is inherited down the instance tree per XForms semantics: a node is
+   * relevant only if its own bind says so AND its parent is (effectively) relevant.
+   */
+  get relevant() {
+    if (!this._relevant) return false;
+    const parent = this.getParentModelItem();
+    return parent ? parent.relevant : true;
+  }
+
+  set relevant(val) {
+    this._relevant = val;
+  }
+
+  /**
+   * Resolves and caches the nearest ancestor ModelItem, walking past instance
+   * nodes that have no ModelItem of their own. Handles both XML DOM nodes
+   * (`node.parentNode`) and JSON lens nodes (`lens.parent`).
+   * @returns {ModelItem|null}
+   */
+  getParentModelItem() {
+    if (this._parentModelItem !== undefined) return this._parentModelItem;
+
+    // `bind` is only set for ModelItems created from an explicit <fx-bind ref="...">.
+    // Lazily-created ModelItems (e.g. controls without a dedicated bind - the exact
+    // case this inheritance walk needs to cover) have no `bind`, so fall back to
+    // resolving the owning FxModel through the fx-fore element instead.
+    const model = this.bind?.model || this.fore?.getModel?.();
+    // `Attr.parentNode` is always null per the DOM spec - attribute nodes only
+    // expose their owning element via `ownerElement`. Without this, readonly/
+    // relevant inheritance silently breaks for every attribute-bound ModelItem.
+    let current;
+    if (this.lens) {
+      current = this.lens.parent;
+    } else if (this.node?.nodeType === Node.ATTRIBUTE_NODE) {
+      current = this.node.ownerElement;
+    } else {
+      current = this.node?.parentNode;
+    }
+
+    while (current) {
+      if (
+        current.nodeType === Node.DOCUMENT_NODE ||
+        current.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+      ) {
+        break;
+      }
+
+      const mi = model?.getModelItem(current);
+      if (mi) {
+        this._parentModelItem = mi;
+        return mi;
+      }
+
+      current = current.__jsonlens__ === true ? current.parent : current.parentNode;
+    }
+
+    this._parentModelItem = null;
+    return null;
+  }
+
   getDebugInfo() {
     return {
       path: this.path,

package/src/ui/abstract-control.js

@@ -320,13 +320,13 @@ export default class AbstractControl extends UIElement {
 
   handleReadonly() {
     // console.log('mip readonly', this.modelItem.isReadonly);
-    if (this.isReadonly() !== this.modelItem.readonly) {
-      if (this.modelItem.readonly) {
+    const effectiveReadonly = this.modelItem.readonly || this.isHostReadonly();
+    if (this.isReadonly() !== effectiveReadonly) {
+      if (effectiveReadonly) {
         this.widget.setAttribute('readonly', '');
         this.setAttribute('readonly', '');
         this._dispatchEvent('readonly');
-      }
-      if (!this.modelItem.readonly) {
+      } else {
         this.widget.removeAttribute('readonly');
         this.removeAttribute('readonly');
         this._dispatchEvent('readwrite');
@@ -334,6 +334,17 @@ export default class AbstractControl extends UIElement {
     }
   }
 
+  /**
+   * A control embedded via `src` (a whole nested `fx-fore` used as widget) has its
+   * own independent model, so it cannot see the readonly state of the outer
+   * ModelItem it represents. When the outer control becomes readonly, it marks its
+   * widget (the nested `fx-fore`) with a `readonly` attribute; nested controls pick
+   * that up here by checking their nearest enclosing `fx-fore`.
+   */
+  isHostReadonly() {
+    return !!this.closest('fx-fore')?.hasAttribute('readonly');
+  }
+
   // todo - review alert handling altogether. There could be potentially multiple ones in model
   // TODO: both required and handleValid set valid attrs and aria attrs. Duplicate code
   handleValid() {

package/src/ui/fx-control.js

@@ -545,6 +545,11 @@ export default class FxControl extends XfAbstractControl {
         dummy.replaceWith(imported);
       }
 
+      // `this.widget` was cached as the placeholder `dummy` input on init(); that
+      // node is now detached, so readonly/required handling would silently target
+      // a removed element. Point it at the embedded fx-fore, which now acts as the widget.
+      this.widget = imported;
+
       if (!theFore) {
         Fore.dispatch('error', {
           detail: {