-
-
Notifications
You must be signed in to change notification settings - Fork 447
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vite plugin for optimization #1944
Comments
I have not checked out if other packages than |
@david-plugge This is awesome thanks for sharing. Aliases could be a problem, but not in the way you described. We currently have alias imports for certain icons, sometimes we rename icons when needed, we solve this by exporting the "old" name. But I think we can fix this. |
@david-plugge thank you so much, this has solved my problem over at tabler icons: function tablerSvelteImportOptimizer(): import('vite').Plugin {
return {
name: 'tabler-svelte optimizer',
transform(code, id) {
const ms = new MagicString(code, { filename: id });
ms.replace(
/([ \t]*)import\s+\{([^;]*?)\}\s+from\s+['"]@tabler\/icons-svelte['"];/g,
(match, whitespace: string, importNames: string) => {
const hasSemi = match.endsWith(';');
const imports = importNames
.split(',')
.map((v) => v.trim())
.map((name) => {
const path = name;
return `${whitespace}import ${name} from '@tabler/icons-svelte/${path}.svelte'${hasSemi ? ';' : ''}`;
});
return imports.join('\n');
}
);
if (ms.hasChanged()) {
return {
code: ms.toString(),
map: ms.generateMap()
};
}
}
};
} |
cool plugin, I had to modify it a bit to get it to work with icons with numbers in them, as well as new lines within the import. function lucideSvelteImportOptimizer(): Plugin {
const aliases = readFileSync('node_modules/lucide-svelte/dist/aliases.d.ts', 'utf8');
return {
name: 'lucide-svelte optimizer',
transform(code, id) {
const ms = new MagicString(code, { filename: id });
ms.replace(
/([ \t]*)import\s+\{([^}]+)\}\s+from\s+["']lucide-svelte["'];/g,
(match, whitespace: string, importNames: string) => {
const hasSemi = match.endsWith(';');
const imports = importNames
.split(',')
.map((v) => v.trim())
.map((name) => {
let path;
const alias = aliases.match(
new RegExp(`as ${name} } from '\\.\\/icons\\/(.+)\\.svelte';`),
);
if (alias) {
path = alias[1]!;
} else {
path = name
.split('')
.map((c, i) => {
const code = c.charCodeAt(0);
return (code >= 65 && code <= 90) || (code >= 48 && code <= 57)
? (i === 0 ? '' : '-') + c.toLowerCase()
: c;
})
.join('');
}
return `${whitespace}import ${name} from 'lucide-svelte/icons/${path}'${hasSemi ? ';' : ''}`;
});
return imports.join('\n');
},
);
if (ms.hasChanged()) {
return {
code: ms.toString(),
map: ms.generateMap(),
};
}
},
};
} |
Package
Description
While the new way of importing components in svelte using the full path works pretty well to avoid annoyingly long vite optimizations, i think its just bad DX. So after a bit of playing around i came up with a vite plugin that solves this issue.
I did not yet test if it works with aliases (eg.
User as UserIcon
) with other than that it works pretty well!Use cases
Checklist
The text was updated successfully, but these errors were encountered: