enhancement: make svelte stores react to query/path changes

Author: codediodeio

README.md

@@ -49,7 +49,7 @@ Create a Svelte App and install Firebase.
 npx degit sveltejs/template fireapp
 cd fireapp
 
-npm install sveltefire firebase
+npm i && npm install sveltefire firebase
 ```
 
 
@@ -375,6 +375,8 @@ Slot Props & Events:
 
 - *data* collection data as array. 
 - *ref* CollectionReference for writes
+- *first* the first result in the query, useful for pagination. 
+- *last* the last result in the query, useful for pagination. 
 - *error* current error
 
 ```html
@@ -385,6 +387,8 @@ Slot Props & Events:
     log
     let:data={comments} 
     let:ref={commentsRef} 
+    let:last={firstComment}
+    let:first={lastComment}
     on:data
     on:ref
 >

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "name": "sveltefire",
   "svelte": "src/index.js",
   "main": "dist/index.js",

src/Collection.svelte

@@ -1,40 +1,54 @@
 <script>
-    export let path;
-    export let query = null;
-    export let traceId = '';
-    export let log = false;
-    export let startWith = undefined;
-    export let maxWait = 10000;
-    import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-
-    import { collectionStore } from './firestore';
-
-    const store = collectionStore(path, query, { startWith, traceId, log, maxWait });
-
-    const dispatch = createEventDispatcher();
-
-    let unsub;
-
-    onMount(() => {
-        dispatch('ref', { ref: store.ref });
-
-        unsub = store.subscribe(data => {
-            dispatch('data', {
-                data
-            });
-        });
+  export let path;
+  export let query = null;
+  export let traceId = "";
+  export let log = false;
+  export let startWith = undefined;
+  export let maxWait = 10000;
+
+  import { onDestroy, createEventDispatcher } from "svelte";
+
+  import { collectionStore } from "./firestore";
+
+  let store = collectionStore(path, query, {
+    startWith,
+    traceId,
+    log,
+    maxWait
+  });
+
+  const dispatch = createEventDispatcher();
+
+  let unsub;
+
+  // Props changed
+  $: {
+    if (unsub) {
+      unsub();
+      store = collectionStore(path, query, {
+        startWith,
+        traceId,
+        log,
+        maxWait
+      });
+    }
+
+    dispatch("ref", { ref: store.ref });
+
+    unsub = store.subscribe(data => {
+      dispatch("data", {
+        data
+      });
     });
+  }
 
-    onDestroy(() => unsub());
-
-
+  onDestroy(() => unsub());
 </script>
 
-
 {#if $store}
-    <slot data={$store} ref={store.ref} error={store.error}></slot>
+  <slot data={$store} ref={store.ref} error={store.error} />
 {:else if store.loading}
-    <slot name="loading"></slot>
+  <slot name="loading" />
 {:else}
-    <slot name="fallback"></slot>
-{/if}
+  <slot name="fallback" />
+{/if}

src/Doc.svelte

@@ -1,38 +1,52 @@
 <script>
-    export let path;
-    export let log = false;
-    export let traceId = '';
-    export let startWith = undefined;  // Why? Firestore returns null for docs that don't exist, predictible loading state. 
-    export let maxWait = 10000;
-
-    import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-    import { docStore } from './firestore';
-    
-    
-    let store = docStore(path, { startWith, traceId, log, maxWait });
-
-    // CUSTOM EVENTS
-
-    const dispatch = createEventDispatcher();
-
-    let unsub;
-
-    onMount(() => {
-        dispatch('ref', { ref: store.ref });
-        unsub = store.subscribe(data => {
-            dispatch('data', {
-                data
-            });
-        });
+  export let path;
+  export let log = false;
+  export let traceId = "";
+  export let startWith = undefined; // Why? Firestore returns null for docs that don't exist, predictible loading state.
+  export let maxWait = 10000;
+
+  import { onDestroy, createEventDispatcher } from "svelte";
+  import { docStore } from "./firestore";
+
+  let store = docStore(path, {
+    startWith,
+    traceId,
+    log,
+    maxWait
+  });
+
+  const dispatch = createEventDispatcher();
+
+  let unsub;
+
+  // Props changed
+  $: {
+    if (unsub) {
+      unsub();
+      store = docStore(path, {
+        startWith,
+        traceId,
+        log,
+        maxWait
+      });
+    }
+
+    dispatch("ref", { ref: store.ref });
+
+    unsub = store.subscribe(data => {
+      dispatch("data", {
+        data
+      });
     });
+  }
 
-    onDestroy(() => unsub());
+  onDestroy(() => unsub());
 </script>
 
 {#if $store}
-    <slot data={$store} ref={store.ref} firestore={store.firestore} error={store.error}></slot>
+  <slot data={$store} ref={store.ref} error={store.error} />
 {:else if store.loading}
-    <slot name="loading"></slot>
+  <slot name="loading" />
 {:else}
-    <slot name="fallback"></slot>
-{/if}
+  <slot name="fallback" />
+{/if}