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

[Perturbatio]

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?

[metonym]

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

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

[Perturbatio]

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

[metonym]

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.

[Perturbatio]

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.

[metonym]

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

Could you clarify this?

[Perturbatio]

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.

[metonym]

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

[Perturbatio]

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

[metonym]

Closing – Svelte preprocessors only run on Svelte files. Although the use case is valid, I believe this to be out of scope of the library for now.