fix parsing events

treeder · Oct 20, 2023 · 07679fa · 07679fa
1 parent 992fe2d
commit 07679fa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/example/counter-component.js b/example/counter-component.js
@@ -7,12 +7,14 @@ import state from '../state.js'
 
 class CounterComponent extends LitElement {
     static properties = {
-        counter: { type: Number }
+        counter: { type: Number },
+        counter2: { type: String },
     }
 
     constructor() {
         super();
         this.counter = 0
+        this.counter2 = ''
     }
 
     connectedCallback() {
@@ -23,18 +25,24 @@ class CounterComponent extends LitElement {
             console.log("counter event", e)
             this.counter = e.detail.value
         })
+        state.addEventListener('counter2', (e) => {
+            console.log("counter2 event", e)
+            this.counter2 = e.detail.value
+        })
     }
 
     render() {
         return html`
             <div>${this.counter}</div>
+            <div>${this.counter2}</div>
             <md-filled-button @click=${this.increment}>Increment</md-filled-button>
         `
     }
 
     increment() {
         this.counter++
         state.set('counter', this.counter)
+        state.set('counter2', `c:${this.counter}`)
     }
 
 }

diff --git a/state.js b/state.js
@@ -10,14 +10,18 @@ export class State extends EventTarget { // implements EventTarget (partially an
         this.loadState()
 
         window.addEventListener('storage', (e) => {
-            // console.log("storage event", e)
             if (e.key.startsWith(State.statePrefix)) {
+                console.log("storage event", e)
                 let key = e.key.substring(State.statePrefix.length)
+                let value = null
+                if (e.newValue) {
+                    value = JSON.parse(e.newValue)
+                }
                 this.dispatchEvent(new CustomEvent(key, {
                     detail: {
-                        action: e.newValue ? 'set' : 'delete',
+                        action: value ? 'set' : 'delete',
                         key: key,
-                        value: e.newValue,
+                        value: value,
                     },
                 }))
             }
@@ -44,6 +48,7 @@ export class State extends EventTarget { // implements EventTarget (partially an
         // the alternative way using individual keys
         for (let key in localStorage) {
             let value = localStorage.getItem(key)
+            value = JSON.parse(value)
             this.stateMap.set(key, value)
         }
         return state