vueless 1.3.9-beta.8 → 1.4.0

package/utils/node/mergeConfigs.js

@@ -1,7 +1,67 @@
-import { cloneDeep } from "lodash-es";
-
 import { SYSTEM_CONFIG_KEY } from "../../constants.js";
 
+const {
+  i18n: I18N,
+  defaults: DEFAULTS,
+  unstyled: UNSTYLED,
+  colors: COLORS,
+  defaultVariants: DEFAULT_VARIANTS,
+  compoundVariants: COMPOUND_VARIANTS,
+} = SYSTEM_CONFIG_KEY;
+
+const EMPTY_OBJECT = Object.freeze({});
+
+/**
+ * Shallow clone a plain object (one level deep).
+ * Avoids the overhead of lodash cloneDeep for flat config objects.
+ */
+function shallowClone(object) {
+  if (!object || typeof object !== "object") return {};
+
+  return Object.assign({}, object);
+}
+
+/**
+ * Deep clone plain objects and arrays recursively.
+ * Handles only primitives, plain objects, and arrays (sufficient for config data).
+ */
+function deepClone(source) {
+  if (source === null || typeof source !== "object") return source;
+
+  if (Array.isArray(source)) {
+    const result = new Array(source.length);
+
+    for (let i = 0; i < source.length; i++) {
+      result[i] = deepClone(source[i]);
+    }
+
+    return result;
+  }
+
+  const result = {};
+
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      result[key] = deepClone(source[key]);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Check if a plain object has own keys (avoids Object.keys allocation).
+ */
+function hasOwnKeys(object) {
+  if (!object || typeof object !== "object") return false;
+
+  for (const _ in object) {
+    if (Object.prototype.hasOwnProperty.call(object, _)) return true;
+  }
+
+  return false;
+}
+
 export function createMergeConfigs(cx) {
   /**
    * Recursively merge config objects with removing tailwind classes duplicates.
@@ -15,86 +75,91 @@ export function createMergeConfigs(cx) {
     config = {},
     isVariants = false,
   }) {
-    globalConfig = cloneDeep(stringToObject(globalConfig, { addBase: true }));
-    propsConfig = cloneDeep(stringToObject(propsConfig, { addBase: true }));
+    const globalObj = stringToObject(globalConfig, true);
+    const propsObj = stringToObject(propsConfig, true);
 
-    const isGlobalConfig = Object.keys(globalConfig).length;
-    const isPropsConfig = Object.keys(propsConfig).length;
+    const isGlobalConfig = hasOwnKeys(globalObj);
+    const isPropsConfig = hasOwnKeys(propsObj);
 
-    // Add unique keys from defaultConfig to composedConfig
-    const composedConfig = cloneDeep(stringToObject(defaultConfig, { addBase: true }));
+    // Early return: no overrides, just return a shallow clone of the default
+    if (!isGlobalConfig && !isPropsConfig) {
+      return shallowClone(stringToObject(defaultConfig, true));
+    }
 
-    // Add unique keys from globalConfig to composedConfig
-    for (const key in globalConfig) {
-      if (!Object.keys(composedConfig).includes(key)) {
-        composedConfig[key] = globalConfig[key];
+    // Build composedConfig with all unique keys
+    const defaultObj = stringToObject(defaultConfig, true);
+    const composedConfig = Object.assign({}, defaultObj);
+
+    // Add unique keys from globalConfig
+    for (const key in globalObj) {
+      if (!(key in composedConfig)) {
+        composedConfig[key] = globalObj[key];
       }
     }
 
-    // Add unique keys from propsConfig to composedConfig
-    for (const key in propsConfig) {
-      if (!Object.keys(composedConfig).includes(key)) {
-        composedConfig[key] = propsConfig[key];
+    // Add unique keys from propsConfig
+    for (const key in propsObj) {
+      if (!(key in composedConfig)) {
+        composedConfig[key] = propsObj[key];
       }
     }
 
-    const { i18n, defaults, unstyled, colors, defaultVariants, compoundVariants } =
-      SYSTEM_CONFIG_KEY;
-
     for (const key in composedConfig) {
-      if (isGlobalConfig || isPropsConfig) {
-        if (key === colors) {
-          if (propsConfig[key]) {
-            // eslint-disable-next-line no-console
-            console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
-          }
-        } else if (key === unstyled) {
-          config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-        } else if (key === defaults || key === defaultVariants) {
-          config[key] = {
-            ...defaultConfig[key],
-            ...globalConfig[key],
-            ...propsConfig[key],
-          };
-        } else if (key === compoundVariants) {
-          config[key] = mergeCompoundVariants({
-            defaultConfig,
-            globalConfig,
-            propsConfig,
-          });
-        } else {
-          const isObjectComposedConfig = typeof composedConfig[key] === "object";
-          const isObjectGlobalConfig = typeof globalConfig[key] === "object";
-          const isObjectPropsConfig = typeof propsConfig[key] === "object";
-
-          const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
-          const isEmpty = composedConfig[key] === null;
-          const isI18n = key === i18n;
+      if (key === COLORS) {
+        if (propsObj[key]) {
+          // eslint-disable-next-line no-console
+          console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
+        }
+      } else if (key === UNSTYLED) {
+        config[key] = propsObj[key] || globalObj[key] || defaultObj[key];
+      } else if (key === DEFAULTS || key === DEFAULT_VARIANTS) {
+        config[key] = {
+          ...defaultObj[key],
+          ...globalObj[key],
+          ...propsObj[key],
+        };
+      } else if (key === COMPOUND_VARIANTS) {
+        config[key] = mergeCompoundVariants({
+          defaultConfig: defaultObj,
+          globalConfig: globalObj,
+          propsConfig: propsObj,
+        });
+      } else {
+        const composedValue = composedConfig[key];
+        const globalValue = globalObj[key];
+        const propsValue = propsObj[key];
+
+        const isObject =
+          (composedValue !== null && typeof composedValue === "object") ||
+          (globalValue !== undefined && typeof globalValue === "object") ||
+          (propsValue !== undefined && typeof propsValue === "object");
+        const isEmpty = composedValue === null;
+        const isI18n = key === I18N;
+
+        if (key === "variants" && !isVariants) {
+          isVariants = true;
+        }
 
-          if (key === "variants" && !isVariants) {
-            isVariants = true;
-          }
+        let mergedKey = "";
 
-          let mergedKey = "";
-
-          if (isObject && !isEmpty && !isI18n) {
-            mergedKey = mergeConfigs({
-              defaultConfig: stringToObject(composedConfig[key], { addBase: !isVariants }),
-              globalConfig: stringToObject(globalConfig[key], { addBase: !isVariants }),
-              propsConfig: stringToObject(propsConfig[key], { addBase: !isVariants }),
-              config: stringToObject(composedConfig[key], { addBase: !isVariants }),
-              isVariants,
-            });
-          } else if (isI18n) {
-            mergedKey = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-          } else {
-            mergedKey = cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
-          }
+        if (isObject && !isEmpty && !isI18n) {
+          const addBase = !isVariants;
+          const defaultNested = stringToObject(composedValue, addBase);
 
-          config[key] = mergedKey;
+          mergedKey = mergeConfigs({
+            defaultConfig: defaultNested,
+            globalConfig: stringToObject(globalValue, addBase),
+            propsConfig: stringToObject(propsValue, addBase),
+            config: shallowClone(defaultNested),
+            isVariants,
+          });
+        } else if (isI18n) {
+          mergedKey = propsValue || globalValue || defaultObj[key];
+        } else {
+          mergedKey = cx([defaultObj[key], globalValue, propsValue]);
         }
-      } else {
-        config[key] = composedConfig[key];
+
+        config[key] = mergedKey;
       }
     }
 
@@ -114,51 +179,70 @@ export function createMergeConfigs(cx) {
       console.error("CompoundVariants should be an array.");
     }
 
+    // Early return: no compound variants at all
+    if (
+      !defaultConfig.compoundVariants &&
+      !globalConfig.compoundVariants &&
+      !propsConfig.compoundVariants
+    ) {
+      return [];
+    }
+
     const defaultCompoundVariants = expandCompoundVariants(defaultConfig.compoundVariants);
     const globalCompoundVariants = expandCompoundVariants(globalConfig.compoundVariants);
     const propsCompoundVariants = expandCompoundVariants(propsConfig.compoundVariants);
 
+    // Track consumed indices via Sets instead of splicing arrays (avoids O(n) shifts)
+    const consumedGlobalIndices = new Set();
+    const consumedPropsIndices = new Set();
+
     const config = defaultCompoundVariants?.map((defaultConfigItem) => {
+      const defaultKeys = Object.keys(defaultConfigItem);
+
       /**
-       * Compare two objects by keys for match.
+       * Compare two objects by keys for match (avoids .map().every() — uses plain loop).
        */
       function isSameItem(configItem) {
-        const hasConfigItemKeys = Object.keys(defaultConfigItem)
-          .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
-          .every((item) => Boolean(item));
+        for (let i = 0; i < defaultKeys.length; i++) {
+          const key = defaultKeys[i];
+
+          if (key !== "class" && defaultConfigItem[key] !== configItem[key]) return false;
+        }
 
-        const hasDefaultConfigItemKeys = Object.keys(configItem)
-          .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
-          .every((item) => Boolean(item));
+        const configKeys = Object.keys(configItem);
 
-        return hasConfigItemKeys && hasDefaultConfigItemKeys;
+        for (let i = 0; i < configKeys.length; i++) {
+          const key = configKeys[i];
+
+          if (key !== "class" && defaultConfigItem[key] !== configItem[key]) return false;
+        }
+
+        return true;
       }
 
-      /**
-       * Find the same compound variant item in custom config if existed.
-       */
-      function findItem(config = []) {
-        config = cloneDeep(config);
+      let globalConfigItem;
+      let propsConfigItem;
 
-        const globalConfigSimilarItemIndex = globalCompoundVariants.findIndex(isSameItem);
-        const propsConfigSimilarItemIndex = propsCompoundVariants.findIndex(isSameItem);
+      // Find matching global compound variant (skip already consumed)
+      for (let i = 0; i < globalCompoundVariants.length; i++) {
+        if (!consumedGlobalIndices.has(i) && isSameItem(globalCompoundVariants[i])) {
+          globalConfigItem = globalCompoundVariants[i];
+          consumedGlobalIndices.add(i);
 
-        if (~globalConfigSimilarItemIndex) {
-          config.push(globalCompoundVariants[globalConfigSimilarItemIndex]);
-          globalCompoundVariants.splice(globalConfigSimilarItemIndex, 1);
+          break;
         }
+      }
 
-        if (~propsConfigSimilarItemIndex) {
-          config.push(propsCompoundVariants[propsConfigSimilarItemIndex]);
-          propsCompoundVariants.splice(propsConfigSimilarItemIndex, 1);
-        }
+      // Find matching props compound variant (skip already consumed)
+      for (let i = 0; i < propsCompoundVariants.length; i++) {
+        if (!consumedPropsIndices.has(i) && isSameItem(propsCompoundVariants[i])) {
+          propsConfigItem = propsCompoundVariants[i];
+          consumedPropsIndices.add(i);
 
-        return config.find(isSameItem);
+          break;
+        }
       }
 
-      const globalConfigItem = findItem(globalCompoundVariants);
-      const propsConfigItem = findItem(propsCompoundVariants);
-
       return globalConfigItem || propsConfigItem
         ? {
             ...defaultConfigItem,
@@ -167,35 +251,68 @@ export function createMergeConfigs(cx) {
         : defaultConfigItem;
     });
 
-    return [...(config || []), ...globalCompoundVariants, ...propsCompoundVariants];
+    // Collect unconsumed global and props variants (avoids spread of spliced arrays)
+    const remaining = [];
+
+    for (let i = 0; i < globalCompoundVariants.length; i++) {
+      if (!consumedGlobalIndices.has(i)) remaining.push(globalCompoundVariants[i]);
+    }
+
+    for (let i = 0; i < propsCompoundVariants.length; i++) {
+      if (!consumedPropsIndices.has(i)) remaining.push(propsCompoundVariants[i]);
+    }
+
+    return config && config.length ? config.concat(remaining) : remaining;
   }
 
   /**
    * Convert compound variants with arrays in values into compound variants with primitives.
    */
   function expandCompoundVariants(compoundVariants) {
-    compoundVariants = cloneDeep(compoundVariants || []);
+    if (!compoundVariants || !compoundVariants.length) return [];
+
+    // Deep clone only once at the top level
+    const cloned = deepClone(compoundVariants);
 
     function expand(compoundVariant) {
-      const keysWithArray = Object.keys(compoundVariant).filter((key) =>
-        Array.isArray(compoundVariant[key]),
-      );
+      let firstArrayKey;
+
+      for (const key in compoundVariant) {
+        if (Array.isArray(compoundVariant[key])) {
+          firstArrayKey = key;
 
-      if (!keysWithArray.length) {
-        return [compoundVariant];
+          break;
+        }
       }
 
-      const [firstKey] = keysWithArray;
-      const expandedArray = compoundVariant[firstKey].map((value) => ({
-        ...compoundVariant,
-        [firstKey]: value,
-      }));
+      if (!firstArrayKey) return [compoundVariant];
+
+      const values = compoundVariant[firstArrayKey];
+      const result = [];
+
+      for (let i = 0; i < values.length; i++) {
+        const expanded = Object.assign({}, compoundVariant, { [firstArrayKey]: values[i] });
+        const subExpanded = expand(expanded);
 
-      // Recursively expand the remaining array keys
-      return expandedArray.flatMap((expandedCompoundVariant) => expand(expandedCompoundVariant));
+        for (let j = 0; j < subExpanded.length; j++) {
+          result.push(subExpanded[j]);
+        }
+      }
+
+      return result;
+    }
+
+    const result = [];
+
+    for (let i = 0; i < cloned.length; i++) {
+      const expanded = expand(cloned[i]);
+
+      for (let j = 0; j < expanded.length; j++) {
+        result.push(expanded[j]);
+      }
     }
 
-    return compoundVariants.flatMap(expand);
+    return result;
   }
 
   return mergeConfigs;
@@ -208,18 +325,16 @@ export function createGetMergedConfig(cx) {
    * Get merged config based on config merging strategy.
    */
   function getMergedConfig({ defaultConfig, globalConfig, propsConfig, unstyled }) {
-    defaultConfig = cloneDeep(defaultConfig);
-
     const isUnstyled = propsConfig?.unstyled || globalConfig?.unstyled || unstyled;
 
     if (isUnstyled) {
-      const { i18n, defaults, unstyled } = SYSTEM_CONFIG_KEY;
-
       defaultConfig = {
-        ...(defaultConfig[i18n] ? { [i18n]: defaultConfig[i18n] } : {}),
-        ...(defaultConfig[defaults] ? { [defaults]: defaultConfig[defaults] } : {}),
-        [unstyled]: defaultConfig[unstyled],
+        ...(defaultConfig[I18N] ? { [I18N]: defaultConfig[I18N] } : EMPTY_OBJECT),
+        ...(defaultConfig[DEFAULTS] ? { [DEFAULTS]: defaultConfig[DEFAULTS] } : EMPTY_OBJECT),
+        [UNSTYLED]: defaultConfig[UNSTYLED],
       };
+    } else {
+      defaultConfig = shallowClone(defaultConfig);
     }
 
     return mergeConfigs({ defaultConfig, globalConfig, propsConfig });
@@ -229,12 +344,16 @@ export function createGetMergedConfig(cx) {
 }
 
 /**
- Turn simplified nested component config to regular config.
+ * Turn simplified nested component config to regular config.
  */
-function stringToObject(value, { addBase = false }) {
-  if (typeof value !== "object" && addBase) {
-    return { base: value || "" };
+function stringToObject(value, addBase) {
+  if (value === undefined || value === null) {
+    return addBase ? { base: "" } : EMPTY_OBJECT;
+  }
+
+  if (typeof value !== "object") {
+    return addBase ? { base: value || "" } : EMPTY_OBJECT;
   }
 
-  return typeof value === "object" ? value : addBase ? { base: value || "" } : {};
+  return value;
 }

package/utils/node/vuelessConfig.d.ts

@@ -6,4 +6,4 @@ export const getMergedConfig: ({ defaultConfig, globalConfig, propsConfig, unsty
     globalConfig: any;
     propsConfig: any;
     unstyled: any;
-}) => {};
+}) => any;