Merge pull request #15353 from Budibase/ts/client-utils

Type client utils

packages/client/src/components/Component.svelte

@@ -39,7 +39,7 @@
     getActionContextKey,
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
-  import { gridLayout } from "utils/grid.js"
+  import { gridLayout } from "utils/grid"
 
   export let instance = {}
   export let parent = null

packages/client/src/sdk.js

@@ -74,6 +74,7 @@ export default {
   fetchData,
   QueryUtils,
   ContextScopes: Constants.ContextScopes,
+  // This is not used internally but exposed to users to be used in plugins
   getAPIKey,
   enrichButtonActions,
   processStringSync,

packages/client/src/utils/blocks.ts

@@ -1,10 +1,16 @@
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { API } from "../api"
-import { UILogicalOperator } from "@budibase/types"
+import {
+  BasicOperator,
+  LegacyFilter,
+  UIColumn,
+  UILogicalOperator,
+  UISearchFilter,
+} from "@budibase/types"
 import { Constants } from "@budibase/frontend-core"
 
 // Map of data types to component types for search fields inside blocks
-const schemaComponentMap = {
+const schemaComponentMap: Record<string, string> = {
   string: "stringfield",
   options: "optionsfield",
   number: "numberfield",
@@ -19,7 +25,16 @@ const schemaComponentMap = {
  * @param searchColumns the search columns to use
  * @param schema the datasource schema
  */
-export const enrichSearchColumns = async (searchColumns, schema) => {
+export const enrichSearchColumns = async (
+  searchColumns: string[],
+  schema: Record<
+    string,
+    {
+      tableId: string
+      type: string
+    }
+  >
+) => {
   if (!searchColumns?.length || !schema) {
     return []
   }
@@ -61,12 +76,16 @@ export const enrichSearchColumns = async (searchColumns, schema) => {
  * @param columns the enriched search column structure
  * @param formId the ID of the form containing the search fields
  */
-export const enrichFilter = (filter, columns, formId) => {
+export const enrichFilter = (
+  filter: UISearchFilter,
+  columns: UIColumn[],
+  formId: string
+) => {
   if (!columns?.length) {
     return filter
   }
 
-  let newFilters = []
+  const newFilters: LegacyFilter[] = []
   columns?.forEach(column => {
     const safePath = column.name.split(".").map(safe).join(".")
     const stringType = column.type === "string" || column.type === "formula"
@@ -99,7 +118,7 @@ export const enrichFilter = (filter, columns, formId) => {
       newFilters.push({
         field: column.name,
         type: column.type,
-        operator: stringType ? "string" : "equal",
+        operator: stringType ? BasicOperator.STRING : BasicOperator.EQUAL,
         valueType: "Binding",
         value: `{{ ${binding} }}`,
       })

packages/client/src/utils/grid.ts

@@ -1,7 +1,27 @@
-import { GridSpacing, GridRowHeight } from "constants"
+import { GridSpacing, GridRowHeight } from "@/constants"
 import { builderStore } from "stores"
 import { buildStyleString } from "utils/styleable.js"
 
+interface GridMetadata {
+  id: string
+  styles: Record<string, string | number> & {
+    "--default-width"?: number
+    "--default-height"?: number
+  }
+  interactive: boolean
+  errored: boolean
+  definition?: {
+    size?: {
+      width: number
+      height: number
+    }
+    grid?: { hAlign: string; vAlign: string }
+  }
+  draggable: boolean
+  insideGrid: boolean
+  ignoresLayout: boolean
+}
+
 /**
  * We use CSS variables on components to control positioning and layout of
  * components inside grids.
@@ -44,14 +64,17 @@ export const GridDragModes = {
 }
 
 // Builds a CSS variable name for a certain piece of grid metadata
-export const getGridVar = (device, param) => `--grid-${device}-${param}`
+export const getGridVar = (device: string, param: string) =>
+  `--grid-${device}-${param}`
 
 // Determines whether a JS event originated from immediately within a grid
-export const isGridEvent = e => {
+export const isGridEvent = (e: Event & { target: HTMLElement }): boolean => {
   return (
     e.target.dataset?.indicator === "true" ||
+    // @ts-expect-error: api is not properly typed
     e.target
       .closest?.(".component")
+      // @ts-expect-error
       ?.parentNode.closest(".component")
       ?.childNodes[0]?.classList?.contains("grid")
   )
@@ -59,11 +82,11 @@ export const isGridEvent = e => {
 
 // Svelte action to apply required class names and styles to our component
 // wrappers
-export const gridLayout = (node, metadata) => {
-  let selectComponent
+export const gridLayout = (node: HTMLDivElement, metadata: GridMetadata) => {
+  let selectComponent: ((e: Event) => void) | null
 
   // Applies the required listeners, CSS and classes to a component DOM node
-  const applyMetadata = metadata => {
+  const applyMetadata = (metadata: GridMetadata) => {
     const {
       id,
       styles,
@@ -86,7 +109,7 @@ export const gridLayout = (node, metadata) => {
     }
 
     // Callback to select the component when clicking on the wrapper
-    selectComponent = e => {
+    selectComponent = (e: Event) => {
       e.stopPropagation()
       builderStore.actions.selectComponent(id)
     }
@@ -100,7 +123,7 @@ export const gridLayout = (node, metadata) => {
     }
     width += 2 * GridSpacing
     height += 2 * GridSpacing
-    let vars = {
+    const vars: Record<string, string | number> = {
       "--default-width": width,
       "--default-height": height,
     }
@@ -135,7 +158,7 @@ export const gridLayout = (node, metadata) => {
     }
 
     // Apply some metadata to data attributes to speed up lookups
-    const addDataTag = (tagName, device, param) => {
+    const addDataTag = (tagName: string, device: string, param: string) => {
       const val = `${vars[getGridVar(device, param)]}`
       if (node.dataset[tagName] !== val) {
         node.dataset[tagName] = val
@@ -147,11 +170,12 @@ export const gridLayout = (node, metadata) => {
     addDataTag("gridMobileHAlign", Devices.Mobile, GridParams.HAlign)
     addDataTag("gridDesktopVAlign", Devices.Desktop, GridParams.VAlign)
     addDataTag("gridMobileVAlign", Devices.Mobile, GridParams.VAlign)
-    if (node.dataset.insideGrid !== true) {
-      node.dataset.insideGrid = true
+    if (node.dataset.insideGrid !== "true") {
+      node.dataset.insideGrid = "true"
     }
 
     // Apply all CSS variables to the wrapper
+    // @ts-expect-error TODO
     node.style = buildStyleString(vars)
 
     // Add a listener to select this node on click
@@ -160,7 +184,7 @@ export const gridLayout = (node, metadata) => {
     }
 
     // Add draggable attribute
-    node.setAttribute("draggable", !!draggable)
+    node.setAttribute("draggable", (!!draggable).toString())
   }
 
   // Removes the previously set up listeners
@@ -176,7 +200,7 @@ export const gridLayout = (node, metadata) => {
   applyMetadata(metadata)
 
   return {
-    update(newMetadata) {
+    update(newMetadata: GridMetadata) {
       removeListeners()
       applyMetadata(newMetadata)
     },

packages/client/src/utils/linkable.ts

@@ -1,8 +1,8 @@
 import { get } from "svelte/store"
-import { link } from "svelte-spa-router"
+import { link, LinkActionOpts } from "svelte-spa-router"
 import { builderStore } from "stores"
 
-export const linkable = (node, href) => {
+export const linkable = (node: HTMLElement, href?: LinkActionOpts) => {
   if (get(builderStore).inBuilder) {
     node.onclick = e => {
       e.preventDefault()

packages/client/tsconfig.json

@@ -14,6 +14,7 @@
         "../*",
         "../../node_modules/@budibase/*"
       ],
+      "@/*": ["./src/*"],
       "*": ["./src/*"]
     }
   }

packages/client/vite.config.mjs

@@ -67,6 +67,10 @@ export default defineConfig(({ mode }) => {
           find: "constants",
           replacement: path.resolve("./src/constants"),
         },
+        {
+          find: "@/constants",
+          replacement: path.resolve("./src/constants"),
+        },
         {
           find: "sdk",
           replacement: path.resolve("./src/sdk"),