Merge pull request #15266 from Budibase/typing/remaining-grid-stores

Typing remaining grid stores

packages/bbui/src/ProgressCircle/ProgressCircle.svelte

@@ -37,7 +37,7 @@
     }
   }
 
-  export let overBackground
+  export let overBackground = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

packages/client/svelte.config.mjs

@@ -0,0 +1,7 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+const config = {
+  preprocess: vitePreprocess(),
+}
+
+export default config

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { setContext, onMount } from "svelte"
   import { writable, derived } from "svelte/store"
   import { fade } from "svelte/transition"
@@ -53,17 +53,16 @@
   const gridID = `grid-${Math.random().toString().slice(2)}`
 
   // Store props in a store for reference in other stores
-  const props = writable($$props)
+  const props: any = writable($$props)
 
   // Build up context
-  let context = {
+  let context = attachStores({
     API: API || createAPIClient(),
     Constants,
     gridID,
     props,
-  }
-  context = { ...context, ...createEventManagers() }
-  context = attachStores(context)
+    ...createEventManagers(),
+  })
 
   // Reference some stores for local use
   const {

packages/frontend-core/src/components/grid/lib/events.js → packages/frontend-core/src/components/grid/lib/events.ts

@@ -2,11 +2,11 @@ import { createEventDispatcher } from "svelte"
 
 export const createEventManagers = () => {
   const svelteDispatch = createEventDispatcher()
-  let subscribers = {}
+  let subscribers: Record<string, ((...params: any) => void)[]> = {}
 
   // Dispatches an event, notifying subscribers and also emitting a normal
   // svelte event
-  const dispatch = (event, payload) => {
+  const dispatch = (event: string, payload: any) => {
     svelteDispatch(event, payload)
     const subs = subscribers[event] || []
     for (let i = 0; i < subs.length; i++) {
@@ -15,7 +15,7 @@ export const createEventManagers = () => {
   }
 
   // Subscribes to events
-  const subscribe = (event, callback) => {
+  const subscribe = (event: string, callback: () => void) => {
     const subs = subscribers[event] || []
     subscribers[event] = [...subs, callback]
 

packages/frontend-core/src/components/grid/stores/bounds.ts

@@ -0,0 +1,29 @@
+import { derived, Readable, Writable, writable } from "svelte/store"
+
+interface BoundsStore {
+  bounds: Writable<{
+    left: number
+    top: number
+    width: number
+    height: number
+  }>
+  height: Readable<number>
+  width: Readable<number>
+}
+
+export type Store = BoundsStore
+
+export const createStores = (): BoundsStore => {
+  const bounds = writable({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  })
+
+  // Derive height and width as primitives to avoid wasted computation
+  const width = derived(bounds, $bounds => $bounds.width, 0)
+  const height = derived(bounds, $bounds => $bounds.height, 0)
+
+  return { bounds, height, width }
+}

packages/frontend-core/src/components/grid/stores/cache.js → packages/frontend-core/src/components/grid/stores/cache.ts

@@ -1,16 +1,31 @@
-export const createActions = context => {
+import { FindTableResponse } from "@budibase/types"
+import { Store as StoreContext } from "."
+
+interface CacheActionStore {
+  cache: {
+    actions: {
+      getPrimaryDisplayForTableId: (tableId: string) => Promise<string>
+      getTable: (tableId: string) => Promise<FindTableResponse>
+      resetCache: () => any
+    }
+  }
+}
+
+export type Store = CacheActionStore
+
+export const createActions = (context: StoreContext): CacheActionStore => {
   const { API } = context
 
   // Cache for the primary display columns of different tables.
   // If we ever need to cache table definitions for other purposes then we can
   // expand this to be a more generic cache.
-  let tableCache = {}
+  let tableCache: Record<string, Promise<FindTableResponse>> = {}
 
   const resetCache = () => {
     tableCache = {}
   }
 
-  const fetchTable = async tableId => {
+  const fetchTable = async (tableId: string) => {
     // If we've never encountered this tableId before then store a promise that
     // resolves to the primary display so that subsequent invocations before the
     // promise completes can reuse this promise
@@ -21,13 +36,13 @@ export const createActions = context => {
     return await tableCache[tableId]
   }
 
-  const getPrimaryDisplayForTableId = async tableId => {
+  const getPrimaryDisplayForTableId = async (tableId: string) => {
     const table = await fetchTable(tableId)
     const display = table?.primaryDisplay || table?.schema?.[0]?.name
     return display
   }
 
-  const getTable = async tableId => {
+  const getTable = async (tableId: string) => {
     const table = await fetchTable(tableId)
     return table
   }
@@ -43,7 +58,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { datasource, cache } = context
 
   // Wipe the caches whenever the datasource changes to ensure we aren't

packages/frontend-core/src/components/grid/stores/datasources/nonPlus.ts

@@ -122,7 +122,7 @@ export const initialise = (context: StoreContext) => {
         }
         $fetch?.update({
           sortOrder: $sort.order || SortOrder.ASCENDING,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )

packages/frontend-core/src/components/grid/stores/datasources/table.ts

@@ -139,7 +139,7 @@ export const initialise = (context: StoreContext) => {
         }
         $fetch.update({
           sortOrder: $sort.order || SortOrder.ASCENDING,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )

packages/frontend-core/src/components/grid/stores/datasources/viewV2.ts

@@ -173,7 +173,7 @@ export const initialise = (context: StoreContext) => {
           await datasource.actions.saveDefinition({
             ...$view,
             sort: {
-              field: $sort.column,
+              field: $sort.column!,
               order: $sort.order || SortOrder.ASCENDING,
             },
           })
@@ -187,7 +187,7 @@ export const initialise = (context: StoreContext) => {
         }
         $fetch.update({
           sortOrder: $sort.order,
-          sortColumn: $sort.column,
+          sortColumn: $sort.column ?? undefined,
         })
       })
     )

packages/frontend-core/src/components/grid/stores/index.ts

@@ -1,4 +1,4 @@
-import { Readable, Writable } from "svelte/store"
+import { Writable } from "svelte/store"
 import type { APIClient } from "../../../api/types"
 
 import * as Bounds from "./bounds"
@@ -25,6 +25,7 @@ import * as NonPlus from "./datasources/nonPlus"
 import * as Cache from "./cache"
 import * as Conditions from "./conditions"
 import { SortOrder, UIDatasource, UISearchFilter } from "@budibase/types"
+import * as Constants from "../lib/constants"
 
 const DependencyOrderedStores = [
   Sort,
@@ -73,12 +74,16 @@ export interface BaseStoreProps {
   canEditColumns?: boolean
   canExpandRows?: boolean
   canSaveSchema?: boolean
+  minHeight?: number
 }
 
 export interface BaseStore {
   API: APIClient
   gridID: string
   props: Writable<BaseStoreProps>
+  subscribe: any
+  dispatch: (event: string, data: any) => any
+  Constants: typeof Constants
 }
 
 export type Store = BaseStore &
@@ -93,22 +98,19 @@ export type Store = BaseStore &
   Filter.Store &
   UI.Store &
   Clipboard.Store &
-  Scroll.Store & {
-    // TODO while typing the rest of stores
-    sort: Writable<any>
-    subscribe: any
-    dispatch: (event: string, data: any) => any
-    notifications: Writable<any>
-    width: Writable<number>
-    bounds: Readable<any>
-    height: Readable<number>
-  } & Rows.Store &
+  Scroll.Store &
+  Rows.Store &
   Reorder.Store &
   Resize.Store &
   Config.Store &
-  Conditions.Store
+  Conditions.Store &
+  Cache.Store &
+  Viewport.Store &
+  Notifications.Store &
+  Sort.Store &
+  Bounds.Store
 
-export const attachStores = (context: Store): Store => {
+export const attachStores = (context: BaseStore): Store => {
   // Atomic store creation
   for (let store of DependencyOrderedStores) {
     if ("createStores" in store) {

packages/frontend-core/src/components/grid/stores/notifications.js → packages/frontend-core/src/components/grid/stores/notifications.ts

@@ -1,7 +1,17 @@
 import { notifications as BBUINotifications } from "@budibase/bbui"
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
+import { Store as StoreContext } from "."
 
-export const createStores = context => {
+interface NotificationStore {
+  notifications: Readable<{
+    success: (message: string) => void
+    error: (message: string) => void
+  }>
+}
+
+export type Store = NotificationStore
+
+export const createStores = (context: StoreContext): NotificationStore => {
   const { notifySuccess, notifyError } = context
 
   // Normally we would not derive a store in "createStores" as it should be

packages/frontend-core/src/components/grid/stores/pagination.js → packages/frontend-core/src/components/grid/stores/pagination.ts

@@ -1,6 +1,7 @@
 import { derived } from "svelte/store"
+import { Store as StoreContext } from "."
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { scrolledRowCount, rows, visualRowCapacity } = context
 
   // Derive how many rows we have in total

packages/frontend-core/src/components/grid/stores/sort.js → packages/frontend-core/src/components/grid/stores/sort.ts

@@ -1,8 +1,18 @@
-import { derived, get } from "svelte/store"
+import { derived, get, Writable } from "svelte/store"
 import { memo } from "../../../utils"
 import { SortOrder } from "@budibase/types"
+import { Store as StoreContext } from "."
 
-export const createStores = context => {
+interface SortStore {
+  sort: Writable<{
+    column: string | null | undefined
+    order: SortOrder
+  }>
+}
+
+export type Store = SortStore
+
+export const createStores = (context: StoreContext): SortStore => {
   const { props } = context
   const $props = get(props)
 
@@ -17,7 +27,7 @@ export const createStores = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { sort, initialSortColumn, initialSortOrder, schema } = context
 
   // Reset sort when initial sort props change

packages/frontend-core/src/components/grid/stores/viewport.js → packages/frontend-core/src/components/grid/stores/viewport.ts

@@ -1,7 +1,18 @@
-import { derived } from "svelte/store"
+import { derived, Readable } from "svelte/store"
 import { MinColumnWidth } from "../lib/constants"
+import { Store as StoreContext } from "."
+import { Row } from "@budibase/types"
 
-export const deriveStores = context => {
+interface ViewportDerivedStore {
+  scrolledRowCount: Readable<number>
+  visualRowCapacity: Readable<number>
+  renderedRows: Readable<Row>
+  columnRenderMap: Readable<Record<string, true>>
+}
+
+export type Store = ViewportDerivedStore
+
+export const deriveStores = (context: StoreContext): ViewportDerivedStore => {
   const {
     rowHeight,
     scrollableColumns,
@@ -77,7 +88,7 @@ export const deriveStores = context => {
         leftEdge += $scrollableColumns[endColIdx].width
         endColIdx++
       }
-      let next = {}
+      let next: Record<string, true> = {}
       $scrollableColumns
         .slice(Math.max(0, startColIdx), endColIdx)
         .forEach(col => {

packages/server/package.json

@@ -122,7 +122,7 @@
     "server-destroy": "1.0.1",
     "snowflake-sdk": "^1.15.0",
     "socket.io": "4.8.1",
-    "svelte": "^4.2.10",
+    "svelte": "4.2.19",
     "tar": "6.2.1",
     "tmp": "0.2.3",
     "to-json-schema": "0.2.5",

tsconfig.build.json

@@ -19,7 +19,8 @@
       "@budibase/pro": ["./packages/pro/src"],
       "@budibase/string-templates": ["./packages/string-templates/src"],
       "@budibase/string-templates/*": ["./packages/string-templates/*"],
-      "@budibase/frontend-core": ["./packages/frontend-core/src"]
+      "@budibase/frontend-core": ["./packages/frontend-core/src"],
+      "@budibase/bbui": ["./packages/bbui/src"]
     }
   },
   "exclude": []

yarn.lock

@@ -18991,7 +18991,7 @@ svelte-spa-router@^4.0.1:
   dependencies:
     regexparam "2.0.2"
 
-[email protected], svelte@^4.2.10:
+[email protected]:
   version "4.2.19"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.19.tgz#4e6e84a8818e2cd04ae0255fcf395bc211e61d4c"
   integrity sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==