@domql/element 3.8.0 → 3.8.6

package/create.js

@@ -29,7 +29,7 @@ import { REGISTRY } from './mixins/index.js'
 import { addMethods } from './methods/set.js'
 import { assignKeyAsClassname } from './mixins/classList.js'
 import { throughInitialExec, throughInitialDefine } from './iterate.js'
-import { filterAttributesByTagName } from 'attrs-in-props'
+import { filterAttributesByTagName, extractConditionalAttrs, ATTR_TRANSFORMS } from 'attrs-in-props'
 
 const EXCLUDED_ATTRS = new Set(['class', 'style'])
 
@@ -37,11 +37,20 @@ const applyPropsAsAttrs = (element) => {
   const { tag, props, context } = element
   if (!tag || !props) return
 
-  const autoAttrs = filterAttributesByTagName(tag, props, context?.cssPropsRegistry)
+  const cssProps = context?.cssPropsRegistry
+  const autoAttrs = filterAttributesByTagName(tag, props, cssProps)
+  const conditionalAttrs = extractConditionalAttrs(props, tag, cssProps)
+
   const filtered = {}
   for (const key in autoAttrs) {
-    if (!EXCLUDED_ATTRS.has(key)) filtered[key] = autoAttrs[key]
+    if (!EXCLUDED_ATTRS.has(key)) {
+      filtered[key] = ATTR_TRANSFORMS[key] ? ATTR_TRANSFORMS[key] : autoAttrs[key]
+    }
   }
+  for (const key in conditionalAttrs) {
+    if (!EXCLUDED_ATTRS.has(key)) filtered[key] = conditionalAttrs[key]
+  }
+
   let hasFiltered = false
   for (const _k in filtered) { hasFiltered = true; break } // eslint-disable-line
   if (!hasFiltered) return
@@ -196,7 +205,8 @@ const renderElement = (element, parent, options, attachOptions) => {
         isDemoComponent ? isDemoComponent + ' ' : '' + path.join('.')
       )
       element.verbose()
-      console.error('[DOMQL] Render error:', e)
+      if (e instanceof ReferenceError) console.warn('[DOMQL] Render warning:', e.message)
+      else console.error('[DOMQL] Render error:', e)
       if (element.on?.error) {
         element.on.error(e, element, element.state, element.context, options)
       }

package/dist/cjs/create.js

@@ -38,10 +38,17 @@ const EXCLUDED_ATTRS = /* @__PURE__ */ new Set(["class", "style"]);
 const applyPropsAsAttrs = (element) => {
   const { tag, props, context } = element;
   if (!tag || !props) return;
-  const autoAttrs = (0, import_attrs_in_props.filterAttributesByTagName)(tag, props, context?.cssPropsRegistry);
+  const cssProps = context?.cssPropsRegistry;
+  const autoAttrs = (0, import_attrs_in_props.filterAttributesByTagName)(tag, props, cssProps);
+  const conditionalAttrs = (0, import_attrs_in_props.extractConditionalAttrs)(props, tag, cssProps);
   const filtered = {};
   for (const key in autoAttrs) {
-    if (!EXCLUDED_ATTRS.has(key)) filtered[key] = autoAttrs[key];
+    if (!EXCLUDED_ATTRS.has(key)) {
+      filtered[key] = import_attrs_in_props.ATTR_TRANSFORMS[key] ? import_attrs_in_props.ATTR_TRANSFORMS[key] : autoAttrs[key];
+    }
+  }
+  for (const key in conditionalAttrs) {
+    if (!EXCLUDED_ATTRS.has(key)) filtered[key] = conditionalAttrs[key];
   }
   let hasFiltered = false;
   for (const _k in filtered) {
@@ -150,7 +157,8 @@ const renderElement = (element, parent, options, attachOptions) => {
         isDemoComponent ? isDemoComponent + " " : "" + path.join(".")
       );
       element.verbose();
-      console.error("[DOMQL] Render error:", e);
+      if (e instanceof ReferenceError) console.warn("[DOMQL] Render warning:", e.message);
+      else console.error("[DOMQL] Render error:", e);
       if (element.on?.error) {
         element.on.error(e, element, element.state, element.context, options);
       }

package/dist/esm/create.js

@@ -24,15 +24,22 @@ import { REGISTRY } from "./mixins/index.js";
 import { addMethods } from "./methods/set.js";
 import { assignKeyAsClassname } from "./mixins/classList.js";
 import { throughInitialExec, throughInitialDefine } from "./iterate.js";
-import { filterAttributesByTagName } from "attrs-in-props";
+import { filterAttributesByTagName, extractConditionalAttrs, ATTR_TRANSFORMS } from "attrs-in-props";
 const EXCLUDED_ATTRS = /* @__PURE__ */ new Set(["class", "style"]);
 const applyPropsAsAttrs = (element) => {
   const { tag, props, context } = element;
   if (!tag || !props) return;
-  const autoAttrs = filterAttributesByTagName(tag, props, context?.cssPropsRegistry);
+  const cssProps = context?.cssPropsRegistry;
+  const autoAttrs = filterAttributesByTagName(tag, props, cssProps);
+  const conditionalAttrs = extractConditionalAttrs(props, tag, cssProps);
   const filtered = {};
   for (const key in autoAttrs) {
-    if (!EXCLUDED_ATTRS.has(key)) filtered[key] = autoAttrs[key];
+    if (!EXCLUDED_ATTRS.has(key)) {
+      filtered[key] = ATTR_TRANSFORMS[key] ? ATTR_TRANSFORMS[key] : autoAttrs[key];
+    }
+  }
+  for (const key in conditionalAttrs) {
+    if (!EXCLUDED_ATTRS.has(key)) filtered[key] = conditionalAttrs[key];
   }
   let hasFiltered = false;
   for (const _k in filtered) {
@@ -141,7 +148,8 @@ const renderElement = (element, parent, options, attachOptions) => {
         isDemoComponent ? isDemoComponent + " " : "" + path.join(".")
       );
       element.verbose();
-      console.error("[DOMQL] Render error:", e);
+      if (e instanceof ReferenceError) console.warn("[DOMQL] Render warning:", e.message);
+      else console.error("[DOMQL] Render error:", e);
       if (element.on?.error) {
         element.on.error(e, element, element.state, element.context, options);
       }

package/dist/iife/index.js

@@ -352,6 +352,17 @@ var DomqlElement = (() => {
           }
           return result;
         }
+        if (param != null && element?.context?.plugins && (isArray(param) || isObject(param) && !isDOMNode(param))) {
+          const plugins = element.context.plugins;
+          for (const plugin of plugins) {
+            if (plugin.resolveHandler) {
+              const resolved = plugin.resolveHandler(param, element);
+              if (typeof resolved === "function") {
+                return exec(resolved, element, state2, context);
+              }
+            }
+          }
+        }
         return param;
       };
       merge = (element, obj, excludeFrom = []) => {
@@ -671,11 +682,21 @@ var DomqlElement = (() => {
   var init_if = __esm({
     "../utils/dist/esm/if.js"() {
       init_types();
+      init_object();
       createIfConditionFlag = (element, parent) => {
         const { __ref: ref } = element;
-        if (isFunction(element.if) && !element.if(element, element.state, element.context)) {
-          delete ref.__if;
-        } else ref.__if = true;
+        const ifVal = element.if;
+        if (isFunction(ifVal)) {
+          if (!ifVal(element, element.state, element.context)) {
+            delete ref.__if;
+          } else ref.__if = true;
+        } else if (ifVal != null && typeof ifVal === "object") {
+          const result = exec(ifVal, element);
+          if (!result) delete ref.__if;
+          else ref.__if = true;
+        } else {
+          ref.__if = true;
+        }
       };
     }
   });
@@ -1335,7 +1356,7 @@ var DomqlElement = (() => {
       const isElement = RE_UPPER.test(key) || RE_DIGITS.test(key) || looksLikeElement(value);
       const isBuiltin = DOMQ_PROPERTIES.has(key);
       if (!isElement && !isBuiltin) {
-        obj.props[key] = value;
+        if (!(key in obj.props)) obj.props[key] = value;
         delete obj[key];
         cachedKeys.push(key);
       }
@@ -1863,13 +1884,18 @@ var DomqlElement = (() => {
           if (result && typeof result.then === "function") {
             result.catch((err) => {
               element.error = err;
-              console.error("[DOMQL] Async event error:", err);
+              if (err instanceof ReferenceError) console.warn("[DOMQL] Async event warning:", err.message);
+              else console.error("[DOMQL] Async event error:", err);
             });
           }
           return result;
         } catch (err) {
           element.error = err;
-          console.error("[DOMQL] Event handler error:", err);
+          if (err instanceof ReferenceError) {
+            console.warn("[DOMQL] Event handler warning:", err.message);
+          } else {
+            console.error("[DOMQL] Event handler error:", err);
+          }
           if (element.context?.strictMode) throw err;
         }
       };
@@ -2605,6 +2631,7 @@ var DomqlElement = (() => {
           const session = await adapter.getSession();
           updateAuth(session?.user || null, session);
         } catch (e) {
+          console.warn("[fetch] Failed to restore auth session:", e.message);
         }
         if (adapter.onAuthStateChange) {
           adapter.onAuthStateChange((event, session) => {
@@ -6464,7 +6491,18 @@ ${element}` : "";
     "onfullscreenchange",
     "onfullscreenerror"
   ];
+  var camelToAttr = (key) => {
+    if (key.startsWith("aria") && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+      return "aria-" + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+    }
+    if (key.startsWith("data") && key.length > 4 && key.charCodeAt(4) >= 65 && key.charCodeAt(4) <= 90) {
+      return "data-" + key.charAt(4).toLowerCase() + key.slice(5).replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+    }
+    return null;
+  };
   var checkAttributeByTagName = (tag, attribute) => {
+    if (attribute.startsWith("aria-") || attribute.startsWith("data-")) return true;
+    if (camelToAttr(attribute)) return true;
     if (Object.prototype.hasOwnProperty.call(HTML_ATTRIBUTES, tag)) {
       const attributes = HTML_ATTRIBUTES[tag];
       return attributes.includes(attribute) || attributes.includes("default");
@@ -6483,25 +6521,139 @@ ${element}` : "";
     for (const key in props) {
       if (Object.prototype.hasOwnProperty.call(props, key)) {
         if (cssProps && key in cssProps) continue;
+        if (key === "aria" && props[key] && typeof props[key] === "object") {
+          for (const ariaKey in props[key]) {
+            if (isDefined(props[key][ariaKey])) {
+              filteredObject["aria-" + ariaKey] = props[key][ariaKey];
+            }
+          }
+          continue;
+        }
+        if (key === "data" && props[key] && typeof props[key] === "object") {
+          for (const dataKey in props[key]) {
+            if (isDefined(props[key][dataKey])) {
+              const kebab = dataKey.replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+              filteredObject["data-" + kebab] = props[key][dataKey];
+            }
+          }
+          continue;
+        }
         const isAttribute = checkAttributeByTagName(tag, key);
         const isEvent = checkEventFunctions(key);
         if (isDefined(props[key]) && (isAttribute || isEvent)) {
-          filteredObject[key] = props[key];
+          const attrName = camelToAttr(key) || key;
+          filteredObject[attrName] = props[key];
         }
       }
     }
     return filteredObject;
   };
+  var resolvePropValue = (el, value) => {
+    let resolved = el.call("exec", value, el);
+    if (!resolved) return;
+    if (isString(resolved) && resolved.includes("{{")) {
+      resolved = el.call("replaceLiteralsWithObjectFields", resolved);
+    }
+    return resolved;
+  };
+  var resolveFileSource = (el, value) => {
+    let src = (el.props.preSrc || "") + (resolvePropValue(el, value) || "");
+    if (!src) return;
+    try {
+      new URL(src);
+      return src;
+    } catch (e) {
+    }
+    const { context } = el;
+    if (!context.files) return src;
+    const fileSrc = src.startsWith("/files/") ? src.slice(7) : src;
+    const file = context.files[src] || context.files[fileSrc];
+    if (file && file.content) return file.content.src;
+    return src;
+  };
+  var ATTR_TRANSFORMS = {
+    src: (el) => resolveFileSource(el, el.props.src),
+    href: (el) => resolvePropValue(el, el.props.href),
+    action: (el) => resolvePropValue(el, el.props.action),
+    poster: (el) => resolveFileSource(el, el.props.poster),
+    data: (el) => resolvePropValue(el, el.props.data)
+  };
+  var resolveCase = (caseKey, element) => {
+    const caseFn = element.context?.cases?.[caseKey];
+    if (caseFn === void 0) return void 0;
+    if (isFunction(caseFn)) return caseFn.call(element, element);
+    return !!caseFn;
+  };
+  var evaluateCondition = (prefix, caseKey, element) => {
+    if (prefix === "$") {
+      let result = resolveCase(caseKey, element);
+      if (result === void 0) result = !!element.props?.[caseKey];
+      return result;
+    }
+    let isTruthy = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+    if (!isTruthy) {
+      const caseResult = resolveCase(caseKey, element);
+      if (caseResult !== void 0) isTruthy = caseResult;
+    }
+    return prefix === "." ? !!isTruthy : !isTruthy;
+  };
+  var CONDITIONAL_PREFIXES = /* @__PURE__ */ new Set(["$", ".", "!"]);
+  var extractConditionalAttrs = (props, tag, cssProps) => {
+    const result = {};
+    const addConditionalAttr = (attrName, attrVal, prefix, caseKey) => {
+      const capturedVal = attrVal;
+      result[attrName] = (el) => {
+        if (!evaluateCondition(prefix, caseKey, el)) return void 0;
+        return isFunction(capturedVal) ? capturedVal(el) : capturedVal;
+      };
+    };
+    for (const key in props) {
+      const prefix = key.charAt(0);
+      if (!CONDITIONAL_PREFIXES.has(prefix)) continue;
+      const block = props[key];
+      if (!block || typeof block !== "object") continue;
+      const caseKey = key.slice(1);
+      for (const attrKey in block) {
+        if (cssProps && attrKey in cssProps) continue;
+        if (attrKey === "aria" && block[attrKey] && typeof block[attrKey] === "object") {
+          for (const ariaKey in block[attrKey]) {
+            addConditionalAttr("aria-" + ariaKey, block[attrKey][ariaKey], prefix, caseKey);
+          }
+          continue;
+        }
+        if (attrKey === "data" && block[attrKey] && typeof block[attrKey] === "object") {
+          for (const dataKey in block[attrKey]) {
+            const kebab = dataKey.replace(/([A-Z])/g, (m) => "-" + m.toLowerCase());
+            addConditionalAttr("data-" + kebab, block[attrKey][dataKey], prefix, caseKey);
+          }
+          continue;
+        }
+        const isAttribute = checkAttributeByTagName(tag, attrKey);
+        const isEvent = checkEventFunctions(attrKey);
+        if (!isAttribute && !isEvent) continue;
+        const attrName = camelToAttr(attrKey) || attrKey;
+        addConditionalAttr(attrName, block[attrKey], prefix, caseKey);
+      }
+    }
+    return result;
+  };
 
   // create.js
   var EXCLUDED_ATTRS = /* @__PURE__ */ new Set(["class", "style"]);
   var applyPropsAsAttrs = (element) => {
     const { tag, props, context } = element;
     if (!tag || !props) return;
-    const autoAttrs = filterAttributesByTagName(tag, props, context?.cssPropsRegistry);
+    const cssProps = context?.cssPropsRegistry;
+    const autoAttrs = filterAttributesByTagName(tag, props, cssProps);
+    const conditionalAttrs = extractConditionalAttrs(props, tag, cssProps);
     const filtered = {};
     for (const key in autoAttrs) {
-      if (!EXCLUDED_ATTRS.has(key)) filtered[key] = autoAttrs[key];
+      if (!EXCLUDED_ATTRS.has(key)) {
+        filtered[key] = ATTR_TRANSFORMS[key] ? ATTR_TRANSFORMS[key] : autoAttrs[key];
+      }
+    }
+    for (const key in conditionalAttrs) {
+      if (!EXCLUDED_ATTRS.has(key)) filtered[key] = conditionalAttrs[key];
     }
     let hasFiltered = false;
     for (const _k in filtered) {
@@ -6610,7 +6762,8 @@ ${element}` : "";
           isDemoComponent ? isDemoComponent + " " : "" + path.join(".")
         );
         element.verbose();
-        console.error("[DOMQL] Render error:", e);
+        if (e instanceof ReferenceError) console.warn("[DOMQL] Render warning:", e.message);
+        else console.error("[DOMQL] Render error:", e);
         if (element.on?.error) {
           element.on.error(e, element, element.state, element.context, options);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "3.8.0",
+  "version": "3.8.6",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -46,10 +46,10 @@
     "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=DomqlElement --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV"
   },
   "dependencies": {
-    "@domql/report": "^3.8.0",
-    "@domql/state": "^3.8.0",
-    "@domql/utils": "^3.8.0",
-    "attrs-in-props": "^3.8.0"
+    "@domql/report": "^3.8.6",
+    "@domql/state": "^3.8.6",
+    "@domql/utils": "^3.8.6",
+    "attrs-in-props": "^3.8.6"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {