Prefixed components and SvelteKit's routes being listed as able to be imported.

[Guz013]

Hi there! Recently, I've started using this plugin on my SvelteKit projects. And it seems odd that components dedicated to routing or simply named with + are listed as being possibly imported.

It's not possible to import said components because they aren't able to be call on the HTML, but maybe could cause problems in the future?

Also, because of this, the .d.ts file has it syntax highlight broken, at least on VS Code. But it doesn't seem to break its functionality:

I tried using a regex to exclude the SvelteKit's routes from being transformed and listed, but doing this removed the ability to auto-import components in said routes.

Maybe just removing components with special characters such as + from the .d.ts file could be a solution? If there's no issue, I could create a new Pull Request, [trying] fixing it this way.

Knowing it is already impossible to have a <+component/> in the HTML without a syntax error. At least it would remove the confusion for any new developer using or contributing to a repository using the plugin.

---

Temp fix?

If anyone also had this issue, a sort of “fix” that I used is transforming/removing the path from said components. So it is more explicit that these can't and shouldn't be imported:

```typescript /* vite.config.js */ import path from 'node:path'; export default defineConfig({ plugins: [ SvelteImport({ include: [ /\.svelte/, /\.svelte\?svelte/, ], importPathTransform: (importPath) => { // Probably it's better to replace it with a regex of special characters if (getFileName(importPath).includes('+')) return ''; else return importPath; }, }), // ... ] }); function getFileName(filePath: string): string { return path.basename(filePath).replace(path.extname(filePath), ''); } ``` Result `.d.ts` file: ```typescript // generated by unplugin-svelte-components // We suggest you to commit this file into source control declare global { const "+layout": typeof import("")["default"] const "+page": typeof import("")["default"] ```

[Mohamed-Kaizen]

Hi @Guz013, sorry for the delay.

I never thought anyone would tell this plugin to auto import components from src/routes folder or name there components with special characters.

I did release new version that should fix the issue, please try it and let me know if it works for you.

In the new version if you have components that have special characters in their names, the special characters will be removed and the component will be imported without them, for example if you have a component named +Component.svelte it will be imported as Component.svelte and if you have a component named @Component.svelte it will be imported as Component.svelte and so on.

For the src/routes folder case, now +page.svelte, +layout.svelte and +error.svelte will be ignored and not imported, the reason why it was not originally ignored is because when you place a component in src/routes these components are local components to that page and they are not global components, and in case if your component is a global component mostly like you will place it in src/components or src/lib folder, but I understand that you may want to place your global components in src/routes folder and that's why in the new version I added the ability to ignore page,layout and error files in src/routes folder.

[Guz013]

This was no delay, actually thank you very much for the quick response and fix! I'll upgrade and try this afternoon and notify you if it worked.

I stumbled on this issue before because I actually use this plugin to import everything from src/. Most of the time I have a lot of single-use-components for just one page/route, that it feels strange placing them on something like src/lib or src/components. And auto-importing them, besides making the code looks cleaner without the imports, also helps if I want to move said components to another directory.

So thank you very much! I'll update you soon when I'm able to test it.

[Guz013]

@Mohamed-Kaizen, it's fixed! The SvelteKit's routes are being as you said, and components with special characters are being renamed.

---

But it seems that I encountered another issue, unfortunately, but I'm not totally sure if it is on my end or the plugin's. I'll try to replicate it on a dedicated environment, and create a new issue if necessary. Thanks in advance already!

[Guz013]

@Mohamed-Kaizen, it's fixed! The SvelteKit's routes are being as you said, and components with special characters are being renamed.

But it seems that I encountered another issue, unfortunately, but I'm not totally sure if it is on my end or the plugin's. I'll try to replicate it on a dedicated environment, and create a new issue if necessary. Thanks in advance already!

Created issue #16 related to this.

Sorry for the inconvenience of two issues in a row, this plugin is really useful to me. I really appreciate that you created it, and end up using it in all my current projects, and really want to add it to a template of my workflow. If necessary or there's no issue, I would like to contribute to it somehow.

[Mohamed-Kaizen]

Am glad to hear the issue has been resolved :).

Don't worry about opening two issue in row, in fact if you find any issue ....feel free to open a new GitHub issue, b/c this help anyone who are using or will be use this plugin, i will check the new issue as soon as can