From 5173f9cfe59ab9deb2dc873b9f3726810d481e85 Mon Sep 17 00:00:00 2001
From: Roger Chapman <rogchap@gmail.com>
Date: Sun, 13 Dec 2020 17:28:22 +1100
Subject: [PATCH 1/3] Fix to broken state change updates on some fields

---
 CHANGELOG.md                             |  1 +
 frontend/src/controls/TextArea.svelte    |  2 +-
 frontend/src/views/FieldBool.svelte      |  6 +-----
 frontend/src/views/FieldBoolValue.svelte |  6 +-----
 frontend/src/views/FieldEnum.svelte      |  6 +-----
 frontend/src/views/FieldMessage.svelte   |  6 +-----
 frontend/src/views/FieldOneof.svelte     |  6 +-----
 frontend/src/views/FieldText.svelte      |  5 +----
 frontend/src/views/RepeatedField.svelte  | 13 +++++++------
 9 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7822212..3fa14b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Oneof value that has a message with no fields would cause the UI to become unresponsive
+- Oneof with repeated nested messages would loose state, resulting in inability to add repeated values
 
 ## [v0.3.2] - 2020-11-25
 
diff --git a/frontend/src/controls/TextArea.svelte b/frontend/src/controls/TextArea.svelte
index 513b294..aa36ba2 100644
--- a/frontend/src/controls/TextArea.svelte
+++ b/frontend/src/controls/TextArea.svelte
@@ -1,6 +1,6 @@
 <script>
   import InputLabel from "./InputLabel.svelte";
-  export let label;
+  export let label = undefined;
   export let hint = "";
   export let value = "";
   export let width = "400px";
diff --git a/frontend/src/views/FieldBool.svelte b/frontend/src/views/FieldBool.svelte
index 5b6d604..425571e 100644
--- a/frontend/src/views/FieldBool.svelte
+++ b/frontend/src/views/FieldBool.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { onMount, beforeUpdate } from 'svelte';
   import Checkbox from "../controls/Checkbox.svelte";
 
   export let field;
@@ -9,16 +8,13 @@
 
   let val;
 
