@startinblox/core 0.19.22-beta.2 → 0.19.22-beta.3

package/dist/index.js

@@ -133,9 +133,416 @@ class Compositor {
     return accessors;
   }
 }
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+  if (typeof f == "function") {
+    var a = function a2() {
+      if (this instanceof a2) {
+        return Reflect.construct(f, arguments, this.constructor);
+      }
+      return f.apply(this, arguments);
+    };
+    a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, "__esModule", { value: true });
+  Object.keys(n).forEach(function(k) {
+    var d = Object.getOwnPropertyDescriptor(n, k);
+    Object.defineProperty(a, k, d.get ? d : {
+      enumerable: true,
+      get: function() {
+        return n[k];
+      }
+    });
+  });
+  return a;
+}
+var loglevel = { exports: {} };
+(function(module2) {
+  (function(root2, definition) {
+    if (module2.exports) {
+      module2.exports = definition();
+    } else {
+      root2.log = definition();
+    }
+  })(commonjsGlobal, function() {
+    var noop = function() {
+    };
+    var undefinedType = "undefined";
+    var isIE = typeof window !== undefinedType && typeof window.navigator !== undefinedType && /Trident\/|MSIE /.test(window.navigator.userAgent);
+    var logMethods = [
+      "trace",
+      "debug",
+      "info",
+      "warn",
+      "error"
+    ];
+    var _loggersByName = {};
+    var defaultLogger = null;
+    function bindMethod(obj, methodName) {
+      var method = obj[methodName];
+      if (typeof method.bind === "function") {
+        return method.bind(obj);
+      } else {
+        try {
+          return Function.prototype.bind.call(method, obj);
+        } catch (e) {
+          return function() {
+            return Function.prototype.apply.apply(method, [obj, arguments]);
+          };
+        }
+      }
+    }
+    function traceForIE() {
+      if (console.log) {
+        if (console.log.apply) {
+          console.log.apply(console, arguments);
+        } else {
+          Function.prototype.apply.apply(console.log, [console, arguments]);
+        }
+      }
+      if (console.trace) console.trace();
+    }
+    function realMethod(methodName) {
+      if (methodName === "debug") {
+        methodName = "log";
+      }
+      if (typeof console === undefinedType) {
+        return false;
+      } else if (methodName === "trace" && isIE) {
+        return traceForIE;
+      } else if (console[methodName] !== void 0) {
+        return bindMethod(console, methodName);
+      } else if (console.log !== void 0) {
+        return bindMethod(console, "log");
+      } else {
+        return noop;
+      }
+    }
+    function replaceLoggingMethods() {
+      var level2 = this.getLevel();
+      for (var i = 0; i < logMethods.length; i++) {
+        var methodName = logMethods[i];
+        this[methodName] = i < level2 ? noop : this.methodFactory(methodName, level2, this.name);
+      }
+      this.log = this.debug;
+      if (typeof console === undefinedType && level2 < this.levels.SILENT) {
+        return "No console available for logging";
+      }
+    }
+    function enableLoggingWhenConsoleArrives(methodName) {
+      return function() {
+        if (typeof console !== undefinedType) {
+          replaceLoggingMethods.call(this);
+          this[methodName].apply(this, arguments);
+        }
+      };
+    }
+    function defaultMethodFactory(methodName, _level, _loggerName) {
+      return realMethod(methodName) || enableLoggingWhenConsoleArrives.apply(this, arguments);
+    }
+    function Logger(name, factory2) {
+      var self2 = this;
+      var inheritedLevel;
+      var defaultLevel;
+      var userLevel;
+      var storageKey = "loglevel";
+      if (typeof name === "string") {
+        storageKey += ":" + name;
+      } else if (typeof name === "symbol") {
+        storageKey = void 0;
+      }
+      function persistLevelIfPossible(levelNum) {
+        var levelName = (logMethods[levelNum] || "silent").toUpperCase();
+        if (typeof window === undefinedType || !storageKey) return;
+        try {
+          window.localStorage[storageKey] = levelName;
+          return;
+        } catch (ignore) {
+        }
+        try {
+          window.document.cookie = encodeURIComponent(storageKey) + "=" + levelName + ";";
+        } catch (ignore) {
+        }
+      }
+      function getPersistedLevel() {
+        var storedLevel;
+        if (typeof window === undefinedType || !storageKey) return;
+        try {
+          storedLevel = window.localStorage[storageKey];
+        } catch (ignore) {
+        }
+        if (typeof storedLevel === undefinedType) {
+          try {
+            var cookie = window.document.cookie;
+            var cookieName = encodeURIComponent(storageKey);
+            var location2 = cookie.indexOf(cookieName + "=");
+            if (location2 !== -1) {
+              storedLevel = /^([^;]+)/.exec(
+                cookie.slice(location2 + cookieName.length + 1)
+              )[1];
+            }
+          } catch (ignore) {
+          }
+        }
+        if (self2.levels[storedLevel] === void 0) {
+          storedLevel = void 0;
+        }
+        return storedLevel;
+      }
+      function clearPersistedLevel() {
+        if (typeof window === undefinedType || !storageKey) return;
+        try {
+          window.localStorage.removeItem(storageKey);
+        } catch (ignore) {
+        }
+        try {
+          window.document.cookie = encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+        } catch (ignore) {
+        }
+      }
+      function normalizeLevel(input) {
+        var level2 = input;
+        if (typeof level2 === "string" && self2.levels[level2.toUpperCase()] !== void 0) {
+          level2 = self2.levels[level2.toUpperCase()];
+        }
+        if (typeof level2 === "number" && level2 >= 0 && level2 <= self2.levels.SILENT) {
+          return level2;
+        } else {
+          throw new TypeError("log.setLevel() called with invalid level: " + input);
+        }
+      }
+      self2.name = name;
+      self2.levels = {
+        "TRACE": 0,
+        "DEBUG": 1,
+        "INFO": 2,
+        "WARN": 3,
+        "ERROR": 4,
+        "SILENT": 5
+      };
+      self2.methodFactory = factory2 || defaultMethodFactory;
+      self2.getLevel = function() {
+        if (userLevel != null) {
+          return userLevel;
+        } else if (defaultLevel != null) {
+          return defaultLevel;
+        } else {
+          return inheritedLevel;
+        }
+      };
+      self2.setLevel = function(level2, persist) {
+        userLevel = normalizeLevel(level2);
+        if (persist !== false) {
+          persistLevelIfPossible(userLevel);
+        }
+        return replaceLoggingMethods.call(self2);
+      };
+      self2.setDefaultLevel = function(level2) {
+        defaultLevel = normalizeLevel(level2);
+        if (!getPersistedLevel()) {
+          self2.setLevel(level2, false);
+        }
+      };
+      self2.resetLevel = function() {
+        userLevel = null;
+        clearPersistedLevel();
+        replaceLoggingMethods.call(self2);
+      };
+      self2.enableAll = function(persist) {
+        self2.setLevel(self2.levels.TRACE, persist);
+      };
+      self2.disableAll = function(persist) {
+        self2.setLevel(self2.levels.SILENT, persist);
+      };
+      self2.rebuild = function() {
+        if (defaultLogger !== self2) {
+          inheritedLevel = normalizeLevel(defaultLogger.getLevel());
+        }
+        replaceLoggingMethods.call(self2);
+        if (defaultLogger === self2) {
+          for (var childName in _loggersByName) {
+            _loggersByName[childName].rebuild();
+          }
+        }
+      };
+      inheritedLevel = normalizeLevel(
+        defaultLogger ? defaultLogger.getLevel() : "WARN"
+      );
+      var initialLevel = getPersistedLevel();
+      if (initialLevel != null) {
+        userLevel = normalizeLevel(initialLevel);
+      }
+      replaceLoggingMethods.call(self2);
+    }
+    defaultLogger = new Logger();
+    defaultLogger.getLogger = function getLogger(name) {
+      if (typeof name !== "symbol" && typeof name !== "string" || name === "") {
+        throw new TypeError("You must supply a name when creating a logger.");
+      }
+      var logger = _loggersByName[name];
+      if (!logger) {
+        logger = _loggersByName[name] = new Logger(
+          name,
+          defaultLogger.methodFactory
+        );
+      }
+      return logger;
+    };
+    var _log = typeof window !== undefinedType ? window.log : void 0;
+    defaultLogger.noConflict = function() {
+      if (typeof window !== undefinedType && window.log === defaultLogger) {
+        window.log = _log;
+      }
+      return defaultLogger;
+    };
+    defaultLogger.getLoggers = function getLoggers() {
+      return _loggersByName;
+    };
+    defaultLogger["default"] = defaultLogger;
+    return defaultLogger;
+  });
+})(loglevel);
+var loglevelExports = loglevel.exports;
+const log = /* @__PURE__ */ getDefaultExportFromCjs(loglevelExports);
+const __vite_import_meta_env__ = { "BASE_URL": "./", "DEV": false, "MODE": "production", "PROD": true, "SSR": false };
+const colors = {
+  reset: "\x1B[0m",
+  trace: "\x1B[38;2;169;169;169m",
+  // Gray
+  debug: "\x1B[38;2;0;0;255m",
+  // Blue
+  info: "\x1B[38;2;0;128;0m",
+  // Green
+  warn: "\x1B[38;2;218;165;32m",
+  // Yellow
+  error: "\x1B[38;2;255;0;0m"
+  // Red
+};
+function formatMessage(level2, messages) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const color = colors[level2] || colors.reset;
+  const formattedMessages = messages.map((msg) => {
+    if (typeof msg === "object") {
+      try {
+        return JSON.stringify(msg, null, 2);
+      } catch (error2) {
+        return String(msg);
+      }
+    }
+    return String(msg);
+  }).join(" ");
+  return `${color}[${timestamp}] ${formattedMessages}${colors.reset}`;
+}
+var originalFactory = log.methodFactory;
+log.methodFactory = function(methodName, logLevel, loggerName) {
+  const rawMethod = originalFactory(methodName, logLevel, loggerName);
+  return function(...messages) {
+    rawMethod(formatMessage(methodName, messages));
+  };
+};
+if ((__vite_import_meta_env__ == null ? void 0 : __vite_import_meta_env__.VITE_DEBUG) === "True") {
+  log.setLevel("debug");
+} else {
+  log.setLevel("warn");
+}
+function trackRenderAsync(fn, context2) {
+  return async function(...args) {
+    let componentName = context2 ? context2 : this.name ? this.name : this.constructor.name;
+    if (this.element.id) {
+      componentName += ` (id: ${this.element.id})`;
+    } else if (this.dataSrc) {
+      componentName += ` (data-src: ${this.dataSrc})`;
+    } else if (this.resourceId) {
+      componentName += ` (resourceId: ${this.resourceId})`;
+    }
+    const startTime = performance.now();
+    const result = await fn.apply(this, args);
+    const endTime = performance.now();
+    const renderTime = endTime - startTime;
+    if (this.profiler) {
+      this.profiler.updateStats(componentName, renderTime);
+      this.profiler.printStats();
+    } else {
+      log.debug(`Component ${componentName} rendered in ${renderTime.toFixed(2)} ms`);
+    }
+    return result;
+  };
+}
+class Profiler {
+  constructor() {
+    this.stats = {};
+    this.stats = {};
+  }
+  getOrCreateStats(componentName) {
+    if (!this.stats[componentName]) {
+      this.stats[componentName] = {
+        renderCount: 0,
+        totalExecutionTime: 0,
+        lastExecutionTime: 0,
+        averageExecutionTime: 0,
+        minExecutionTime: Infinity,
+        maxExecutionTime: 0
+      };
+    }
+    return this.stats[componentName];
+  }
+  getStats(componentName) {
+    return this.stats[componentName];
+  }
+  updateStats(componentName, renderTime) {
+    const stats = this.getOrCreateStats(componentName);
+    stats.renderCount++;
+    stats.lastExecutionTime = renderTime;
+    stats.totalExecutionTime += renderTime;
+    stats.averageExecutionTime = stats.totalExecutionTime / stats.renderCount;
+    stats.minExecutionTime = Math.min(stats.minExecutionTime, renderTime);
+    stats.maxExecutionTime = Math.max(stats.maxExecutionTime, renderTime);
+  }
+  formatTime(time) {
+    if (time >= 1e3) {
+      return `${(time / 1e3).toFixed(2)} seconds`;
+    } else {
+      return `${time.toFixed(2)} ms`;
+    }
+  }
+  formatComponentStats(componentName, stats) {
+    return `
+Component: ${componentName}
+  Render Count: ${stats.renderCount}
+  Total Execution Time: ${this.formatTime(stats.totalExecutionTime)}
+  Last Execution Time: ${this.formatTime(stats.lastExecutionTime)}
+  Average Execution Time: ${this.formatTime(stats.averageExecutionTime)}
+  Min Execution Time: ${this.formatTime(stats.minExecutionTime)}
+  Max Execution Time: ${this.formatTime(stats.maxExecutionTime)}
+`;
+  }
+  printStats(componentName) {
+    let output = "Component Performance Stats:\n";
+    if (componentName) {
+      const stats = this.stats[componentName];
+      if (!stats) {
+        output += `Component ${componentName} not found.
+`;
+      } else {
+        output += this.formatComponentStats(componentName, stats);
+      }
+    } else {
+      for (const [name, stats] of Object.entries(this.stats)) {
+        output += this.formatComponentStats(name, stats);
+      }
+    }
+    log.debug(output);
+  }
+}
 class Component {
   constructor(element) {
     this.element = element;
+    this.profiler = new Profiler();
   }
   created() {
   }
@@ -1265,6 +1672,69 @@ function preHTML(strings, ...values) {
   });
   return html$1(newStrings, ...dropIndices(values, needlessValues));
 }
