Fix to broken state change updates on some fields (#37)

* Fix to broken state change updates on some fields

* all repeated fields could loose state

* move all state changes within correct update handlers

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
+- State loss between methods causing repeated fields to be reset to empty and the "add" button becoming unresponsive
 
 ## [v0.3.2] - 2020-11-25
 

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";

frontend/src/views/FieldBool.svelte

@@ -1,26 +1,22 @@
 <script>
- import { onMount, beforeUpdate } from 'svelte';
  import Checkbox from "../controls/Checkbox.svelte";
 
  export let field;
  export let state;
  export let key;
  export let idx;
 
- let val;
+ let val, labelColor, removeable;
 
- const resetState = () => {
+ $: {
  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;
  }
 
- onMount(resetState)
- beforeUpdate(resetState)
-
- const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
- const removeable = idx >= 0;
 </script>
 
 <style>

frontend/src/views/FieldBoolValue.svelte

@@ -1,30 +1,24 @@
 <script>
- import { onMount, beforeUpdate } from 'svelte';
  import Radio from "../controls/Radio.svelte";
 
  export let field;
  export let state;
  export let idx;
  export let key;
  
- let val;
+ let val, labelColor, removeable;
 
- const resetState = () => {
+ $: {
  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;
-
- onMount(resetState)
- beforeUpdate(resetState)
-
  const options = [
  {label: "nil", value: undefined},
  {label: "false", value: false},
  {label: "true", value: true},
  ];
-
 </script>
 
 <style>

frontend/src/views/FieldEnum.svelte

@@ -1,26 +1,21 @@
 <script>
- import { onMount, beforeUpdate } from 'svelte';
  import Dropdown from "../controls/Dropdown.svelte";
 
  export let field;
  export let state;
  export let key;
  export let idx;
 
- let val;
+ let val, labelColor, removeable;
 
- const resetState = () => {
+ $: {
  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;
  }
- 
- onMount(resetState)
- beforeUpdate(resetState)
-
- const labelColor = key !== undefined ? "var(--accent-color3)" : idx >= 0 ? "var(--accent-color2)" : undefined;
- const removeable = idx >= 0;
 
  const onSelectChanged = ({ detail: { value }}) => {
  state[val] = value;

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: {}}]; 

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";
@@ -11,19 +10,16 @@
  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;
- const resetState = () => {
+ 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;
  }
- onMount(resetState)
- beforeUpdate(resetState)
-
 
  const onEnabledChanged = ({ detail: checked}) => {
  state[val] = checked ? {} : null

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

frontend/src/views/FieldOneof.svelte

@@ -1,16 +1,16 @@
 <script>
- import { onMount, beforeUpdate } from 'svelte';
  import InputLabel from "../controls/InputLabel.svelte";
  import Dropdown from "../controls/Dropdown.svelte";
  import MessageField from "./MessageField.svelte";
 
  export let field = {};
  export let state;
 
- const items = field.oneof.map(x => x.name);
+ let items;
  let selectedValue = undefined;
 
- const selectValue = () => {
+ $: {
+ items = field.oneof.map(x => x.name);
  const k = Object.keys(state)
  checkSelected:
  for (let i = 0; i < k.length; i++) {
@@ -23,9 +23,6 @@
  }
  }
 
- onMount(selectValue)
- beforeUpdate(selectValue)
-
  const onSelectChanged = ({ detail: { value }}) => {
  if (selectedValue) {
  delete state[selectedValue]

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";
 
@@ -10,20 +9,17 @@
  export let multiline = false;
  export let placeholder = "";
 
- let val;
+ let val, labelColor, removeable;
 
- const resetState = () => {
+ $: {
  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;
-
- onMount(resetState)
- beforeUpdate(resetState)
 </script>
 
 {#if multiline }

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>
 

frontend/src/views/RepeatedField.svelte

@@ -15,21 +15,22 @@
  cloneTarget[key] = clone(target[key]);
  }
  return cloneTarget;
- } else {
- return target;
- }
- return f
+ } 
+ return target;
  }
 
- hint = field.kind;
- if (field.kind === "message" || field.kind === "group") {
- hint = field.message.full_name;
- }
 
- if (!state[field.name]) {
- state[field.name] = []
+ $: {
+ if (!state[field.name]) {
+ state[field.name] = []
+ }
+ hint = field.kind;
+ if (field.kind === "message" || field.kind === "group") {
+ hint = field.message.full_name;
+ }
  }
 
+
  const onAddButtonClicked = () => {
  state[field.name] = [...state[field.name], null]
  }

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 {}