vite-plugin-lucide-preprocess 1.0.0 → 1.0.2

package/README.md

@@ -9,21 +9,43 @@ A [Vite](https://vitejs.dev) plugin to replace imports for [Lucide icons](https:
 
 ## What is this?
 
-This plugin is a follow-up to [this PR on Lucide](https://github.com/lucide-icons/lucide/pull/1707).  
-If you want to import Lucide icons in your project, you can use two methods:
+### Motivation
+
+If you want to import Lucide icons in your project, you can use two methods
+since [this PR on Lucide](https://github.com/lucide-icons/lucide/pull/1707) (at least for `lucide-svelte`):
 
 ```js
 import { IconName } from "lucide-svelte";
-// or, since PR #1707 (at least for lucide-svelte):
+// or
 import IconName from "lucide-svelte/icons/icon-name";
 ```
 
-While the first method is more convenient (and may be the one used by auto-import features in your editor), it is not tree-shakeable. In fact, a single import from `"lucide-<library>"` will import all icons, which is not ideal for performance.
+While the first method is more convenient (and may be the one used by auto-import features in your editor),
+it is not tree-shakable.
+In fact, a single import from `"lucide-<framework>"` will import all icons, not ideal for performance and bundle size.
 
-This plugin will replace the first method with the second one, so you can keep the convenience of the first method while benefiting from tree-shaking optimizations. “Correct” imports will be kept as-is.
+**This plugin will replace the first method with the second one, so you can keep the convenience of the first method
+while benefiting from tree-shaking optimizations.** “Correct” imports will be kept as-is.
 
 > [!NOTE]
-> It is primarily intended for `lucide-svelte`, but it should work with any Lucide package using Vite, if they follow the same structure.
+> The plugin is primarily intended for `lucide-svelte`, but it should work with
+> any Lucide package using Vite if they follow the same structure.
+
+### Credits and opinion
+
+I got the idea
+from [Phosphor Icons' optimizer](https://github.com/haruaki07/phosphor-svelte#import-optimizer-experimental).
+However, this plugin is written from scratch and is not based on the Phosphor one (even though the technique is
+essentially the same).
+
+As it is a Vite plugin and not a Svelte one, it is more generic and can be used with any framework.
+Additionally, it doesn't suffer from the limitations of the Svelte plugin, preventing the Phosphor
+optimizer from working without disabling the native Vite optimizations of `phosphor-svelte`.
+
+In my opinion, this should be a feature embedded in Lucide itself (`lucide-svelte/preprocessor`),
+but I don't know if it will ever be implemented.
+[I opened an issue](https://github.com/lucide-icons/lucide/issues/2295) on the `lucide-icons` repository to discuss
+this.
 
 ## Installation
 

package/dist/index.d.ts

@@ -1,6 +1,3 @@
-/**
- * The Vite plugin that preprocesses imports to optimize Lucide icons
- * @return {import("vite").Plugin}
- */
-export default function _default(): import("vite").Plugin;
+export default plugin;
+import { plugin } from "./plugin.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AAEA;;;GAGG;AACH,oCAFY,OAAO,MAAM,EAAE,MAAM,CAyChC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":";uBAAuB,aAAa"}

package/dist/index.js

@@ -1,41 +1,3 @@
-const ignoredPaths = ["/node_modules/", "/.svelte-kit/"];
-/**
- * The Vite plugin that preprocesses imports to optimize Lucide icons
- * @return {import("vite").Plugin}
- */
-export default function () {
-    return {
-        name: "vite-plugin-lucide-preprocess",
-        enforce: "pre",
-        transform: (code, path) => {
-            if (ignoredPaths.some(p => path.includes(p))) {
-                return;
-            }
-            return {
-                code: code.replace(/^(\s*)import\s+\{([^}]*)}\s+from\s+(["'])lucide-(.*?)["'](.*)$/gm, 
-                /**
-                 * @param _ The whole matched string
-                 * @param initialSpacing {string} The spacing before the matched import statement
-                 * @param modulesStr {string} The imported icons as a raw string
-                 * @param quote {string} The quote used in the import statement (either ' or ")
-                 * @param framework {string} The framework the icons are imported for
-                 * @param lineEnding {string} The end of the line of the matched import statement (often a semicolon)
-                 * @return The optimized import statement(s)
-                 */
-                (_, initialSpacing, modulesStr, quote, framework, lineEnding) => {
-                    const modules = modulesStr
-                        .split(",")
-                        .map(m => m.trim())
-                        .filter(m => !m.startsWith("type"));
-                    return modules
-                        .map(m => {
-                        const dashedModule = m.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase());
-                        return `${initialSpacing}import ${m} from ${quote}lucide-${framework}/icons/${dashedModule}${quote}${lineEnding.trimEnd()}`;
-                    })
-                        .join("\n");
-                })
-            };
-        }
-    };
-}
+import { plugin } from "./plugin.js";
+export default plugin;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;AAEzD;;;GAGG;AACH,MAAM,CAAC,OAAO;IACb,OAAO;QACN,IAAI,EAAE,+BAA+B;QACrC,OAAO,EAAE,KAAK;QACd,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;YACzB,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC9C,OAAO;YACR,CAAC;YACD,OAAO;gBACN,IAAI,EAAE,IAAI,CAAC,OAAO,CACjB,kEAAkE;gBAClE;;;;;;;;mBAQG;gBACH,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;oBAC/D,MAAM,OAAO,GAAG,UAAU;yBACxB,KAAK,CAAC,GAAG,CAAC;yBACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;yBAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;oBACrC,OAAO,OAAO;yBACZ,GAAG,CAAC,CAAC,CAAC,EAAE;wBACR,MAAM,YAAY,GAAG,CAAC,CAAC,OAAO,CAC7B,QAAQ,EACR,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,CAChE,CAAC;wBACF,OAAO,GAAG,cAAc,UAAU,CAAC,SAAS,KAAK,UAAU,SAAS,UAAU,YAAY,GAAG,KAAK,GAAG,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC;oBAC7H,CAAC,CAAC;yBACD,IAAI,CAAC,IAAI,CAAC,CAAC;gBACd,CAAC,CACD;aACD,CAAC;QACH,CAAC;KACD,CAAC;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,eAAe,MAAM,CAAC"}

package/dist/plugin.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Converts a raw string of imported icons to a list of module names
+ * @param rawModules {string} The raw string of imported icons
+ * @return {string[]} The list of imported icon
+ */
+export function rawModulesToModulesList(rawModules: string): string[];
+/**
+ * Converts a PascalCase icon component name to a dashed string
+ * (e.g. `IconComp` to `icon-comp`)
+ * @param component {string} The PascalCase icon component name
+ * @return {string} The dashed icon component name
+ */
+export function iconCompToDashed(component: string): string;
+export const importsMatcher: RegExp;
+export function plugin(): import("vite").Plugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.js"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,oDAHsB,MAAM,GAChB,MAAM,EAAE,CAOnB;AAED;;;;;GAKG;AACH,4CAHqB,MAAM,GACf,MAAM,CAWjB;AAED,oCAAiG;AAM1F,0BAFK,OAAO,MAAM,EAAE,MAAM,CAgC/B"}

package/dist/plugin.js

@@ -0,0 +1,58 @@
+const ignoredPaths = ["/node_modules/", "/.svelte-kit/"];
+/**
+ * Converts a raw string of imported icons to a list of module names
+ * @param rawModules {string} The raw string of imported icons
+ * @return {string[]} The list of imported icon
+ */
+export function rawModulesToModulesList(rawModules) {
+    return rawModules
+        .split(",")
+        .map(m => m.trim())
+        .filter(m => !!m && !m.startsWith("type"));
+}
+/**
+ * Converts a PascalCase icon component name to a dashed string
+ * (e.g. `IconComp` to `icon-comp`)
+ * @param component {string} The PascalCase icon component name
+ * @return {string} The dashed icon component name
+ */
+export function iconCompToDashed(component) {
+    return (component
+        .replace(/[A-Z\d]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase())
+        // fix for NxN icons
+        .replace(/(\d)x-(\d)/, (_, a, b) => `${a}x${b}`)
+        // exception for ClockNN
+        .replace(/clock-(\d)-(\d)/, (_, a, b) => `clock-${a}${b}`));
+}
+export const importsMatcher = /^(\s*)import\s+\{([^}]*)}\s+from\s+(["'])lucide-(.*?)["'](.*)$/gm;
+/**
+ * The Vite plugin that preprocesses imports to optimize Lucide icons
+ * @return {import("vite").Plugin}
+ */
+export const plugin = () => ({
+    name: "vite-plugin-lucide-preprocess",
+    enforce: "pre",
+    transform: (code, path) => {
+        if (ignoredPaths.some(p => path.includes(p))) {
+            return;
+        }
+        return {
+            code: code.replace(importsMatcher, 
+            /**
+             * @param _ The whole matched string
+             * @param initialSpacing {string} The spacing before the matched import statement
+             * @param modulesStr {string} The imported icons as a raw string
+             * @param quote {string} The quote used in the import statement (either ' or ")
+             * @param framework {string} The framework the icons are imported for
+             * @param lineEnding {string} The end of the line of the matched import statement (often a semicolon)
+             * @return The optimized import statement(s)
+             */
+            (_, initialSpacing, modulesStr, quote, framework, lineEnding) => {
+                return rawModulesToModulesList(modulesStr)
+                    .map(m => `${initialSpacing}import ${m} from ${quote}lucide-${framework}/icons/${iconCompToDashed(m)}${quote}${lineEnding.trimEnd()}`)
+                    .join("\n");
+            })
+        };
+    }
+});
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.js"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;AAEzD;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAAC,UAAU;IACjD,OAAO,UAAU;SACf,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;SAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,SAAS;IACzC,OAAO,CACN,SAAS;SACP,OAAO,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;QACtF,oBAAoB;SACnB,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QAChD,wBAAwB;SACvB,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAC3D,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,kEAAkE,CAAC;AAEjG;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC;IAC5B,IAAI,EAAE,+BAA+B;IACrC,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;QACzB,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9C,OAAO;QACR,CAAC;QACD,OAAO;YACN,IAAI,EAAE,IAAI,CAAC,OAAO,CACjB,cAAc;YACd;;;;;;;;eAQG;YACH,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;gBAC/D,OAAO,uBAAuB,CAAC,UAAU,CAAC;qBACxC,GAAG,CACH,CAAC,CAAC,EAAE,CACH,GAAG,cAAc,UAAU,CAAC,SAAS,KAAK,UAAU,SAAS,UAAU,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,UAAU,CAAC,OAAO,EAAE,EAAE,CAC5H;qBACA,IAAI,CAAC,IAAI,CAAC,CAAC;YACd,CAAC,CACD;SACD,CAAC;IACH,CAAC;CACD,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-lucide-preprocess",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": {
     "url": "https://github.com/WarningImHack3r",
     "name": "WarningImHack3r"
@@ -31,10 +31,12 @@
     "vite": "^5"
   },
   "devDependencies": {
+    "lucide-svelte": "^0.427.0",
     "prettier": "^3.3.3",
     "publint": "^0.2.9",
     "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vitest": "^2.0.5"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,6 +44,7 @@
   "scripts": {
     "dev": "tsc -w",
     "build": "tsc",
+    "test": "vitest",
     "lint": "prettier --check . && publint",
     "format": "prettier --write ."
   }