attrs-in-props 3.14.0 → 3.14.1

package/dist/cjs/index.js

@@ -19,20 +19,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ARIA_ROLES: () => ARIA_ROLES,
-  ATTR_TRANSFORMS: () => ATTR_TRANSFORMS,
   DOM_EVENTS: () => DOM_EVENTS,
   HTML_ATTRIBUTES: () => HTML_ATTRIBUTES,
-  applyAttrTransforms: () => applyAttrTransforms,
   checkAttributeByTagName: () => checkAttributeByTagName,
   checkEventFunctions: () => checkEventFunctions,
   executeAttr: () => executeAttr,
-  extractConditionalAttrs: () => extractConditionalAttrs,
-  filterAttributesByTagName: () => filterAttributesByTagName,
-  resolveFileSource: () => resolveFileSource,
-  resolvePropValue: () => resolvePropValue
+  filterAttributesByTagName: () => filterAttributesByTagName
 });
 module.exports = __toCommonJS(index_exports);
-var import_utils = require("@symbo.ls/utils");
+var import_utils = require("@domql/utils");
 const ARIA_ROLES = [
   "alert",
   "alertdialog",
@@ -222,15 +217,7 @@ const HTML_ATTRIBUTES = {
     "type",
     "referrerpolicy"
   ],
-  audio: [
-    "autoplay",
-    "controls",
-    "crossorigin",
-    "loop",
-    "muted",
-    "preload",
-    "src"
-  ],
+  audio: [],
   area: [
     "alt",
     "coords",
@@ -321,7 +308,6 @@ const HTML_ATTRIBUTES = {
     "loading",
     "marginheight",
     "marginwidth",
-    "mozallowfullscreen",
     "name",
     "referrerpolicy",
     "sandbox",
@@ -329,7 +315,6 @@ const HTML_ATTRIBUTES = {
     "seamless",
     "src",
     "srcdoc",
-    "webkitallowfullscreen",
     "width"
   ],
   img: [
@@ -590,19 +575,12 @@ const HTML_ATTRIBUTES = {
     "srclang"
   ],
   video: [
-    "autoplay",
-    "controls",
-    "crossorigin",
-    "disablepictureinpicture",
-    "disableremoteplayback",
     "height",
-    "loop",
-    "muted",
     "playsinline",
     "poster",
-    "preload",
-    "src",
-    "width"
+    "width",
+    "disablepictureinpicture",
+    "disableremoteplayback"
   ],
   svg: [
     "className",
@@ -994,18 +972,7 @@ const DOM_EVENTS = [
   "onfullscreenchange",
   "onfullscreenerror"
 ];
-const 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;
-};
 const 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");
@@ -1019,33 +986,14 @@ const checkEventFunctions = (key) => {
   const normalizedKey = key.toLowerCase();
   return DOM_EVENTS.includes(normalizedKey);
 };
-const filterAttributesByTagName = (tag, props, cssProps) => {
+const filterAttributesByTagName = (tag, props) => {
   const filteredObject = {};
   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 ((0, import_utils.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 ((0, import_utils.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 ((0, import_utils.isDefined)(props[key]) && (isAttribute || isEvent)) {
-        const attrName = camelToAttr(key) || key;
-        filteredObject[attrName] = props[key];
+        filteredObject[key] = props[key];
       }
     }
   }
@@ -1060,120 +1008,3 @@ const executeAttr = (elem, element) => {
   }
   return attrObj;
 };
-const resolvePropValue = (el, value) => {
-  let resolved = el.call("exec", value, el);
-  if (!resolved) return;
-  if ((0, import_utils.isString)(resolved) && resolved.includes("{{")) {
-    resolved = el.call("replaceLiteralsWithObjectFields", resolved);
-  }
-  return resolved;
-};
-const resolveFileSource = (el, value) => {
-  let src = (el.preSrc || "") + (resolvePropValue(el, value) || "");
-  if (!src) return;
-  try {
-    new URL(src);
-    return src;
-  } catch (e) {
-  }
-  const { context } = el;
-  if (!context.files && !context.assets) return src;
-  if (src.startsWith("/assets/")) {
-    const key = src.slice(8);
-    const asset = context.assets && (context.assets[src] || context.assets[key]);
-    if (asset && asset.content) return asset.content.src;
-    return src;
-  }
-  if (src.startsWith("/files/")) {
-    const key = src.slice(7);
-    const file = context.files && (context.files[src] || context.files[key]);
-    if (file && file.content) return file.content.src;
-    return src;
-  }
-  if (context.assets) {
-    const asset = context.assets[src];
-    if (asset && asset.content) return asset.content.src;
-  }
-  if (context.files) {
-    const file = context.files[src];
-    if (file && file.content) return file.content.src;
-  }
-  return src;
-};
-const ATTR_TRANSFORMS = {
-  src: (el) => resolveFileSource(el, el.src),
-  href: (el) => resolvePropValue(el, el.href),
-  action: (el) => resolvePropValue(el, el.action),
-  poster: (el) => resolveFileSource(el, el.poster),
-  data: (el) => resolvePropValue(el, el.data)
-};
-const applyAttrTransforms = (element) => {
-  const tag = element.tag || "div";
-  const result = {};
-  for (const attr in ATTR_TRANSFORMS) {
-    if (element[attr] !== void 0 && checkAttributeByTagName(tag, attr)) {
-      const val = ATTR_TRANSFORMS[attr](element);
-      if (val !== void 0) result[attr] = val;
-    }
-  }
-  return result;
-};
-const resolveCase = (caseKey, element) => {
-  const caseFn = element.context?.cases?.[caseKey];
-  if (caseFn === void 0) return void 0;
-  if ((0, import_utils.isFunction)(caseFn)) return caseFn.call(element, element);
-  return !!caseFn;
-};
-const evaluateCondition = (prefix, caseKey, element) => {
-  if (prefix === "$") {
-    let result = resolveCase(caseKey, element);
-    if (result === void 0) result = !!element[caseKey];
-    return result;
-  }
-  let isTruthy = element[caseKey] === true || element.state[caseKey];
-  if (!isTruthy) {
-    const caseResult = resolveCase(caseKey, element);
-    if (caseResult !== void 0) isTruthy = caseResult;
-  }
-  return prefix === "." ? !!isTruthy : !isTruthy;
-};
-const CONDITIONAL_PREFIXES = /* @__PURE__ */ new Set(["$", ".", "!"]);
-const 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 (0, import_utils.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;
-};

package/dist/cjs/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "commonjs",
+  "main": "index.js"
+}

package/index.js

@@ -1057,13 +1057,19 @@ export const checkAttributeByTagName = (tag, attribute) => {
   // camelCase aria/data attrs
   if (camelToAttr(attribute)) return true
 
+  // Global attributes (`title`, `id`, `class`, `role`, `tabindex`, `hidden`,
+  // `lang`, `dir`, `draggable`, `contenteditable`, `spellcheck`, `slot`, …)
+  // apply to every tag. Prior behavior only consulted HTML_ATTRIBUTES.default
+  // for tags WITHOUT a per-tag list, which silently dropped global attrs on
+  // every typed tag (button/a/img/input/...). Always allow defaults first,
+  // then tag-specific extras.
+  if (HTML_ATTRIBUTES.default.includes(attribute)) return true
+
   if (Object.prototype.hasOwnProperty.call(HTML_ATTRIBUTES, tag)) {
     const attributes = HTML_ATTRIBUTES[tag]
-    return attributes.includes(attribute) || attributes.includes('default')
-  } else {
-    const defaultAttributes = HTML_ATTRIBUTES.default
-    return defaultAttributes.includes(attribute)
+    return attributes.includes(attribute)
   }
+  return false
 }
 
 export const checkEventFunctions = (key) => {
@@ -1080,6 +1086,11 @@ export const filterAttributesByTagName = (tag, props, cssProps) => {
       if (cssProps && key in cssProps) continue
 
       // aria: { label: 'foo', expanded: true } → aria-label, aria-expanded
+      // Function values are stored as-is here; `executeAttr` is the single
+      // place that resolves reactive (el, state) → string for HTML attrs.
+      // We funnel aria/data through `attr` instead of duplicating execution
+      // logic so v3.14 reactive aria/data attributes work with the same
+      // re-render cycle as `attr.foo` — see FA-L1.
       if (key === 'aria' && props[key] && typeof props[key] === 'object') {
         for (const ariaKey in props[key]) {
           if (isDefined(props[key][ariaKey])) {
@@ -1119,6 +1130,29 @@ export const executeAttr = (elem, element) => {
       attrObj[attrProp] = elem.attr[attrProp](element, element.state, element.context)
     }
   }
+  // FA-L1: aria.X and data.X with FUNCTION values must execute the same way
+  // as attr.X. Without this, `aria: { label: (el, s) => s.text }` writes a
+  // function reference to the DOM attribute and renders as `null`.
+  // Static (non-function) aria/data values are already promoted to flat
+  // attributes by `filterAttributesByTagName`; we only handle functions
+  // here to avoid double-write.
+  if (elem.aria && typeof elem.aria === 'object') {
+    for (const ariaKey in elem.aria) {
+      const v = elem.aria[ariaKey]
+      if (typeof v === 'function') {
+        attrObj['aria-' + ariaKey] = v(element, element.state, element.context)
+      }
+    }
+  }
+  if (elem.data && typeof elem.data === 'object') {
+    for (const dataKey in elem.data) {
+      const v = elem.data[dataKey]
+      if (typeof v === 'function') {
+        const kebab = dataKey.replace(/([A-Z])/g, (m) => '-' + m.toLowerCase())
+        attrObj['data-' + kebab] = v(element, element.state, element.context)
+      }
+    }
+  }
   return attrObj
 }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "attrs-in-props",
   "description": "Utilize props as attributes",
   "author": "symbo.ls",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "./index.js",