vueless 1.5.1-beta.5 → 1.5.1-beta.6

package/package.json

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

package/utils/tests/ui.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { COLOR_MODE_KEY } from "../../constants.js";
+import { loadSSRVuelessConfig, setVuelessConfig, vuelessConfig } from "../ui";
+
+import type { Config } from "../../types";
+
+/* jsdom doesn't implement matchMedia, which theme.ts evaluates on import. */
+const prefersDark = { matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() };
+
+window.matchMedia = vi.fn(() => prefersDark) as unknown as typeof window.matchMedia;
+
+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() })));
+
+    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" } }));
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`from-file-${COLOR_MODE_KEY}`);
+  });
+});

package/utils/ui.ts

@@ -48,17 +48,22 @@ if (isCSR) {
     )[0] || {};
 }
 
-if (isSSR) {
-  (async () => {
-    try {
-      // @ts-expect-error: vueless.config.{js,ts} is optional
-      vuelessConfig = (await import(/* @vite-ignore */ "/vueless.config")).default;
-    } catch {
-      vuelessConfig = {};
-    }
-  })();
+/** 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:
  */