Open pournasserian opened 1 year ago
@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.
@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.
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;
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)
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