Return list instead of object

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte

@@ -4,7 +4,7 @@
     builderStore,
     componentStore,
     screenComponentErrorList,
-    screenComponents,
+    screenComponentsList,
   } from "@/stores/builder"
   import { ActionButton, Icon, Link, Popover } from "@budibase/bbui"
 
@@ -12,7 +12,10 @@
   let popover: any
 
   function getErrorTitle(error: UIComponentError) {
-    const titleParts = [$screenComponents[error.componentId]._instanceName]
+    const titleParts = [
+      $screenComponentsList.find(c => c._id === error.componentId)!
+        ._instanceName,
+    ]
     if (error.errorType === "setting") {
       titleParts.push(error.label)
     }

packages/builder/src/stores/builder/components.ts

@@ -21,7 +21,7 @@ import {
   tables,
   componentTreeNodesStore,
   builderStore,
-  screenComponents,
+  screenComponentsList,
 } from "@/stores/builder"
 import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
@@ -450,7 +450,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     const componentName = getSequentialName(
-      Object.values(get(screenComponents)),
+      get(screenComponentsList),
       `New ${definition.friendlyName || definition.name}`,
       {
         getName: c => c._instanceName,

packages/builder/src/stores/builder/index.js

@@ -17,9 +17,8 @@ import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
 import {
-  screenComponents,
+  screenComponentsList,
   screenComponentErrors,
-  findComponentsBySettingsType,
   screenComponentErrorList,
 } from "./screenComponent"
 
@@ -73,9 +72,8 @@ export {
   snippets,
   rowActions,
   appPublished,
-  screenComponents,
+  screenComponentsList,
   screenComponentErrors,
-  findComponentsBySettingsType,
   screenComponentErrorList,
 }
 

packages/builder/src/stores/builder/screenComponent.ts

@@ -23,13 +23,10 @@ function reduceBy<TItem extends {}, TKey extends keyof TItem>(
   key: TKey,
   list: TItem[]
 ): Record<string, TItem> {
-  return list.reduce(
+  return list.reduce<Record<string, TItem>>((result, item) => {
-    (result, item) => ({
+    result[item[key] as string] = item
-      ...result,
+    return result
-      [item[key] as string]: item,
+  }, {})
-    }),
-    {}
-  )
 }
 
 const friendlyNameByType: Partial<Record<UIDatasourceType, string>> = {
@@ -253,7 +250,7 @@ function getMissingAncestors(
   return result
 }
 
-export function findComponentsBySettingsType(
+function findComponentsBySettingsType(
   screen: Screen,
   type: string | string[],
   definitions: Record<string, ComponentDefinition>
@@ -303,18 +300,13 @@ export const screenComponentErrorList = derived(
   }
 )
 
-export const screenComponents = derived(
+export const screenComponentsList = derived(
   [selectedScreen],
-  ([$selectedScreen]): Record<string, Component> => {
+  ([$selectedScreen]): Component[] => {
     if (!$selectedScreen) {
-      return {}
+      return []
     }
 
-    return findAllComponents($selectedScreen.props).reduce<
+    return findAllComponents($selectedScreen.props)
-      Record<string, Component>
-    >((obj, component) => {
-      obj[component._id] = component
-      return obj
-    }, {})
   }
 )