https://github.com/bluwy/svelte-fast-dimension

Fast dimension bindings using ResizeObserver
https://github.com/bluwy/svelte-fast-dimension

resizeobserver svelte

Last synced: about 15 hours 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 (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-09-26T16:33:18.000Z (3 months ago)
• Last Synced: 2024-12-17T00:12:04.263Z (8 days ago)
• Topics: resizeobserver, svelte
• Language: JavaScript
• Homepage: https://npmjs.com/svelte-fast-dimension
• Size: 202 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.

**Why?** Svelte currently uses 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 your target browsers 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