renusify 3.1.3 → 3.1.5

package/tests/autoloader.test.js

@@ -0,0 +1,905 @@
+import fs from "fs";
+import path from "path";
+
+// Simple test utilities
+const colors = {
+  reset: "\x1b[0m",
+  green: "\x1b[32m",
+  red: "\x1b[31m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  gray: "\x1b[90m",
+};
+
+let testCount = 0;
+let passCount = 0;
+let failCount = 0;
+let currentSuite = "";
+
+function suite(name, fn) {
+  currentSuite = name;
+  console.log(`\n${colors.blue}${name}${colors.reset}`);
+  fn();
+}
+
+function test(description, fn) {
+  testCount++;
+  try {
+    fn();
+    passCount++;
+    console.log(`  ${colors.green}✓${colors.reset} ${description}`);
+  } catch (error) {
+    failCount++;
+    console.log(`  ${colors.red}✗${colors.reset} ${description}`);
+    console.log(`    ${colors.red}${error.message}${colors.reset}`);
+    if (error.stack) {
+      console.log(
+        `    ${colors.gray}${error.stack.split("\n").slice(1, 3).join("\n    ")}${colors.reset}`,
+      );
+    }
+  }
+}
+
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message || "Assertion failed");
+  }
+}
+
+function assertEqual(actual, expected, message) {
+  if (actual !== expected) {
+    throw new Error(
+      message ||
+        `Expected ${JSON.stringify(expected)}, but got ${JSON.stringify(actual)}`,
+    );
+  }
+}
+
+function assertDeepEqual(actual, expected, message) {
+  const actualStr = JSON.stringify(actual);
+  const expectedStr = JSON.stringify(expected);
+  if (actualStr !== expectedStr) {
+    throw new Error(message || `Expected ${expectedStr}, but got ${actualStr}`);
+  }
+}
+
+function assertMatch(actual, pattern, message) {
+  if (!pattern.test(actual)) {
+    throw new Error(
+      message || `Expected "${actual}" to match pattern ${pattern}`,
+    );
+  }
+}
+
+function assertIncludes(str, substring, message) {
+  if (!str.includes(substring)) {
+    throw new Error(message || `Expected "${str}" to include "${substring}"`);
+  }
+}
+
+function assertNotIncludes(str, substring, message) {
+  if (str.includes(substring)) {
+    throw new Error(
+      message || `Expected "${str}" to not include "${substring}"`,
+    );
+  }
+}
+
+// Mock console methods
+const originalConsoleWarn = console.warn;
+let consoleWarnCalled = false;
+let consoleWarnMessages = [];
+
+function mockConsoleWarn() {
+  consoleWarnCalled = false;
+  consoleWarnMessages = [];
+  console.warn = (...args) => {
+    consoleWarnCalled = true;
+    consoleWarnMessages.push(args.join(" "));
+  };
+}
+
+function restoreConsole() {
+  console.warn = originalConsoleWarn;
+}
+
+// Helper functions to extract internal functions from the plugin
+// Since the plugin exports a factory function, we need to create instances for testing
+
+function createMockConfig(command = "build", root = "/mock/project") {
+  return {
+    command,
+    root,
+  };
+}
+
+function createTestFile(content) {
+  const tmpPath = path.join("/tmp", `test-${Date.now()}-${Math.random()}.js`);
+  fs.writeFileSync(tmpPath, content, "utf-8");
+  return tmpPath;
+}
+
+function cleanupTestFile(filePath) {
+  try {
+    if (fs.existsSync(filePath)) {
+      fs.unlinkSync(filePath);
+    }
+  } catch (err) {
+    // ignore
+  }
+}
+
+// Test suites
+
+suite("parseExports", () => {
+  test("should parse simple export * as syntax", () => {
+    const content = `export * as rBtn from './button/index.js'`;
+    const tmpFile = createTestFile(content);
+
+    // We need to test the parseExports function, but it's internal
+    // So we'll create a mock version for testing
+    const parseExports = (filePath, exclude = []) => {
+      try {
+        const content = fs.readFileSync(filePath, "utf-8");
+        const clean = content
+          .replace(/\/\*[\s\S]*?\*\//g, "")
+          .replace(/\/\/.*$/gm, "");
+
+        const regex =
+          /export\s+\*\s+as\s+([a-zA-Z_]\w*)\s+from\s+['"]([^'"]+)['"]/g;
+        const map = new Map();
+        let m;
+        while ((m = regex.exec(clean)) !== null) {
+          const [, name, relPath] = m;
+          if (exclude.includes(name)) continue;
+          let p = relPath.replace(/^\.\//, "");
+          if (!p.match(/\.(js|vue|ts|mjs)$/)) p = `${p}/index.js`;
+          map.set(name, p);
+        }
+        return map;
+      } catch (err) {
+        return new Map();
+      }
+    };
+
+    const result = parseExports(tmpFile);
+    assertEqual(result.size, 1);
+    assertEqual(result.get("rBtn"), "button/index.js");
+
+    cleanupTestFile(tmpFile);
+  });
+
+  test("should parse multiple exports", () => {
+    const content = `
+export * as rBtn from './button/index.js'
+export * as rCard from './card/index.js'
+export * as rInput from './form/input/index.js'
+    `.trim();
+    const tmpFile = createTestFile(content);
+
+    const parseExports = (filePath, exclude = []) => {
+      const content = fs.readFileSync(filePath, "utf-8");
+      const clean = content
+        .replace(/\/\*[\s\S]*?\*\//g, "")
+        .replace(/\/\/.*$/gm, "");
+      const regex =
+        /export\s+\*\s+as\s+([a-zA-Z_]\w*)\s+from\s+['"]([^'"]+)['"]/g;
+      const map = new Map();
+      let m;
+      while ((m = regex.exec(clean)) !== null) {
+        const [, name, relPath] = m;
+        if (exclude.includes(name)) continue;
+        let p = relPath.replace(/^\.\//, "");
+        if (!p.match(/\.(js|vue|ts|mjs)$/)) p = `${p}/index.js`;
+        map.set(name, p);
+      }
+      return map;
+    };
+
+    const result = parseExports(tmpFile);
+    assertEqual(result.size, 3);
+    assertEqual(result.get("rBtn"), "button/index.js");
+    assertEqual(result.get("rCard"), "card/index.js");
+    assertEqual(result.get("rInput"), "form/input/index.js");
+
+    cleanupTestFile(tmpFile);
+  });
+
+  test("should exclude specified components", () => {
+    const content = `
+export * as rBtn from './button/index.js'
+export * as _register from './register.js'
+export * as rCard from './card/index.js'
+    `.trim();
+    const tmpFile = createTestFile(content);
+
+    const parseExports = (filePath, exclude = []) => {
+      const content = fs.readFileSync(filePath, "utf-8");
+      const clean = content
+        .replace(/\/\*[\s\S]*?\*\//g, "")
+        .replace(/\/\/.*$/gm, "");
+      const regex =
+        /export\s+\*\s+as\s+([a-zA-Z_]\w*)\s+from\s+['"]([^'"]+)['"]/g;
+      const map = new Map();
+      let m;
+      while ((m = regex.exec(clean)) !== null) {
+        const [, name, relPath] = m;
+        if (exclude.includes(name)) continue;
+        let p = relPath.replace(/^\.\//, "");
+        if (!p.match(/\.(js|vue|ts|mjs)$/)) p = `${p}/index.js`;
+        map.set(name, p);
+      }
+      return map;
+    };
+
+    const result = parseExports(tmpFile, ["_register"]);
+    assertEqual(result.size, 2);
+    assertEqual(result.get("rBtn"), "button/index.js");
+    assertEqual(result.get("rCard"), "card/index.js");
+    assert(!result.has("_register"));
+
+    cleanupTestFile(tmpFile);
+  });
+
+  test("should handle comments", () => {
+    const content = `
+// This is a comment
+export * as rBtn from './button/index.js'
+/* Multi-line
+   comment */
+export * as rCard from './card/index.js'
+    `.trim();
+    const tmpFile = createTestFile(content);
+
+    const parseExports = (filePath, exclude = []) => {
+      const content = fs.readFileSync(filePath, "utf-8");
+      const clean = content
+        .replace(/\/\*[\s\S]*?\*\//g, "")
+        .replace(/\/\/.*$/gm, "");
+      const regex =
+        /export\s+\*\s+as\s+([a-zA-Z_]\w*)\s+from\s+['"]([^'"]+)['"]/g;
+      const map = new Map();
+      let m;
+      while ((m = regex.exec(clean)) !== null) {
+        const [, name, relPath] = m;
+        if (exclude.includes(name)) continue;
+        let p = relPath.replace(/^\.\//, "");
+        if (!p.match(/\.(js|vue|ts|mjs)$/)) p = `${p}/index.js`;
+        map.set(name, p);
+      }
+      return map;
+    };
+
+    const result = parseExports(tmpFile);
+    assertEqual(result.size, 2);
+
+    cleanupTestFile(tmpFile);
+  });
+});
+
+suite("kebab2camel", () => {
+  const kebab2camel = (s) => {
+    return s.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+  };
+
+  test("should convert simple kebab-case to camelCase", () => {
+    assertEqual(kebab2camel("r-btn"), "rBtn");
+    assertEqual(kebab2camel("r-card"), "rCard");
+  });
+
+  test("should handle multiple hyphens", () => {
+    assertEqual(kebab2camel("r-btn-group"), "rBtnGroup");
+    assertEqual(kebab2camel("r-form-input"), "rFormInput");
+  });
+
+  test("should handle numbers", () => {
+    assertEqual(kebab2camel("r-h1"), "rH1");
+    assertEqual(kebab2camel("r-v2"), "rV2");
+  });
+
+  test("should leave already camelCase unchanged", () => {
+    assertEqual(kebab2camel("rBtn"), "rBtn");
+    assertEqual(kebab2camel("rCard"), "rCard");
+  });
+
+  test("should handle no hyphens", () => {
+    assertEqual(kebab2camel("rbutton"), "rbutton");
+  });
+});
+
+suite("scanFile", () => {
+  const kebab2camel = (s) =>
+    s.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+
+  const createMockState = () => ({
+    usedComponents: new Set(),
+    usedDirectives: new Set(),
+    componentsMap: new Map([
+      ["rBtn", "button/index.js"],
+      ["rCard", "card/index.js"],
+      ["rBtnGroup", "button/buttonGroup.js"],
+    ]),
+    directivesMap: new Map([
+      ["vRipple", "ripple.js"],
+      ["vTooltip", "tooltip.js"],
+    ]),
+  });
+
+  const scanFile = (filePath, state, prefix = "r") => {
+    try {
+      const content = fs.readFileSync(filePath, "utf-8");
+      const tmplMatch = content.match(
+        /<template(?:\s[^>]*)?>([\s\S]*?)<\/template>/,
+      );
+      if (!tmplMatch) return;
+
+      const tmpl = tmplMatch[1];
+
+      const tagRe = /<\s*\/?([a-zA-Z][a-zA-Z0-9-]*)/g;
+      let m;
+      while ((m = tagRe.exec(tmpl)) !== null) {
+        const tag = m[1];
+        if (!tag.startsWith(prefix)) continue;
+        const camel = kebab2camel(tag);
+        if (state.componentsMap.has(camel)) state.usedComponents.add(camel);
+        else if (state.componentsMap.has(tag)) state.usedComponents.add(tag);
+      }
+
+      const dirRe = /\bv-([a-zA-Z][a-zA-Z0-9-]*)/g;
+      const builtins = new Set([
+        "model",
+        "if",
+        "else",
+        "else-if",
+        "for",
+        "show",
+        "bind",
+        "on",
+        "slot",
+        "text",
+        "html",
+        "cloak",
+        "once",
+        "memo",
+        "pre",
+      ]);
+
+      while ((m = dirRe.exec(tmpl)) !== null) {
+        const d = m[1];
+        if (builtins.has(d)) continue;
+        const camel = kebab2camel(d);
+        const candidates = [
+          d,
+          camel,
+          `v${camel.charAt(0).toUpperCase()}${camel.slice(1)}`,
+        ];
+        for (const c of candidates) {
+          if (state.directivesMap.has(c)) {
+            state.usedDirectives.add(c);
+            break;
+          }
+        }
+      }
+    } catch {
+      // ignore
+    }
+  };
+
+  test("should detect kebab-case components", () => {
+    const vueContent = `
+<template>
+  <div>
+    <r-btn>Click</r-btn>
+    <r-card>Content</r-card>
+  </div>
+</template>
+    `.trim();
+    const tmpFile = createTestFile(vueContent);
+    const state = createMockState();
+
+    scanFile(tmpFile, state);
+
+    assert(state.usedComponents.has("rBtn"));
+    assert(state.usedComponents.has("rCard"));
+    assertEqual(state.usedComponents.size, 2);
+
+    cleanupTestFile(tmpFile);
+  });
+
+  test("should detect self-closing components", () => {
+    const vueContent = `
+<template>
+  <div>
+    <r-btn />
+    <r-card/>
+  </div>
+</template>
+    `.trim();
+    const tmpFile = createTestFile(vueContent);
+    const state = createMockState();
+
+    scanFile(tmpFile, state);
+
+    assert(state.usedComponents.has("rBtn"));
+    assert(state.usedComponents.has("rCard"));
+
+    cleanupTestFile(tmpFile);
+  });
+
+  test("should detect directives", () => {
+    const vueContent = `
+<template>
+  <div v-ripple>
+    <span v-tooltip="'Hello'">Text</span>
+  </div>
+</template>
+    `.trim();
+    const tmpFile = createTestFile(vueContent);
+    const state = createMockState();
+
+    scanFile(tmpFile, state);
+
+    assert(state.usedDirectives.has("vRipple"));
+    assert(state.usedDirectives.has("vTooltip"));
+
+    cleanupTestFile(tmpFile);
+  });
+
+  test("should ignore built-in Vue directives", () => {
+    const vueContent = `
+<template>
+  <div v-if="show" v-for="item in items" v-model="value">
+    <span v-show="visible" v-bind:class="className">Text</span>
+  </div>
+</template>
+    `.trim();
+    const tmpFile = createTestFile(vueContent);
+    const state = createMockState();
+
+    scanFile(tmpFile, state);
+
+    assertEqual(state.usedDirectives.size, 0);
+
+    cleanupTestFile(tmpFile);
+  });
+
+  test("should ignore non-prefixed components", () => {
+    const vueContent = `
+<template>
+  <div>
+    <button>Native</button>
+    <span>Text</span>
+    <r-btn>Renusify</r-btn>
+  </div>
+</template>
+    `.trim();
+    const tmpFile = createTestFile(vueContent);
+    const state = createMockState();
+
+    scanFile(tmpFile, state);
+
+    assertEqual(state.usedComponents.size, 1);
+    assert(state.usedComponents.has("rBtn"));
+
+    cleanupTestFile(tmpFile);
+  });
+
+  test("should handle files without template", () => {
+    const vueContent = `
+<script>
+export default {
+  name: 'MyComponent'
+}
+</script>
+    `.trim();
+    const tmpFile = createTestFile(vueContent);
+    const state = createMockState();
+
+    scanFile(tmpFile, state);
+
+    assertEqual(state.usedComponents.size, 0);
+    assertEqual(state.usedDirectives.size, 0);
+
+    cleanupTestFile(tmpFile);
+  });
+});
+
+suite("generateImportStatements", () => {
+  const generateImportStatements = (state) => {
+    const comps = [...state.usedComponents].sort();
+    const dirs = [...state.usedDirectives].sort();
+
+    if (comps.length === 0 && dirs.length === 0) return "";
+
+    let code = "\n";
+    if (comps.length > 0) {
+      code += `import {\n  ${comps.join(",\n  ")}\n} from 'renusify/components/index.js'\n`;
+    }
+    if (dirs.length > 0) {
+      const dirNames = dirs.map((name) => {
+        if (name.startsWith("v") || name.startsWith("V")) {
+          return name.charAt(1).toLowerCase() + name.slice(2);
+        }
+        return name;
+      });
+      code += `import { ${dirNames.join(", ")} } from 'renusify/directive/index.js'\n`;
+    }
+
+    return code;
+  };
+
+  test("should generate import for single component", () => {
+    const state = {
+      usedComponents: new Set(["rBtn"]),
+      usedDirectives: new Set(),
+    };
+
+    const result = generateImportStatements(state);
+    assertIncludes(result, "import {");
+    assertIncludes(result, "rBtn");
+    assertIncludes(result, "from 'renusify/components/index.js'");
+  });
+
+  test("should generate imports for multiple components", () => {
+    const state = {
+      usedComponents: new Set(["rBtn", "rCard", "rInput"]),
+      usedDirectives: new Set(),
+    };
+
+    const result = generateImportStatements(state);
+    assertIncludes(result, "rBtn");
+    assertIncludes(result, "rCard");
+    assertIncludes(result, "rInput");
+  });
+
+  test("should generate imports for directives", () => {
+    const state = {
+      usedComponents: new Set(),
+      usedDirectives: new Set(["vRipple", "vTooltip"]),
+    };
+
+    const result = generateImportStatements(state);
+    assertIncludes(result, "ripple");
+    assertIncludes(result, "tooltip");
+    assertIncludes(result, "from 'renusify/directive/index.js'");
+  });
+
+  test("should generate imports for both components and directives", () => {
+    const state = {
+      usedComponents: new Set(["rBtn", "rCard"]),
+      usedDirectives: new Set(["vRipple"]),
+    };
+
+    const result = generateImportStatements(state);
+    assertIncludes(result, "rBtn");
+    assertIncludes(result, "rCard");
+    assertIncludes(result, "ripple");
+    assertIncludes(result, "components/index.js");
+    assertIncludes(result, "directive/index.js");
+  });
+
+  test("should return empty string when no components or directives", () => {
+    const state = {
+      usedComponents: new Set(),
+      usedDirectives: new Set(),
+    };
+
+    const result = generateImportStatements(state);
+    assertEqual(result, "");
+  });
+
+  test("should sort components alphabetically", () => {
+    const state = {
+      usedComponents: new Set(["rCard", "rAvatar", "rBtn"]),
+      usedDirectives: new Set(),
+    };
+
+    const result = generateImportStatements(state);
+    const rAvatarIndex = result.indexOf("rAvatar");
+    const rBtnIndex = result.indexOf("rBtn");
+    const rCardIndex = result.indexOf("rCard");
+
+    assert(
+      rAvatarIndex < rBtnIndex && rBtnIndex < rCardIndex,
+      "Components should be sorted alphabetically",
+    );
+  });
+});
+
+suite("generateComponentsObject", () => {
+  const generateComponentsObject = (state) => {
+    const comps = [...state.usedComponents].sort();
+    if (comps.length === 0) return null;
+    return `components: {\n      ${comps.join(",\n      ")}\n    }`;
+  };
+
+  test("should generate components object with single component", () => {
+    const state = { usedComponents: new Set(["rBtn"]) };
+    const result = generateComponentsObject(state);
+
+    assertIncludes(result, "components:");
+    assertIncludes(result, "rBtn");
+  });
+
+  test("should generate components object with multiple components", () => {
+    const state = { usedComponents: new Set(["rBtn", "rCard", "rInput"]) };
+    const result = generateComponentsObject(state);
+
+    assertIncludes(result, "rBtn");
+    assertIncludes(result, "rCard");
+    assertIncludes(result, "rInput");
+  });
+
+  test("should return null when no components", () => {
+    const state = { usedComponents: new Set() };
+    const result = generateComponentsObject(state);
+
+    assertEqual(result, null);
+  });
+
+  test("should sort components alphabetically", () => {
+    const state = { usedComponents: new Set(["rCard", "rAvatar", "rBtn"]) };
+    const result = generateComponentsObject(state);
+
+    const rAvatarIndex = result.indexOf("rAvatar");
+    const rBtnIndex = result.indexOf("rBtn");
+    const rCardIndex = result.indexOf("rCard");
+
+    assert(rAvatarIndex < rBtnIndex && rBtnIndex < rCardIndex);
+  });
+});
+
+suite("generateDirectivesObject", () => {
+  const generateDirectivesObject = (state) => {
+    const dirs = [...state.usedDirectives].sort();
+    if (dirs.length === 0) return null;
+    const dirNames = dirs.map((name) => {
+      if (name.startsWith("v") || name.startsWith("V")) {
+        return name.charAt(1).toLowerCase() + name.slice(2);
+      }
+      return name;
+    });
+    return `directives: { ${dirNames.join(", ")} }`;
+  };
+
+  test("should generate directives object with single directive", () => {
+    const state = { usedDirectives: new Set(["vRipple"]) };
+    const result = generateDirectivesObject(state);
+
+    assertIncludes(result, "directives:");
+    assertIncludes(result, "ripple");
+  });
+
+  test("should generate directives object with multiple directives", () => {
+    const state = { usedDirectives: new Set(["vRipple", "vTooltip"]) };
+    const result = generateDirectivesObject(state);
+
+    assertIncludes(result, "ripple");
+    assertIncludes(result, "tooltip");
+  });
+
+  test("should return null when no directives", () => {
+    const state = { usedDirectives: new Set() };
+    const result = generateDirectivesObject(state);
+
+    assertEqual(result, null);
+  });
+
+  test("should convert directive names properly", () => {
+    const state = { usedDirectives: new Set(["vRipple", "VTooltip"]) };
+    const result = generateDirectivesObject(state);
+
+    assertIncludes(result, "ripple");
+    assertIncludes(result, "tooltip");
+    assertNotIncludes(result, "vRipple");
+    assertNotIncludes(result, "VTooltip");
+  });
+});
+
+suite("removeProperty", () => {
+  function removeProperty(optionsStr, propName) {
+    const propRegex = new RegExp(`,?\\s*${propName}\\s*:\\s*`);
+    const match = propRegex.exec(optionsStr);
+
+    if (!match) return optionsStr;
+
+    const startIndex = match.index;
+    const valueStart = startIndex + match[0].length;
+
+    let endIndex = valueStart;
+    const firstChar = optionsStr[valueStart];
+
+    if (firstChar === "{") {
+      let braceCount = 1;
+      let i = valueStart + 1;
+      while (i < optionsStr.length && braceCount > 0) {
+        if (optionsStr[i] === "{") braceCount++;
+        else if (optionsStr[i] === "}") braceCount--;
+        i++;
+      }
+      endIndex = i;
+    } else if (firstChar === "[") {
+      let bracketCount = 1;
+      let i = valueStart + 1;
+      while (i < optionsStr.length && bracketCount > 0) {
+        if (optionsStr[i] === "[") bracketCount++;
+        else if (optionsStr[i] === "]") bracketCount--;
+        i++;
+      }
+      endIndex = i;
+    } else {
+      let i = valueStart;
+      while (
+        i < optionsStr.length &&
+        optionsStr[i] !== "," &&
+        optionsStr[i] !== "}"
+      ) {
+        i++;
+      }
+      endIndex = i;
+    }
+
+    if (endIndex < optionsStr.length && optionsStr[endIndex] === ",") {
+      endIndex++;
+    }
+
+    return optionsStr.slice(0, startIndex) + optionsStr.slice(endIndex);
+  }
+
+  test("should remove simple property", () => {
+    const options = "theme: 'dark', locale: 'en'";
+    const result = removeProperty(options, "theme");
+
+    assertNotIncludes(result, "theme");
+    assertIncludes(result, "locale");
+  });
+
+  test("should remove property with object value", () => {
+    const options = "components: { rBtn, rCard }, theme: 'dark'";
+    const result = removeProperty(options, "components");
+
+    assertNotIncludes(result, "components");
+    assertNotIncludes(result, "rBtn");
+    assertIncludes(result, "theme");
+  });
+
+  test("should remove property with array value", () => {
+    const options = "plugins: [plugin1, plugin2], theme: 'dark'";
+    const result = removeProperty(options, "plugins");
+
+    assertNotIncludes(result, "plugins");
+    assertIncludes(result, "theme");
+  });
+
+  test("should handle nested braces", () => {
+    const options = "components: { nested: { deep: true } }, theme: 'dark'";
+    const result = removeProperty(options, "components");
+
+    assertNotIncludes(result, "components");
+    assertNotIncludes(result, "nested");
+    assertIncludes(result, "theme");
+  });
+
+  test("should return unchanged if property not found", () => {
+    const options = "theme: 'dark', locale: 'en'";
+    const result = removeProperty(options, "notfound");
+
+    assertEqual(result, options);
+  });
+
+  test("should handle trailing comma", () => {
+    const options = "components: { rBtn }, theme: 'dark'";
+    const result = removeProperty(options, "components");
+
+    assertNotIncludes(result, "components");
+    assertIncludes(result, "theme");
+  });
+});
+
+suite("Plugin Integration", () => {
+  test("should test with actual components from components/index.js", () => {
+    const componentsPath = path.join(process.cwd(), "components/index.js");
+
+    if (!fs.existsSync(componentsPath)) {
+      console.log(
+        `    ${colors.yellow}⚠${colors.reset} Skipping - components/index.js not found`,
+      );
+      return;
+    }
+
+    const parseExports = (filePath, exclude = []) => {
+      try {
+        const content = fs.readFileSync(filePath, "utf-8");
+        const clean = content
+          .replace(/\/\*[\s\S]*?\*\//g, "")
+          .replace(/\/\/.*$/gm, "");
+        const regex =
+          /export\s+\*\s+as\s+([a-zA-Z_]\w*)\s+from\s+['"]([^'"]+)['"]/g;
+        const map = new Map();
+        let m;
+        while ((m = regex.exec(clean)) !== null) {
+          const [, name, relPath] = m;
+          if (exclude.includes(name)) continue;
+          let p = relPath.replace(/^\.\//, "");
+          if (!p.match(/\.(js|vue|ts|mjs)$/)) p = `${p}/index.js`;
+          map.set(name, p);
+        }
+        return map;
+      } catch (err) {
+        return new Map();
+      }
+    };
+
+    const componentsMap = parseExports(componentsPath, ["_register"]);
+
+    assert(componentsMap.size > 0, "Should parse components from index.js");
+    assert(
+      componentsMap.has("rBtn") ||
+        componentsMap.has("rButton") ||
+        componentsMap.size > 10,
+      "Should contain expected components",
+    );
+  });
+
+  test("should handle transform of main.js-like content", () => {
+    const mockCode = `
+import { createApp } from 'vue'
+import App from './App.vue'
+import renusify from 'renusify'
+
+const app = createApp(App)
+app.use(renusify, {
+  theme: 'dark'
+})
+app.mount('#app')
+    `.trim();
+
+    const state = {
+      usedComponents: new Set(["rBtn", "rCard"]),
+      usedDirectives: new Set(["vRipple"]),
+    };
+
+    const generateImportStatements = (state) => {
+      const comps = [...state.usedComponents].sort();
+      const dirs = [...state.usedDirectives].sort();
+      if (comps.length === 0 && dirs.length === 0) return "";
+      let code = "\n";
+      if (comps.length > 0) {
+        code += `import {\n  ${comps.join(",\n  ")}\n} from 'renusify/components/index.js'\n`;
+      }
+      if (dirs.length > 0) {
+        const dirNames = dirs.map((name) => {
+          if (name.startsWith("v") || name.startsWith("V")) {
+            return name.charAt(1).toLowerCase() + name.slice(2);
+          }
+          return name;
+        });
+        code += `import { ${dirNames.join(", ")} } from 'renusify/directive/index.js'\n`;
+      }
+      return code;
+    };
+
+    const imports = generateImportStatements(state);
+
+    assertIncludes(imports, "rBtn");
+    assertIncludes(imports, "rCard");
+    assertIncludes(imports, "ripple");
+    assertIncludes(imports, "components/index.js");
+    assertIncludes(imports, "directive/index.js");
+  });
+});
+
+// Run all tests
+console.log(
+  `\n${colors.blue}==================================${colors.reset}`,
+);
+console.log(`${colors.blue}Auto-Loader Plugin Tests Complete${colors.reset}`);
+console.log(`${colors.blue}==================================${colors.reset}`);
+console.log(`\nTotal: ${testCount} tests`);
+console.log(
+  `${colors.green}Passed: ${passCount}${colors.reset} | ${colors.red}Failed: ${failCount}${colors.reset}`,
+);
+
+if (failCount > 0) {
+  process.exit(1);
+}