vueless 1.0.2-beta.58 → 1.0.2-beta.59

package/bin/commands/init.js

@@ -2,15 +2,32 @@
 
 import { cwd } from "node:process";
 import path from "node:path";
-import { existsSync } from "node:fs";
-import { writeFile, rename } from "node:fs/promises";
+import { existsSync, mkdirSync } from "node:fs";
+import { writeFile, rename, readFile } from "node:fs/promises";
 import { styleText } from "node:util";
 
-import { DEFAULT_VUELESS_CONFIG_CONTENT } from "../constants.js";
-import { JAVASCRIPT_EXT, TYPESCRIPT_EXT, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
+import {
+  SUPPRESS_TS_CHECK,
+  COMPONENTS_INDEX_EXPORT,
+  COMPONENTS_INDEX_COMMENT,
+  DEFAULT_VUELESS_CONFIG_CONTENT,
+} from "../constants.js";
+
+import {
+  JAVASCRIPT_EXT,
+  TYPESCRIPT_EXT,
+  CONFIG_INDEX_FILE_NAME,
+  VUELESS_CONFIG_FILE_NAME,
+} from "../../constants.js";
 
 const vuelessInitOptions = ["--ts", "--js"];
 
+/**
+ * Initializes Vueless in the project by creating a default config file and .vueless directory.
+ * @param {string[]} options - The function options.
+ * @param {boolean} options.includes("--ts") - If true, creates a TypeScript config file.
+ * @param {boolean} options.includes("--js") - If true, creates a JavaScript config file.
+ */
 export async function vuelessInit(options) {
   const isValidOptions = options.every((option) => vuelessInitOptions.includes(option));
 
@@ -20,13 +37,16 @@ export async function vuelessInit(options) {
     return;
   }
 
-  const fileExt = options.includes("--ts") ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
+  const hasTypeScript = await detectTypeScript();
+  const fileExt = options.includes("--ts") || hasTypeScript ? TYPESCRIPT_EXT : JAVASCRIPT_EXT;
+
   const formattedDestPath = path.format({
     dir: cwd(),
     name: VUELESS_CONFIG_FILE_NAME,
     ext: fileExt,
   });
 
+  /* Backup existing config if it exists. */
   if (existsSync(formattedDestPath)) {
     const timestamp = new Date().valueOf();
     const renamedTarget = `${VUELESS_CONFIG_FILE_NAME}-backup-${timestamp}${fileExt}`;
@@ -42,6 +62,7 @@ export async function vuelessInit(options) {
     );
   }
 
+  /* Create a default config file. */
   await writeFile(formattedDestPath, DEFAULT_VUELESS_CONFIG_CONTENT, "utf-8");
 
   console.log(
@@ -50,4 +71,42 @@ export async function vuelessInit(options) {
       `The '${formattedDestPath.split(path.sep).at(-1)}' was created in the project root directory.`,
     ),
   );
+
+  /* Create .vueless directory and index file. */
+  const vuelessDir = path.join(cwd(), ".vueless");
+  const destPath = path.join(vuelessDir, `${CONFIG_INDEX_FILE_NAME}${fileExt}`);
+
+  if (!existsSync(vuelessDir)) {
+    mkdirSync(vuelessDir);
+    console.log(
+      styleText("green", "The '.vueless' directory was created in the project root directory."),
+    );
+  }
+
+  const suppressTsCheck = fileExt === TYPESCRIPT_EXT ? `${SUPPRESS_TS_CHECK}\n` : "";
+
+  await writeFile(
+    destPath,
+    `${suppressTsCheck}${COMPONENTS_INDEX_COMMENT}\n${COMPONENTS_INDEX_EXPORT}\n`,
+    "utf-8",
+  );
+}
+
+/**
+ * Detects if TypeScript is a dependency in the project's package.json
+ * @returns {Promise<boolean>} True if TypeScript is found in dependencies or devDependencies
+ */
+async function detectTypeScript() {
+  try {
+    const packageJsonPath = path.join(cwd(), "package.json");
+    const packageJsonContent = await readFile(packageJsonPath, "utf-8");
+    const pkg = JSON.parse(packageJsonContent);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+
+    return Boolean(deps.typescript);
+  } catch (error) {
+    console.error("Failed to detect TypeScript:", error);
+
+    return false;
+  }
 }

package/bin/constants.js

@@ -1,7 +1,8 @@
 export const SRC_COMPONENTS_PATH = "/src/components";
 export const COMPONENTS_PATH = "/components";
 
-export const DEFAULT_VUELESS_CONFIG_CONTENT = `
+export const DEFAULT_VUELESS_CONFIG_CONTENT = `import { componentConfigs } from "./.vueless";
+
 export default {
   /**
    * Global settings.
@@ -14,6 +15,18 @@ export default {
   disabledOpacity: 50,
   colorMode: "auto",
 
+  /**
+   * Component settings.
+   */
+  components: /*tw*/ {
+    ...componentConfigs,
+  },
+
+  /**
+   * Directive settings.
+   */
+  directives: {},
+
   /**
    * Light theme CSS variable settings.
    */
@@ -153,22 +166,19 @@ export default {
     "--vl-bg-accented": "--vl-neutral-700",
     "--vl-bg-inverted": "--vl-neutral-100",
   },
+};
+`;
 
-  /**
-   * Directive settings.
-   */
-  directives: {},
+export const SUPPRESS_TS_CHECK = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck`;
 
-  /**
-   * Component settings.
-   */
-  components: /*tw*/ {},
+export const COMPONENTS_INDEX_COMMENT = `/**
+ * ⚠️ This file is auto-generated — do not edit it manually.
+ * It gets updated automatically whenever the Vite server restarts.
+ *
+ * This file imports all component config files from the current directory.
+ * Only files following the naming pattern "U[Component].config.[ts|js]" will be included.
+ * Example: "UButton.config.ts"
+ */`;
 
-  /**
-   * TailwindMerge settings for custom Tailwind CSS classes.
-   * All lists of rules available here:
-   * https://github.com/dcastil/tailwind-merge/blob/main/src/lib/default-config.ts
-   */
-  tailwindMerge: {},
-};
-`;
+export const COMPONENTS_INDEX_EXPORT = `export const componentConfigs = {};`;

package/composables/tests/useUI.test.ts

@@ -0,0 +1,494 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { computed, nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+
+// TODO: Autogenerated, need to be reviewed
+
+// Mock the ui utils
+vi.mock("../../utils/ui.ts", () => ({
+  cx: vi.fn((classes) => (Array.isArray(classes) ? classes.filter(Boolean).join(" ") : classes)),
+  cva: vi.fn((config) => {
+    // Return a spy function that can be called and tracked
+    const cvaSpy = vi.fn((props) => {
+      if (!config.variants) return config.base || "";
+
+      let classes = config.base || "";
+
+      // Apply variants
+      Object.entries(config.variants).forEach(([key, variants]) => {
+        const value = props[key];
+
+        if (value && variants[value]) {
+          classes += ` ${variants[value]}`;
+        }
+      });
+
+      return classes.trim();
+    });
+
+    return cvaSpy;
+  }),
+  setColor: vi.fn((classes, color) => classes?.replace(/{color}/g, color)),
+  vuelessConfig: { components: {}, unstyled: false },
+  getMergedConfig: vi.fn((args) => {
+    // Create a spy function that returns the expected merged config
+    const { defaultConfig, globalConfig, propsConfig } = args;
+
+    return {
+      ...defaultConfig,
+      ...globalConfig,
+      ...propsConfig,
+    };
+  }),
+}));
+
+// Mock Vue functions
+vi.mock("vue", async () => {
+  const actual = await vi.importActual("vue");
+
+  return {
+    ...actual,
+    getCurrentInstance: vi.fn(),
+    useAttrs: vi.fn(),
+  };
+});
+
+import useUI from "../useUI.ts";
+import * as uiUtils from "../../utils/ui.ts";
+import { getCurrentInstance, useAttrs } from "vue";
+
+// Test component for integration testing
+const TestComponent = {
+  template: '<div :data-test="getDataTest()" v-bind="bodyAttrs">Test</div>',
+  setup() {
+    const defaultConfig = {
+      body: {
+        base: "base-class",
+        variants: {
+          variant: {
+            primary: "primary-class",
+            secondary: "secondary-class",
+          },
+          size: {
+            sm: "small-class",
+            md: "medium-class",
+          },
+        },
+      },
+      defaults: {
+        variant: "primary",
+        size: "md",
+      },
+    };
+
+    return useUI(defaultConfig);
+  },
+};
+
+describe("useUI", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset vuelessConfig
+    uiUtils.vuelessConfig.components = {};
+    uiUtils.vuelessConfig.unstyled = false;
+
+    // Setup default mocks
+    vi.mocked(getCurrentInstance).mockReturnValue({
+      type: { __name: "TestComponent" },
+      props: { dataTest: "test", color: "primary", config: {} },
+      parent: null,
+    });
+
+    vi.mocked(useAttrs).mockReturnValue({
+      class: "",
+      style: "",
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("Basic Functionality", () => {
+    it("should return config, getDataTest, and attribute objects", () => {
+      const defaultConfig = {
+        body: { base: "test-class" },
+        defaults: { variant: "primary" },
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("config");
+      expect(result).toHaveProperty("getDataTest");
+      expect(result).toHaveProperty("bodyAttrs");
+      expect(typeof result.getDataTest).toBe("function");
+    });
+
+    it("should merge default config with global and props config", async () => {
+      const defaultConfig = {
+        body: { base: "default-class" },
+        defaults: { variant: "primary" },
+      };
+
+      const globalConfig = {
+        body: { base: "global-class" },
+      };
+
+      const propsConfig = {
+        body: { base: "props-class" },
+      };
+
+      // Set global config
+      uiUtils.vuelessConfig.components = {
+        TestComponent: globalConfig,
+      };
+
+      // Mock getCurrentInstance to return props config
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { __name: "TestComponent" },
+        props: { config: propsConfig, dataTest: "test" },
+        parent: null,
+      });
+
+      // Call useUI to trigger the config merging
+      useUI(defaultConfig);
+
+      expect(uiUtils.getMergedConfig).toHaveBeenCalledWith({
+        defaultConfig,
+        globalConfig,
+        propsConfig,
+        unstyled: false,
+      });
+    });
+  });
+
+  describe("CVA Integration", () => {
+    it("should generate classes using CVA when config has variants", () => {
+      const defaultConfig = {
+        body: {
+          base: "base-class",
+          variants: {
+            variant: {
+              primary: "primary-class",
+              secondary: "secondary-class",
+            },
+          },
+        },
+      };
+
+      // Call useUI to trigger CVA usage
+      useUI(defaultConfig);
+
+      expect(uiUtils.cva).toHaveBeenCalledWith(defaultConfig.body);
+    });
+
+    it("should handle string-based config values", () => {
+      const defaultConfig = {
+        body: "simple-string-class",
+      };
+
+      const result = useUI(defaultConfig);
+      const bodyAttrs = result.bodyAttrs;
+
+      expect(bodyAttrs.value.class).toContain("simple-string-class");
+    });
+  });
+
+  describe("Color Handling", () => {
+    it("should replace {color} placeholders in classes", () => {
+      // Mock getCurrentInstance to return color prop
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { __name: "TestComponent" },
+        props: { color: "blue", dataTest: "test" },
+        parent: null,
+      });
+
+      // Test the setColor function directly
+      expect(uiUtils.setColor).toBeDefined();
+
+      // The setColor function should replace {color} placeholders
+      const testClasses = "text-{color} bg-{color}";
+      const coloredClasses = uiUtils.setColor(testClasses, "blue");
+
+      expect(coloredClasses).toBe("text-blue bg-blue");
+
+      // Test that useUI can be called with color-containing config
+      const defaultConfig = {
+        wrapper: {
+          base: "text-{color} bg-{color}",
+        },
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("config");
+      expect(result).toHaveProperty("getDataTest");
+    });
+  });
+
+  describe("getDataTest Function", () => {
+    it("should return data-test value when dataTest prop is provided", () => {
+      const result = useUI({});
+      const dataTest = result.getDataTest();
+
+      expect(dataTest).toBe("test");
+    });
+
+    it("should return data-test with suffix when suffix is provided", () => {
+      const result = useUI({});
+      const dataTest = result.getDataTest("button");
+
+      expect(dataTest).toBe("test-button");
+    });
+
+    it("should return null when dataTest prop is not provided", () => {
+      // Mock getCurrentInstance to return no dataTest
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { __name: "TestComponent" },
+        props: {},
+        parent: null,
+      });
+
+      const result = useUI({});
+      const dataTest = result.getDataTest();
+
+      expect(dataTest).toBeNull();
+    });
+  });
+
+  describe("Nested Component Handling", () => {
+    it("should handle nested component references like {UIcon}", () => {
+      const defaultConfig = {
+        icon: "{UIcon}",
+        button: "btn {UIcon} end",
+      };
+
+      const result = useUI(defaultConfig);
+
+      // The nested component pattern should be processed
+      expect(result).toHaveProperty("iconAttrs");
+      expect(result).toHaveProperty("buttonAttrs");
+    });
+  });
+
+  describe("Reactivity", () => {
+    it("should update config when props.config changes", async () => {
+      const component = mount(TestComponent);
+
+      // Initial state
+      expect(component.vm.config).toBeDefined();
+
+      // Change props
+      await component.setProps({
+        config: {
+          body: { base: "new-class" },
+        },
+      });
+
+      await nextTick();
+
+      // Config should be updated
+      expect(uiUtils.getMergedConfig).toHaveBeenCalled();
+    });
+  });
+
+  describe("Extends Pattern Handling", () => {
+    it("should handle extends pattern {>key} syntax", () => {
+      const defaultConfig = {
+        button: "base-class {>icon}",
+        icon: "icon-class",
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("buttonAttrs");
+      expect(result).toHaveProperty("iconAttrs");
+    });
+  });
+
+  describe("Mutated Props", () => {
+    it("should use mutated props for class generation", () => {
+      const defaultConfig = {
+        body: {
+          base: "base-class",
+          variants: {
+            hasIcon: {
+              true: "with-icon",
+              false: "without-icon",
+            },
+          },
+        },
+      };
+
+      const mutatedProps = computed(() => ({
+        hasIcon: true,
+      }));
+
+      const result = useUI(defaultConfig, mutatedProps);
+
+      expect(result).toHaveProperty("bodyAttrs");
+    });
+  });
+
+  describe("Component Name Detection", () => {
+    it("should detect component name from type.__name", () => {
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { __name: "UButton" },
+        props: { dataTest: "test" },
+        parent: null,
+      });
+
+      const result = useUI({});
+
+      expect(result).toBeDefined();
+    });
+
+    it("should detect component name from parent when internal component", () => {
+      vi.mocked(getCurrentInstance).mockReturnValue({
+        type: { internal: true },
+        props: { dataTest: "test" },
+        parent: {
+          type: { __name: "UButton" },
+        },
+      });
+
+      const result = useUI({});
+
+      expect(result).toBeDefined();
+    });
+  });
+
+  describe("Attribute Generation", () => {
+    it("should generate proper attributes for each config key", () => {
+      const defaultConfig = {
+        wrapper: { base: "wrapper-class" },
+        content: { base: "content-class" },
+        footer: "footer-class",
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("wrapperAttrs");
+      expect(result).toHaveProperty("contentAttrs");
+      expect(result).toHaveProperty("footerAttrs");
+    });
+
+    it("should include config in attributes for nested components", () => {
+      const defaultConfig = {
+        icon: {
+          base: "{UIcon}",
+          defaults: {
+            size: "sm",
+          },
+        },
+      };
+
+      const result = useUI(defaultConfig);
+      const iconAttrs = result.iconAttrs;
+
+      expect(iconAttrs.value).toHaveProperty("config");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty config", () => {
+      const result = useUI({});
+
+      expect(result.config).toBeDefined();
+      expect(result.getDataTest).toBeDefined();
+    });
+
+    it("should handle null/undefined config values", () => {
+      const defaultConfig = {
+        body: "",
+        icon: undefined,
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result).toHaveProperty("bodyAttrs");
+      expect(result).toHaveProperty("iconAttrs");
+
+      // Should not throw errors when accessing attributes
+      expect(() => result.bodyAttrs.value).not.toThrow();
+      expect(() => result.iconAttrs.value).not.toThrow();
+    });
+
+    it("should handle unstyled mode", () => {
+      uiUtils.vuelessConfig.unstyled = true;
+
+      const defaultConfig = {
+        body: { base: "styled-class" },
+      };
+
+      useUI(defaultConfig);
+
+      expect(uiUtils.getMergedConfig).toHaveBeenCalledWith(
+        expect.objectContaining({
+          unstyled: true,
+        }),
+      );
+    });
+
+    it("should handle config with only defaults", () => {
+      const defaultConfig = {
+        defaults: {
+          variant: "primary",
+          size: "md",
+        },
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result.config).toBeDefined();
+    });
+
+    it("should handle deep config changes", async () => {
+      const component = mount(TestComponent);
+
+      // Change nested config
+      await component.setProps({
+        config: {
+          body: {
+            base: "new-base",
+            variants: {
+              variant: {
+                custom: "custom-class",
+              },
+            },
+          },
+        },
+      });
+
+      await nextTick();
+
+      expect(uiUtils.getMergedConfig).toHaveBeenCalled();
+    });
+  });
+
+  describe("Integration Tests", () => {
+    it("should work with real component mounting", () => {
+      const component = mount(TestComponent);
+
+      expect(component.exists()).toBe(true);
+      expect(component.attributes("data-test")).toBe("test");
+    });
+
+    it("should handle prop changes in mounted component", async () => {
+      const component = mount(TestComponent);
+
+      // The component should render with the default dataTest from the mock
+      expect(component.exists()).toBe(true);
+
+      // Test that the component can handle config changes
+      await component.setProps({
+        config: {
+          body: { base: "new-config-class" },
+        },
+      });
+
+      // The component should still exist and function after prop changes
+      expect(component.exists()).toBe(true);
+    });
+  });
+});

package/constants.js

@@ -396,6 +396,7 @@ export const VUELESS_TAILWIND_SAFELIST = `${VUELESS_CACHE_DIR}/tailwind/safelist
 export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
 export const VUELESS_MERGED_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/mergedConfigs`;
 export const VUELESS_CONFIG_FILE_NAME = "vueless.config";
+export const CONFIG_INDEX_FILE_NAME = "index";
 
 /* System error codes */
 export const DEFAULT_EXIT_CODE = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.58",
+  "version": "1.0.2-beta.59",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/plugin-vite.js

@@ -26,6 +26,7 @@ import {
   getVueDirs,
   getVuelessConfigDirs,
   cacheMergedConfigs,
+  autoImportUserConfigs,
 } from "./utils/node/helper.js";
 import {
   INTERNAL_ENV,
@@ -125,6 +126,10 @@ export const Vueless = function (options = {}) {
         await cacheMergedConfigs(vuelessSrcDir);
       }
 
+      if (!isInternalEnv) {
+        await autoImportUserConfigs();
+      }
+
       await buildWebTypes(vuelessSrcDir);
       await setCustomPropTypes(vuelessSrcDir);
 

package/utils/node/helper.js

@@ -13,6 +13,12 @@ import {
   VUELESS_MERGED_CONFIGS_CACHED_DIR,
 } from "../../constants.js";
 
+import {
+  SUPPRESS_TS_CHECK,
+  COMPONENTS_INDEX_EXPORT,
+  COMPONENTS_INDEX_COMMENT,
+} from "../../bin/constants.js";
+
 export async function getDirFiles(dirPath, ext, { recursive = true, exclude = [] } = {}) {
   let fileNames = [];
 
@@ -148,3 +154,61 @@ export async function buildTSFile(entryPath, configOutFile) {
     loader: { ".ts": "ts" },
   });
 }
+
+export async function autoImportUserConfigs() {
+  const vuelessConfigDir = path.join(cwd(), ".vueless");
+
+  const indexTsPath = path.join(vuelessConfigDir, "index.ts");
+  const indexJsPath = path.join(vuelessConfigDir, "index.js");
+
+  const hasTsIndex = existsSync(indexTsPath);
+  const indexFilePath = hasTsIndex ? indexTsPath : indexJsPath;
+
+  const configFiles = await getDirFiles(vuelessConfigDir, ".ts", {
+    recursive: true,
+    exclude: ["index.ts", "index.js"],
+  });
+
+  const componentConfigFiles = configFiles.filter((filePath) => {
+    const fileName = path.basename(filePath);
+
+    return /^U\w+\.config\.(ts|js)$/.test(fileName);
+  });
+
+  const imports = [];
+  const componentEntries = [];
+
+  if (componentConfigFiles.length) {
+    for (const configFilePath of componentConfigFiles) {
+      const fileName = path.basename(configFilePath, path.extname(configFilePath));
+      const componentName = fileName.replace(".config", "");
+      const relativePath = path.relative(vuelessConfigDir, configFilePath);
+      const importPath = "./" + relativePath.replace(/\\/g, "/");
+
+      imports.push(`import ${componentName} from "${importPath}";`);
+      componentEntries.push(`  ${componentName},`);
+    }
+  }
+
+  if (!existsSync(vuelessConfigDir)) {
+    await mkdir(vuelessConfigDir, { recursive: true });
+  }
+
+  await writeFile(
+    indexFilePath,
+    generateConfigIndexContent(imports, componentEntries, hasTsIndex),
+    "utf-8",
+  );
+}
+
+function generateConfigIndexContent(imports = [], componentEntries = [], isTypeScript) {
+  const importsSection = imports.length ? `\n${imports.join("\n")}\n\n` : "";
+  const entriesSection = componentEntries.length ? `\n${componentEntries.join("\n")}\n` : "";
+  const suppressTsCheck = isTypeScript ? `${SUPPRESS_TS_CHECK}\n` : "";
+
+  return `${suppressTsCheck}${COMPONENTS_INDEX_COMMENT}\n${importsSection}${COMPONENTS_INDEX_EXPORT.replace(
+    "{}",
+    `{${entriesSection}}`,
+  )}
+`;
+}