-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve SSR of the
Disclosure component (#2645)
* pre-calculate the buttonId/panelId on the server * add simple-tabs example * update changelog * make Disclosure IDs stable between server/client
- Loading branch information
1 parent
c22a8c1
commit cc163ea
Showing
5 changed files
with
150 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
packages/@headlessui-vue/src/components/disclosure/disclosure.srr.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { defineComponent } from 'vue' | ||
| import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure' | ||
| import { html } from '../../test-utils/html' | ||
| import { renderHydrate, renderSSR } from '../../test-utils/ssr' | ||
|
|
||
| jest.mock('../../hooks/use-id') | ||
|
|
||
| beforeAll(() => { | ||
| jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any) | ||
| jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any) | ||
| }) | ||
|
|
||
| afterAll(() => jest.restoreAllMocks()) | ||
|
|
||
| let Example = defineComponent({ | ||
| components: { Disclosure, DisclosureButton, DisclosurePanel }, | ||
| template: html` | ||
| <Disclosure> | ||
| <DisclosureButton>Toggle</DisclosureButton> | ||
| <DisclosurePanel>Contents</DisclosurePanel> | ||
| </Disclosure> | ||
| `, | ||
| }) | ||
|
|
||
| describe('Rendering', () => { | ||
| describe('SSR', () => { | ||
| it('should be possible to server side render the Disclosure in a closed state', async () => { | ||
| let { contents } = await renderSSR(Example) | ||
|
|
||
| expect(contents).toContain(`Toggle`) | ||
| expect(contents).not.toContain('aria-controls') | ||
| expect(contents).not.toContain(`aria-expanded="true"`) | ||
| expect(contents).not.toContain(`Contents`) | ||
| }) | ||
|
|
||
| it('should be possible to server side render the Disclosure in an open state', async () => { | ||
| let { contents } = await renderSSR(Example, { defaultOpen: true }) | ||
|
|
||
| let ariaControlsId = contents.match( | ||
| /aria-controls="(headlessui-disclosure-panel-[^"]+)"/ | ||
| )?.[1] | ||
| let id = contents.match(/id="(headlessui-disclosure-panel-[^"]+)"/)?.[1] | ||
|
|
||
| expect(id).toEqual(ariaControlsId) | ||
|
|
||
| expect(contents).toContain(`Toggle`) | ||
| expect(contents).toContain('aria-controls') | ||
| expect(contents).toContain(`aria-expanded="true"`) | ||
| expect(contents).toContain(`Contents`) | ||
| }) | ||
| }) | ||
|
|
||
| describe('Hydration', () => { | ||
| it('should be possible to server side render the Disclosure in a closed state', async () => { | ||
| let { contents } = await renderHydrate(Example) | ||
|
|
||
| expect(contents).toContain(`Toggle`) | ||
| expect(contents).not.toContain('aria-controls') | ||
| expect(contents).not.toContain(`aria-expanded="true"`) | ||
| expect(contents).not.toContain(`Contents`) | ||
| }) | ||
|
|
||
| it('should be possible to server side render the Disclosure in an open state', async () => { | ||
| let { contents } = await renderHydrate(Example, { defaultOpen: true }) | ||
|
|
||
| let ariaControlsId = contents.match( | ||
| /aria-controls="(headlessui-disclosure-panel-[^"]+)"/ | ||
| )?.[1] | ||
| let id = contents.match(/id="(headlessui-disclosure-panel-[^"]+)"/)?.[1] | ||
|
|
||
| expect(id).toEqual(ariaControlsId) | ||
|
|
||
| expect(contents).toContain(`Toggle`) | ||
| expect(contents).toContain('aria-controls') | ||
| expect(contents).toContain(`aria-expanded="true"`) | ||
| expect(contents).toContain(`Contents`) | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
packages/playground-vue/src/components/tabs/simple-tabs.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <template> | ||
| <div class="flex h-full w-screen flex-col items-start space-y-12 bg-gray-50 p-12"> | ||
| <TabGroup class="flex w-full max-w-3xl flex-col" as="div"> | ||
| <TabList class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow"> | ||
| <Tab | ||
| v-for="tab in tabs" | ||
| :key="tab.name" | ||
| class="group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10" | ||
| v-slot="{ selected }" | ||
| > | ||
| <span>{{ tab.name }}</span> | ||
| <small v-if="tab.disabled" class="inline-block px-4 text-xs">(disabled)</small> | ||
| <span | ||
| aria-hidden="true" | ||
| class="absolute inset-x-0 bottom-0 h-0.5" | ||
| :class="{ 'bg-indigo-500': selected, 'bg-transparent': !selected }" | ||
| /> | ||
| </Tab> | ||
| </TabList> | ||
|
|
||
| <TabPanels class="mt-4"> | ||
| <TabPanel v-for="tab in tabs" class="rounded-lg bg-white p-4 shadow" :key="tab.name"> | ||
| {{ tab.content }} | ||
| </TabPanel> | ||
| </TabPanels> | ||
| </TabGroup> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue' | ||
| function classNames(...classes) { | ||
| return classes.filter(Boolean).join(' ') | ||
| } | ||
| let tabs = [ | ||
| { name: 'My Account', content: 'Tab content for my account' }, | ||
| { name: 'Company', content: 'Tab content for company' }, | ||
| { name: 'Team Members', content: 'Tab content for team members' }, | ||
| { name: 'Billing', content: 'Tab content for billing' }, | ||
| ] | ||
| </script> |
cc163eaThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
headlessui-vue – ./packages/playground-vue
headlessui-vue.vercel.app
headlessui-vue-git-main-tailwindlabs.vercel.app
headlessui-vue-tailwindlabs.vercel.app
cc163eaThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
headlessui-react – ./packages/playground-react
headlessui-react.vercel.app
headlessui-react-tailwindlabs.vercel.app
headlessui-react-git-main-tailwindlabs.vercel.app