@domql/element 3.7.0 → 3.7.4

package/dist/cjs/event/on.js

@@ -36,7 +36,7 @@ const getOnOrPropsEvent = (param, element) => {
   return props[propKey];
 };
 const registerNodeEvent = (param, element, node, options) => {
-  const appliedFunction = getOnOrPropsEvent(param, element);
+  const appliedFunction = (0, import_utils.resolveHandler)(getOnOrPropsEvent(param, element), element);
   if ((0, import_utils.isFunction)(appliedFunction)) {
     const { __ref: ref } = element;
     if (!ref.__eventListeners) ref.__eventListeners = {};
@@ -71,22 +71,9 @@ const registerNodeEvent = (param, element, node, options) => {
   }
 };
 const applyEventsOnNode = (element, options) => {
-  const { node, on, props } = element;
-  const handled = /* @__PURE__ */ new Set();
+  const { node, on } = element;
   for (const param in on) {
     if (import_utils.DOMQL_EVENTS.has(param)) continue;
-    handled.add(param);
     registerNodeEvent(param, element, node, options);
   }
-  if (props) {
-    for (const key in props) {
-      if (key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && (0, import_utils.isFunction)(props[key])) {
-        const thirdChar = key[2];
-        if (thirdChar !== thirdChar.toUpperCase()) continue;
-        const eventName = thirdChar.toLowerCase() + key.slice(3);
-        if (handled.has(eventName) || import_utils.DOMQL_EVENTS.has(eventName)) continue;
-        registerNodeEvent(eventName, element, node, options);
-      }
-    }
-  }
 };

package/dist/cjs/mixins/attr.js

@@ -32,7 +32,10 @@ function attr(params, element, node) {
     const attrs = (0, import_utils.exec)(params, element);
     if (props.attr) (0, import_utils.deepMerge)(attrs, props.attr);
     for (const attr2 in attrs) {
-      const val = (0, import_utils.exec)(attrs[attr2], element);
+      let val = (0, import_utils.exec)(attrs[attr2], element);
+      if ((0, import_utils.isString)(val) && val.includes("{{") && element.call) {
+        val = element.call("replaceLiteralsWithObjectFields", val, element.state);
+      }
       if (val === __attr[attr2]) continue;
       if (val !== false && val !== void 0 && val !== null && node.setAttribute) {
         node.setAttribute(attr2, val);

package/dist/cjs/mixins/html.js

@@ -24,7 +24,10 @@ __export(html_exports, {
 module.exports = __toCommonJS(html_exports);
 var import_utils = require("@domql/utils");
 function html(param, element, node) {
-  const prop = (0, import_utils.exec)(param ?? element?.props?.html, element);
+  let prop = (0, import_utils.exec)(param ?? element?.props?.html, element);
+  if ((0, import_utils.isString)(prop) && prop.includes("{{") && element.call) {
+    prop = element.call("replaceLiteralsWithObjectFields", prop, element.state);
+  }
   const { __ref } = element;
   if (prop !== __ref.__html) {
     if (node.nodeName === "SVG") node.textContent = prop;

package/dist/cjs/utils/propEvents.js

@@ -33,24 +33,29 @@ const propagateEventsFromProps = (element) => {
     if ((0, import_utils.isFunction)(origEvent)) {
       on[eventName] = (...args) => {
         const originalEventRetunrs = origEvent(...args);
-        if (originalEventRetunrs !== false) return funcFromProps(...args);
+        if (originalEventRetunrs !== false) {
+          if ((0, import_utils.isFunction)(funcFromProps)) return funcFromProps(...args);
+        }
       };
     } else on[eventName] = funcFromProps;
   }
 };
 const propagateEventsFromElement = (element) => {
   const { on } = element;
+  const pluginActive = (0, import_utils.hasHandlerPlugin)(element.context);
   for (const param in element) {
     if (param.charCodeAt(0) !== 111 || param.charCodeAt(1) !== 110 || !Object.prototype.hasOwnProperty.call(element, param)) continue;
-    const fn = element[param];
-    if (!(0, import_utils.isFunction)(fn)) continue;
+    const handler = element[param];
+    if (!(0, import_utils.isFunction)(handler) && !(pluginActive && handler != null)) continue;
     const eventName = (0, import_utils.lowercaseFirstLetter)(param.slice(2));
     const origEvent = on[eventName];
     if ((0, import_utils.isFunction)(origEvent)) {
       on[eventName] = (...args) => {
         const ret = origEvent(...args);
-        if (ret !== false) return fn(...args);
+        if (ret !== false) {
+          if ((0, import_utils.isFunction)(handler)) return handler(...args);
+        }
       };
-    } else on[eventName] = fn;
+    } else on[eventName] = handler;
   }
 };

package/dist/esm/event/on.js

@@ -1,4 +1,4 @@
-import { DOMQL_EVENTS, isFunction } from "@domql/utils";
+import { DOMQL_EVENTS, isFunction, resolveHandler } from "@domql/utils";
 import { applyEvent, triggerEventOn, applyEventUpdate, triggerEventOnUpdate } from "@domql/utils";
 const getOnOrPropsEvent = (param, element) => {
   const onEvent = element.on?.[param];
@@ -9,7 +9,7 @@ const getOnOrPropsEvent = (param, element) => {
   return props[propKey];
 };
 const registerNodeEvent = (param, element, node, options) => {
-  const appliedFunction = getOnOrPropsEvent(param, element);
+  const appliedFunction = resolveHandler(getOnOrPropsEvent(param, element), element);
   if (isFunction(appliedFunction)) {
     const { __ref: ref } = element;
     if (!ref.__eventListeners) ref.__eventListeners = {};
@@ -44,24 +44,11 @@ const registerNodeEvent = (param, element, node, options) => {
   }
 };
 const applyEventsOnNode = (element, options) => {
-  const { node, on, props } = element;
-  const handled = /* @__PURE__ */ new Set();
+  const { node, on } = element;
   for (const param in on) {
     if (DOMQL_EVENTS.has(param)) continue;
-    handled.add(param);
     registerNodeEvent(param, element, node, options);
   }
-  if (props) {
-    for (const key in props) {
-      if (key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && isFunction(props[key])) {
-        const thirdChar = key[2];
-        if (thirdChar !== thirdChar.toUpperCase()) continue;
-        const eventName = thirdChar.toLowerCase() + key.slice(3);
-        if (handled.has(eventName) || DOMQL_EVENTS.has(eventName)) continue;
-        registerNodeEvent(eventName, element, node, options);
-      }
-    }
-  }
 };
 export {
   applyEvent,

package/dist/esm/mixins/attr.js

@@ -1,4 +1,4 @@
-import { deepMerge, exec, isNot } from "@domql/utils";
+import { deepMerge, exec, isNot, isString } from "@domql/utils";
 import { report } from "@domql/report";
 function attr(params, element, node) {
   const { __ref: ref, props } = element;
@@ -8,7 +8,10 @@ function attr(params, element, node) {
     const attrs = exec(params, element);
     if (props.attr) deepMerge(attrs, props.attr);
     for (const attr2 in attrs) {
-      const val = exec(attrs[attr2], element);
+      let val = exec(attrs[attr2], element);
+      if (isString(val) && val.includes("{{") && element.call) {
+        val = element.call("replaceLiteralsWithObjectFields", val, element.state);
+      }
       if (val === __attr[attr2]) continue;
       if (val !== false && val !== void 0 && val !== null && node.setAttribute) {
         node.setAttribute(attr2, val);

package/dist/esm/mixins/html.js

@@ -1,6 +1,9 @@
-import { exec } from "@domql/utils";
+import { exec, isString } from "@domql/utils";
 function html(param, element, node) {
-  const prop = exec(param ?? element?.props?.html, element);
+  let prop = exec(param ?? element?.props?.html, element);
+  if (isString(prop) && prop.includes("{{") && element.call) {
+    prop = element.call("replaceLiteralsWithObjectFields", prop, element.state);
+  }
   const { __ref } = element;
   if (prop !== __ref.__html) {
     if (node.nodeName === "SVG") node.textContent = prop;

package/dist/esm/utils/propEvents.js

@@ -1,4 +1,4 @@
-import { isFunction, lowercaseFirstLetter } from "@domql/utils";
+import { isFunction, hasHandlerPlugin, lowercaseFirstLetter } from "@domql/utils";
 const propagateEventsFromProps = (element) => {
   const { props, on } = element;
   for (const v in props) {
@@ -9,25 +9,30 @@ const propagateEventsFromProps = (element) => {
     if (isFunction(origEvent)) {
       on[eventName] = (...args) => {
         const originalEventRetunrs = origEvent(...args);
-        if (originalEventRetunrs !== false) return funcFromProps(...args);
+        if (originalEventRetunrs !== false) {
+          if (isFunction(funcFromProps)) return funcFromProps(...args);
+        }
       };
     } else on[eventName] = funcFromProps;
   }
 };
 const propagateEventsFromElement = (element) => {
   const { on } = element;
+  const pluginActive = hasHandlerPlugin(element.context);
   for (const param in element) {
     if (param.charCodeAt(0) !== 111 || param.charCodeAt(1) !== 110 || !Object.prototype.hasOwnProperty.call(element, param)) continue;
-    const fn = element[param];
-    if (!isFunction(fn)) continue;
+    const handler = element[param];
+    if (!isFunction(handler) && !(pluginActive && handler != null)) continue;
     const eventName = lowercaseFirstLetter(param.slice(2));
     const origEvent = on[eventName];
     if (isFunction(origEvent)) {
       on[eventName] = (...args) => {
         const ret = origEvent(...args);
-        if (ret !== false) return fn(...args);
+        if (ret !== false) {
+          if (isFunction(handler)) return handler(...args);
+        }
       };
-    } else on[eventName] = fn;
+    } else on[eventName] = handler;
   }
 };
 export {

package/dist/iife/index.js

@@ -631,8 +631,38 @@ var DomqlElement = (() => {
   });
 
   // ../utils/dist/esm/function.js
+  var hasHandlerPlugin, resolveHandler, runPluginHook;
   var init_function = __esm({
     "../utils/dist/esm/function.js"() {
+      hasHandlerPlugin = (ctx) => {
+        const plugins = ctx?.plugins;
+        if (!plugins || !plugins.length) return false;
+        for (const plugin of plugins) {
+          if (plugin.resolveHandler) return true;
+        }
+        return false;
+      };
+      resolveHandler = (handler, element) => {
+        if (typeof handler === "function") return handler;
+        const plugins = element?.context?.plugins;
+        if (!plugins) return handler;
+        for (const plugin of plugins) {
+          if (plugin.resolveHandler) {
+            const resolved = plugin.resolveHandler(handler, element);
+            if (typeof resolved === "function") return resolved;
+          }
+        }
+        return handler;
+      };
+      runPluginHook = (hookName, element, ...args) => {
+        const plugins = element?.context?.plugins;
+        if (!plugins) return;
+        for (const plugin of plugins) {
+          if (typeof plugin[hookName] === "function") {
+            plugin[hookName](element, ...args);
+          }
+        }
+      };
     }
   });
 
@@ -1050,14 +1080,17 @@ var DomqlElement = (() => {
         }
         return element;
       };
-      trackSourcemapDeep = (sourcemap, obj, sourceName) => {
+      trackSourcemapDeep = (sourcemap, obj, sourceName, seen) => {
+        if (!seen) seen = /* @__PURE__ */ new WeakSet();
+        if (seen.has(obj)) return;
+        seen.add(obj);
         for (const key in obj) {
           if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
           if (key === "__proto__" || key === "constructor" || key === "prototype") continue;
           const val = obj[key];
           if (isObject(val) && !isArray(val)) {
             sourcemap[key] = sourcemap[key] || {};
-            trackSourcemapDeep(sourcemap[key], val, sourceName);
+            trackSourcemapDeep(sourcemap[key], val, sourceName, seen);
           } else {
             sourcemap[key] = sourceName;
           }
@@ -1255,7 +1288,9 @@ var DomqlElement = (() => {
     if (isFunction(origEvent)) {
       on[eventName] = (...args) => {
         const originalEventRetunrs = origEvent(...args);
-        if (originalEventRetunrs !== false) funcFromProps(...args);
+        if (originalEventRetunrs !== false) {
+          if (isFunction(funcFromProps)) return funcFromProps(...args);
+        }
       };
     } else on[eventName] = funcFromProps;
   }
@@ -1271,7 +1306,8 @@ var DomqlElement = (() => {
     const cachedKeys = opts.cachedKeys || [];
     for (const key in obj) {
       const value = obj[key];
-      const isEventHandler = key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key[2] === key[2].toUpperCase() && isFunction(value);
+      const isOnKey = key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key[2] === key[2].toUpperCase();
+      const isEventHandler = isOnKey && (isFunction(value) || value != null && hasHandlerPlugin(this.context));
       if (isEventHandler) {
         const eventName = lowercaseFirstLetter(key.slice(2));
         if (obj.on) obj.on[eventName] = value;
@@ -1311,8 +1347,8 @@ var DomqlElement = (() => {
     for (const key in obj.props) {
       const value = obj.props[key];
       const isEvent = key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;
-      const isFn = isFunction(value);
-      if (isEvent && isFn) {
+      const isHandler = isFunction(value) || value != null && hasHandlerPlugin(this.context);
+      if (isEvent && isHandler) {
         addEventFromProps(key, obj);
         delete obj.props[key];
         continue;
@@ -1363,6 +1399,7 @@ var DomqlElement = (() => {
       init_object();
       init_types();
       init_string();
+      init_function();
       RE_UPPER = /^[A-Z]/;
       RE_DIGITS = /^\d+$/;
       CSS_SELECTOR_PREFIXES = /* @__PURE__ */ new Set([":", "@", "[", "*", "+", "~", "&", ">", "$", "-", ".", "!"]);
@@ -1786,6 +1823,7 @@ var DomqlElement = (() => {
   var init_triggerEvent = __esm({
     "../utils/dist/esm/triggerEvent.js"() {
       init_types();
+      init_function();
       getOnOrPropsEvent = (param, element) => {
         const onEvent = element.on?.[param];
         if (onEvent) return onEvent;
@@ -1795,6 +1833,7 @@ var DomqlElement = (() => {
         return props[propKey];
       };
       applyEvent = (param, element, state2, context, options) => {
+        param = resolveHandler(param, element);
         if (!isFunction(param)) return;
         try {
           const result = param.call(
@@ -1821,6 +1860,7 @@ var DomqlElement = (() => {
         if (!element) {
           throw new Error("Element is required");
         }
+        runPluginHook(param, element, options);
         const appliedFunction = getOnOrPropsEvent(param, element);
         if (appliedFunction) {
           const { state: state2, context } = element;
@@ -1828,6 +1868,7 @@ var DomqlElement = (() => {
         }
       };
       applyEventUpdate = (param, updatedObj, element, state2, context, options) => {
+        param = resolveHandler(param, element);
         if (!isFunction(param)) return;
         try {
           const result = param.call(
@@ -1852,6 +1893,7 @@ var DomqlElement = (() => {
         }
       };
       triggerEventOnUpdate = (param, updatedObj, element, options) => {
+        runPluginHook(param, element, updatedObj, options);
         const appliedFunction = getOnOrPropsEvent(param, element);
         if (appliedFunction) {
           const { state: state2, context } = element;
@@ -2307,13 +2349,14 @@ var DomqlElement = (() => {
     createAdapter: () => createAdapter,
     default: () => fetch_default,
     executeFetch: () => executeFetch,
+    fetchPlugin: () => fetchPlugin,
     initAdapterAuth: () => initAdapterAuth,
     parseDuration: () => parseDuration,
     queryClient: () => queryClient,
     registerAdapter: () => registerAdapter,
     resolveDb: () => resolveDb
   });
-  var ADAPTER_METHODS, BUILTIN_ADAPTERS, registerAdapter, createAdapter, resolveDb, parseDuration, cacheStore, querySubscribers, activeQueries, buildCacheKey, getCacheEntry, setCacheEntry, invalidateCache, removeCache, parseCacheConfig, gcTimer, startGC, DEFAULT_RETRY, DEFAULT_RETRY_DELAY, resolveRetryConfig, withRetry, globalListeners, globalListenersAttached, attachGlobalListeners, resolveFetchConfig, resolveParamsSync, resolveParams, initAdapterAuth, resolveAdapter, triggerCallback, collectFormData, updateElementState, setFetchStatus, runFetch, bindEvent, bindAutoRefetch, applyOptimisticUpdate, rollbackOptimistic, runMutation, executeFetch, queryClient, fetch_default;
+  var ADAPTER_METHODS, BUILTIN_ADAPTERS, registerAdapter, createAdapter, resolveDb, parseDuration, cacheStore, querySubscribers, activeQueries, buildCacheKey, getCacheEntry, setCacheEntry, invalidateCache, removeCache, parseCacheConfig, gcTimer, startGC, DEFAULT_RETRY, DEFAULT_RETRY_DELAY, resolveRetryConfig, withRetry, globalListeners, globalListenersAttached, attachGlobalListeners, resolveFetchConfig, resolveParamsSync, resolveLanguage, resolveParams, initAdapterAuth, resolveAdapter, triggerCallback, collectFormData, updateElementState, setFetchStatus, runFetch, bindEvent, bindAutoRefetch, applyOptimisticUpdate, rollbackOptimistic, runMutation, executeFetch, queryClient, fetchPlugin, fetch_default;
   var init_fetch = __esm({
     "../../plugins/fetch/index.js"() {
       "use strict";
@@ -2509,13 +2552,23 @@ var DomqlElement = (() => {
         if (!params || isFunction(params)) return params;
         return params;
       };
-      resolveParams = (params, element) => {
-        if (!params) return void 0;
-        if (isFunction(params)) return params(element, element.state);
-        const resolved = {};
-        for (const key in params) {
-          const val = params[key];
-          resolved[key] = isFunction(val) ? val(element, element.state) : val;
+      resolveLanguage = (element, context) => {
+        const root = element?.state?.root || context?.state?.root;
+        if (root?.lang) return root.lang;
+        return void 0;
+      };
+      resolveParams = (params, element, context) => {
+        let resolved;
+        if (!params) {
+          resolved = void 0;
+        } else if (isFunction(params)) {
+          resolved = params(element, element.state);
+        } else {
+          resolved = {};
+          for (const key in params) {
+            const val = params[key];
+            resolved[key] = isFunction(val) ? val(element, element.state) : val;
+          }
         }
         return resolved;
       };
@@ -2553,7 +2606,7 @@ var DomqlElement = (() => {
         db.__resolving = resolveDb(db);
         const resolved = await db.__resolving;
         db.__resolved = resolved;
-        context.db = resolved;
+        context.fetch = resolved;
         delete db.__resolving;
         if (db.auth !== false) await initAdapterAuth(resolved, context);
         return resolved;
@@ -2601,7 +2654,7 @@ var DomqlElement = (() => {
         ref.__fetchError = status.error;
       };
       runFetch = async (config, element, context, opts = {}) => {
-        const db = context?.db;
+        const db = context?.fetch;
         if (!db) return;
         if (config.enabled === false) return;
         if (isFunction(config.enabled) && !config.enabled(element, element.state)) return;
@@ -2641,7 +2694,7 @@ var DomqlElement = (() => {
           const q = element.getQuery(adapter.name || "paths");
           if (q) select = q.select || q.length && q.join(",") || void 0;
         }
-        const params = resolveParams(rawParams, element);
+        const params = resolveParams(rawParams, element, context);
         const cacheConfig = parseCacheConfig(cacheRaw);
         const retryConfig = resolveRetryConfig(config);
         const cacheKey = cacheConfig ? cacheRaw?.key || `${from}:${method}:${JSON.stringify(params || "")}${infinite ? ":infinite" : ""}${page ? ":p" + JSON.stringify(page) : ""}` : null;
@@ -2711,6 +2764,10 @@ var DomqlElement = (() => {
           const fn = adapter[method];
           if (!isFunction(fn)) return { data: null, error: { message: `Method "${method}" not found on adapter` } };
           const request2 = { from, select, params, single, limit, offset, order, headers, baseUrl };
+          const lang = resolveLanguage(element, context);
+          if (lang) {
+            request2.headers = { ...request2.headers, "Accept-Language": lang };
+          }
           if (page !== void 0) {
             if (isObject(page)) {
               if (page.offset !== void 0) request2.offset = page.offset;
@@ -2893,7 +2950,7 @@ var DomqlElement = (() => {
         }
       };
       runMutation = async (config, element, context) => {
-        const db = context?.db;
+        const db = context?.fetch;
         if (!db) return;
         const adapter = await resolveAdapter(db, context);
         if (!adapter) return;
@@ -2930,7 +2987,11 @@ var DomqlElement = (() => {
           const fn = adapter[method];
           if (!isFunction(fn)) return;
           const request2 = { from, data: mutationData, headers, baseUrl };
-          if (config.params) request2.params = resolveParams(config.params, element);
+          if (config.params) request2.params = resolveParams(config.params, element, context);
+          const lang = resolveLanguage(element, context);
+          if (lang) {
+            request2.headers = { ...request2.headers, "Accept-Language": lang };
+          }
           const retryConfig = resolveRetryConfig(config);
           const result = await withRetry(() => fn(request2), retryConfig);
           const { data: data2, error: error2 } = result || {};
@@ -2975,7 +3036,7 @@ var DomqlElement = (() => {
       };
       executeFetch = (param, element, state2, context) => {
         if (!param) return;
-        const db = context?.db;
+        const db = context?.fetch;
         if (!db) return;
         const fetchProp = exec(param, element);
         if (!fetchProp) return;
@@ -3061,7 +3122,7 @@ var DomqlElement = (() => {
           setCacheEntry(key, data2, null);
         },
         prefetchQuery: async (config, context) => {
-          const db = context?.db;
+          const db = context?.fetch;
           if (!db) return;
           const adapter = await resolveAdapter(db, context);
           if (!adapter) return;
@@ -3085,6 +3146,15 @@ var DomqlElement = (() => {
         getCache: () => cacheStore,
         clear: () => removeCache()
       };
+      fetchPlugin = {
+        name: "fetch",
+        // Hook into element creation to auto-execute fetch configs
+        create(element) {
+          const fetchProp = element.fetch || element.props?.fetch;
+          if (!fetchProp) return;
+          executeFetch(fetchProp, element, element.state, element.context);
+        }
+      };
       fetch_default = executeFetch;
     }
   });
@@ -3384,18 +3454,18 @@ var DomqlElement = (() => {
       const result = fn.call(this, ...args);
       if (result && typeof result.then === "function") {
         result.catch((err) => {
-          this.error = err;
+          error.call(this, err);
         });
       }
       return result;
     } catch (err) {
-      this.error = err;
+      error.call(this, err);
       if (context?.strictMode) throw err;
     }
   }
   async function getDB() {
     const element = this;
-    const db = element.context?.db;
+    const db = element.context?.fetch;
     if (!db) return null;
     if (typeof db.select === "function") {
       if (!db.__authInitialized && db.getSession) {
@@ -3416,7 +3486,7 @@ var DomqlElement = (() => {
     db.__resolving = resolvePromise;
     const resolved = await resolvePromise;
     db.__resolved = resolved;
-    element.context.db = resolved;
+    element.context.fetch = resolved;
     delete db.__resolving;
     if (resolved.getSession) {
       const { initAdapterAuth: initAdapterAuth2 } = await Promise.resolve().then(() => (init_fetch(), fetch_exports));
@@ -3797,7 +3867,7 @@ ${element}` : "";
     return props[propKey];
   };
   var registerNodeEvent = (param, element, node, options) => {
-    const appliedFunction = getOnOrPropsEvent2(param, element);
+    const appliedFunction = resolveHandler(getOnOrPropsEvent2(param, element), element);
     if (isFunction(appliedFunction)) {
       const { __ref: ref } = element;
       if (!ref.__eventListeners) ref.__eventListeners = {};
@@ -3832,24 +3902,11 @@ ${element}` : "";
     }
   };
   var applyEventsOnNode = (element, options) => {
-    const { node, on, props } = element;
-    const handled = /* @__PURE__ */ new Set();
+    const { node, on } = element;
     for (const param in on) {
       if (DOMQL_EVENTS.has(param)) continue;
-      handled.add(param);
       registerNodeEvent(param, element, node, options);
     }
-    if (props) {
-      for (const key in props) {
-        if (key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && isFunction(props[key])) {
-          const thirdChar = key[2];
-          if (thirdChar !== thirdChar.toUpperCase()) continue;
-          const eventName = thirdChar.toLowerCase() + key.slice(3);
-          if (handled.has(eventName) || DOMQL_EVENTS.has(eventName)) continue;
-          registerNodeEvent(eventName, element, node, options);
-        }
-      }
-    }
   };
 
   // event/can.js
@@ -3944,25 +4001,30 @@ ${element}` : "";
       if (isFunction(origEvent)) {
         on[eventName] = (...args) => {
           const originalEventRetunrs = origEvent(...args);
-          if (originalEventRetunrs !== false) return funcFromProps(...args);
+          if (originalEventRetunrs !== false) {
+            if (isFunction(funcFromProps)) return funcFromProps(...args);
+          }
         };
       } else on[eventName] = funcFromProps;
     }
   };
   var propagateEventsFromElement = (element) => {
     const { on } = element;
+    const pluginActive = hasHandlerPlugin(element.context);
     for (const param in element) {
       if (param.charCodeAt(0) !== 111 || param.charCodeAt(1) !== 110 || !Object.prototype.hasOwnProperty.call(element, param)) continue;
-      const fn = element[param];
-      if (!isFunction(fn)) continue;
+      const handler = element[param];
+      if (!isFunction(handler) && !(pluginActive && handler != null)) continue;
       const eventName = lowercaseFirstLetter(param.slice(2));
       const origEvent = on[eventName];
       if (isFunction(origEvent)) {
         on[eventName] = (...args) => {
           const ret = origEvent(...args);
-          if (ret !== false) return fn(...args);
+          if (ret !== false) {
+            if (isFunction(handler)) return handler(...args);
+          }
         };
-      } else on[eventName] = fn;
+      } else on[eventName] = handler;
     }
   };
 
@@ -4240,7 +4302,10 @@ ${element}` : "";
       const attrs = exec(params, element);
       if (props.attr) deepMerge(attrs, props.attr);
       for (const attr2 in attrs) {
-        const val = exec(attrs[attr2], element);
+        let val = exec(attrs[attr2], element);
+        if (isString(val) && val.includes("{{") && element.call) {
+          val = element.call("replaceLiteralsWithObjectFields", val, element.state);
+        }
         if (val === __attr[attr2]) continue;
         if (val !== false && val !== void 0 && val !== null && node.setAttribute) {
           node.setAttribute(attr2, val);
@@ -4301,7 +4366,10 @@ ${element}` : "";
   // mixins/html.js
   init_esm();
   function html(param, element, node) {
-    const prop = exec(param ?? element?.props?.html, element);
+    let prop = exec(param ?? element?.props?.html, element);
+    if (isString(prop) && prop.includes("{{") && element.call) {
+      prop = element.call("replaceLiteralsWithObjectFields", prop, element.state);
+    }
     const { __ref } = element;
     if (prop !== __ref.__html) {
       if (node.nodeName === "SVG") node.textContent = prop;

package/event/on.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { DOMQL_EVENTS, isFunction } from '@domql/utils'
+import { DOMQL_EVENTS, isFunction, resolveHandler } from '@domql/utils'
 
 // Re-export event trigger functions from @domql/utils (moved there to break circular dep)
 export { applyEvent, triggerEventOn, applyEventUpdate, triggerEventOnUpdate } from '@domql/utils'
@@ -15,7 +15,7 @@ const getOnOrPropsEvent = (param, element) => {
 }
 
 const registerNodeEvent = (param, element, node, options) => {
-  const appliedFunction = getOnOrPropsEvent(param, element)
+  const appliedFunction = resolveHandler(getOnOrPropsEvent(param, element), element)
   if (isFunction(appliedFunction)) {
     const { __ref: ref } = element
     if (!ref.__eventListeners) ref.__eventListeners = {}
@@ -55,26 +55,10 @@ const registerNodeEvent = (param, element, node, options) => {
 }
 
 export const applyEventsOnNode = (element, options) => {
-  const { node, on, props } = element
-  const handled = new Set()
+  const { node, on } = element
 
-  // Register events from on: { click: ..., input: ... }
   for (const param in on) {
     if (DOMQL_EVENTS.has(param)) continue
-    handled.add(param)
     registerNodeEvent(param, element, node, options)
   }
-
-  // Also pick up props.onClick, props.onInput, etc.
-  if (props) {
-    for (const key in props) {
-      if (key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && isFunction(props[key])) {
-        const thirdChar = key[2]
-        if (thirdChar !== thirdChar.toUpperCase()) continue
-        const eventName = thirdChar.toLowerCase() + key.slice(3)
-        if (handled.has(eventName) || DOMQL_EVENTS.has(eventName)) continue
-        registerNodeEvent(eventName, element, node, options)
-      }
-    }
-  }
 }

package/mixins/attr.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { deepMerge, exec, isNot } from '@domql/utils'
+import { deepMerge, exec, isNot, isString } from '@domql/utils'
 import { report } from '@domql/report'
 
 /**
@@ -14,7 +14,10 @@ export function attr (params, element, node) {
     const attrs = exec(params, element)
     if (props.attr) deepMerge(attrs, props.attr)
     for (const attr in attrs) {
-      const val = exec(attrs[attr], element)
+      let val = exec(attrs[attr], element)
+      if (isString(val) && val.includes('{{') && element.call) {
+        val = element.call('replaceLiteralsWithObjectFields', val, element.state)
+      }
       if (val === __attr[attr]) continue
       if (
         val !== false &&

package/mixins/html.js

@@ -1,13 +1,16 @@
 'use strict'
 
-import { exec } from '@domql/utils'
+import { exec, isString } from '@domql/utils'
 
 /**
  * Appends raw HTML as content
  * an original one as a child
  */
 export function html (param, element, node) {
-  const prop = exec(param ?? element?.props?.html, element)
+  let prop = exec(param ?? element?.props?.html, element)
+  if (isString(prop) && prop.includes('{{') && element.call) {
+    prop = element.call('replaceLiteralsWithObjectFields', prop, element.state)
+  }
   const { __ref } = element
   if (prop !== __ref.__html) {
     if (node.nodeName === 'SVG') node.textContent = prop

package/package.json

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

package/utils/propEvents.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isFunction, lowercaseFirstLetter } from '@domql/utils'
+import { isFunction, hasHandlerPlugin, lowercaseFirstLetter } from '@domql/utils'
 
 export const propagateEventsFromProps = (element) => {
   const { props, on } = element
@@ -12,7 +12,9 @@ export const propagateEventsFromProps = (element) => {
     if (isFunction(origEvent)) {
       on[eventName] = (...args) => {
         const originalEventRetunrs = origEvent(...args)
-        if (originalEventRetunrs !== false) return funcFromProps(...args)
+        if (originalEventRetunrs !== false) {
+          if (isFunction(funcFromProps)) return funcFromProps(...args)
+        }
       }
     } else on[eventName] = funcFromProps
   }
@@ -20,17 +22,20 @@ export const propagateEventsFromProps = (element) => {
 
 export const propagateEventsFromElement = (element) => {
   const { on } = element
+  const pluginActive = hasHandlerPlugin(element.context)
   for (const param in element) {
     if (param.charCodeAt(0) !== 111 || param.charCodeAt(1) !== 110 || !Object.prototype.hasOwnProperty.call(element, param)) continue
-    const fn = element[param]
-    if (!isFunction(fn)) continue
+    const handler = element[param]
+    if (!isFunction(handler) && !(pluginActive && handler != null)) continue
     const eventName = lowercaseFirstLetter(param.slice(2))
     const origEvent = on[eventName]
     if (isFunction(origEvent)) {
       on[eventName] = (...args) => {
         const ret = origEvent(...args)
-        if (ret !== false) return fn(...args)
+        if (ret !== false) {
+          if (isFunction(handler)) return handler(...args)
+        }
       }
-    } else on[eventName] = fn
+    } else on[eventName] = handler
   }
 }