vueless 1.5.2-beta.1 → 1.5.2-beta.3

package/composables/useUI.ts

@@ -53,7 +53,9 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
 
   /* Hoist shared reactive primitives — create once, share across all keys. */
   const attrs = useAttrs() as KeyAttrs;
-  const reactiveAttrsClass = computed(() => attrs.class);
+
+  /* Reading `class` explicitly keeps attrs tracked even when they start empty. */
+  const reactiveAttrs = computed(() => ({ class: attrs.class, ...attrs }));
 
   /**
    * Reactive wrapper for props — created once per component instead of once per key.
@@ -235,6 +237,7 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
      * body row of a table on an unrelated sticky toggle). We skip the `.value` write
      * when the new object is structurally equal to the last one, so the ref keeps its
      * identity and dependents are not re-rendered.
+     * `JSON.stringify` drops functions, so listeners are compared by reference separately.
      */
     const attrsSignatures: Record<string, string> = {};
 
@@ -250,10 +253,10 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
     /**
      * 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).
+     * mutatedProps (for slot/computed prop changes), reactiveAttrs (for attr changes).
      */
     watch(
-      [config, reactiveProps, mutatedProps || (() => undefined), reactiveAttrsClass],
+      [config, reactiveProps, mutatedProps || (() => undefined), reactiveAttrs],
       () => {
         const derived = configDerivedData.value;
 
@@ -285,8 +288,10 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
 
           /* Keep the previous ref identity when nothing changed — see attrsSignatures. */
           const signature = JSON.stringify(nextValue);
+          const isUnchanged =
+            attrsSignatures[key] === signature && hasSameListeners(attrsRefs[key].value, nextValue);
 
-          if (attrsSignatures[key] === signature) continue;
+          if (isUnchanged) continue;
 
           attrsSignatures[key] = signature;
           attrsRefs[key].value = nextValue;
@@ -312,6 +317,26 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
   return { config, getDataTest, ...getKeysAttrs(mutatedProps) } as UseUI<T>;
 }
 
+/**
+ * Check both attrs objects hold the same function-valued entries (listeners) by reference.
+ */
+function hasSameListeners(previous: KeyAttrs, next: KeyAttrs): boolean {
+  let listenersDiff = 0;
+
+  for (const key in next) {
+    if (typeof next[key] !== "function") continue;
+    if (next[key] !== previous[key]) return false;
+
+    listenersDiff++;
+  }
+
+  for (const key in previous) {
+    if (typeof previous[key] === "function") listenersDiff--;
+  }
+
+  return listenersDiff === 0;
+}
+
 /**
  * Return base classes.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.2-beta.1",
+  "version": "1.5.2-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.button-toggle/tests/UToggle.test.ts

@@ -395,6 +395,23 @@ describe("UToggle.vue", () => {
         expect.objectContaining({ value: "option1", label: "Option 1" }),
       );
     });
+
+    it("Options – emits the new option value after options are swapped", async () => {
+      const component = mount(UToggle, {
+        props: {
+          options: [{ value: "code" }, { value: "self" }],
+          name,
+        },
+      });
+
+      await component.setProps({
+        options: [{ value: "git" }, { value: "jira" }, { value: "slack" }],
+      });
+
+      await component.findAllComponents(UButton)[1].trigger("click");
+
+      expect(component.emitted("update:modelValue")?.[0][0]).toBe("jira");
+    });
   });
 
   describe("Exposed refs", () => {

package/utils/tests/ui.test.ts

@@ -1,9 +1,7 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import { COLOR_MODE_KEY } from "../../constants.js";
-import { loadSSRVuelessConfig, setVuelessConfig, vuelessConfig } from "../ui";
-
-import type { Config } from "../../types";
+import { setVuelessConfig } from "../ui";
 
 /* jsdom doesn't implement matchMedia, which theme.ts evaluates on import. */
 const prefersDark = { matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() };
@@ -12,37 +10,17 @@ window.matchMedia = vi.fn(() => prefersDark) as unknown as typeof window.matchMe
 
 const { getThemeCookieName } = await import("../theme");
 
-beforeEach(() => {
-  Object.keys(vuelessConfig).forEach((key) => delete vuelessConfig[key as keyof Config]);
-});
-
-describe("loadSSRVuelessConfig", () => {
-  it.each([
-    ["resolves", () => ({ cookiePrefix: "from-file" })],
-    [
-      "fails",
-      () => {
-        throw new Error("Cannot find module '/vueless.config'");
-      },
-    ],
-  ])("keeps the injected config when a deferred import %s", async (_, settle: () => Config) => {
-    let release!: () => void;
-    const released = new Promise<void>((resolve) => (release = resolve));
-
-    const loading = loadSSRVuelessConfig(() => released.then(() => ({ default: settle() })));
-
+describe("setVuelessConfig", () => {
+  it("uses the injected config", () => {
     setVuelessConfig({ cookiePrefix: "app-a" });
-    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
-
-    release();
-    await loading;
 
     expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
   });
 
-  it("uses the imported config when none was injected", async () => {
-    await loadSSRVuelessConfig(async () => ({ default: { cookiePrefix: "from-file" } }));
+  it("keeps the current config when an empty one is injected", () => {
+    setVuelessConfig({ cookiePrefix: "app-a" });
+    setVuelessConfig({});
 
-    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`from-file-${COLOR_MODE_KEY}`);
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
   });
 });

package/utils/ui.ts

@@ -3,7 +3,6 @@ import { cx as cvaCx } from "cva";
 import { defineConfig } from "cva/config";
 import { extendTailwindMerge } from "tailwind-merge";
 
-import { isCSR, isSSR } from "./helper";
 import { createGetMergedConfig } from "./node/mergeConfigs";
 import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants";
 import { ICON_NON_PROPS_DEFAULTS, TAILWIND_MERGE_EXTENSION } from "../constants";
@@ -30,7 +29,13 @@ type GetMergedConfig = (options: MergedConfigOptions) => unknown;
  * Load Vueless config from the project root.
  * Both for server and client side renderings.
  */
-export let vuelessConfig: Config = {};
+export let vuelessConfig: Config =
+  Object.values(
+    import.meta.glob(["/vueless.config.{js,ts}"], {
+      eager: true,
+      import: "default",
+    }),
+  )[0] || {};
 
 export function setVuelessConfig(config?: Config) {
   config = config || {};
@@ -38,32 +43,6 @@ export function setVuelessConfig(config?: Config) {
   vuelessConfig = Object.keys(config).length ? config : vuelessConfig;
 }
 
-if (isCSR) {
-  vuelessConfig =
-    Object.values(
-      import.meta.glob(["/vueless.config.{js,ts}"], {
-        eager: true,
-        import: "default",
-      }),
-    )[0] || {};
-}
-
-/** Load Vueless config on the server; a config injected via `createVueless` meanwhile wins. */
-export async function loadSSRVuelessConfig(
-  // @ts-expect-error: vueless.config.{js,ts} is optional
-  importConfig = () => import(/* @vite-ignore */ "/vueless.config"),
-) {
-  try {
-    const { default: config } = await importConfig();
-
-    if (!Object.keys(vuelessConfig).length) vuelessConfig = config;
-  } catch {
-    /* No config file: keep the current config. */
-  }
-}
-
-if (isSSR) loadSSRVuelessConfig();
-
 /**
  * Extend twMerge (tailwind merge) by vueless and user config:
  */