auto update state origins when attaching click handlers

packages/builder/src/builderStore/store.js

@@ -462,22 +462,18 @@ const saveScreen = store => screen => {
 }
 
 const _saveScreen = (store, s, screen) => {
-  const screens = pipe(s.pages[s.currentPageName]._screens, [
-    filter(c => c.name !== screen.name),
-    concat([screen]),
-  ])
-  // console.log('saveScreen', screens, screen)
-  s.pages[s.currentPageName]._screens = screens
-  s.screens = s.pages[s.currentPageName]._screens
-  // s.currentPreviewItem = screen
-  // s.currentComponentInfo = screen.props
+  s.currentFrontEndItem = screen
+  s.currentComponentInfo = getScreenInfo(s.components, screen)
 
   api
-    .post(
-      `/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`,
-      screen
-    )
-    .then(() => _savePage(s))
+    .post(`/_builder/api/${s.appname}/screen`, screen)
+    .then(async savedScreen => {
+      const updatedScreen = await savedScreen.json();
+      const screens = [...s.screens.filter(storeScreen => storeScreen.name !== updatedScreen.name), updatedScreen];
+      s.pages[s.currentPageName]._screens = screens
+      s.screens = screens
+      _savePage(s);
+    });
 
   return s
 }
@@ -580,7 +576,7 @@ const renameScreen = store => (oldname, newname) => {
     const saveAllChanged = async () => {
       for (let screenName of changedScreens) {
         const changedScreen = getExactComponent(screens, screenName)
-        await api.post(`/_builder/api/${s.appname}/screen`, changedScreen)
+        const updatedScreen = await api.post(`/_builder/api/${s.appname}/screen`, changedScreen)
       }
     }
 

packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte

@@ -1,27 +1,28 @@
 <script>
-  import IconButton from "../../common/IconButton.svelte"
-  import PlusButton from "../../common/PlusButton.svelte"
-  import Select from "../../common/Select.svelte"
-  import StateBindingControl from "../StateBindingControl.svelte"
-  import { find, map, keys, reduce, keyBy } from "lodash/fp"
-  import { pipe, userWithFullAccess } from "../../common/core"
+  import IconButton from "../../common/IconButton.svelte";
+  import PlusButton from "../../common/PlusButton.svelte";
+  import Select from "../../common/Select.svelte";
+  import Input from "../../common/Input.svelte";
+  import StateBindingControl from "../StateBindingControl.svelte";
+  import { find, map, keys, reduce, keyBy } from "lodash/fp";
+  import { pipe, userWithFullAccess } from "../../common/core";
   import {
     EVENT_TYPE_MEMBER_NAME,
     allHandlers,
-  } from "../../common/eventHandlers"
-  import { store } from "../../builderStore"
+  } from "../../common/eventHandlers";
+  import { store } from "../../builderStore";
 
-  export let handler
-  export let onCreate
-  export let onChanged
-  export let onRemoved
+  export let handler;
+  export let onCreate;
+  export let onChanged;
+  export let onRemoved;
 
-  export let index
-  export let newHandler
+  export let index;
+  export let newHandler;
 
-  let eventOptions
-  let handlerType
-  let parameters = []
+  let eventOptions;
+  let handlerType;
+  let parameters = [];
 
   $: eventOptions = allHandlers(
     { hierarchy: $store.hierarchy },
@@ -29,53 +30,53 @@
       hierarchy: $store.hierarchy,
       actions: keyBy("name")($store.actions),
     })
-  )
+  );
 
   $: {
     if (handler) {
-      handlerType = handler[EVENT_TYPE_MEMBER_NAME]
+      handlerType = handler[EVENT_TYPE_MEMBER_NAME];
       parameters = Object.entries(handler.parameters).map(([name, value]) => ({
         name,
         value,
-      }))
+      }));
     } else {
       // Empty Handler
-      handlerType = ""
-      parameters = []
+      handlerType = "";
+      parameters = [];
     }
   }
 
   const handlerChanged = (type, params) => {
-    const handlerParams = {}
+    const handlerParams = {};
     for (let param of params) {
-      handlerParams[param.name] = param.value
+      handlerParams[param.name] = param.value;
     }
 
     const updatedHandler = {
       [EVENT_TYPE_MEMBER_NAME]: type,
       parameters: handlerParams,
-    }
+    };
 
-    onChanged(updatedHandler, index)
-  }
+    onChanged(updatedHandler, index);
+  };
 
   const handlerTypeChanged = e => {
     const handlerType = eventOptions.find(
       handler => handler.name === e.target.value
-    )
+    );
     const defaultParams = handlerType.parameters.map(param => ({
       name: param,
       value: "",
-    }))
+    }));
 
-    handlerChanged(handlerType.name, defaultParams)
-  }
+    handlerChanged(handlerType.name, defaultParams);
+  };
 
   const onParameterChanged = index => e => {
-    const newParams = [...parameters]
-    newParams[index].value = e.target.value
-    handlerChanged(handlerType, newParams)
-  }
+    const newParams = [...parameters];
+    newParams[index].value = e.target.value;
+    handlerChanged(handlerType, newParams);
+  };
 </script>
 
 <div class="type-selector-container {newHandler && 'new-handler'}">
@@ -93,10 +94,7 @@
       {#each parameters as param, idx}
         <div class="handler-option">
           <span>{param.name}</span>
-          <input 
-            on:change={onParameterChanged(idx)}
-            value={param.value}
-          >
+          <Input on:change={onParameterChanged(idx)} value={param.value} />
         </div>
       {/each}
     {/if}

packages/builder/src/userInterface/PropertyCascader.svelte

@@ -61,7 +61,7 @@
       <span
         class="icon"
         style={`
-        transform: rotate(${isOpen ? 0 : 90}deg);
+        transform: rotate(${isOpen ? 180 : -90}deg);
         color: ${bindingPath ? 'rgba(0, 85, 255, 0.8)' : 'inherit'}
       `}>
         <ArrowDownIcon size={36} />
@@ -119,7 +119,6 @@
   }
 
   li {
-    transition: 0.2s all;
     list-style-type: none;
   }
 

packages/server/utilities/builder/index.js

@@ -63,6 +63,8 @@ module.exports.saveScreen = async (config, appname, pagename, screen) => {
     flag: "w",
     spaces: 2,
   })
+  component.stateOrigins = buildStateOrigins(component);
+  return component;
 }
 
 module.exports.renameScreen = async (
@@ -167,6 +169,8 @@ const buildStateOrigins = screenDefinition => {
   return origins;
 };
 
+module.exports.buildStateOrigins = buildStateOrigins;
+
 const fetchscreens = async (appPath, relativePath = "") => {
   const currentDir = join(appPath, "components", relativePath)