@descope-ui/common 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.4](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.3...@descope-ui/common-0.0.4) (2025-02-17)
+
+## [0.0.3](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.2...@descope-ui/common-0.0.3) (2025-02-04)
+
 ## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.1...@descope-ui/common-0.0.2) (2025-01-28)
 
 ## 0.0.1 (2025-01-28)

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@descope-ui/common",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",
+    "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2"
   },
   "exports": {

package/src/baseClasses/baseClasses/createBaseConnectorClass.js

@@ -0,0 +1,70 @@
+export const CONNECTOR_ERRORS = {
+  CONNECTOR_INVALID: 'CONNECTOR_INVALID',
+  FETCH_RESULTS_ERROR: 'FETCH_RESULTS_ERROR',
+};
+
+export const createBaseConnectorClass = () =>
+  class BaseConnectorClass {
+    constructor(getAttribute) {
+      this.getAttribute = getAttribute;
+      this.isValid = this.#validateConfig();
+    }
+
+    checkConnectorValidity() {
+      this.isValid = this.#validateConfig();
+    }
+
+    #validateConfig() {
+      const missingOrInvalidParams = this.getRequiredParams().filter(
+        (param) => {
+          const value = this.getAttribute(param);
+          return !value || !this.validateParam(param, value);
+        },
+      );
+
+      if (missingOrInvalidParams.length) {
+        // eslint-disable-next-line no-console
+        console.error(
+          `[${this.constructor.name}] Invalid configuration. Issues with parameters:`,
+          missingOrInvalidParams.map((param) => ({
+            param,
+            value: this.getAttribute(param),
+          })),
+        );
+        return false;
+      }
+      return true;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    validateParam(param, value) {
+      // Base validation - can be overridden by specific connectors
+      return value.trim().length > 0;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getRequiredParams() {
+      // eslint-disable-next-line no-console
+      console.error('Connector must implement getRequiredParams');
+      return [];
+    }
+
+    async fetch(query) {
+      if (!this.isValid) {
+        // eslint-disable-next-line no-console
+        console.error(
+          `[${this.constructor.name}] Cannot fetch results: connector is not properly configured`,
+        );
+        return { results: [], error: CONNECTOR_ERRORS.CONNECTOR_INVALID };
+      }
+
+      return this._fetchResults(query);
+    }
+
+    // eslint-disable-next-line class-methods-use-this, no-unused-vars
+    _fetchResults(query) {
+      // eslint-disable-next-line no-console
+      console.error('Connector must implement fetchResults');
+      return { results: [], error: undefined };
+    }
+  };

package/src/baseClasses/index.js

@@ -1,3 +1,4 @@
 export * from './baseClasses/createBaseClass';
 export * from './baseClasses/createCssVarImageClass';
 export * from './baseClasses/createBaseInputClass';
+export * from './baseClasses/createBaseConnectorClass';

package/src/componentsMixins/mixins/connectorMixin.js

@@ -0,0 +1,68 @@
+export const connectorMixin =
+  ({ connectorClasses }) =>
+  (superclass) =>
+    class ConnectorMixinClass extends superclass {
+      #connectorClasses = connectorClasses;
+
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), 'connector-template'];
+      }
+
+      get connectorClasses() {
+        return this.#connectorClasses;
+      }
+
+      set connectorClasses(value) {
+        this.#connectorClasses = value;
+      }
+
+      get connectorTemplate() {
+        return this.getAttribute('connector-template');
+      }
+
+      initializeConnector() {
+        const template = this.connectorTemplate;
+
+        if (!this.connectorClasses[template]) {
+          // eslint-disable-next-line no-console
+          console.error(`Unsupported connector template: ${template}`);
+          return;
+        }
+        const ConnectorClass = this.connectorClasses[template];
+        this.connector = new ConnectorClass(this.getAttribute.bind(this));
+      }
+
+      async fetchConnectorResults(query) {
+        if (!this.connector) {
+          // eslint-disable-next-line no-console
+          console.error('No connector initialized for the field');
+          return { results: [] };
+        }
+
+        const { results, error } = await this.connector.fetch(query);
+        if (error) {
+          return { results: [], error };
+        }
+        return {
+          results: results.map(({ label, value }) => ({
+            label,
+            value,
+          })),
+        };
+      }
+
+      init() {
+        super.init?.();
+        this.initializeConnector();
+      }
+
+      attributeChangedCallback(attrName, oldValue, newValue) {
+        super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+        if (oldValue !== newValue) {
+          if (attrName === 'connector-template') {
+            this.initializeConnector();
+          }
+        }
+      }
+    };

package/src/componentsMixins/mixins/index.js

@@ -11,4 +11,5 @@ export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMix
 export { lifecycleEventsMixin } from './lifecycleEventsMixin';
 export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';
 export { externalInputMixin } from './externalInputMixin';
-export {componentsContextMixin} from './componentsContextMixin'
+export { componentsContextMixin } from './componentsContextMixin';
+export { connectorMixin } from './connectorMixin';

package/src/utils/asyncDebounce.js

@@ -0,0 +1,58 @@
+import debounce from 'lodash.debounce';
+
+/**
+ * Creates a debounced version of an async function that manages multiple pending promises and ensures proper error handling.
+ * When multiple calls are made within the wait period, all pending promises will be resolved/rejected with the result/error
+ * of the most recent call.
+ *
+ * @param {Function} func - The async function to debounce.
+ * @param {number} wait - The number of milliseconds to delay before calling the function.
+ * @returns {Function} A debounced version of the input function that returns a promise which will resolve/reject based on
+ *                    the most recent call's result.
+ *
+ * @example
+ * const debouncedSearch = asyncDebounce(async (query) => {
+ *   const results = await api.search(query);
+ *   return results;
+ * }, 300);
+ *
+ * // Multiple calls within 300ms will all resolve with the results from the last call
+ * const promise1 = debouncedSearch('search');
+ * const promise2 = debouncedSearch('search term');
+ * // Both promises will resolve with results from 'search term'
+ *
+ * // If the last call throws an error, all pending promises will be rejected
+ * try {
+ *   await debouncedSearch('error term');
+ * } catch (error) {
+ *   // Handle error
+ * }
+ */
+export const asyncDebounce = (func, wait) => {
+  let currentId = 0;
+  const resolveSet = new Set();
+  const rejectSet = new Set();
+
+  const debounced = debounce((args, requestId) => {
+    func(...args)
+      .then((result) => {
+        if (requestId === currentId) {
+          resolveSet.forEach((resolve) => resolve(result));
+          resolveSet.clear();
+        }
+      })
+      .catch((error) => {
+        rejectSet.forEach((reject) => reject(error));
+        rejectSet.clear();
+      });
+  }, wait);
+
+  return (...args) => {
+    currentId++; // Increment for new request
+    return new Promise((resolve, reject) => {
+      resolveSet.add(resolve);
+      rejectSet.add(reject);
+      debounced(args, currentId);
+    });
+  };
+};

package/src/utils/index.js

@@ -1,10 +1,13 @@
+export { asyncDebounce } from './asyncDebounce';
+
 export const kebabCase = (str) =>
   str
     .replace(/([a-z])([A-Z])/g, '$1-$2')
     .replace(/[\s_.]+/g, '-')
     .toLowerCase();
 
-export const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
+export const kebabCaseJoin = (...args) =>
+  kebabCase(args.filter((arg) => !!arg).join('-'));
 
 export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);