https://github.com/bluwy/svelte-fast-dimension
Fast dimension bindings using ResizeObserver
https://github.com/bluwy/svelte-fast-dimension
resizeobserver svelte
Last synced: 3 months ago
JSON representation
Fast dimension bindings using ResizeObserver
- Host: GitHub
- URL: https://github.com/bluwy/svelte-fast-dimension
- Owner: bluwy
- License: mit
- Created: 2021-10-07T17:23:20.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-09T01:31:13.000Z (5 months ago)
- Last Synced: 2025-03-31T15:18:14.129Z (3 months ago)
- Topics: resizeobserver, svelte
- Language: JavaScript
- Homepage: https://npmjs.com/svelte-fast-dimension
- Size: 235 KB
- Stars: 42
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-fast-dimension
Fast [dimension bindings](https://svelte.dev/tutorial/dimensions) using ResizeObserver.
> [!NOTE]
> This package is no longer needed if you're using Svelte 5 as it now uses `ResizeObserver` itself.
**Why?** Svelte 3 & 4 used an iframe technique to measure dimensions so it works in older browsers. However, creating multiple iframes has a big performance impact and sometimes [quirkiness](https://github.com/sveltejs/svelte/issues/4776). If you already target browsers that support [ResizeObserver](https://caniuse.com/resizeobserver), this can significantly improve dimension binding performance.
## Installation
```bash
npm install --save-dev svelte-fast-dimension
```
## Usage
```js
// svelte.config.js
import { fastDimension } from 'svelte-fast-dimension'
export default {
preprocess: [fastDimension()]
}
```
Use dimension bindings as usual, it will use ResizeObservers under-the-hood:
```html
let a, b, c, d
```
## Recipes
### Vite
`svelte-fast-dimension` injects an import from `svelte-fast-dimension/action` when preprocessing. This won't be detected during Vite's prebundling phase, and will cause on-the-fly prebundling which slows startup time. To fix this, add `svelte-fast-dimension/action` to [optimizeDeps.include](https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-include).
## Sponsors
## License
MIT