Typing grid columns store

packages/builder/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
+    "outDir": "./dist",
     "baseUrl": ".",
     "paths": {
       "assets/*": ["./assets/*"],

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

@@ -1,7 +1,40 @@
-import { derived, get, writable } from "svelte/store"
+import { derived, get, Readable, Writable, writable } from "svelte/store"
 import { DefaultColumnWidth, GutterWidth } from "../lib/constants"
+import { CalculationType, FieldSchema, FieldType } from "@budibase/types"
+import { Store as StoreContext } from "."
 
-export const createStores = () => {
+export interface Store {
+  columns: Writable<Column[]>
+}
+
+export interface DerivedStore {
+  tableColumns: Readable<Column[]>
+  displayColumn: Readable<Column>
+  columnLookupMap: Readable<Record<string, Column>>
+  visibleColumns: Readable<Column[]>
+  scrollableColumns: Readable<Column[]>
+  hasNonAutoColumn: Readable<boolean>
+}
+
+type Column = FieldSchema & {
+  label: string
+  readonly: boolean
+  conditions: any
+  related?: {
+    field: string
+    subField: string
+  }
+  primaryDisplay?: boolean
+  schema?: {
+    disabled: boolean
+    type: FieldType
+    readonly: boolean
+    autocolumn: boolean
+  }
+  calculationType: CalculationType
+}
+
+export const createStores = (): Store => {
   const columns = writable([])
 
   // Enrich columns with metadata about their display position
@@ -30,7 +63,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const deriveStores = (context: StoreContext): DerivedStore => {
   const { columns } = context
 
   // Derive a lookup map for all columns by name
@@ -78,11 +111,11 @@ export const deriveStores = context => {
   }
 }
 
-export const createActions = context => {
+export const createActions = (context: StoreContext) => {
   const { columns, datasource } = context
 
   // Updates the width of all columns
-  const changeAllColumnWidths = async width => {
+  const changeAllColumnWidths = async (width: number) => {
     const $columns = get(columns)
     $columns.forEach(column => {
       const { related } = column
@@ -101,7 +134,7 @@ export const createActions = context => {
   }
 
   // Checks if a column is readonly
-  const isReadonly = column => {
+  const isReadonly = (column: Column) => {
     if (!column?.schema) {
       return false
     }
@@ -125,7 +158,7 @@ export const createActions = context => {
   }
 }
 
-export const initialise = context => {
+export const initialise = (context: StoreContext) => {
   const { definition, columns, displayColumn, enrichedSchema } = context
 
   // Merge new schema fields with existing schema in order to preserve widths
@@ -151,7 +184,8 @@ export const initialise = context => {
         .map(field => {
           const fieldSchema = $enrichedSchema[field]
           const oldColumn = $columns?.find(col => col.name === field)
-          const column = {
+          const column: Column = {
+            type: fieldSchema.type,
             name: field,
             label: fieldSchema.displayName || field,
             schema: fieldSchema,

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

@@ -1,3 +1,5 @@
+import { Writable } from "svelte/store"
+
 import * as Bounds from "./bounds"
 import * as Columns from "./columns"
 import * as Menu from "./menu"
@@ -48,7 +50,16 @@ const DependencyOrderedStores = [
   Cache,
 ]
 
-export const attachStores = context => {
+export type Store = Columns.Store &
+  Columns.DerivedStore & {
+    // TODO while typing the rest of stores
+    datasource: any
+    definition: Writable<any>
+    displayColumn: Writable<any>
+    enrichedSchema: any
+  }
+
+export const attachStores = (context): Store => {
   // Atomic store creation
   for (let store of DependencyOrderedStores) {
     context = { ...context, ...store.createStores?.(context) }