feat: nuxt auto-import selected components (#492)

* feat: select components to auto-import * fix: uncapitalize components keys
unovue · Nov 3, 2023 · 0bc37e7 · 0bc37e7
1 parent 9526356
commit 0bc37e7
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 36 deletions.
diff --git a/packages/plugins/src/nuxt/index.ts b/packages/plugins/src/nuxt/index.ts
@@ -1,9 +1,10 @@
 import { addComponent, defineNuxtModule } from '@nuxt/kit'
 
 import type { } from '@nuxt/schema' // workaround for TS bug with "phantom" deps
-import * as components from 'radix-vue'
+import { components as allComponents } from '../../../radix-vue/constant/components'
 
 export interface ModuleOptions {
+  components: Partial<Record<keyof typeof allComponents, boolean>> | boolean
   prefix: string
 }
 
@@ -17,9 +18,23 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {
     prefix: '',
+    components: true,
   },
   setup(options) {
-    for (const component of Object.keys(components)) {
+    function getComponents() {
+      if (typeof options.components === 'object') {
+        return Object.entries(allComponents)
+          .filter(([name]) => (options.components as Record<string, boolean>)[name])
+          .flatMap(([_, components]) => components)
+      }
+
+      if (options.components)
+        return Object.values(allComponents).flat()
+
+      return []
+    }
+
+    for (const component of getComponents()) {
       addComponent({
         name: `${options.prefix}${component}`,
         export: component,

diff --git a/packages/plugins/src/resolver/index.ts b/packages/plugins/src/resolver/index.ts
@@ -16,7 +16,7 @@ export default function (options: ResolverOptions = {}): ComponentResolver {
   return {
     type: 'component',
     resolve: (name: string) => {
-      if (name.startsWith(prefix)) {
+      if (name.toLowerCase().startsWith(prefix.toLowerCase())) {
         const componentName = name.substring(prefix.length)
         if (Object.values(components).flat().includes(componentName)) {
           return {

diff --git a/packages/radix-vue/constant/components.ts b/packages/radix-vue/constant/components.ts
@@ -1,24 +1,24 @@
 export const components = {
-  Accordion: [
+  accordion: [
     'AccordionContent',
     'AccordionHeader',
     'AccordionItem',
     'AccordionRoot',
     'AccordionTrigger',
   ],
 
-  Checkbox: [
+  checkbox: [
     'CheckboxRoot',
     'CheckboxIndicator',
   ],
 
-  Collapsible: [
+  collapsible: [
     'CollapsibleRoot',
     'CollapsibleTrigger',
     'CollapsibleContent',
   ],
 
-  Combobox: [
+  combobox: [
     'ComboboxRoot',
     'ComboboxInput',
     'ComboboxAnchor',
@@ -36,54 +36,54 @@ export const components = {
     'ComboboxPortal',
   ],
 
-  Switch: [
+  switch: [
     'SwitchRoot',
     'SwitchThumb',
   ],
 
-  Separator: [
+  separator: [
     'Separator',
   ],
 
-  Label: [
+  label: [
     'Label',
   ],
 
-  Toggle: [
+  toggle: [
     'Toggle',
   ],
 
-  ToggleGroup: [
+  toggleGroup: [
     'ToggleGroupRoot',
     'ToggleGroupItem',
   ],
 
-  AspectRatio: [
+  aspectRatio: [
     'AspectRatio',
   ],
 
-  Tabs: [
+  tabs: [
     'TabsRoot',
     'TabsList',
     'TabsContent',
     'TabsTrigger',
   ],
 
-  Slider: [
+  slider: [
     'SliderRoot',
     'SliderThumb',
     'SliderTrack',
     'SliderRange',
   ],
 
-  RadioGroup: [
+  radioGroup: [
     'RadioGroupRoot',
     'RadioGroupItem',
     'RadioGroupIndicator',
 
   ],
 
-  Pagination: [
+  pagination: [
     'PaginationRoot',
     'PaginationEllipsis',
     'PaginationFirst',
@@ -94,12 +94,12 @@ export const components = {
     'PaginationPrev',
   ],
 
-  Progress: [
+  progress: [
     'ProgressRoot',
     'ProgressIndicator',
   ],
 
-  Dialog: [
+  dialog: [
     'DialogRoot',
     'DialogTrigger',
     'DialogPortal',
@@ -110,7 +110,7 @@ export const components = {
     'DialogDescription',
   ],
 
-  AlertDialog: [
+  alertDialog: [
     'AlertDialogRoot',
     'AlertDialogTrigger',
     'AlertDialogPortal',
@@ -122,7 +122,7 @@ export const components = {
     'AlertDialogAction',
   ],
 
-  Toast: [
+  toast: [
     'ToastProvider',
     'ToastRoot',
     'ToastAction',
@@ -132,7 +132,7 @@ export const components = {
     'ToastDescription',
   ],
 
-  Toolbar: [
+  toolbar: [
     'ToolbarRoot',
     'ToolbarButton',
     'ToolbarLink',
@@ -141,13 +141,13 @@ export const components = {
     'ToolbarSeparator',
   ],
 
-  Avatar: [
+  avatar: [
     'AvatarRoot',
     'AvatarImage',
     'AvatarFallback',
   ],
 
-  Tooltip: [
+  tooltip: [
     'TooltipRoot',
     'TooltipTrigger',
     'TooltipContent',
@@ -156,15 +156,15 @@ export const components = {
     'TooltipProvider',
   ],
 
-  HoverCard: [
+  hoverCard: [
     'HoverCardRoot',
     'HoverCardTrigger',
     'HoverCardPortal',
     'HoverCardContent',
     'HoverCardArrow',
   ],
 
-  Popover: [
+  popover: [
     'PopoverRoot',
     'PopoverTrigger',
     'PopoverPortal',
@@ -174,7 +174,7 @@ export const components = {
     'PopoverAnchor',
   ],
 
-  DropdownMenu: [
+  dropdownMenu: [
     'DropdownMenuRoot',
     'DropdownMenuTrigger',
     'DropdownMenuPortal',
@@ -193,7 +193,7 @@ export const components = {
     'DropdownMenuSubTrigger',
   ],
 
-  ContextMenu: [
+  contextMenu: [
     'ContextMenuRoot',
     'ContextMenuTrigger',
     'ContextMenuPortal',
@@ -212,7 +212,7 @@ export const components = {
     'ContextMenuSubTrigger',
   ],
 
-  Select: [
+  select: [
     'SelectRoot',
     'SelectTrigger',
     'SelectPortal',
@@ -231,7 +231,7 @@ export const components = {
     'SelectIcon',
   ],
 
-  Menubar: [
+  menubar: [
     'MenubarRoot',
     'MenubarTrigger',
     'MenubarPortal',
@@ -251,7 +251,7 @@ export const components = {
     'MenubarMenu',
   ],
 
-  NavigationMenu: [
+  navigationMenu: [
     'NavigationMenuContent',
     'NavigationMenuIndicator',
     'NavigationMenuItem',
@@ -263,30 +263,30 @@ export const components = {
     'NavigationMenuViewport',
   ],
 
-  ScrollArea: [
+  scrollArea: [
     'ScrollAreaRoot',
     'ScrollAreaViewport',
     'ScrollAreaScrollbar',
     'ScrollAreaThumb',
     'ScrollAreaCorner',
   ],
 
-  ConfigProvider: [
+  configProvider: [
     'ConfigProvider',
   ],
 
-  Primitive: [
+  primitive: [
     'Primitive',
     'Slot',
   ],
 
-  VisuallyHidden: [
+  visuallyHidden: [
     'VisuallyHidden',
   ],
 }
 
 export const utilities = {
-  Utilities: [
+  utilities: [
     'useId',
     'useEmitAsProps',
     'useForwardProps',

diff --git a/playground/nuxt/nuxt.config.ts b/playground/nuxt/nuxt.config.ts
@@ -7,4 +7,7 @@ export default defineNuxtConfig({
       path: '../../docs/components/demo',
     },
   ],
+  radix: {
+    components: true,
+  },
 })