@domql/utils 3.6.8 → 3.7.3

package/dist/cjs/events.js

@@ -31,7 +31,9 @@ function addEventFromProps(key, obj) {
   if ((0, import_types.isFunction)(origEvent)) {
     on[eventName] = (...args) => {
       const originalEventRetunrs = origEvent(...args);
-      if (originalEventRetunrs !== false) funcFromProps(...args);
+      if (originalEventRetunrs !== false) {
+        if ((0, import_types.isFunction)(funcFromProps)) return funcFromProps(...args);
+      }
     };
   } else on[eventName] = funcFromProps;
 }

package/dist/cjs/function.js

@@ -21,8 +21,11 @@ __export(function_exports, {
   cloneFunction: () => cloneFunction,
   debounce: () => debounce,
   debounceOnContext: () => debounceOnContext,
+  hasHandlerPlugin: () => hasHandlerPlugin,
   isStringFunction: () => isStringFunction,
-  memoize: () => memoize
+  memoize: () => memoize,
+  resolveHandler: () => resolveHandler,
+  runPluginHook: () => runPluginHook
 });
 module.exports = __toCommonJS(function_exports);
 function debounce(func, wait, immediate) {
@@ -66,6 +69,35 @@ const RE_STRING_FUNCTION = /^((function\s*\([^)]*\)\s*\{[^}]*\})|(\([^)]*\)\s*=>
 const isStringFunction = (inputString) => {
   return RE_STRING_FUNCTION.test(inputString);
 };
