@jinntec/fore 3.0.1 → 3.1.0

package/index.js

@@ -67,5 +67,6 @@ import './src/ui/fx-control-menu.js';
 
 import './src/functions/fx-function.js';
 import './src/functions/fx-functionlib.js';
+import './src/fx-speech.js';
 
 export default {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -33,7 +33,7 @@
     "@jinntec/jinn-toast": "^1.0.5",
     "@picocss/pico": "^2.0.6",
     "chai": "^5.2.1",
-    "fontoxpath": "^3.33.0"
+    "fontoxpath": "^3.34.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.17.12",

package/src/actions/fx-insert.js

@@ -111,8 +111,9 @@ export class FxInsert extends AbstractAction {
   _getJsonTemplateTextFromTemplateEl(tplEl) {
     if (!tplEl) return null;
 
-    // Keep it robust against whitespace/formatting
-    const raw = String(tplEl.textContent || '').trim();
+    // <template>.textContent is "" because content lives in template.content (DocumentFragment).
+    // innerHTML reads from the content fragment correctly.
+    const raw = String(tplEl.innerHTML || tplEl.textContent || '').trim();
     if (!raw) return null;
     return raw;
   }

package/src/authoring-check.js

@@ -0,0 +1,231 @@
+/**
+ * Authoring integrity checks for Fore forms.
+ *
+ * Runs by default at startup. Add the `no-check` attribute to `<fx-fore>` to disable
+ * (e.g. in production). The module is dynamically imported, so it is never loaded
+ * when checks are disabled.
+ *
+ * Adding a new check: add a function `_check<Name>(fore, errors)` and call it in
+ * `checkAuthoring()` below.
+ */
+
+const INSTANCE_RE = /instance\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+const INDEX_RE = /index\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+
+// Attributes that may carry XPath expressions
+const XPATH_ATTRS = [
+  'ref',
+  'value',
+  'calculate',
+  'constraint',
+  'required',
+  'readonly',
+  'relevant',
+  'bind',
+  'context',
+  'if',
+  'while',
+  'origin',
+  'iterate',
+  'at',
+];
+
+function _isDynamic(val) {
+  return !val || val.includes('{');
+}
+
+function _byId(fore, id) {
+  return (
+    fore.ownerDocument.getElementById(id) ||
+    fore.getRootNode().getElementById?.(id) ||
+    fore.querySelector(`#${id}`)
+  );
+}
+
+function _checkSendSubmissions(fore, errors) {
+  fore.querySelectorAll('fx-send[submission]').forEach(el => {
+    const id = el.getAttribute('submission');
+    if (_isDynamic(id)) return;
+    const localFore = el.closest('fx-fore');
+    const { model } = localFore;
+    const target = model
+      ? model.querySelector(`fx-submission#${id}`)
+      : fore.querySelector(`fx-submission#${id}`);
+    if (!target) {
+      errors.push({
+        element: el,
+        message: `<fx-send submission="${id}">: no <fx-submission id="${id}"> found`,
+      });
+    }
+  });
+}
+
+function _checkDispatchTargets(fore, errors) {
+  fore.querySelectorAll('fx-dispatch[targetid]').forEach(el => {
+    const id = el.getAttribute('targetid');
+    if (_isDynamic(id)) return;
+    if (!_byId(fore, id)) {
+      errors.push({
+        element: el,
+        message: `<fx-dispatch targetid="${id}">: no element with id="${id}" found`,
+      });
+    }
+  });
+}
+
+function _checkXPathInstanceRefs(fore, errors) {
+  const allEls = Array.from(fore.querySelectorAll('*'));
+  for (const el of allEls) {
+    const localFore = el.closest('fx-fore');
+    for (const attr of XPATH_ATTRS) {
+      const val = el.getAttribute(attr);
+      if (!val) continue;
+
+      INSTANCE_RE.lastIndex = 0;
+      let m;
+      while ((m = INSTANCE_RE.exec(val)) !== null) {
+        const id = m[1];
+        const localInstance = localFore.querySelector(`fx-instance#${id}`);
+        const sharedInstance =
+          !localInstance && localFore.ownerDocument.querySelector(`fx-instance[shared]#${id}`);
+        if (!localInstance && !sharedInstance) {
+          errors.push({
+            element: el,
+            message: `[${attr}="${val}"]: instance('${id}') — no <fx-instance id="${id}"> found`,
+          });
+        }
+      }
+
+      INDEX_RE.lastIndex = 0;
+      while ((m = INDEX_RE.exec(val)) !== null) {
+        const id = m[1];
+        if (!localFore.querySelector(`fx-repeat#${id}`)) {
+          errors.push({
+            element: el,
+            message: `[${attr}="${val}"]: index('${id}') — no <fx-repeat id="${id}"> found`,
+          });
+        }
+      }
+    }
+  }
+}
+
+function _checkCallActions(fore, errors) {
+  fore.querySelectorAll('fx-call[action]').forEach(el => {
+    const id = el.getAttribute('action');
+    if (_isDynamic(id)) return;
+    if (!_byId(fore, id)) {
+      errors.push({
+        element: el,
+        message: `<fx-call action="${id}">: no element with id="${id}" found`,
+      });
+    }
+  });
+}
+
+function _checkShowHideDialogs(fore, errors) {
+  fore.querySelectorAll('fx-show[dialog], fx-hide[dialog]').forEach(el => {
+    const id = el.getAttribute('dialog');
+    if (_isDynamic(id)) return;
+    if (!_byId(fore, id)) {
+      errors.push({
+        element: el,
+        message: `<${el.localName} dialog="${id}">: no element with id="${id}" found`,
+      });
+    }
+  });
+}
+
+function _checkLoadAttachTo(fore, errors) {
+  fore.querySelectorAll('fx-load[attach-to]').forEach(el => {
+    const val = el.getAttribute('attach-to');
+    if (_isDynamic(val)) return;
+    if (!val.startsWith('#')) return; // _blank, _self etc. are valid non-id targets
+    const id = val.substring(1);
+    if (!_byId(fore, id)) {
+      errors.push({
+        element: el,
+        message: `<fx-load attach-to="${val}">: no element with id="${id}" found`,
+      });
+    }
+  });
+}
+
+function _checkRefreshControl(fore, errors) {
+  fore.querySelectorAll('fx-refresh[control]').forEach(el => {
+    const id = el.getAttribute('control');
+    if (_isDynamic(id)) return;
+    if (!_byId(fore, id)) {
+      errors.push({
+        element: el,
+        message: `<fx-refresh control="${id}">: no element with id="${id}" found`,
+      });
+    }
+  });
+}
+
+function _checkResetInstance(fore, errors) {
+  const model = fore.querySelector(':scope > fx-model');
+  fore.querySelectorAll('fx-reset[instance]').forEach(el => {
+    const id = el.getAttribute('instance');
+    if (_isDynamic(id)) return;
+    const target = model
+      ? model.querySelector(`fx-instance#${id}`)
+      : fore.querySelector(`fx-instance#${id}`);
+    const sharedTarget = !target && fore.ownerDocument.querySelector(`fx-instance[shared]#${id}`);
+    if (!target && !sharedTarget) {
+      errors.push({
+        element: el,
+        message: `<fx-reset instance="${id}">: no <fx-instance id="${id}"> found`,
+      });
+    }
+  });
+}
+
+function _checkSetfocusControl(fore, errors) {
+  fore.querySelectorAll('fx-setfocus[control]').forEach(el => {
+    const id = el.getAttribute('control');
+    if (_isDynamic(id)) return;
+    if (!_byId(fore, id)) {
+      errors.push({
+        element: el,
+        message: `<fx-setfocus control="${id}">: no element with id="${id}" found`,
+      });
+    }
+  });
+}
+
+function _checkToggleCase(fore, errors) {
+  fore.querySelectorAll('fx-toggle[case]').forEach(el => {
+    const id = el.getAttribute('case');
+    if (_isDynamic(id)) return;
+    if (!fore.querySelector(`fx-case#${id}`)) {
+      errors.push({
+        element: el,
+        message: `<fx-toggle case="${id}">: no <fx-case id="${id}"> found`,
+      });
+    }
+  });
+}
+
+/**
+ * Run all authoring checks on a given `<fx-fore>` element.
+ * Returns an array of `{ element, message }` error objects.
+ *
+ * @param {HTMLElement} fore
+ * @returns {{ element: HTMLElement, message: string }[]}
+ */
+export function checkAuthoring(fore) {
+  const errors = [];
+  _checkSendSubmissions(fore, errors);
+  _checkDispatchTargets(fore, errors);
+  _checkXPathInstanceRefs(fore, errors);
+  _checkCallActions(fore, errors);
+  _checkShowHideDialogs(fore, errors);
+  _checkLoadAttachTo(fore, errors);
+  _checkRefreshControl(fore, errors);
+  _checkResetInstance(fore, errors);
+  _checkSetfocusControl(fore, errors);
+  _checkToggleCase(fore, errors);
+  return errors;
+}

package/src/fore.js

@@ -17,7 +17,7 @@ export class Fore {
 
   static REQUIRED_DEFAULT = false;
 
-  static RELEVANT_DEFAULT = true
+  static RELEVANT_DEFAULT = true;
 
   static CONSTRAINT_DEFAULT = true;
 
@@ -267,7 +267,6 @@ export class Fore {
     return ['FX-BIND', 'FX-FUNCTION', 'FX-MODEL', 'FX-INSTANCE', 'FX-SUBMISSION'];
   }
 
-
   static async initUI(startElement) {
     const inited = new Promise(resolve => {
       const { children } = startElement;
@@ -301,23 +300,25 @@ export class Fore {
       }
 
       if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
-        /** @type {import('./ForeElementMixin.js').default} */
+        /** @type {import('./ui/UIElement.js').UIElement} */
         const bound = element;
 
         // Keep old behavior: only refresh UI elements during full/forced refresh
-        if (!force) {
-          // still recurse below
-        } else if (force === true) {
+        // Any #refresh call does its own recursion.
+        if (force === true) {
           const maybePromise = bound.refresh(force);
           if (maybePromise && typeof maybePromise.then === 'function') {
             await maybePromise;
           }
-        } else if (typeof force === 'object') {
+          continue;
+        }
+        if (typeof force === 'object') {
           // future selective refresh logic can live here if you re-enable it
           const maybePromise = bound.refresh(force);
           if (maybePromise && typeof maybePromise.then === 'function') {
             await maybePromise;
           }
+          continue;
         }
       }
 
@@ -521,10 +522,7 @@ export class Fore {
     const reg = /(>)(<)(\/*)/g;
     const wsexp = / *(.*) +\n/g;
     const contexp = /(<.+>)(.+\n)/g;
-    xml = xml
-      .replace(reg, '$1\n$2$3')
-      .replace(wsexp, '$1\n')
-      .replace(contexp, '$1\n$2');
+    xml = xml.replace(reg, '$1\n$2$3').replace(wsexp, '$1\n').replace(contexp, '$1\n$2');
     let formatted = '';
     const lines = xml.split('\n');
     let indent = 0;