-  const resetState = () => {
+  $: {
     val = key !== undefined ? key : idx >= 0 ? idx : field.name;
     if (!state[val]) {
       state[val] = false;
     }
   }
 
-  onMount(resetState)
-  beforeUpdate(resetState)
-
   const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
   const removeable = idx >= 0;
 </script>
diff --git a/frontend/src/views/FieldBoolValue.svelte b/frontend/src/views/FieldBoolValue.svelte
index e3b15f6..bc71be9 100644
--- a/frontend/src/views/FieldBoolValue.svelte
+++ b/frontend/src/views/FieldBoolValue.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { onMount, beforeUpdate } from 'svelte';
   import Radio from "../controls/Radio.svelte";
 
   export let field;
@@ -9,16 +8,13 @@
   
   let val;
 
-  const resetState = () => {
+  $: {
     val = key !== undefined ? key : idx >= 0 ? idx : field.name;
   }
 
   const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
   const removeable = idx >= 0;
 
-  onMount(resetState)
-  beforeUpdate(resetState)
-
   const options = [
     {label: "nil", value: undefined},
     {label: "false", value: false},
diff --git a/frontend/src/views/FieldEnum.svelte b/frontend/src/views/FieldEnum.svelte
index 0468728..bd908c7 100644
--- a/frontend/src/views/FieldEnum.svelte
+++ b/frontend/src/views/FieldEnum.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { onMount, beforeUpdate } from 'svelte';
   import Dropdown from "../controls/Dropdown.svelte";
 
   export let field;
@@ -9,16 +8,13 @@
 
   let val;
 
-  const resetState = () => {
+  $: {
     val = key !== undefined ? key : idx >= 0 ? idx : field.name;
     if (!state[val]) {
       state[val] = field.enum[0];
     }
   }
   
-  onMount(resetState)
-  beforeUpdate(resetState)
-
   const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
   const removeable = idx >= 0;
 
diff --git a/frontend/src/views/FieldMessage.svelte b/frontend/src/views/FieldMessage.svelte
index ad66994..cc8997c 100644
--- a/frontend/src/views/FieldMessage.svelte
+++ b/frontend/src/views/FieldMessage.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { onMount, beforeUpdate } from 'svelte';
   import MessageField from "./MessageField.svelte";
   import InputLabel from "../controls/InputLabel.svelte";
   import Checkbox from "../controls/Checkbox.svelte";
@@ -15,15 +14,12 @@
   const removeable = idx >= 0;
 
   let val;
-  const resetState = () => {
+  $: {
     val = key !== undefined ? key : idx >= 0 ? idx : name;
     if (!state[val] && (oneof || idx >= 0)) {
       state[val] = {}
     }
   }
-  onMount(resetState)
-  beforeUpdate(resetState)
-
 
   const onEnabledChanged = ({ detail: checked}) => {
     state[val] = checked ? {} : null
diff --git a/frontend/src/views/FieldOneof.svelte b/frontend/src/views/FieldOneof.svelte
index 11791ec..0ba5c43 100644
--- a/frontend/src/views/FieldOneof.svelte
+++ b/frontend/src/views/FieldOneof.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { onMount, beforeUpdate } from 'svelte';
   import InputLabel from "../controls/InputLabel.svelte";
   import Dropdown from "../controls/Dropdown.svelte";
   import MessageField from "./MessageField.svelte";
@@ -10,7 +9,7 @@
   const items = field.oneof.map(x => x.name);
   let selectedValue = undefined;
 
-  const selectValue = () => {
+  $: {
     const k = Object.keys(state)
     checkSelected:
     for (let i = 0; i < k.length; i++) {
@@ -23,9 +22,6 @@
     }
   }
 
-  onMount(selectValue)
-  beforeUpdate(selectValue)
-
   const onSelectChanged = ({ detail: { value }}) => {
     if (selectedValue) {
       delete state[selectedValue]
diff --git a/frontend/src/views/FieldText.svelte b/frontend/src/views/FieldText.svelte
index c02b969..0699e96 100644
--- a/frontend/src/views/FieldText.svelte
+++ b/frontend/src/views/FieldText.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { onMount, beforeUpdate } from 'svelte';
   import TextField from "../controls/TextField.svelte";
   import TextArea from "../controls/TextArea.svelte";
 
@@ -12,7 +11,7 @@
 
   let val;
 
-  const resetState = () => {
+  $: {
     val = key !== undefined ? key : idx >= 0 ? idx : field.name;
     if (!state[val]) {
       state[val] = key !== undefined ? "" : null;
@@ -22,8 +21,6 @@
   const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
   const removeable = idx >= 0;
 
-  onMount(resetState)
-  beforeUpdate(resetState)
 </script>
 
 {#if multiline }
diff --git a/frontend/src/views/RepeatedField.svelte b/frontend/src/views/RepeatedField.svelte
index 55a43fa..6bcd3bf 100644
--- a/frontend/src/views/RepeatedField.svelte
+++ b/frontend/src/views/RepeatedField.svelte
@@ -15,10 +15,8 @@
             cloneTarget[key] = clone(target[key]);
         }
         return cloneTarget;
-    } else {
-        return target;
-    }
-    return f
+    } 
+    return target;
   }
 
   hint = field.kind;
@@ -26,10 +24,13 @@
     hint = field.message.full_name;
   }
 
-  if (!state[field.name]) {
-    state[field.name] = []
+  $: {
+    if (!state[field.name]) {
+      state[field.name] = []
+    }
   }
 
+
   const onAddButtonClicked = () => {
     state[field.name] = [...state[field.name], null]
   }

From fb64dcae7b874212da5b3257270553c10d2226d4 Mon Sep 17 00:00:00 2001
From: Roger Chapman <rogchap@gmail.com>
Date: Sun, 13 Dec 2020 17:49:38 +1100
Subject: [PATCH 2/3] all repeated fields could loose state

---
 CHANGELOG.md                 | 2 +-
 internal/server/foobar.proto | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3fa14b7..a7dac75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,7 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Oneof value that has a message with no fields would cause the UI to become unresponsive
-- Oneof with repeated nested messages would loose state, resulting in inability to add repeated values
+- State loss between methods causing repeated fields to be reset to empty and the "add" button becoming unresponsive
 
 ## [v0.3.2] - 2020-11-25
 
diff --git a/internal/server/foobar.proto b/internal/server/foobar.proto
index 47f88e1..51b93e0 100644
--- a/internal/server/foobar.proto
+++ b/internal/server/foobar.proto
@@ -67,6 +67,7 @@ message BarRequest {
     repeated Baz type_repeated_enum = 4;
     repeated bytes type_repeated_bytes = 5;
     repeated Bar type_repeated_message = 6;
+    repeated uint32 uint32repeated = 7;
 }
 
 message BarResponse {}

From 5ceca53f73d2df55ee55da87169e427ff5ba1da9 Mon Sep 17 00:00:00 2001
From: Roger Chapman <rogchap@gmail.com>
Date: Sun, 13 Dec 2020 21:51:13 +1100
Subject: [PATCH 3/3] move all state changes within correct update handlers

---
 frontend/src/views/FieldBool.svelte      |  6 ++--
 frontend/src/views/FieldBoolValue.svelte |  8 ++---
 frontend/src/views/FieldEnum.svelte      |  7 ++--
 frontend/src/views/FieldMap.svelte       | 45 ++++++++++++------------
 frontend/src/views/FieldMessage.svelte   |  6 ++--
 frontend/src/views/FieldNilText.svelte   |  9 +++--
 frontend/src/views/FieldOneof.svelte     |  3 +-
 frontend/src/views/FieldText.svelte      |  7 ++--
 frontend/src/views/FieldWellKnown.svelte | 23 ++++++------
 frontend/src/views/RepeatedField.svelte  |  8 ++---
 10 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/frontend/src/views/FieldBool.svelte b/frontend/src/views/FieldBool.svelte
index 425571e..862c294 100644
--- a/frontend/src/views/FieldBool.svelte
+++ b/frontend/src/views/FieldBool.svelte
@@ -6,17 +6,17 @@
   export let key;
   export let idx;
 
-  let val;
+  let val, labelColor, removeable;
 
   $: {
     val = key !== undefined ? key : idx >= 0 ? idx : field.name;
     if (!state[val]) {
       state[val] = false;
     }
+    labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
+    removeable = idx >= 0;
   }
 
-  const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
-  const removeable = idx >= 0;
 </script>
 
 <style>
diff --git a/frontend/src/views/FieldBoolValue.svelte b/frontend/src/views/FieldBoolValue.svelte
index bc71be9..3dcf167 100644
--- a/frontend/src/views/FieldBoolValue.svelte
+++ b/frontend/src/views/FieldBoolValue.svelte
@@ -6,21 +6,19 @@
   export let idx;
   export let key;
   
-  let val;
+  let val, labelColor, removeable;
 
   $: {
     val = key !== undefined ? key : idx >= 0 ? idx : field.name;
+    labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
+    removeable = idx >= 0;
   }
 
-  const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
-  const removeable = idx >= 0;
-
   const options = [
     {label: "nil", value: undefined},
     {label: "false", value: false},
     {label: "true", value: true},
   ];
-
 </script>
 
 <style>
diff --git a/frontend/src/views/FieldEnum.svelte b/frontend/src/views/FieldEnum.svelte
index bd908c7..f29cc07 100644
--- a/frontend/src/views/FieldEnum.svelte
+++ b/frontend/src/views/FieldEnum.svelte
@@ -6,17 +6,16 @@
   export let key;
   export let idx;
 
-  let val;
+  let val, labelColor, removeable;
 
   $: {
     val = key !== undefined ? key : idx >= 0 ? idx : field.name;
     if (!state[val]) {
       state[val] = field.enum[0];
     }
+    labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
+    removeable = idx >= 0;
   }
-  
-  const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
-  const removeable = idx >= 0;
 
   const onSelectChanged = ({ detail: { value }}) => {
     state[val] = value;
diff --git a/frontend/src/views/FieldMap.svelte b/frontend/src/views/FieldMap.svelte
index 792ba05..8468ee4 100644
--- a/frontend/src/views/FieldMap.svelte
+++ b/frontend/src/views/FieldMap.svelte
@@ -17,34 +17,35 @@
   // changes we swap in and out the state object and where it should be tracked: map items or
   // the real state object. Luckly JS Objects can be passed by reference so this works.
 
-  beforeUpdate(() => {
-    if (!state[field.name] || !mapItems[field.full_name]) {
-      return
+  let keyType  = field.map_key.kind;
+  let valType = field.map_value.kind;
+
+  $: {
+    if (state[field.name] && mapItems[field.full_name]) {
+      const stateKeys = Object.keys(state[field.name])
+      if (mapItems[field.full_name].length === 0 && stateKeys.length > 0) {
+        stateKeys.forEach(k => {
+          mapItems[field.full_name].push({key: k});
+        })
+        mapItems[field.full_name] = mapItems[field.full_name];
+      }
     }
-    const stateKeys = Object.keys(state[field.name])
-    if (mapItems[field.full_name].length === 0 && stateKeys.length > 0) {
-      stateKeys.forEach(k => {
-        mapItems[field.full_name].push({key: k});
-      })
-      mapItems[field.full_name] = mapItems[field.full_name];
+
+    keyType  = field.map_key.kind;
+    valType = field.map_value.kind;
+    if (field.map_value.kind === "message" || field.map_value.kind === "group") {
+      valType = field.map_value.message.name;
     }
-  })
 
-  const keyType  = field.map_key.kind;
-  let valType = field.map_value.kind;
-  let valMsg = false;
-  if (field.map_value.kind === "message" || field.map_value.kind === "group") {
-    valType = field.map_value.message.name;
-    valMsg = true;
-  }
+    if (!mapItems[field.full_name]) {
+      mapItems[field.full_name] = [];
+    }
 
-  if (!mapItems[field.full_name]) {
-    mapItems[field.full_name] = [];
+    if (!state[field.name]) {
+      state[field.name] = {};
+    }
   }
 
-  if (!state[field.name]) {
-    state[field.name] = {};
-  }
 
   const onAddButtonClicked = () => {
     mapItems[field.full_name] = [...mapItems[field.full_name], {key: "", ref: {}}]; 
diff --git a/frontend/src/views/FieldMessage.svelte b/frontend/src/views/FieldMessage.svelte
index cc8997c..61b4911 100644
--- a/frontend/src/views/FieldMessage.svelte
+++ b/frontend/src/views/FieldMessage.svelte
@@ -10,15 +10,15 @@
   export let idx;
   export let oneof = false;
 
-  const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
-  const removeable = idx >= 0;
 
-  let val;
+  let val, labelColor, removeable;
   $: {
     val = key !== undefined ? key : idx >= 0 ? idx : name;
     if (!state[val] && (oneof || idx >= 0)) {
       state[val] = {}
     }
+    labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
+    removeable = idx >= 0;
   }
 
   const onEnabledChanged = ({ detail: checked}) => {
diff --git a/frontend/src/views/FieldNilText.svelte b/frontend/src/views/FieldNilText.svelte
index 03cee2c..b86fc52 100644
--- a/frontend/src/views/FieldNilText.svelte
+++ b/frontend/src/views/FieldNilText.svelte
@@ -10,9 +10,12 @@
   export let idx;
   export let multiline = false;
 
-  const val = key !== undefined ? key : idx >= 0 ? idx : field.name;
-  const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
-  const removeable = idx >= 0;
+  let val, labelColor, removeable;
+  $: {
+    val = key !== undefined ? key : idx >= 0 ? idx : field.name;
+    labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
+    removeable = idx >= 0;
+  }
 
   const onEnabledChanged = ({ detail: checked}) => {
     state[val] = checked ? "" : undefined
diff --git a/frontend/src/views/FieldOneof.svelte b/frontend/src/views/FieldOneof.svelte
index 0ba5c43..99a866f 100644
--- a/frontend/src/views/FieldOneof.svelte
+++ b/frontend/src/views/FieldOneof.svelte
@@ -6,10 +6,11 @@
   export let field = {};
   export let state;
 
-  const items = field.oneof.map(x => x.name);
+  let items;
   let selectedValue = undefined;
 
   $: {
+    items = field.oneof.map(x => x.name);
     const k = Object.keys(state)
     checkSelected:
     for (let i = 0; i < k.length; i++) {
diff --git a/frontend/src/views/FieldText.svelte b/frontend/src/views/FieldText.svelte
index 0699e96..ddc2b1f 100644
--- a/frontend/src/views/FieldText.svelte
+++ b/frontend/src/views/FieldText.svelte
@@ -9,18 +9,17 @@
   export let multiline = false;
   export let placeholder = "";
 
-  let val;
+  let val, labelColor, removeable;
 
   $: {
     val = key !== undefined ? key : idx >= 0 ? idx : field.name;
     if (!state[val]) {
       state[val] = key !== undefined ? "" : null;
     }
+    labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
+    removeable = idx >= 0;
   }
 
-  const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
-  const removeable = idx >= 0;
-
 </script>
 
 {#if multiline }
diff --git a/frontend/src/views/FieldWellKnown.svelte b/frontend/src/views/FieldWellKnown.svelte
index da23972..c72156a 100644
--- a/frontend/src/views/FieldWellKnown.svelte
+++ b/frontend/src/views/FieldWellKnown.svelte
@@ -9,17 +9,20 @@
   export let key;
   export let idx;
 
-  let field = {
-    name: name,
-    kind: message.full_name,
-  }
-
+  let field = {};
   let placeholder = "";
-  if (field.kind === "google.protobuf.Timestamp") {
-    placeholder = "2006-01-02T15:04:05.000Z";
-  }
-  if (field.kind === "google.protobuf.Duration") {
-    placeholder = "0.1s";
+  $: {
+    field = {
+      name: name,
+      kind: message.full_name,
+    }
+
+    if (field.kind === "google.protobuf.Timestamp") {
+      placeholder = "2006-01-02T15:04:05.000Z";
+    }
+    if (field.kind === "google.protobuf.Duration") {
+      placeholder = "0.1s";
+    }
   }
 </script>
 
diff --git a/frontend/src/views/RepeatedField.svelte b/frontend/src/views/RepeatedField.svelte
index 6bcd3bf..efa65db 100644
--- a/frontend/src/views/RepeatedField.svelte
+++ b/frontend/src/views/RepeatedField.svelte
@@ -19,15 +19,15 @@
     return target;
   }
 
-  hint = field.kind;
-  if (field.kind === "message" || field.kind === "group") {
-    hint = field.message.full_name;
-  }
 
   $: {
     if (!state[field.name]) {
       state[field.name] = []
     }
+    hint = field.kind;
+    if (field.kind === "message" || field.kind === "group") {
+      hint = field.message.full_name;
+    }
   }