use the new internal render api (Vue)

tailwindlabs · Apr 4, 2021 · afb7ffc · afb7ffc
1 parent 14a88aa
commit afb7ffc
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 17 deletions.
diff --git a/packages/@headlessui-vue/src/components/description/description.ts b/packages/@headlessui-vue/src/components/description/description.ts
@@ -82,6 +82,7 @@ export let Description = defineComponent({
       slot: this.slot,
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'Description',
     })
   },
   setup() {

diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -117,6 +117,7 @@ export let Dialog = defineComponent({
                     slots: this.$slots,
                     visible: open,
                     features: Features.RenderStrategy | Features.Static,
+                    name: 'Dialog',
                   }),
                 ]),
               ]),
@@ -297,6 +298,7 @@ export let DialogOverlay = defineComponent({
       slot: { open: api.dialogState.value === DialogStates.Open },
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'DialogOverlay',
     })
   },
   setup() {
@@ -329,6 +331,7 @@ export let DialogTitle = defineComponent({
       slot: { open: api.dialogState.value === DialogStates.Open },
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'DialogTitle',
     })
   },
   setup() {

diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.ts
@@ -63,7 +63,7 @@ export let Disclosure = defineComponent({
 
     return () => {
       let slot = { open: disclosureState.value === DisclosureStates.Open }
-      return render({ props: passThroughProps, slot, slots, attrs })
+      return render({ props: passThroughProps, slot, slots, attrs, name: 'Disclosure' })
     }
   },
 })
@@ -94,6 +94,7 @@ export let DisclosureButton = defineComponent({
       slot,
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'DisclosureButton',
     })
   },
   setup(props) {
@@ -145,6 +146,7 @@ export let DisclosurePanel = defineComponent({
       slots: this.$slots,
       features: Features.RenderStrategy | Features.Static,
       visible: slot.open,
+      name: 'DisclosurePanel',
     })
   },
   setup() {

diff --git a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts
@@ -27,6 +27,7 @@ export let FocusTrap = defineComponent({
       slot,
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'FocusTrap',
     })
   },
   setup(props) {

diff --git a/packages/@headlessui-vue/src/components/label/label.ts b/packages/@headlessui-vue/src/components/label/label.ts
@@ -74,6 +74,7 @@ export let Label = defineComponent({
       slot: {},
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'Label',
     })
   },
   setup() {

diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -197,7 +197,7 @@ export let Listbox = defineComponent({
 
     return () => {
       let slot = { open: listboxState.value === ListboxStates.Open, disabled }
-      return render({ props: passThroughProps, slot, slots, attrs })
+      return render({ props: passThroughProps, slot, slots, attrs, name: 'Listbox' })
     }
   },
 })
@@ -218,6 +218,7 @@ export let ListboxLabel = defineComponent({
       slot,
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'ListboxLabel',
     })
   },
   setup() {
@@ -265,6 +266,7 @@ export let ListboxButton = defineComponent({
       slot,
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'ListboxButton',
     })
   },
   setup() {
@@ -347,6 +349,7 @@ export let ListboxOptions = defineComponent({
       slots: this.$slots,
       features: Features.RenderStrategy | Features.Static,
       visible: slot.open,
+      name: 'ListboxOptions',
     })
   },
   setup() {
@@ -520,7 +523,13 @@ export let ListboxOption = defineComponent({
         onMouseleave: handleLeave,
       }
 
-      return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })
+      return render({
+        props: { ...props, ...propsWeControl },
+        slot,
+        attrs,
+        slots,
+        name: 'ListboxOption',
+      })
     }
   },
 })
