-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(useSSRWidth): add optional support for SSR in useMediaQuery and …
…useBreakpoints (#4317) Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: Anthony Fu <github@antfu.me>
- Loading branch information
1 parent
df363a3
commit 559653c
Showing
11 changed files
with
309 additions
and
34 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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { provideSSRWidth } from '@vueuse/core' | ||
import { describe, expect, it } from 'vitest' | ||
import { createSSRApp } from 'vue' | ||
import { breakpointsBootstrapV5, useBreakpoints } from '.' | ||
|
||
describe('useBreakpoints', () => { | ||
it('should be defined', () => { | ||
expect(useBreakpoints).toBeDefined() | ||
}) | ||
|
||
it('should support ssr breakpoints', async () => { | ||
const breakpoints = useBreakpoints(breakpointsBootstrapV5, { window: null as unknown as undefined, ssrWidth: 768 }) | ||
expect(breakpoints.current().value).toStrictEqual(['xs', 'sm', 'md']) | ||
expect(breakpoints.active().value).toBe('md') | ||
expect(breakpoints.isGreater('md')).toBe(false) | ||
expect(breakpoints.isGreaterOrEqual('md')).toBe(true) | ||
expect(breakpoints.isSmaller('md')).toBe(false) | ||
expect(breakpoints.isSmallerOrEqual('md')).toBe(true) | ||
expect(breakpoints.isInBetween('md', 'lg')).toBe(true) | ||
expect(breakpoints.isInBetween('sm', 'md')).toBe(false) | ||
expect(breakpoints.md.value).toBe(true) | ||
expect(breakpoints.lg.value).toBe(false) | ||
expect(breakpoints.sm.value).toBe(true) | ||
}) | ||
|
||
it('should support max-width strategy', async () => { | ||
const breakpoints = useBreakpoints({ | ||
xl: 1399, | ||
lg: 1199, | ||
md: 991, | ||
sm: 767, | ||
xs: 575, | ||
}, { strategy: 'max-width', window: null as unknown as undefined, ssrWidth: 768 }) | ||
expect(breakpoints.current().value).toStrictEqual(['md', 'lg', 'xl']) | ||
expect(breakpoints.active().value).toBe('md') | ||
expect(breakpoints.isGreater('md')).toBe(false) | ||
expect(breakpoints.isGreaterOrEqual('sm')).toBe(true) | ||
expect(breakpoints.isSmaller('md')).toBe(true) | ||
expect(breakpoints.isSmallerOrEqual('sm')).toBe(false) | ||
expect(breakpoints.isInBetween('md', 'lg')).toBe(false) | ||
expect(breakpoints.isInBetween('sm', 'md')).toBe(true) | ||
expect(breakpoints.md.value).toBe(true) | ||
expect(breakpoints.lg.value).toBe(true) | ||
expect(breakpoints.sm.value).toBe(false) | ||
}) | ||
|
||
it('should get the ssr width from the global store', async () => { | ||
const app = createSSRApp({ render: () => '' }) | ||
provideSSRWidth(768, app) | ||
await app.runWithContext(async () => { | ||
const breakpoints = useBreakpoints(breakpointsBootstrapV5, { window: null as unknown as undefined }) | ||
expect(breakpoints.current().value).toStrictEqual(['xs', 'sm', 'md']) | ||
}) | ||
}) | ||
}) |
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
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,60 @@ | ||
import { describe, expect, it } from 'vitest' | ||
import { createSSRApp, nextTick, ref } from 'vue' | ||
import { useMediaQuery } from '.' | ||
import { provideSSRWidth } from '../useSSRWidth' | ||
|
||
describe('useMediaQuery', () => { | ||
it('should be defined', () => { | ||
expect(useMediaQuery).toBeDefined() | ||
}) | ||
|
||
it('should be false without window', () => { | ||
expect(useMediaQuery('(min-width: 0px)', { window: null as unknown as undefined }).value).toBe(false) | ||
}) | ||
|
||
it('should support ssr media queries', async () => { | ||
const query = ref('(min-width: 500px)') | ||
const mediaQuery = useMediaQuery(query, { window: null as unknown as undefined, ssrWidth: 500 }) | ||
expect(mediaQuery.value).toBe(true) | ||
query.value = '(min-width: 501px)' | ||
await nextTick() | ||
expect(mediaQuery.value).toBe(false) | ||
|
||
query.value = '(min-width: 500px) and (max-width: 37rem)' | ||
await nextTick() | ||
expect(mediaQuery.value).toBe(true) | ||
|
||
query.value = '(max-width: 31rem)' | ||
await nextTick() | ||
expect(mediaQuery.value).toBe(false) | ||
|
||
query.value = '(max-width: 31rem), (min-width: 400px)' | ||
await nextTick() | ||
expect(mediaQuery.value).toBe(true) | ||
|
||
query.value = '(max-width: 31rem), not all and (min-width: 400px)' | ||
await nextTick() | ||
expect(mediaQuery.value).toBe(false) | ||
|
||
query.value = 'not all (min-width: 400px) and (max-width: 600px)' | ||
await nextTick() | ||
expect(mediaQuery.value).toBe(false) | ||
|
||
query.value = 'not all (max-width: 100px) and (min-width: 1000px)' | ||
await nextTick() | ||
expect(mediaQuery.value).toBe(true) | ||
}) | ||
|
||
it('should get the ssr width from the global store', async () => { | ||
const app = createSSRApp({ render: () => '' }) | ||
provideSSRWidth(500, app) | ||
await app.runWithContext(async () => { | ||
const query = ref('(min-width: 500px)') | ||
const mediaQuery = useMediaQuery(query, { window: null as unknown as undefined }) | ||
expect(mediaQuery.value).toBe(true) | ||
query.value = '(min-width: 501px)' | ||
await nextTick() | ||
expect(mediaQuery.value).toBe(false) | ||
}) | ||
}) | ||
}) |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
--- | ||
category: Browser | ||
--- | ||
|
||
# useSSRWidth | ||
|
||
Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like [`useMediaQuery`](../useMediaQuery/index.md) or [`useBreakpoints`](../useBreakpoints/index.md) | ||
|
||
## Usage | ||
|
||
```js | ||
import { provideSSRWidth } from '@vueuse/core' | ||
|
||
const app = createApp(App) | ||
|
||
provideSSRWidth(500, app) | ||
``` | ||
|
||
Or in the root component | ||
|
||
```vue | ||
<script setup> | ||
import { provideSSRWidth } from '@vueuse/core' | ||
provideSSRWidth(500) | ||
</script> | ||
``` | ||
|
||
To retrieve the provided value if you need it in a subcomponent | ||
|
||
```vue | ||
<script setup> | ||
import { useSSRWidth } from '@vueuse/core' | ||
const width = useSSRWidth() | ||
</script> | ||
``` |
Oops, something went wrong.