caleb-flores/svelte-fast-dimension

Fast dimension bindings using ResizeObservers

svelte-fast-dimension

Fast dimension bindings using ResizeObservers.

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. If your target browsers support ResizeObserver, this can significantly improve dimension binding performance.

Installation

npm install --save-dev svelte-fast-dimension

Usage

// 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:

<script>
	let a, b, c, d;
</script>

<div
	bind:clientWidth="{a}"
	bind:clientHeight="{b}"
	bind:offsetWidth="{c}"
	bind:offsetHeight="{d}"
/>

Recipes

Using with svelte-preprocess

Due to how Svelte applies preprocessors, using this with svelte-preprocess needs a bit more work to make sure we run this preprocessor only after svelte-preprocess finishes. There's an RFC to make this process clearer soon.

At the meantime, you can try one of these libraries:

• svelte-sequential-preprocessor
• svelte-as-markup-preprocessor
• My custom gist

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 remedy this, add svelte-fast-dimension/action to optimizeDeps.include.

Packages

Package	Changelog
svelte-fast-dimension	Changelog

Development

• pnpm i to install dependencies
• pnpm dev to run development build
• pnpm test to run tests
• pnpm build to run build

License

MIT