STORE_NAME variable created

package-lock.json

@@ -69,9 +69,9 @@
       }
     },
     "@rollup/plugin-node-resolve": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-10.0.0.tgz",
-      "integrity": "sha512-sNijGta8fqzwA1VwUEtTvWCx2E7qC70NMsDh4ZG13byAXYigBNZMxALhKUSycBks5gupJdq0lFrKumFrRZ8H3A==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.0.1.tgz",
+      "integrity": "sha512-ltlsj/4Bhwwhb+Nb5xCz/6vieuEj2/BAkkqVIKmZwC7pIdl8srmgmglE4S0jFlZa32K4qvdQ6NHdmpRKD/LwoQ==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^3.1.0",
@@ -79,7 +79,7 @@
         "builtin-modules": "^3.1.0",
         "deepmerge": "^4.2.2",
         "is-module": "^1.0.0",
-        "resolve": "^1.17.0"
+        "resolve": "^1.19.0"
       }
     },
     "@rollup/pluginutils": {
@@ -568,9 +568,9 @@
       "dev": true
     },
     "estree-walker": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz",
-      "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
     "esutils": {

package.json

@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
     "eslint": "^7.15.0",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.0.0",

src/App.svelte

@@ -1,152 +1,47 @@
 <script>
-    import { onMount } from 'svelte'
-    import { writable } from 'svelte/store'
-    import { fade } from 'svelte/transition'
+    import { fade } from "svelte/transition";
+    import { chores, STORE_NAME } from "./stores/twiliostore";
 
-    let twilioReady = false
-    let mounted = false
-    let syncClient, getList, getItems, pushItem, removeItem, updateItem, chores
+    let newChore = "";
 
-    onMount(() => {
-        mounted = true
-        if (twilioReady) {
-            setupTwilioClient()
-        }
-    })
-
-    const twilioLoaded = () => {
-        twilioReady = true
-        if (mounted) {
-            setupTwilioClient()
-        }
-    }
-
-    const setupTwilioClient = async () => {
-        try {
-            const response = await fetch('http://localhost:5001/token')
-            const responseJson = await response.json()
-            const token = responseJson.token
-            syncClient = new Twilio.Sync.Client(token, { logLevel: 'info' })
-        } catch (e) {
-          console.log(e)
-        }
-      
-        syncClient.on('connectionStateChanged', state => {
-            if (state != 'connected') {
-                console.log(`Sync is not live (websocket connection ${state})`)
-            } else {
-                console.log('Sync is live!')
-            }
-        })
-
-        getList = async name => syncClient.list(name)
-
-        getItems = async (listName, from, pageSize, order) => {
-            const list = await getList(listName)
-            const items = await list.getItems({from, pageSize, order})
-            return items.items.map(item => item.data)
-        }
-
-        pushItem = async (listName, item) => {
-            const list = await getList(listName)
-            try { 
-                const result = await list.push(item)
-                return result.data
-            } catch (e) {
-                console.log(e)
-            }
-        }
-
-        removeItem = async (listName, index) => {
-            const list = await getList(listName)
-            try { 
-                await list.remove(index)
-            } catch (e) {
-                console.log(e)
-            }
-        }
-
-        updateItem = async (listName, index, value) => {
-            const list = await getList(listName)
-            try { 
-                await list.set(index, value)
-            } catch (e) {
-                console.log(e)
-            }
-        }
-
-        const createSyncStore = listName => {
-            const { set, subscribe, update } = writable([])
-
-            getItems(listName).then(items => set(items))
-
-            getList(listName).then(choreList => {
-                choreList.on('itemAdded', item => {
-                    update(existing => existing.concat(item.item))
-                })
-                choreList.on('itemRemoved', args => {
-                    update(existing => existing.filter(item => item.index !== args.index))
-                })
-                choreList.on('itemUpdated', args => {
-                    update(existing => existing.map(item => {
-                        if (item.index === args.item.index) {
-                            item.value = args.item.value
-                        }
-                    }))
-                })
-            })
-
-            return {
-                subscribe,
-                add: chore => pushItem(listName, { chore }),
-                delete: index => removeItem(listName, index),
-                update: (index, value) => updateItem(listName, index, value)
-            }
-        }
-
-        chores = createSyncStore('chores')
-    }
-
-    $: console.log($chores)
-
-    let newChore = ''
     const createChore = () => {
-        chores.add(newChore)
-        newChore = ''
-    }
-
-    const deleteChore = index => chores.delete(index)
-
-    const updateChore = (index, newValue) => {
-        chores.update(index, newValue)
-    }
-
-
+        pushItem(STORE_NAME, { chore: newChore });
+        newChore = "";
+    };
+    const deleteChore = (index) => removeItem(STORE_NAME, index);
+    const updateChore = (index, newValue) => chores.update(index, newValue);
 </script>
 
 <svelte:head>
