mgutz · May 30, 2019 09:05 · May 30, 2019 · May 30, 2019 · May 30, 2019 · May 30, 2019
diff --git a/colors.js b/colors.js
@@ -2,18 +2,18 @@ import {readable, writable} from 'svelte/store';
 
 // could be its own module
 const util = {
-  // similar to createSelector but instead returns a reactive variable
-  createGetter(store, fn) {
-    const w = writable();
+  _root: null,
 
-    store.subscribe(state => {
-      // can take advantage of memoization here
-      w.update(() => {
-        return fn(state);
-      });
+  // similar to createSelector but instead returns a reactive variable
+  createGetter(store, fn, initialData) {
+    return readable(initialData, set => {
+      store.subscribe(state => set(fn(state, this._root)));
     });
+  },
 
-    return w;
+  // set the root store
+  setRoot(root) {
+    this._root = root;
   },
 };
 
@@ -22,7 +22,7 @@ const util = {
 //----------------------------------------------------------------------------
 
 const initialState = {
-  selected: 'red',
+  selected: 'green',
   colors: {
     red: '#f00',
     green: '#0f0',

diff --git a/colors.js b/colors.js
@@ -4,10 +4,10 @@ import {readable, writable} from 'svelte/store';
 const util = {
   // similar to createSelector but instead returns a reactive variable
   createGetter(store, fn) {
-    let w = writable();
+    const w = writable();
 
     store.subscribe(state => {
-      // can memoize here
+      // can take advantage of memoization here
       w.update(() => {
         return fn(state);
       });
@@ -17,8 +17,10 @@ const util = {
   },
 };
 
-// selected should be its own store but the purpose of this example is to show
-// how to deal with nested objects
+//----------------------------------------------------------------------------
+// State
+//----------------------------------------------------------------------------
+
 const initialState = {
   selected: 'red',
   colors: {
@@ -34,16 +36,30 @@ const store = writable(initialState);
 // Actions
 //----------------------------------------------------------------------------
 
-export const add = (k, v) => store.update(state => ({...state, colors: {...state.colors, [k]: v}}));
-export const setSelected = k => store.update(state => ({...state, selected: k}));
+// writable publishes updates so no need to be immutable
+
+export const add = (k, v) =>
+  store.update(state => {
+    state.colors[k] = v;
+    return state;
+  });
+
+export const setSelected = k =>
+  store.update(state => {
+    state.selected = k;
+    return state;
+  });
 
 //----------------------------------------------------------------------------
 // Getters
 //----------------------------------------------------------------------------
 
+// usage: {#each $colorsGetter as [k, v]} ... {/each}
 export const colorsGetter = util.createGetter(store, state => {
   const result = [];
   for (const k in state.colors) {
+    // skip red to show filtering
+    if (k === 'red') continue;
     result.push([k, state.colors[k]]);
   }
   return result;

diff --git a/colors.js b/colors.js
@@ -4,7 +4,7 @@ import {readable, writable} from 'svelte/store';
 const util = {
   // similar to createSelector but instead returns a reactive variable
   createGetter(store, fn) {
-    let w = writable(fn(initialState));
+    let w = writable();
 
     store.subscribe(state => {
       // can memoize here
@@ -41,7 +41,6 @@ export const setSelected = k => store.update(state => ({...state, selected: k}))
 // Getters
 //----------------------------------------------------------------------------
 
-// usage: {#each $colorsGetter as [k, v]}{/each}
 export const colorsGetter = util.createGetter(store, state => {
   const result = [];
   for (const k in state.colors) {

diff --git a/colors.js b/colors.js
@@ -0,0 +1,53 @@
+import {readable, writable} from 'svelte/store';
+
+// could be its own module
+const util = {
+  // similar to createSelector but instead returns a reactive variable
+  createGetter(store, fn) {
+    let w = writable(fn(initialState));
+
+    store.subscribe(state => {
+      // can memoize here
+      w.update(() => {
+        return fn(state);
+      });
+    });
+
+    return w;
+  },
+};
+
+// selected should be its own store but the purpose of this example is to show
+// how to deal with nested objects
+const initialState = {
+  selected: 'red',
+  colors: {
+    red: '#f00',
+    green: '#0f0',
+    blue: '#00f',
+  },
+};
+
+const store = writable(initialState);
+
+//----------------------------------------------------------------------------
+// Actions
+//----------------------------------------------------------------------------
+
+export const add = (k, v) => store.update(state => ({...state, colors: {...state.colors, [k]: v}}));
+export const setSelected = k => store.update(state => ({...state, selected: k}));
+
+//----------------------------------------------------------------------------
+// Getters
+//----------------------------------------------------------------------------
+
+// usage: {#each $colorsGetter as [k, v]}{/each}
+export const colorsGetter = util.createGetter(store, state => {
+  const result = [];
+  for (const k in state.colors) {
+    result.push([k, state.colors[k]]);
+  }
+  return result;
+});
+
+export default store;