+const hasHandlerPlugin = (ctx) => {
+  const plugins = ctx?.plugins;
+  if (!plugins || !plugins.length) return false;
+  for (const plugin of plugins) {
+    if (plugin.resolveHandler) return true;
+  }
+  return false;
+};
+const 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;
+};
+const 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);
+    }
+  }
+};
 function cloneFunction(fn, win = window) {
   const temp = function() {
     return fn.apply(win, arguments);

package/dist/cjs/methods.js

@@ -383,7 +383,7 @@ function call(fnKey, ...args) {
 }
 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) {
@@ -404,7 +404,7 @@ async function getDB() {
   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 } = await import("@symbo.ls/fetch");

package/dist/cjs/props.js

@@ -41,6 +41,7 @@ var import_events = require("./events.js");
 var import_object = require("./object.js");
 var import_types = require("./types.js");
 var import_string = require("./string.js");
+var import_function = require("./function.js");
 const RE_UPPER = /^[A-Z]/;
 const RE_DIGITS = /^\d+$/;
 const CSS_SELECTOR_PREFIXES = /* @__PURE__ */ new Set([":", "@", "[", "*", "+", "~", "&", ">", "$", "-", ".", "!"]);
@@ -83,7 +84,8 @@ function pickupPropsFromElement(obj, opts = {}) {
   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() && (0, import_types.isFunction)(value);
+    const isOnKey = key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key[2] === key[2].toUpperCase();
+    const isEventHandler = isOnKey && ((0, import_types.isFunction)(value) || value != null && (0, import_function.hasHandlerPlugin)(this.context));
     if (isEventHandler) {
       const eventName = (0, import_string.lowercaseFirstLetter)(key.slice(2));
       if (obj.on) obj.on[eventName] = value;
@@ -123,8 +125,8 @@ function pickupElementFromProps(obj = this, opts) {
   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 = (0, import_types.isFunction)(value);
-    if (isEvent && isFn) {
+    const isHandler = (0, import_types.isFunction)(value) || value != null && (0, import_function.hasHandlerPlugin)(this.context);
+    if (isEvent && isHandler) {
       (0, import_events.addEventFromProps)(key, obj);
       delete obj.props[key];
       continue;

package/dist/cjs/string.js

@@ -43,8 +43,8 @@ const trimStringFromSymbols = (str, characters) => {
   return str.replace(pattern, "");
 };
 const brackRegex = {
-  2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*}}/g,
-  3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*}}}/g
+  2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*(?:\|\s*([\w\d.]+))?\s*}}/g,
+  3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*(?:\|\s*([\w\d.]+))?\s*}}}/g
 };
 const getNestedValue = (obj, path) => {
   return path.split(".").reduce((acc, part) => {
@@ -57,7 +57,17 @@ function replaceLiteralsWithObjectFields(str, state, options = {}) {
   if (!str.includes(bracketPattern)) return str;
   const reg = brackRegex[bracketsLength];
   const obj = state || this.state || {};
-  return str.replace(reg, (_, parentPath, variable) => {
+  const element = this;
+  return str.replace(reg, (_, parentPath, variable, filter) => {
+    const key = variable.trim();
+    if (filter) {
+      const filterFn = element?.context?.functions?.[filter];
+      if (filterFn) {
+        const stateValue = getNestedValue(obj, key);
+        return String(filterFn.call(element, stateValue !== void 0 ? stateValue : key) ?? "");
+      }
+      return "";
+    }
     if (parentPath) {
       const parentLevels = (parentPath.match(/\.\.\//g) || []).length;
       let parentState = obj;
@@ -65,14 +75,13 @@ function replaceLiteralsWithObjectFields(str, state, options = {}) {
         if (!parentState || !parentState.parent) return "";
         parentState = parentState.parent;
       }
-      const key = variable.trim();
       if (key === "parent") {
         return String(parentState.value ?? "");
       }
       const value = getNestedValue(parentState, key);
       return String(value ?? "");
     } else {
-      const value = getNestedValue(obj, variable.trim());
+      const value = getNestedValue(obj, key);
       return String(value ?? "");
     }
   });

package/dist/cjs/triggerEvent.js

@@ -25,6 +25,7 @@ __export(triggerEvent_exports, {
 });
 module.exports = __toCommonJS(triggerEvent_exports);
 var import_types = require("./types.js");
+var import_function = require("./function.js");
 const getOnOrPropsEvent = (param, element) => {
   const onEvent = element.on?.[param];
   if (onEvent) return onEvent;
@@ -34,6 +35,7 @@ const getOnOrPropsEvent = (param, element) => {
   return props[propKey];
 };
 const applyEvent = (param, element, state, context, options) => {
+  param = (0, import_function.resolveHandler)(param, element);
   if (!(0, import_types.isFunction)(param)) return;
   try {
     const result = param.call(
@@ -60,6 +62,7 @@ const triggerEventOn = (param, element, options) => {
   if (!element) {
     throw new Error("Element is required");
   }
+  (0, import_function.runPluginHook)(param, element, options);
   const appliedFunction = getOnOrPropsEvent(param, element);
   if (appliedFunction) {
     const { state, context } = element;
@@ -67,6 +70,7 @@ const triggerEventOn = (param, element, options) => {
   }
 };
 const applyEventUpdate = (param, updatedObj, element, state, context, options) => {
+  param = (0, import_function.resolveHandler)(param, element);
   if (!(0, import_types.isFunction)(param)) return;
   try {
     const result = param.call(
@@ -91,6 +95,7 @@ const applyEventUpdate = (param, updatedObj, element, state, context, options) =
   }
 };
 const triggerEventOnUpdate = (param, updatedObj, element, options) => {
+  (0, import_function.runPluginHook)(param, element, updatedObj, options);
   const appliedFunction = getOnOrPropsEvent(param, element);
   if (appliedFunction) {
     const { state, context } = element;

package/dist/esm/events.js

@@ -8,7 +8,9 @@ function addEventFromProps(key, obj) {
   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;
 }

package/dist/esm/function.js

@@ -39,6 +39,35 @@ const RE_STRING_FUNCTION = /^((function\s*\([^)]*\)\s*\{[^}]*\})|(\([^)]*\)\s*=>
 const isStringFunction = (inputString) => {
   return RE_STRING_FUNCTION.test(inputString);
 };
+const hasHandlerPlugin = (ctx) => {
+  const plugins = ctx?.plugins;
+  if (!plugins || !plugins.length) return false;
+  for (const plugin of plugins) {
+    if (plugin.resolveHandler) return true;
+  }
+  return false;
+};
+const 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;
+};
+const 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);
+    }
+  }
+};
 function cloneFunction(fn, win = window) {
   const temp = function() {
     return fn.apply(win, arguments);
@@ -54,6 +83,9 @@ export {
   cloneFunction,
   debounce,
   debounceOnContext,
+  hasHandlerPlugin,
   isStringFunction,
-  memoize
+  memoize,
+  resolveHandler,
+  runPluginHook
 };

package/dist/esm/methods.js

@@ -320,7 +320,7 @@ function call(fnKey, ...args) {
 }
 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) {
@@ -341,7 +341,7 @@ async function getDB() {
   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 } = await import("@symbo.ls/fetch");

package/dist/esm/props.js

@@ -3,6 +3,7 @@ import { addEventFromProps } from "./events.js";
 import { deepClone, deepMerge, exec } from "./object.js";
 import { is, isArray, isFunction, isObject, isObjectLike } from "./types.js";
 import { lowercaseFirstLetter } from "./string.js";
+import { hasHandlerPlugin } from "./function.js";
 const RE_UPPER = /^[A-Z]/;
 const RE_DIGITS = /^\d+$/;
 const CSS_SELECTOR_PREFIXES = /* @__PURE__ */ new Set([":", "@", "[", "*", "+", "~", "&", ">", "$", "-", ".", "!"]);
@@ -45,7 +46,8 @@ function pickupPropsFromElement(obj, opts = {}) {
   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;
@@ -85,8 +87,8 @@ function pickupElementFromProps(obj = this, opts) {
   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;

package/dist/esm/string.js

@@ -11,8 +11,8 @@ const trimStringFromSymbols = (str, characters) => {
   return str.replace(pattern, "");
 };
 const brackRegex = {
-  2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*}}/g,
-  3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*}}}/g
+  2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*(?:\|\s*([\w\d.]+))?\s*}}/g,
+  3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*(?:\|\s*([\w\d.]+))?\s*}}}/g
 };
 const getNestedValue = (obj, path) => {
   return path.split(".").reduce((acc, part) => {
@@ -25,7 +25,17 @@ function replaceLiteralsWithObjectFields(str, state, options = {}) {
   if (!str.includes(bracketPattern)) return str;
   const reg = brackRegex[bracketsLength];
   const obj = state || this.state || {};
-  return str.replace(reg, (_, parentPath, variable) => {
+  const element = this;
+  return str.replace(reg, (_, parentPath, variable, filter) => {
+    const key = variable.trim();
+    if (filter) {
+      const filterFn = element?.context?.functions?.[filter];
+      if (filterFn) {
+        const stateValue = getNestedValue(obj, key);
+        return String(filterFn.call(element, stateValue !== void 0 ? stateValue : key) ?? "");
+      }
+      return "";
+    }
     if (parentPath) {
       const parentLevels = (parentPath.match(/\.\.\//g) || []).length;
       let parentState = obj;
@@ -33,14 +43,13 @@ function replaceLiteralsWithObjectFields(str, state, options = {}) {
         if (!parentState || !parentState.parent) return "";
         parentState = parentState.parent;
       }
-      const key = variable.trim();
       if (key === "parent") {
         return String(parentState.value ?? "");
       }
       const value = getNestedValue(parentState, key);
       return String(value ?? "");
     } else {
-      const value = getNestedValue(obj, variable.trim());
+      const value = getNestedValue(obj, key);
       return String(value ?? "");
     }
   });

package/dist/esm/triggerEvent.js

@@ -1,4 +1,5 @@
 import { isFunction } from "./types.js";
+import { resolveHandler, runPluginHook } from "./function.js";
 const getOnOrPropsEvent = (param, element) => {
   const onEvent = element.on?.[param];
   if (onEvent) return onEvent;
@@ -8,6 +9,7 @@ const getOnOrPropsEvent = (param, element) => {
   return props[propKey];
 };
 const applyEvent = (param, element, state, context, options) => {
+  param = resolveHandler(param, element);
   if (!isFunction(param)) return;
   try {
     const result = param.call(
@@ -34,6 +36,7 @@ const triggerEventOn = (param, element, options) => {
   if (!element) {
     throw new Error("Element is required");
   }
+  runPluginHook(param, element, options);
   const appliedFunction = getOnOrPropsEvent(param, element);
   if (appliedFunction) {
     const { state, context } = element;
@@ -41,6 +44,7 @@ const triggerEventOn = (param, element, options) => {
   }
 };
 const applyEventUpdate = (param, updatedObj, element, state, context, options) => {
+  param = resolveHandler(param, element);
   if (!isFunction(param)) return;
   try {
     const result = param.call(
@@ -65,6 +69,7 @@ const applyEventUpdate = (param, updatedObj, element, state, context, options) =
   }
 };
 const triggerEventOnUpdate = (param, updatedObj, element, options) => {
+  runPluginHook(param, element, updatedObj, options);
   const appliedFunction = getOnOrPropsEvent(param, element);
   if (appliedFunction) {
     const { state, context } = element;

package/dist/iife/index.js

@@ -743,13 +743,14 @@ var DomqlUtils = (() => {
     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";
@@ -945,13 +946,23 @@ var DomqlUtils = (() => {
         if (!params || isFunction2(params)) return params;
         return params;
       };
-      resolveParams = (params, element) => {
-        if (!params) return void 0;
-        if (isFunction2(params)) return params(element, element.state);
-        const resolved = {};
-        for (const key in params) {
-          const val = params[key];
-          resolved[key] = isFunction2(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 (isFunction2(params)) {
+          resolved = params(element, element.state);
+        } else {
+          resolved = {};
+          for (const key in params) {
+            const val = params[key];
+            resolved[key] = isFunction2(val) ? val(element, element.state) : val;
+          }
         }
         return resolved;
       };
@@ -989,7 +1000,7 @@ var DomqlUtils = (() => {
         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;
@@ -1037,7 +1048,7 @@ var DomqlUtils = (() => {
         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 (isFunction2(config.enabled) && !config.enabled(element, element.state)) return;
@@ -1077,7 +1088,7 @@ var DomqlUtils = (() => {
           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;
@@ -1147,6 +1158,10 @@ var DomqlUtils = (() => {
           const fn = adapter[method];
           if (!isFunction2(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 (isObject2(page)) {
               if (page.offset !== void 0) request2.offset = page.offset;
@@ -1329,7 +1344,7 @@ var DomqlUtils = (() => {
         }
       };
       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;
@@ -1366,7 +1381,11 @@ var DomqlUtils = (() => {
           const fn = adapter[method];
           if (!isFunction2(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, error: error2 } = result || {};
@@ -1411,7 +1430,7 @@ var DomqlUtils = (() => {
       };
       executeFetch = (param, element, state, context) => {
         if (!param) return;
-        const db = context?.db;
+        const db = context?.fetch;
         if (!db) return;
         const fetchProp = exec2(param, element);
         if (!fetchProp) return;
@@ -1497,7 +1516,7 @@ var DomqlUtils = (() => {
           setCacheEntry(key, data, 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;
@@ -1521,6 +1540,15 @@ var DomqlUtils = (() => {
         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;
     }
   });
@@ -1644,6 +1672,7 @@ var DomqlUtils = (() => {
     getSpreadChildren: () => getSpreadChildren,
     global: () => global,
     hasFunction: () => hasFunction,
+    hasHandlerPlugin: () => hasHandlerPlugin,
     hasOwnProperty: () => hasOwnProperty,
     inheritChildExtends: () => inheritChildExtends,
     inheritChildPropsExtends: () => inheritChildPropsExtends,
@@ -1726,7 +1755,9 @@ var DomqlUtils = (() => {
     reorderArrayByValues: () => reorderArrayByValues,
     replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields,
     replaceOctalEscapeSequences: () => replaceOctalEscapeSequences,
+    resolveHandler: () => resolveHandler,
     returnValueAsText: () => returnValueAsText,
+    runPluginHook: () => runPluginHook,
     self: () => self,
     setCookie: () => setCookie,
     setHashedExtend: () => setHashedExtend,
@@ -1950,8 +1981,8 @@ var DomqlUtils = (() => {
     return str.replace(pattern, "");
   };
   var brackRegex = {
-    2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*}}/g,
-    3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*}}}/g
+    2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*(?:\|\s*([\w\d.]+))?\s*}}/g,
+    3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*(?:\|\s*([\w\d.]+))?\s*}}}/g
   };
   var getNestedValue = (obj, path) => {
     return path.split(".").reduce((acc, part) => {
@@ -1964,7 +1995,17 @@ var DomqlUtils = (() => {
     if (!str.includes(bracketPattern)) return str;
     const reg = brackRegex[bracketsLength];
     const obj = state || this.state || {};
-    return str.replace(reg, (_, parentPath, variable) => {
+    const element = this;
+    return str.replace(reg, (_, parentPath, variable, filter) => {
+      const key = variable.trim();
+      if (filter) {
+        const filterFn = element?.context?.functions?.[filter];
+        if (filterFn) {
+          const stateValue = getNestedValue(obj, key);
+          return String(filterFn.call(element, stateValue !== void 0 ? stateValue : key) ?? "");
+        }
+        return "";
+      }
       if (parentPath) {
         const parentLevels = (parentPath.match(/\.\.\//g) || []).length;
         let parentState = obj;
@@ -1972,14 +2013,13 @@ var DomqlUtils = (() => {
           if (!parentState || !parentState.parent) return "";
           parentState = parentState.parent;
         }
-        const key = variable.trim();
         if (key === "parent") {
           return String(parentState.value ?? "");
         }
         const value = getNestedValue(parentState, key);
         return String(value ?? "");
       } else {
-        const value = getNestedValue(obj, variable.trim());
+        const value = getNestedValue(obj, key);
         return String(value ?? "");
       }
     });
@@ -2822,6 +2862,35 @@ var DomqlUtils = (() => {
   var isStringFunction = (inputString) => {
     return RE_STRING_FUNCTION.test(inputString);
   };
+  var hasHandlerPlugin = (ctx) => {
+    const plugins = ctx?.plugins;
+    if (!plugins || !plugins.length) return false;
+    for (const plugin of plugins) {
+      if (plugin.resolveHandler) return true;
+    }
+    return false;
+  };
+  var 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;
+  };
+  var 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);
+      }
+    }
+  };
   function cloneFunction(fn, win = window) {
     const temp = function() {
       return fn.apply(win, arguments);
@@ -3510,7 +3579,9 @@ var DomqlUtils = (() => {
     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;
   }
@@ -3558,7 +3629,8 @@ var DomqlUtils = (() => {
     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;
@@ -3598,8 +3670,8 @@ var DomqlUtils = (() => {
     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;
@@ -4009,6 +4081,7 @@ var DomqlUtils = (() => {
     return props[propKey];
   };
   var applyEvent = (param, element, state, context, options) => {
+    param = resolveHandler(param, element);
     if (!isFunction(param)) return;
     try {
       const result = param.call(
@@ -4035,6 +4108,7 @@ var DomqlUtils = (() => {
     if (!element) {
       throw new Error("Element is required");
     }
+    runPluginHook(param, element, options);
     const appliedFunction = getOnOrPropsEvent(param, element);
     if (appliedFunction) {
       const { state, context } = element;
@@ -4042,6 +4116,7 @@ var DomqlUtils = (() => {
     }
   };
   var applyEventUpdate = (param, updatedObj, element, state, context, options) => {
+    param = resolveHandler(param, element);
     if (!isFunction(param)) return;
     try {
       const result = param.call(
@@ -4066,6 +4141,7 @@ var DomqlUtils = (() => {
     }
   };
   var triggerEventOnUpdate = (param, updatedObj, element, options) => {
+    runPluginHook(param, element, updatedObj, options);
     const appliedFunction = getOnOrPropsEvent(param, element);
     if (appliedFunction) {
       const { state, context } = element;
@@ -4400,7 +4476,7 @@ var DomqlUtils = (() => {
   }
   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) {
@@ -4421,7 +4497,7 @@ var DomqlUtils = (() => {
     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));

package/events.js

@@ -11,7 +11,9 @@ export function addEventFromProps (key, obj) {
   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
 }

package/function.js

@@ -73,6 +73,60 @@ export const isStringFunction = inputString => {
   return RE_STRING_FUNCTION.test(inputString)
 }
 
+/**
+ * Resolve an event handler through context plugins.
+ *
+ * If `handler` is already a function it is returned as-is.
+ * Otherwise, iterates `context.plugins` looking for a plugin
+ * with a `resolveHandler` method that can compile the handler
+ * (e.g. a funcql schema) into a callable function.
+ *
+ * @param {*} handler - event handler (function, object, array, string)
+ * @param {object} element - domql element
+ * @returns {function|*} resolved handler
+ */
+/**
+ * Check if context has any plugin that can resolve non-function handlers.
+ */
+export const hasHandlerPlugin = (ctx) => {
+  const plugins = ctx?.plugins
+  if (!plugins || !plugins.length) return false
+  for (const plugin of plugins) {
+    if (plugin.resolveHandler) return true
+  }
+  return false
+}
+
+export const 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
+}
+
+/**
+ * Run a named hook across all context plugins.
+ *
+ * @param {string} hookName - lifecycle hook name
+ * @param {object} element - domql element
+ * @param {*[]} args - additional arguments forwarded to each plugin hook
+ */
+export const 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)
+    }
+  }
+}
+
 export function cloneFunction (fn, win = window) {
   const temp = function () {
     return fn.apply(win, arguments)

package/methods.js

@@ -401,7 +401,7 @@ export function call (fnKey, ...args) {
 
 export 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) {
@@ -424,7 +424,7 @@ export async function getDB () {
   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 } = await import('@symbo.ls/fetch')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/utils",
-  "version": "3.6.8",
+  "version": "3.7.3",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -38,7 +38,7 @@
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "peerDependencies": {
-    "@symbo.ls/fetch": "^3.6.8"
+    "@symbo.ls/fetch": "^3.7.3"
   },
   "peerDependenciesMeta": {
     "@symbo.ls/fetch": {

package/props.js

@@ -5,6 +5,7 @@ import { addEventFromProps } from './events.js'
 import { deepClone, deepMerge, exec } from './object.js'
 import { is, isArray, isFunction, isObject, isObjectLike } from './types.js'
 import { lowercaseFirstLetter } from './string.js'
+import { hasHandlerPlugin } from './function.js'
 
 const RE_UPPER = /^[A-Z]/
 const RE_DIGITS = /^\d+$/
@@ -46,7 +47,8 @@ export function pickupPropsFromElement (obj, opts = {}) {
     const value = obj[key]
 
     // Move top-level onXxx handlers directly into on.xxx (v3 style)
-    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
@@ -101,11 +103,11 @@ export function pickupElementFromProps (obj = this, opts) {
   for (const key in obj.props) {
     const value = obj.props[key]
 
-    // Handle event handlers
+    // Handle event handlers (functions, or plugin schemas when plugins are active)
     const isEvent = key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110
-    const isFn = isFunction(value)
+    const isHandler = isFunction(value) || (value != null && hasHandlerPlugin(this.context))
 
-    if (isEvent && isFn) {
+    if (isEvent && isHandler) {
       addEventFromProps(key, obj)
       delete obj.props[key]
       continue

package/string.js

@@ -25,8 +25,8 @@ export const trimStringFromSymbols = (str, characters) => {
  * @returns {string} The modified string with placeholders replaced by values from the object.
  */
 const brackRegex = {
-  2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*}}/g,
-  3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*}}}/g
+  2: /{{\s*((?:\.\.\/)*)([\w\d.]+)\s*(?:\|\s*([\w\d.]+))?\s*}}/g,
+  3: /{{{(\s*(?:\.\.\/)*)([\w\d.]+)\s*(?:\|\s*([\w\d.]+))?\s*}}}/g
 }
 
 const getNestedValue = (obj, path) => {
@@ -43,7 +43,22 @@ export function replaceLiteralsWithObjectFields (str, state, options = {}) {
   const reg = brackRegex[bracketsLength]
   const obj = state || this.state || {}
 
-  return str.replace(reg, (_, parentPath, variable) => {
+  const element = this
+
+  return str.replace(reg, (_, parentPath, variable, filter) => {
+    const key = variable.trim()
+
+    // Pipe filter: {{ key | filterName }}
+    // Resolves key from state first, passes value (or raw key) to filter
+    if (filter) {
+      const filterFn = element?.context?.functions?.[filter]
+      if (filterFn) {
+        const stateValue = getNestedValue(obj, key)
+        return String(filterFn.call(element, stateValue !== undefined ? stateValue : key) ?? '')
+      }
+      return ''
+    }
+
     if (parentPath) {
       const parentLevels = (parentPath.match(/\.\.\//g) || []).length
       let parentState = obj
@@ -54,7 +69,6 @@ export function replaceLiteralsWithObjectFields (str, state, options = {}) {
       }
 
       // If the variable is 'parent', return the value property
-      const key = variable.trim()
       if (key === 'parent') {
         return String(parentState.value ?? '')
       }
@@ -62,7 +76,7 @@ export function replaceLiteralsWithObjectFields (str, state, options = {}) {
       const value = getNestedValue(parentState, key)
       return String(value ?? '')
     } else {
-      const value = getNestedValue(obj, variable.trim())
+      const value = getNestedValue(obj, key)
       return String(value ?? '')
     }
   })

package/triggerEvent.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { isFunction } from './types.js'
+import { resolveHandler, runPluginHook } from './function.js'
 
 const getOnOrPropsEvent = (param, element) => {
   const onEvent = element.on?.[param]
@@ -12,6 +13,7 @@ const getOnOrPropsEvent = (param, element) => {
 }
 
 export const applyEvent = (param, element, state, context, options) => {
+  param = resolveHandler(param, element)
   if (!isFunction(param)) return
   try {
     const result = param.call(
@@ -39,6 +41,7 @@ export const triggerEventOn = (param, element, options) => {
   if (!element) {
     throw new Error('Element is required')
   }
+  runPluginHook(param, element, options)
   const appliedFunction = getOnOrPropsEvent(param, element)
   if (appliedFunction) {
     const { state, context } = element
@@ -54,6 +57,7 @@ export const applyEventUpdate = (
   context,
   options
 ) => {
+  param = resolveHandler(param, element)
   if (!isFunction(param)) return
   try {
     const result = param.call(
@@ -79,6 +83,7 @@ export const applyEventUpdate = (
 }
 
 export const triggerEventOnUpdate = (param, updatedObj, element, options) => {
+  runPluginHook(param, element, updatedObj, options)
   const appliedFunction = getOnOrPropsEvent(param, element)
   if (appliedFunction) {
     const { state, context } = element