event handlers from component itself

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

@@ -8,6 +8,7 @@
     selectedScreen,
     builderStore,
     previewStore,
+    findComponentsBySettingsType,
   } from "@/stores/builder"
   import {
     decodeJSBinding,
@@ -64,12 +65,19 @@
   ): ComponentUsingState[] => {
     let foundComponents: ComponentUsingState[] = []
 
-    const eventHandlerProps = [
-      "onClick",
-      "onRowClick",
-      "onChange",
-      "buttonOnClick",
-    ]
+    let eventHandlers: string[] = []
+    if ($selectedScreen) {
+      let componentSettings = findComponentsBySettingsType(
+        $selectedScreen,
+        "event",
+        $componentStore.components
+      )
+
+      // Get an array of all event handlers within this component
+      eventHandlers = [
+        ...new Set(componentSettings.map(handler => handler.setting.key)),
+      ]
+    }
 
     const isStateUpdateHandler = (handler: any) =>
       handler["##eventHandlerType"] === "Update State" &&
@@ -94,7 +102,7 @@
       })
     }
 
-    eventHandlerProps.forEach(eventType => {
+    eventHandlers.forEach(eventType => {
       checkEventHandlers(
         component[eventType],
         component._id!,
@@ -108,7 +116,7 @@
       .forEach(([propName, propValue]) => {
         if (Array.isArray(propValue)) {
           propValue.forEach(item => {
-            eventHandlerProps.forEach(eventType => {
+            eventHandlers.forEach(eventType => {
               checkEventHandlers(
                 item[eventType],
                 component._id!,
@@ -195,7 +203,6 @@
     if (!stateKey || !$selectedScreen?.props) {
       return
     }
-    console.log($selectedScreen)
     const componentStateUpdates = findComponentsUpdatingState(
       $selectedScreen.props,
       stateKey

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

@@ -16,7 +16,11 @@ import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
-import { screenComponents, screenComponentErrors } from "./screenComponent"
+import {
+  screenComponents,
+  screenComponentErrors,
+  findComponentsBySettingsType,
+} from "./screenComponent"
 
 // Backend
 import { tables } from "./tables"
@@ -70,6 +74,7 @@ export {
   appPublished,
   screenComponents,
   screenComponentErrors,
+  findComponentsBySettingsType,
 }
 
 export const reset = () => {

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

@@ -124,7 +124,7 @@ export const screenComponentErrors = derived(
   }
 )
 
-function findComponentsBySettingsType(
+export function findComponentsBySettingsType(
   screen: Screen,
   type: string | string[],
   definitions: Record<string, ComponentDefinition>