Package Exports
- svelte-extras
- svelte-extras/dist/svelte-extras.es.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-extras) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
svelte-extras
Extra methods for Svelte components.
Usage
Install with npm or yarn...
npm install --save svelte-extras...then add to your component methods:
<input bind:value='newTodo'>
<button on:click='push("todos", newTodo)'>add todo</button>
<ul>
{{#each todos as todo, i}}
<li>
<button on:click='splice("todos", i, 1)'>x</button>
{{todo}}
</li>
{{/each}}
</ul>
<script>
import { push, splice } from 'svelte-extras';
export default {
data: function () {
return {
todos: ['add some more todos']
};
},
methods: {
push,
splice
}
};
</script>Available methods
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
These all work exactly as their Array.prototype counterparts, except that the first argument must be the keypath that points to the array. The following are all examples of keypaths:
component.push('todos', 'finish writing this documentation');
component.push('foo.bar.baz', 42);
component.push('rows[4]', cell);Tree-shaking
If you're using a module bundler that supports tree-shaking, such as Rollup, only the methods your components use will be included in your app.
Universal module definition
If you really need it, a UMD build is available at svelte-extras/dist/svelte-extras.umd.js, and will register itself as svelte.extras. We recommend using a module bundler instead, however.