Research on auto-import feature feasibility

[pournasserian]

https://www.reddit.com/r/sveltejs/comments/uz6tm3/auto_import_components_in_svelte_kit_weekly_svelte/?utm_medium=android_app&utm_source=share

https://github.com/yuanchuan/sveltekit-autoimport

[TheHadiAhmadi]

@pournasserian It is easy to use and We don't have problems with typescript, I added sveltekit-autoimport package in https://github.com/ubeac/ui-template repo here. sveltekit-autoimport is a vite plugin and works similar to a preprocessor, and only imports components that we used in our code.

[TheHadiAhmadi]

@pournasserian @mhmdtaherian please review https://github.com/ubeac/ui-template/pull/2 and see if does it worth using auto-import or not?

reduces at least 2 lines of code from each page file.

[TheHadiAhmadi]

we need to move this file here (ubeac/svelte) repo and add all other components.

also I have a suggestion, we can create a vite plugin to enable/disable autoImport, ifProcessor, eachProcessor, previewProcessor and more...

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

import ifProcessor from '@ubeac/svelte/preprocessors/if.js'
import eachProcessor from '@ubeac/svelte/preprocessors/each.js'

import autoImport from 'sveltekit-autoimport';

const config: UserConfig = {
  plugins: [
    autoImport({
      components: ['./src/components/page', '@ubeac/svelte/components'],
    }),
    ifProcessor(),
    eachProcessor(),
    sveltekit(),
  ]
};

export default config;

After:

import ubeac from '@ubeac/svelte/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
  plugins: [
    ubeac({
      autoImport: { 
        components: [
          './src/components/page', // '@ubeac/svelte/components' should be enabled by default 
        ] 
      },
      if: true, // default is true
      each: false // we can also disable some of these features
    })
  ]
};

export default config;

[TheHadiAhmadi]

Also there is another package called unplugin-auto-import which can also generate .d.ts files, but it doesn't work in .svelte files. We can use both of these packages to have auto generated .d.ts file and have benefits of sveltekit-autoimport.

I updated the PR https://github.com/ubeac/ui-template/pull/2 and now it should support all @ubeac/svelte components

one problem of using auto-import feature is that if we have custom component in our local repo, the component which comes from @ubeac/svelte is prefered.

for example we have Page component in @ubeac/svelte, and also in src/components/page/Page.svelte, we need to disable the component from @ubeac/svelte and register our custom src/components/page/Page.svelte component

(we can have an excluded option for ubeac plugin)