+class PostProcessorRegistry {
+  constructor(currentPostProcessors = []) {
+    this.currentPostProcessors = [...currentPostProcessors];
+  }
+  attach(callback, callbackName) {
+    this.currentPostProcessors.push({ name: callbackName, fn: callback });
+  }
+  getPostProcessors() {
+    return this.currentPostProcessors;
+  }
+  printCurrentCallbacks() {
+    if (this.currentPostProcessors.length === 0) {
+      console.log("No post-processors registered.");
+    } else {
+      console.log("Registered post-processors:");
+      this.currentPostProcessors.forEach((proc) => {
+        console.log(`- ${proc.name}`);
+      });
+    }
+  }
+  getFormattedCallbacks() {
+    if (this.currentPostProcessors.length === 0) {
+      return "No post-processors registered.";
+    } else {
+      let formattedText = "Registered post-processors:\n";
+      this.currentPostProcessors.forEach((proc) => {
+        formattedText += `- ${proc.name}
+`;
+      });
+      return formattedText.trim();
+    }
+  }
+  static printFormattedCallbacks(currentPostProcessors) {
+    if (currentPostProcessors.length === 0) {
+      return "No post-processors registered.";
+    } else {
+      let formattedText = "Registered post-processors:\n";
+      currentPostProcessors.forEach((proc) => {
+        formattedText += `- ${proc.name}
+`;
+      });
+      return formattedText.trim();
+    }
+  }
+  whichCallbackExecutedNext() {
+    if (this.currentPostProcessors.length === 0) {
+      return "No post-processors registered.";
+    } else {
+      return `Next post-processor to be executed is: ${this.currentPostProcessors[0].name}`;
+    }
+  }
+  deepCopy() {
+    const copy2 = new PostProcessorRegistry(this.currentPostProcessors);
+    return copy2;
+  }
+  shift() {
+    const res = this.currentPostProcessors.shift();
+    if (res) {
+      return res.fn;
+    }
+    return void 0;
+  }
+}
 const BaseWidgetMixin = {
   name: "widget-mixin",
   use: [],
@@ -1300,20 +1770,20 @@ const BaseWidgetMixin = {
     }
   },
   initialState: {
-    listValueTransformations: [],
-    listTemplateAdditions: [],
+    listValueTransformations: new PostProcessorRegistry(),
+    listTemplateAdditions: new PostProcessorRegistry(),
     listAttributes: {},
-    listCallbacks: [],
+    listCallbacks: new PostProcessorRegistry(),
     renderPlanned: false
   },
   get template() {
     return null;
   },
   created() {
-    this.listValueTransformations = [];
+    this.listValueTransformations = new PostProcessorRegistry();
     this.listAttributes = {};
-    this.listTemplateAdditions = [];
-    this.listCallbacks = [];
+    this.listTemplateAdditions = new PostProcessorRegistry();
+    this.listCallbacks = new PostProcessorRegistry();
     this.subscription = null;
   },
   attached() {
@@ -1332,23 +1802,23 @@ const BaseWidgetMixin = {
     }
   },
   render() {
-    const listValueTransformations = [...this.listValueTransformations];
-    listValueTransformations.push(this.renderTemplate.bind(this));
-    const nextProcessor = listValueTransformations.shift();
-    nextProcessor(this.value, listValueTransformations);
-    const listCallbacks = [...this.listCallbacks];
-    if (listCallbacks.length) {
-      const nextCallback = listCallbacks.shift();
-      nextCallback(this.value, listCallbacks);
+    const listValueTransformationsCopy = this.listValueTransformations.deepCopy();
+    listValueTransformationsCopy.attach(this.renderTemplate.bind(this), "BaseWidgetMixin:renderTemplate");
+    const nextProcessor = listValueTransformationsCopy.shift();
+    nextProcessor(this.value, listValueTransformationsCopy);
+    const listCallbacksCopy = this.listCallbacks.deepCopy();
+    const nextCallback = listCallbacksCopy.shift();
+    if (nextCallback) {
+      nextCallback(this.value, listCallbacksCopy);
     }
     this.element.dispatchEvent(new CustomEvent("widgetRendered", { bubbles: true }));
   },
   renderTemplate(value) {
     const template = this.template(value, { ...this.listAttributes });
-    const listTemplateAdditions = [...this.listTemplateAdditions];
-    listTemplateAdditions.push(this.templateToDOM.bind(this));
-    const nextProcessor = listTemplateAdditions.shift();
-    nextProcessor(template, listTemplateAdditions);
+    const listTemplateAdditionsCopy = this.listTemplateAdditions.deepCopy();
+    listTemplateAdditionsCopy.attach(this.templateToDOM.bind(this), "BaseWidgetMixin:templateToDOM");
+    const nextProcessor = listTemplateAdditionsCopy.shift();
+    nextProcessor(template, listTemplateAdditionsCopy);
   },
   templateToDOM(template) {
     render$1(template, this.element);
@@ -1430,34 +1900,6 @@ const defaultTemplates = {
     dependencies: []
   }
 };
-var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-  if (typeof f == "function") {
-    var a = function a2() {
-      if (this instanceof a2) {
-        return Reflect.construct(f, arguments, this.constructor);
-      }
-      return f.apply(this, arguments);
-    };
-    a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, "__esModule", { value: true });
-  Object.keys(n).forEach(function(k) {
-    var d = Object.getOwnPropertyDescriptor(n, k);
-    Object.defineProperty(a, k, d.get ? d : {
-      enumerable: true,
-      get: function() {
-        return n[k];
-      }
-    });
-  });
-  return a;
-}
 var jsonldContextParser = {};
 var ContextParser$3 = {};
 var g = typeof globalThis !== "undefined" && globalThis || typeof self !== "undefined" && self || // eslint-disable-next-line no-undef