diff --git a/packages/@headlessui-vue/src/components/menu/menu.test.tsx b/packages/@headlessui-vue/src/components/menu/menu.test.tsx
@@ -164,8 +164,20 @@ describe('Rendering', () => {
               </MenuItems>
             </Menu>
           `)
-        ).toThrowErrorMatchingInlineSnapshot(
-          `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
+        ).toThrowError(
+          new Error(
+            [
+              'Passing props on "Fragment"!',
+              '',
+              'The current component <Menu /> is rendering a "Fragment".',
+              'However we need to passthrough the following props:',
+              '  - class',
+              '',
+              'You can apply a few solutions:',
+              '  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',
+              '  - Render a single element as the child so that we can forward the props onto that element.',
+            ].join('\n')
+          )
         )
       })
     )
@@ -289,8 +301,28 @@ describe('Rendering', () => {
               </MenuItems>
             </Menu>
           `)
-        ).toThrowErrorMatchingInlineSnapshot(
-          `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
+        ).toThrowError(
+          new Error(
+            [
+              'Passing props on "Fragment"!',
+              '',
+              'The current component <MenuButton /> is rendering a "Fragment".',
+              'However we need to passthrough the following props:',
+              '  - disabled',
+              '  - ref',
+              '  - id',
+              '  - type',
+              '  - aria-haspopup',
+              '  - aria-controls',
+              '  - aria-expanded',
+              '  - onKeydown',
+              '  - onClick',
+              '',
+              'You can apply a few solutions:',
+              '  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',
+              '  - Render a single element as the child so that we can forward the props onto that element.',
+            ].join('\n')
+          )
         )
       })
     )
