vite-plugin-lucide-preprocess 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -22
- package/dist/plugin.d.ts +7 -2
- package/dist/plugin.d.ts.map +1 -1
- package/dist/plugin.js +36 -26
- package/dist/plugin.js.map +1 -1
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -1,50 +1,52 @@
|
|
|
1
1
|
# vite-plugin-lucide-preprocess
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/vite-plugin-lucide-preprocess?activeTab=versions)
|
|
4
|
+
[](https://www.npmjs.com/package/vite-plugin-lucide-preprocess)
|
|
5
|
+
[](https://www.npmjs.com/package/vite-plugin-lucide-preprocess)
|
|
6
|
+
[](LICENSE)
|
|
7
7
|
|
|
8
|
-
A [Vite](https://
|
|
8
|
+
A [Vite](https://vite.dev) plugin to replace imports for [Lucide icons](https://lucide.dev).
|
|
9
9
|
|
|
10
10
|
## What is this?
|
|
11
11
|
|
|
12
12
|
### Motivation
|
|
13
13
|
|
|
14
|
-
If you want to import Lucide icons in your project, you can
|
|
15
|
-
|
|
14
|
+
If you want to import Lucide icons in your project, you can (usually — depending on
|
|
15
|
+
the package) use two methods:
|
|
16
16
|
|
|
17
17
|
```js
|
|
18
|
-
import { IconName } from "lucide
|
|
18
|
+
import { IconName } from "@lucide/svelte";
|
|
19
19
|
// or
|
|
20
|
-
import IconName from "lucide
|
|
20
|
+
import IconName from "@lucide/svelte/icons/icon-name";
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
While the first method is more convenient (and may be the one used by auto-import features in your editor),
|
|
24
24
|
it is not tree-shakable.
|
|
25
|
-
In fact, a single import from `"lucide-<framework>"`
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
In fact, a single import from `"lucide-<framework>"` or `"@lucide/<framework>"`
|
|
26
|
+
[will import all icons](https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess/issues/11#issuecomment-2445209558);
|
|
27
|
+
not ideal for Vite dev server performance and build time.
|
|
28
28
|
|
|
29
29
|
**This plugin will replace the first method with the second one, so you can keep the convenience of the first method
|
|
30
30
|
while benefiting from tree-shaking optimizations.** “Correct” imports will be kept as-is.
|
|
31
31
|
|
|
32
32
|
> [!NOTE]
|
|
33
|
-
> The plugin is primarily intended for
|
|
34
|
-
> any Lucide package using Vite
|
|
33
|
+
> The plugin is primarily intended for `@lucide/svelte`, but it works with
|
|
34
|
+
> any Lucide package using Vite.
|
|
35
|
+
> If it doesn't support a Lucide implementation,
|
|
36
|
+
> [please open an issue](https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess).
|
|
35
37
|
|
|
36
38
|
### Credits and opinion
|
|
37
39
|
|
|
38
|
-
I got the idea from [Phosphor Icons'
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
essentially the same).
|
|
40
|
+
I got the idea from [Phosphor Icons' optimizer](https://github.com/haruaki07/phosphor-svelte#import-optimizer).
|
|
41
|
+
However, this plugin is written from scratch and is not based on the Phosphor one, even though the technique is
|
|
42
|
+
essentially the same.
|
|
42
43
|
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
Contrary to the experimental version of Phosphor Icons' implementation, this plugin is
|
|
45
|
+
a Vite plugin and not a Svelte one, it is more generic and can be used with any framework.
|
|
46
|
+
Additionally, it doesn't suffer from the limitations of the Svelte plugin, preventing the old Phosphor
|
|
45
47
|
optimizer from working without disabling the native Vite optimizations of `phosphor-svelte`.
|
|
46
48
|
|
|
47
|
-
This should subjectively be a feature embedded in Lucide itself (
|
|
49
|
+
This should subjectively be a feature embedded in Lucide itself (`@lucide/svelte/preprocessor`),
|
|
48
50
|
but I don't know if it will ever be implemented.
|
|
49
51
|
[I opened an issue](https://github.com/lucide-icons/lucide/issues/2295) on the `lucide-icons` repository to discuss
|
|
50
52
|
this.
|
|
@@ -75,7 +77,7 @@ import { defineConfig } from "vite";
|
|
|
75
77
|
import lucidePreprocess from "vite-plugin-lucide-preprocess";
|
|
76
78
|
|
|
77
79
|
export default defineConfig({
|
|
78
|
-
|
|
80
|
+
plugins: [lucidePreprocess() /* , ... */]
|
|
79
81
|
});
|
|
80
82
|
```
|
|
81
83
|
|
package/dist/plugin.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
/** @typedef {{ name: string; importName: string }} Module */
|
|
1
2
|
/**
|
|
2
3
|
* Converts a raw string of imported icons to a list of module names,
|
|
3
4
|
* and a list of TypeScript types
|
|
4
5
|
* @param rawModules {string} The raw string of imported icons
|
|
5
|
-
* @return {[
|
|
6
|
+
* @return {[Module[], string[]]} A list containing a list of imported icons,
|
|
6
7
|
* and a list of TypeScript types
|
|
7
8
|
*/
|
|
8
|
-
export function rawModulesToLists(rawModules: string): [
|
|
9
|
+
export function rawModulesToLists(rawModules: string): [Module[], string[]];
|
|
9
10
|
/**
|
|
10
11
|
* Converts a PascalCase icon component name to a dashed string
|
|
11
12
|
* (e.g. `IconComp` to `icon-comp`)
|
|
@@ -27,6 +28,10 @@ export function frameworkImportPath(framework: string, options: Options): string
|
|
|
27
28
|
*/
|
|
28
29
|
export function plugin(options?: Options): import("vite").Plugin;
|
|
29
30
|
export const importsMatcher: RegExp;
|
|
31
|
+
export type Module = {
|
|
32
|
+
name: string;
|
|
33
|
+
importName: string;
|
|
34
|
+
};
|
|
30
35
|
export type Options = {
|
|
31
36
|
/**
|
|
32
37
|
* The import type for React
|
package/dist/plugin.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.js"],"names":[],"mappings":"AAKA,6DAA6D;AAE7D;;;;;;GAMG;AACH,8CAJsB,MAAM,GAChB,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAiB/B;AAED;;;;;GAKG;AACH,4CAHqB,MAAM,GACf,MAAM,CAgBjB;AAED;;;;;GAKG;AACH,+CAJqB,MAAM,WACR,OAAO,GACd,MAAM,CAYjB;AAkBD;;;;GAIG;AACH,iCAHmB,OAAO,GACd,OAAO,MAAM,EAAE,MAAM,CAgDhC;AAnED,oCACyF;qBAlE3E;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE"}
|
package/dist/plugin.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import renamedReplacementsModules from "./renamedReplacements.js";
|
|
2
|
+
import MagicString from "magic-string";
|
|
2
3
|
const ignoredPaths = ["/node_modules/", "/.svelte-kit/"];
|
|
4
|
+
/** @typedef {{ name: string; importName: string }} Module */
|
|
3
5
|
/**
|
|
4
6
|
* Converts a raw string of imported icons to a list of module names,
|
|
5
7
|
* and a list of TypeScript types
|
|
6
8
|
* @param rawModules {string} The raw string of imported icons
|
|
7
|
-
* @return {[
|
|
9
|
+
* @return {[Module[], string[]]} A list containing a list of imported icons,
|
|
8
10
|
* and a list of TypeScript types
|
|
9
11
|
*/
|
|
10
12
|
export function rawModulesToLists(rawModules) {
|
|
@@ -13,7 +15,12 @@ export function rawModulesToLists(rawModules) {
|
|
|
13
15
|
.map(m => m.trim())
|
|
14
16
|
.filter(m => !!m);
|
|
15
17
|
return [
|
|
16
|
-
raw
|
|
18
|
+
raw
|
|
19
|
+
.filter(m => !m.startsWith("type "))
|
|
20
|
+
.map(m => {
|
|
21
|
+
const [original, newName] = m.split(" as ");
|
|
22
|
+
return { name: newName ?? original, importName: original };
|
|
23
|
+
}),
|
|
17
24
|
raw.filter(m => m.startsWith("type ")).map(m => m.slice(5))
|
|
18
25
|
];
|
|
19
26
|
}
|
|
@@ -80,31 +87,34 @@ export function plugin(options = defaultOptions) {
|
|
|
80
87
|
transform: (code, path) => {
|
|
81
88
|
if (ignoredPaths.some(p => path.includes(p)))
|
|
82
89
|
return;
|
|
90
|
+
const s = new MagicString(code);
|
|
91
|
+
s.replace(importsMatcher,
|
|
92
|
+
/**
|
|
93
|
+
* @param _ The whole matched string
|
|
94
|
+
* @param initialSpacing {string} The spacing before the matched import statement
|
|
95
|
+
* @param modulesStr {string} The imported icons as a raw string
|
|
96
|
+
* @param quote {string} The quote used in the import statement (either ' or ")
|
|
97
|
+
* @param importStyle {string} The method the icons are imported with
|
|
98
|
+
* @param framework {string} The framework the icons are imported for
|
|
99
|
+
* @param lineEnding {string} The end of the line of the matched import statement (often a semicolon)
|
|
100
|
+
* @return The optimized import statement(s)
|
|
101
|
+
*/
|
|
102
|
+
(_, initialSpacing, modulesStr, quote, importStyle, framework, lineEnding) => {
|
|
103
|
+
const [modules, types] = rawModulesToLists(modulesStr);
|
|
104
|
+
const moduleImports = modules
|
|
105
|
+
.map(m => `${initialSpacing}import ${m.name} from ${quote}${importStyle}${framework}${frameworkImportPath(framework, mergedOptions)}${iconCompToDashed(m.importName)}${quote}${lineEnding.trimEnd()}`)
|
|
106
|
+
.join(initialSpacing.includes("\n") ? "" : "\n");
|
|
107
|
+
const typesImport = `${initialSpacing}import type { ${types.join(", ")} } from ${quote}${importStyle}${framework}${quote}${lineEnding.trimEnd()}`;
|
|
108
|
+
return [
|
|
109
|
+
types.length ? typesImport : undefined,
|
|
110
|
+
modules.length ? moduleImports : undefined
|
|
111
|
+
]
|
|
112
|
+
.filter(Boolean)
|
|
113
|
+
.join(initialSpacing.includes("\n") ? "" : "\n");
|
|
114
|
+
});
|
|
83
115
|
return {
|
|
84
|
-
code:
|
|
85
|
-
|
|
86
|
-
* @param _ The whole matched string
|
|
87
|
-
* @param initialSpacing {string} The spacing before the matched import statement
|
|
88
|
-
* @param modulesStr {string} The imported icons as a raw string
|
|
89
|
-
* @param quote {string} The quote used in the import statement (either ' or ")
|
|
90
|
-
* @param importStyle {string} The method the icons are imported with
|
|
91
|
-
* @param framework {string} The framework the icons are imported for
|
|
92
|
-
* @param lineEnding {string} The end of the line of the matched import statement (often a semicolon)
|
|
93
|
-
* @return The optimized import statement(s)
|
|
94
|
-
*/
|
|
95
|
-
(_, initialSpacing, modulesStr, quote, importStyle, framework, lineEnding) => {
|
|
96
|
-
const [modules, types] = rawModulesToLists(modulesStr);
|
|
97
|
-
const moduleImports = modules
|
|
98
|
-
.map(m => `${initialSpacing}import ${m} from ${quote}${importStyle}${framework}${frameworkImportPath(framework, mergedOptions)}${iconCompToDashed(m)}${quote}${lineEnding.trimEnd()}`)
|
|
99
|
-
.join(initialSpacing.includes("\n") ? "" : "\n");
|
|
100
|
-
const typesImport = `${initialSpacing}import type { ${types.join(", ")} } from ${quote}${importStyle}${framework}${quote}${lineEnding.trimEnd()}`;
|
|
101
|
-
return [
|
|
102
|
-
types.length ? typesImport : undefined,
|
|
103
|
-
modules.length ? moduleImports : undefined
|
|
104
|
-
]
|
|
105
|
-
.filter(Boolean)
|
|
106
|
-
.join(initialSpacing.includes("\n") ? "" : "\n");
|
|
107
|
-
})
|
|
116
|
+
code: s.toString(),
|
|
117
|
+
map: s.generateMap({ hires: "boundary", source: path })
|
|
108
118
|
};
|
|
109
119
|
}
|
|
110
120
|
};
|
package/dist/plugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.js"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.js"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vite-plugin-lucide-preprocess",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"author": {
|
|
5
5
|
"url": "https://github.com/WarningImHack3r",
|
|
6
6
|
"name": "WarningImHack3r"
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"license": "MIT",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess"
|
|
11
|
+
"url": "git+https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess.git"
|
|
12
12
|
},
|
|
13
13
|
"keywords": [
|
|
14
14
|
"vite",
|
|
@@ -31,12 +31,13 @@
|
|
|
31
31
|
"vite": ">=5"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"lucide-svelte": "^0.
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
34
|
+
"lucide-svelte": "^0.525.0",
|
|
35
|
+
"magic-string": "^0.30.0",
|
|
36
|
+
"prettier": "^3.0.0",
|
|
37
|
+
"publint": "^0.3.0",
|
|
38
|
+
"typescript": "^5.0.0",
|
|
39
|
+
"vite": "^7.0.0",
|
|
40
|
+
"vitest": "^3.0.0"
|
|
40
41
|
},
|
|
41
42
|
"main": "./dist/index.js",
|
|
42
43
|
"types": "./dist/index.d.ts",
|