Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Use Svelte v5 beta to allow providing custom Snippet names #11

Merged
merged 1 commit into from
Feb 7, 2024
Merged

feat: Use Svelte v5 beta to allow providing custom Snippet names #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@
{
"block": { "balanced": true }
}
]
],
"svelte/valid-compile": ["off"]
},
"overrides": [
{
Expand Down
89 changes: 64 additions & 25 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@ Svelte component and helper function for creating easy dynamic layouts with CSS
> Since this package relies on CSS Media Query Listeners, content outside the Default slot is *not* rendered server-side. If you need conditional layouts based on screen sizes, and need SSR compatibility, use CSS `@media` queries in your styles instead.

> [!Note]
> v1.0 is currently in progress, and will include a rewrite of the component and helper function for use with Svelte v5's Runes. The current version is still available in the `v0` branch.
> v1.0 is currently in progress, and includes a rewrite of the component and helper function for use with Svelte v5's Runes. The current version is still available in the [`v0` branch](https://github.com/kiosion/svelte-breakpoints/tree/v0).

## Installation
Install using yarn / pnpm / npm:

```bash
$ yarn add -D svelte-breakpoints
yarn add -D svelte-breakpoints
```
```bash
$ pnpm add -D svelte-breakpoints
pnpm add -D svelte-breakpoints
```
```bash
$ npm install --save-dev svelte-breakpoints
npm install --save-dev svelte-breakpoints
```

## Usage
Expand Down Expand Up @@ -51,54 +51,93 @@ const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
```

### Component
Import the component and pass in the media queries to use. You can use either the default "sm"/"md"/"lg"/"xl" slots, or bind a variable to the "match" prop - this will return a readable store you can subscribe to, which will contain the name of the matching query, or `undefined` if none match.
Import the component and pass in the media queries to use. By default, the component will only render the last matching snippet, or the default Slot if no queries match or no snippets are provided. Providing `renderAll` will render all matching snippets.

When using slots, the component will render the highest matching slot (e.g., if both 'sm' and 'lg' queries match, it will render the 'lg' slot). If no slots match, it will render the default slot and simply provide the `match` prop for binding to.
You can also bind to `$matches`, which will return a Readable store containing the names of all matching queries.

```html
<script lang="ts">
import Breakpoints from 'svelte-breakpoints';
import type { Readable } from 'svelte/store';
import type { BreakpointMatch } from 'svelte-breakpoints';

const mediaQueries = {
sm: '(min-width: 0px)',
md: '(min-width: 768px)',
lg: '(min-width: 1024px)',
small: '(min-width: 0px)',
medium: '(min-width: 768px)',
large: '(min-width: 1024px)',
};

let match: Readable<BreakpointMatch>;
// type BreakpointMatch = 'sm' | 'md' | 'lg' | 'xl' | undefined
</script>

<!-- Using named slots -->
<!-- Using snippets as children -->
<Breakpoints queries={mediaQueries}>
<svelte:fragment slot="lg">
{#snippet small()}
<p>Screen is at least 1024px wide</p>
{/snippet}
{#snippet medium()}
<p>Screen is at least 768px wide</p>
{/snippet}
{#snippet large()}
<p>Screen is less than 768px wide</p>
{/snippet}
</Breakpoints>

<!-- Rendering all matching snippets -->
<Breakpoints queries={mediaQueries} renderAll>
{#snippet small()}
<p>Screen is at least 1024px wide</p>
</svelte:fragment>
<svelte:fragment slot="md">
{/snippet}
{#snippet medium()}
<p>Screen is at least 768px wide</p>
</svelte:fragment>
<svelte:fragment slot="sm">
{/snippet}
{#snippet large()}
<p>Screen is less than 768px wide</p>
</svelte:fragment>
{/snippet}
</Breakpoints>

<!-- Binding to "match" -->
<Breakpoints queries={mediaQueries} bind:match>
{#if $match === 'lg'}
<!-- Defining snippets elsewhere and passing in -->
{#snippet default()}
<p>I'm defined elsewhere!</p>
{/snippet}
{#snippet small()}
<p>I'm defined elsewhere too!</p>
{/snippet}
<!-- ... -->
<Breakpoints queries={mediaQueries} content={{ small, default }} />

<!-- Binding to `$matches` -->
<Breakpoints queries={mediaQueries} let:$matches>
{#if $matches.includes('large')}
<p>Screen is at least 1024px wide</p>
{:else}
<p>Screen is less than 1024px wide</p>
{/if}
</Breakpoints>
```

Since any valid CSS media queries can be used, you can also use queries such as `prefers-color-scheme`, `prefers-reduced-motion`, etc.

```html
<script lang="ts">
import Breakpoints from 'svelte-breakpoints';

const mediaQueries = {
reducedMotion: '(prefers-reduced-motion: reduce)',
};
</script>

<Breakpoints queries={mediaQueries}>
{#snippet reducedMotion()}
<p>Reduced motion is enabled</p>
{/snippet}
{#snippet default()}
<p>Reduced motion is not enabled</p>
{/snippet}
</Breakpoints>
```

## Development
To build the package, install deps with `pnpm install`, then run `pnpm build`. This will output the compiled files to the `dist` directory. To run the demo app, use `pnpm dev`.

### Testing
To run the tests, use `pnpm test`. This runs all Playwright and Vitest tests.
To run all Playwright and Vitest tests, use `pnpm test`.

## Issues
If you find any issues, please [open a new issue](https://github.com/kiosion/svelte-breakpoints/issues/new), or submit a pull request!
Expand Down
42 changes: 21 additions & 21 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,30 +43,30 @@
"!dist/**/*.spec.*"
],
"peerDependencies": {
"svelte": "^4.0.0"
"svelte": "^5.0.0-next.50"
},
"devDependencies": {
"@playwright/test": "^1.41.2",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/package": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@playwright/test": "1.41.2",
"@sveltejs/adapter-auto": "3.1.1",
"@sveltejs/kit": "2.5.0",
"@sveltejs/package": "2.2.6",
"@sveltejs/vite-plugin-svelte": "3.0.2",
"@types/eslint": "8.56.2",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-svelte": "^2.35.1",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"publint": "^0.2.7",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.11",
"vitest": "^1.2.2"
"@typescript-eslint/eslint-plugin": "6.21.0",
"@typescript-eslint/parser": "6.21.0",
"eslint": "8.56.0",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-svelte": "2.35.1",
"prettier": "3.2.5",
"prettier-plugin-svelte": "3.1.2",
"publint": "0.2.7",
"svelte": "^5.0.0-next.50",
"svelte-check": "3.6.3",
"tslib": "2.6.2",
"typescript": "5.3.3",
"vite": "5.0.12",
"vitest": "1.2.2"
},
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
Expand Down
Loading
Loading