@schukai/monster 4.48.0 → 4.48.2

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.48.2] - 2025-12-02
+
+### Bug Fixes
+
+- **select:** own lookup cache
+
+
+
+## [4.48.1] - 2025-11-28
+
+### Bug Fixes
+
+- **components:** Prevent duplicate entries in select component [#345](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/345)
+
+
+
 ## [4.48.0] - 2025-11-28
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.48.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.48.2"}

package/source/components/form/select.mjs

@@ -272,6 +272,18 @@ const currentPageSymbol = Symbol("currentPage");
  */
 const remoteFilterFirstOpendSymbol = Symbol("remoteFilterFirstOpend");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const lookupCacheSymbol = Symbol("lookupCache");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const lookupInProgressSymbol = Symbol("lookupInProgress");
+
 /**
  * @private
  * @type {number}
@@ -346,6 +358,8 @@ class Select extends CustomControl {
   constructor() {
     super();
     this[currentPageSymbol] = 1;
+    this[lookupCacheSymbol] = new Map();
+    this[lookupInProgressSymbol] = new Map();
     initOptionObserver.call(this);
   }
 
@@ -613,6 +627,10 @@ class Select extends CustomControl {
     try {
       hide.call(this);
 
+      // Clear the lookup cache
+      this[lookupCacheSymbol].clear();
+      this[lookupInProgressSymbol].clear();
+
       setSelection
         .call(this, null)
         .then(() => {
@@ -1047,21 +1065,25 @@ function importOptionsIntern(data) {
   }
 
   for (const [value, label] of entries) {
+    let found = false;
     for (const option of options) {
       if (option.value === value) {
         option.label = label;
         option.visibility = visibility;
         option.data = map.get(value);
-        continue;
+        found = true;
+        break;
       }
     }
 
-    options.push({
-      value,
-      label,
-      visibility,
-      data: map.get(value),
-    });
+    if (!found) {
+      options.push({
+        value,
+        label,
+        visibility,
+        data: map.get(value),
+      });
+    }
   }
 
   this.setOption("options", options);
@@ -1841,6 +1863,11 @@ function parseSlotsToOptions() {
  * @return {*}
  */
 function buildSelectionLabel(value) {
+  // First, check the lookup cache.
+  if (this[lookupCacheSymbol].has(value)) {
+    return this[lookupCacheSymbol].get(value);
+  }
+
   const options = this.getOption("options");
 
   for (let i = 0; i < options.length; i++) {
@@ -1875,6 +1902,62 @@ function buildSelectionLabel(value) {
   return undefined;
 }
 
+/**
+ * @private
+ * @param {string} value The value to look up.
+ * @returns {Promise<void>}
+ */
+async function lookupValueAndCache(value) {
+  const lookupUrl = this.getOption("lookup.url");
+  if (!lookupUrl || !value) {
+    return;
+  }
+
+  // Avoid duplicate lookups for the same value.
+  if (this[lookupInProgressSymbol].has(value)) {
+    return;
+  }
+
+  try {
+    this[lookupInProgressSymbol].set(value, true);
+
+    const markerOpen = this.getOption("filter.marker.open", "{");
+    const markerClose = this.getOption("filter.marker.close", "}");
+    const url = lookupUrl.replace(`${markerOpen}filter${markerClose}`, value);
+
+    const data = await fetchData.call(this, url);
+
+    const mappingOptions = this.getOption("mapping", {});
+    const map = buildMap(
+      data,
+      mappingOptions.selector,
+      mappingOptions.labelTemplate,
+      mappingOptions.valueTemplate,
+      mappingOptions.filter,
+    );
+
+    let found = false;
+    for (const [itemValue, itemLabel] of map.entries()) {
+      // The lookup might return more than the requested value, so we cache all of them.
+      if (!this[lookupCacheSymbol].has(itemValue)) {
+        this[lookupCacheSymbol].set(itemValue, itemLabel);
+        if (`${itemValue}` === `${value}`) {
+          found = true;
+        }
+      }
+    }
+
+    // If the specific value was found, trigger a re-render of the selection.
+    if (found) {
+      await setSelection.call(this, this.getOption("selection"));
+    }
+  } catch (e) {
+    addErrorAttribute(this, e);
+  } finally {
+    this[lookupInProgressSymbol].delete(value);
+  }
+}
+
 /**
  * @private
  * @param {*} value
@@ -1888,6 +1971,13 @@ function getSelectionLabel(value) {
     if (isString(label)) return label;
   }
 
+  // If the label was not found, and we have a lookup URL, trigger a lookup.
+  if (this.getOption("lookup.url")) {
+    lookupValueAndCache.call(this, value).catch((e) => {
+      addErrorAttribute(this, e);
+    });
+  }
+
   if (isString(value) || isInteger(value)) {
     return `${value}`;
   }