Merge pull request #3315 from Conduitry/gh-3304

Support RxJS Observables in reassigned stores

src/compiler/compile/render_dom/index.ts

@@ -267,9 +267,9 @@ export default function dom(
 				return `$$subscribe_${name}()`;
 			}
 
-			const subscribe = component.helper('subscribe');
+			const component_subscribe = component.helper('component_subscribe');
 
-			let insert = `${subscribe}($$self, ${name}, $${callback})`;
+			let insert = `${component_subscribe}($$self, ${name}, $${callback})`;
 			if (component.compile_options.dev) {
 				const validate_store = component.helper('validate_store');
 				insert = `${validate_store}(${name}, '${name}'); ${insert}`;
@@ -343,7 +343,7 @@ export default function dom(
 		})
 		.map(({ name }) => deindent`
 			${component.compile_options.dev && `@validate_store(${name.slice(1)}, '${name.slice(1)}');`}
-			@subscribe($$self, ${name.slice(1)}, $$value => { ${name} = $$value; $$invalidate('${name}', ${name}); });
+			@component_subscribe($$self, ${name.slice(1)}, $$value => { ${name} = $$value; $$invalidate('${name}', ${name}); });
 		`);
 
 	const resubscribable_reactive_store_unsubscribers = reactive_stores
@@ -390,7 +390,7 @@ export default function dom(
 
 			const store = component.var_lookup.get(name);
 			if (store && store.reassigned) {
-				return `${$name}, $$unsubscribe_${name} = @noop, $$subscribe_${name} = () => { $$unsubscribe_${name}(); $$unsubscribe_${name} = ${name}.subscribe($$value => { ${$name} = $$value; $$invalidate('${$name}', ${$name}); }) }`;
+				return `${$name}, $$unsubscribe_${name} = @noop, $$subscribe_${name} = () => { $$unsubscribe_${name}(); $$unsubscribe_${name} = @subscribe(${name}, $$value => { ${$name} = $$value; $$invalidate('${$name}', ${$name}); }) }`;
 			}
 
 			return $name;

src/runtime/internal/ssr.ts

@@ -1,6 +1,5 @@
 import { set_current_component, current_component } from './lifecycle';
 import { run_all, blank_object } from './utils';
-import { Readable } from 'svelte/store';
 
 export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
@@ -121,18 +120,6 @@ export function create_ssr_component(fn) {
 	};
 }
 
-/**
- * Get the current value from a store by subscribing and immediately unsubscribing.
- * @param store readable
- */
-export function get_store_value<T>(store: Readable<T>): T | undefined {
-	let value;
-	const unsubscribe: any = store.subscribe(_ => value = _);
-	if (unsubscribe.unsubscribe) unsubscribe.unsubscribe();
-	else unsubscribe();
-	return value;
-}
-
 export function add_attribute(name, value) {
 	if (!value) return '';
 	return ` ${name}${value === true ? '' : `=${typeof value === 'string' ? JSON.stringify(value) : `"${value}"`}`}`;

src/runtime/internal/utils.ts

@@ -48,12 +48,19 @@ export function validate_store(store, name) {
 	}
 }
 
-export function subscribe(component, store, callback) {
+export function subscribe(store, callback) {
 	const unsub = store.subscribe(callback);
+	return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
+}
+
+export function get_store_value(store) {
+	let value;
+	subscribe(store, _ => value = _)();
+	return value;
+}
 
-	component.$$.on_destroy.push(unsub.unsubscribe
-		? () => unsub.unsubscribe()
-		: unsub);
+export function component_subscribe(component, store, callback) {
+	component.$$.on_destroy.push(subscribe(store, callback));
 }
 
 export function create_slot(definition, ctx, fn) {

src/runtime/store/index.ts

@@ -1,5 +1,4 @@
-import { run_all, noop, safe_not_equal, is_function } from 'svelte/internal';
-export { get_store_value as get } from 'svelte/internal';
+import { run_all, noop, safe_not_equal, is_function, get_store_value } from 'svelte/internal';
 
 /** Callback to inform of a value updates. */
 type Subscriber<T> = (value: T) => void;
@@ -182,3 +181,11 @@ export function derived<T, S extends Stores>(
 		};
 	});
 }
+
+/**
+ * Get the current value from a store by subscribing and immediately unsubscribing.
+ * @param store readable
+ */
+export const get = get_store_value as {
+	<T>(store: Readable<T>): (T | undefined);
+};

test/runtime/samples/store-resubscribe-observable/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: `42`,
+};

test/runtime/samples/store-resubscribe-observable/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { writable } from 'svelte/store';
+	function fake_observable(store) {
+		return { subscribe: cb => ({ unsubscribe: store.subscribe(cb) }) };
+	}
+
+	let foo = fake_observable(writable(0));
+	foo = fake_observable(writable(42));
+</script>
+
+{$foo}