Merge branch 'master' into fixing-reactivity-glitches

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Fix type signatures of `writable` and `readable`. It's possible to invoke them without arguments ([#6291](https://github.com/sveltejs/svelte/issues/6291), [#6345](https://github.com/sveltejs/svelte/issues/6345))
+
 ## 3.38.2
 
 * Revert hydration optimisation for the time being ([#6279](https://github.com/sveltejs/svelte/issues/6279))

site/content/docs/03-run-time.md

@@ -245,10 +245,10 @@ This makes it possible to wrap almost any other reactive state handling library
 #### `writable`
 
 ```js
-store = writable(value: any)
+store = writable(value?: any)
 ```
 ```js
-store = writable(value: any, (set: (value: any) => void) => () => void)
+store = writable(value?: any, start?: (set: (value: any) => void) => () => void)
 ```
 
 ---
@@ -297,14 +297,12 @@ unsubscribe(); // logs 'no more subscribers'
 #### `readable`
 
 ```js
-store = readable(value: any, (set: (value: any) => void) => () => void)
+store = readable(value?: any, start?: (set: (value: any) => void) => () => void)
 ```
 
 ---
 
-Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value.
-
-The second argument to `readable` is the same as the second argument to `writable`, except that it is required with `readable` (since otherwise there would be no way to update the store value).
+Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
 
 ```js
 import { readable } from 'svelte/store';

site/content/tutorial/06-bindings/06-select-bindings/text.md

@@ -2,7 +2,7 @@
 title: Select bindings
 ---
 
-We can also use `bind:value` with `<select>` elements. Update line 24:
+We can also use `bind:value` with `<select>` elements. Update line 20:
 
 ```html
 <select bind:value={selected} on:change="{() => answer = ''}">
@@ -10,4 +10,4 @@ We can also use `bind:value` with `<select>` elements. Update line 24:
 
 Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
 
-> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
+> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.

site/content/tutorial/06-bindings/10-media-elements/text.md

@@ -4,7 +4,7 @@ title: Media elements
 
 The `<audio>` and `<video>` elements have several properties that you can bind to. This example demonstrates a few of them.
 
-On line 116, add `currentTime={time}`, `duration` and `paused` bindings:
+On line 58, add `currentTime={time}`, `duration` and `paused` bindings:
 
 ```html
 <video
@@ -41,4 +41,4 @@ The complete set of bindings for `<audio>` and `<video>` is as follows — six *
 * `volume` — a value between 0 and 1
 * `muted` — a boolean value where true is muted
 
-Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+Videos additionally have readonly `videoWidth` and `videoHeight` bindings.

site/content/tutorial/16-special-elements/03-svelte-window/text.md

@@ -4,7 +4,7 @@ title: <svelte:window>
 
 Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with `<svelte:window>`.
 
-On line 33, add the `keydown` listener:
+On line 11, add the `keydown` listener:
 
 ```html
 <svelte:window on:keydown={handleKeydown}/>

site/content/tutorial/16-special-elements/07-svelte-options/text.md

@@ -2,7 +2,7 @@
 title: <svelte:options>
 ---
 
-Lastly, `<svelte:options>` allows you to specify compiler options.
+The `<svelte:options>` element allows you to specify compiler options.
 
 We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the *other* `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
 
@@ -27,4 +27,4 @@ The options that can be set here are:
 * `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
 * `tag="..."` — the name to use when compiling this component as a custom element
 
-Consult the [API reference](docs) for more information on these options.
+Consult the [API reference](docs) for more information on these options.

src/runtime/store/index.ts

@@ -51,7 +51,7 @@ const subscriber_queue = [];
  * @param value initial value
  * @param {StartStopNotifier}start start and stop notifications for subscriptions
  */
-export function readable<T>(value: T, start: StartStopNotifier<T>): Readable<T> {
+export function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T> {
 	return {
 		subscribe: writable(value, start).subscribe
 	};
@@ -62,7 +62,7 @@ export function readable<T>(value: T, start: StartStopNotifier<T>): Readable<T>
  * @param {*=}value initial value
  * @param {StartStopNotifier=}start start and stop notifications for subscriptions
  */
-export function writable<T>(value: T, start: StartStopNotifier<T> = noop): Writable<T> {
+export function writable<T>(value?: T, start: StartStopNotifier<T> = noop): Writable<T> {
 	let stop: Unsubscriber;
 	const subscriptions: Array<Subscription<T>> = [];
 

test/store/index.ts

@@ -22,6 +22,19 @@ describe('store', () => {
 			assert.deepEqual(values, [0, 1, 2]);
 		});
 
+		it('creates an undefined writable store', () => {
+			const store = writable();
+			const values = [];
+
+			const unsubscribe = store.subscribe(value => {
+				values.push(value);
+			});
+
+			unsubscribe();
+
+			assert.deepEqual(values, [undefined]);
+		});
+
 		it('calls provided subscribe handler', () => {
 			let called = 0;
 
@@ -114,6 +127,32 @@ describe('store', () => {
 
 			assert.deepEqual(values, [0, 1, 2]);
 		});
+
+		it('creates an undefined readable store', () => {
+			const store = readable();
+			const values = [];
+
+			const unsubscribe = store.subscribe(value => {
+				values.push(value);
+			});
+
+			unsubscribe();
+
+			assert.deepEqual(values, [undefined]);
+		});
+
+		it('creates a readable store without updater', () => {
+			const store = readable(100);
+			const values = [];
+
+			const unsubscribe = store.subscribe(value => {
+				values.push(value);
+			});
+
+			unsubscribe();
+
+			assert.deepEqual(values, [100]);
+		});
 	});
 
 	const fake_observable = {