@epoch32/visage 1.1.4 → 1.2.0

package/dist/vite/index.js

@@ -15,6 +15,8 @@ function parseNamedImports(importClause) {
     };
   });
 }
+var VIRTUAL_PREFIX = "virtual:visage-icons";
+var RESOLVED_PREFIX = `\x00${VIRTUAL_PREFIX}`;
 function visageLucide(options = {}) {
   const aliases = options.aliases ?? ["lucide-react"];
   return {
@@ -23,43 +25,80 @@ function visageLucide(options = {}) {
     config() {
       return {
         optimizeDeps: {
-          exclude: aliases
+          exclude: [...aliases, VIRTUAL_PREFIX]
         }
       };
     },
     resolveId(id) {
+      if (id.startsWith(VIRTUAL_PREFIX)) {
+        return `\x00${id}`;
+      }
       if (aliases.includes(id)) {
         return `\x00visage-lucide:${id}`;
       }
       return null;
     },
     load(id) {
+      if (id.startsWith(RESOLVED_PREFIX)) {
+        const query = id.slice(RESOLVED_PREFIX.length);
+        const params = new URLSearchParams(query.startsWith("?") ? query.slice(1) : "");
+        const names = (params.get("icons") || "").split(",").map((s) => s.trim()).filter(Boolean);
+        const imports = names.map((n) => `${n} as __icon_node_${n}`).join(", ");
+        const exports = names.map((n) => `export const ${n} = /* @__PURE__ */ createIcon("${n}", __icon_node_${n});`).join(`
+`);
+        return `import { createIcon } from "visage/ui";
+import { ${imports} } from "lucide";
+
+${exports}
+`;
+      }
       if (id.startsWith("\x00visage-lucide:")) {
-        return "export default {};";
+        return `
+import * as lucideIcons from "lucide";
+import { createIcon } from "visage/ui";
+
+const cache = new Map();
+export const __getIcon = (name) => {
+  if (cache.has(name)) return cache.get(name);
+  const node = lucideIcons[name];
+  const comp = node ? createIcon(name, node) : () => null;
+  cache.set(name, comp);
+  return comp;
+};
+
+export default new Proxy({}, {
+  get: (_, prop) => typeof prop === "string" ? __getIcon(prop) : undefined
+});
+`;
       }
       return null;
     },
     transform(code, id) {
-      if (!id.match(/\.[jt]sx?$/) || id.includes("node_modules")) {
+      if (!id.match(/\.([jt]sx?|mdx?)$/) || id.includes("node_modules")) {
         return null;
       }
       let transformed = code;
       let hasMatches = false;
       for (const alias of aliases) {
-        const regex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
-        transformed = transformed.replace(regex, (_match, importClause) => {
+        const importRegex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
+        transformed = transformed.replace(importRegex, (_match, importClause) => {
           const imports = parseNamedImports(importClause);
           if (imports.length === 0)
             return "";
           hasMatches = true;
-          const lucideNamedImports = imports.map((imp) => `${imp.importedName} as __icon_node_${imp.importedName}`).join(", ");
-          const componentDeclarations = imports.map((imp) => {
-            return `const ${imp.localName} = /* @__PURE__ */ __visageCreateIcon("${imp.importedName}", __icon_node_${imp.importedName});`;
-          }).join(`
-`);
-          return `import { createIcon as __visageCreateIcon } from "visage/ui";
-import { ${lucideNamedImports} } from "lucide";
-${componentDeclarations}`;
+          const queryIcons = Array.from(new Set(imports.map((i) => i.importedName))).join(",");
+          const specifiers = imports.map((i) => i.importedName === i.localName ? i.importedName : `${i.importedName} as ${i.localName}`).join(", ");
+          return `import { ${specifiers} } from "${VIRTUAL_PREFIX}?icons=${queryIcons}";`;
+        });
+        const exportRegex = new RegExp(`export\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
+        transformed = transformed.replace(exportRegex, (_match, exportClause) => {
+          const exports = parseNamedImports(exportClause);
+          if (exports.length === 0)
+            return "";
+          hasMatches = true;
+          const queryIcons = Array.from(new Set(exports.map((i) => i.importedName))).join(",");
+          const specifiers = exports.map((i) => i.importedName === i.localName ? i.importedName : `${i.importedName} as ${i.localName}`).join(", ");
+          return `export { ${specifiers} } from "${VIRTUAL_PREFIX}?icons=${queryIcons}";`;
         });
       }
       if (!hasMatches) {

package/dist/vite/lucide.d.ts

@@ -6,22 +6,5 @@ export interface VisageLucideOptions {
      */
     aliases?: string[];
 }
-/**
- * Official Visage Lucide Vite Plugin
- *
- * Statically transforms `import { Icon } from "lucide-react"` at build time into
- * native, tree-shaken Visage SVG component instances using `createIcon` and `lucide`.
- *
- * Example:
- * ```ts
- * // vite.config.ts
- * import { defineConfig } from "vite";
- * import visage, { visageLucide } from "visage/vite";
- *
- * export default defineConfig({
- *   plugins: [visage(), visageLucide()]
- * });
- * ```
- */
 export declare function visageLucide(options?: VisageLucideOptions): VisageVitePlugin;
 export default visageLucide;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epoch32/visage",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "Lightning-fast, zero-VDOM, fine-grained reactive UI library with full TypeScript support",
   "type": "module",
   "main": "./dist/index.js",

package/src/vite/lucide.ts

@@ -48,6 +48,9 @@ function parseNamedImports(importClause: string): ParsedImport[] {
  * });
  * ```
  */
+const VIRTUAL_PREFIX = "virtual:visage-icons";
+const RESOLVED_PREFIX = `\0${VIRTUAL_PREFIX}`;
+
 export function visageLucide(options: VisageLucideOptions = {}): VisageVitePlugin {
   const aliases = options.aliases ?? ["lucide-react"];
 
@@ -58,12 +61,15 @@ export function visageLucide(options: VisageLucideOptions = {}): VisageVitePlugi
     config() {
       return {
         optimizeDeps: {
-          exclude: aliases
+          exclude: [...aliases, VIRTUAL_PREFIX]
         }
       };
     },
 
     resolveId(id: string) {
+      if (id.startsWith(VIRTUAL_PREFIX)) {
+        return `\0${id}`;
+      }
       if (aliases.includes(id)) {
         return `\0visage-lucide:${id}`;
       }
@@ -71,14 +77,46 @@ export function visageLucide(options: VisageLucideOptions = {}): VisageVitePlugi
     },
 
     load(id: string) {
+      if (id.startsWith(RESOLVED_PREFIX)) {
+        const query = id.slice(RESOLVED_PREFIX.length);
+        const params = new URLSearchParams(query.startsWith("?") ? query.slice(1) : "");
+        const names = (params.get("icons") || "")
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean);
+
+        const imports = names.map((n) => `${n} as __icon_node_${n}`).join(", ");
+        const exports = names
+          .map((n) => `export const ${n} = /* @__PURE__ */ createIcon("${n}", __icon_node_${n});`)
+          .join("\n");
+
+        return `import { createIcon } from "visage/ui";\nimport { ${imports} } from "lucide";\n\n${exports}\n`;
+      }
+
       if (id.startsWith("\0visage-lucide:")) {
-        return "export default {};";
+        return `
+import * as lucideIcons from "lucide";
+import { createIcon } from "visage/ui";
+
+const cache = new Map();
+export const __getIcon = (name) => {
+  if (cache.has(name)) return cache.get(name);
+  const node = lucideIcons[name];
+  const comp = node ? createIcon(name, node) : () => null;
+  cache.set(name, comp);
+  return comp;
+};
+
+export default new Proxy({}, {
+  get: (_, prop) => typeof prop === "string" ? __getIcon(prop) : undefined
+});
+`;
       }
       return null;
     },
 
     transform(code: string, id: string) {
-      if (!id.match(/\.[jt]sx?$/) || id.includes("node_modules")) {
+      if (!id.match(/\.([jt]sx?|mdx?)$/) || id.includes("node_modules")) {
         return null;
       }
 
@@ -86,26 +124,48 @@ export function visageLucide(options: VisageLucideOptions = {}): VisageVitePlugi
       let hasMatches = false;
 
       for (const alias of aliases) {
-        // Regex to match: import { ... } from "lucide-react" or 'lucide-react'
-        const regex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
-
-        transformed = transformed.replace(regex, (_match, importClause) => {
+        // Match: import { ... } from "alias"
+        const importRegex = new RegExp(
+          `import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`,
+          "g"
+        );
+        transformed = transformed.replace(importRegex, (_match, importClause) => {
           const imports = parseNamedImports(importClause);
           if (imports.length === 0) return "";
-
           hasMatches = true;
 
-          const lucideNamedImports = imports
-            .map((imp) => `${imp.importedName} as __icon_node_${imp.importedName}`)
+          const queryIcons = Array.from(new Set(imports.map((i) => i.importedName))).join(",");
+          const specifiers = imports
+            .map((i) =>
+              i.importedName === i.localName
+                ? i.importedName
+                : `${i.importedName} as ${i.localName}`
+            )
             .join(", ");
 
-          const componentDeclarations = imports
-            .map((imp) => {
-              return `const ${imp.localName} = /* @__PURE__ */ __visageCreateIcon("${imp.importedName}", __icon_node_${imp.importedName});`;
-            })
-            .join("\n");
+          return `import { ${specifiers} } from "${VIRTUAL_PREFIX}?icons=${queryIcons}";`;
+        });
+
+        // Match: export { ... } from "alias"
+        const exportRegex = new RegExp(
+          `export\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`,
+          "g"
+        );
+        transformed = transformed.replace(exportRegex, (_match, exportClause) => {
+          const exports = parseNamedImports(exportClause);
+          if (exports.length === 0) return "";
+          hasMatches = true;
+
+          const queryIcons = Array.from(new Set(exports.map((i) => i.importedName))).join(",");
+          const specifiers = exports
+            .map((i) =>
+              i.importedName === i.localName
+                ? i.importedName
+                : `${i.importedName} as ${i.localName}`
+            )
+            .join(", ");
 
-          return `import { createIcon as __visageCreateIcon } from "visage/ui";\nimport { ${lucideNamedImports} } from "lucide";\n${componentDeclarations}`;
+          return `export { ${specifiers} } from "${VIRTUAL_PREFIX}?icons=${queryIcons}";`;
         });
       }