skip the Provider component and simplify context (#315)

I was on a walk, and I realised that in Vue you can just call
provide(Symbol, context), which means that a hook like `useLabels` can
just provide context...

This simplifies a lot!

Author: RobinMalfait

packages/@headlessui-vue/src/components/description/description.test.ts

@@ -1,10 +1,12 @@
-import { defineComponent, h, nextTick } from 'vue'
+import { defineComponent, h, nextTick, ref } from 'vue'
 import prettier from 'prettier'
 
 import { render } from '../../test-utils/vue-testing-library'
 import { Description, useDescriptions } from './description'
 
 import { html } from '../../test-utils/html'
+import { click } from '../../test-utils/interactions'
+import { getByText } from '../../test-utils/accessibility-assertions'
 
 function format(input: Element | string) {
   let contents = (typeof input === 'string' ? input : (input as HTMLElement).outerHTML).trim()
@@ -36,18 +38,14 @@ function renderTemplate(input: string | Partial<Parameters<typeof defineComponen
   )
 }
 
-it('should be possible to use a DescriptionProvider without using a Description', async () => {
+it('should be possible to use useDescriptions without using a Description', async () => {
   let { container } = renderTemplate({
     render() {
-      return h('div', [
-        h(this.DescriptionProvider, () => [
-          h('div', { 'aria-describedby': this.describedby }, ['No description']),
-        ]),
-      ])
+      return h('div', [h('div', { 'aria-describedby': this.describedby }, ['No description'])])
     },
     setup() {
-      let [describedby, DescriptionProvider] = useDescriptions()
-      return { describedby, DescriptionProvider }
+      let describedby = useDescriptions()
+      return { describedby }
     },
   })
 
@@ -60,21 +58,19 @@ it('should be possible to use a DescriptionProvider without using a Description'
   )
 })
 
-it('should be possible to use a DescriptionProvider and a single Description, and have them linked', async () => {
+it('should be possible to use useDescriptions and a single Description, and have them linked', async () => {
   let { container } = renderTemplate({
     render() {
       return h('div', [
-        h(this.DescriptionProvider, () => [
-          h('div', { 'aria-describedby': this.describedby }, [
-            h(Description, () => 'I am a description'),
-            h('span', 'Contents'),
-          ]),
+        h('div', { 'aria-describedby': this.describedby }, [
+          h(Description, () => 'I am a description'),
+          h('span', 'Contents'),
         ]),
       ])
     },
     setup() {
-      let [describedby, DescriptionProvider] = useDescriptions()
-      return { describedby, DescriptionProvider }
+      let describedby = useDescriptions()
+      return { describedby }
     },
   })
 
@@ -94,22 +90,20 @@ it('should be possible to use a DescriptionProvider and a single Description, an
   )
 })
 
-it('should be possible to use a DescriptionProvider and multiple Description components, and have them linked', async () => {
+it('should be possible to use useDescriptions and multiple Description components, and have them linked', async () => {
   let { container } = renderTemplate({
     render() {
       return h('div', [
-        h(this.DescriptionProvider, () => [
-          h('div', { 'aria-describedby': this.describedby }, [
-            h(Description, () => 'I am a description'),
-            h('span', 'Contents'),
-            h(Description, () => 'I am also a description'),
-          ]),
+        h('div', { 'aria-describedby': this.describedby }, [
+          h(Description, () => 'I am a description'),
+          h('span', 'Contents'),
+          h(Description, () => 'I am also a description'),
         ]),
       ])
     },
     setup() {
-      let [describedby, DescriptionProvider] = useDescriptions()
-      return { describedby, DescriptionProvider }
+      let describedby = useDescriptions()
+      return { describedby }
     },
   })
 
@@ -131,3 +125,47 @@ it('should be possible to use a DescriptionProvider and multiple Description com
     `)
   )
 })
+
+it('should be possible to update a prop from the parent and it should reflect in the Description component', async () => {
+  let { container } = renderTemplate({
+    render() {
+      return h('div', [
+        h('div', { 'aria-describedby': this.describedby }, [
+          h(Description, () => 'I am a description'),
+          h('button', { onClick: () => this.count++ }, '+1'),
+        ]),
+      ])
+    },
+    setup() {
+      let count = ref(0)
+      let describedby = useDescriptions({ props: { 'data-count': count } })
+      return { count, describedby }
+    },
+  })
+
+  await new Promise<void>(nextTick)
+
+  expect(format(container.firstElementChild)).toEqual(
+    format(html`
+      <div aria-describedby="headlessui-description-1">
+        <p data-count="0" id="headlessui-description-1">
+          I am a description
+        </p>
+        <button>+1</button>
+      </div>
+    `)
+  )
+
+  await click(getByText('+1'))
+
+  expect(format(container.firstElementChild)).toEqual(
+    format(html`
+      <div aria-describedby="headlessui-description-1">
+        <p data-count="1" id="headlessui-description-1">
+          I am a description
+        </p>
+        <button>+1</button>
+      </div>
+    `)
+  )
+})

packages/@headlessui-vue/src/components/description/description.ts

@@ -6,11 +6,11 @@ import {
   onUnmounted,
   provide,
   ref,
+  unref,
 
   // Types
   ComputedRef,
   InjectionKey,
-  Ref,
 } from 'vue'
 
 import { useId } from '../../hooks/use-id'
@@ -20,9 +20,9 @@ import { render } from '../../utils/render'
 
 let DescriptionContext = Symbol('DescriptionContext') as InjectionKey<{
   register(value: string): () => void
-  slot: Ref<Record<string, any>>
-  name: Ref<string>
-  props: Ref<Record<string, any>>
+  slot: Record<string, any>
+  name: string
+  props: Record<string, any>
 }>
 
 function useDescriptionContext() {
@@ -33,42 +33,33 @@ function useDescriptionContext() {
   return context
 }
 
-export function useDescriptions(): [
-  ComputedRef<string | undefined>,
-  ReturnType<typeof defineComponent>
-] {
+export function useDescriptions({
+  slot = {},
+  name = 'Description',
+  props = {},
+}: {
+  slot?: Record<string, unknown>
+  name?: string
+  props?: Record<string, unknown>
+} = {}): ComputedRef<string | undefined> {
   let descriptionIds = ref<string[]>([])
 
-  return [
-    // The actual id's as string or undefined.
-    computed(() => (descriptionIds.value.length > 0 ? descriptionIds.value.join(' ') : undefined)),
+  function register(value: string) {
+    descriptionIds.value.push(value)
 
-    // The provider component
-    defineComponent({
-      name: 'DescriptionProvider',
-      props: ['slot', 'name', 'props'],
-      setup(props, { slots }) {
-        function register(value: string) {
-          descriptionIds.value.push(value)
-
-          return () => {
-            let idx = descriptionIds.value.indexOf(value)
-            if (idx === -1) return
-            descriptionIds.value.splice(idx, 1)
-          }
-        }
+    return () => {
+      let idx = descriptionIds.value.indexOf(value)
+      if (idx === -1) return
+      descriptionIds.value.splice(idx, 1)
+    }
+  }
 
-        provide(DescriptionContext, {
-          register,
-          slot: computed(() => props.slot),
-          name: computed(() => props.name),
-          props: computed(() => props.props),
-        })
+  provide(DescriptionContext, { register, slot, name, props })
 
-        return () => slots.default!()
-      },
-    }),
-  ]
+  // The actual id's as string or undefined.
+  return computed(() =>
+    descriptionIds.value.length > 0 ? descriptionIds.value.join(' ') : undefined
+  )
 }
 
 // ---
@@ -79,23 +70,30 @@ export let Description = defineComponent({
     as: { type: [Object, String], default: 'p' },
   },
   render() {
+    let { name = 'Description', slot = {}, props = {} } = this.context
     let passThroughProps = this.$props
-    let propsWeControl = { ...this.props, id: this.id }
+    let propsWeControl = {
+      ...Object.entries(props).reduce(
+        (acc, [key, value]) => Object.assign(acc, { [key]: unref(value) }),
+        {}
+      ),
+      id: this.id,
+    }
 
     return render({
-      props: { ...this.props, ...passThroughProps, ...propsWeControl },
-      slot: this.slot || {},
+      props: { ...passThroughProps, ...propsWeControl },
+      slot,
       attrs: this.$attrs,
       slots: this.$slots,
-      name: this.name || 'Description',
+      name,
     })
   },
   setup() {
-    let { register, slot, name, props } = useDescriptionContext()
+    let context = useDescriptionContext()
     let id = `headlessui-description-${useId()}`
 
-    onMounted(() => onUnmounted(register(id)))
+    onMounted(() => onUnmounted(context.register(id)))
 
-    return { id, slot, name, props }
+    return { id, context }
   },
 })

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -109,17 +109,15 @@ export let Dialog = defineComponent({
           h(Portal, {}, () => [
             h(PortalGroup, { target: this.dialogRef }, () => [
               h(ForcePortalRoot, { force: false }, () => [
-                h(this.DescriptionProvider, { slot }, () => [
-                  render({
-                    props: { ...passThroughProps, ...propsWeControl },
-                    slot,
-                    attrs: this.$attrs,
-                    slots: this.$slots,
-                    visible: open,
-                    features: Features.RenderStrategy | Features.Static,
-                    name: 'Dialog',
-                  }),
-                ]),
+                render({
+                  props: { ...passThroughProps, ...propsWeControl },
+                  slot,
+                  attrs: this.$attrs,
+                  slots: this.$slots,
+                  visible: open,
+                  features: Features.RenderStrategy | Features.Static,
+                  name: 'Dialog',
+                }),
               ]),
             ]),
           ]),
@@ -182,7 +180,10 @@ export let Dialog = defineComponent({
 
     useFocusTrap(containers, enabled, focusTrapOptions)
     useInertOthers(internalDialogRef, enabled)
-    let [describedby, DescriptionProvider] = useDescriptions()
+    let describedby = useDescriptions({
+      name: 'DialogDescription',
+      slot: { open: props.open },
+    })
 
     let titleId = ref<StateDefinition['titleId']['value']>(null)
 
@@ -271,7 +272,6 @@ export let Dialog = defineComponent({
       dialogState,
       titleId,
       describedby,
-      DescriptionProvider,
     }
   },
 })