@@ -370,8 +402,24 @@ describe('Rendering', () => {
           </Menu>
         `,
         errorCaptured(err: unknown) {
-          expect((err as Error).message).toMatchInlineSnapshot(
-            `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
+          expect((err as Error).message).toEqual(
+            [
+              'Passing props on "Fragment"!',
+              '',
+              'The current component <MenuItems /> is rendering a "Fragment".',
+              'However we need to passthrough the following props:',
+              '  - aria-activedescendant',
+              '  - aria-labelledby',
+              '  - id',
+              '  - onKeydown',
+              '  - role',
+              '  - tabIndex',
+              '  - ref',
+              '',
+              'You can apply a few solutions:',
+              '  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',
+              '  - Render a single element as the child so that we can forward the props onto that element.',
+            ].join('\n')
           )
           return false
         },
@@ -517,8 +565,29 @@ describe('Rendering', () => {
           </Menu>
         `,
         errorCaptured(err: unknown) {
-          expect((err as Error).message).toMatchInlineSnapshot(
-            `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
+          expect((err as Error).message).toEqual(
+            [
+              'Passing props on "Fragment"!',
+              '',
+              'The current component <MenuItem /> is rendering a "Fragment".',
+              'However we need to passthrough the following props:',
+              '  - disabled',
+              '  - id',
+              '  - role',
+              '  - tabIndex',
+              '  - class',
+              '  - aria-disabled',
+              '  - onClick',
+              '  - onFocus',
+              '  - onPointermove',
+              '  - onMousemove',
+              '  - onPointerleave',
+              '  - onMouseleave',
+              '',
+              'You can apply a few solutions:',
+              '  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',
+              '  - Render a single element as the child so that we can forward the props onto that element.',
+            ].join('\n')
           )
 
           return false

diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -63,6 +63,7 @@ function useMenuContext(component: string) {
 }
 
 export let Menu = defineComponent({
+  name: 'Menu',
   props: { as: { type: [Object, String], default: 'template' } },
   setup(props, { slots, attrs }) {
     let menuState = ref<StateDefinition['menuState']['value']>(MenuStates.Closed)
@@ -154,12 +155,13 @@ export let Menu = defineComponent({
 
     return () => {
       let slot = { open: menuState.value === MenuStates.Open }
-      return render({ props, slot, slots, attrs })
+      return render({ props, slot, slots, attrs, name: 'Menu' })
     }
   },
 })
 
 export let MenuButton = defineComponent({
+  name: 'MenuButton',
   props: {
     disabled: { type: Boolean, default: false },
     as: { type: [Object, String], default: 'button' },
@@ -184,6 +186,7 @@ export let MenuButton = defineComponent({
       slot,
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'MenuButton',
     })
   },
   setup(props) {
@@ -241,6 +244,7 @@ export let MenuButton = defineComponent({
 })
 
 export let MenuItems = defineComponent({
+  name: 'MenuItems',
   props: {
     as: { type: [Object, String], default: 'div' },
     static: { type: Boolean, default: false },
@@ -271,6 +275,7 @@ export let MenuItems = defineComponent({
       slots: this.$slots,
       features: Features.RenderStrategy | Features.Static,
       visible: slot.open,
+      name: 'MenuItems',
     })
   },
   setup() {
@@ -369,6 +374,7 @@ export let MenuItems = defineComponent({
 })
 
 export let MenuItem = defineComponent({
+  name: 'MenuItem',
   props: {
     as: { type: [Object, String], default: 'template' },
     disabled: { type: Boolean, default: false },
@@ -443,7 +449,13 @@ export let MenuItem = defineComponent({
         onMouseleave: handleLeave,
       }
 
-      return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })
+      return render({
+        props: { ...props, ...propsWeControl },
+        slot,
+        attrs,
+        slots,
+        name: 'MenuItem',
+      })
     }
   },
 })
diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts
@@ -168,7 +168,7 @@ export let Popover = defineComponent({
 
     return () => {
       let slot = { open: popoverState.value === PopoverStates.Open }
-      return render({ props: passThroughProps, slot, slots, attrs })
+      return render({ props: passThroughProps, slot, slots, attrs, name: 'Popover' })
     }
   },
 })
@@ -207,6 +207,7 @@ export let PopoverButton = defineComponent({
       slot,
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'PopoverButton',
     })
   },
   setup(props) {
@@ -371,6 +372,7 @@ export let PopoverOverlay = defineComponent({
       slots: this.$slots,
       features: Features.RenderStrategy | Features.Static,
       visible: slot.open,
+      name: 'PopoverOverlay',
     })
   },
   setup() {
@@ -412,6 +414,7 @@ export let PopoverPanel = defineComponent({
       slots: this.$slots,
       features: Features.RenderStrategy | Features.Static,
       visible: slot.open,
+      name: 'PopoverPanel',
     })
   },
   setup(props) {
@@ -523,6 +526,7 @@ export let PopoverGroup = defineComponent({
       slot: {},
       attrs: this.$attrs,
       slots: this.$slots,
+      name: 'PopoverGroup',
     })
   },
   setup() {

diff --git a/packages/@headlessui-vue/src/components/portal/portal.ts b/packages/@headlessui-vue/src/components/portal/portal.ts
@@ -67,7 +67,7 @@ export let Portal = defineComponent({
       if (myTarget.value === null) return null
       return h(StackProvider, {}, () => [
         h(Teleport, { to: myTarget.value }, [
-          h('div', { ref: element }, [render({ props, slot: {}, attrs, slots })]),
+          h('div', { ref: element }, [render({ props, slot: {}, attrs, slots, name: 'Portal' })]),
         ]),
       ])
     }
@@ -98,7 +98,7 @@ export let PortalGroup = defineComponent({
     return () => {
       let { target: _, ...passThroughProps } = props
 
-      return render({ props: passThroughProps, slot: {}, attrs, slots })
+      return render({ props: passThroughProps, slot: {}, attrs, slots, name: 'PortalGroup' })
     }
   },
 })
diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts
@@ -83,6 +83,7 @@ export let RadioGroup = defineComponent({
           slot: {},
           attrs: this.$attrs,
           slots: this.$slots,
+          name: 'RadioGroup',
         }),
       ]),
     ])
@@ -264,6 +265,7 @@ export let RadioGroupOption = defineComponent({
           slot,
           attrs: this.$attrs,
           slots: this.$slots,
+          name: 'RadioGroupOption',
         }),
       ]),
     ])