@domql/element 3.7.6 → 3.8.1

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

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) {

package/dist/cjs/mixins/text.js

@@ -26,6 +26,7 @@ var import_create = require("../create.js");
 var import_utils = require("@domql/utils");
 function text(param, element, node) {
   let prop = (0, import_utils.exec)(element.props.text || param, element);
+  if ((0, import_utils.isFunction)(prop)) prop = (0, import_utils.exec)(prop, element);
   if ((0, import_utils.isString)(prop) && prop.includes("{{")) {
     prop = element.call("replaceLiteralsWithObjectFields", prop, element.state);
   }

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) {

package/dist/esm/mixins/text.js

@@ -1,7 +1,8 @@
 import { create } from "../create.js";
-import { exec, isString, SVG_TAGS } from "@domql/utils";
+import { exec, isFunction, isString, SVG_TAGS } from "@domql/utils";
 function text(param, element, node) {
   let prop = exec(element.props.text || param, element);
+  if (isFunction(prop)) prop = exec(prop, element);
   if (isString(prop) && prop.includes("{{")) {
     prop = element.call("replaceLiteralsWithObjectFields", prop, element.state);
   }

package/dist/iife/index.js

@@ -1335,7 +1335,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);
       }
@@ -2605,6 +2605,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) => {
@@ -4425,6 +4426,7 @@ ${element}` : "";
   init_esm();
   function text(param, element, node) {
     let prop = exec(element.props.text || param, element);
+    if (isFunction(prop)) prop = exec(prop, element);
     if (isString(prop) && prop.includes("{{")) {
       prop = element.call("replaceLiteralsWithObjectFields", prop, element.state);
     }
@@ -6463,7 +6465,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");
@@ -6482,25 +6495,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) {

package/mixins/text.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { create } from '../create.js'
-import { exec, isString, SVG_TAGS } from '@domql/utils'
+import { exec, isFunction, isString, SVG_TAGS } from '@domql/utils'
 
 /**
  * Creates a text node and appends into
@@ -9,6 +9,7 @@ import { exec, isString, SVG_TAGS } from '@domql/utils'
  */
 export function text (param, element, node) {
   let prop = exec(element.props.text || param, element)
+  if (isFunction(prop)) prop = exec(prop, element)
   if (isString(prop) && prop.includes('{{')) {
     prop = element.call('replaceLiteralsWithObjectFields', prop, element.state)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "3.7.6",
+  "version": "3.8.1",
   "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.7.6",
-    "@domql/state": "^3.7.6",
-    "@domql/utils": "^3.7.6",
-    "attrs-in-props": "^3.7.6"
+    "@domql/report": "^3.8.1",
+    "@domql/state": "^3.8.1",
+    "@domql/utils": "^3.8.1",
+    "attrs-in-props": "^3.8.1"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {