carbon-design-system/carbon-preprocess-svelte

Can't see a way to optimize imports when not importing in a svelte file

Perturbatio opened this issue · 9 comments

I'm working on a sveltekit project using TypeScript, I have a library that generates data for navigation and this includes icons for some of the items.

If I import the icon in the same fashion as in a svelte file, you get the same problem that would occur when not using optimizeImports in your preprocess section (i.e. a huge number of carbon components all being requested .

Currently my workaround is to use import Home16 from 'carbon-icons-svelte/lib/Home16/Home16.svelte' rather than the nicer import Home16 from 'carbon-icons-svelte'.

Is it there an optimizeNonSvelteFileImports equivalent?

I don't think 'carbon-icons-svelte/Home16' is a valid import.

The JS import path should be "carbon-icons-svelte/lib/Home16".

Just a typo, I manually typed this up. Updated my comment

you get the same problem that would occur when not using optimizeImports in your preprocess section

Are you using optimizeImports? It should automatically optimize imports from carbon-components-svelte, carbon-icons-svelte, and carbon-pictograms-svelte.

Yep, I'm using optimizeImports.

	preprocess: [
		sveltePreprocess({
			scss: {
				includePaths: ['src']
			},
			postcss: {
				plugins: [autoprefixer]
			}
		}),
		optimizeImports()
	]

The issue is I think that this isn't invoked when it's not parsing svelte files directly, I have a svelte file that references a store, the store references a service which will build a nav based on the current user and some other state related things.

Importing an icon in a .svelte file works fine, importing via the service causes extreme lag (unless I manually change the import to the full path)

With a brief look at the source, optimizeImports uses svelte's createPreprocessorFromVitePlugin to create a Preprocessor specifically for the svelte compiler. I think what I need is something that does the equivalent for TS / JS files.

With a brief look at the source, optimizeImports uses svelte's createPreprocessorFromVitePlugin

Could you clarify this?

Looking at /node_modules/carbon-preprocess-svelte/dist/index.js@22895 optimizeImports returns the result of the call to script

I assumed (probably incorrectly now that I look closer) that it used the script prop from createVitePreprocessorGroup, I am not overly familiar with the code so am most likely making bad assumptions.

In fact, I'm now assuming that's declaring a script method for the returned object which gets invoked by svelte's compiler at some point.

In fact, I'm now assuming that's declaring a script method for the returned object which gets invoked by svelte's compiler at some point.

This is the correct assumption.

The optimizeImports will preprocess script blocks: https://github.com/carbon-design-system/carbon-preprocess-svelte/blob/main/src/preprocessors/optimize-imports.ts#L13

Ok, in which case, what I need is a way to do the same for script files