-    <script src="//media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js" on:load={twilioLoaded}></script>
-    <script src="http://api.ipify.org?format=jsonp&callback=getIP"></script>
-    <script>function getIP(json) { console.log(json.ip) }</script>
+    <script src="http://api.ipify.org?format=jsonp&callback=getIP">
+    </script>
+    <script>
+        function getIP(json) {
+            console.log(json.ip);
+        }
+    </script>
 </svelte:head>
 
-<nav>
-</nav>
+<nav />
 
 <main path="/">
     <form on:submit|preventDefault={createChore}>
-        <input bind:value={newChore} type=text>
-        <input style="cursor:pointer" type=submit disabled={newChore === ""}>
+        <input bind:value={newChore} type="text" />
+        <input
+            style="cursor:pointer"
+            type="submit"
+            disabled={newChore === ''} />
     </form>
     <div>
         {#if $chores && $chores.length > 0}
             {#each $chores as chore}
                 <div in:fade>
                     {chore.value.chore}
-                    <button style="cursor: pointer" on:click={() => deleteChore(chore.index)}>delete</button>
+                    <button
+                        style="cursor: pointer"
+                        on:click={() => deleteChore(chore.index)}>delete</button>
                 </div>
             {/each}
         {/if}
     </div>
 </main>
-

src/main.js

@@ -1,4 +1,5 @@
 import App from './App.svelte';
+import './twilioInit';
 
 const app = new App({
 	target: document.body,

src/stores/twiliostore.js

@@ -0,0 +1,30 @@
+import { writable } from 'svelte/store';
+
+export const STORE_NAME = 'chores';
+
+function createTwilioStore() {
+    const { subscribe, update, set } = writable([]);
+
+    return {
+        subscribe,
+        getItems: (items) => set(items),
+        itemAdded: (item) => update((existing) => existing.concat(item.item)),
+        itemRemoved: (args) =>  update((existing) =>
+          existing.filter((item) => item.index !== args.index)
+        ),
+        itemUpdated: (args) => {
+          update((existing) =>
+              existing.map((item) => {
+                  if (item.index === args.item.index) {
+                      item.value = args.item.value;
+                  }
+              })
+          );
+      }
+    };
+}
+
+export const chores = createTwilioStore();
+
+
+

src/twilioInit.js

@@ -0,0 +1,69 @@
+import { chores, STORE_NAME } from "./stores/twiliostore";
+
+(async () => {
+  let syncClient;
+    try {
+      const response = await fetch("http://localhost:5001/token");
+      const responseJson = await response.json();
+      const token = responseJson.token;
+      syncClient = new Twilio.Sync.Client(token, { logLevel: "info" });
+  } catch (e) {
+      console.log(e);
+  }
+
+  syncClient.on("connectionStateChanged", (state) => {
+      if (state != "connected") {
+          console.log(`Sync is not live (websocket connection ${state})`);
+      } else {
+          console.log("Sync is live!");
+      }
+  });
+
+  const getList = async (name) => syncClient.list(name);
+
+  const getItems = async (listName, from, pageSize, order) => {
+      const list = await getList(listName);
+      const items = await list.getItems({ from, pageSize, order });
+      return items.items.map((item) => item.data);
+  };
+
+  globalThis.pushItem = async (listName, item) => {
+      const list = await getList(listName);
+      console.log('list: ', list);
+      try {
+          const result = await list.push(item);
+          console.log('result: ', result);
+          return result.data;
+      } catch (e) {
+          console.log(e);
+      }
+  };
+
+  globalThis.removeItem = async (listName, index) => {
+      const list = await getList(listName);
+      try {
+          await list.remove(index);
+      } catch (e) {
+          console.log(e);
+      }
+  };
+
+  globalThis.updateItem = async (listName, index, value) => {
+      const list = await getList(listName);
+      try {
+          await list.set(index, value);
+      } catch (e) {
+          console.log(e);
+      }
+  };
+
+  // as soon as Twilio is working, we write on the store
+  getItems(STORE_NAME).then((items) => chores.getItems(items));
+
+  // and we declare the listeners to update the store
+  getList(STORE_NAME).then((choreList) => {
+        choreList.on("itemAdded", (item) => chores.itemAdded(item));
+        choreList.on("itemRemoved", (args) => chores.itemRemoved(args));
+        choreList.on("itemUpdated", (args) => chores.itemUpdated(args));
+    });
+})();