From 500c333652bfabc18569b68fe2fe944d985e4eba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= Date: Thu, 29 Feb 2024 23:35:30 +0000 Subject: [PATCH 1/3] feat(resolver): enable namespaced components Signed-off-by: GitHub --- packages/plugins/src/resolver/index.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/plugins/src/resolver/index.ts b/packages/plugins/src/resolver/index.ts index 998b78041..6b890b522 100644 --- a/packages/plugins/src/resolver/index.ts +++ b/packages/plugins/src/resolver/index.ts @@ -1,5 +1,6 @@ import { type ComponentResolver } from 'unplugin-vue-components' import { components } from '../../../radix-vue/constant/components' +import * as NamespacedComponents from '../namespaced' export interface ResolverOptions { /** @@ -8,20 +9,28 @@ export interface ResolverOptions { * @defaultValue "" */ prefix?: string + /** + * Enable the use of namespaced components + * + * @defaultValue false + */ + namespaced?: boolean } export default function (options: ResolverOptions = {}): ComponentResolver { - const { prefix = '' } = options + const { prefix = '', namespaced = false } = options return { type: 'component', resolve: (name: string) => { if (name.toLowerCase().startsWith(prefix.toLowerCase())) { - const componentName = name.substring(prefix.length) - if (Object.values(components).flat().includes(componentName)) { + const componentName = name.substring(prefix.length).split('.')[0] + const isNamespacedComponent = Object.keys(NamespacedComponents).includes(componentName) + const isComponent = Object.values(components).flat().includes(componentName) + if (isNamespacedComponent || isComponent) { return { name: componentName, - from: 'radix-vue', + from: isNamespacedComponent && namespaced ? 'radix-vue/namespaced' : 'radix-vue', } } } From 286e26e07442d7a4a774da619697eb460424cd46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= Date: Wed, 20 Mar 2024 14:57:44 +0000 Subject: [PATCH 2/3] docs(installation): add namespaced components info to the resolver Signed-off-by: GitHub --- docs/content/overview/installation.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/content/overview/installation.md b/docs/content/overview/installation.md index 1646e145e..274c8f386 100644 --- a/docs/content/overview/installation.md +++ b/docs/content/overview/installation.md @@ -33,6 +33,8 @@ Radix Vue also has resolver for the popular [unplugin-vue-components](https://gi In `vite.config.ts`, import `radix-vue/resolver`, and configure as such and it will auto-imports all the components from Radix Vue. +You can also use it for [Namespaced components](../guides/namespaced-components.md). + ```ts{2,10 } import Component from 'unplugin-vue-components/vite' import RadixVueResolver from 'radix-vue/resolver' @@ -46,7 +48,8 @@ export default defineConfig({ RadixVueResolver() // RadixVueResolver({ - // prefix: '' // use the prefix option to add Prefix to the imported components + // prefix: '', // use the prefix option to add Prefix to the imported components + // namespaced: false // set to true if you want to use namespaced components // }) ], }), From a37e25ea5abecf26e34566ec04601c5d7e2a7450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= Date: Wed, 27 Mar 2024 13:17:32 +0000 Subject: [PATCH 3/3] fix: key used in the type declaration Signed-off-by: GitHub --- packages/plugins/src/resolver/index.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/plugins/src/resolver/index.ts b/packages/plugins/src/resolver/index.ts index 6b890b522..a6856f886 100644 --- a/packages/plugins/src/resolver/index.ts +++ b/packages/plugins/src/resolver/index.ts @@ -24,12 +24,14 @@ export default function (options: ResolverOptions = {}): ComponentResolver { type: 'component', resolve: (name: string) => { if (name.toLowerCase().startsWith(prefix.toLowerCase())) { - const componentName = name.substring(prefix.length).split('.')[0] - const isNamespacedComponent = Object.keys(NamespacedComponents).includes(componentName) - const isComponent = Object.values(components).flat().includes(componentName) + const componentName = name.split('.')[0] + const importName = componentName.substring(prefix.length) + const isNamespacedComponent = Object.keys(NamespacedComponents).includes(importName) + const isComponent = Object.values(components).flat().includes(importName) if (isNamespacedComponent || isComponent) { return { - name: componentName, + name: importName, + as: componentName, from: isNamespacedComponent && namespaced ? 'radix-vue/namespaced' : 'radix-vue', } }