Vue breaking change (#279)

* bump Vue * ensure we reference the vite.config.js * fix event name casing Vue broke this in a 3.0.5 release, it still worked in 3.0.4. Fixes: #267 * handle throwing while rendering a better in tests
tailwindlabs · Mar 15, 2021 · 4648332 · 4648332
1 parent b99304a
commit 4648332
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 70 deletions.
diff --git a/packages/@headlessui-vue/package.json b/packages/@headlessui-vue/package.json
@@ -20,7 +20,7 @@
     "access": "public"
   },
   "scripts": {
-    "playground": "vite serve examples",
+    "playground": "vite --config ./vite.config.js serve examples",
     "playground:build": "NODE_ENV=production vite build examples",
     "prepublishOnly": "npm run build",
     "build": "../../scripts/build.sh",
@@ -29,7 +29,7 @@
     "lint": "../../scripts/lint.sh"
   },
   "peerDependencies": {
-    "vue": "^3.0.0-rc.13"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@popperjs/core": "^2.5.3",
@@ -38,7 +38,7 @@
     "@vue/compiler-sfc": "3.0.1",
     "@vue/test-utils": "^2.0.0-beta.7",
     "vite": "^1.0.0-rc.4",
-    "vue": "^3.0.0-rc.13",
+    "vue": "^3.0.0",
     "vue-router": "^4.0.0-beta.13"
   }
 }
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -260,7 +260,7 @@ export let ListboxButton = defineComponent({
         ? [dom(api.labelRef)?.id, this.id].join(' ')
         : undefined,
       disabled: api.disabled,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       onClick: this.handleClick,
     }
 
@@ -337,7 +337,7 @@ export let ListboxOptions = defineComponent({
           : api.options.value[api.activeOptionIndex.value]?.id,
       'aria-labelledby': dom(api.labelRef)?.id ?? dom(api.buttonRef)?.id,
       id: this.id,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       role: 'listbox',
       tabIndex: 0,
       ref: 'el',
@@ -509,10 +509,10 @@ export let ListboxOption = defineComponent({
         'aria-selected': selected.value === true ? selected.value : undefined,
         onClick: handleClick,
         onFocus: handleFocus,
-        onPointerMove: handleMove,
-        onMouseMove: handleMove,
-        onPointerLeave: handleLeave,
-        onMouseLeave: handleLeave,
+        onPointermove: handleMove,
+        onMousemove: handleMove,
+        onPointerleave: handleLeave,
+        onMouseleave: handleLeave,
       }
 
       return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })

diff --git a/packages/@headlessui-vue/src/components/menu/menu.test.tsx b/packages/@headlessui-vue/src/components/menu/menu.test.tsx
@@ -355,18 +355,7 @@ describe('Rendering', () => {
     })
 
     it('should yell when we render MenuItems using a template `as` prop that contains multiple children', async () => {
-      let state = {
-        resolve(_value: Error | PromiseLike<Error>) {},
-        done(error: unknown) {
-          state.resolve(error as Error)
-          return true
-        },
-        promise: new Promise<Error>(() => {}),
-      }
-
-      state.promise = new Promise<Error>(resolve => {
-        state.resolve = resolve
-      })
+      expect.assertions(1)
 
       renderTemplate({
         template: `
@@ -379,14 +368,15 @@ describe('Rendering', () => {
             </MenuItems>
           </Menu>
         `,
-        errorCaptured: state.done,
+        errorCaptured(err: unknown) {
+          expect((err as Error).message).toMatchInlineSnapshot(
+            `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
+          )
+          return false
+        },
       })
 
       await click(getMenuButton())
-      let error = await state.promise
-      expect(error.message).toMatchInlineSnapshot(
-        `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
-      )
     })
 
     it('should be possible to always render the MenuItems if we provide it a `static` prop', () => {
@@ -509,18 +499,7 @@ describe('Rendering', () => {
     })
 
     it('should yell when we render a MenuItem using a template `as` prop that contains multiple children', async () => {
-      let state = {
-        resolve(_value: Error | PromiseLike<Error>) {},
-        done(error: unknown) {
-          state.resolve(error as Error)
-          return true
-        },
-        promise: new Promise<Error>(() => {}),
-      }
-
-      state.promise = new Promise<Error>(resolve => {
-        state.resolve = resolve
-      })
+      expect.assertions(1)
 
       renderTemplate({
         template: `
@@ -536,14 +515,16 @@ describe('Rendering', () => {
             </MenuItems>
           </Menu>
         `,
-        errorCaptured: state.done,
+        errorCaptured(err: unknown) {
+          expect((err as Error).message).toMatchInlineSnapshot(
+            `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
+          )
+
+          return false
+        },
       })
 
       await click(getMenuButton())
-      let error = await state.promise
-      expect(error.message).toMatchInlineSnapshot(
-        `"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
-      )
     })
   })
 })

diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -179,7 +179,7 @@ export let MenuButton = defineComponent({
       'aria-haspopup': true,
       'aria-controls': dom(api.itemsRef)?.id,
       'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       onClick: this.handleClick,
     }
 
@@ -258,7 +258,7 @@ export let MenuItems = defineComponent({
           : api.items.value[api.activeItemIndex.value]?.id,
       'aria-labelledby': dom(api.buttonRef)?.id,
       id: this.id,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       role: 'menu',
       tabIndex: 0,
       ref: 'el',
@@ -429,10 +429,10 @@ export let MenuItem = defineComponent({
         'aria-disabled': disabled === true ? true : undefined,
         onClick: handleClick,
         onFocus: handleFocus,
-        onPointerMove: handleMove,
-        onMouseMove: handleMove,
-        onPointerLeave: handleLeave,
-        onMouseLeave: handleLeave,
+        onPointermove: handleMove,
+        onMousemove: handleMove,
+        onPointerleave: handleLeave,
+        onMouseleave: handleLeave,
       }
 
       return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })

diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts
@@ -76,8 +76,8 @@ export let Switch = defineComponent({
       'aria-labelledby': labelledby.value,
       'aria-describedby': describedby.value,
       onClick: this.handleClick,
-      onKeyUp: this.handleKeyUp,
-      onKeyPress: this.handleKeyPress,
+      onKeyup: this.handleKeyUp,
+      onKeypress: this.handleKeyPress,
     }
 
     if (this.$props.as === 'button') {

diff --git a/packages/@headlessui-vue/src/test-utils/interactions.test.ts b/packages/@headlessui-vue/src/test-utils/interactions.test.ts
@@ -3,8 +3,8 @@ import { render } from './vue-testing-library'
 import { type, shift, Keys } from './interactions'
 import { defineComponent, h } from 'vue'
 
-type Events = 'onKeyDown' | 'onKeyUp' | 'onKeyPress' | 'onClick' | 'onBlur' | 'onFocus'
-let events: Events[] = ['onKeyDown', 'onKeyUp', 'onKeyPress', 'onClick', 'onBlur', 'onFocus']
+type Events = 'onKeydown' | 'onKeyup' | 'onKeypress' | 'onClick' | 'onBlur' | 'onFocus'
+let events: Events[] = ['onKeydown', 'onKeyup', 'onKeypress', 'onClick', 'onBlur', 'onFocus']
 
 function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
   let defaultComponents = {}
@@ -81,16 +81,16 @@ describe('Keyboard', () => {
       ],
 
       // Canceling keydown
-      ['a', ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Space, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Enter, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Tab, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [shift(Keys.Tab), ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
+      ['a', ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Space, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Enter, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Tab, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [shift(Keys.Tab), ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
 
       // Canceling keypress
-      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyPress'])],
-      [Keys.Space, ['keydown', 'keypress', 'keyup', 'click'], new Set<Events>(['onKeyPress'])],
-      [Keys.Enter, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyPress'])],
+      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeypress'])],
+      [Keys.Space, ['keydown', 'keypress', 'keyup', 'click'], new Set<Events>(['onKeypress'])],
+      [Keys.Enter, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeypress'])],
       [
         Keys.Tab,
         [
@@ -99,7 +99,7 @@ describe('Keyboard', () => {
           event('focus', 'after'),
           event('keyup', 'after'),
         ],
-        new Set<Events>(['onKeyPress']),
+        new Set<Events>(['onKeypress']),
       ],
       [
         shift(Keys.Tab),
@@ -109,13 +109,13 @@ describe('Keyboard', () => {
           event('focus', 'before'),
           event('keyup', 'before'),
         ],
-        new Set<Events>(['onKeyPress']),
+        new Set<Events>(['onKeypress']),
       ],
 
       // Canceling keyup
-      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyUp'])],
-      [Keys.Space, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyUp'])],
-      [Keys.Enter, ['keydown', 'keypress', 'click', 'keyup'], new Set<Events>(['onKeyUp'])],
+      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyup'])],
+      [Keys.Space, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyup'])],
+      [Keys.Enter, ['keydown', 'keypress', 'click', 'keyup'], new Set<Events>(['onKeyup'])],
       [
         Keys.Tab,
         [
@@ -124,7 +124,7 @@ describe('Keyboard', () => {
           event('focus', 'after'),
           event('keyup', 'after'),
         ],
-        new Set<Events>(['onKeyUp']),
+        new Set<Events>(['onKeyup']),
       ],
       [
         shift(Keys.Tab),
@@ -134,7 +134,7 @@ describe('Keyboard', () => {
           event('focus', 'before'),
           event('keyup', 'before'),
         ],
-        new Set<Events>(['onKeyUp']),
+        new Set<Events>(['onKeyup']),
       ],
 
       // Cancelling blur
@@ -189,7 +189,7 @@ describe('Keyboard', () => {
           Button: defineComponent({
             setup(_props, { slots, attrs }) {
               return () => {
-                return h('button', createProps(attrs.id as string), slots.default())
+                return h('button', createProps(attrs.id as string), slots.default!())
               }
             },
           }),

diff --git a/yarn.lock b/yarn.lock
@@ -1878,6 +1878,17 @@
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
+"@vue/[email protected]":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.7.tgz#421782a4c67cc3f2b7c30457ef446d74f8524f74"
+  integrity sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==
+  dependencies:
+    "@babel/parser" "^7.12.0"
+    "@babel/types" "^7.12.0"
+    "@vue/shared" "3.0.7"
+    estree-walker "^2.0.1"
+    source-map "^0.6.1"
+
 "@vue/[email protected]", "@vue/compiler-dom@^3.0.0-rc.5":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.0.tgz#4cbb48fcf1f852daef2babcf9953b681ac463526"
@@ -1894,6 +1905,14 @@
     "@vue/compiler-core" "3.0.1"
     "@vue/shared" "3.0.1"
 
+"@vue/[email protected]":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz#54d2e12fb9a7aff53abd19dac2c2679533f0c919"
+  integrity sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==
+  dependencies:
+    "@vue/compiler-core" "3.0.7"
+    "@vue/shared" "3.0.7"
+
 "@vue/[email protected]":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.1.tgz#f340f8f75b5c1c4509e0f3a12c79d1544899b663"
@@ -1961,6 +1980,13 @@
   dependencies:
     "@vue/shared" "3.0.0"
 
+"@vue/[email protected]":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.7.tgz#e6ccc7bef7fc10b0972e4d974bad71679d3b26ad"
+  integrity sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==
+  dependencies:
+    "@vue/shared" "3.0.7"
+
 "@vue/[email protected]":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.0.tgz#480febf1bfe32798b6abbd71a88f8e8b473a51c2"
@@ -1969,6 +1995,14 @@
     "@vue/reactivity" "3.0.0"
     "@vue/shared" "3.0.0"
 
+"@vue/[email protected]":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.7.tgz#d44c0b0a57d7e392912a87362a4430ccf446ecea"
+  integrity sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==
+  dependencies:
+    "@vue/reactivity" "3.0.7"
+    "@vue/shared" "3.0.7"
+
 "@vue/[email protected]":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.0.tgz#e0d1f7c7e22e1318696014cc3501e06b288c2e11"
@@ -1978,6 +2012,15 @@
     "@vue/shared" "3.0.0"
     csstype "^2.6.8"
 
+"@vue/[email protected]":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz#b70668d729020bc4ad608c20367223f259576ba6"
+  integrity sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==
+  dependencies:
+    "@vue/runtime-core" "3.0.7"
+    "@vue/shared" "3.0.7"
+    csstype "^2.6.8"
+
 "@vue/[email protected]":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0.tgz#ec089236629ecc0f10346b92f101ff4339169f1a"
@@ -1988,6 +2031,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.1.tgz#48196c056726aa7466d0182698524c84f203006b"
   integrity sha512-/X6AUbTFCyD2BcJnBoacUct8qcv1A5uk1+N+3tbzDVuhGPRmoYrTSnNUuF53C/GIsTkChrEiXaJh2kyo/0tRvw==
 
+"@vue/[email protected]":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.7.tgz#96d52988efc07444c108c7c6803ba7cc93e40045"
+  integrity sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg==
+
 "@vue/test-utils@^1.0.3", "@vue/test-utils@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.1.0.tgz#76305e73a786c921ede1352849614e26c7113f94"
@@ -10692,7 +10740,16 @@ vue@^2.6.10:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
-vue@^3.0.0-rc.13, vue@^3.0.0-rc.5:
+vue@^3.0.0:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.7.tgz#8bcff51f8be570f9e4ce8cc5f52e2ab0fe3c74a1"
+  integrity sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==
+  dependencies:
+    "@vue/compiler-dom" "3.0.7"
+    "@vue/runtime-dom" "3.0.7"
+    "@vue/shared" "3.0.7"
+
+vue@^3.0.0-rc.5:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0.tgz#cfb5df5c34efce319b113a1667d12b74dcfd9c90"
   integrity sha512-ZMrAARZ32sGIaYKr7Fk2GZEBh/VhulSrGxcGBiAvbN4fhjl3tuJyNFbbbLFqGjndbLoBW66I2ECq8ICdvkKdJw==