move state origin build from server to client

packages/builder/src/builderStore/buildStateOrigins.js

@@ -0,0 +1,27 @@
+  /**
+   * buildStateOrigins
+   *
+   * Builds an object that details all the bound state in the application, and what updates it. 
+   *
+   * @param screenDefinition - the screen definition metadata.
+   * @returns {Object} an object with the client state values and how they are managed. 
+   */
+  export const buildStateOrigins = screenDefinition => {
+    const origins = {};
+
+    function traverse(propValue) {
+      for (let key in propValue) {
+        if (!Array.isArray(propValue[key])) continue;
+
+        if (key === "_children") propValue[key].forEach(traverse);
+
+        for (let element of propValue[key]) {
+          if (element["##eventHandlerType"] === "Set State") origins[element.parameters.path] = element;
+        }
+      }
+    }
+
+    traverse(screenDefinition.props);
+
+    return origins;
+  };

packages/builder/src/userInterface/PropertyCascader.svelte

@@ -1,6 +1,7 @@
 <script>
   import { ArrowDownIcon } from "../common/Icons/";
   import { store } from "../builderStore";
+  import { buildStateOrigins } from "../builderStore/buildStateOrigins";
   import { isBinding, getBinding, setBinding } from "../common/binding";
 
   export let onChanged = () => {};
@@ -41,7 +42,7 @@
     const currentScreen = $store.screens.find(
       ({ name }) => name === $store.currentPreviewItem.name
     );
-    stateBindings = currentScreen ? currentScreen.stateOrigins : [];
+    stateBindings = currentScreen ? Object.keys(buildStateOrigins(currentScreen)) : [];
   }
 </script>
 
@@ -66,7 +67,7 @@
   </div>
   {#if isOpen}
     <ul class="options">
-      {#each Object.keys(stateBindings) as stateBinding}
+      {#each stateBindings as stateBinding}
         <li
           class:bold={stateBinding === bindingPath}
           on:click={() => {

packages/builder/tests/buildStateOrigins.spec.js

@@ -0,0 +1,29 @@
+import { buildStateOrigins } from "../src/builderStore/buildStateOrigins";
+
+it("builds the correct stateOrigins object from a screen definition with handlers", () => {
+  expect(buildStateOrigins({
+    "name": "screen1",
+    "description": "",
+    "props": {
+    "_component": "@budibase/standard-components/div",
+      "className": "",
+      "onClick": [
+        {
+          "##eventHandlerType": "Set State",
+          "parameters": {
+            "path": "testKey",
+            "value": "value"
+          }
+        }
+      ]
+    }
+  })).toEqual({
+    "testKey": {
+      "##eventHandlerType": "Set State",
+      "parameters": {
+        "path": "testKey",
+        "value": "value"
+      }
+    }
+  });
+});

packages/server/utilities/builder/index.js

@@ -63,7 +63,6 @@ module.exports.saveScreen = async (config, appname, pagename, screen) => {
     flag: "w",
     spaces: 2,
   })
-  screen.stateOrigins = listScreens.buildStateOrigins(screen);
   return screen;
 }
 

packages/server/utilities/builder/listScreens.js

@@ -31,8 +31,6 @@ const fetchscreens = async (appPath, pagename, relativePath = "") => {
 
       component.props = component.props || {}
 
-      component.stateOrigins = buildStateOrigins(component);
-
       screens.push(component)
     } else {
       const childComponents = await fetchscreens(
@@ -47,34 +45,4 @@ const fetchscreens = async (appPath, pagename, relativePath = "") => {
   }
 
   return screens
-}
-
-/**
- * buildStateOrigins
- *
- * Builds an object that details all the bound state in the application, and what updates it. 
- *
- * @param screenDefinition - the screen definition metadata.
- * @returns {Object} an object with the client state values and how they are managed. 
- */
-const buildStateOrigins = screenDefinition => {
-  const origins = {};
-
-  function traverse(propValue) {
-    for (let key in propValue) {
-      if (!Array.isArray(propValue[key])) continue;
-
-      if (key === "_children") propValue[key].forEach(traverse);
-
-      for (let element of propValue[key]) {
-        if (element["##eventHandlerType"] === "Set State") origins[element.parameters.path] = element;
-      }
-    }
-  }
-
-  traverse(screenDefinition.props);
-
-  return origins;
-};
-
-module.exports.buildStateOrigins = buildStateOrigins;
+}