feat: add `readonly` method to convert writable store to readonly (#6518)

pull/8326/head
Alvin Ramskogler 2 years ago committed by GitHub
parent 0bdb59c2e2
commit 9f89a92d31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -452,6 +452,29 @@ import { get } from 'svelte/store';
const value = get(store); const value = get(store);
``` ```
#### `readonly`
```js
readableStore = readonly(writableStore);
```
---
This simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.
```js
import { readonly } from 'svelte/store';
const writableStore = writable(1);
const readableStore = readonly(writableStore);
readableStore.subscribe(console.log);
writableStore.set(2); // console: 2
readableStore.set(2); // ERROR
```
### `svelte/motion` ### `svelte/motion`
@ -853,7 +876,7 @@ The `crossfade` function creates a pair of [transitions](/docs#template-syntax-e
* `delay` (`number`, default 0) — milliseconds before starting * `delay` (`number`, default 0) — milliseconds before starting
* `duration` (`number` | `function`, default 800) — milliseconds the transition lasts * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing) * `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
* `fallback` (`function`) — A fallback [transition](/docs#template-syntax-element-directives-transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent. * `fallback` (`function`) — A fallback [transition](/docs#template-syntax-element-directives-transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
```sv ```sv
<script> <script>

@ -207,6 +207,17 @@ export function derived<T>(stores: Stores, fn: Function, initial_value?: T): Rea
}); });
} }
/**
* Takes a store and returns a new one derived from the old one that is readable.
*
* @param store - store to make readonly
*/
export function readonly<T>(store: Readable<T>): Readable<T> {
return {
subscribe: store.subscribe.bind(store)
};
}
/** /**
* Get the current value from a store by subscribing and immediately unsubscribing. * Get the current value from a store by subscribing and immediately unsubscribing.
* @param store readable * @param store readable

@ -1,5 +1,5 @@
import * as assert from 'assert'; import * as assert from 'assert';
import { readable, writable, derived, get } from '../../store'; import { readable, writable, derived, get, readonly } from '../../store';
describe('store', () => { describe('store', () => {
describe('writable', () => { describe('writable', () => {
@ -419,4 +419,21 @@ describe('store', () => {
assert.equal(get(fake_observable), 42); assert.equal(get(fake_observable), 42);
}); });
}); });
describe('readonly', () => {
it('makes a store readonly', () => {
const writableStore = writable(1);
const readableStore = readonly(writableStore);
assert.equal(get(readableStore), get(writableStore));
writableStore.set(2);
assert.equal(get(readableStore), 2);
assert.equal(get(readableStore), get(writableStore));
assert.throws(() => readableStore.set(3));
});
});
}); });

Loading…
Cancel
Save