Merge branch 'master' of github.com:budibase/budibase into remove-worker-user-mock

.github/workflows/readme-openapi.yml

@@ -20,7 +20,7 @@ jobs:
       - run: yarn --frozen-lockfile
 
       - name: Install OpenAPI pkg
-        run: yarn global add openapi
+        run: yarn global add rdme@8.6.6
 
       - name: update specs
-        run: cd packages/server && yarn specs && openapi specs/openapi.yaml --key=${{ secrets.README_API_KEY }} --id=6728a74f5918b50036c61841
+        run: cd packages/server && yarn specs && rdme openapi specs/openapi.yaml --key=${{ secrets.README_API_KEY }} --id=67c16880add6da002352069a

docs/CONTRIBUTING.md

@@ -108,7 +108,7 @@ You can install them following any of the steps described below:
   - Installation steps: https://asdf-vm.com/guide/getting-started.html
   - asdf plugin add nodejs
   - asdf plugin add python
-  - npm install -g yarn
+  - asdf plugin add yarn
 
 ### Using NVM and pyenv
 

eslint.config.mjs

@@ -94,6 +94,15 @@ export default [
         allowImportExportEverywhere: true,
       },
     },
+
+    plugins: {
+      ...config.plugins,
+      "@typescript-eslint": tseslint.plugin,
+    },
+    rules: {
+      ...config.rules,
+      "@typescript-eslint/consistent-type-imports": "error",
+    },
   })),
   ...tseslint.configs.strict.map(config => ({
     ...config,

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.4.21",
+  "version": "3.4.22",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {

packages/bbui/src/Actions/position_dropdown.ts

@@ -27,7 +27,7 @@ export type UpdateHandler = (
 
 interface Opts {
   anchor?: HTMLElement
-  align: PopoverAlignment
+  align: PopoverAlignment | `${PopoverAlignment}`
   maxHeight?: number
   maxWidth?: number
   minWidth?: number

packages/bbui/src/Badge/Badge.svelte

@@ -11,6 +11,7 @@
   export let active = false
   export let inactive = false
   export let hoverable = false
+  export let outlineColor = null
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -29,6 +30,7 @@
   class:spectrum-Label--seafoam={seafoam}
   class:spectrum-Label--active={active}
   class:spectrum-Label--inactive={inactive}
+  style={outlineColor ? `border: 2px solid ${outlineColor}` : ""}
 >
   <slot />
 </span>

packages/bbui/src/ClearButton/ClearButton.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
-  export let small = false
+  export let small: boolean = false
-  export let disabled
+  export let disabled: boolean = false
 </script>
 
 <button

packages/bbui/src/Form/Checkbox.svelte

@@ -1,24 +1,24 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import Checkbox from "./Core/Checkbox.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
+  export let value: boolean | undefined = undefined
-  export let label = null
+  export let label: string | undefined = undefined
-  export let labelPosition = "above"
+  export let labelPosition: "above" | "below" = "above"
-  export let text = null
+  export let text: string | undefined = undefined
-  export let disabled = false
+  export let disabled: boolean = false
-  export let error = null
+  export let error: string | undefined = undefined
-  export let size = "M"
+  export let size: "S" | "M" | "L" | "XL" = "M"
-  export let helpText = null
+  export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent<boolean>) => {
     value = e.detail
     dispatch("change", e.detail)
   }
 </script>
 
 <Field {helpText} {label} {labelPosition} {error}>
-  <Checkbox {error} {disabled} {text} {value} {size} on:change={onChange} />
+  <Checkbox {disabled} {text} {value} {size} on:change={onChange} />
 </Field>

packages/bbui/src/Icon/Icon.svelte

@@ -28,6 +28,9 @@
     <svg
       on:contextmenu
       on:click
+      on:mouseover
+      on:mouseleave
+      on:focus
       class:hoverable
       class:disabled
       class="spectrum-Icon spectrum-Icon--size{size}"

packages/bbui/src/Layout/Page.svelte

@@ -47,7 +47,7 @@
     overflow-x: hidden;
   }
   .main {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   .content {
     display: flex;

packages/bbui/src/Link/Link.svelte

@@ -10,7 +10,7 @@
   export let secondary: boolean = false
   export let overBackground: boolean = false
   export let target: string | undefined = undefined
-  export let download: boolean | undefined = undefined
+  export let download: string | undefined = undefined
   export let disabled: boolean = false
   export let tooltip: string | null = null
 

packages/bbui/src/Popover/Popover.svelte

@@ -19,7 +19,8 @@
   import { PopoverAlignment } from "../constants"
 
   export let anchor: HTMLElement
-  export let align: PopoverAlignment = PopoverAlignment.Right
+  export let align: PopoverAlignment | `${PopoverAlignment}` =
+    PopoverAlignment.Right
   export let portalTarget: string | undefined = undefined
   export let minWidth: number | undefined = undefined
   export let maxWidth: number | undefined = undefined

packages/bbui/src/SideNavigation/Item.svelte

@@ -1,63 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const multilevel = getContext("sidenav-type")
-  import Badge from "../Badge/Badge.svelte"
-
-  export let href = ""
-  export let external = false
-  export let heading = ""
-  export let icon = ""
-  export let selected = false
-  export let disabled = false
-  export let badge = ""
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<li
-  class="spectrum-SideNav-item"
-  class:is-selected={selected}
-  class:is-disabled={disabled}
-  on:click
->
-  {#if heading}
-    <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">
-      {heading}
-    </h2>
-  {/if}
-  <a
-    target={external ? "_blank" : ""}
-    {href}
-    class="spectrum-SideNav-itemLink"
-    aria-current="page"
-  >
-    {#if icon}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon"
-        focusable="false"
-        aria-hidden="true"
-      >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
-    <slot />
-    {#if badge}
-      <div class="badge">
-        <Badge active size="S">{badge}</Badge>
-      </div>
-    {/if}
-  </a>
-
-  {#if multilevel && $$slots.subnav}
-    <ul class="spectrum-SideNav">
-      <slot name="subnav" />
-    </ul>
-  {/if}
-</li>
-
-<style>
-  .badge {
-    margin-left: 10px;
-  }
-</style>

packages/bbui/src/SideNavigation/Navigation.svelte

@@ -1,13 +0,0 @@
-<script>
-  import { setContext } from "svelte"
-  import "@spectrum-css/sidenav/dist/index-vars.css"
-
-  export let multilevel = false
-  setContext("sidenav-type", multilevel)
-</script>
-
-<nav>
-  <ul class="spectrum-SideNav" class:spectrum-SideNav--multiLevel={multilevel}>
-    <slot />
-  </ul>
-</nav>

packages/bbui/src/Stores/banner.ts

@@ -7,17 +7,26 @@ export const BANNER_TYPES = {
   WARNING: "warning",
 }
 
+interface BannerConfig {
+  message?: string
+  type?: string
+  extraButtonText?: string
+  extraButtonAction?: () => void
+  onChange?: () => void
+}
+
+interface DefaultConfig {
+  messages: BannerConfig[]
+}
+
 export function createBannerStore() {
-  const DEFAULT_CONFIG = {
+  const DEFAULT_CONFIG: DefaultConfig = {
     messages: [],
   }
 
-  const banner = writable(DEFAULT_CONFIG)
+  const banner = writable<DefaultConfig>(DEFAULT_CONFIG)
 
-  const show = async (
+  const show = async (config: BannerConfig = {}) => {
-    // eslint-disable-next-line
-    config = { message, type, extraButtonText, extraButtonAction, onChange }
-  ) => {
     banner.update(store => {
       return {
         ...store,
@@ -27,7 +36,7 @@ export function createBannerStore() {
   }
 
   const showStatus = async () => {
-    const config = {
+    const config: BannerConfig = {
       message: "Some systems are experiencing issues",
       type: BANNER_TYPES.NEGATIVE,
       extraButtonText: "View Status",
@@ -37,18 +46,24 @@ export function createBannerStore() {
     await queue([config])
   }
 
-  const queue = async entries => {
+  const queue = async (entries: Array<BannerConfig>) => {
-    const priority = {
+    const priority: Record<string, number> = {
       [BANNER_TYPES.NEGATIVE]: 0,
       [BANNER_TYPES.WARNING]: 1,
       [BANNER_TYPES.INFO]: 2,
     }
     banner.update(store => {
       const sorted = [...store.messages, ...entries].sort((a, b) => {
-        if (priority[a.type] == priority[b.type]) {
+        if (
+          priority[a.type as keyof typeof priority] ===
+          priority[b.type as keyof typeof priority]
+        ) {
           return 0
         }
-        return priority[a.type] < priority[b.type] ? -1 : 1
+        return priority[a.type as keyof typeof priority] <
+          priority[b.type as keyof typeof priority]
+          ? -1
+          : 1
       })
       return {
         ...store,

packages/bbui/src/Stores/notifications.ts

@@ -2,9 +2,21 @@ import { writable } from "svelte/store"
 
 const NOTIFICATION_TIMEOUT = 3000
 
+interface Notification {
+  id: string
+  type: string
+  message: string
+  icon: string
+  dismissable: boolean
+  action: (() => void) | null
+  actionMessage: string | null
+  wide: boolean
+  dismissTimeout: number
+}
+
 export const createNotificationStore = () => {
-  const timeoutIds = new Set()
+  const timeoutIds = new Set<ReturnType<typeof setTimeout>>()
-  const _notifications = writable([], () => {
+  const _notifications = writable<Notification[]>([], () => {
     return () => {
       // clear all the timers
       timeoutIds.forEach(timeoutId => {
@@ -21,7 +33,7 @@ export const createNotificationStore = () => {
   }
 
   const send = (
-    message,
+    message: string,
     {
       type = "default",
       icon = "",
@@ -30,7 +42,15 @@ export const createNotificationStore = () => {
       actionMessage = null,
       wide = false,
       dismissTimeout = NOTIFICATION_TIMEOUT,
-    }
+    }: {
+      type?: string
+      icon?: string
+      autoDismiss?: boolean
+      action?: (() => void) | null
+      actionMessage?: string | null
+      wide?: boolean
+      dismissTimeout?: number
+    } = {}
   ) => {
     if (block) {
       return
@@ -60,7 +80,7 @@ export const createNotificationStore = () => {
     }
   }
 
-  const dismissNotification = id => {
+  const dismissNotification = (id: string) => {
     _notifications.update(state => {
       return state.filter(n => n.id !== id)
     })
@@ -71,17 +91,18 @@ export const createNotificationStore = () => {
   return {
     subscribe,
     send,
-    info: msg => send(msg, { type: "info", icon: "Info" }),
+    info: (msg: string) => send(msg, { type: "info", icon: "Info" }),
-    error: msg =>
+    error: (msg: string) =>
       send(msg, { type: "error", icon: "Alert", autoDismiss: false }),
-    warning: msg => send(msg, { type: "warning", icon: "Alert" }),
+    warning: (msg: string) => send(msg, { type: "warning", icon: "Alert" }),
-    success: msg => send(msg, { type: "success", icon: "CheckmarkCircle" }),
+    success: (msg: string) =>
+      send(msg, { type: "success", icon: "CheckmarkCircle" }),
     blockNotifications,
     dismiss: dismissNotification,
   }
 }
 
-function id() {
+function id(): string {
   return "_" + Math.random().toString(36).slice(2, 9)
 }
 

packages/bbui/src/Table/ArrayRenderer.svelte

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/label/dist/index-vars.css"
   import Badge from "../Badge/Badge.svelte"
 
-  export let value
+  export let value: string | string[]
 
   const displayLimit = 5
 

packages/bbui/src/Table/AttachmentRenderer.svelte

@@ -1,15 +1,15 @@
-<script>
+<script lang="ts">
   import Link from "../Link/Link.svelte"
 
-  export let value
+  export let value: { name: string; url: string; extension: string }[]
 
   const displayLimit = 5
   $: attachments = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - attachments.length
 
-  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
+  const imageExtensions: string[] = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
-  const isImage = extension => {
+  const isImage = (extension: string | undefined): boolean => {
-    return imageExtensions.includes(extension?.toLowerCase())
+    return imageExtensions.includes(extension?.toLowerCase() ?? "")
   }
 </script>
 

packages/bbui/src/Table/BoldRenderer.svelte

@@ -1,5 +1,5 @@
-<script>
+<script lang="ts">
-  export let value
+  export let value: string
 </script>
 
 <div class="bold">{value}</div>

packages/bbui/src/Table/BooleanRenderer.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/checkbox/dist/index-vars.css"
 
-  export let value
+  export let value: boolean
 </script>
 
 <label

packages/bbui/src/Table/CellRenderer.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import StringRenderer from "./StringRenderer.svelte"
   import BooleanRenderer from "./BooleanRenderer.svelte"
   import DateTimeRenderer from "./DateTimeRenderer.svelte"
@@ -8,14 +8,14 @@
   import InternalRenderer from "./InternalRenderer.svelte"
   import { processStringSync } from "@budibase/string-templates"
 
-  export let row
+  export let row: Record<string, any>
-  export let schema
+  export let schema: Record<string, any>
-  export let value
+  export let value: Record<string, any>
-  export let customRenderers = []
+  export let customRenderers: { column: string; component: any }[] = []
-  export let snippets
+  export let snippets: any
 
-  let renderer
+  let renderer: any
-  const typeMap = {
+  const typeMap: Record<string, any> = {
     boolean: BooleanRenderer,
     datetime: DateTimeRenderer,
     link: RelationshipRenderer,
@@ -33,7 +33,7 @@
   $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
   $: cellValue = getCellValue(value, schema.template)
 
-  const getType = schema => {
+  const getType = (schema: any): string => {
     // Use a string renderer for dates if we use a custom template
     if (schema?.type === "datetime" && schema?.template) {
       return "string"
@@ -41,7 +41,7 @@
     return schema?.type || "string"
   }
 
-  const getCellValue = (value, template) => {
+  const getCellValue = (value: any, template: string | undefined): any => {
     if (!template) {
       return value
     }

packages/bbui/src/Table/CodeRenderer.svelte

@@ -1,5 +1,5 @@
-<script>
+<script lang="ts">
-  export let value
+  export let value: string
 </script>
 
 <code>{value}</code>

packages/bbui/src/Table/DateTimeRenderer.svelte

@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
   import dayjs from "dayjs"
 
-  export let value
+  export let value: string | Date
-  export let schema
+  export let schema: { timeOnly?: boolean; dateOnly?: boolean }
 
   // adding the 0- will turn a string like 00:00:00 into a valid ISO
   // date, but will make actual ISO dates invalid
   $: time = new Date(`0-${value}`)
-  $: isTimeOnly = !isNaN(time) || schema?.timeOnly
+  $: isTimeOnly = !isNaN(time as any) || schema?.timeOnly
   $: isDateOnly = schema?.dateOnly
   $: format = isTimeOnly
     ? "HH:mm:ss"

packages/bbui/src/Table/InternalRenderer.svelte

@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
   import Icon from "../Icon/Icon.svelte"
   import { copyToClipboard } from "../helpers"
   import { notifications } from "../Stores/notifications"
 
-  export let value
+  export let value: string
 
-  const onClick = async e => {
+  const onClick = async (e: MouseEvent): Promise<void> => {
     e.stopPropagation()
     try {
       await copyToClipboard(value)

packages/bbui/src/Table/RelationshipRenderer.svelte

@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/label/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
   import Badge from "../Badge/Badge.svelte"
 
-  export let row
+  export let row: { tableId: string; _id: string }
-  export let value
+  export let value: { primaryDisplay?: string }[] | undefined
-  export let schema
+  export let schema: { name?: string }
 
   const dispatch = createEventDispatcher()
   const displayLimit = 5
@@ -13,7 +13,7 @@
   $: relationships = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - relationships.length
 
-  const onClick = e => {
+  const onClick = (e: MouseEvent) => {
     e.stopPropagation()
     dispatch("clickrelationship", {
       tableId: row.tableId,

packages/bbui/src/Table/SelectEditRenderer.svelte

@@ -1,12 +1,12 @@
-<script>
+<script lang="ts">
   import Checkbox from "../Form/Checkbox.svelte"
   import ActionButton from "../ActionButton/ActionButton.svelte"
 
-  export let selected
+  export let selected: boolean | undefined
-  export let onEdit
+  export let onEdit: (_e: Event) => void
-  export let allowSelectRows = false
+  export let allowSelectRows: boolean = false
-  export let allowEditRows = false
+  export let allowEditRows: boolean = false
-  export let data
+  export let data: Record<string, any>
 </script>
 
 <div>

packages/bbui/src/Table/StringRenderer.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
-  export let value
+  export let value: string | object
-  export let schema
+  export let schema: { capitalise?: boolean }
 </script>
 
 <div class:capitalise={schema?.capitalise}>

packages/bbui/src/Table/Table.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { createEventDispatcher } from "svelte"
   import "@spectrum-css/table/dist/index-vars.css"
   import CellRenderer from "./CellRenderer.svelte"
@@ -8,6 +8,7 @@
   import Checkbox from "../Form/Checkbox.svelte"
 
   /**
+   /**
    * The expected schema is our normal couch schemas for our tables.
    * Each field schema can be enriched with a few extra properties to customise
    * the behaviour.
@@ -24,42 +25,42 @@
    * borderLeft: show a left border
    * borderRight: show a right border
    */
-  export let data = []
+  export let data: any[] = []
-  export let schema = {}
+  export let schema: Record<string, any> = {}
-  export let showAutoColumns = false
+  export let showAutoColumns: boolean = false
-  export let rowCount = 0
+  export let rowCount: number = 0
-  export let quiet = false
+  export let quiet: boolean = false
-  export let loading = false
+  export let loading: boolean = false
-  export let allowSelectRows
+  export let allowSelectRows: boolean = false
-  export let allowEditRows = true
+  export let allowEditRows: boolean = true
-  export let allowEditColumns = true
+  export let allowEditColumns: boolean = true
-  export let allowClickRows = true
+  export let allowClickRows: boolean = true
-  export let selectedRows = []
+  export let selectedRows: any[] = []
-  export let customRenderers = []
+  export let customRenderers: any[] = []
-  export let disableSorting = false
+  export let disableSorting: boolean = false
-  export let autoSortColumns = true
+  export let autoSortColumns: boolean = true
-  export let compact = false
+  export let compact: boolean = false
-  export let customPlaceholder = false
+  export let customPlaceholder: boolean = false
-  export let showHeaderBorder = true
+  export let showHeaderBorder: boolean = true
-  export let placeholderText = "No rows found"
+  export let placeholderText: string = "No rows found"
-  export let snippets = []
+  export let snippets: any[] = []
-  export let defaultSortColumn = undefined
+  export let defaultSortColumn: string | undefined = undefined
-  export let defaultSortOrder = "Ascending"
+  export let defaultSortOrder: "Ascending" | "Descending" = "Ascending"
 
   const dispatch = createEventDispatcher()
 
   // Config
-  const headerHeight = 36
+  const headerHeight: number = 36
   $: rowHeight = compact ? 46 : 55
 
   // Sorting state
-  let sortColumn
+  let sortColumn: string | undefined
-  let sortOrder
+  let sortOrder: "Ascending" | "Descending" | undefined
 
   // Table state
-  let height = 0
+  let height: number = 0
-  let loaded = false
+  let loaded: boolean = false
-  let checkboxStatus = false
+  let checkboxStatus: boolean = false
 
   $: schema = fixSchema(schema)
   $: if (!loading) loaded = true
@@ -95,8 +96,8 @@
     }
   }
 
-  const fixSchema = schema => {
+  const fixSchema = (schema: Record<string, any>): Record<string, any> => {
-    let fixedSchema = {}
+    let fixedSchema: Record<string, any> = {}
     Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
       if (typeof fieldSchema === "string") {
         fixedSchema[fieldName] = {
@@ -120,7 +121,13 @@
     return fixedSchema
   }
 
-  const getVisibleRowCount = (loaded, height, allRows, rowCount, rowHeight) => {
+  const getVisibleRowCount = (
+    loaded: boolean,
+    height: number,
+    allRows: number,
+    rowCount: number,
+    rowHeight: number
+  ): number => {
     if (!loaded) {
       return rowCount || 0
     }
@@ -131,12 +138,12 @@
   }
 
   const getHeightStyle = (
-    visibleRowCount,
+    visibleRowCount: number,
-    rowCount,
+    rowCount: number,
-    totalRowCount,
+    totalRowCount: number,
-    rowHeight,
+    rowHeight: number,
-    loading
+    loading: boolean
-  ) => {
+  ): string => {
     if (loading) {
       return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
     }
@@ -146,7 +153,11 @@
     return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
   }
 
-  const getGridStyle = (fields, schema, showEditColumn) => {
+  const getGridStyle = (
+    fields: string[],
+    schema: Record<string, any>,
+    showEditColumn: boolean
+  ): string => {
     let style = "grid-template-columns:"
     if (showEditColumn) {
       style += " auto"
@@ -163,7 +174,11 @@
     return style
   }
 
-  const sortRows = (rows, sortColumn, sortOrder) => {
+  const sortRows = (
+    rows: any[],
+    sortColumn: string | undefined,
+    sortOrder: string | undefined
+  ): any[] => {
     sortColumn = sortColumn ?? defaultSortColumn
     sortOrder = sortOrder ?? defaultSortOrder
     if (!sortColumn || !sortOrder || disableSorting) {
@@ -180,7 +195,7 @@
     })
   }
 
-  const sortBy = fieldSchema => {
+  const sortBy = (fieldSchema: Record<string, any>): void => {
     if (fieldSchema.sortable === false) {
       return
     }
@@ -193,7 +208,7 @@
     dispatch("sort", { column: sortColumn, order: sortOrder })
   }
 
-  const getDisplayName = schema => {
+  const getDisplayName = (schema: Record<string, any>): string => {
     let name = schema?.displayName
     if (schema && name === undefined) {
       name = schema.name
@@ -201,9 +216,13 @@
     return name || ""
   }
 
-  const getFields = (schema, showAutoColumns, autoSortColumns) => {
+  const getFields = (
-    let columns = []
+    schema: Record<string, any>,
-    let autoColumns = []
+    showAutoColumns: boolean,
+    autoSortColumns: boolean
+  ): string[] => {
+    let columns: any[] = []
+    let autoColumns: any[] = []
     Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
       if (!field || !fieldSchema) {
         return
@@ -235,17 +254,17 @@
       .map(column => column.name)
   }
 
-  const editColumn = (e, field) => {
+  const editColumn = (e: Event, field: any): void => {
     e.stopPropagation()
     dispatch("editcolumn", field)
   }
 
-  const editRow = (e, row) => {
+  const editRow = (e: Event, row: any): void => {
     e.stopPropagation()
     dispatch("editrow", cloneDeep(row))
   }
 
-  const toggleSelectRow = row => {
+  const toggleSelectRow = (row: any): void => {
     if (!allowSelectRows) {
       return
     }
@@ -258,7 +277,7 @@
     }
   }
 
-  const toggleSelectAll = e => {
+  const toggleSelectAll = (e: CustomEvent): void => {
     const select = !!e.detail
     if (select) {
       // Add any rows which are not already in selected rows
@@ -278,8 +297,10 @@
     }
   }
 
-  const computeCellStyles = schema => {
+  const computeCellStyles = (
-    let styles = {}
+    schema: Record<string, any>
+  ): Record<string, string> => {
+    let styles: Record<string, string> = {}
     Object.keys(schema || {}).forEach(field => {
       styles[field] = ""
       if (schema[field].color) {

packages/bbui/src/Tabs/Tabs.svelte

@@ -1,28 +1,48 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/tabs/dist/index-vars.css"
   import { writable } from "svelte/store"
   import { onMount, setContext, createEventDispatcher } from "svelte"
 
-  export let selected
+  interface TabInfo {
-  export let vertical = false
+    width?: number
-  export let noPadding = false
+    height?: number
-  // added as a separate option as noPadding is used for vertical padding
+    left?: number
-  export let noHorizPadding = false
+    top?: number
-  export let quiet = false
+  }
-  export let emphasized = false
-  export let onTop = false
-  export let size = "M"
-  export let beforeSwitch = null
 
-  let thisSelected = undefined
+  interface TabState {
+    title: string
+    id: string
+    emphasized: boolean
+    info?: TabInfo
+  }
+
+  export let selected: string
+  export let vertical: boolean = false
+  export let noPadding: boolean = false
+  // added as a separate option as noPadding is used for vertical padding
+  export let noHorizPadding: boolean = false
+  export let quiet: boolean = false
+  export let emphasized: boolean = false
+  export let onTop: boolean = false
+  export let size: "S" | "M" | "L" = "M"
+  export let beforeSwitch: ((_title: string) => boolean) | null = null
+
+  let thisSelected: string | undefined = undefined
+  let container: HTMLElement | undefined
 
   let _id = id()
-  const tab = writable({ title: selected, id: _id, emphasized })
+  const tab = writable<TabState>({ title: selected, id: _id, emphasized })
   setContext("tab", tab)
 
-  let container
+  let top: string | undefined
+  let left: string | undefined
+  let width: string | undefined
+  let height: string | undefined
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{
+    select: string
+  }>()
 
   $: {
     if (thisSelected !== selected) {
@@ -44,29 +64,34 @@
     }
     if ($tab.title !== thisSelected) {
       tab.update(state => {
-        state.title = thisSelected
+        state.title = thisSelected as string
         return state
       })
     }
   }
 
-  let top, left, width, height
+  $: $tab && calculateIndicatorLength()
-  $: calculateIndicatorLength($tab)
+  $: $tab && calculateIndicatorOffset()
-  $: calculateIndicatorOffset($tab)
 
   function calculateIndicatorLength() {
     if (!vertical) {
-      width = $tab.info?.width + "px"
+      width = ($tab.info?.width ?? 0) + "px"
     } else {
-      height = $tab.info?.height + 4 + "px"
+      height = ($tab.info?.height ?? 0) + 4 + "px"
     }
   }
 
   function calculateIndicatorOffset() {
     if (!vertical) {
-      left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
+      left =
+        ($tab.info?.left ?? 0) -
+        (container?.getBoundingClientRect().left ?? 0) +
+        "px"
     } else {
-      top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
+      top =
+        ($tab.info?.top ?? 0) -
+        (container?.getBoundingClientRect().top ?? 0) +
+        "px"
     }
   }
 
@@ -75,7 +100,7 @@
     calculateIndicatorOffset()
   })
 
-  function id() {
+  function id(): string {
     return "_" + Math.random().toString(36).slice(2, 9)
   }
 </script>

packages/bbui/src/Tags/Tag.svelte

@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/tags/dist/index-vars.css"
   import Avatar from "../Avatar/Avatar.svelte"
   import ClearButton from "../ClearButton/ClearButton.svelte"
 
-  export let icon = ""
+  export let icon: string = ""
-  export let avatar = ""
+  export let avatar: string = ""
-  export let invalid = false
+  export let invalid: boolean = false
-  export let disabled = false
+  export let disabled: boolean = false
-  export let closable = false
+  export let closable: boolean = false
 </script>
 
 <div

packages/bbui/src/Tags/Tags.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/tags/dist/index-vars.css"
 </script>
 

packages/bbui/src/Tooltip/TooltipWrapper.svelte

@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
   import Icon from "../Icon/Icon.svelte"
   import AbsTooltip from "./AbsTooltip.svelte"
 
-  export let tooltip = ""
+  export let tooltip: string = ""
-  export let size = "M"
+  export let size: "S" | "M" = "M"
-  export let disabled = true
+  export let disabled: boolean = true
 </script>
 
 <div class:container={!!tooltip}>

packages/bbui/src/TreeView/Item.svelte

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
-  export let selected = false
+  export let selected: boolean = false
-  export let open = false
+  export let open: boolean = false
-  export let href = false
+  export let href: string | null = null
-  export let title
+  export let title: string
-  export let icon
+  export let icon: string | undefined
 </script>
 
 <li

packages/bbui/src/TreeView/Tree.svelte

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/treeview/dist/index-vars.css"
 
-  export let quiet = false
+  export let quiet: boolean = false
-  export let standalone = true
+  export let standalone: boolean = true
-  export let width = "250px"
+  export let width: string = "250px"
 </script>
 
 <ul

packages/bbui/src/Typography/Code.svelte

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/typography/dist/index-vars.css"
 
   // Sizes
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
 </script>
 
 <code class="spectrum-Code spectrum-Code--size{size}">

packages/bbui/src/Typography/Detail.svelte

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/typography/dist/index-vars.css"
 
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
-  export let serif = false
+  export let serif: boolean = false
-  export let weight = 600
+  export let weight: number | null = null
 </script>
 
 <p

packages/bbui/src/index.ts

@@ -65,8 +65,6 @@ export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent, keepOpen } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
 export { default as Notification } from "./Notification/Notification.svelte"
-export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
-export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
 export { default as Tabs } from "./Tabs/Tabs.svelte"

packages/builder/src/components/backend/DataTable/formula.js

@@ -2,6 +2,7 @@ import { FieldType } from "@budibase/types"
 import { FIELDS } from "@/constants/backend"
 import { tables } from "@/stores/builder"
 import { get as svelteGet } from "svelte/store"
+import { makeReadableKeyPropSafe } from "@/dataBinding"
 
 // currently supported level of relationship depth (server side)
 const MAX_DEPTH = 1
@@ -26,7 +27,7 @@ export function getBindings({
   if (!table) {
     return bindings
   }
-  for (let [column, schema] of Object.entries(table.schema)) {
+  for (const [column, schema] of Object.entries(table.schema)) {
     const isRelationship = schema.type === FieldType.LINK
     // skip relationships after a certain depth and types which
     // can't bind to
@@ -62,6 +63,10 @@ export function getBindings({
 
     const label = path == null ? column : `${path}.0.${column}`
     const binding = path == null ? `[${column}]` : `[${path}].0.[${column}]`
+    const readableBinding = (path == null ? [column] : [path, "0", column])
+      .map(makeReadableKeyPropSafe)
+      .join(".")
+
     // only supply a description for relationship paths
     const description =
       path == null
@@ -75,7 +80,7 @@ export function getBindings({
       description,
       // don't include path, it messes things up, relationship path
       // will be replaced by the main array binding
-      readableBinding: label,
+      readableBinding,
       runtimeBinding: binding,
       display: {
         name: label,

packages/builder/src/components/common/CodeEditor/validator/hbs.ts

@@ -45,7 +45,10 @@ export function validateHbsTemplate(
     ) {
       const ignoreMissing = options?.ignoreMissing || false
       nodes.forEach(node => {
-        if (isMustacheStatement(node) && isPathExpression(node.path)) {
+        if (
+          (isMustacheStatement(node) || isBlockStatement(node)) &&
+          isPathExpression(node.path)
+        ) {
           const helperName = node.path.original
 
           const from =
@@ -75,21 +78,64 @@ export function validateHbsTemplate(
               message: `Helper "${helperName}" requires a body:\n{{#${helperName} ...}} [body] {{/${helperName}}}`,
             })
             return
+          } else if (!requiresBlock && isBlockStatement(node)) {
+            diagnostics.push({
+              from,
+              to,
+              severity: "error",
+              message: `Helper "${helperName}" should not contain a body.`,
+            })
+            return
           }
 
-          const providedParams = node.params
+          let providedParamsCount = node.params.length
+          if (isBlockStatement(node)) {
+            // Block body counts as a parameter
+            providedParamsCount++
+          }
 
-          if (providedParams.length !== expectedArguments.length) {
+          const optionalArgMatcher = new RegExp(/^\[(.+)\]$/)
+          const optionalArgs = expectedArguments.filter(a =>
+            optionalArgMatcher.test(a)
+          )
+
+          if (
+            !optionalArgs.length &&
+            providedParamsCount !== expectedArguments.length
+          ) {
             diagnostics.push({
               from,
               to,
               severity: "error",
               message: `Helper "${helperName}" expects ${
                 expectedArguments.length
-              } parameters (${expectedArguments.join(", ")}), but got ${
+              } parameters (${expectedArguments.join(
-                providedParams.length
+                ", "
-              }.`,
+              )}), but got ${providedParamsCount}.`,
             })
+          } else if (optionalArgs.length) {
+            const maxArgs = expectedArguments.length
+            const minArgs = maxArgs - optionalArgs.length
+            if (
+              minArgs > providedParamsCount ||
+              maxArgs < providedParamsCount
+            ) {
+              const parameters = expectedArguments
+                .map(a => {
+                  const test = optionalArgMatcher.exec(a)
+                  if (!test?.[1]) {
+                    return a
+                  }
+                  return `${test[1]} (optional)`
+                })
+                .join(", ")
+              diagnostics.push({
+                from,
+                to,
+                severity: "error",
+                message: `Helper "${helperName}" expects between ${minArgs} to ${expectedArguments.length} parameters (${parameters}), but got ${providedParamsCount}.`,
+              })
+            }
           }
         }
 

packages/builder/src/components/common/CodeEditor/validator/tests/hbs.spec.ts

@@ -2,7 +2,7 @@ import { validateHbsTemplate } from "../hbs"
 import { CodeValidator } from "@/types"
 
 describe("hbs validator", () => {
-  it("validate empty strings", () => {
+  it("validates empty strings", () => {
     const text = ""
     const validators = {}
 
@@ -10,7 +10,7 @@ describe("hbs validator", () => {
     expect(result).toHaveLength(0)
   })
 
-  it("validate strings without hbs expressions", () => {
+  it("validates strings without hbs expressions", () => {
     const text = "first line\nand another one"
     const validators = {}
 
@@ -23,7 +23,7 @@ describe("hbs validator", () => {
       fieldName: {},
     }
 
-    it("validate valid expressions", () => {
+    it("validates valid expressions", () => {
       const text = "{{ fieldName }}"
 
       const result = validateHbsTemplate(text, validators)
@@ -98,45 +98,193 @@ describe("hbs validator", () => {
   })
 
   describe("expressions with parameters", () => {
-    const validators: CodeValidator = {
+    describe("basic expression", () => {
-      helperFunction: {
+      const validators: CodeValidator = {
-        arguments: ["a", "b", "c"],
+        helperFunction: {
-      },
+          arguments: ["a", "b", "c"],
-    }
+        },
+      }
 
-    it("validate valid params", () => {
+      it("validates valid params", () => {
-      const text = "{{ helperFunction 1 99 'a' }}"
+        const text = "{{ helperFunction 1 99 'a' }}"
 
-      const result = validateHbsTemplate(text, validators)
+        const result = validateHbsTemplate(text, validators)
-      expect(result).toHaveLength(0)
+        expect(result).toHaveLength(0)
+      })
+
+      it("throws on too few params", () => {
+        const text = "{{ helperFunction 100 }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "helperFunction" expects 3 parameters (a, b, c), but got 1.`,
+            severity: "error",
+            to: 24,
+          },
+        ])
+      })
+
+      it("throws on too many params", () => {
+        const text = "{{ helperFunction  1 99 'a' 100 }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "helperFunction" expects 3 parameters (a, b, c), but got 4.`,
+            severity: "error",
+            to: 34,
+          },
+        ])
+      })
     })
 
-    it("throws on too few params", () => {
+    describe("body expressions", () => {
-      const text = "{{ helperFunction 100 }}"
+      const validators: CodeValidator = {
-
+        bodyFunction: {
-      const result = validateHbsTemplate(text, validators)
+          arguments: ["a", "b", "c"],
-      expect(result).toEqual([
+          requiresBlock: true,
-        {
-          from: 0,
-          message: `Helper "helperFunction" expects 3 parameters (a, b, c), but got 1.`,
-          severity: "error",
-          to: 24,
         },
-      ])
+        nonBodyFunction: {
+          arguments: ["a", "b"],
+        },
+      }
+
+      it("validates valid params", () => {
+        const text = "{{#bodyFunction 1 99  }}body{{/bodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toHaveLength(0)
+      })
+
+      it("validates empty bodies", () => {
+        const text = "{{#bodyFunction 1 99  }}{{/bodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toHaveLength(0)
+      })
+
+      it("validates too little parameters", () => {
+        const text = "{{#bodyFunction 1 }}{{/bodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "bodyFunction" expects 3 parameters (a, b, c), but got 2.`,
+            severity: "error",
+            to: 37,
+          },
+        ])
+      })
+
+      it("validates too many parameters", () => {
+        const text = "{{#bodyFunction 1 99 'a' 0 }}{{/bodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "bodyFunction" expects 3 parameters (a, b, c), but got 5.`,
+            severity: "error",
+            to: 46,
+          },
+        ])
+      })
+
+      it("validates non-supported body usages", () => {
+        const text = "{{#nonBodyFunction 1 99}}{{/nonBodyFunction}}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "nonBodyFunction" should not contain a body.`,
+            severity: "error",
+            to: 45,
+          },
+        ])
+      })
     })
 
-    it("throws on too many params", () => {
+    describe("optional parameters", () => {
-      const text = "{{ helperFunction  1 99 'a' 100 }}"
+      it("supports empty parameters", () => {
+        const validators: CodeValidator = {
+          helperFunction: {
+            arguments: ["a", "b", "[c]"],
+          },
+        }
+        const text = "{{ helperFunction 1 99 }}"
 
-      const result = validateHbsTemplate(text, validators)
+        const result = validateHbsTemplate(text, validators)
-      expect(result).toEqual([
+        expect(result).toHaveLength(0)
-        {
+      })
-          from: 0,
+
-          message: `Helper "helperFunction" expects 3 parameters (a, b, c), but got 4.`,
+      it("supports valid parameters", () => {
-          severity: "error",
+        const validators: CodeValidator = {
-          to: 34,
+          helperFunction: {
-        },
+            arguments: ["a", "b", "[c]"],
-      ])
+          },
+        }
+        const text = "{{ helperFunction 1 99 'a' }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toHaveLength(0)
+      })
+
+      it("returns a valid message on missing parameters", () => {
+        const validators: CodeValidator = {
+          helperFunction: {
+            arguments: ["a", "b", "[c]"],
+          },
+        }
+        const text = "{{ helperFunction 1 }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "helperFunction" expects between 2 to 3 parameters (a, b, c (optional)), but got 1.`,
+            severity: "error",
+            to: 22,
+          },
+        ])
+      })
+
+      it("returns a valid message on too many parameters", () => {
+        const validators: CodeValidator = {
+          helperFunction: {
+            arguments: ["a", "b", "[c]"],
+          },
+        }
+        const text = "{{ helperFunction 1 2 3 4 }}"
+
+        const result = validateHbsTemplate(text, validators)
+        expect(result).toEqual([
+          {
+            from: 0,
+            message: `Helper "helperFunction" expects between 2 to 3 parameters (a, b, c (optional)), but got 4.`,
+            severity: "error",
+            to: 28,
+          },
+        ])
+      })
     })
   })
+
+  it("validates wrong hbs code", () => {
+    const text = "{{#fieldName}}{{/wrong}}"
+
+    const result = validateHbsTemplate(text, {})
+    expect(result).toEqual([
+      {
+        from: 0,
+        message: `The handlebars code is not valid:\nfieldName doesn't match wrong - 1:3`,
+        severity: "error",
+        to: text.length,
+      },
+    ])
+  })
 })

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -422,7 +422,7 @@
           {context}
           addHelper={onSelectHelper}
           addBinding={onSelectBinding}
-          mode={editorMode}
+          {mode}
         />
       {:else if sidePanel === SidePanel.Evaluation}
         <EvaluationSidePanel

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -1,32 +1,41 @@
-<script>
+<script lang="ts">
   import groupBy from "lodash/fp/groupBy"
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "@/constants/completions"
+  import type { EnrichedBinding, Helper } from "@budibase/types"
+  import { BindingMode } from "@budibase/types"
 
-  export let addHelper
+  export let addHelper: (_helper: Helper, _js?: boolean) => void
-  export let addBinding
+  export let addBinding: (_binding: EnrichedBinding) => void
-  export let bindings
+  export let bindings: EnrichedBinding[]
-  export let mode
+  export let mode: BindingMode
-  export let allowHelpers
+  export let allowHelpers: boolean
   export let context = null
 
   let search = ""
   let searching = false
-  let popover
+  let popover: Popover
-  let popoverAnchor
+  let popoverAnchor: HTMLElement | null
-  let hoverTarget
+  let hoverTarget: {
+    helper: boolean
+    code: string
+    description?: string
+  } | null
   let helpers = handlebarsCompletions()
-  let selectedCategory
+  let selectedCategory: string | null
-  let hideTimeout
+  let hideTimeout: ReturnType<typeof setTimeout> | null
 
-  $: bindingIcons = bindings?.reduce((acc, ele) => {
+  $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
     if (ele.icon) {
       acc[ele.category] = acc[ele.category] || ele.icon
     }
     return acc
   }, {})
-  $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
+  $: categoryIcons = {
+    ...bindingIcons,
+    Helpers: "MagicWand",
+  } as Record<string, string>
   $: categories = Object.entries(groupBy("category", bindings))
   $: categoryNames = getCategoryNames(categories)
   $: searchRgx = new RegExp(search, "ig")
@@ -48,11 +57,11 @@
       (!search ||
         helper.label.match(searchRgx) ||
         helper.description.match(searchRgx)) &&
-      (mode.name !== "javascript" || helper.allowsJs)
+      (mode !== BindingMode.JavaScript || helper.allowsJs)
     )
   })
 
-  const getHelperExample = (helper, js) => {
+  const getHelperExample = (helper: Helper, js: boolean) => {
     let example = helper.example || ""
     if (js) {
       example = convertToJS(example).split("\n")[0].split("= ")[1]
@@ -63,15 +72,18 @@
     return example || ""
   }
 
-  const getCategoryNames = categories => {
+  const getCategoryNames = (categories: [string, EnrichedBinding[]][]) => {
-    let names = [...categories.map(cat => cat[0])]
+    const names = [...categories.map(cat => cat[0])]
     if (allowHelpers) {
       names.push("Helpers")
     }
     return names
   }
 
-  const showBindingPopover = (binding, target) => {
+  const showBindingPopover = (
+    binding: EnrichedBinding,
+    target: HTMLElement
+  ) => {
     if (!context || !binding.value || binding.value === "") {
       return
     }
@@ -84,7 +96,7 @@
     popover.show()
   }
 
-  const showHelperPopover = (helper, target) => {
+  const showHelperPopover = (helper: any, target: HTMLElement) => {
     stopHidingPopover()
     if (!helper.displayText && helper.description) {
       return
@@ -93,7 +105,7 @@
     hoverTarget = {
       helper: true,
       description: helper.description,
-      code: getHelperExample(helper, mode.name === "javascript"),
+      code: getHelperExample(helper, mode === BindingMode.JavaScript),
     }
     popover.show()
   }
@@ -119,37 +131,39 @@
     search = ""
   }
 
-  const stopSearching = e => {
+  const stopSearching = (e: Event) => {
     e.stopPropagation()
     searching = false
     search = ""
   }
 </script>
 
-<Popover
+{#if popoverAnchor && hoverTarget}
-  align="left-outside"
+  <Popover
-  bind:this={popover}
+    align="left-outside"
-  anchor={popoverAnchor}
+    bind:this={popover}
-  minWidth={0}
+    anchor={popoverAnchor}
-  maxWidth={480}
+    minWidth={0}
-  maxHeight={480}
+    maxWidth={480}
-  dismissible={false}
+    maxHeight={480}
-  on:mouseenter={stopHidingPopover}
+    dismissible={false}
-  on:mouseleave={hidePopover}
+    on:mouseenter={stopHidingPopover}
->
+    on:mouseleave={hidePopover}
-  <div class="binding-popover" class:helper={hoverTarget.helper}>
+  >
-    {#if hoverTarget.description}
+    <div class="binding-popover" class:helper={hoverTarget.helper}>
-      <div>
+      {#if hoverTarget.description}
+        <div>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html hoverTarget.description}
+        </div>
+      {/if}
+      {#if hoverTarget.code}
         <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-        {@html hoverTarget.description}
+        <pre>{@html hoverTarget.code}</pre>
-      </div>
+      {/if}
-    {/if}
+    </div>
-    {#if hoverTarget.code}
+  </Popover>
-      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+{/if}
-      <pre>{@html hoverTarget.code}</pre>
-    {/if}
-  </div>
-</Popover>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -173,7 +187,7 @@
           <div class="search-input">
             <Input
               placeholder="Search for bindings"
-              autocomplete="off"
+              autocomplete={false}
               bind:value={search}
               autofocus
             />
@@ -230,7 +244,8 @@
               {#each category.bindings as binding}
                 <li
                   class="binding"
-                  on:mouseenter={e => showBindingPopover(binding, e.target)}
+                  on:mouseenter={e =>
+                    showBindingPopover(binding, e.currentTarget)}
                   on:mouseleave={hidePopover}
                   on:click={() => addBinding(binding)}
                 >
@@ -264,9 +279,11 @@
               {#each filteredHelpers as helper}
                 <li
                   class="binding"
-                  on:mouseenter={e => showHelperPopover(helper, e.target)}
+                  on:mouseenter={e =>
+                    showHelperPopover(helper, e.currentTarget)}
                   on:mouseleave={hidePopover}
-                  on:click={() => addHelper(helper, mode.name === "javascript")}
+                  on:click={() =>
+                    addHelper(helper, mode === BindingMode.JavaScript)}
                 >
                   <span class="binding__label">{helper.displayText}</span>
                   <span class="binding__typeWrap">

packages/builder/src/constants/completions.ts

@@ -1,10 +1,10 @@
 import { getManifest, helpersToRemoveForJs } from "@budibase/string-templates"
+import { Helper } from "@budibase/types"
 
-export function handlebarsCompletions() {
+export function handlebarsCompletions(): Helper[] {
   const manifest = getManifest()
-
+  return Object.values(manifest).flatMap(helpersObj =>
-  return Object.keys(manifest).flatMap(key =>
+    Object.entries(helpersObj).map<Helper>(([helperName, helperConfig]) => ({
-    Object.entries(manifest[key]).map(([helperName, helperConfig]) => ({
       text: helperName,
       path: helperName,
       example: helperConfig.example,
@@ -14,6 +14,7 @@ export function handlebarsCompletions() {
       allowsJs:
         !helperConfig.requiresBlock &&
         !helpersToRemoveForJs.includes(helperName),
+      args: helperConfig.args,
     }))
   )
 }

packages/builder/src/dataBinding.js

@@ -373,6 +373,18 @@ const getContextBindings = (asset, componentId) => {
     .flat()
 }
 
+export const makeReadableKeyPropSafe = key => {
+  if (!key.includes(" ")) {
+    return key
+  }
+
+  if (new RegExp(/^\[(.+)\]$/).test(key.test)) {
+    return key
+  }
+
+  return `[${key}]`
+}
+
 /**
  * Generates a set of bindings for a given component context
  */
@@ -457,11 +469,11 @@ const generateComponentContextBindings = (asset, componentContext) => {
       const runtimeBinding = `${safeComponentId}.${safeKey}`
 
       // Optionally use a prefix with readable bindings
-      let readableBinding = component._instanceName
+      let readableBinding = makeReadableKeyPropSafe(component._instanceName)
       if (readablePrefix) {
         readableBinding += `.${readablePrefix}`
       }
-      readableBinding += `.${fieldSchema.name || key}`
+      readableBinding += `.${makeReadableKeyPropSafe(fieldSchema.name || key)}`
 
       // Determine which category this binding belongs in
       const bindingCategory = getComponentBindingCategory(
@@ -473,7 +485,7 @@ const generateComponentContextBindings = (asset, componentContext) => {
       bindings.push({
         type: "context",
         runtimeBinding,
-        readableBinding: `${readableBinding}`,
+        readableBinding,
         // Field schema and provider are required to construct relationship
         // datasource options, based on bindable properties
         fieldSchema,
@@ -1354,13 +1366,14 @@ const bindingReplacement = (
   }
   // work from longest to shortest
   const convertFromProps = bindableProperties
+    // TODO check whitespaces
     .map(el => el[convertFrom])
     .sort((a, b) => {
       return b.length - a.length
     })
   const boundValues = textWithBindings.match(regex) || []
   let result = textWithBindings
-  for (let boundValue of boundValues) {
+  for (const boundValue of boundValues) {
     let newBoundValue = boundValue
     // we use a search string, where any time we replace something we blank it out
     // in the search, working from longest to shortest so always use best match first

packages/builder/src/pages/builder/app/[application]/_components/BuilderGroupPopover.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { helpers } from "@budibase/shared-core"
+
+  export let groups = []
+  function tooltip(groups) {
+    const sortedNames = groups
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map(group => group.name)
+    return `Member of ${helpers.lists.punctuateList(sortedNames)}`
+  }
+</script>
+
+<div class="icon">
+  <Icon
+    name="Info"
+    size="XS"
+    color="grey"
+    hoverable
+    tooltip={tooltip(groups)}
+    tooltipPosition="top"
+  />
+</div>
+
+<style>
+  .icon {
+    height: auto;
+    display: flex;
+    justify-content: center;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -37,6 +37,7 @@
   import { emailValidator } from "@/helpers/validation"
   import { fly } from "svelte/transition"
   import InfoDisplay from "../design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
+  import BuilderGroupPopover from "./BuilderGroupPopover.svelte"
 
   let query = null
   let loaded = false
@@ -197,12 +198,19 @@
       return
     }
     const update = await users.get(user._id)
+    const newRoles = {
+      ...update.roles,
+      [prodAppId]: role,
+    }
+    // make sure no undefined/null roles (during removal)
+    for (let [appId, role] of Object.entries(newRoles)) {
+      if (!role) {
+        delete newRoles[appId]
+      }
+    }
     await users.save({
       ...update,
-      roles: {
+      roles: newRoles,
-        ...update.roles,
-        [prodAppId]: role,
-      },
     })
     await searchUsers(query, $builderStore.builderSidePanel, loaded)
   }
@@ -539,6 +547,10 @@
       creationAccessType = Constants.Roles.CREATOR
     }
   }
+
+  const itemCountText = (word, count) => {
+    return `${count} ${word}${count !== 1 ? "s" : ""}`
+  }
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
@@ -701,13 +713,11 @@
                 >
                   <div class="details">
                     <GroupIcon {group} size="S" />
-                    <div>
+                    <div class="group-name">
                       {group.name}
                     </div>
                     <div class="auth-entity-meta">
-                      {`${group.users?.length} user${
+                      {itemCountText("user", group.users?.length)}
-                        group.users?.length != 1 ? "s" : ""
-                      }`}
                     </div>
                   </div>
                   <div class="auth-entity-access">
@@ -741,16 +751,33 @@
                 <div class="auth-entity-access-title">Access</div>
               </div>
               {#each allUsers as user}
+                {@const userGroups = sdk.users.getUserAppGroups(
+                  $appStore.appId,
+                  user,
+                  $groups
+                )}
                 <div class="auth-entity">
                   <div class="details">
-                    <div class="user-email" title={user.email}>
+                    <div class="user-groups">
-                      {user.email}
+                      <div class="user-email" title={user.email}>
+                        {user.email}
+                      </div>
+                      {#if userGroups.length}
+                        <div class="group-info">
+                          <div class="auth-entity-meta">
+                            {itemCountText("group", userGroups.length)}
+                          </div>
+                          <BuilderGroupPopover groups={userGroups} />
+                        </div>
+                      {/if}
                     </div>
                   </div>
                   <div class="auth-entity-access" class:muted={user.group}>
                     <RoleSelect
                       footer={getRoleFooter(user)}
-                      placeholder={false}
+                      placeholder={userGroups?.length
+                        ? "Controlled by group"
+                        : false}
                       value={parseRole(user)}
                       allowRemove={user.role && !user.group}
                       allowPublic={false}
@@ -915,6 +942,7 @@
     color: var(--spectrum-global-color-gray-600);
     font-size: 12px;
     white-space: nowrap;
+    text-align: end;
   }
 
   .auth-entity-access {
@@ -931,7 +959,7 @@
 
   .auth-entity,
   .auth-entity-header {
-    padding: 0px var(--spacing-xl);
+    padding: 0 var(--spacing-xl);
   }
 
   .auth-entity,
@@ -946,15 +974,17 @@
     display: flex;
     align-items: center;
     gap: var(--spacing-m);
-    color: var(--spectrum-global-color-gray-900);
     overflow: hidden;
+    width: 100%;
   }
 
-  .auth-entity .user-email {
+  .auth-entity .user-email,
-    text-overflow: ellipsis;
+  .group-name {
-    white-space: nowrap;
+    flex: 1 1 0;
+    min-width: 0;
     overflow: hidden;
-    color: var(--spectrum-global-color-gray-900);
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   #builder-side-panel-container {
@@ -1048,4 +1078,23 @@
   .alert {
     padding: 0 var(--spacing-xl);
   }
+
+  .user-groups {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    width: 100%;
+    min-width: 0;
+  }
+
+  .group-info {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-xs);
+    justify-content: end;
+    width: 60px;
+    flex: 0 0 auto;
+  }
 </style>

packages/builder/src/pages/builder/portal/users/users/[userId].svelte

@@ -98,7 +98,9 @@
   $: privileged = sdk.users.isAdminOrGlobalBuilder(user)
   $: nameLabel = getNameLabel(user)
   $: filteredGroups = getFilteredGroups(internalGroups, searchTerm)
-  $: availableApps = getAvailableApps($appsStore.apps, privileged, user?.roles)
+  $: availableApps = user
+    ? getApps(user, sdk.users.userAppAccessList(user, $groups || []))
+    : []
   $: userGroups = $groups.filter(x => {
     return x.users?.find(y => {
       return y._id === userId
@@ -107,23 +109,19 @@
   $: globalRole = users.getUserRole(user)
   $: isTenantOwner = tenantOwner?.email && tenantOwner.email === user?.email
 
-  const getAvailableApps = (appList, privileged, roles) => {
+  const getApps = (user, appIds) => {
-    let availableApps = appList.slice()
+    let availableApps = $appsStore.apps
-    if (!privileged) {
+      .slice()
-      availableApps = availableApps.filter(x => {
+      .filter(app =>
-        let roleKeys = Object.keys(roles || {})
+        appIds.find(id => id === appsStore.getProdAppID(app.devId))
-        return roleKeys.concat(user?.builder?.apps).find(y => {
+      )
-          return x.appId === appsStore.extractAppId(y)
-        })
-      })
-    }
     return availableApps.map(app => {
       const prodAppId = appsStore.getProdAppID(app.devId)
       return {
         name: app.name,
         devId: app.devId,
         icon: app.icon,
-        role: getRole(prodAppId, roles),
+        role: getRole(prodAppId, user),
       }
     })
   }
@@ -136,7 +134,7 @@
     return groups.filter(group => group.name?.toLowerCase().includes(search))
   }
 
-  const getRole = (prodAppId, roles) => {
+  const getRole = (prodAppId, user) => {
     if (privileged) {
       return Constants.Roles.ADMIN
     }
@@ -145,7 +143,21 @@
       return Constants.Roles.CREATOR
     }
 
-    return roles[prodAppId]
+    if (user?.roles[prodAppId]) {
+      return user.roles[prodAppId]
+    }
+
+    // check if access via group for creator
+    const foundGroup = $groups?.find(
+      group => group.roles[prodAppId] || group.builder?.apps[prodAppId]
+    )
+    if (foundGroup.builder?.apps[prodAppId]) {
+      return Constants.Roles.CREATOR
+    }
+    // can't tell how groups will control role
+    if (foundGroup.roles[prodAppId]) {
+      return Constants.Roles.GROUP
+    }
   }
 
   const getNameLabel = user => {

packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte

@@ -15,7 +15,9 @@
   }
 </script>
 
-{#if value === Constants.Roles.CREATOR}
+{#if value === Constants.Roles.GROUP}
+  Controlled by group
+{:else if value === Constants.Roles.CREATOR}
   Can edit
 {:else}
   <StatusLight

packages/builder/src/pages/builder/portal/users/users/index.svelte

@@ -128,7 +128,7 @@
           $auth.user?.email === user.email
             ? false
             : true,
-        apps: [...new Set(Object.keys(user.roles))],
+        apps: sdk.users.userAppAccessList(user, $groups),
         access: role.sortOrder,
       }
     })

packages/client/src/components/app/DataProvider.svelte

@@ -2,9 +2,7 @@
   import { getContext } from "svelte"
   import { Pagination, ProgressCircle } from "@budibase/bbui"
   import { fetchData, QueryUtils } from "@budibase/frontend-core"
-  import {
+  import type {
-    LogicalOperator,
-    EmptyFilterOption,
     TableSchema,
     SortOrder,
     SearchFilters,
@@ -14,6 +12,7 @@
     GroupUserDatasource,
     DataFetchOptions,
   } from "@budibase/types"
+  import { LogicalOperator, EmptyFilterOption } from "@budibase/types"
 
   type ProviderDatasource = Exclude<
     DataFetchDatasource,

packages/client/src/components/app/blocks/form/FormBlock.svelte

@@ -4,7 +4,7 @@
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./FormBlockWrapper.svelte"
   import { get } from "svelte/store"
-  import { TableSchema, UIDatasource } from "@budibase/types"
+  import type { TableSchema, UIDatasource } from "@budibase/types"
 
   type Field = { name: string; active: boolean }
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte"
   import { Icon } from "@budibase/bbui"
-  import { UIComponentError } from "@budibase/types"
+  import type { UIComponentError } from "@budibase/types"
   import ComponentErrorStateCta from "./ComponentErrorStateCTA.svelte"
 
   export let componentErrors: UIComponentError[] | undefined

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte"
-  import { UIComponentError } from "@budibase/types"
+  import type { UIComponentError } from "@budibase/types"
 
   export let error: UIComponentError | undefined
 

packages/client/src/components/preview/DNDHandler.svelte

@@ -6,7 +6,7 @@
   import { findComponentById } from "@/utils/components.js"
   import { isGridEvent } from "@/utils/grid"
   import { DNDPlaceholderID } from "@/constants"
-  import { Component } from "@budibase/types"
+  import type { Component } from "@budibase/types"
 
   type ChildCoords = {
     placeholder: boolean

packages/frontend-core/src/constants.ts

@@ -106,6 +106,7 @@ export const Roles = {
   PUBLIC: "PUBLIC",
   BUILDER: "BUILDER",
   CREATOR: "CREATOR",
+  GROUP: "GROUP",
 }
 
 export const EventPublishType = {

packages/pro

@@ -1 +1 @@
-Subproject commit e3843dd4eaced68ae063355b77df200dbc789c98
+Subproject commit b28dbd549284cf450be7f25ad85aadf614d08f0b

packages/shared-core/src/helpers/index.ts

@@ -6,3 +6,4 @@ export * as cron from "./cron"
 export * as schema from "./schema"
 export * as views from "./views"
 export * as roles from "./roles"
+export * as lists from "./lists"

packages/shared-core/src/helpers/lists.ts

@@ -0,0 +1,6 @@
+export function punctuateList(list: string[]) {
+  if (list.length === 0) return ""
+  if (list.length === 1) return list[0]
+  if (list.length === 2) return list.join(" and ")
+  return list.slice(0, -1).join(", ") + " and " + list[list.length - 1]
+}

packages/shared-core/src/sdk/documents/users.ts

@@ -4,6 +4,7 @@ import {
   SEPARATOR,
   User,
   InternalTable,
+  UserGroup,
 } from "@budibase/types"
 import { getProdAppID } from "./applications"
 import * as _ from "lodash/fp"
@@ -129,3 +130,30 @@ export function containsUserID(value: string | undefined): boolean {
   }
   return value.includes(`${DocumentType.USER}${SEPARATOR}`)
 }
+
+export function getUserGroups(user: User, groups?: UserGroup[]) {
+  return (
+    groups?.filter(group => group.users?.find(u => u._id === user._id)) || []
+  )
+}
+
+export function getUserAppGroups(
+  appId: string,
+  user: User,
+  groups?: UserGroup[]
+) {
+  const prodAppId = getProdAppID(appId)
+  const userGroups = getUserGroups(user, groups)
+  return userGroups.filter(group =>
+    Object.keys(group.roles || {}).find(app => app === prodAppId)
+  )
+}
+
+export function userAppAccessList(user: User, groups?: UserGroup[]) {
+  const userGroups = getUserGroups(user, groups)
+  const userGroupApps = userGroups.flatMap(userGroup =>
+    Object.keys(userGroup.roles || {})
+  )
+  const fullList = [...Object.keys(user.roles), ...userGroupApps]
+  return [...new Set(fullList)]
+}

packages/string-templates/scripts/gen-collection-info.ts

@@ -17,7 +17,6 @@ type BudibaseAnnotation = Annotation & {
 
 type Helper = {
   args: string[]
-  numArgs: number
   example?: string
   description: string
   requiresBlock?: boolean
@@ -34,15 +33,13 @@ const outputJSON: Manifest = {}
 const ADDED_HELPERS = {
   date: {
     date: {
-      args: ["datetime", "format"],
+      args: ["[datetime]", "[format]", "[options]"],
-      numArgs: 2,
       example: '{{date now "DD-MM-YYYY" "America/New_York" }} -> 21-01-2021',
       description:
         "Format a date using moment.js date formatting - the timezone is optional and uses the tz database.",
     },
     duration: {
       args: ["time", "durationType"],
-      numArgs: 2,
       example: '{{duration 8 "seconds"}} -> a few seconds',
       description:
         "Produce a humanized duration left/until given an amount of time and the type of time measurement.",
@@ -53,7 +50,6 @@ const ADDED_HELPERS = {
 function fixSpecialCases(name: string, obj: Helper) {
   if (name === "ifNth") {
     obj.args = ["a", "b", "options"]
-    obj.numArgs = 3
   }
   if (name === "eachIndex") {
     obj.description = "Iterates the array, listing an item and the index of it."
@@ -163,7 +159,6 @@ function run() {
         .map(tag => tag.description!.replace(/`/g, "").split(" ")[0].trim())
       collectionInfo[name] = fixSpecialCases(name, {
         args,
-        numArgs: args.length,
         example: jsDocInfo.example || undefined,
         description: jsDocInfo.description,
         requiresBlock: jsDocInfo.acceptsBlock && !jsDocInfo.acceptsInline,

packages/string-templates/src/helpers/date.ts

@@ -71,7 +71,7 @@ function getContext(thisArg: any, locals: any, options: any) {
 function initialConfig(str: any, pattern: any, options?: any) {
   if (isOptions(pattern)) {
     options = pattern
-    pattern = null
+    pattern = DEFAULT_FORMAT
   }
 
   if (isOptions(str)) {
@@ -93,13 +93,15 @@ function setLocale(this: any, str: any, pattern: any, options?: any) {
   dayjs.locale(opts.lang || opts.language)
 }
 
+const DEFAULT_FORMAT = "MMMM DD, YYYY"
+
 export const date = (str: any, pattern: any, options: any) => {
   const config = initialConfig(str, pattern, options)
 
   // if no args are passed, return a formatted date
   if (config.str == null && config.pattern == null) {
     dayjs.locale("en")
-    return dayjs().format("MMMM DD, YYYY")
+    return dayjs().format(DEFAULT_FORMAT)
   }
 
   setLocale(config.str, config.pattern, config.options)

packages/string-templates/src/manifest.json

@@ -4,7 +4,6 @@
       "args": [
         "a"
       ],
-      "numArgs": 1,
       "example": "{{ abs 12012.1000 }} -> 12012.1",
       "description": "<p>Return the magnitude of <code>a</code>.</p>\n",
       "requiresBlock": false
@@ -14,7 +13,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ add 1 2 }} -> 3",
       "description": "<p>Return the sum of <code>a</code> plus <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -23,7 +21,6 @@
       "args": [
         "array"
       ],
-      "numArgs": 1,
       "example": "{{ avg 1 2 3 4 5 }} -> 3",
       "description": "<p>Returns the average of all numbers in the given array.</p>\n",
       "requiresBlock": false
@@ -32,7 +29,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{ ceil 1.2 }} -> 2",
       "description": "<p>Get the <code>Math.ceil()</code> of the given value.</p>\n",
       "requiresBlock": false
@@ -42,7 +38,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ divide 10 5 }} -> 2",
       "description": "<p>Divide <code>a</code> by <code>b</code></p>\n",
       "requiresBlock": false
@@ -51,7 +46,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{ floor 1.2 }} -> 1",
       "description": "<p>Get the <code>Math.floor()</code> of the given value.</p>\n",
       "requiresBlock": false
@@ -61,7 +55,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ subtract 10 5 }} -> 5",
       "description": "<p>Return the product of <code>a</code> minus <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -71,7 +64,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ modulo 10 5 }} -> 0",
       "description": "<p>Get the remainder of a division operation.</p>\n",
       "requiresBlock": false
@@ -81,7 +73,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ multiply 10 5 }} -> 50",
       "description": "<p>Multiply number <code>a</code> by number <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -91,7 +82,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ plus 10 5 }} -> 15",
       "description": "<p>Add <code>a</code> by <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -101,7 +91,6 @@
         "min",
         "max"
       ],
-      "numArgs": 2,
       "example": "{{ random 0 20 }} -> 10",
       "description": "<p>Generate a random number between two values</p>\n",
       "requiresBlock": false
@@ -111,7 +100,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ remainder 10 6 }} -> 4",
       "description": "<p>Get the remainder when <code>a</code> is divided by <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -120,7 +108,6 @@
       "args": [
         "number"
       ],
-      "numArgs": 1,
       "example": "{{ round 10.3 }} -> 10",
       "description": "<p>Round the given number.</p>\n",
       "requiresBlock": false
@@ -130,7 +117,6 @@
         "a",
         "b"
       ],
-      "numArgs": 2,
       "example": "{{ subtract 10 5 }} -> 5",
       "description": "<p>Return the product of <code>a</code> minus <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -139,7 +125,6 @@
       "args": [
         "array"
       ],
-      "numArgs": 1,
       "example": "{{ sum [1, 2, 3] }} -> 6",
       "description": "<p>Returns the sum of all numbers in the given array.</p>\n",
       "requiresBlock": false
@@ -151,7 +136,6 @@
         "array",
         "n"
       ],
-      "numArgs": 2,
       "example": "{{ after ['a', 'b', 'c', 'd'] 2}} -> ['c', 'd']",
       "description": "<p>Returns all of the items in an array after the specified index. Opposite of <a href=\"#before\">before</a>.</p>\n",
       "requiresBlock": false
@@ -160,7 +144,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{ arrayify 'foo' }} -> ['foo']",
       "description": "<p>Cast the given <code>value</code> to an array.</p>\n",
       "requiresBlock": false
@@ -170,7 +153,6 @@
         "array",
         "n"
       ],
-      "numArgs": 2,
       "example": "{{ before ['a', 'b', 'c', 'd'] 3}} -> ['a', 'b']",
       "description": "<p>Return all of the items in the collection before the specified count. Opposite of <a href=\"#after\">after</a>.</p>\n",
       "requiresBlock": false
@@ -180,7 +162,6 @@
         "array",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#eachIndex [1, 2, 3]}} {{item}} is {{index}} {{/eachIndex}} -> ' 1 is 0  2 is 1  3 is 2 '",
       "description": "<p>Iterates the array, listing an item and the index of it.</p>\n",
       "requiresBlock": true
@@ -191,7 +172,6 @@
         "value",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#filter [1, 2, 3] 2}}2 Found{{else}}2 not found{{/filter}} -> 2 Found",
       "description": "<p>Block helper that filters the given array and renders the block for values that evaluate to <code>true</code>, otherwise the inverse block is returned.</p>\n",
       "requiresBlock": true
@@ -201,7 +181,6 @@
         "array",
         "n"
       ],
-      "numArgs": 2,
       "example": "{{first [1, 2, 3, 4] 2}} -> 1,2",
       "description": "<p>Returns the first item, or first <code>n</code> items of an array.</p>\n",
       "requiresBlock": false
@@ -211,7 +190,6 @@
         "array",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#forEach [{ 'name': 'John' }] }} {{ name }} {{/forEach}} -> ' John '",
       "description": "<p>Iterates over each item in an array and exposes the current item in the array as context to the inner block. In addition to the current array item, the helper exposes the following variables to the inner block: - <code>index</code> - <code>total</code> - <code>isFirst</code> - <code>isLast</code> Also, <code>@index</code> is exposed as a private variable, and additional private variables may be defined as hash arguments.</p>\n",
       "requiresBlock": true
@@ -222,7 +200,6 @@
         "value",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#inArray [1, 2, 3] 2}} 2 exists {{else}} 2 does not exist {{/inArray}} -> ' 2 exists '",
       "description": "<p>Block helper that renders the block if an array has the given <code>value</code>. Optionally specify an inverse block to render when the array does not have the given value.</p>\n",
       "requiresBlock": true
@@ -231,7 +208,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{isArray [1, 2]}} -> true",
       "description": "<p>Returns true if <code>value</code> is an es5 array.</p>\n",
       "requiresBlock": false
@@ -241,7 +217,6 @@
         "array",
         "idx"
       ],
-      "numArgs": 2,
       "example": "{{itemAt [1, 2, 3] 1}} -> 2",
       "description": "<p>Returns the item from <code>array</code> at index <code>idx</code>.</p>\n",
       "requiresBlock": false
@@ -251,7 +226,6 @@
         "array",
         "separator"
       ],
-      "numArgs": 2,
       "example": "{{join [1, 2, 3]}} -> 1, 2, 3",
       "description": "<p>Join all elements of array into a string, optionally using a given separator.</p>\n",
       "requiresBlock": false
@@ -261,7 +235,6 @@
         "value",
         "length"
       ],
-      "numArgs": 2,
       "example": "{{equalsLength [1, 2, 3] 3}} -> true",
       "description": "<p>Returns true if the the length of the given <code>value</code> is equal to the given <code>length</code>. Can be used as a block or inline helper.</p>\n",
       "requiresBlock": false
@@ -271,7 +244,6 @@
         "value",
         "n"
       ],
-      "numArgs": 2,
       "example": "{{last [1, 2, 3]}} -> 3",
       "description": "<p>Returns the last item, or last <code>n</code> items of an array or string. Opposite of <a href=\"#first\">first</a>.</p>\n",
       "requiresBlock": false
@@ -280,7 +252,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{length [1, 2, 3]}} -> 3",
       "description": "<p>Returns the length of the given string or array.</p>\n",
       "requiresBlock": false
@@ -290,7 +261,6 @@
         "value",
         "length"
       ],
-      "numArgs": 2,
       "example": "{{equalsLength [1, 2, 3] 3}} -> true",
       "description": "<p>Returns true if the the length of the given <code>value</code> is equal to the given <code>length</code>. Can be used as a block or inline helper.</p>\n",
       "requiresBlock": false
@@ -300,7 +270,6 @@
         "array",
         "fn"
       ],
-      "numArgs": 2,
       "example": "{{map [1, 2, 3] double}} -> [2, 4, 6]",
       "description": "<p>Returns a new array, created by calling <code>function</code> on each element of the given <code>array</code>. For example,</p>\n",
       "requiresBlock": false
@@ -310,7 +279,6 @@
         "collection",
         "prop"
       ],
-      "numArgs": 2,
       "example": "{{pluck [{ 'name': 'Bob' }] 'name' }} -> ['Bob']",
       "description": "<p>Map over the given object or array or objects and create an array of values from the given <code>prop</code>. Dot-notation may be used (as a string) to get nested properties.</p>\n",
       "requiresBlock": false
@@ -319,7 +287,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{reverse [1, 2, 3]}} -> [3, 2, 1]",
       "description": "<p>Reverse the elements in an array, or the characters in a string.</p>\n",
       "requiresBlock": false
@@ -330,7 +297,6 @@
         "iter",
         "provided"
       ],
-      "numArgs": 3,
       "example": "{{#some [1, \"b\", 3] isString}} string found {{else}} No string found {{/some}} -> ' string found '",
       "description": "<p>Block helper that returns the block if the callback returns true for some value in the given array.</p>\n",
       "requiresBlock": true
@@ -340,7 +306,6 @@
         "array",
         "key"
       ],
-      "numArgs": 2,
       "example": "{{ sort ['b', 'a', 'c'] }} -> ['a', 'b', 'c']",
       "description": "<p>Sort the given <code>array</code>. If an array of objects is passed, you may optionally pass a <code>key</code> to sort on as the second argument. You may alternatively pass a sorting function as the second argument.</p>\n",
       "requiresBlock": false
@@ -350,7 +315,6 @@
         "array",
         "props"
       ],
-      "numArgs": 2,
       "example": "{{ sortBy [{'a': 'zzz'}, {'a': 'aaa'}] 'a' }} -> [{'a':'aaa'},{'a':'zzz'}]",
       "description": "<p>Sort an <code>array</code>. If an array of objects is passed, you may optionally pass a <code>key</code> to sort on as the second argument. You may alternatively pass a sorting function as the second argument.</p>\n",
       "requiresBlock": false
@@ -361,7 +325,6 @@
         "idx",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withAfter [1, 2, 3] 1 }} {{this}} {{/withAfter}} -> ' 2  3 '",
       "description": "<p>Use the items in the array <em>after</em> the specified index as context inside a block. Opposite of <a href=\"#withBefore\">withBefore</a>.</p>\n",
       "requiresBlock": true
@@ -372,7 +335,6 @@
         "idx",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withBefore [1, 2, 3] 2 }} {{this}} {{/withBefore}} -> ' 1 '",
       "description": "<p>Use the items in the array <em>before</em> the specified index as context inside a block. Opposite of <a href=\"#withAfter\">withAfter</a>.</p>\n",
       "requiresBlock": true
@@ -383,7 +345,6 @@
         "idx",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withFirst [1, 2, 3] }}{{this}}{{/withFirst}} -> 1",
       "description": "<p>Use the first item in a collection inside a handlebars block expression. Opposite of <a href=\"#withLast\">withLast</a>.</p>\n",
       "requiresBlock": true
@@ -394,7 +355,6 @@
         "size",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withGroup [1, 2, 3, 4] 2}}{{#each this}}{{.}}{{/each}}<br>{{/withGroup}} -> 12<br>34<br>",
       "description": "<p>Block helper that groups array elements by given group <code>size</code>.</p>\n",
       "requiresBlock": true
@@ -405,7 +365,6 @@
         "idx",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withLast [1, 2, 3, 4]}}{{this}}{{/withLast}} -> 4",
       "description": "<p>Use the last item or <code>n</code> items in an array as context inside a block. Opposite of <a href=\"#withFirst\">withFirst</a>.</p>\n",
       "requiresBlock": true
@@ -416,7 +375,6 @@
         "prop",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#withSort ['b', 'a', 'c']}}{{this}}{{/withSort}} -> abc",
       "description": "<p>Block helper that sorts a collection and exposes the sorted collection as context inside the block.</p>\n",
       "requiresBlock": true
@@ -426,7 +384,6 @@
         "array",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#each (unique ['a', 'a', 'c', 'b', 'e', 'e']) }}{{.}}{{/each}} -> acbe",
       "description": "<p>Block helper that return an array with all duplicate values removed. Best used along with a <a href=\"#each\">each</a> helper.</p>\n",
       "requiresBlock": true
@@ -437,7 +394,6 @@
       "args": [
         "number"
       ],
-      "numArgs": 1,
       "example": "{{ bytes 1386 1 }} -> 1.4 kB",
       "description": "<p>Format a number to it&#39;s equivalent in bytes. If a string is passed, it&#39;s length will be formatted and returned. <strong>Examples:</strong> - <code>&#39;foo&#39; =&gt; 3 B</code> - <code>13661855 =&gt; 13.66 MB</code> - <code>825399 =&gt; 825.39 kB</code> - <code>1396 =&gt; 1.4 kB</code></p>\n",
       "requiresBlock": false
@@ -446,7 +402,6 @@
       "args": [
         "num"
       ],
-      "numArgs": 1,
       "example": "{{ addCommas 1000000 }} -> 1,000,000",
       "description": "<p>Add commas to numbers</p>\n",
       "requiresBlock": false
@@ -455,7 +410,6 @@
       "args": [
         "num"
       ],
-      "numArgs": 1,
       "example": "{{ phoneNumber 8005551212 }} -> (800) 555-1212",
       "description": "<p>Convert a string or number to a formatted phone number.</p>\n",
       "requiresBlock": false
@@ -465,7 +419,6 @@
         "number",
         "precision"
       ],
-      "numArgs": 2,
       "example": "{{ toAbbr 10123 2 }} -> 10.12k",
       "description": "<p>Abbreviate numbers to the given number of <code>precision</code>. This for general numbers, not size in bytes.</p>\n",
       "requiresBlock": false
@@ -475,7 +428,6 @@
         "number",
         "fractionDigits"
       ],
-      "numArgs": 2,
       "example": "{{ toExponential 10123 2 }} -> 1.01e+4",
       "description": "<p>Returns a string representing the given number in exponential notation.</p>\n",
       "requiresBlock": false
@@ -485,7 +437,6 @@
         "number",
         "digits"
       ],
-      "numArgs": 2,
       "example": "{{ toFixed 1.1234 2 }} -> 1.12",
       "description": "<p>Formats the given number using fixed-point notation.</p>\n",
       "requiresBlock": false
@@ -494,7 +445,6 @@
       "args": [
         "number"
       ],
-      "numArgs": 1,
       "description": "<p>Convert input to a float.</p>\n",
       "requiresBlock": false
     },
@@ -502,7 +452,6 @@
       "args": [
         "number"
       ],
-      "numArgs": 1,
       "description": "<p>Convert input to an integer.</p>\n",
       "requiresBlock": false
     },
@@ -511,7 +460,6 @@
         "number",
         "precision"
       ],
-      "numArgs": 2,
       "example": "{{toPrecision '1.1234' 2}} -> 1.1",
       "description": "<p>Returns a string representing the <code>Number</code> object to the specified precision.</p>\n",
       "requiresBlock": false
@@ -522,7 +470,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ encodeURI 'https://myurl?Hello There' }} -> https%3A%2F%2Fmyurl%3FHello%20There",
       "description": "<p>Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character.</p>\n",
       "requiresBlock": false
@@ -531,7 +478,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ escape 'https://myurl?Hello+There' }} -> https%3A%2F%2Fmyurl%3FHello%2BThere",
       "description": "<p>Escape the given string by replacing characters with escape sequences. Useful for allowing the string to be used in a URL, etc.</p>\n",
       "requiresBlock": false
@@ -540,7 +486,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ decodeURI 'https://myurl?Hello%20There' }} -> https://myurl?Hello There",
       "description": "<p>Decode a Uniform Resource Identifier (URI) component.</p>\n",
       "requiresBlock": false
@@ -550,7 +495,6 @@
         "base",
         "href"
       ],
-      "numArgs": 2,
       "example": "{{ urlResolve 'https://myurl' '/api/test' }} -> https://myurl/api/test",
       "description": "<p>Take a base URL, and a href URL, and resolve them as a browser would for an anchor tag.</p>\n",
       "requiresBlock": false
@@ -559,7 +503,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ urlParse 'https://myurl/api/test' }}",
       "description": "<p>Parses a <code>url</code> string into an object.</p>\n",
       "requiresBlock": false
@@ -568,7 +511,6 @@
       "args": [
         "url"
       ],
-      "numArgs": 1,
       "example": "{{ stripQuerystring 'https://myurl/api/test?foo=bar' }} -> 'https://myurl/api/test'",
       "description": "<p>Strip the query string from the given <code>url</code>.</p>\n",
       "requiresBlock": false
@@ -577,7 +519,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ stripProtocol 'https://myurl/api/test' }} -> '//myurl/api/test'",
       "description": "<p>Strip protocol from a <code>url</code>. Useful for displaying media that may have an &#39;http&#39; protocol on secure connections.</p>\n",
       "requiresBlock": false
@@ -589,7 +530,6 @@
         "str",
         "suffix"
       ],
-      "numArgs": 2,
       "example": "{{append 'index' '.html'}} -> index.html",
       "description": "<p>Append the specified <code>suffix</code> to the given string.</p>\n",
       "requiresBlock": false
@@ -598,7 +538,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{camelcase 'foo bar baz'}} ->  fooBarBaz",
       "description": "<p>camelCase the characters in the given <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -607,7 +546,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{capitalize 'foo bar baz'}} ->  Foo bar baz",
       "description": "<p>Capitalize the first word in a sentence.</p>\n",
       "requiresBlock": false
@@ -616,7 +554,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{ capitalizeAll 'foo bar baz'}} ->  Foo Bar Baz",
       "description": "<p>Capitalize all words in a string.</p>\n",
       "requiresBlock": false
@@ -626,7 +563,6 @@
         "str",
         "spaces"
       ],
-      "numArgs": 2,
       "example": "{{ center 'test' 1}} -> ' test '",
       "description": "<p>Center a string using non-breaking spaces</p>\n",
       "requiresBlock": false
@@ -635,7 +571,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{ chop ' ABC '}} -> ABC",
       "description": "<p>Like trim, but removes both extraneous whitespace <strong>and non-word characters</strong> from the beginning and end of a string.</p>\n",
       "requiresBlock": false
@@ -644,7 +579,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{dashcase 'a-b-c d_e'}} -> a-b-c-d-e",
       "description": "<p>dash-case the characters in <code>string</code>. Replaces non-word characters and periods with hyphens.</p>\n",
       "requiresBlock": false
@@ -653,7 +587,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{dotcase 'a-b-c d_e'}} -> a.b.c.d.e",
       "description": "<p>dot.case the characters in <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -662,7 +595,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{downcase 'aBcDeF'}} -> abcdef",
       "description": "<p>Lowercase all of the characters in the given string. Alias for <a href=\"#lowercase\">lowercase</a>.</p>\n",
       "requiresBlock": false
@@ -672,7 +604,6 @@
         "str",
         "length"
       ],
-      "numArgs": 2,
       "example": "{{ellipsis 'foo bar baz' 7}} -> foo bar…",
       "description": "<p>Truncates a string to the specified <code>length</code>, and appends it with an elipsis, <code>…</code>.</p>\n",
       "requiresBlock": false
@@ -681,7 +612,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{hyphenate 'foo bar baz qux'}} -> foo-bar-baz-qux",
       "description": "<p>Replace spaces in a string with hyphens.</p>\n",
       "requiresBlock": false
@@ -690,7 +620,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "example": "{{isString 'foo'}} -> true",
       "description": "<p>Return true if <code>value</code> is a string.</p>\n",
       "requiresBlock": false
@@ -699,7 +628,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{lowercase 'Foo BAR baZ'}} -> foo bar baz",
       "description": "<p>Lowercase all characters in the given string.</p>\n",
       "requiresBlock": false
@@ -709,7 +637,6 @@
         "str",
         "substring"
       ],
-      "numArgs": 2,
       "example": "{{occurrences 'foo bar foo bar baz' 'foo'}} -> 2",
       "description": "<p>Return the number of occurrences of <code>substring</code> within the given <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -718,7 +645,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{pascalcase 'foo bar baz'}} -> FooBarBaz",
       "description": "<p>PascalCase the characters in <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -727,7 +653,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{pathcase 'a-b-c d_e'}} -> a/b/c/d/e",
       "description": "<p>path/case the characters in <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -736,7 +661,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{plusify 'foo bar baz'}} -> foo+bar+baz",
       "description": "<p>Replace spaces in the given string with pluses.</p>\n",
       "requiresBlock": false
@@ -746,7 +670,6 @@
         "str",
         "prefix"
       ],
-      "numArgs": 2,
       "example": "{{prepend 'bar' 'foo-'}} -> foo-bar",
       "description": "<p>Prepends the given <code>string</code> with the specified <code>prefix</code>.</p>\n",
       "requiresBlock": false
@@ -756,7 +679,6 @@
         "str",
         "substring"
       ],
-      "numArgs": 2,
       "example": "{{remove 'a b a b a b' 'a '}} -> b b b",
       "description": "<p>Remove all occurrences of <code>substring</code> from the given <code>str</code>.</p>\n",
       "requiresBlock": false
@@ -766,7 +688,6 @@
         "str",
         "substring"
       ],
-      "numArgs": 2,
       "example": "{{removeFirst 'a b a b a b' 'a'}} -> ' b a b a b'",
       "description": "<p>Remove the first occurrence of <code>substring</code> from the given <code>str</code>.</p>\n",
       "requiresBlock": false
@@ -777,7 +698,6 @@
         "a",
         "b"
       ],
-      "numArgs": 3,
       "example": "{{replace 'a b a b a b' 'a' 'z'}} -> z b z b z b",
       "description": "<p>Replace all occurrences of substring <code>a</code> with substring <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -788,7 +708,6 @@
         "a",
         "b"
       ],
-      "numArgs": 3,
       "example": "{{replaceFirst 'a b a b a b' 'a' 'z'}} -> z b a b a b",
       "description": "<p>Replace the first occurrence of substring <code>a</code> with substring <code>b</code>.</p>\n",
       "requiresBlock": false
@@ -797,7 +716,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{sentence 'hello world. goodbye world.'}} -> Hello world. Goodbye world.",
       "description": "<p>Sentence case the given string</p>\n",
       "requiresBlock": false
@@ -806,7 +724,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{snakecase 'a-b-c d_e'}} -> a_b_c_d_e",
       "description": "<p>snake_case the characters in the given <code>string</code>.</p>\n",
       "requiresBlock": false
@@ -815,7 +732,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{split 'a,b,c'}} -> ['a', 'b', 'c']",
       "description": "<p>Split <code>string</code> by the given <code>character</code>.</p>\n",
       "requiresBlock": false
@@ -826,7 +742,6 @@
         "testString",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#startsWith 'Goodbye' 'Hello, world!'}}Yep{{else}}Nope{{/startsWith}} -> Nope",
       "description": "<p>Tests whether a string begins with the given prefix.</p>\n",
       "requiresBlock": true
@@ -835,7 +750,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{titleize 'this is title case' }} -> This Is Title Case",
       "description": "<p>Title case the given string.</p>\n",
       "requiresBlock": false
@@ -844,7 +758,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{trim '  ABC  ' }} -> ABC",
       "description": "<p>Removes extraneous whitespace from the beginning and end of a string.</p>\n",
       "requiresBlock": false
@@ -853,7 +766,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{trimLeft '  ABC ' }} -> 'ABC '",
       "description": "<p>Removes extraneous whitespace from the beginning of a string.</p>\n",
       "requiresBlock": false
@@ -862,7 +774,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{trimRight '  ABC ' }} ->  '  ABC'",
       "description": "<p>Removes extraneous whitespace from the end of a string.</p>\n",
       "requiresBlock": false
@@ -873,7 +784,6 @@
         "limit",
         "suffix"
       ],
-      "numArgs": 3,
       "example": "{{truncate 'foo bar baz' 7 }} -> foo bar",
       "description": "<p>Truncate a string to the specified <code>length</code>. Also see <a href=\"#ellipsis\">ellipsis</a>.</p>\n",
       "requiresBlock": false
@@ -884,7 +794,6 @@
         "limit",
         "suffix"
       ],
-      "numArgs": 3,
       "example": "{{truncateWords 'foo bar baz' 1 }} -> foo…",
       "description": "<p>Truncate a string to have the specified number of words. Also see <a href=\"#truncate\">truncate</a>.</p>\n",
       "requiresBlock": false
@@ -893,7 +802,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "example": "{{upcase 'aBcDef'}} -> ABCDEF",
       "description": "<p>Uppercase all of the characters in the given string. Alias for <a href=\"#uppercase\">uppercase</a>.</p>\n",
       "requiresBlock": false
@@ -903,7 +811,6 @@
         "str",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{uppercase 'aBcDef'}} -> ABCDEF",
       "description": "<p>Uppercase all of the characters in the given string. If used as a block helper it will uppercase the entire block. This helper does not support inverse blocks.</p>\n",
       "requiresBlock": false
@@ -912,7 +819,6 @@
       "args": [
         "num"
       ],
-      "numArgs": 1,
       "example": "{{lorem 11}} -> Lorem ipsum",
       "description": "<p>Takes a number and returns that many charaters of Lorem Ipsum</p>\n",
       "requiresBlock": false
@@ -925,7 +831,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#and great magnificent}}both{{else}}no{{/and}} -> no",
       "description": "<p>Helper that renders the block if <strong>both</strong> of the given values are truthy. If an inverse block is specified it will be rendered when falsy. Works as a block helper, inline helper or subexpression.</p>\n",
       "requiresBlock": true
@@ -937,7 +842,6 @@
         "b",
         "options"
       ],
-      "numArgs": 4,
       "example": "{{compare 10 '<' 5 }} -> false",
       "description": "<p>Render a block when a comparison of the first and third arguments returns true. The second argument is the [arithemetic operator][operators] to use. You may also optionally specify an inverse block to render when falsy.</p>\n",
       "requiresBlock": false
@@ -949,7 +853,6 @@
         "[startIndex=0]",
         "options"
       ],
-      "numArgs": 4,
       "example": "{{#contains ['a', 'b', 'c'] 'd'}} This will not be rendered. {{else}} This will be rendered. {{/contains}} -> ' This will be rendered. '",
       "description": "<p>Block helper that renders the block if <code>collection</code> has the given <code>value</code>, using strict equality (<code>===</code>) for comparison, otherwise the inverse block is rendered (if specified). If a <code>startIndex</code> is specified and is negative, it is used as the offset from the end of the collection.</p>\n",
       "requiresBlock": true
@@ -959,7 +862,6 @@
         "value",
         "defaultValue"
       ],
-      "numArgs": 2,
       "example": "{{default null null 'default'}} -> default",
       "description": "<p>Returns the first value that is not undefined, otherwise the &#39;default&#39; value is returned.</p>\n",
       "requiresBlock": false
@@ -970,7 +872,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#eq 3 3}}equal{{else}}not equal{{/eq}} -> equal",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -981,7 +882,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#gt 4 3}} greater than{{else}} not greater than{{/gt}} -> ' greater than'",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>greater than</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -992,7 +892,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#gte 4 3}} greater than or equal{{else}} not greater than{{/gte}} -> ' greater than or equal'",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>greater than or equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -1003,7 +902,6 @@
         "pattern",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#has 'foobar' 'foo'}}has it{{else}}doesn't{{/has}} -> has it",
       "description": "<p>Block helper that renders a block if <code>value</code> has <code>pattern</code>. If an inverse block is specified it will be rendered when falsy.</p>\n",
       "requiresBlock": true
@@ -1013,7 +911,6 @@
         "val",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{isFalsey '' }} -> true",
       "description": "<p>Returns true if the given <code>value</code> is falsey. Uses the [falsey][] library for comparisons. Please see that library for more information or to report bugs with this helper.</p>\n",
       "requiresBlock": false
@@ -1023,7 +920,6 @@
         "val",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{isTruthy '12' }} -> true",
       "description": "<p>Returns true if the given <code>value</code> is truthy. Uses the [falsey][] library for comparisons. Please see that library for more information or to report bugs with this helper.</p>\n",
       "requiresBlock": false
@@ -1033,7 +929,6 @@
         "number",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#ifEven 2}} even {{else}} odd {{/ifEven}} -> ' even '",
       "description": "<p>Return true if the given value is an even number.</p>\n",
       "requiresBlock": true
@@ -1044,7 +939,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#ifNth 2 10}}remainder{{else}}no remainder{{/ifNth}} -> remainder",
       "description": "<p>Conditionally renders a block if the remainder is zero when <code>b</code> operand is divided by <code>a</code>. If an inverse block is specified it will be rendered when the remainder is <strong>not zero</strong>.</p>\n",
       "requiresBlock": true
@@ -1054,7 +948,6 @@
         "value",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#ifOdd 3}}odd{{else}}even{{/ifOdd}} -> odd",
       "description": "<p>Block helper that renders a block if <code>value</code> is <strong>an odd number</strong>. If an inverse block is specified it will be rendered when falsy.</p>\n",
       "requiresBlock": true
@@ -1065,7 +958,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#is 3 3}} is {{else}} is not {{/is}} -> ' is '",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. Similar to <a href=\"#eq\">eq</a> but does not do strict equality.</p>\n",
       "requiresBlock": true
@@ -1076,7 +968,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#isnt 3 3}} isnt {{else}} is {{/isnt}} -> ' is '",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>not equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. Similar to <a href=\"#unlesseq\">unlessEq</a> but does not use strict equality for comparisons.</p>\n",
       "requiresBlock": true
@@ -1086,7 +977,6 @@
         "context",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#lt 2 3}} less than {{else}} more than or equal {{/lt}} -> ' less than '",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>less than</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -1097,7 +987,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#lte 2 3}} less than or equal {{else}} more than {{/lte}} -> ' less than or equal '",
       "description": "<p>Block helper that renders a block if <code>a</code> is <strong>less than or equal to</strong> <code>b</code>. If an inverse block is specified it will be rendered when falsy. You may optionally use the <code>compare=&#39;&#39;</code> hash argument for the second value.</p>\n",
       "requiresBlock": true
@@ -1108,7 +997,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#neither null null}}both falsey{{else}}both not falsey{{/neither}} -> both falsey",
       "description": "<p>Block helper that renders a block if <strong>neither of</strong> the given values are truthy. If an inverse block is specified it will be rendered when falsy.</p>\n",
       "requiresBlock": true
@@ -1118,7 +1006,6 @@
         "val",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#not undefined }}falsey{{else}}not falsey{{/not}} -> falsey",
       "description": "<p>Returns true if <code>val</code> is falsey. Works as a block or inline helper.</p>\n",
       "requiresBlock": true
@@ -1128,7 +1015,6 @@
         "arguments",
         "options"
       ],
-      "numArgs": 2,
       "example": "{{#or 1 2 undefined }} at least one truthy {{else}} all falsey {{/or}} -> ' at least one truthy '",
       "description": "<p>Block helper that renders a block if <strong>any of</strong> the given values is truthy. If an inverse block is specified it will be rendered when falsy.</p>\n",
       "requiresBlock": true
@@ -1139,7 +1025,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessEq 2 1 }} not equal {{else}} equal {{/unlessEq}} -> ' not equal '",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is equal to <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1150,7 +1035,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessGt 20 1 }} not greater than {{else}} greater than {{/unlessGt}} -> ' greater than '",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is greater than <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1161,7 +1045,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessLt 20 1 }}greater than or equal{{else}}less than{{/unlessLt}} -> greater than or equal",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is less than <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1172,7 +1055,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessGteq 20 1 }} less than {{else}}greater than or equal to{{/unlessGteq}} -> greater than or equal to",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is greater than or equal to <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1183,7 +1065,6 @@
         "b",
         "options"
       ],
-      "numArgs": 3,
       "example": "{{#unlessLteq 20 1 }} greater than {{else}} less than or equal to {{/unlessLteq}} -> ' greater than '",
       "description": "<p>Block helper that always renders the inverse block <strong>unless <code>a</code> is less than or equal to <code>b</code></strong>.</p>\n",
       "requiresBlock": true
@@ -1194,7 +1075,6 @@
       "args": [
         "objects"
       ],
-      "numArgs": 1,
       "description": "<p>Extend the context with the properties of other objects. A shallow merge is performed to avoid mutating the context.</p>\n",
       "requiresBlock": false
     },
@@ -1203,7 +1083,6 @@
         "context",
         "options"
       ],
-      "numArgs": 2,
       "description": "<p>Block helper that iterates over the properties of an object, exposing each key and value on the context.</p>\n",
       "requiresBlock": true
     },
@@ -1212,7 +1091,6 @@
         "obj",
         "options"
       ],
-      "numArgs": 2,
       "description": "<p>Block helper that iterates over the <strong>own</strong> properties of an object, exposing each key and value on the context.</p>\n",
       "requiresBlock": true
     },
@@ -1220,7 +1098,6 @@
       "args": [
         "prop"
       ],
-      "numArgs": 1,
       "description": "<p>Take arguments and, if they are string or number, convert them to a dot-delineated object property path.</p>\n",
       "requiresBlock": false
     },
@@ -1230,7 +1107,6 @@
         "context",
         "options"
       ],
-      "numArgs": 3,
       "description": "<p>Use property paths (<code>a.b.c</code>) to get a value or nested value from the context. Works as a regular helper or block helper.</p>\n",
       "requiresBlock": true
     },
@@ -1239,7 +1115,6 @@
         "prop",
         "context"
       ],
-      "numArgs": 2,
       "description": "<p>Use property paths (<code>a.b.c</code>) to get an object from the context. Differs from the <code>get</code> helper in that this helper will return the actual object, including the given property key. Also, this helper does not work as a block helper.</p>\n",
       "requiresBlock": false
     },
@@ -1248,7 +1123,6 @@
         "key",
         "context"
       ],
-      "numArgs": 2,
       "description": "<p>Return true if <code>key</code> is an own, enumerable property of the given <code>context</code> object.</p>\n",
       "requiresBlock": false
     },
@@ -1256,7 +1130,6 @@
       "args": [
         "value"
       ],
-      "numArgs": 1,
       "description": "<p>Return true if <code>value</code> is an object.</p>\n",
       "requiresBlock": false
     },
@@ -1264,7 +1137,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "description": "<p>Parses the given string using <code>JSON.parse</code>.</p>\n",
       "requiresBlock": true
     },
@@ -1272,7 +1144,6 @@
       "args": [
         "obj"
       ],
-      "numArgs": 1,
       "description": "<p>Stringify an object using <code>JSON.stringify</code>.</p>\n",
       "requiresBlock": false
     },
@@ -1281,7 +1152,6 @@
         "object",
         "objects"
       ],
-      "numArgs": 2,
       "description": "<p>Deeply merge the properties of the given <code>objects</code> with the context object.</p>\n",
       "requiresBlock": false
     },
@@ -1289,7 +1159,6 @@
       "args": [
         "string"
       ],
-      "numArgs": 1,
       "description": "<p>Parses the given string using <code>JSON.parse</code>.</p>\n",
       "requiresBlock": true
     },
@@ -1299,7 +1168,6 @@
         "context",
         "options"
       ],
-      "numArgs": 3,
       "description": "<p>Pick properties from the context object.</p>\n",
       "requiresBlock": true
     },
@@ -1307,7 +1175,6 @@
       "args": [
         "obj"
       ],
-      "numArgs": 1,
       "description": "<p>Stringify an object using <code>JSON.stringify</code>.</p>\n",
       "requiresBlock": false
     }
@@ -1317,7 +1184,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{toRegex 'foo'}} -> /foo/",
       "description": "<p>Convert the given string to a regular expression.</p>\n",
       "requiresBlock": false
@@ -1326,7 +1192,6 @@
       "args": [
         "str"
       ],
-      "numArgs": 1,
       "example": "{{test 'foobar' (toRegex 'foo')}} -> true",
       "description": "<p>Returns true if the given <code>str</code> matches the given regex. A regex can be passed on the context, or using the <a href=\"#toregex\">toRegex</a> helper as a subexpression.</p>\n",
       "requiresBlock": false
@@ -1335,7 +1200,6 @@
   "uuid": {
     "uuid": {
       "args": [],
-      "numArgs": 0,
       "example": "{{ uuid }} -> f34ebc66-93bd-4f7c-b79b-92b5569138bc",
       "description": "<p>Generates a UUID, using the V4 method (identical to the browser crypto.randomUUID function).</p>\n",
       "requiresBlock": false
@@ -1344,10 +1208,10 @@
   "date": {
     "date": {
       "args": [
-        "datetime",
+        "[datetime]",
-        "format"
+        "[format]",
+        "[options]"
       ],
-      "numArgs": 2,
       "example": "{{date now \"DD-MM-YYYY\" \"America/New_York\" }} -> 21-01-2021",
       "description": "<p>Format a date using moment.js date formatting - the timezone is optional and uses the tz database.</p>\n"
     },
@@ -1356,7 +1220,6 @@
         "time",
         "durationType"
       ],
-      "numArgs": 2,
       "example": "{{duration 8 \"seconds\"}} -> a few seconds",
       "description": "<p>Produce a humanized duration left/until given an amount of time and the type of time measurement.</p>\n"
     }

packages/types/src/ui/bindings/binding.ts

@@ -1,7 +1,19 @@
 export interface EnrichedBinding {
+  value: string
+  valueHTML: string
   runtimeBinding: string
   readableBinding: string
   type?: null | string
+  icon?: string
+  category: string
+  display?: { name: string; type: string }
+  fieldSchema?: {
+    name: string
+    tableId: string
+    type: string
+    subtype?: string
+    prefixKeys?: string
+  }
 }
 
 export enum BindingMode {

packages/types/src/ui/bindings/helper.ts

@@ -1,6 +1,9 @@
 export interface Helper {
+  label: string
+  displayText: string
   example: string
   description: string
   args: any[]
   requiresBlock?: boolean
+  allowsJs: boolean
 }