Skip to content

Commit 5da253b

Browse files
RobinMalfaitRobinMalfait
authored
backfill fixes (#299)
* fix unique symbol error (#248) * 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
1 parent 054d90d commit 5da253b

File tree

9 files changed

+113
-73
lines changed

9 files changed

+113
-73
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased - React]
99

10-
- Nothing yet!
10+
- Fix incorrect type error `unique symbol` ([#248](https://github.com/tailwindlabs/headlessui/pull/248), [#240](https://github.com/tailwindlabs/headlessui/issues/240))
1111

1212
## [Unreleased - Vue]
1313

‎packages/@headlessui-react/src/types.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { ReactNode, ReactElement } from 'react'
2-
// A unique placeholder we can use as some defaults. This is nice because we can use this instead of
2+
3+
// A unique placeholder we can use as a default. This is nice because we can use this instead of
34
// defaulting to null / never / ... and possibly collide with actual data.
4-
const __: unique symbol = Symbol('__placeholder__')
5+
// Ideally we use a unique symbol here.
6+
let __ = '1D45E01E-AF44-47C4-988A-19A94EBAF55C' as const
57
export type __ = typeof __
68

79
export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never

‎packages/@headlessui-vue/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"access": "public"
2121
},
2222
"scripts": {
23-
"playground": "vite serve examples",
23+
"playground": "vite --config ./vite.config.js serve examples",
2424
"playground:build": "NODE_ENV=production vite build examples",
2525
"prepublishOnly": "npm run build",
2626
"build": "../../scripts/build.sh",
@@ -29,7 +29,7 @@
2929
"lint": "../../scripts/lint.sh"
3030
},
3131
"peerDependencies": {
32-
"vue": "^3.0.0-rc.13"
32+
"vue": "^3.0.0"
3333
},
3434
"devDependencies": {
3535
"@popperjs/core": "^2.5.3",
@@ -38,7 +38,7 @@
3838
"@vue/compiler-sfc": "3.0.1",
3939
"@vue/test-utils": "^2.0.0-beta.7",
4040
"vite": "^1.0.0-rc.4",
41-
"vue": "^3.0.0-rc.13",
41+
"vue": "^3.0.0",
4242
"vue-router": "^4.0.0-beta.13"
4343
}
4444
}

‎packages/@headlessui-vue/src/components/listbox/listbox.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ export let ListboxButton = defineComponent({
259259
? [api.labelRef.value.id, this.id].join(' ')
260260
: undefined,
261261
disabled: api.disabled,
262-
onKeyDown: this.handleKeyDown,
262+
onKeydown: this.handleKeyDown,
263263
onClick: this.handleClick,
264264
}
265265

@@ -336,7 +336,7 @@ export let ListboxOptions = defineComponent({
336336
: api.options.value[api.activeOptionIndex.value]?.id,
337337
'aria-labelledby': api.labelRef.value?.id ?? api.buttonRef.value?.id,
338338
id: this.id,
339-
onKeyDown: this.handleKeyDown,
339+
onKeydown: this.handleKeyDown,
340340
role: 'listbox',
341341
tabIndex: 0,
342342
ref: 'el',
@@ -508,10 +508,10 @@ export let ListboxOption = defineComponent({
508508
'aria-selected': selected.value === true ? selected.value : undefined,
509509
onClick: handleClick,
510510
onFocus: handleFocus,
511-
onPointerMove: handleMove,
512-
onMouseMove: handleMove,
513-
onPointerLeave: handleLeave,
514-
onMouseLeave: handleLeave,
511+
onPointermove: handleMove,
512+
onMousemove: handleMove,
513+
onPointerleave: handleLeave,
514+
onMouseleave: handleLeave,
515515
}
516516

517517
return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })

‎packages/@headlessui-vue/src/components/menu/menu.test.tsx‎

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -315,18 +315,7 @@ describe('Rendering', () => {
315315
})
316316

317317
it('should yell when we render MenuItems using a template `as` prop that contains multiple children', async () => {
318-
let state = {
319-
resolve(_value: Error | PromiseLike<Error>) {},
320-
done(error: unknown) {
321-
state.resolve(error as Error)
322-
return true
323-
},
324-
promise: new Promise<Error>(() => {}),
325-
}
326-
327-
state.promise = new Promise<Error>(resolve => {
328-
state.resolve = resolve
329-
})
318+
expect.assertions(1)
330319

331320
renderTemplate({
332321
template: `
@@ -339,14 +328,15 @@ describe('Rendering', () => {
339328
</MenuItems>
340329
</Menu>
341330
`,
342-
errorCaptured: state.done,
331+
errorCaptured(err: unknown) {
332+
expect((err as Error).message).toMatchInlineSnapshot(
333+
`"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
334+
)
335+
return false
336+
},
343337
})
344338

345339
await click(getMenuButton())
346-
let error = await state.promise
347-
expect(error.message).toMatchInlineSnapshot(
348-
`"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
349-
)
350340
})
351341

352342
it('should be possible to always render the MenuItems if we provide it a `static` prop', () => {
@@ -469,18 +459,7 @@ describe('Rendering', () => {
469459
})
470460

471461
it('should yell when we render a MenuItem using a template `as` prop that contains multiple children', async () => {
472-
let state = {
473-
resolve(_value: Error | PromiseLike<Error>) {},
474-
done(error: unknown) {
475-
state.resolve(error as Error)
476-
return true
477-
},
478-
promise: new Promise<Error>(() => {}),
479-
}
480-
481-
state.promise = new Promise<Error>(resolve => {
482-
state.resolve = resolve
483-
})
462+
expect.assertions(1)
484463

485464
renderTemplate({
486465
template: `
@@ -496,14 +475,16 @@ describe('Rendering', () => {
496475
</MenuItems>
497476
</Menu>
498477
`,
499-
errorCaptured: state.done,
478+
errorCaptured(err: unknown) {
479+
expect((err as Error).message).toMatchInlineSnapshot(
480+
`"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
481+
)
482+
483+
return false
484+
},
500485
})
501486

502487
await click(getMenuButton())
503-
let error = await state.promise
504-
expect(error.message).toMatchInlineSnapshot(
505-
`"You should only render 1 child or use the \`as=\\"...\\"\` prop"`
506-
)
507488
})
508489
})
509490
})

‎packages/@headlessui-vue/src/components/menu/menu.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export let MenuButton = defineComponent({
178178
'aria-haspopup': true,
179179
'aria-controls': api.itemsRef.value?.id,
180180
'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
181-
onKeyDown: this.handleKeyDown,
181+
onKeydown: this.handleKeyDown,
182182
onClick: this.handleClick,
183183
}
184184

@@ -257,7 +257,7 @@ export let MenuItems = defineComponent({
257257
: api.items.value[api.activeItemIndex.value]?.id,
258258
'aria-labelledby': api.buttonRef.value?.id,
259259
id: this.id,
260-
onKeyDown: this.handleKeyDown,
260+
onKeydown: this.handleKeyDown,
261261
role: 'menu',
262262
tabIndex: 0,
263263
ref: 'el',
@@ -428,10 +428,10 @@ export let MenuItem = defineComponent({
428428
'aria-disabled': disabled === true ? true : undefined,
429429
onClick: handleClick,
430430
onFocus: handleFocus,
431-
onPointerMove: handleMove,
432-
onMouseMove: handleMove,
433-
onPointerLeave: handleLeave,
434-
onMouseLeave: handleLeave,
431+
onPointermove: handleMove,
432+
onMousemove: handleMove,
433+
onPointerleave: handleLeave,
434+
onMouseleave: handleLeave,
435435
}
436436

437437
return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })

‎packages/@headlessui-vue/src/components/switch/switch.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ export let Switch = defineComponent({
7171
'aria-checked': this.$props.modelValue,
7272
'aria-labelledby': labelledby.value,
7373
onClick: this.handleClick,
74-
onKeyUp: this.handleKeyUp,
75-
onKeyPress: this.handleKeyPress,
74+
onKeyup: this.handleKeyUp,
75+
onKeypress: this.handleKeyPress,
7676
}
7777

7878
if (this.$props.as === 'button') {

‎packages/@headlessui-vue/src/test-utils/interactions.test.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { render } from './vue-testing-library'
33
import { type, shift, Keys } from './interactions'
44
import { defineComponent, h } from 'vue'
55

6-
type Events = 'onKeyDown' | 'onKeyUp' | 'onKeyPress' | 'onClick' | 'onBlur' | 'onFocus'
7-
let events: Events[] = ['onKeyDown', 'onKeyUp', 'onKeyPress', 'onClick', 'onBlur', 'onFocus']
6+
type Events = 'onKeydown' | 'onKeyup' | 'onKeypress' | 'onClick' | 'onBlur' | 'onFocus'
7+
let events: Events[] = ['onKeydown', 'onKeyup', 'onKeypress', 'onClick', 'onBlur', 'onFocus']
88

99
function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
1010
let defaultComponents = {}
@@ -81,16 +81,16 @@ describe('Keyboard', () => {
8181
],
8282

8383
// Canceling keydown
84-
['a', ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
85-
[Keys.Space, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
86-
[Keys.Enter, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
87-
[Keys.Tab, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
88-
[shift(Keys.Tab), ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
84+
['a', ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
85+
[Keys.Space, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
86+
[Keys.Enter, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
87+
[Keys.Tab, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
88+
[shift(Keys.Tab), ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
8989

9090
// Canceling keypress
91-
['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyPress'])],
92-
[Keys.Space, ['keydown', 'keypress', 'keyup', 'click'], new Set<Events>(['onKeyPress'])],
93-
[Keys.Enter, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyPress'])],
91+
['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeypress'])],
92+
[Keys.Space, ['keydown', 'keypress', 'keyup', 'click'], new Set<Events>(['onKeypress'])],
93+
[Keys.Enter, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeypress'])],
9494
[
9595
Keys.Tab,
9696
[
@@ -99,7 +99,7 @@ describe('Keyboard', () => {
9999
event('focus', 'after'),
100100
event('keyup', 'after'),
101101
],
102-
new Set<Events>(['onKeyPress']),
102+
new Set<Events>(['onKeypress']),
103103
],
104104
[
105105
shift(Keys.Tab),
@@ -109,13 +109,13 @@ describe('Keyboard', () => {
109109
event('focus', 'before'),
110110
event('keyup', 'before'),
111111
],
112-
new Set<Events>(['onKeyPress']),
112+
new Set<Events>(['onKeypress']),
113113
],
114114

115115
// Canceling keyup
116-
['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyUp'])],
117-
[Keys.Space, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyUp'])],
118-
[Keys.Enter, ['keydown', 'keypress', 'click', 'keyup'], new Set<Events>(['onKeyUp'])],
116+
['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyup'])],
117+
[Keys.Space, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyup'])],
118+
[Keys.Enter, ['keydown', 'keypress', 'click', 'keyup'], new Set<Events>(['onKeyup'])],
119119
[
120120
Keys.Tab,
121121
[
@@ -124,7 +124,7 @@ describe('Keyboard', () => {
124124
event('focus', 'after'),
125125
event('keyup', 'after'),
126126
],
127-
new Set<Events>(['onKeyUp']),
127+
new Set<Events>(['onKeyup']),
128128
],
129129
[
130130
shift(Keys.Tab),
@@ -134,7 +134,7 @@ describe('Keyboard', () => {
134134
event('focus', 'before'),
135135
event('keyup', 'before'),
136136
],
137-
new Set<Events>(['onKeyUp']),
137+
new Set<Events>(['onKeyup']),
138138
],
139139

140140
// Cancelling blur
@@ -189,7 +189,7 @@ describe('Keyboard', () => {
189189
Button: defineComponent({
190190
setup(_props, { slots, attrs }) {
191191
return () => {
192-
return h('button', createProps(attrs.id as string), slots.default())
192+
return h('button', createProps(attrs.id as string), slots.default!())
193193
}
194194
},
195195
}),

0 commit comments

Comments
 (0)