Description

A vite plugin for svelte that by default, if a object is spread into a component, it will bind each property in the object as props.

See: https://svelte.dev/tutorial/component-bindings

Usage

npm i vite-plugin-svelte-bind-spread

Basic

// vite.config.js
import bindSpread from 'vite-plugin-svelte-bind-spread';

export default defineConfig({
  plugins: [bindSpread(), svelte()], // Note: bindSpread() must be the first plugin
});

Effects

<!-- App Component -->
<script>
  import Test from './Test.svelte';

  let testName = 'svelte',
    version = 3,
    speed = 'blazing',
    website = 'https://svelte.dev';

  const props = {
    name: testName,
    version,
    speed,
    website,
  };
</script>

<div>{version}</div>

<Test {...props} />
<!-- The above will be replaced with the code below, allowing the Test component to use the exported variable for value setting also -->
<!-- <Test bind:name={testName} bind:version bind:speed bind:website /> -->

<!-- Test Component Example -->
<script>
  export let name,
        version,
        speed,
        website;
</script>

<button on:click={() => version = version + 1}>
  button {version}
</button>