fect-org / fect

Minimalist UI components built on Vue-next
https://www.fect-org.com
MIT License
362 stars 45 forks source link

[Feature]: Is it possible to provide a resolver for unplugin-auto-import #260

Closed QiYuOr2 closed 1 year ago

QiYuOr2 commented 1 year ago

Feature request 🚀

Now I need to write the resolver manually, but I don't know if the code is wrong

function FectUiResolver(): ComponentResolver {
  return {
    type: 'component',
    resolve: (name: string) => {
      if (name.match(/^(Fe[A-Z]|fe-[a-z])/)) {
        return {
          name: name.replace(/^(Fe|fe-)/, ''),
          from: '@fect-ui/vue'
        };
      }
    }
  };
}

Expected:

Examples:

import FectUiResolver from '@fect-ui/vue/resolver'

// config
{
    plugins: [
      AutoImport({
        resolvers: [FectUiResolver()]
      }),
      Components({
        resolvers: [FectUiResolver()]
      }),
    ]
 }
nonzzz commented 1 year ago

emmm.Are you have the error log ?

nonzzz commented 1 year ago

I think you want to write a unplugin-vue-components resolver?

QiYuOr2 commented 1 year ago

I think you want to write a unplugin-vue-components resolver?

Yes, but some component styles are not loaded, such as <fe-input-number>

image
QiYuOr2 commented 1 year ago

my config

import { createStyleImportPlugin } from 'vite-plugin-style-import';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ComponentResolver } from 'unplugin-vue-components/types';

function FectUiResolver(): ComponentResolver {
  return {
    type: 'component',
    resolve: (name: string) => {
      if (name.match(/^(Fe[A-Z]|fe-[a-z])/)) {
        return {
          name: name.replace(/^(Fe|fe-)/, ''),
          from: '@fect-ui/vue'
        };
      }
    }
  };
}

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  vite: {
    plugins: [
      AutoImport({
        resolvers: [FectUiResolver()]
      }),
      Components({
        resolvers: [FectUiResolver()]
      }),
      createStyleImportPlugin({
        libs: [
          {
            libraryName: '@fect-ui/vue',
            esModule: true,
            resolveStyle: (name) => {
              return `@fect-ui/vue/dist/esm/${name}/style`;
            }
          }
        ]
      })
    ]
  },
  build: {
    transpile: ['@fect-ui/vue']
  }
});
nonzzz commented 1 year ago

May be you should import import '@fect-ui/themes' in your appp entry? @QiYuOr2

QiYuOr2 commented 1 year ago

That's right, it was fixed after import @fect-ui/theme. I'm sorry I forgot this

nonzzz commented 1 year ago

Details see document