From 9f89a92d31156502c0b04ec6dd53952face37ca7 Mon Sep 17 00:00:00 2001
From: Alvin Ramskogler <62756994+blaumeise20@users.noreply.github.com>
Date: Thu, 23 Feb 2023 11:17:34 +0000
Subject: [PATCH] feat: add `readonly` method to convert writable store to
 readonly (#6518)

---
 site/content/docs/04-run-time.md | 25 ++++++++++++++++++++++++-
 src/runtime/store/index.ts       | 11 +++++++++++
 test/store/index.ts              | 19 ++++++++++++++++++-
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/04-run-time.md b/site/content/docs/04-run-time.md
index ef21112034..72b0736ac6 100644
--- a/site/content/docs/04-run-time.md
+++ b/site/content/docs/04-run-time.md
@@ -452,6 +452,29 @@ import { get } from 'svelte/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`
 
@@ -853,7 +876,7 @@ The `crossfade` function creates a pair of [transitions](/docs#template-syntax-e
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
 * `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
 <script>
diff --git a/src/runtime/store/index.ts b/src/runtime/store/index.ts
index 16832f10d9..ee277c6216 100644
--- a/src/runtime/store/index.ts
+++ b/src/runtime/store/index.ts
@@ -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.
  * @param store readable
diff --git a/test/store/index.ts b/test/store/index.ts
index 389f29244b..7e8bdb2f64 100644
--- a/test/store/index.ts
+++ b/test/store/index.ts
@@ -1,5 +1,5 @@
 import * as assert from 'assert';
-import { readable, writable, derived, get } from '../../store';
+import { readable, writable, derived, get, readonly } from '../../store';
 
 describe('store', () => {
 	describe('writable', () => {
@@ -419,4 +419,21 @@ describe('store', () => {
 			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));
+		});
+
+	});
 });