vueless 1.3.9-beta.9 → 1.4.0

package/composables/useUI.ts

@@ -1,5 +1,4 @@
 import { ref, watch, getCurrentInstance, toValue, useAttrs, computed } from "vue";
-import { isEqual } from "lodash-es";
 
 import { cx, cva, setColor, vuelessConfig, getMergedConfig } from "../utils/ui";
 import {
@@ -9,7 +8,7 @@ import {
   NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants";
 
-import type { Ref, ComputedRef } from "vue";
+import type { Ref } from "vue";
 import type {
   CVA,
   UseUI,
@@ -20,11 +19,17 @@ import type {
   UnknownObject,
   ComponentNames,
   NestedComponent,
+  ConfigDerivedData,
   ComponentDefaults,
   ComponentConfigFull,
   VuelessComponentInstance,
 } from "../types";
 
+/* Pre-computed Set for O(1) system key lookups instead of O(n) array scan. */
+const CVA_KEY_SET = new Set(Object.values(CVA_CONFIG_KEY));
+const SYSTEM_KEY_SET = new Set(Object.values(SYSTEM_CONFIG_KEY));
+const TRANSITION_KEY = SYSTEM_CONFIG_KEY.transition;
+
 /**
  * Merging component configs in a given sequence (bigger number = bigger priority):
  * 1. Default component config
@@ -43,11 +48,26 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
 
   const firstClassKey = Object.keys(defaultConfig || {})[0];
   const config = ref({}) as Ref<ComponentConfigFull<T>>;
+  const isDev = import.meta.env?.DEV;
+  const isUnstyled = Boolean(vuelessConfig.unstyled);
+
+  /* Hoist shared reactive primitives — create once, share across all keys. */
+  const attrs = useAttrs() as KeyAttrs;
+  const reactiveAttrsClass = computed(() => attrs.class);
+
+  /**
+   * Reactive wrapper for props — created once per component instead of once per key.
+   * Spreads props to create a shallow copy that triggers reactivity on any prop change.
+   */
+  const reactiveProps = computed(() => ({ ...props }));
+
+  /* Cache for CVA resolver functions — only recreated when config changes. */
+  const cvaCache = new Map<string, ReturnType<typeof cva>>();
 
   watch(
     () => props.config,
     (newVal, oldVal) => {
-      if (isEqual(newVal, oldVal)) return;
+      if (newVal === oldVal) return;
 
       const propsConfig = props.config as ComponentConfigFull<T>;
 
@@ -55,195 +75,209 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
         defaultConfig,
         globalConfig,
         propsConfig,
-        unstyled: Boolean(vuelessConfig.unstyled),
+        unstyled: isUnstyled,
       }) as ComponentConfigFull<T>;
+
+      /* Invalidate CVA cache when config changes. */
+      cvaCache.clear();
     },
     { deep: true, immediate: true },
   );
 
   /**
-   * Get classes by a given key (including CVA if config set).
+   * Pre-computed data per config key that only changes when config changes.
+   * Avoids recomputing extends configs, nested component info, and merged configs on every prop change.
    */
-  function getClasses(key: string, mutatedProps?: MutatedProps) {
-    return computed(() => {
-      const mutatedPropsValue = toValue(mutatedProps);
-      const value = (config.value as ComponentConfigFull<T>)[key];
-      const color = (toValue(mutatedProps || {}).color || props.color) as StateColors;
-
-      const isNestedComponent = Boolean(getNestedComponent(value));
-
-      let classes = "";
-
-      if (typeof value === "object" && isCVA(value)) {
-        classes = cva(value)({
-          ...props,
-          ...mutatedPropsValue,
-          ...(color ? { color } : {}),
-        });
-      }
+  const configDerivedData = computed(() => {
+    const data: ConfigDerivedData = {};
 
-      if (typeof value === "string") {
-        classes = value;
-      }
+    for (const key in config.value) {
+      if (isSystemKey(key)) continue;
 
-      classes = classes
-        .replaceAll(EXTENDS_PATTERN_REG_EXP, "")
-        .replace(NESTED_COMPONENT_PATTERN_REG_EXP, "");
+      const keyConfig: NestedComponent =
+        typeof config.value[key] === "object" ? (config.value[key] as NestedComponent) : {};
 
-      return color && !isNestedComponent ? setColor(classes, color) : classes;
-    });
-  }
+      const extendsKeyConfig = computeExtendsKeyConfig(key);
+      const extendsKeyNestedComponent = getNestedComponent(extendsKeyConfig);
+      const keyNestedComponent = getNestedComponent(config.value[key]);
+      const nestedComponent = extendsKeyNestedComponent || keyNestedComponent || componentName;
 
-  /**
-   * Returns an object where:
-   * – key: elementKey
-   * – value: reactive object of string element attributes (with classes).
-   */
-  function getKeysAttrs(mutatedProps?: MutatedProps) {
-    const keysAttrs: KeysAttrs<T> = {};
+      const mergedNestedConfig = getMergedConfig({
+        defaultConfig: extendsKeyConfig,
+        globalConfig: keyConfig,
+        propsConfig: attrs["config"] || {},
+        unstyled: isUnstyled,
+      });
 
-    for (const key in config.value) {
-      if (isSystemKey(key)) continue;
+      const mergedDefaults: ComponentDefaults = {};
+
+      const defaultAttrs = {
+        ...(extendsKeyConfig.defaults || {}),
+        ...(keyConfig.defaults || {}),
+      };
 
-      keysAttrs[`${key}Attrs`] = getAttrs(key, getClasses(key, mutatedProps));
+      for (const defaultKey in defaultAttrs) {
+        mergedDefaults[defaultKey] =
+          typeof defaultAttrs[defaultKey] === "object"
+            ? defaultAttrs[defaultKey][String(props[defaultKey])]
+            : defaultAttrs[defaultKey];
+      }
+
+      data[key] = {
+        keyConfig,
+        extendsClasses: computeExtendsClasses(key),
+        extendsKeyConfig,
+        nestedComponent,
+        mergedNestedConfig,
+        mergedDefaults,
+      };
     }
 
-    return keysAttrs;
-  }
+    return data;
+  });
 
   /**
-   * Get element attributes for a given key.
+   * Compute classes for a given key directly (not as a computed ref).
+   * Used inside watchers to avoid creating orphaned computed properties.
    */
-  function getAttrs(configKey: string, classes: ComputedRef<string>) {
-    const vuelessAttrs = ref({} as KeyAttrs);
+  function computeClassesForKey(key: string) {
+    const mutatedPropsValue = toValue(mutatedProps);
+    const value = (config.value as ComponentConfigFull<T>)[key];
+    const color = (toValue(mutatedProps || {}).color || props.color) as StateColors;
 
-    const attrs = useAttrs() as KeyAttrs;
+    const isNestedComponent = Boolean(getNestedComponent(value));
 
-    const reactiveProps = computed(() => ({ ...props }));
-    const reactiveClass = computed(() => attrs.class);
+    let classes = "";
 
-    watch([config, reactiveProps, classes, reactiveClass], updateVuelessAttrs, { immediate: true });
+    if (typeof value === "object" && isCVA(value)) {
+      let cvaFn = cvaCache.get(key);
 
-    /**
-     * Updating Vueless attributes.
-     */
-    function updateVuelessAttrs(newVal: unknown, oldVal: unknown) {
-      if (isEqual(newVal, oldVal)) return;
+      if (!cvaFn) {
+        cvaFn = cva(value);
+        cvaCache.set(key, cvaFn);
+      }
 
-      let keyConfig: NestedComponent = {};
+      classes = cvaFn({
+        ...props,
+        ...mutatedPropsValue,
+        ...(color ? { color } : {}),
+      });
+    }
 
-      if (typeof config.value[configKey] === "object") {
-        keyConfig = config.value[configKey] as NestedComponent;
-      }
+    if (typeof value === "string") {
+      classes = value;
+    }
 
-      const isDev = import.meta.env?.DEV;
-      const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
+    classes = classes
+      .replaceAll(EXTENDS_PATTERN_REG_EXP, "")
+      .replace(NESTED_COMPONENT_PATTERN_REG_EXP, "");
 
-      const extendsClasses = getExtendsClasses(configKey);
-      const extendsKeyConfig = getExtendsKeyConfig(configKey);
-      const extendsKeyNestedComponent = getNestedComponent(extendsKeyConfig);
-      const keyNestedComponent = getNestedComponent(config.value[configKey]);
-      const nestedComponent = extendsKeyNestedComponent || keyNestedComponent || componentName;
+    return color && !isNestedComponent ? setColor(classes, color) : classes;
+  }
 
-      const commonAttrs: KeyAttrs = {
-        ...(isTopLevelKey ? attrs : {}),
-        "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
-        "vl-key": isDev ? attrs["vl-key"] || configKey || null : null,
-        "vl-child-component": isDev && attrs["vl-component"] ? nestedComponent : null,
-        "vl-child-key": isDev && attrs["vl-component"] ? configKey : null,
-      };
+  /**
+   * Recursively compute extends classes directly (no orphaned computed refs).
+   */
+  function computeExtendsClasses(configKey: string): string[] {
+    const extendsKeys = getExtendsKeys(config.value[configKey]);
 
-      /* Delete value key to prevent v-model overwrite. */
-      delete commonAttrs.value;
-
-      vuelessAttrs.value = {
-        ...commonAttrs,
-        class: cx([...extendsClasses, toValue(classes), commonAttrs.class]),
-        config: getMergedConfig({
-          defaultConfig: extendsKeyConfig,
-          globalConfig: keyConfig,
-          propsConfig: attrs["config"] || {},
-          unstyled: Boolean(vuelessConfig.unstyled),
-        }),
-        ...getDefaults({
-          ...(extendsKeyConfig.defaults || {}),
-          ...(keyConfig.defaults || {}),
-        }),
-      };
+    if (!extendsKeys.length) return [];
+
+    const result: string[] = [];
+
+    for (const key of extendsKeys) {
+      if (key === configKey) continue;
+
+      result.push(...computeExtendsClasses(key), computeClassesForKey(key));
     }
 
-    /**
-     * Recursively get extends classes.
-     */
-    function getExtendsClasses(configKey: string) {
-      let extendsClasses: string[] = [];
+    return result;
+  }
 
-      const extendsKeys = getExtendsKeys(config.value[configKey]);
+  /**
+   * Merge extends nested component configs.
+   * TODO: Add ability to merge multiple keys in one (now works for merging only 1 first key).
+   */
+  function computeExtendsKeyConfig(configKey: string): NestedComponent {
+    const propsConfig = props.config as ComponentConfigFull<T>;
+    const extendsKeys = getExtendsKeys(config.value[configKey]);
 
-      if (extendsKeys.length) {
-        extendsKeys.forEach((key) => {
-          if (key === configKey) return;
+    if (!extendsKeys.length) return {};
 
-          extendsClasses = [
-            ...extendsClasses,
-            ...getExtendsClasses(key),
-            toValue(getClasses(key, mutatedProps)),
-          ];
-        });
-      }
+    const [firstKey] = extendsKeys;
 
-      return extendsClasses;
+    if (config.value[firstKey] === undefined) {
+      // eslint-disable-next-line no-console
+      console.warn(`[vueless] Missing ${firstKey} extend key.`);
     }
 
-    /**
-     * Merge extends nested component configs.
-     * TODO: Add ability to merge multiple keys in one (now works for merging only 1 first key).
-     */
-    function getExtendsKeyConfig(configKey: string) {
-      let extendsKeyConfig: NestedComponent = {};
-
-      const propsConfig = props.config as ComponentConfigFull<T>;
-      const extendsKeys = getExtendsKeys(config.value[configKey]);
+    return getMergedConfig({
+      defaultConfig: config.value[firstKey] || {},
+      globalConfig: globalConfig[firstKey],
+      propsConfig: propsConfig[firstKey],
+      unstyled: isUnstyled,
+    }) as NestedComponent;
+  }
 
-      if (extendsKeys.length) {
-        const [firstKey] = extendsKeys;
+  /**
+   * Returns an object where:
+   * – key: elementKey
+   * – value: reactive object of string element attributes (with classes).
+   */
+  function getKeysAttrs(mutatedProps?: MutatedProps) {
+    const keysAttrs: KeysAttrs<T> = {};
+    const attrsRefs: Record<string, Ref<KeyAttrs>> = {};
 
-        if (config.value[firstKey] === undefined) {
-          // eslint-disable-next-line no-console
-          console.warn(`[vueless] Missing ${firstKey} extend key.`);
-        }
+    for (const key in config.value) {
+      if (isSystemKey(key)) continue;
 
-        extendsKeyConfig = getMergedConfig({
-          defaultConfig: config.value[firstKey] || {},
-          globalConfig: globalConfig[firstKey],
-          propsConfig: propsConfig[firstKey],
-          unstyled: Boolean(vuelessConfig.unstyled),
-        }) as NestedComponent;
-      }
+      const vuelessAttrs = ref({} as KeyAttrs);
 
-      return extendsKeyConfig;
+      attrsRefs[key] = vuelessAttrs;
+      keysAttrs[`${key}Attrs`] = vuelessAttrs;
     }
 
     /**
-     * Get component prop default value.
-     * Conditionally set props default value for nested components based on parent component prop value.
-     * For example, set icon size for the nested component based on the size of the parent component.
-     * Use an object where key = parent component prop value, value = nested component prop value.
-     * */
-    function getDefaults(defaultAttrs: NestedComponent["defaults"]) {
-      const defaults: ComponentDefaults = {};
-
-      for (const key in defaultAttrs) {
-        defaults[key] =
-          typeof defaultAttrs[key] === "object"
-            ? defaultAttrs[key][String(props[key])]
-            : defaultAttrs[key];
-      }
-
-      return defaults;
-    }
+     * Single consolidated watcher instead of N per-key watchers.
+     * Watches: config (for config changes), reactiveProps (for prop changes),
+     * mutatedProps (for slot/computed prop changes), reactiveAttrsClass (for class attr changes).
+     */
+    watch(
+      [config, reactiveProps, mutatedProps || (() => undefined), reactiveAttrsClass],
+      () => {
+        const derived = configDerivedData.value;
+
+        for (const key in attrsRefs) {
+          const data = derived[key];
+
+          if (!data) continue;
+
+          const isTopLevelKey = (topLevelClassKey || firstClassKey) === key;
+          const classes = computeClassesForKey(key);
+
+          const commonAttrs: KeyAttrs = {
+            ...(isTopLevelKey ? attrs : {}),
+            "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
+            "vl-key": isDev ? attrs["vl-key"] || key || null : null,
+            "vl-child-component": isDev && attrs["vl-component"] ? data.nestedComponent : null,
+            "vl-child-key": isDev && attrs["vl-component"] ? key : null,
+          };
+
+          /* Delete value key to prevent v-model overwrite. */
+          delete commonAttrs.value;
+
+          attrsRefs[key].value = {
+            ...commonAttrs,
+            class: cx([...data.extendsClasses, classes, commonAttrs.class]),
+            config: data.mergedNestedConfig,
+            ...data.mergedDefaults,
+          };
+        }
+      },
+      { immediate: true },
+    );
 
-    return vuelessAttrs;
+    return keysAttrs;
   }
 
   /**
@@ -275,7 +309,7 @@ function getExtendsKeys(configItemValue?: string | CVA | NestedComponent): strin
   const values = getBaseClasses(configItemValue);
   const matches = values.match(EXTENDS_PATTERN_REG_EXP);
 
-  return matches ? matches?.map((pattern) => pattern.slice(2, -1)) : [];
+  return matches ? matches.map((pattern) => pattern.slice(2, -1)) : [];
 }
 
 /**
@@ -292,9 +326,7 @@ function getNestedComponent(value?: string | CVA | NestedComponent) {
  * Check is config key not contains classes or CVA config object.
  */
 function isSystemKey(key: string): boolean {
-  const isExactKey = Object.values(SYSTEM_CONFIG_KEY).some((value) => value === key);
-
-  return isExactKey || key.toLowerCase().includes(SYSTEM_CONFIG_KEY.transition.toLowerCase());
+  return SYSTEM_KEY_SET.has(key) || key.toLowerCase().includes(TRANSITION_KEY);
 }
 
 /**
@@ -305,7 +337,7 @@ function isCVA(config?: UnknownObject | string): boolean {
     return false;
   }
 
-  return Object.values(CVA_CONFIG_KEY).some((value) =>
-    Object.keys(config).some((key) => key === value),
-  );
+  const keys = Object.keys(config);
+
+  return keys.some((key) => CVA_KEY_SET.has(key));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.9-beta.9",
+  "version": "1.4.0",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.4.8",
+    "@vueless/storybook": "^1.4.10",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/types.ts

@@ -385,6 +385,17 @@ export type UseUI<T> = {
   getDataTest: (suffix?: string) => string | null;
 } & KeysAttrs<T>;
 
+export interface ConfigDerivedData {
+  [key: string]: {
+    keyConfig: NestedComponent;
+    extendsClasses: string[];
+    extendsKeyConfig: NestedComponent;
+    nestedComponent: string;
+    mergedNestedConfig: unknown;
+    mergedDefaults: ComponentDefaults;
+  };
+}
+
 export type KeysAttrs<T> = Record<
   string,
   Ref<KeyAttrsWithConfig<T>> | ComputedRef<KeyAttrsWithConfig<T>>

package/ui.button-link/ULink.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, useSlots, useTemplateRef } from "vue";
-import { RouterLink } from "vue-router";
+import { RouterLink, useRoute, useRouter } from "vue-router";
 
 import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
@@ -49,6 +49,8 @@ const emit = defineEmits([
 const slots = useSlots();
 
 const linkRef = useTemplateRef<HTMLLinkElement>("link");
+const route = useRoute();
+const router = useRouter();
 
 const isPresentRoute = computed(() => {
   return typeof props.to === "string" || typeof props.to === "object";
@@ -58,6 +60,20 @@ const safeTo = computed(() => {
   return props.to || "/";
 });
 
+const isActive = computed(() => {
+  if (!isPresentRoute.value) return false;
+
+  try {
+    const resolved = router.resolve(safeTo.value);
+    const currentPath = route.path;
+    const targetPath = resolved.path;
+
+    return currentPath === targetPath || currentPath.startsWith(targetPath + "/");
+  } catch {
+    return false;
+  }
+});
+
 const prefixedHref = computed(() => {
   const types = {
     phone: "tel:",
@@ -142,7 +158,7 @@ const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
       @binding {boolean} is-active
       @binding {boolean} is-exact-active
     -->
-    <slot :is-active="slotProps.isActive" :is-exact-active="slotProps.isExactActive">
+    <slot :is-active="isActive" :is-exact-active="slotProps.isExactActive">
       {{ label }}
     </slot>
   </router-link>