From dbb783c13fc84faffaf9930dbb292f49bd0ee5b1 Mon Sep 17 00:00:00 2001 From: Adria Navarro Date: Mon, 17 Feb 2025 18:48:40 +0100 Subject: [PATCH] Fix types --- packages/builder/src/helpers/components.ts | 10 +- .../src/stores/builder/componentTreeNodes.ts | 2 +- .../builder/src/stores/builder/components.ts | 117 +++++++++--------- .../builder/src/stores/builder/screens.ts | 2 +- 4 files changed, 65 insertions(+), 66 deletions(-) diff --git a/packages/builder/src/helpers/components.ts b/packages/builder/src/helpers/components.ts index 550b49c34e..be14866f7a 100644 --- a/packages/builder/src/helpers/components.ts +++ b/packages/builder/src/helpers/components.ts @@ -30,9 +30,9 @@ export const findComponentType = (rootComponent: Component, type: string) => { * Recursively searches for the parent component of a specific component ID */ export const findComponentParent = ( - rootComponent: Component, - id: string, - parentComponent: Component + rootComponent: Component | undefined, + id: string | undefined, + parentComponent: Component | null = null ): Component | null => { if (!rootComponent || !id) { return null @@ -58,7 +58,7 @@ export const findComponentParent = ( */ export const findComponentPath = ( rootComponent: Component, - id: string, + id: string | undefined, path: Component[] = [] ): Component[] => { if (!rootComponent || !id) { @@ -118,7 +118,7 @@ export const findAllComponents = (rootComponent: Component) => { */ export const findClosestMatchingComponent = ( rootComponent: Component, - componentId: string, + componentId: string | undefined, selector: (component: Component) => boolean ) => { if (!selector) { diff --git a/packages/builder/src/stores/builder/componentTreeNodes.ts b/packages/builder/src/stores/builder/componentTreeNodes.ts index b88563de6a..0e4dd5738b 100644 --- a/packages/builder/src/stores/builder/componentTreeNodes.ts +++ b/packages/builder/src/stores/builder/componentTreeNodes.ts @@ -58,7 +58,7 @@ export class ComponentTreeNodesStore extends BudiStore { const path = findComponentPath(selectedScreen.props, componentId) - const componentIds = path.map((component: Component) => component._id) + const componentIds = path.map((component: Component) => component._id!) this.update((openNodes: OpenNodesState) => { const newNodes = Object.fromEntries( diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts index 38fa9a6a41..f1bd1e77c4 100644 --- a/packages/builder/src/stores/builder/components.ts +++ b/packages/builder/src/stores/builder/components.ts @@ -1,3 +1,5 @@ +// TODO: analise and fix all the undefined ! and ? + import { get, derived } from "svelte/store" import { cloneDeep } from "lodash/fp" import { API } from "@/api" @@ -36,7 +38,7 @@ import { Utils } from "@budibase/frontend-core" import { ComponentDefinition, ComponentSetting, - Component as ComponentType, + Component, ComponentCondition, FieldType, Screen, @@ -45,10 +47,6 @@ import { import { utils } from "@budibase/shared-core" import { getSequentialName } from "@/helpers/duplicate" -interface Component extends ComponentType { - _id: string -} - export interface ComponentState { components: Record customComponents: string[] @@ -182,7 +180,7 @@ export class ComponentStore extends BudiStore { * Takes an enriched component instance and applies any required migration * logic */ - migrateSettings(enrichedComponent: Component) { + migrateSettings(enrichedComponent: Component | null) { const componentPrefix = "@budibase/standard-components" let migrated = false @@ -487,7 +485,7 @@ export class ComponentStore extends BudiStore { (component: Component) => component._component.endsWith("/form") ) const formSteps = findAllMatchingComponents( - parentForm, + parentForm!, (component: Component) => component._component.endsWith("/formstep") ) extras.step = formSteps.length + 1 @@ -519,7 +517,7 @@ export class ComponentStore extends BudiStore { // Insert in position if specified if (parent && index != null) { await screenStore.patch((screen: Screen) => { - let parentComponent = findComponent(screen.props, parent) + let parentComponent = findComponent(screen.props, parent._id!)! if (!parentComponent._children?.length) { parentComponent._children = [componentInstance] } else { @@ -538,7 +536,7 @@ export class ComponentStore extends BudiStore { } const currentComponent = findComponent( screen.props, - selectedComponentId + selectedComponentId! ) if (!currentComponent) { return false @@ -581,7 +579,7 @@ export class ComponentStore extends BudiStore { return state }) - componentTreeNodesStore.makeNodeVisible(componentInstance._id) + componentTreeNodesStore.makeNodeVisible(componentInstance._id!) // Log event analytics.captureEvent(Events.COMPONENT_CREATED, { @@ -633,7 +631,7 @@ export class ComponentStore extends BudiStore { // Determine the next component to select, and select it before deletion // to avoid an intermediate state of no component selection const state = get(this.store) - let nextId = "" + let nextId: string | null = "" if (state.selectedComponentId === component._id) { nextId = this.getNext() if (!nextId) { @@ -646,7 +644,7 @@ export class ComponentStore extends BudiStore { nextId = nextId.replace("-navigation", "-screen") } this.update(state => { - state.selectedComponentId = nextId + state.selectedComponentId = nextId! return state }) } @@ -654,18 +652,18 @@ export class ComponentStore extends BudiStore { // Patch screen await screenStore.patch((screen: Screen) => { // Check component exists - component = findComponent(screen.props, component._id) - if (!component) { + const updatedComponent = findComponent(screen.props, component._id!) + if (!updatedComponent) { return false } // Check component has a valid parent - const parent = findComponentParent(screen.props, component._id) + const parent = findComponentParent(screen.props, updatedComponent._id) if (!parent) { return false } - parent._children = parent._children.filter( - (child: Component) => child._id !== component._id + parent._children = parent._children!.filter( + (child: Component) => child._id !== updatedComponent._id ) }, null) } @@ -706,7 +704,7 @@ export class ComponentStore extends BudiStore { } async paste( - targetComponent: Component, + targetComponent: Component | null, mode: string, targetScreen: Screen, selectComponent = true @@ -729,7 +727,7 @@ export class ComponentStore extends BudiStore { // Patch screen const patch = (screen: Screen) => { // Get up to date ref to target - targetComponent = findComponent(screen.props, targetComponent._id) + targetComponent = findComponent(screen.props, targetComponent!._id!) if (!targetComponent) { return false } @@ -743,7 +741,7 @@ export class ComponentStore extends BudiStore { if (!cut) { componentToPaste = makeComponentUnique(componentToPaste) } - newComponentId = componentToPaste._id + newComponentId = componentToPaste._id! // Strip grid position metadata if pasting into a new screen, but keep // alignment metadata @@ -791,7 +789,7 @@ export class ComponentStore extends BudiStore { } const targetIndex = parent._children.findIndex( (component: Component) => { - return component._id === targetComponent._id + return component._id === targetComponent!._id } ) const index = mode === "above" ? targetIndex : targetIndex + 1 @@ -820,8 +818,8 @@ export class ComponentStore extends BudiStore { if (!screen) { throw "A valid screen must be selected" } - const parent = findComponentParent(screen.props, componentId) - const index = parent?._children.findIndex( + const parent = findComponentParent(screen.props, componentId)! + const index = parent?._children?.findIndex( (x: Component) => x._id === componentId ) @@ -839,29 +837,29 @@ export class ComponentStore extends BudiStore { } // If we have siblings above us, choose the sibling or a descendant - if (index > 0) { + if (index !== undefined && index > 0) { // If sibling before us accepts children, and is not collapsed, select a descendant - const previousSibling = parent._children[index - 1] + const previousSibling = parent._children![index - 1] if ( previousSibling._children?.length && - componentTreeNodesStore.isNodeExpanded(previousSibling._id) + componentTreeNodesStore.isNodeExpanded(previousSibling._id!) ) { let target = previousSibling while ( target._children?.length && - componentTreeNodesStore.isNodeExpanded(target._id) + componentTreeNodesStore.isNodeExpanded(target._id!) ) { target = target._children[target._children.length - 1] } - return target._id + return target._id! } // Otherwise just select sibling - return previousSibling._id + return previousSibling._id! } // If no siblings above us, select the parent - return parent._id + return parent._id! } getNext() { @@ -873,9 +871,9 @@ export class ComponentStore extends BudiStore { throw "A valid screen must be selected" } const parent = findComponentParent(screen.props, componentId) - const index = parent?._children.findIndex( + const index = parent?._children?.findIndex( (x: Component) => x._id === componentId - ) + )! // Check for screen and navigation component edge cases const screenComponentId = `${screen._id}-screen` @@ -888,37 +886,38 @@ export class ComponentStore extends BudiStore { if ( component?._children?.length && (state.selectedComponentId === navComponentId || - componentTreeNodesStore.isNodeExpanded(component._id)) + componentTreeNodesStore.isNodeExpanded(component._id!)) ) { - return component._children[0]._id + return component._children[0]._id! } else if (!parent) { return null } // Otherwise select the next sibling if we have one - if (index < parent._children.length - 1) { - const nextSibling = parent._children[index + 1] - return nextSibling._id + if (index < parent._children!.length - 1) { + const nextSibling = parent._children![index + 1] + return nextSibling._id! } // Last child, select our parents next sibling let target = parent let targetParent = findComponentParent(screen.props, target._id) - let targetIndex = targetParent?._children.findIndex( + let targetIndex = targetParent?._children?.findIndex( (child: Component) => child._id === target._id - ) + )! while ( targetParent != null && - targetIndex === targetParent._children?.length - 1 + targetParent._children && + targetIndex === targetParent._children.length - 1 ) { target = targetParent targetParent = findComponentParent(screen.props, target._id) - targetIndex = targetParent?._children.findIndex( + targetIndex = targetParent?._children!.findIndex( (child: Component) => child._id === target._id - ) + )! } if (targetParent) { - return targetParent._children[targetIndex + 1]._id + return targetParent._children![targetIndex + 1]._id! } else { return null } @@ -950,16 +949,16 @@ export class ComponentStore extends BudiStore { const parent = findComponentParent(screen.props, componentId) // Check we aren't right at the top of the tree - const index = parent?._children.findIndex( + const index = parent?._children?.findIndex( (x: Component) => x._id === componentId - ) + )! if (!parent || (index === 0 && parent._id === screen.props._id)) { return } // Copy original component and remove it from the parent - const originalComponent = cloneDeep(parent._children[index]) - parent._children = parent._children.filter( + const originalComponent = cloneDeep(parent._children![index]) + parent._children = parent._children!.filter( (component: Component) => component._id !== componentId ) @@ -971,9 +970,9 @@ export class ComponentStore extends BudiStore { const definition = this.getDefinition(previousSibling._component) if ( definition?.hasChildren && - componentTreeNodesStore.isNodeExpanded(previousSibling._id) + componentTreeNodesStore.isNodeExpanded(previousSibling._id!) ) { - previousSibling._children.push(originalComponent) + previousSibling._children!.push(originalComponent) } // Otherwise just move component above sibling @@ -985,11 +984,11 @@ export class ComponentStore extends BudiStore { // If no siblings above us, go above the parent as long as it isn't // the screen else if (parent._id !== screen.props._id) { - const grandParent = findComponentParent(screen.props, parent._id) - const parentIndex = grandParent._children.findIndex( + const grandParent = findComponentParent(screen.props, parent._id)! + const parentIndex = grandParent._children!.findIndex( (child: Component) => child._id === parent._id ) - grandParent._children.splice(parentIndex, 0, originalComponent) + grandParent._children!.splice(parentIndex, 0, originalComponent) } }, null) } @@ -1028,9 +1027,9 @@ export class ComponentStore extends BudiStore { const definition = this.getDefinition(nextSibling._component) if ( definition?.hasChildren && - componentTreeNodesStore.isNodeExpanded(nextSibling._id) + componentTreeNodesStore.isNodeExpanded(nextSibling._id!) ) { - nextSibling._children.splice(0, 0, originalComponent) + nextSibling._children!.splice(0, 0, originalComponent) } // Otherwise move below next sibling @@ -1041,11 +1040,11 @@ export class ComponentStore extends BudiStore { // Last child, so move below our parent else { - const grandParent = findComponentParent(screen.props, parent._id) - const parentIndex = grandParent._children.findIndex( + const grandParent = findComponentParent(screen.props, parent._id)! + const parentIndex = grandParent._children!.findIndex( (child: Component) => child._id === parent._id ) - grandParent._children.splice(parentIndex + 1, 0, originalComponent) + grandParent._children!.splice(parentIndex + 1, 0, originalComponent) } }, null) } @@ -1208,13 +1207,13 @@ export class ComponentStore extends BudiStore { } // Replace component with parent - const index = oldParentDefinition._children.findIndex( + const index = oldParentDefinition._children!.findIndex( (component: Component) => component._id === componentId ) if (index === -1) { return false } - oldParentDefinition._children[index] = { + oldParentDefinition._children![index] = { ...newParentDefinition, _children: [definition], } diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts index b7d9a8be30..51072adbb8 100644 --- a/packages/builder/src/stores/builder/screens.ts +++ b/packages/builder/src/stores/builder/screens.ts @@ -490,7 +490,7 @@ export class ScreenStore extends BudiStore { // Flatten the recursive component tree const components = findAllMatchingComponents( screen.props, - (x: Component) => x + (x: Component) => !!x ) // Iterate over all components and run checks