@@ -12099,7 +12541,7 @@ const EditableMixin = {
     }
   },
   created() {
-    this.listTemplateAdditions.push(this.addEditButton.bind(this));
+    this.listTemplateAdditions.attach(this.addEditButton.bind(this), "EditableMixin:addEditButton");
   },
   addEditButton(template, listTemplateAdditions) {
     let newTemplate = null;
@@ -12518,7 +12960,7 @@ const MultipleFormMixin = {
     }
   },
   created() {
-    this.listValueTransformations.push(this.setDataSrc.bind(this));
+    this.listValueTransformations.attach(this.setDataSrc.bind(this), "MultipleFormMixin:setDataSrc");
     this.listAttributes["children"] = [];
     this.listAttributes["addLabel"] = this.addLabel;
     this.listAttributes["removeLabel"] = this.removeLabel;
@@ -12623,7 +13065,7 @@ const MultipleselectFormMixin = {
     }
   },
   created() {
-    this.listValueTransformations.push(this.setDataSrc.bind(this));
+    this.listValueTransformations.attach(this.setDataSrc.bind(this), "MultipleselectFormMixin:setDataSrc");
   },
   setDataSrc(value, listValueTransformations) {
     if (value && value !== this.dataSrc) {
@@ -12696,7 +13138,7 @@ const SorterMixin = {
     randomOrder: null
   },
   attached() {
-    this.listPostProcessors.push(this.orderCallback.bind(this));
+    this.listPostProcessors.attach(this.orderCallback.bind(this), "SorterMixin:orderCallback");
   },
   created() {
     this.randomOrder = [];
@@ -12793,7 +13235,7 @@ const FederationMixin = {
     containerFetched: null
   },
   attached() {
-    this.listPostProcessors.push(this.fetchSources.bind(this));
+    this.listPostProcessors.attach(this.fetchSources.bind(this), "FederationMixin:fetchSources");
   },
   async fetchSources(resources, listPostProcessors, div2, context2) {
     this.containerFetched = [];
@@ -12887,21 +13329,21 @@ const RangeMixin = {
     }
   },
   initialState: {
-    listPostProcessors: []
+    listPostProcessors: new PostProcessorRegistry()
   },
   created() {
-    this.listPostProcessors = [];
+    this.listPostProcessors = new PostProcessorRegistry();
     this.listAttributes["optionLabel"] = this.optionLabel;
     this.listAttributes["optionValue"] = this.optionValue;
   },
   async populate() {
     const resources = this.resource ? this.resource["ldp:contains"] : [];
-    const listPostProcessors = [...this.listPostProcessors];
-    listPostProcessors.push(this.setRangeAttribute.bind(this));
-    const nextProcessor = listPostProcessors.shift();
+    const listPostProcessorsCopy = this.listPostProcessors.deepCopy();
+    listPostProcessorsCopy.attach(this.setRangeAttribute.bind(this), "RangeMixin:setRangeAttribute");
+    const nextProcessor = listPostProcessorsCopy.shift();
     await nextProcessor(
       resources,
-      listPostProcessors,
+      listPostProcessorsCopy,
       null,
       this.dataSrc
     );
@@ -14133,7 +14575,7 @@ const index$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
 const DateMixin = {
   name: "date-mixin",
   created() {
-    this.listValueTransformations.push(this.transformValue.bind(this));
+    this.listValueTransformations.attach(this.transformValue.bind(this), "DateMixin:transformValue");
   },
   transformValue(value, listValueTransformations) {
     try {
@@ -14160,7 +14602,7 @@ const DateMixin = {
 const DateTimeMixin = {
   name: "date-time-mixin",
   created() {
-    this.listValueTransformations.push(this.transformValue.bind(this));
+    this.listValueTransformations.attach(this.transformValue.bind(this), "DateTimeMixin:transformValue");
   },
   transformValue(value, listValueTransformations) {
     const newValue = value ? new Date(value).toLocaleString() : value;
@@ -14199,7 +14641,7 @@ const unsafeHTML = directive((value) => (part2) => {
 const MultilineMixin = {
   name: "multiline-mixin",
   created() {
-    this.listValueTransformations.push(this.transformValue.bind(this));
+    this.listValueTransformations.attach(this.transformValue.bind(this), "MultilineMixin:transformValue");
   },
   transformValue(value, listValueTransformations) {
     const newValue = value ? unsafeHTML(value.replace(/\n/g, "<br/>")) : value;
@@ -19426,7 +19868,7 @@ const mila = /* @__PURE__ */ getDefaultExportFromCjs(markdownItLinkAttributes);
 const MarkdownMixin = {
   name: "markdown-mixin",
   created() {
-    this.listValueTransformations.push(this.transformValue.bind(this));
+    this.listValueTransformations.attach(this.transformValue.bind(this), "MarkdownMixin:transformValue");
   },
   transformValue(value, listValueTransformations) {
     let newValue = "";
@@ -19455,7 +19897,7 @@ const OembedMixin = {
     existingOembed: null
   },
   created() {
-    this.listValueTransformations.push(this.transformValue.bind(this));
+    this.listValueTransformations.attach(this.transformValue.bind(this), "OembedMixin:transformValue");
   },
   async transformValue(value, listValueTransformations) {
     if (!value) return;
@@ -21710,7 +22152,7 @@ function normalizeTruncateCfg(truncate) {
 const AutolinkMixin = {
   name: "autolink-mixin",
   created() {
-    this.listValueTransformations.push(this.transformValue.bind(this));
+    this.listValueTransformations.attach(this.transformValue.bind(this), "AutolinkMixin:transformValue");
   },
   transformValue(value, listValueTransformations) {
     const template = document.createElement("template");
@@ -21731,7 +22173,7 @@ const LabelMixin = {
   name: "label-mixin",
   created() {
     this.listAttributes["id"] = uniqID();
-    this.listTemplateAdditions.push(this.addLabel.bind(this));
+    this.listTemplateAdditions.attach(this.addLabel.bind(this), "LabelMixin:addLabel");
   },
   addLabel(template, listTemplateAdditions) {
     const newTemplate = html$1`
@@ -21745,7 +22187,7 @@ const LabelMixin = {
 const LabelLastMixin = {
   name: "label-last-mixin",
   created() {
-    this.listTemplateAdditions.push(this.addLabelLast.bind(this));
+    this.listTemplateAdditions.attach(this.addLabelLast.bind(this), "LabelLastMixin:addLabelLast");
   },
   addLabelLast(template, listTemplateAdditions) {
     const newTemplate = html$1`
@@ -21759,7 +22201,7 @@ const LabelLastMixin = {
 const AddableMixin = {
   name: "addable-mixin",
   created() {
-    this.listTemplateAdditions.push(this.addableValue.bind(this));
+    this.listTemplateAdditions.attach(this.addableValue.bind(this), "AddableMixin:addableValue");
   },
   getAddableAttributes() {
     const addableAttr = Array.from(this.element.attributes).filter((a) => a.name.startsWith("addable-"));
@@ -22535,7 +22977,7 @@ const AutocompletionMixin = {
     importInlineCSS("slimselect", () => import("./slimselect-DIo2l9XQ.js"));
     this.slimSelect = null;
     this.addToAttributes(true, "autocomplete");
-    this.listCallbacks.push(this.addCallback.bind(this));
+    this.listCallbacks.attach(this.addCallback.bind(this), "AutocompletionMixin:addCallback");
   },
   detached() {
     if (this.slimSelect) this.slimSelect.destroy();
@@ -46594,7 +47036,7 @@ const RichtextMixin = {
   created() {
     importInlineCSS("quill", () => import("./quill.snow-B73wIbzm.js"));
     this.quill = null;
-    this.listCallbacks.push(this.addCallback.bind(this));
+    this.listCallbacks.attach(this.addCallback.bind(this), "RichtextMixin:addCallback");
   },
   getPlaceHolderValue() {
     return this.element.hasAttribute("placeholder") ? this.element.getAttribute("placeholder") : "";
@@ -47176,12 +47618,12 @@ const ListMixin = {
   },
   initialState: {
     // Processors functions to execute on the list before rendering
-    listPostProcessors: [],
+    listPostProcessors: new PostProcessorRegistry(),
     // Rendering to execute after all the processors have been executed
     renderCallbacks: []
   },
   created() {
-    this.listPostProcessors = [];
+    this.listPostProcessors = new PostProcessorRegistry();
     this.renderCallbacks = [];
   },
   appendSingleElt(parent) {
@@ -47200,6 +47642,7 @@ const ListMixin = {
   },
   async populate() {
     var _a2, _b, _c, _d;
+    const listPostProcessorsCopy = this.listPostProcessors.deepCopy();
     const div2 = this.div;
     if (!this.resource) return;
     if (!((_b = (_a2 = this.resource).isContainer) == null ? void 0 : _b.call(_a2)) && !this.arrayField && !this.predicateName) {
@@ -47209,27 +47652,25 @@ const ListMixin = {
     }
     if ((_d = (_c = this.resource).isContainer) == null ? void 0 : _d.call(_c)) {
       this.setElementAttribute("container");
-      const listPostProcessors = [...this.listPostProcessors];
       this.renderCallbacks = [];
-      listPostProcessors.push(this.renderDOM.bind(this));
-      listPostProcessors.push(this.handleEmptyWidget.bind(this));
-      const nextProcessor = listPostProcessors.shift();
+      listPostProcessorsCopy.attach(this.renderDOM.bind(this), "ListMixin:renderDOM");
+      listPostProcessorsCopy.attach(this.handleEmptyWidget.bind(this), "ListMixin:handleEmptyWidget");
+      const nextProcessor = listPostProcessorsCopy.shift();
       await nextProcessor(
         this.resource["ldp:contains"],
-        listPostProcessors,
+        listPostProcessorsCopy,
         div2,
         this.dataSrc
       );
     } else if (this.arrayField && this.predicateName && this.resource[this.predicateName]) {
       this.setElementAttribute("container");
-      const listPostProcessors = [...this.listPostProcessors];
       this.renderCallbacks = [];
-      listPostProcessors.push(this.renderDOM.bind(this));
-      listPostProcessors.push(this.handleEmptyWidget.bind(this));
-      const nextProcessor = listPostProcessors.shift();
+      listPostProcessorsCopy.attach(this.renderDOM.bind(this), "ListMixin:renderDOM");
+      listPostProcessorsCopy.attach(this.handleEmptyWidget.bind(this), "ListMixin:handleEmptyWidget");
+      const nextProcessor = listPostProcessorsCopy.shift();
       await nextProcessor(
         await this.resource[this.predicateName],
-        listPostProcessors,
+        listPostProcessorsCopy,
         div2,
         this.dataSrc
       );
@@ -47307,7 +47748,7 @@ const PaginateMixin = {
     this.currentPage = [];
   },
   attached() {
-    this.listPostProcessors.push(this.paginateCallback.bind(this));
+    this.listPostProcessors.attach(this.paginateCallback.bind(this), "PaginateMixin:paginateCallback");
   },
   async paginateCallback(resources, listPostProcessors, div2, context2) {
     if (this.paginateBy > 0) {
@@ -47605,7 +48046,7 @@ const FilterMixin = {
       if (!this.searchForm) throw `#${filteredBy} is not in DOM`;
       this.searchForm.addEventListener("formChange", () => this.onServerSearchChange());
     } else {
-      this.listPostProcessors.push(this.filterCallback.bind(this));
+      this.listPostProcessors.attach(this.filterCallback.bind(this), "FilterMixin:filterCallback");
     }
   },
   get filters() {
@@ -47719,7 +48160,7 @@ const CounterMixin = {
     parentCounterDiv: null
   },
   attached() {
-    this.listPostProcessors.push(this.countResources.bind(this));
+    this.listPostProcessors.attach(this.countResources.bind(this), "CounterMixin:countResources");
   },
   async countResources(resources, listPostProcessors, div2, context2) {
     if (this.counterTemplate) {
@@ -47781,7 +48222,7 @@ const GrouperMixin = {
     }
   },
   attached() {
-    this.listPostProcessors.push(this.groupResources.bind(this));
+    this.listPostProcessors.attach(this.groupResources.bind(this), "GrouperMixin:groupResources");
   },
   async groupResources(resources, listPostProcessors, div2, context2) {
     const nextProcessor = listPostProcessors.shift();
@@ -47805,7 +48246,7 @@ const GrouperMixin = {
         if (nextProcessor) await nextProcessor(
           groups[group].resources,
           // give only resources from group
-          [...listPostProcessors],
+          listPostProcessors.deepCopy(),
           // copy post processors
           parent,
           // parent is group widget
@@ -47841,7 +48282,7 @@ const HighlighterMixin = {
   name: "highlighter-mixin",
   use: [],
   attached() {
-    this.listPostProcessors.push(this.hightlightCallback.bind(this));
+    this.listPostProcessors.attach(this.hightlightCallback.bind(this), "HighlighterMixin:hightlightCallback");
   },
   async hightlightCallback(resources, listPostProcessors, div2, context2) {
     for (let attr of this.element.attributes) {
@@ -47894,7 +48335,7 @@ const RequiredMixin = {
   name: "required-mixin",
   use: [],
   attached() {
-    this.listPostProcessors.push(this.requiredResources.bind(this));
+    this.listPostProcessors.attach(this.requiredResources.bind(this), "RequiredMixin:requiredResources");
   },
   async requiredResources(resources, listPostProcessors, div2, context2) {
     const displays = [];
@@ -48039,7 +48480,7 @@ const SolidDisplay = {
    * @param div
    * @param context
    */
-  async renderDOM(resources, listPostProcessors, div2, context2) {
+  renderDOM: trackRenderAsync(async function(resources, listPostProcessors, div2, context2) {
     const attributes = this.getChildAttributes();
     const template = html$1`${resources.map((r) => r ? this.getChildTemplate(r["@id"], attributes) : null)}`;
     render$1(template, div2);
@@ -48051,7 +48492,7 @@ const SolidDisplay = {
         div2,
         context2
       );
-  },
+  }, "SolidDisplay:renderDom"),
   /**
    * Get attributes to dispatch to children from current element
    */
@@ -49044,29 +49485,32 @@ const SolidForm = {
       </div>
     `;
   },
-  async populate() {
-    this.element.oninput = () => this.onInput();
-    this.element.onchange = () => this.onChange();
-    const fields = await this.getFields();
-    const widgetTemplates = await Promise.all(fields.map((field) => this.createWidgetTemplate(field)));
-    const template = html$1`
-      <div data-id="error"></div>
-      ${!this.isNaked ? html$1`
-        <form
-          @submit=${this.onSubmit.bind(this)}
-          @reset=${this.onReset.bind(this)}
-        >
+  populate: trackRenderAsync(
+    async function() {
+      this.element.oninput = () => this.onInput();
+      this.element.onchange = () => this.onChange();
+      const fields = await this.getFields();
+      const widgetTemplates = await Promise.all(fields.map((field) => this.createWidgetTemplate(field)));
+      const template = html$1`
+        <div data-id="error"></div>
+        ${!this.isNaked ? html$1`
+          <form
+            @submit=${this.onSubmit.bind(this)}
+            @reset=${this.onReset.bind(this)}
+          >
+            ${widgetTemplates}
+            ${!this.isSavingAutomatically ? this.getSubmitTemplate() : ""}
+            ${this.element.hasAttribute("reset") ? html$1`<input type="reset" />` : ""}
+          </form>
+        ` : html$1`
           ${widgetTemplates}
-          ${!this.isSavingAutomatically ? this.getSubmitTemplate() : ""}
-          ${this.element.hasAttribute("reset") ? html$1`<input type="reset" />` : ""}
-        </form>
-      ` : html$1`
-        ${widgetTemplates}
-      `}
-      ${this.getModalDialog()}
-    `;
-    render$1(template, this.element);
-  }
+        `}
+        ${this.getModalDialog()}
+      `;
+      render$1(template, this.element);
+    },
+    "SolidForm:populate"
+  )
 };
 Sib.register(SolidForm);
 const SolidFormSearch = {
@@ -49254,26 +49698,29 @@ const SolidFormSearch = {
       this.inputChange(input);
     }, this.debounce);
   },
-  async populate() {
-    await this.replaceAttributesData();
-    if (this.submitButton == null) {
-      this.element.addEventListener("input", (e) => this.debounceInput(e.target));
-    } else {
-      this.element.addEventListener("submit", (e) => {
-        e.preventDefault();
-        this.inputChange(e.target);
-      });
-    }
-    const fields = await this.getFields();
-    const widgetTemplates = await Promise.all(fields.map((field) => this.createWidgetTemplate(field)));
-    const template = html$1`
-      <form>
-        ${widgetTemplates}
-        ${this.submitButton == null ? "" : this.getSubmitTemplate()}
-      </form>
-    `;
-    render$1(template, this.element);
-  }
+  populate: trackRenderAsync(
+    async function() {
+      await this.replaceAttributesData();
+      if (this.submitButton == null) {
+        this.element.addEventListener("input", (e) => this.debounceInput(e.target));
+      } else {
+        this.element.addEventListener("submit", (e) => {
+          e.preventDefault();
+          this.inputChange(e.target);
+        });
+      }
+      const fields = await this.getFields();
+      const widgetTemplates = await Promise.all(fields.map((field) => this.createWidgetTemplate(field)));
+      const template = html$1`
+        <form>
+          ${widgetTemplates}
+          ${this.submitButton == null ? "" : this.getSubmitTemplate()}
+        </form>
+      `;
+      render$1(template, this.element);
+    },
+    "SolidFormSearch:populate"
+  )
 };
 Sib.register(SolidFormSearch);
 const SolidWidget = {
@@ -49356,25 +49803,28 @@ const SolidAcChecker = {
       default: ""
     }
   },
-  async populate() {
-    if (!this.resource) return;
-    let displayElement;
-    const ContextParser3 = JSONLDContextParser.ContextParser;
-    const permissions = await this.resource.permissions;
-    if (this.permission) {
-      displayElement = permissions.some((p) => {
-        return ContextParser3.expandTerm(p, this.context, true) === this.permission;
-      });
-    } else if (this.noPermission) {
-      displayElement = permissions.every((p) => {
-        return ContextParser3.expandTerm(p, this.context, true) !== this.noPermission;
-      });
-    } else {
-      console.warn('solid-ac-checker: you should define at least one of "permission" or "no-permission" attribute.');
-      return;
-    }
-    if (displayElement) this.element.removeAttribute("hidden");
-  },
+  populate: trackRenderAsync(
+    async function() {
+      if (!this.resource) return;
+      let displayElement;
+      const ContextParser3 = JSONLDContextParser.ContextParser;
+      const permissions = await this.resource.permissions;
+      if (this.permission) {
+        displayElement = permissions.some((p) => {
+          return ContextParser3.expandTerm(p, this.context, true) === this.permission;
+        });
+      } else if (this.noPermission) {
+        displayElement = permissions.every((p) => {
+          return ContextParser3.expandTerm(p, this.context, true) !== this.noPermission;
+        });
+      } else {
+        console.warn('solid-ac-checker: you should define at least one of "permission" or "no-permission" attribute.');
+        return;
+      }
+      if (displayElement) this.element.removeAttribute("hidden");
+    },
+    "SolidAcChecker:populate"
+  ),
   empty() {
     this.element.setAttribute("hidden", "");
   }
@@ -49434,14 +49884,17 @@ const SolidDelete = {
   update() {
     this.render();
   },
-  async render() {
-    await this.replaceAttributesData(false);
-    const button = html$1`
-      <button @click=${this.delete.bind(this)}>${this.dataLabel || this.t("solid-delete.button")}</button>
-      ${this.getModalDialog()}
-    `;
-    render$1(button, this.element);
-  }
+  render: trackRenderAsync(
+    async function() {
+      await this.replaceAttributesData(false);
+      const button = html$1`
+        <button @click=${this.delete.bind(this)}>${this.dataLabel || this.t("solid-delete.button")}</button>
+        ${this.getModalDialog()}
+      `;
+      render$1(button, this.element);
+    },
+    "SolidDelete:render"
+  )
 };
 Sib.register(SolidDelete);
 const SolidLang = {
@@ -49702,7 +50155,7 @@ const SolidTable = {
    * @param div
    * @param context
    */
-  async renderDOM(resources, listPostProcessors, div2, context2) {
+  renderDOM: trackRenderAsync(async function(resources, listPostProcessors, div2, context2) {
     const selectedLines = [...this.selectedLines];
     const fields = await this.getFields();
     const childTemplates = await Promise.all(
@@ -49723,7 +50176,7 @@ const SolidTable = {
         div2,
         context2
       );
-  }
+  }, "SolidTable:renderDom")
 };
 Sib.register(SolidTable);
 const SolidMap = {
@@ -49902,13 +50355,16 @@ const SolidMap = {
    * @param div
    * @param context
    */
-  async renderDOM(resources, listPostProcessors, div2, context2) {
-    const groupClass = div2.dataset.groupClass || "";
-    await Promise.all(resources.map((resource) => this.appendChildElt(resource["@id"], groupClass)));
-    this.planReset();
-    const nextProcessor = listPostProcessors.shift();
-    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div2, context2);
-  }
+  renderDOM: trackRenderAsync(
+    async function(resources, listPostProcessors, div2, context2) {
+      const groupClass = div2.dataset.groupClass || "";
+      await Promise.all(resources.map((resource) => this.appendChildElt(resource["@id"], groupClass)));
+      this.planReset();
+      const nextProcessor = listPostProcessors.shift();
+      if (nextProcessor) await nextProcessor(resources, listPostProcessors, div2, context2);
+    },
+    "SolidMap:renderDOM"
+  )
 };
 Sib.register(SolidMap);
 const SolidMembership = {
@@ -50040,32 +50496,35 @@ const SolidMembership = {
   update() {
     this.render();
   },
-  async render() {
-    await this.populate();
-    let button = html$1``;
-    if (this.isMember) {
-      button = html$1`
-        <solid-ac-checker data-src="${this.dataSrc}"
-              permission="acl:Read"
-              class=${ifDefined(`${this.classSubmitButton ? "leave " + this.classSubmitButton : "leave"}`)}
-            >
-          <button @click=${this.changeMembership.bind(this)}>${this.dataLeaveLabel || this.t("solid-leave-group.button")}</button>
-          ${this.getModalDialog()}
-        </solid-ac-checker>
-        `;
-    } else {
-      button = html$1`
-        <solid-ac-checker data-src="${this.dataSrc}"
-              permission="acl:Read"
-              class=${ifDefined(`${this.classSubmitButton ? "join " + this.classSubmitButton : "join"}`)}
-            >
-          <button @click=${this.changeMembership.bind(this)}>${this.dataJoinLabel || this.t("solid-join-group.button")}</button>
-          ${this.getModalDialog()}
-        </solid-ac-checker>
-        `;
-    }
-    render$1(button, this.element);
-  }
+  render: trackRenderAsync(
+    async function() {
+      await this.populate();
+      let button = html$1``;
+      if (this.isMember) {
+        button = html$1`
+          <solid-ac-checker data-src="${this.dataSrc}"
+                permission="acl:Read"
+                class=${ifDefined(`${this.classSubmitButton ? "leave " + this.classSubmitButton : "leave"}`)}
+              >
+            <button @click=${this.changeMembership.bind(this)}>${this.dataLeaveLabel || this.t("solid-leave-group.button")}</button>
+            ${this.getModalDialog()}
+          </solid-ac-checker>
+          `;
+      } else {
+        button = html$1`
+          <solid-ac-checker data-src="${this.dataSrc}"
+                permission="acl:Read"
+                class=${ifDefined(`${this.classSubmitButton ? "join " + this.classSubmitButton : "join"}`)}
+              >
+            <button @click=${this.changeMembership.bind(this)}>${this.dataJoinLabel || this.t("solid-join-group.button")}</button>
+            ${this.getModalDialog()}
+          </solid-ac-checker>
+          `;
+      }
+      render$1(button, this.element);
+    },
+    "SolidMembership:render"
+  )
 };
 Sib.register(SolidMembership);
 const SolidMemberDelete = {
@@ -50172,11 +50631,12 @@ const SolidMemberDelete = {
   update() {
     this.render();
   },
-  async render() {
-    await this.populate();
-    let button = html$1``;
-    if (this.isMember) {
-      button = html$1`
+  render: trackRenderAsync(
+    async function() {
+      await this.populate();
+      let button = html$1``;
+      if (this.isMember) {
+        button = html$1`
         <solid-ac-checker data-src="${this.dataSrc}"
               permission="acl:Write"
               class=${ifDefined(this.classSubmitButton)}
@@ -50188,13 +50648,15 @@ const SolidMemberDelete = {
           ${this.getModalDialog()}
         </solid-ac-checker>
         `;
-    } else {
-      button = html$1`
+      } else {
+        button = html$1`
         <span>${this.dataUnknownMember || this.t("solid-member-unknown.span")}</span>
       `;
-    }
-    render$1(button, this.element);
-  }
+      }
+      render$1(button, this.element);
+    },
+    "SolidMemberDelete:render"
+  )
 };
 Sib.register(SolidMemberDelete);
 const SolidMemberAdd = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/core",
-  "version": "0.19.22-beta.2",
+  "version": "0.19.22-beta.3",
   "description": "This is a series of web component respecting both the web components standards and the Linked Data Platform convention.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -97,6 +97,7 @@
     "vite": "^5.4.8"
   },
   "dependencies": {
-    "cors": "^2.8.5"
+    "cors": "^2.8.5",
+    "loglevel": "^1.9.1"
   }
 }