Type ComponentErrorState

packages/client/src/components/error-states/ComponentErrorState.svelte

@@ -1,14 +1,17 @@
-<script>
+<script lang="ts">
   import { getContext } from "svelte"
   import { Icon } from "@budibase/bbui"
   import MissingRequiredSetting from "./MissingRequiredSetting.svelte"
   import MissingRequiredAncestor from "./MissingRequiredAncestor.svelte"
+  import { Component, SDK } from "../../index"
 
-  export let missingRequiredSettings
-  export let missingRequiredAncestors
+  export let missingRequiredSettings:
+    | { key: string; label: string }[]
+    | undefined
+  export let missingRequiredAncestors: string[] | undefined
 
-  const component = getContext("component")
-  const { styleable, builderStore } = getContext("sdk")
+  const component = getContext<Component>("component")
+  const { styleable, builderStore } = getContext<SDK>("sdk")
 
   $: styles = { ...$component.styles, normal: {}, custom: null, empty: true }
   $: requiredSetting = missingRequiredSettings?.[0]

packages/client/src/index.ts

@@ -1,6 +1,6 @@
 import { APIClient } from "@budibase/frontend-core"
 import type { ActionTypes } from "./constants"
-import { Readable } from "svelte/store"
+import { Readable, Writable } from "svelte/store"
 
 export interface SDK {
   API: APIClient
@@ -9,11 +9,15 @@ export interface SDK {
   ActionTypes: typeof ActionTypes
   fetchDatasourceSchema: any
   generateGoldenSample: any
+  builderStore: Readable<{
+    inBuilder: boolean
+  }>
 }
 
-export type Component = Readable<{
+export type Component = Writable<{
   id: string
   styles: any
+  errorState: string
 }>
 
 export type Context = Readable<any>