MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into convert-client-builder-store

This commit is contained in:
Adria Navarro 2025-02-13 11:31:35 +01:00
parent 3d1f03cf02 6500de7ebe
commit b6f5497bc7
94 changed files with 1042 additions and 837 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
View File

@ -13,6 +13,11 @@
import { fly } from "svelte/transition"
import { findComponentPath } from "@/helpers/components"
// Smallest possible 1x1 transparent GIF
const ghost = new Image(1, 1)
ghost.src =
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
let searchString
let searchRef
let selectedIndex
@ -217,7 +222,8 @@
}
})
const onDragStart = component => {
const onDragStart = (e, component) => {
e.dataTransfer.setDragImage(ghost, 0, 0)
previewStore.startDrag(component)
}
@ -250,13 +256,12 @@
{#each category.children as component}
<div
draggable="true"
on:dragstart={() => onDragStart(component.component)}
on:dragstart={e => onDragStart(e, component.component)}
on:dragend={onDragEnd}
class="component"
class:selected={selectedIndex === orderMap[component.component]}
on:click={() => addComponent(component.component)}
on:mouseover={() => (selectedIndex = null)}
on:focus
on:mouseenter={() => (selectedIndex = null)}
>
<Icon name={component.icon} />
<Body size="XS">{component.name}</Body>
@ -308,7 +313,6 @@
}
.component:hover {
background: var(--spectrum-global-color-gray-300);
cursor: pointer;
}
.component :global(.spectrum-Body) {
line-height: 1.2 !important;

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View File

@ -189,8 +189,8 @@
} else if (type === "reload-plugin") {
await componentStore.refreshDefinitions()
} else if (type === "drop-new-component") {
const { component, parent, index } = data
await componentStore.create(component, null, parent, index)
const { component, parent, index, props } = data
await componentStore.create(component, props, parent, index)
} else if (type === "add-parent-component") {
const { componentId, parentType } = data
await componentStore.addParent(componentId, parentType)

6
packages/builder/src/stores/builder/app.ts
View File

@ -39,7 +39,7 @@ interface AppMetaState {
appInstance: { _id: string } | null
initialised: boolean
hasAppPackage: boolean
usedPlugins: Plugin[] | null
usedPlugins: Plugin[]
automations: AutomationSettings
routes: { [key: string]: any }
version?: string
@ -76,7 +76,7 @@ export const INITIAL_APP_META_STATE: AppMetaState = {
appInstance: null,
initialised: false,
hasAppPackage: false,
usedPlugins: null,
usedPlugins: [],
automations: {},
routes: {},
}
@ -109,7 +109,7 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
appInstance: app.instance,
revertableVersion: app.revertableVersion,
upgradableVersion: app.upgradableVersion,
usedPlugins: app.usedPlugins || null,
usedPlugins: app.usedPlugins || [],
icon: app.icon,
features: {
...INITIAL_APP_META_STATE.features,

104
packages/builder/src/stores/builder/components.ts
View File

@ -11,6 +11,7 @@ import {
findComponentParent,
findAllMatchingComponents,
makeComponentUnique,
findComponentType,
} from "@/helpers/components"
import { getComponentFieldOptions } from "@/helpers/formFields"
import { selectedScreen } from "./screens"
@ -139,10 +140,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
/**
* Retrieve the component definition object
* @param {string} componentType
* @example
* '@budibase/standard-components/container'
* @returns {object}
*/
getDefinition(componentType: string) {
if (!componentType) {
@ -151,10 +148,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
return get(this.store).components[componentType]
}
/**
*
* @returns {object}
*/
getDefaultDatasource() {
// Ignore users table
const validTables = get(tables).list.filter(x => x._id !== "ta_users")
@ -188,8 +181,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
/**
* Takes an enriched component instance and applies any required migration
* logic
* @param {object} enrichedComponent
* @returns {object} migrated Component
*/
migrateSettings(enrichedComponent: Component) {
const componentPrefix = "@budibase/standard-components"
@ -230,22 +221,15 @@ export class ComponentStore extends BudiStore<ComponentState> {
for (let setting of filterableTypes || []) {
const isLegacy = Array.isArray(enrichedComponent[setting.key])
if (isLegacy) {
const processedSetting = utils.processSearchFilters(
enrichedComponent[setting.key] = utils.processSearchFilters(
enrichedComponent[setting.key]
)
enrichedComponent[setting.key] = processedSetting
migrated = true
}
}
return migrated
}
/**
*
* @param {object} component
* @param {object} opts
* @returns
*/
enrichEmptySettings(
component: Component,
opts: { screen?: Screen; parent?: Component; useDefaultValues?: boolean }
@ -280,14 +264,25 @@ export class ComponentStore extends BudiStore<ComponentState> {
type: "table",
}
} else if (setting.type === "dataProvider") {
// Pick closest data provider where required
let providerId
// Pick closest parent data provider if one exists
const path = findComponentPath(screen.props, treeId)
const providers = path.filter((component: Component) =>
component._component?.endsWith("/dataprovider")
)
if (providers.length) {
const id = providers[providers.length - 1]?._id
component[setting.key] = `{{ literal ${safe(id)} }}`
providerId = providers[providers.length - 1]?._id
// If none in our direct path, select the first one the screen
if (!providerId) {
providerId = findComponentType(
screen.props,
"@budibase/standard-components/dataprovider"
)?._id
}
if (providerId) {
component[setting.key] = `{{ literal ${safe(providerId)} }}`
}
} else if (setting.type.startsWith("field/")) {
// Autofill form field names
@ -316,6 +311,8 @@ export class ComponentStore extends BudiStore<ComponentState> {
component[setting.key] = fieldOptions[0]
component.label = fieldOptions[0]
}
} else if (setting.type === "icon") {
component[setting.key] = "ri-star-fill"
} else if (useDefaultValues && setting.defaultValue !== undefined) {
// Use default value where required
component[setting.key] = setting.defaultValue
@ -427,17 +424,10 @@ export class ComponentStore extends BudiStore<ComponentState> {
}
}
/**
*
* @param {string} componentName
* @param {object} presetProps
* @param {object} parent
* @returns
*/
createInstance(
componentType: string,
presetProps: any,
parent: any
presetProps?: Record<string, any>,
parent?: Component
): Component | null {
const screen = get(selectedScreen)
if (!screen) {
@ -463,7 +453,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
_id: Helpers.uuid(),
_component: definition.component,
_styles: {
normal: {},
normal: { ...presetProps?._styles?.normal },
hover: {},
active: {},
},
@ -512,19 +502,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
}
}
/**
*
* @param {string} componentName
* @param {object} presetProps
* @param {object} parent
* @param {number} index
* @returns
*/
async create(
componentType: string,
presetProps: any,
parent: Component,
index: number
presetProps?: Record<string, any>,
parent?: Component,
index?: number
) {
const state = get(this.store)
const componentInstance = this.createInstance(
@ -611,13 +593,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
return componentInstance
}
/**
*
* @param {function} patchFn
* @param {string} componentId
* @param {string} screenId
* @returns
*/
async patch(
patchFn: (component: Component, screen: Screen) => any,
componentId?: string,
@ -652,11 +627,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
await screenStore.patch(patchScreen, screenId)
}
/**
*
* @param {object} component
* @returns
*/
async delete(component: Component) {
if (!component) {
return
@ -737,13 +707,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
})
}
/**
*
* @param {object} targetComponent
* @param {string} mode
* @param {object} targetScreen
* @returns
*/
async paste(
targetComponent: Component,
mode: string,
@ -1101,6 +1064,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
async updateStyles(styles: Record<string, string>, id: string) {
const patchFn = (component: Component) => {
delete component._placeholder
component._styles.normal = {
...component._styles.normal,
...styles,
@ -1231,7 +1195,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
}
// Create new parent instance
const newParentDefinition = this.createInstance(parentType, null, parent)
const newParentDefinition = this.createInstance(parentType)
if (!newParentDefinition) {
return
}
@ -1267,10 +1231,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
/**
* Check if the components settings have been cached
* @param {string} componentType
* @example
* '@budibase/standard-components/container'
* @returns {boolean}
*/
isCached(componentType: string) {
const settings = get(this.store).settingsCache
@ -1279,11 +1239,6 @@ export class ComponentStore extends BudiStore<ComponentState> {
/**
* Cache component settings
* @param {string} componentType
* @param {object} definition
* @example
* '@budibase/standard-components/container'
* @returns {array} the settings
*/
cacheSettings(componentType: string, definition: ComponentDefinition | null) {
let settings: ComponentSetting[] = []
@ -1313,12 +1268,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
/**
* Retrieve an array of the component settings.
* These settings are cached because they cannot change at run time.
*
* Searches a component's definition for a setting matching a certain predicate.
* @param {string} componentType
* @example
* '@budibase/standard-components/container'
* @returns {Array<object>}
*/
getComponentSettings(componentType: string) {
if (!componentType) {

4
packages/builder/src/stores/builder/navigation.ts
View File

@ -4,15 +4,13 @@ import { appStore } from "@/stores/builder"
import { BudiStore } from "../BudiStore"
import { AppNavigation, AppNavigationLink, UIObject } from "@budibase/types"
interface BuilderNavigationStore extends AppNavigation {}
export const INITIAL_NAVIGATION_STATE = {
navigation: "Top",
links: [],
textAlign: "Left",
}
export class NavigationStore extends BudiStore<BuilderNavigationStore> {
export class NavigationStore extends BudiStore<AppNavigation> {
constructor() {
super(INITIAL_NAVIGATION_STATE)
}

2
packages/builder/src/stores/builder/preview.ts
View File

@ -54,7 +54,7 @@ export class PreviewStore extends BudiStore<PreviewState> {
}))
}
startDrag(component: any) {
async startDrag(component: string) {
this.sendEvent("dragging-new-component", {
dragging: true,
component,

2
packages/client/package.json
View File

@ -5,7 +5,7 @@
"module": "dist/budibase-client.js",
"main": "dist/budibase-client.js",
"type": "module",
"svelte": "src/index.js",
"svelte": "src/index.ts",
"exports": {
".": {
"import": "./dist/budibase-client.js",

6
packages/client/src/api/api.ts
View File

@ -1,10 +1,6 @@
import { createAPIClient } from "@budibase/frontend-core"
import { authStore } from "../stores/auth"
import {
notificationStore,
devToolsEnabled,
devToolsStore,
} from "../stores/index"
import { notificationStore, devToolsEnabled, devToolsStore } from "../stores"
import { get } from "svelte/store"
export const API = createAPIClient({

4
packages/client/src/components/Block.svelte
View File

@ -1,7 +1,7 @@
<script>
import { getContext, onDestroy, onMount, setContext } from "svelte"
import { builderStore } from "stores/builder"
import { blockStore } from "stores/blocks"
import { builderStore } from "@/stores/builder"
import { blockStore } from "@/stores/blocks"
const component = getContext("component")
const { styleable } = getContext("sdk")

2
packages/client/src/components/BlockComponent.svelte
View File

@ -2,7 +2,7 @@
import { getContext, onDestroy } from "svelte"
import { generate } from "shortid"
import { builderStore } from "../stores/builder"
import Component from "components/Component.svelte"
import Component from "@/components/Component.svelte"
export let type
export let props

42
packages/client/src/components/ClientApp.svelte
View File

@ -6,7 +6,7 @@
import { Constants, CookieUtils } from "@budibase/frontend-core"
import { getThemeClassNames } from "@budibase/shared-core"
import Component from "./Component.svelte"
import SDK from "sdk"
import SDK from "@/sdk"
import {
featuresStore,
createContextStore,
@ -22,28 +22,29 @@
environmentStore,
sidePanelStore,
modalStore,
} from "stores"
import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
import PeekScreenDisplay from "components/overlay/PeekScreenDisplay.svelte"
import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
import SettingsBar from "components/preview/SettingsBar.svelte"
import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
import HoverIndicator from "components/preview/HoverIndicator.svelte"
} from "@/stores"
import NotificationDisplay from "./overlay/NotificationDisplay.svelte"
import ConfirmationDisplay from "./overlay/ConfirmationDisplay.svelte"
import PeekScreenDisplay from "./overlay/PeekScreenDisplay.svelte"
import UserBindingsProvider from "./context/UserBindingsProvider.svelte"
import DeviceBindingsProvider from "./context/DeviceBindingsProvider.svelte"
import StateBindingsProvider from "./context/StateBindingsProvider.svelte"
import RowSelectionProvider from "./context/RowSelectionProvider.svelte"
import QueryParamsProvider from "./context/QueryParamsProvider.svelte"
import SettingsBar from "./preview/SettingsBar.svelte"
import SelectionIndicator from "./preview/SelectionIndicator.svelte"
import HoverIndicator from "./preview/HoverIndicator.svelte"
import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
import DNDHandler from "components/preview/DNDHandler.svelte"
import GridDNDHandler from "components/preview/GridDNDHandler.svelte"
import KeyboardManager from "components/preview/KeyboardManager.svelte"
import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
import DevTools from "components/devtools/DevTools.svelte"
import FreeFooter from "components/FreeFooter.svelte"
import MaintenanceScreen from "components/MaintenanceScreen.svelte"
import DNDHandler from "./preview/DNDHandler.svelte"
import GridDNDHandler from "./preview/GridDNDHandler.svelte"
import KeyboardManager from "./preview/KeyboardManager.svelte"
import DevToolsHeader from "./devtools/DevToolsHeader.svelte"
import DevTools from "./devtools/DevTools.svelte"
import FreeFooter from "./FreeFooter.svelte"
import MaintenanceScreen from "./MaintenanceScreen.svelte"
import SnippetsProvider from "./context/SnippetsProvider.svelte"
import EmbedProvider from "./context/EmbedProvider.svelte"
import DNDSelectionIndicators from "./preview/DNDSelectionIndicators.svelte"
// Provide contexts
setContext("sdk", SDK)
@ -266,6 +267,7 @@
{#if $builderStore.inBuilder}
<DNDHandler />
<GridDNDHandler />
<DNDSelectionIndicators />
{/if}
</div>
</SnippetsProvider>

19
packages/client/src/components/Component.svelte
View File

@ -11,7 +11,7 @@
<script>
import { getContext, setContext, onMount } from "svelte"
import { writable, get } from "svelte/store"
import { enrichProps, propsAreSame } from "utils/componentProps"
import { enrichProps, propsAreSame } from "@/utils/componentProps"
import { getSettingsDefinition } from "@budibase/frontend-core"
import {
builderStore,
@ -20,12 +20,15 @@
appStore,
dndComponentPath,
dndIsDragging,
} from "stores"
} from "@/stores"
import { Helpers } from "@budibase/bbui"
import { getActiveConditions, reduceConditionActions } from "utils/conditions"
import EmptyPlaceholder from "components/app/EmptyPlaceholder.svelte"
import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
import ComponentErrorState from "components/error-states/ComponentErrorState.svelte"
import {
getActiveConditions,
reduceConditionActions,
} from "@/utils/conditions"
import EmptyPlaceholder from "@/components/app/EmptyPlaceholder.svelte"
import ScreenPlaceholder from "@/components/app/ScreenPlaceholder.svelte"
import ComponentErrorState from "@/components/error-states/ComponentErrorState.svelte"
import {
decodeJSBinding,
findHBSBlocks,
@ -35,7 +38,7 @@
getActionContextKey,
getActionDependentContextKeys,
} from "../utils/buttonActions.js"
import { gridLayout } from "utils/grid"
import { gridLayout } from "@/utils/grid"
export let instance = {}
export let parent = null
@ -120,7 +123,7 @@
$: children = instance._children || []
$: id = instance._id
$: name = isRoot ? "Screen" : instance._instanceName
$: icon = definition?.icon
$: icon = instance._icon || definition?.icon
// Determine if the component is selected or is part of the critical path
// leading to the selected component

2
packages/client/src/components/CustomThemeWrapper.svelte
View File

@ -1,5 +1,5 @@
<script>
import { themeStore } from "stores"
import { themeStore } from "@/stores"
import { setContext } from "svelte"
import { Context } from "@budibase/bbui"

2
packages/client/src/components/Router.svelte
View File

@ -1,7 +1,7 @@
<script>
import { setContext, getContext, onMount } from "svelte"
import Router, { querystring } from "svelte-spa-router"
import { routeStore, stateStore } from "stores"
import { routeStore, stateStore } from "@/stores"
import Screen from "./Screen.svelte"
import { get } from "svelte/store"

2
packages/client/src/components/Screen.svelte
View File

@ -1,5 +1,5 @@
<script>
import { screenStore, routeStore, builderStore } from "stores"
import { screenStore, routeStore, builderStore } from "@/stores"
import { get } from "svelte/store"
import Component from "./Component.svelte"
import Provider from "./context/Provider.svelte"

2
packages/client/src/components/app/GridBlock.svelte
View File

@ -3,7 +3,7 @@
// because it functions similarly to one
import { getContext, onMount } from "svelte"
import { get, derived, readable } from "svelte/store"
import { featuresStore } from "stores"
import { featuresStore } from "@/stores"
import { Grid } from "@budibase/frontend-core"
// import { processStringSync } from "@budibase/string-templates"

6
packages/client/src/components/app/blocks/CardsBlock.svelte
View File

@ -1,9 +1,9 @@
<script>
import { getContext } from "svelte"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import Block from "@/components/Block.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
import { enrichSearchColumns, enrichFilter } from "utils/blocks"
import { enrichSearchColumns, enrichFilter } from "@/utils/blocks"
import { get } from "svelte/store"
export let title

4
packages/client/src/components/app/blocks/ChartBlock.svelte
View File

@ -1,6 +1,6 @@
<script>
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import Block from "@/components/Block.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
// Datasource

2
packages/client/src/components/app/blocks/FormBlockComponent.svelte
View File

@ -1,5 +1,5 @@
<script>
import BlockComponent from "components/BlockComponent.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import { FieldType } from "@budibase/types"
export let field

4
packages/client/src/components/app/blocks/MultiStepFormblock.svelte
View File

@ -1,8 +1,8 @@
<script>
import BlockComponent from "components/BlockComponent.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import { Helpers } from "@budibase/bbui"
import { getContext, setContext } from "svelte"
import { builderStore } from "stores"
import { builderStore } from "@/stores"
import { Utils } from "@budibase/frontend-core"
import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
import { get, writable } from "svelte/store"

6
packages/client/src/components/app/blocks/RepeaterBlock.svelte
View File

@ -1,7 +1,7 @@
<script>
import BlockComponent from "components/BlockComponent.svelte"
import Block from "components/Block.svelte"
import Placeholder from "components/app/Placeholder.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import Block from "@/components/Block.svelte"
import Placeholder from "@/components/app/Placeholder.svelte"
import { getContext } from "svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
import { get } from "svelte/store"

4
packages/client/src/components/app/blocks/RowExplorer.svelte
View File

@ -1,6 +1,6 @@
<script>
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import Block from "@/components/Block.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
import { generate } from "shortid"
import { get } from "svelte/store"

4
packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
View File

@ -1,6 +1,6 @@
<script>
import BlockComponent from "components/BlockComponent.svelte"
import Block from "components/Block.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import Block from "@/components/Block.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
import { getContext } from "svelte"

4
packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
View File

@ -1,6 +1,6 @@
<script>
import BlockComponent from "components/BlockComponent.svelte"
import Placeholder from "components/app/Placeholder.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import Placeholder from "@/components/app/Placeholder.svelte"
import { getContext } from "svelte"
import FormBlockComponent from "../FormBlockComponent.svelte"

2
packages/client/src/components/app/container/GridContainer.svelte
View File

@ -1,7 +1,7 @@
<script>
import { getContext, onMount } from "svelte"
import { writable } from "svelte/store"
import { GridRowHeight, GridColumns } from "constants"
import { GridRowHeight, GridColumns } from "@/constants"
import { memo } from "@budibase/frontend-core"
export let onClick

6
packages/client/src/components/app/deprecated/TableBlock.svelte
View File

@ -2,10 +2,10 @@
import { getContext } from "svelte"
import { get } from "svelte/store"
import { generate } from "shortid"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import Block from "@/components/Block.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
import { enrichSearchColumns, enrichFilter } from "utils/blocks"
import { enrichSearchColumns, enrichFilter } from "@/utils/blocks"
import { Utils } from "@budibase/frontend-core"
export let title

2
packages/client/src/components/app/deprecated/table/Table.svelte
View File

@ -3,7 +3,7 @@
import { Table } from "@budibase/bbui"
import SlotRenderer from "./SlotRenderer.svelte"
import { canBeSortColumn } from "@budibase/frontend-core"
import Provider from "components/context/Provider.svelte"
import Provider from "@/components/context/Provider.svelte"
export let dataProvider
export let columns

2
packages/client/src/components/app/forms/S3Upload.svelte
View File

@ -2,7 +2,7 @@
import Field from "./Field.svelte"
import { CoreDropzone, ProgressCircle, Helpers } from "@budibase/bbui"
import { getContext, onMount, onDestroy } from "svelte"
import { builderStore } from "stores/builder"
import { builderStore } from "@/stores/builder"
import { processStringSync } from "@budibase/string-templates"
export let datasourceId

2
packages/client/src/components/context/DeviceBindingsProvider.svelte
View File

@ -1,7 +1,7 @@
<script>
import Provider from "./Provider.svelte"
import { onMount, onDestroy } from "svelte"
import { themeStore } from "stores"
import { themeStore } from "@/stores"
let width = window.innerWidth
let height = window.innerHeight

4
packages/client/src/components/context/Provider.svelte
View File

@ -1,7 +1,7 @@
<script>
import { getContext, setContext, onDestroy } from "svelte"
import { dataSourceStore, createContextStore } from "stores"
import { ActionTypes } from "constants"
import { dataSourceStore, createContextStore } from "@/stores"
import { ActionTypes } from "@/constants"
import { generate } from "shortid"
const { ContextScopes } = getContext("sdk")

2
packages/client/src/components/context/QueryParamsProvider.svelte
View File

@ -1,6 +1,6 @@
<script>
import Provider from "./Provider.svelte"
import { routeStore } from "stores"
import { routeStore } from "@/stores"
</script>
<Provider key="query" data={$routeStore.queryParams}>

2
packages/client/src/components/context/RowSelectionProvider.svelte
View File

@ -1,6 +1,6 @@
<script>
import Provider from "./Provider.svelte"
import { rowSelectionStore } from "stores"
import { rowSelectionStore } from "@/stores"
</script>
<Provider key="rowSelection" data={$rowSelectionStore}>

2
packages/client/src/components/context/SnippetsProvider.svelte
View File

@ -1,6 +1,6 @@
<script>
import Provider from "./Provider.svelte"
import { snippets } from "stores"
import { snippets } from "@/stores"
</script>
<Provider key="snippets" data={$snippets}>

2
packages/client/src/components/context/StateBindingsProvider.svelte
View File

@ -1,6 +1,6 @@
<script>
import Provider from "./Provider.svelte"
import { stateStore } from "stores"
import { stateStore } from "@/stores"
</script>
<Provider key="state" data={$stateStore}>

4
packages/client/src/components/context/UserBindingsProvider.svelte
View File

@ -1,7 +1,7 @@
<script>
import Provider from "./Provider.svelte"
import { authStore, currentRole } from "stores"
import { ActionTypes } from "constants"
import { authStore, currentRole } from "@/stores"
import { ActionTypes } from "@/constants"
import { Constants } from "@budibase/frontend-core"
// Register this as a refreshable datasource so that user changes cause

2
packages/client/src/components/devtools/DevTools.svelte
View File

@ -3,7 +3,7 @@
import { Layout, Heading, Tabs, Tab, Icon } from "@budibase/bbui"
import DevToolsStatsTab from "./DevToolsStatsTab.svelte"
import DevToolsComponentTab from "./DevToolsComponentTab.svelte"
import { devToolsStore } from "stores"
import { devToolsStore } from "@/stores"
const context = getContext("context")
</script>

2
packages/client/src/components/devtools/DevToolsComponentContextTab.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Layout, Select, Body } from "@budibase/bbui"
import { componentStore } from "stores/index.js"
import { componentStore } from "@/stores"
import DevToolsStat from "./DevToolsStat.svelte"
const ReadableBindingMap = {

2
packages/client/src/components/devtools/DevToolsComponentSettingsTab.svelte
View File

@ -2,7 +2,7 @@
import { Layout, Toggle } from "@budibase/bbui"
import { getSettingsDefinition } from "@budibase/frontend-core"
import DevToolsStat from "./DevToolsStat.svelte"
import { componentStore } from "stores/index.js"
import { componentStore } from "@/stores"
let showEnrichedSettings = true

2
packages/client/src/components/devtools/DevToolsComponentTab.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Body, Layout, Heading, Button, Tabs, Tab } from "@budibase/bbui"
import { builderStore, devToolsStore, componentStore } from "stores"
import { builderStore, devToolsStore, componentStore } from "@/stores"
import DevToolsStat from "./DevToolsStat.svelte"
import DevToolsComponentSettingsTab from "./DevToolsComponentSettingsTab.svelte"
import DevToolsComponentContextTab from "./DevToolsComponentContextTab.svelte"

4
packages/client/src/components/devtools/DevToolsHeader.svelte
View File

@ -1,8 +1,8 @@
<script>
import { Heading, Select, ActionButton } from "@budibase/bbui"
import { devToolsStore, appStore } from "../../stores"
import { devToolsStore, appStore } from "@/stores"
import { getContext, onMount } from "svelte"
import { API } from "api"
import { API } from "@/api"
const context = getContext("context")
const SELF_ROLE = "self"

2
packages/client/src/components/devtools/DevToolsStat.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Helpers } from "@budibase/bbui"
import { notificationStore } from "stores"
import { notificationStore } from "@/stores"
export let label
export let value

2
packages/client/src/components/devtools/DevToolsStatsTab.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Layout } from "@budibase/bbui"
import { authStore, appStore, screenStore, componentStore } from "stores"
import { authStore, appStore, screenStore, componentStore } from "@/stores"
import DevToolsStat from "./DevToolsStat.svelte"
</script>

2
packages/client/src/components/overlay/ConfirmationDisplay.svelte
View File

@ -1,5 +1,5 @@
<script>
import { confirmationStore } from "stores"
import { confirmationStore } from "@/stores"
import { Modal, ModalContent } from "@budibase/bbui"
</script>

2
packages/client/src/components/overlay/NotificationDisplay.svelte
View File

@ -1,5 +1,5 @@
<script>
import { notificationStore } from "stores"
import { notificationStore } from "@/stores"
import { Notification } from "@budibase/bbui"
import { fly } from "svelte/transition"
</script>

2
packages/client/src/components/overlay/PeekScreenDisplay.svelte
View File

@ -5,7 +5,7 @@
notificationStore,
routeStore,
stateStore,
} from "stores"
} from "@/stores"
import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
import { onDestroy } from "svelte"

174
packages/client/src/components/preview/DNDHandler.svelte
View File

@ -1,19 +1,22 @@
<script>
<script lang="ts">
import { onMount, onDestroy } from "svelte"
import { get } from "svelte/store"
import IndicatorSet from "./IndicatorSet.svelte"
import {
builderStore,
screenStore,
dndStore,
dndParent,
dndIsDragging,
} from "stores"
import DNDPlaceholderOverlay from "./DNDPlaceholderOverlay.svelte"
import { builderStore, screenStore, dndStore, isGridScreen } from "@/stores"
import { Utils } from "@budibase/frontend-core"
import { findComponentById } from "utils/components.js"
import { DNDPlaceholderID } from "constants"
import { isGridEvent } from "utils/grid"
import { findComponentById } from "@/utils/components.js"
import { isGridEvent } from "@/utils/grid"
import { DNDPlaceholderID } from "@/constants"
import { Component } from "@budibase/types"
type ChildCoords = {
placeholder: boolean
centerX: number
centerY: number
left: number
right: number
top: number
bottom: number
}
const ThrottleRate = 130
@ -22,17 +25,19 @@
$: source = $dndStore.source
$: target = $dndStore.target
$: drop = $dndStore.drop
$: gridScreen = $isGridScreen
// Local flag for whether we are awaiting an async drop event
let dropping = false
// Util to get the inner DOM node by a component ID
const getDOMNode = id => {
return document.getElementsByClassName(`${id}-dom`)[0]
// Util to get the inner DOM element by a component ID
const getDOMElement = (id: string): HTMLElement | undefined => {
const el = document.getElementsByClassName(`${id}-dom`)[0]
return el instanceof HTMLElement ? el : undefined
}
// Util to calculate the variance of a set of data
const variance = arr => {
const variance = (arr: number[]) => {
const mean = arr.reduce((a, b) => a + b, 0) / arr.length
let squareSum = 0
arr.forEach(value => {
@ -61,36 +66,43 @@
}
// Callback when initially starting a drag on a draggable component
const onDragStart = e => {
const onDragStart = (e: DragEvent) => {
if (isGridEvent(e)) {
return
}
if (!(e.target instanceof HTMLElement)) {
return
}
const component = e.target.closest(".component")
if (!component?.classList.contains("draggable")) {
if (
!(component instanceof HTMLElement) ||
!component.classList.contains("draggable")
) {
return
}
// Hide drag ghost image
e.dataTransfer.setDragImage(new Image(), 0, 0)
e.dataTransfer?.setDragImage(new Image(), 0, 0)
// Add event handler to clear all drag state when dragging ends
component.addEventListener("dragend", stopDragging)
// Update state
const id = component.dataset.id
const parentId = component.dataset.parent
const parent = findComponentById(
const id = component.dataset.id!
const parentId = component.dataset.parent!
const parent: Component = findComponentById(
get(screenStore).activeScreen?.props,
parentId
)
const index = parent._children.findIndex(
x => x._id === component.dataset.id
)
const index = parent._children!.findIndex(child => child._id === id)
dndStore.actions.startDraggingExistingComponent({
id,
bounds: component.children[0].getBoundingClientRect(),
parent: parentId,
index,
name: component.dataset.name,
icon: component.dataset.icon,
type: parent._children![index]!._component,
})
builderStore.actions.selectComponent(id)
@ -109,18 +121,18 @@
// Core logic for handling drop events and determining where to render the
// drop target placeholder
const processEvent = Utils.throttle((mouseX, mouseY) => {
const processEvent = Utils.throttle((mouseX: number, mouseY: number) => {
if (!target) {
return
}
let { id, parent, node, acceptsChildren, empty } = target
let { id, parent, element, acceptsChildren, empty } = target
// If we're over something that does not accept children then we go up a
// level and consider the mouse position relative to the parent
if (!acceptsChildren) {
id = parent
empty = false
node = getDOMNode(parent)
element = getDOMElement(parent)
}
// We're now hovering over something which does accept children.
@ -133,51 +145,54 @@
return
}
// As the first DOM node in a component may not necessarily contain the
// As the first DOM element in a component may not necessarily contain the
// child components, we can find to try the parent of the first child
// component and use that as the real parent DOM node
const childNode = node.getElementsByClassName("component")[0]
if (childNode?.parentNode) {
node = childNode.parentNode
const childElement = element?.getElementsByClassName("component")[0]
if (childElement?.parentNode instanceof HTMLElement) {
element = childElement.parentNode
}
// Append an ephemeral div to allow us to determine layout if only one
// child exists
let ephemeralDiv
if (node.children.length === 1) {
if (element?.children.length === 1) {
ephemeralDiv = document.createElement("div")
ephemeralDiv.dataset.id = DNDPlaceholderID
node.appendChild(ephemeralDiv)
element.appendChild(ephemeralDiv)
}
// We're now hovering over something which accepts children and is not
// empty, so we need to work out where to inside the placeholder
// Calculate the coordinates of various locations on each child.
const childCoords = [...(node.children || [])].map(node => {
const child = node.children?.[0] || node
const bounds = child.getBoundingClientRect()
return {
placeholder: node.dataset.id === DNDPlaceholderID,
centerX: bounds.left + bounds.width / 2,
centerY: bounds.top + bounds.height / 2,
left: bounds.left,
right: bounds.right,
top: bounds.top,
bottom: bounds.bottom,
}
})
const childCoords: ChildCoords[] = [...(element?.children || [])]
.filter(el => el instanceof HTMLElement)
.map(el => {
const child = el.children?.[0] || el
const bounds = child.getBoundingClientRect()
return {
placeholder: el.dataset.id === DNDPlaceholderID,
centerX: bounds.left + bounds.width / 2,
centerY: bounds.top + bounds.height / 2,
left: bounds.left,
right: bounds.right,
top: bounds.top,
bottom: bounds.bottom,
}
})
// Now that we've calculated the position of the children, we no longer need
// the ephemeral div
if (ephemeralDiv) {
node.removeChild(ephemeralDiv)
element?.removeChild(ephemeralDiv)
}
// Calculate the variance between each set of positions on the children
const variances = Object.keys(childCoords[0])
.filter(x => x !== "placeholder")
const variances = Object.keys(childCoords[0] || {})
.filter(key => key !== "placeholder")
.map(key => {
const coords = childCoords.map(x => x[key])
const numericalKey = key as keyof Omit<ChildCoords, "placeholder">
const coords = childCoords.map(x => x[numericalKey])
return {
variance: variance(coords),
side: key,
@ -189,13 +204,13 @@
variances.sort((a, b) => {
return a.variance < b.variance ? -1 : 1
})
const column = ["centerX", "left", "right"].includes(variances[0].side)
const column = ["centerX", "left", "right"].includes(variances[0]?.side)
// Calculate breakpoints between child components so we can determine the
// index to drop the component in.
// We want to ignore the placeholder from this calculation as it should not
// be considered a real child of the parent.
let breakpoints = childCoords
const breakpoints = childCoords
.filter(x => !x.placeholder)
.map(x => {
return column ? x.centerY : x.centerX
@ -213,38 +228,39 @@
})
}, ThrottleRate)
const handleEvent = e => {
const handleEvent = (e: DragEvent) => {
e.preventDefault()
e.stopPropagation()
processEvent(e.clientX, e.clientY)
}
// Callback when on top of a component.
const onDragOver = e => {
if (!source || !target) {
// Callback when on top of a component
const onDragOver = (e: DragEvent) => {
if (!source || !target || gridScreen) {
return
}
handleEvent(e)
}
// Callback when entering a potential drop target
const onDragEnter = e => {
if (!source) {
const onDragEnter = async (e: DragEvent) => {
if (!source || gridScreen || !(e.target instanceof HTMLElement)) {
return
}
// Find the next valid component to consider dropping over, ignoring nested
// block components
const component = e.target?.closest?.(
`.component:not(.block):not(.${source.id})`
)
if (component && component.classList.contains("droppable")) {
let comp = e.target.closest?.(`.component:not(.block):not(.${source.id})`)
if (!(comp instanceof HTMLElement)) {
return
}
if (comp?.classList.contains("droppable")) {
dndStore.actions.updateTarget({
id: component.dataset.id,
parent: component.dataset.parent,
node: getDOMNode(component.dataset.id),
empty: component.classList.contains("empty"),
acceptsChildren: component.classList.contains("parent"),
id: comp.dataset.id!,
parent: comp.dataset.parent!,
element: getDOMElement(comp.dataset.id!),
empty: comp.classList.contains("empty"),
acceptsChildren: comp.classList.contains("parent"),
})
handleEvent(e)
}
@ -257,12 +273,13 @@
}
// Check if we're adding a new component rather than moving one
if (source.newComponentType) {
if (source.isNew) {
dropping = true
builderStore.actions.dropNewComponent(
source.newComponentType,
source.type,
drop.parent,
drop.index
drop.index,
$dndStore.meta?.props
)
dropping = false
stopDragging()
@ -271,7 +288,7 @@
// Convert parent + index into target + mode
let legacyDropTarget, legacyDropMode
const parent = findComponentById(
const parent: Component | null = findComponentById(
get(screenStore).activeScreen?.props,
drop.parent
)
@ -333,14 +350,3 @@
document.removeEventListener("drop", onDrop, false)
})
</script>
<IndicatorSet
componentId={$dndParent}
color="var(--spectrum-global-color-static-green-500)"
zIndex={920}
prefix="Inside"
/>
{#if $dndIsDragging}
<DNDPlaceholderOverlay />
{/if}

51
packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
View File

@ -1,51 +0,0 @@
<script>
import { onMount } from "svelte"
import { DNDPlaceholderID } from "constants"
import { Utils } from "@budibase/frontend-core"
let left, top, height, width
const updatePosition = () => {
let node = document.getElementsByClassName(DNDPlaceholderID)[0]
const insideGrid = node?.dataset.insideGrid === "true"
if (!insideGrid) {
node = document.getElementsByClassName(`${DNDPlaceholderID}-dom`)[0]
}
if (!node) {
height = 0
width = 0
} else {
const bounds = node.getBoundingClientRect()
left = bounds.left
top = bounds.top
height = bounds.height
width = bounds.width
}
}
const debouncedUpdate = Utils.domDebounce(updatePosition)
onMount(() => {
const interval = setInterval(debouncedUpdate, 100)
return () => {
clearInterval(interval)
}
})
</script>
{#if left != null && top != null && width && height}
<div
class="overlay"
style="left: {left}px; top: {top}px; width: {width}px; height: {height}px;"
/>
{/if}
<style>
.overlay {
position: fixed;
z-index: 800;
background: hsl(160, 64%, 90%);
border-radius: 4px;
transition: all 130ms ease-out;
border: 2px solid var(--spectrum-global-color-static-green-500);
}
</style>

40
packages/client/src/components/preview/DNDSelectionIndicators.svelte Normal file
View File

@ -0,0 +1,40 @@
<script lang="ts">
import {
isGridScreen,
dndParent,
dndSource,
dndIsDragging,
dndStore,
} from "@/stores"
import { DNDPlaceholderID } from "@/constants"
import IndicatorSet from "./IndicatorSet.svelte"
// On grid screens, don't draw the indicator until we've dragged over the
// screen. When this happens, the dndSource props will be set as we will have
// attached grid metadata styles.
$: waitingForGrid = $isGridScreen && !$dndStore.meta?.props
</script>
{#if $dndIsDragging}
{#if !$isGridScreen && $dndParent}
<IndicatorSet
componentId={$dndParent}
color="var(--spectrum-global-color-static-green-400)"
zIndex={920}
prefix="Inside"
/>
{/if}
{#if !waitingForGrid}
<IndicatorSet
componentId={DNDPlaceholderID}
color="var(--spectrum-global-color-static-green-500)"
zIndex={930}
allowResizeAnchors={false}
background="hsl(160, 64%, 90%)"
animate={!$isGridScreen}
text={$dndSource?.name}
icon={$dndSource?.icon}
/>
{/if}
{/if}

192
packages/client/src/components/preview/GridDNDHandler.svelte
View File

@ -1,15 +1,50 @@
<script>
<script lang="ts">
import { onMount, onDestroy, getContext } from "svelte"
import { builderStore, componentStore } from "stores"
import {
builderStore,
componentStore,
dndIsDragging,
dndStore,
dndSource,
isGridScreen,
} from "@/stores"
import { Utils, memo } from "@budibase/frontend-core"
import { GridRowHeight } from "constants"
import { DNDPlaceholderID, GridRowHeight } from "@/constants"
import {
isGridEvent,
GridParams,
getGridVar,
Devices,
GridDragModes,
} from "utils/grid"
GridDragMode,
} from "@/utils/grid"
type GridDragSide =
| "top"
| "right"
| "bottom"
| "left"
| "top-left"
| "top-right"
| "bottom-left"
| "bottom-right"
interface GridDragInfo {
mode: GridDragMode
side?: GridDragSide
domTarget?: HTMLElement
domComponent: HTMLElement
domGrid: HTMLElement
id: string
gridId: string
grid: {
startX: number
startY: number
rowStart: number
rowEnd: number
colStart: number
colEnd: number
}
}
const context = getContext("context")
@ -18,11 +53,12 @@
ghost.src =
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
let dragInfo
let styles = memo()
let scrollElement: HTMLElement
let dragInfo: GridDragInfo | undefined
let styles = memo<Record<string, number> | undefined>()
// Grid CSS variables
$: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
$: device = $context.device?.mobile ? Devices.Mobile : Devices.Desktop
$: vars = {
colStart: getGridVar(device, GridParams.ColStart),
colEnd: getGridVar(device, GridParams.ColEnd),
@ -35,27 +71,54 @@
// Set ephemeral styles
$: instance = componentStore.actions.getComponentInstance(id)
$: $instance?.setEphemeralStyles($styles)
$: applyStyles($instance, $styles)
// Reset when not dragging new components
$: !$dndIsDragging && stopDragging()
const scrollOffset = () => scrollElement?.scrollTop || 0
const applyStyles = async (
instance: any,
styles: Record<string, number> | undefined
) => {
instance?.setEphemeralStyles(styles)
// If dragging a new component on to a grid screen, tick to allow the
// real component to render in the new position before updating the DND
// store, preventing the green DND overlay from being out of position
if ($dndSource?.isNew && styles) {
dndStore.actions.updateNewComponentProps({
_styles: {
normal: styles,
},
})
}
}
// Sugar for a combination of both min and max
const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
const minMax = (value: number, min: number, max: number) =>
Math.min(max, Math.max(min, value))
const processEvent = Utils.domDebounce((mouseX, mouseY) => {
const processEvent = Utils.domDebounce((mouseX: number, mouseY: number) => {
if (!dragInfo?.grid) {
return
}
const { mode, side, grid, domGrid } = dragInfo
const { mode, grid, domGrid } = dragInfo
const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
if (!domGrid) {
return
}
const cols = parseInt(domGrid.dataset.cols)
const colSize = parseInt(domGrid.dataset.colSize)
const cols = parseInt(domGrid.dataset.cols || "")
const colSize = parseInt(domGrid.dataset.colSize || "")
if (isNaN(cols) || isNaN(colSize)) {
throw "DOM grid missing required dataset attributes"
}
const diffX = mouseX - startX
let deltaX = Math.round(diffX / colSize)
const diffY = mouseY - startY
const diffY = mouseY - startY + scrollOffset()
let deltaY = Math.round(diffY / GridRowHeight)
if (mode === GridDragModes.Move) {
if (mode === GridDragMode.Move) {
deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
deltaY = Math.max(deltaY, 1 - rowStart)
const newStyles = {
@ -65,8 +128,9 @@
[vars.rowEnd]: rowEnd + deltaY,
}
styles.set(newStyles)
} else if (mode === GridDragModes.Resize) {
let newStyles = {}
} else if (mode === GridDragMode.Resize) {
const { side } = dragInfo
let newStyles: Record<string, number> = {}
if (side === "right") {
newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
} else if (side === "left") {
@ -92,14 +156,50 @@
}
})
const handleEvent = e => {
const handleEvent = (e: DragEvent) => {
e.preventDefault()
e.stopPropagation()
processEvent(e.clientX, e.clientY)
}
// Callback when dragging a new component over the preview iframe in a valid
// position for the first time
const startDraggingPlaceholder = () => {
const domComponent = document.getElementsByClassName(DNDPlaceholderID)[0]
const domGrid = domComponent?.closest(".grid")
if (
!(domComponent instanceof HTMLElement) ||
!(domGrid instanceof HTMLElement)
) {
return
}
const styles = getComputedStyle(domComponent)
const bounds = domComponent.getBoundingClientRect()
// Show as active
domComponent.classList.add("dragging")
domGrid.classList.add("highlight")
// Update state
dragInfo = {
domComponent,
domGrid,
id: DNDPlaceholderID,
gridId: domGrid.parentElement!.dataset.id!,
mode: GridDragMode.Move,
grid: {
startX: bounds.left + bounds.width / 2,
startY: bounds.top + bounds.height / 2 + scrollOffset(),
rowStart: parseInt(styles.gridRowStart),
rowEnd: parseInt(styles.gridRowEnd),
colStart: parseInt(styles.gridColumnStart),
colEnd: parseInt(styles.gridColumnEnd),
},
}
}
// Callback when initially starting a drag on a draggable component
const onDragStart = e => {
const onDragStart = (e: DragEvent) => {
if (!isGridEvent(e)) {
return
}
@ -108,27 +208,30 @@
e.dataTransfer.setDragImage(ghost, 0, 0)
// Extract state
let mode, id, side
let mode: GridDragMode, id: string, side
if (e.target.dataset.indicator === "true") {
mode = e.target.dataset.dragMode
id = e.target.dataset.id
side = e.target.dataset.side
mode = e.target.dataset.dragMode as GridDragMode
id = e.target.dataset.id!
side = e.target.dataset.side as GridDragSide
} else {
// Handle move
mode = GridDragModes.Move
const component = e.target.closest(".component")
id = component.dataset.id
mode = GridDragMode.Move
const component = e.target.closest(".component") as HTMLElement
id = component.dataset.id!
}
// If holding ctrl/cmd then leave behind a duplicate of this component
if (mode === GridDragModes.Move && (e.ctrlKey || e.metaKey)) {
if (mode === GridDragMode.Move && (e.ctrlKey || e.metaKey)) {
builderStore.actions.duplicateComponent(id, "above", false)
}
// Find grid parent and read from DOM
const domComponent = document.getElementsByClassName(id)[0]
const domGrid = domComponent?.closest(".grid")
if (!domGrid) {
if (
!(domComponent instanceof HTMLElement) ||
!(domGrid instanceof HTMLElement)
) {
return
}
const styles = getComputedStyle(domComponent)
@ -144,25 +247,29 @@
domComponent,
domGrid,
id,
gridId: domGrid.parentNode.dataset.id,
gridId: domGrid.parentElement!.dataset.id!,
mode,
side,
grid: {
startX: e.clientX,
startY: e.clientY,
rowStart: parseInt(styles["grid-row-start"]),
rowEnd: parseInt(styles["grid-row-end"]),
colStart: parseInt(styles["grid-column-start"]),
colEnd: parseInt(styles["grid-column-end"]),
startY: e.clientY + scrollOffset(),
rowStart: parseInt(styles.gridRowStart),
rowEnd: parseInt(styles.gridRowEnd),
colStart: parseInt(styles.gridColumnStart),
colEnd: parseInt(styles.gridColumnEnd),
},
}
// Add event handler to clear all drag state when dragging ends
dragInfo.domTarget.addEventListener("dragend", stopDragging)
dragInfo.domTarget!.addEventListener("dragend", stopDragging, false)
}
const onDragOver = e => {
const onDragOver = (e: DragEvent) => {
if (!dragInfo) {
// Check if we're dragging a new component
if ($dndIsDragging && $dndSource?.isNew && $isGridScreen) {
startDraggingPlaceholder()
}
return
}
handleEvent(e)
@ -178,7 +285,7 @@
// Reset DOM
domComponent.classList.remove("dragging")
domGrid.classList.remove("highlight")
domTarget.removeEventListener("dragend", stopDragging)
domTarget?.removeEventListener("dragend", stopDragging)
// Save changes
if ($styles) {
@ -186,17 +293,22 @@
}
// Reset state
dragInfo = null
styles.set(null)
dragInfo = undefined
styles.set(undefined)
}
onMount(() => {
scrollElement = document.getElementsByClassName(
"screen-wrapper"
)[0] as HTMLElement
document.addEventListener("dragstart", onDragStart, false)
document.addEventListener("dragover", onDragOver, false)
document.addEventListener("scroll", processEvent)
})
onDestroy(() => {
document.removeEventListener("dragstart", onDragStart, false)
document.removeEventListener("dragover", onDragOver, false)
document.removeEventListener("scroll", processEvent)
})
</script>

2
packages/client/src/components/preview/GridStylesButton.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Icon } from "@budibase/bbui"
import { builderStore } from "stores"
import { builderStore } from "@/stores"
export let style
export let value

32
packages/client/src/components/preview/HoverIndicator.svelte
View File

@ -1,26 +1,30 @@
<script>
<script lang="ts">
import { onMount, onDestroy } from "svelte"
import IndicatorSet from "./IndicatorSet.svelte"
import { dndIsDragging, hoverStore, builderStore } from "stores"
import { dndIsDragging, hoverStore, builderStore } from "@/stores"
$: componentId = $hoverStore.hoveredComponentId
$: selectedComponentId = $builderStore.selectedComponentId
$: selected = componentId === selectedComponentId
const onMouseOver = e => {
const onMouseOver = (e: MouseEvent) => {
const target = e.target as HTMLElement
// Ignore if dragging
if (e.buttons > 0) {
return
}
let newId
if (e.target.classList.contains("anchor")) {
if (target.classList.contains("anchor")) {
// Handle resize anchors
newId = e.target.dataset.id
newId = target.dataset.id
} else {
// Handle normal components
const element = e.target.closest(".interactive.component:not(.root)")
newId = element?.dataset?.id
const element = target.closest(".interactive.component:not(.root)")
if (element instanceof HTMLElement) {
newId = element.dataset?.id
}
}
if (newId !== componentId) {
@ -43,9 +47,11 @@
})
</script>
<IndicatorSet
componentId={$dndIsDragging ? null : componentId}
color="var(--spectrum-global-color-static-blue-200)"
zIndex={selected ? 890 : 910}
allowResizeAnchors
/>
{#if !$dndIsDragging && componentId}
<IndicatorSet
{componentId}
color="var(--spectrum-global-color-static-blue-200)"
zIndex={selected ? 890 : 910}
allowResizeAnchors
/>
{/if}}

36
packages/client/src/components/preview/Indicator.svelte
View File

@ -1,19 +1,21 @@
<script>
<script lang="ts">
import { Icon } from "@budibase/bbui"
import { GridDragModes } from "utils/grid"
import { GridDragMode } from "@/utils/grid"
export let top
export let left
export let width
export let height
export let text
export let icon
export let color
export let zIndex
export let componentId
export let top: number
export let left: number
export let width: number
export let height: number
export let text: string | undefined
export let icon: string | undefined
export let color: string
export let zIndex: number
export let componentId: string
export let line = false
export let alignRight = false
export let showResizeAnchors = false
export let background: string | undefined
export let animate = false
const AnchorSides = [
"right",
@ -33,10 +35,12 @@
class="indicator"
class:flipped
class:line
style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex}; --bg: {background ||
'none'};"
class:withText={!!text}
class:vCompact={height < 40}
class:hCompact={width < 40}
class:animate
>
{#if text || icon}
<div
@ -46,7 +50,7 @@
class:right={alignRight}
draggable="true"
data-indicator="true"
data-drag-mode={GridDragModes.Move}
data-drag-mode={GridDragMode.Move}
data-id={componentId}
>
{#if icon}
@ -65,7 +69,7 @@
class="anchor {side}"
draggable="true"
data-indicator="true"
data-drag-mode={GridDragModes.Resize}
data-drag-mode={GridDragMode.Resize}
data-side={side}
data-id={componentId}
>
@ -84,6 +88,7 @@
border: 2px solid var(--color);
pointer-events: none;
border-radius: 4px;
background: var(--bg);
}
.indicator.withText {
border-top-left-radius: 0;
@ -94,6 +99,9 @@
.indicator.line {
border-radius: 4px !important;
}
.indicator.animate {
transition: all 130ms ease-out;
}
/* Label styles */
.label {

139
packages/client/src/components/preview/IndicatorSet.svelte
View File

@ -1,42 +1,68 @@
<script>
<script lang="ts">
import { onMount, onDestroy } from "svelte"
import Indicator from "./Indicator.svelte"
import { builderStore } from "stores"
import { builderStore } from "@/stores"
import { memo, Utils } from "@budibase/frontend-core"
export let componentId = null
export let color = null
export let zIndex = 900
export let prefix = null
export let allowResizeAnchors = false
export let componentId: string
export let color: string
export let zIndex: number = 900
export let prefix: string | undefined = undefined
export let allowResizeAnchors: boolean = false
export let background: string | undefined = undefined
export let animate: boolean = false
export let text: string | undefined = undefined
export let icon: string | undefined = undefined
interface IndicatorState {
visible: boolean
insideModal: boolean
insideSidePanel: boolean
top: number
left: number
width: number
height: number
}
interface IndicatorSetState {
// Cached props
componentId: string
color: string
zIndex: number
prefix?: string
allowResizeAnchors: boolean
// Computed state
indicators: IndicatorState[]
text?: string
icon?: string
insideGrid: boolean
error: boolean
}
// Offset = 6 (clip-root padding) - 1 (half the border thickness)
const config = memo($$props)
const errorColor = "var(--spectrum-global-color-static-red-600)"
const mutationObserver = new MutationObserver(() => debouncedUpdate())
const defaultState = () => ({
// Cached props
const defaultState = (): IndicatorSetState => ({
componentId,
color,
zIndex,
prefix,
allowResizeAnchors,
// Computed state
indicators: [],
text: null,
icon: null,
text,
icon,
insideGrid: false,
error: false,
})
let interval
let interval: ReturnType<typeof setInterval>
let state = defaultState()
let observingMutations = false
let updating = false
let intersectionObservers = []
let intersectionObservers: IntersectionObserver[] = []
let callbackCount = 0
let nextState
let nextState: ReturnType<typeof defaultState>
$: componentId, reset()
$: visibleIndicators = state.indicators.filter(x => x.visible)
@ -58,27 +84,34 @@
updating = false
}
const observeMutations = element => {
mutationObserver.observe(element, {
const getElements = (className: string): HTMLElement[] => {
return [...document.getElementsByClassName(className)]
.filter(el => el instanceof HTMLElement)
.slice(0, 100)
}
const observeMutations = (node: Node) => {
mutationObserver.observe(node, {
attributes: true,
attributeFilter: ["style"],
})
observingMutations = true
}
const createIntersectionCallback = idx => entries => {
if (callbackCount >= intersectionObservers.length) {
return
const createIntersectionCallback =
(idx: number) => (entries: IntersectionObserverEntry[]) => {
if (callbackCount >= intersectionObservers.length) {
return
}
nextState.indicators[idx].visible =
nextState.indicators[idx].insideModal ||
nextState.indicators[idx].insideSidePanel ||
entries[0].isIntersecting
if (++callbackCount === intersectionObservers.length) {
state = nextState
updating = false
}
}
nextState.indicators[idx].visible =
nextState.indicators[idx].insideModal ||
nextState.indicators[idx].insideSidePanel ||
entries[0].isIntersecting
if (++callbackCount === intersectionObservers.length) {
state = nextState
updating = false
}
}
const updatePosition = () => {
if (updating) {
@ -86,11 +119,7 @@
}
// Sanity check
if (!componentId) {
state = defaultState()
return
}
let elements = document.getElementsByClassName(componentId)
let elements = getElements(componentId)
if (!elements.length) {
state = defaultState()
return
@ -108,17 +137,19 @@
}
// Check if we're inside a grid
if (allowResizeAnchors) {
nextState.insideGrid = elements[0]?.dataset.insideGrid === "true"
}
nextState.insideGrid = elements[0]?.dataset.insideGrid === "true"
// Get text to display
nextState.text = elements[0].dataset.name
if (nextState.prefix) {
nextState.text = `${nextState.prefix} ${nextState.text}`
// Get text and icon to display
if (!text) {
nextState.text = elements[0].dataset.name
if (nextState.prefix) {
nextState.text = `${nextState.prefix} ${nextState.text}`
}
}
if (elements[0].dataset.icon) {
nextState.icon = elements[0].dataset.icon
if (!icon) {
if (elements[0].dataset.icon) {
nextState.icon = elements[0].dataset.icon
}
}
nextState.error = elements[0].classList.contains("error")
@ -129,11 +160,8 @@
// Extract valid children
// Sanity limit of active indicators
if (!nextState.insideGrid) {
elements = document.getElementsByClassName(`${componentId}-dom`)
elements = getElements(`${componentId}-dom`)
}
elements = Array.from(elements)
.filter(x => x != null)
.slice(0, 100)
const multi = elements.length > 1
// If there aren't any nodes then reset
@ -143,15 +171,20 @@
}
const device = document.getElementById("app-root")
if (!device) {
throw "app-root node not found"
}
const deviceBounds = device.getBoundingClientRect()
nextState.indicators = elements.map((element, idx) => {
const elBounds = element.getBoundingClientRect()
let indicator = {
let indicator: IndicatorState = {
top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
width: Math.round(elBounds.width + 2),
height: Math.round(elBounds.height + 2),
visible: true,
insideModal: false,
insideSidePanel: false,
}
// If observing more than one node then we need to use an intersection
@ -199,11 +232,13 @@
left={indicator.left}
width={indicator.width}
height={indicator.height}
text={idx === 0 ? state.text : null}
icon={idx === 0 ? state.icon : null}
text={idx === 0 ? state.text : undefined}
icon={idx === 0 ? state.icon : undefined}
showResizeAnchors={state.allowResizeAnchors && state.insideGrid}
color={state.error ? errorColor : state.color}
componentId={state.componentId}
zIndex={state.zIndex}
{background}
{animate}
/>
{/each}

2
packages/client/src/components/preview/KeyboardManager.svelte
View File

@ -1,7 +1,7 @@
<script>
import { onMount, onDestroy } from "svelte"
import { get } from "svelte/store"
import { builderStore } from "stores"
import { builderStore } from "@/stores"
onMount(() => {
if (get(builderStore).inBuilder) {

18
packages/client/src/components/preview/SelectionIndicator.svelte
View File

@ -1,5 +1,5 @@
<script>
import { builderStore } from "stores"
<script lang="ts">
import { dndIsDragging, builderStore } from "@/stores"
import IndicatorSet from "./IndicatorSet.svelte"
$: color = $builderStore.editMode
@ -7,9 +7,11 @@
: "var(--spectrum-global-color-static-blue-600)"
</script>
<IndicatorSet
componentId={$builderStore.selectedComponentId}
{color}
zIndex={900}
allowResizeAnchors
/>
{#if !$dndIsDragging && $builderStore.selectedComponentId}
<IndicatorSet
componentId={$builderStore.selectedComponentId}
{color}
zIndex={900}
allowResizeAnchors
/>
{/if}

4
packages/client/src/components/preview/SettingsBar.svelte
View File

@ -4,9 +4,9 @@
import GridStylesButton from "./GridStylesButton.svelte"
import SettingsColorPicker from "./SettingsColorPicker.svelte"
import SettingsPicker from "./SettingsPicker.svelte"
import { builderStore, componentStore, dndIsDragging } from "stores"
import { builderStore, componentStore, dndIsDragging } from "@/stores"
import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
import { getGridVar, GridParams, Devices } from "utils/grid"
import { getGridVar, GridParams, Devices } from "@/utils/grid"
const context = getContext("context")
const verticalOffset = 36

2
packages/client/src/components/preview/SettingsButton.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Icon } from "@budibase/bbui"
import { builderStore } from "stores"
import { builderStore } from "@/stores"
import { createEventDispatcher } from "svelte"
export let prop

2
packages/client/src/components/preview/SettingsColorPicker.svelte
View File

@ -1,6 +1,6 @@
<script>
import { ColorPicker } from "@budibase/bbui"
import { builderStore } from "stores"
import { builderStore } from "@/stores"
export let prop
export let component

2
packages/client/src/components/preview/SettingsPicker.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Select } from "@budibase/bbui"
import { builderStore } from "stores"
import { builderStore } from "@/stores"
export let prop
export let options

5
packages/client/src/index.d.ts vendored
View File

@ -1,5 +0,0 @@
interface Window {
"##BUDIBASE_APP_ID##": string
"##BUDIBASE_IN_BUILDER##": string
MIGRATING_APP: boolean
}

138
packages/client/src/index.js
View File

@ -1,138 +0,0 @@
import ClientApp from "./components/ClientApp.svelte"
import UpdatingApp from "./components/UpdatingApp.svelte"
import {
builderStore,
appStore,
blockStore,
componentStore,
environmentStore,
dndStore,
eventStore,
hoverStore,
stateStore,
} from "./stores"
import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
import { get } from "svelte/store"
import { initWebsocket } from "./websocket.js"
// Provide svelte and svelte/internal as globals for custom components
import * as svelte from "svelte"
import * as internal from "svelte/internal"
window.svelte_internal = internal
window.svelte = svelte
// Initialise spectrum icons
loadSpectrumIcons()
let app
const loadBudibase = async () => {
// Update builder store with any builder flags
builderStore.set({
...get(builderStore),
inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
previewId: window["##BUDIBASE_PREVIEW_ID##"],
theme: window["##BUDIBASE_PREVIEW_THEME##"],
customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
usedPlugins: window["##BUDIBASE_USED_PLUGINS##"],
location: window["##BUDIBASE_LOCATION##"],
snippets: window["##BUDIBASE_SNIPPETS##"],
componentErrors: window["##BUDIBASE_COMPONENT_ERRORS##"],
})
// Set app ID - this window flag is set by both the preview and the real
// server rendered app HTML
appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
// Set the flag used to determine if the app is being loaded via an iframe
appStore.actions.setAppEmbedded(
window["##BUDIBASE_APP_EMBEDDED##"] === "true"
)
if (window.MIGRATING_APP) {
new UpdatingApp({
target: window.document.body,
})
return
}
// Fetch environment info
if (!get(environmentStore)?.loaded) {
await environmentStore.actions.fetchEnvironment()
}
// Register handler for runtime events from the builder
window.handleBuilderRuntimeEvent = (type, data) => {
if (!window["##BUDIBASE_IN_BUILDER##"]) {
return
}
if (type === "event-completed") {
eventStore.actions.resolveEvent(data)
} else if (type === "eject-block") {
const block = blockStore.actions.getBlock(data)
block?.eject()
} else if (type === "dragging-new-component") {
const { dragging, component } = data
if (dragging) {
const definition =
componentStore.actions.getComponentDefinition(component)
dndStore.actions.startDraggingNewComponent({ component, definition })
} else {
dndStore.actions.reset()
}
} else if (type === "request-context") {
const { selectedComponentInstance, screenslotInstance } =
get(componentStore)
const instance = selectedComponentInstance || screenslotInstance
const context = instance?.getDataContext()
let stringifiedContext = null
try {
stringifiedContext = JSON.stringify(context)
} catch (error) {
// Ignore - invalid context
}
eventStore.actions.dispatchEvent("provide-context", {
context: stringifiedContext,
})
} else if (type === "hover-component") {
hoverStore.actions.hoverComponent(data, false)
} else if (type === "builder-meta") {
builderStore.actions.setMetadata(data)
} else if (type === "builder-state") {
const [[key, value]] = Object.entries(data)
stateStore.actions.setValue(key, value)
}
}
// Register any custom components
if (window["##BUDIBASE_CUSTOM_COMPONENTS##"]) {
window["##BUDIBASE_CUSTOM_COMPONENTS##"].forEach(component => {
componentStore.actions.registerCustomComponent(component)
})
}
// Make a callback available for custom component bundles to register
// themselves at runtime
window.registerCustomComponent =
componentStore.actions.registerCustomComponent
// Initialise websocket
initWebsocket()
// Create app if one hasn't been created yet
if (!app) {
app = new ClientApp({
target: window.document.body,
})
}
}
// Attach to window so the HTML template can call this when it loads
window.loadBudibase = loadBudibase

191
packages/client/src/index.ts
View File

@ -1,6 +1,83 @@
import ClientApp from "./components/ClientApp.svelte"
import UpdatingApp from "./components/UpdatingApp.svelte"
import {
builderStore,
appStore,
blockStore,
componentStore,
environmentStore,
dndStore,
eventStore,
hoverStore,
stateStore,
} from "@/stores"
import { get } from "svelte/store"
import { initWebsocket } from "@/websocket"
import { APIClient } from "@budibase/frontend-core"
import type { ActionTypes } from "./constants"
import type { ActionTypes } from "@/constants"
import { Readable } from "svelte/store"
import {
Screen,
Layout,
Theme,
AppCustomTheme,
PreviewDevice,
AppNavigation,
Plugin,
Snippet,
UIComponentError,
CustomComponent,
} from "@budibase/types"
// Provide svelte and svelte/internal as globals for custom components
import * as svelte from "svelte"
// @ts-ignore
import * as internal from "svelte/internal"
window.svelte_internal = internal
window.svelte = svelte
// Initialise spectrum icons
// eslint-disable-next-line local-rules/no-budibase-imports
import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
loadSpectrumIcons()
// Extend global window scope
declare global {
interface Window {
// Data from builder
"##BUDIBASE_APP_ID##"?: string
"##BUDIBASE_IN_BUILDER##"?: true
"##BUDIBASE_PREVIEW_LAYOUT##"?: Layout
"##BUDIBASE_PREVIEW_SCREEN##"?: Screen
"##BUDIBASE_SELECTED_COMPONENT_ID##"?: string
"##BUDIBASE_PREVIEW_ID##"?: number
"##BUDIBASE_PREVIEW_THEME##"?: Theme
"##BUDIBASE_PREVIEW_CUSTOM_THEME##"?: AppCustomTheme
"##BUDIBASE_PREVIEW_DEVICE##"?: PreviewDevice
"##BUDIBASE_APP_EMBEDDED##"?: string // This is a bool wrapped in a string
"##BUDIBASE_PREVIEW_NAVIGATION##"?: AppNavigation
"##BUDIBASE_HIDDEN_COMPONENT_IDS##"?: string[]
"##BUDIBASE_USED_PLUGINS##"?: Plugin[]
"##BUDIBASE_LOCATION##"?: {
protocol: string
hostname: string
port: string
}
"##BUDIBASE_SNIPPETS##"?: Snippet[]
"##BUDIBASE_COMPONENT_ERRORS##"?: Record<string, UIComponentError>[]
"##BUDIBASE_CUSTOM_COMPONENTS##"?: CustomComponent[]
// Other flags
MIGRATING_APP: boolean
// Client additions
handleBuilderRuntimeEvent: (type: string, data: any) => void
registerCustomComponent: typeof componentStore.actions.registerCustomComponent
loadBudibase: typeof loadBudibase
svelte: typeof svelte
svelte_internal: typeof internal
}
}
export interface SDK {
API: APIClient
@ -28,4 +105,114 @@ export type Component = Readable<{
errorState: boolean
}>
export type Context = Readable<{}>
export type Context = Readable<Record<string, any>>
let app: ClientApp
const loadBudibase = async () => {
// Update builder store with any builder flags
builderStore.set({
...get(builderStore),
inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
previewId: window["##BUDIBASE_PREVIEW_ID##"],
theme: window["##BUDIBASE_PREVIEW_THEME##"],
customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
usedPlugins: window["##BUDIBASE_USED_PLUGINS##"],
location: window["##BUDIBASE_LOCATION##"],
snippets: window["##BUDIBASE_SNIPPETS##"],
componentErrors: window["##BUDIBASE_COMPONENT_ERRORS##"],
})
// Set app ID - this window flag is set by both the preview and the real
// server rendered app HTML
appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
// Set the flag used to determine if the app is being loaded via an iframe
appStore.actions.setAppEmbedded(
window["##BUDIBASE_APP_EMBEDDED##"] === "true"
)
if (window.MIGRATING_APP) {
new UpdatingApp({
target: window.document.body,
})
return
}
// Fetch environment info
if (!get(environmentStore)?.loaded) {
await environmentStore.actions.fetchEnvironment()
}
// Register handler for runtime events from the builder
window.handleBuilderRuntimeEvent = (type, data) => {
if (!window["##BUDIBASE_IN_BUILDER##"]) {
return
}
if (type === "event-completed") {
eventStore.actions.resolveEvent(data)
} else if (type === "eject-block") {
const block = blockStore.actions.getBlock(data)
block?.eject()
} else if (type === "dragging-new-component") {
const { dragging, component } = data
if (dragging) {
dndStore.actions.startDraggingNewComponent(component)
} else {
dndStore.actions.reset()
}
} else if (type === "request-context") {
const { selectedComponentInstance, screenslotInstance } =
get(componentStore)
const instance = selectedComponentInstance || screenslotInstance
const context = instance?.getDataContext()
let stringifiedContext = null
try {
stringifiedContext = JSON.stringify(context)
} catch (error) {
// Ignore - invalid context
}
eventStore.actions.dispatchEvent("provide-context", {
context: stringifiedContext,
})
} else if (type === "hover-component") {
hoverStore.actions.hoverComponent(data, false)
} else if (type === "builder-meta") {
builderStore.actions.setMetadata(data)
} else if (type === "builder-state") {
const [[key, value]] = Object.entries(data)
stateStore.actions.setValue(key, value)
}
}
// Register any custom components
if (window["##BUDIBASE_CUSTOM_COMPONENTS##"]) {
window["##BUDIBASE_CUSTOM_COMPONENTS##"].forEach(component => {
componentStore.actions.registerCustomComponent(component)
})
}
// Make a callback available for custom component bundles to register
// themselves at runtime
window.registerCustomComponent =
componentStore.actions.registerCustomComponent
// Initialise websocket
initWebsocket()
// Create app if one hasn't been created yet
if (!app) {
app = new ClientApp({
target: window.document.body,
})
}
}
// Attach to window so the HTML template can call this when it loads
window.loadBudibase = loadBudibase

18
packages/client/src/sdk.js
View File

@ -1,4 +1,4 @@
import { API } from "api"
import { API } from "@/api"
import {
authStore,
notificationStore,
@ -18,13 +18,13 @@ import {
appStore,
stateStore,
createContextStore,
} from "stores"
import { styleable } from "utils/styleable"
import { linkable } from "utils/linkable"
import { getAction } from "utils/getAction"
import Provider from "components/context/Provider.svelte"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
} from "@/stores"
import { styleable } from "@/utils/styleable"
import { linkable } from "@/utils/linkable"
import { getAction } from "@/utils/getAction"
import Provider from "@/components/context/Provider.svelte"
import Block from "@/components/Block.svelte"
import BlockComponent from "@/components/BlockComponent.svelte"
import { ActionTypes } from "./constants"
import {
fetchDatasourceSchema,
@ -41,7 +41,7 @@ import {
memo,
derivedMemo,
} from "@budibase/frontend-core"
import { createValidatorFromConstraints } from "components/app/forms/validation"
import { createValidatorFromConstraints } from "@/components/app/forms/validation"
export default {
API,

2
packages/client/src/stores/app.js
View File

@ -1,4 +1,4 @@
import { API } from "api"
import { API } from "@/api"
import { get, writable, derived } from "svelte/store"
const initialState = {

2
packages/client/src/stores/auth.ts
View File

@ -1,4 +1,4 @@
import { API } from "api"
import { API } from "@/api"
import { writable } from "svelte/store"
const createAuthStore = () => {

10
packages/client/src/stores/builder.ts
View File

@ -1,5 +1,5 @@
import { writable, get } from "svelte/store"
import { API } from "api"
import { API } from "@/api"
import { devToolsStore } from "./devTools.js"
import { eventStore } from "./events.js"
import {
@ -111,11 +111,17 @@ const createBuilderStore = () => {
mode,
})
},
dropNewComponent: (component: string, parent: string, index: number) => {
dropNewComponent: (
component: string,
parent: string,
index: number,
props: Record<string, any>
) => {
eventStore.actions.dispatchEvent("drop-new-component", {
component,
parent,
index,
props,
})
},
setEditMode: (enabled: boolean) => {

2
packages/client/src/stores/dataSource.js
View File

@ -1,5 +1,5 @@
import { writable, get } from "svelte/store"
import { API } from "api"
import { API } from "@/api"
import { FieldTypes } from "../constants"
import { routeStore } from "./routes"

4
packages/client/src/stores/derived/dndComponentPath.js
View File

@ -1,6 +1,6 @@
import { derived } from "svelte/store"
import { findComponentPathById } from "utils/components.js"
import { dndParent } from "../dnd.js"
import { findComponentPathById } from "@/utils/components.js"
import { dndParent } from "../dnd.ts"
import { screenStore } from "../screens.js"
export const dndComponentPath = derived(

88
packages/client/src/stores/dnd.js
View File

@ -1,88 +0,0 @@
import { writable } from "svelte/store"
import { derivedMemo } from "@budibase/frontend-core"
const createDndStore = () => {
const initialState = {
// Info about the dragged component
source: null,
// Info about the target component being hovered over
target: null,
// Info about where the component would be dropped
drop: null,
}
const store = writable(initialState)
const startDraggingExistingComponent = ({ id, parent, bounds, index }) => {
store.set({
...initialState,
source: { id, parent, bounds, index },
})
}
const startDraggingNewComponent = ({ component, definition }) => {
if (!component) {
return
}
// Get size of new component so we can show a properly sized placeholder
const width = definition?.size?.width || 128
const height = definition?.size?.height || 64
store.set({
...initialState,
source: {
id: null,
parent: null,
bounds: { height, width },
index: null,
newComponentType: component,
},
})
}
const updateTarget = ({ id, parent, node, empty, acceptsChildren }) => {
store.update(state => {
state.target = { id, parent, node, empty, acceptsChildren }
return state
})
}
const updateDrop = ({ parent, index }) => {
store.update(state => {
state.drop = { parent, index }
return state
})
}
const reset = () => {
store.set(initialState)
}
return {
subscribe: store.subscribe,
actions: {
startDraggingExistingComponent,
startDraggingNewComponent,
updateTarget,
updateDrop,
reset,
},
}
}
export const dndStore = createDndStore()
// The DND store is updated extremely frequently, so we can greatly improve
// performance by deriving any state that needs to be externally observed.
// By doing this and using primitives, we can avoid invalidating other stores
// or components which depend on DND state unless values actually change.
export const dndParent = derivedMemo(dndStore, x => x.drop?.parent)
export const dndIndex = derivedMemo(dndStore, x => x.drop?.index)
export const dndBounds = derivedMemo(dndStore, x => x.source?.bounds)
export const dndIsDragging = derivedMemo(dndStore, x => !!x.source)
export const dndIsNewComponent = derivedMemo(
dndStore,
x => x.source?.newComponentType != null
)

147
packages/client/src/stores/dnd.ts Normal file
View File

@ -0,0 +1,147 @@
import { writable, get } from "svelte/store"
import { derivedMemo } from "@budibase/frontend-core"
import { screenStore, isGridScreen, componentStore } from "@/stores"
import { ScreenslotID } from "@/constants"
import { ComponentDefinition } from "@budibase/types"
interface DNDSource {
id?: string
parent?: string
index?: number
bounds: {
height: number
width: number
}
name?: string
icon?: string
type: string
isNew: boolean
}
interface DNDTarget {
id: string
parent: string
empty: boolean
acceptsChildren: boolean
element?: HTMLElement
}
interface DNDDrop {
parent: string
index: number
}
interface DNDMeta {
props?: Record<string, any>
}
interface DNDState {
source?: DNDSource
target?: DNDTarget
drop?: DNDDrop
meta?: DNDMeta
}
const createDndStore = () => {
const store = writable<DNDState>({})
const startDraggingExistingComponent = (source: Omit<DNDSource, "isNew">) => {
store.set({
source: {
...source,
isNew: false,
},
})
}
const startDraggingNewComponent = (type: string) => {
// On grid screens, we already know exactly where to insert the component
let target: DNDTarget | undefined = undefined
let drop: DNDDrop | undefined = undefined
if (get(isGridScreen)) {
const screen = get(screenStore)?.activeScreen
const id = screen.props._id
target = {
id,
parent: ScreenslotID,
empty: false,
acceptsChildren: true,
}
drop = {
parent: id,
index: screen?.props?._children?.length,
}
}
// Get size of new component so we can show a properly sized placeholder
const definition: ComponentDefinition =
componentStore.actions.getComponentDefinition(type)
const width = definition?.size?.width || 128
const height = definition?.size?.height || 64
store.set({
source: {
bounds: { height, width },
type,
isNew: true,
name: `New ${definition?.name || "component"}`,
icon: definition?.icon || "Selection",
},
target,
drop,
})
}
const updateTarget = (target: DNDTarget) => {
store.update(state => {
state.target = target
return state
})
}
const updateDrop = (drop: DNDDrop) => {
store.update(state => {
state.drop = drop
return state
})
}
const reset = () => {
store.set({})
}
const updateNewComponentProps = (props: Record<string, any>) => {
store.update(state => {
return {
...state,
meta: {
...state.meta,
props,
},
}
})
}
return {
subscribe: store.subscribe,
actions: {
startDraggingExistingComponent,
startDraggingNewComponent,
updateTarget,
updateDrop,
reset,
updateNewComponentProps,
},
}
}
export const dndStore = createDndStore()
// The DND store is updated extremely frequently, so we can greatly improve
// performance by deriving any state that needs to be externally observed.
// By doing this and using primitives, we can avoid invalidating other stores
// or components which depend on DND state unless values actually change.
export const dndParent = derivedMemo(dndStore, x => x.drop?.parent)
export const dndIndex = derivedMemo(dndStore, x => x.drop?.index)
export const dndSource = derivedMemo(dndStore, x => x.source)
export const dndIsDragging = derivedMemo(dndStore, x => !!x.source)

2
packages/client/src/stores/environment.js
View File

@ -1,4 +1,4 @@
import { API } from "api"
import { API } from "@/api"
import { writable } from "svelte/store"
const initialState = {

11
packages/client/src/stores/index.js → packages/client/src/stores/index.ts
View File

@ -2,7 +2,7 @@ export { authStore } from "./auth"
export { appStore } from "./app"
export { notificationStore } from "./notification"
export { routeStore } from "./routes"
export { screenStore } from "./screens"
export { screenStore, isGridScreen } from "./screens"
export { builderStore } from "./builder"
export { dataSourceStore } from "./dataSource"
export { confirmationStore } from "./confirmation"
@ -18,14 +18,7 @@ export { environmentStore } from "./environment"
export { eventStore } from "./events"
export { orgStore } from "./org"
export { roleStore } from "./roles"
export {
dndStore,
dndIndex,
dndParent,
dndBounds,
dndIsNewComponent,
dndIsDragging,
} from "./dnd"
export { dndStore, dndIndex, dndParent, dndIsDragging, dndSource } from "./dnd"
export { sidePanelStore } from "./sidePanel"
export { modalStore } from "./modal"
export { hoverStore } from "./hover"

2
packages/client/src/stores/org.js
View File

@ -1,4 +1,4 @@
import { API } from "api"
import { API } from "@/api"
import { writable, get } from "svelte/store"
import { appStore } from "./app"

2
packages/client/src/stores/roles.js
View File

@ -1,4 +1,4 @@
import { API } from "api"
import { API } from "@/api"
import { writable } from "svelte/store"
import { currentRole } from "./derived"

2
packages/client/src/stores/routes.ts
View File

@ -1,6 +1,6 @@
import { get, writable } from "svelte/store"
import { push } from "svelte-spa-router"
import { API } from "api"
import { API } from "@/api"
import { peekStore } from "./peek"
import { builderStore } from "./builder"

24
packages/client/src/stores/screens.js
View File

@ -3,11 +3,11 @@ import { routeStore } from "./routes"
import { builderStore } from "./builder"
import { appStore } from "./app"
import { orgStore } from "./org"
import { dndIndex, dndParent, dndIsNewComponent, dndBounds } from "./dnd.js"
import { dndIndex, dndParent, dndSource } from "./dnd.ts"
import { RoleUtils } from "@budibase/frontend-core"
import { findComponentById, findComponentParent } from "../utils/components.js"
import { Helpers } from "@budibase/bbui"
import { DNDPlaceholderID, ScreenslotID, ScreenslotType } from "constants"
import { DNDPlaceholderID, ScreenslotID, ScreenslotType } from "@/constants"
const createScreenStore = () => {
const store = derived(
@ -18,8 +18,7 @@ const createScreenStore = () => {
orgStore,
dndParent,
dndIndex,
dndIsNewComponent,
dndBounds,
dndSource,
],
([
$appStore,
@ -28,8 +27,7 @@ const createScreenStore = () => {
$orgStore,
$dndParent,
$dndIndex,
$dndIsNewComponent,
$dndBounds,
$dndSource,
]) => {
let activeLayout, activeScreen
let screens
@ -85,7 +83,7 @@ const createScreenStore = () => {
// Remove selected component from tree if we are moving an existing
// component
if (!$dndIsNewComponent && selectedParent) {
if (!$dndSource.isNew && selectedParent) {
selectedParent._children = selectedParent._children?.filter(
x => x._id !== selectedComponentId
)
@ -97,11 +95,11 @@ const createScreenStore = () => {
_id: DNDPlaceholderID,
_styles: {
normal: {
width: `${$dndBounds?.width || 400}px`,
height: `${$dndBounds?.height || 200}px`,
width: `${$dndSource?.bounds?.width || 400}px`,
height: `${$dndSource?.bounds?.height || 200}px`,
opacity: 0,
"--default-width": $dndBounds?.width || 400,
"--default-height": $dndBounds?.height || 200,
"--default-width": $dndSource?.bounds?.width || 400,
"--default-height": $dndSource?.bounds?.height || 200,
},
},
static: true,
@ -198,3 +196,7 @@ const createScreenStore = () => {
}
export const screenStore = createScreenStore()
export const isGridScreen = derived(screenStore, $screenStore => {
return $screenStore.activeScreen?.props?.layout === "grid"
})

2
packages/client/src/utils/api.js
View File

@ -1,4 +1,4 @@
import { API } from "api"
import { API } from "@/api"
export const getAPIKey = async () => {
const { apiKey } = await API.fetchDeveloperInfo()

6
packages/client/src/utils/buttonActions.js
View File

@ -13,9 +13,9 @@ import {
rowSelectionStore,
sidePanelStore,
modalStore,
} from "stores"
import { API } from "api"
import { ActionTypes } from "constants"
} from "@/stores"
import { API } from "@/api"
import { ActionTypes } from "@/constants"
import { enrichDataBindings } from "./enrichDataBinding"
import { Helpers } from "@budibase/bbui"

58
packages/client/src/utils/grid.ts
View File

@ -1,6 +1,6 @@
import { GridSpacing, GridRowHeight } from "@/constants"
import { builderStore } from "stores"
import { buildStyleString } from "utils/styleable.js"
import { builderStore } from "@/stores"
import { buildStyleString } from "@/utils/styleable.js"
interface GridMetadata {
id: string
@ -37,46 +37,54 @@ interface GridMetadata {
*/
// Enum representing the different CSS variables we use for grid metadata
export const GridParams = {
HAlign: "h-align",
VAlign: "v-align",
ColStart: "col-start",
ColEnd: "col-end",
RowStart: "row-start",
RowEnd: "row-end",
export enum GridParams {
HAlign = "h-align",
VAlign = "v-align",
ColStart = "col-start",
ColEnd = "col-end",
RowStart = "row-start",
RowEnd = "row-end",
}
// Classes used in selectors inside grid containers to control child styles
export const GridClasses = {
DesktopFill: "grid-desktop-grow",
MobileFill: "grid-mobile-grow",
export enum GridClasses {
DesktopFill = "grid-desktop-grow",
MobileFill = "grid-mobile-grow",
}
// Enum for device preview type, included in grid CSS variables
export const Devices = {
Desktop: "desktop",
Mobile: "mobile",
export enum Devices {
Desktop = "desktop",
Mobile = "mobile",
}
export const GridDragModes = {
Resize: "resize",
Move: "move",
export enum GridDragMode {
Resize = "resize",
Move = "move",
}
// Builds a CSS variable name for a certain piece of grid metadata
export const getGridVar = (device: string, param: string) =>
`--grid-${device}-${param}`
export interface GridEvent extends DragEvent {
target: HTMLElement
dataTransfer: DataTransfer
}
// Determines whether a JS event originated from immediately within a grid
export const isGridEvent = (e: Event & { target: HTMLElement }): boolean => {
export const isGridEvent = (e: Event): e is GridEvent => {
if (!(e.target instanceof HTMLElement)) {
return false
}
const componentParent = e.target.closest?.(".component")?.parentNode as
| HTMLElement
| undefined
const gridDOMCandidate = componentParent?.closest(".component")
?.childNodes[0] as HTMLElement | undefined
return (
e.target.dataset?.indicator === "true" ||
// @ts-expect-error: api is not properly typed
e.target
.closest?.(".component")
// @ts-expect-error
?.parentNode.closest(".component")
?.childNodes[0]?.classList?.contains("grid")
!!gridDOMCandidate?.classList?.contains("grid")
)
}

2
packages/client/src/utils/linkable.ts
View File

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

2
packages/client/src/utils/schema.ts
View File

@ -1,4 +1,4 @@
import { API } from "api"
import { API } from "@/api"
import { DataFetchMap, DataFetchType } from "@budibase/frontend-core"
import { FieldType, TableSchema } from "@budibase/types"

2
packages/client/src/utils/styleable.js
View File

@ -1,4 +1,4 @@
import { builderStore } from "stores"
import { builderStore } from "@/stores"
/**
* Helper to build a CSS string from a style object.

6
packages/client/src/websocket.js
View File

@ -1,8 +1,4 @@
import {
builderStore,
environmentStore,
notificationStore,
} from "./stores/index.js"
import { builderStore, environmentStore, notificationStore } from "@/stores"
import { get } from "svelte/store"
import { createWebsocket } from "@budibase/frontend-core"

34
packages/client/vite.config.mjs
View File

@ -20,7 +20,7 @@ export default defineConfig(({ mode }) => {
},
build: {
lib: {
entry: "src/index.js",
entry: "src/index.ts",
formats: ["iife"],
outDir: "dist",
name: "budibase_client",
@ -47,34 +47,6 @@ export default defineConfig(({ mode }) => {
find: "manifest.json",
replacement: path.resolve("./manifest.json"),
},
{
find: "api",
replacement: path.resolve("./src/api"),
},
{
find: "components",
replacement: path.resolve("./src/components"),
},
{
find: "stores",
replacement: path.resolve("./src/stores"),
},
{
find: "utils",
replacement: path.resolve("./src/utils"),
},
{
find: "constants",
replacement: path.resolve("./src/constants"),
},
{
find: "@/constants",
replacement: path.resolve("./src/constants"),
},
{
find: "sdk",
replacement: path.resolve("./src/sdk"),
},
{
find: "@budibase/types",
replacement: path.resolve("../types/src"),
@ -87,6 +59,10 @@ export default defineConfig(({ mode }) => {
find: "@budibase/bbui",
replacement: path.resolve("../bbui/src"),
},
{
find: "@",
replacement: path.resolve(__dirname, "src"),
},
],
},
}

2
packages/frontend-core/src/utils/memo.d.ts vendored
View File

@ -1,7 +1,7 @@
import { Readable, Writable } from "svelte/store"
declare module "./memo" {
export function memo<T>(value: T): Writable<T>
export function memo<T>(value?: T): Writable<T>
export function derivedMemo<TStore, TResult>(
store: Readable<TStore>,

15
packages/server/jest.config.ts
View File

@ -21,20 +21,7 @@ const baseConfig: Config.InitialProjectOptions = {
transform: {
"^.+\\.ts?$": "@swc/jest",
"^.+\\.js?$": "@swc/jest",
"^.+\\.svelte$": [
"jest-chain-transform", // https://github.com/svelteness/svelte-jester/issues/166
{
transformers: [
[
"svelte-jester",
{
preprocess: true,
},
],
"@swc/jest",
],
},
],
"^.+\\.svelte?$": "<rootDir>/scripts/svelteTransformer.js",
},
transformIgnorePatterns: ["/node_modules/(?!svelte/).*"],
moduleNameMapper: {

2
packages/server/package.json
View File

@ -139,7 +139,6 @@
"@babel/core": "^7.22.5",
"@babel/preset-env": "7.16.11",
"@jest/types": "^29.6.3",
"@sveltejs/vite-plugin-svelte": "1.4.0",
"@swc/core": "1.3.71",
"@swc/jest": "0.2.27",
"@types/archiver": "6.0.2",
@ -165,7 +164,6 @@
"docker-compose": "0.23.17",
"ioredis-mock": "8.9.0",
"jest": "29.7.0",
"jest-chain-transform": "^0.0.8",
"jest-extended": "^4.0.2",
"jest-openapi": "0.14.2",
"nock": "13.5.4",

11
packages/server/scripts/svelteTransformer.js Normal file
View File

@ -0,0 +1,11 @@
const { compile } = require("svelte/compiler")
const { transformSync } = require("@babel/core")
module.exports = {
process(sourceText) {
const { js } = compile(sourceText, { css: "injected", generate: "ssr" })
const { code } = transformSync(js.code, { babelrc: true })
return { code: code }
},
}

7
packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts">
<script>
import ClientAppSkeleton from "@budibase/frontend-core/src/components/ClientAppSkeleton.svelte"
import type { BudibaseAppProps } from "@budibase/types"
export let props: BudibaseAppProps
/** @type {BudibaseAppProps} this receives all the props in one structure, following
* the type from @budibase/types */
export let props
</script>
<svelte:head>

5
packages/server/svelte.config.js
View File

@ -1,5 +0,0 @@
const { vitePreprocess } = require("@sveltejs/vite-plugin-svelte")
module.exports = {
preprocess: vitePreprocess(),
}

1
packages/string-templates/package.json
View File

@ -33,6 +33,7 @@
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-typescript": "8.3.0",
"@types/doctrine": "^0.0.9",
"doctrine": "^3.0.0",
"jest": "29.7.0",
"marked": "^4.0.10",

50
packages/string-templates/scripts/gen-collection-info.ts
View File

@ -7,18 +7,30 @@ import { marked } from "marked"
import { join, dirname } from "path"
const helpers = require("@budibase/handlebars-helpers")
const doctrine = require("doctrine")
import doctrine, { Annotation } from "doctrine"
type HelperInfo = {
type BudibaseAnnotation = Annotation & {
example?: string
acceptsInline?: boolean
acceptsBlock?: boolean
}
type Helper = {
args: string[]
numArgs: number
example?: string
description: string
tags?: any[]
requiresBlock?: boolean
}
type Manifest = {
[category: string]: {
[helper: string]: Helper
}
}
const FILENAME = join(__dirname, "..", "src", "manifest.json")
const outputJSON: any = {}
const outputJSON: Manifest = {}
const ADDED_HELPERS = {
date: {
date: {
@ -38,11 +50,10 @@ const ADDED_HELPERS = {
},
}
function fixSpecialCases(name: string, obj: any) {
const args = obj.args
function fixSpecialCases(name: string, obj: Helper) {
if (name === "ifNth") {
args[0] = "a"
args[1] = "b"
obj.args = ["a", "b", "options"]
obj.numArgs = 3
}
if (name === "eachIndex") {
obj.description = "Iterates the array, listing an item and the index of it."
@ -66,10 +77,10 @@ function lookForward(lines: string[], funcLines: string[], idx: number) {
return true
}
function getCommentInfo(file: string, func: string): HelperInfo {
function getCommentInfo(file: string, func: string): BudibaseAnnotation {
const lines = file.split("\n")
const funcLines = func.split("\n")
let comment = null
let comment: string | null = null
for (let idx = 0; idx < lines.length; ++idx) {
// from here work back until we have the comment
if (lookForward(lines, funcLines, idx)) {
@ -91,15 +102,9 @@ function getCommentInfo(file: string, func: string): HelperInfo {
}
}
if (comment == null) {
return { description: "" }
return { description: "", tags: [] }
}
const docs: {
acceptsInline?: boolean
acceptsBlock?: boolean
example: string
description: string
tags: any[]
} = doctrine.parse(comment, { unwrap: true })
const docs: BudibaseAnnotation = doctrine.parse(comment, { unwrap: true })
// some hacky fixes
docs.description = docs.description.replace(/\n/g, " ")
docs.description = docs.description.replace(/[ ]{2,}/g, " ")
@ -135,7 +140,7 @@ function run() {
)}/lib/${collection}.js`,
"utf8"
)
const collectionInfo: any = {}
const collectionInfo: { [name: string]: Helper } = {}
// collect information about helper
let hbsHelperInfo = helpers[collection]()
for (let entry of Object.entries(hbsHelperInfo)) {
@ -154,11 +159,8 @@ function run() {
const jsDocInfo = getCommentInfo(collectionFile, fnc)
let args = jsDocInfo.tags
.filter(tag => tag.title === "param")
.map(
tag =>
tag.description &&
tag.description.replace(/`/g, "").split(" ")[0].trim()
)
.filter(tag => tag.description)
.map(tag => tag.description!.replace(/`/g, "").split(" ")[0].trim())
collectionInfo[name] = fixSpecialCases(name, {
args,
numArgs: args.length,

15
packages/types/src/ui/components/index.ts
View File

@ -2,6 +2,16 @@ export * from "./sidepanel"
export * from "./codeEditor"
export * from "./errors"
export interface CustomComponent {
Component: any
schema: {
type: "component"
metadata: Record<string, any>
schema: ComponentDefinition
}
version: string
}
export interface ComponentDefinition {
component: string
name: string
@ -13,6 +23,11 @@ export interface ComponentDefinition {
legalDirectChildren: string[]
requiredAncestors?: string[]
illegalChildren: string[]
icon?: string
size?: {
width: number
height: number
}
}
export type DependsOnComponentSetting =

10
yarn.lock
View File

@ -6456,6 +6456,11 @@
"@types/node" "*"
"@types/ssh2" "*"
"@types/doctrine@^0.0.9":
version "0.0.9"
resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.9.tgz#d86a5f452a15e3e3113b99e39616a9baa0f9863f"
integrity sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==
"@types/estree@*", "@types/estree@1.0.5", "@types/estree@^1.0.0", "@types/estree@^1.0.1":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@ -13739,11 +13744,6 @@ jake@^10.8.5:
filelist "^1.0.1"
minimatch "^3.0.4"
jest-chain-transform@^0.0.8:
version "0.0.8"
resolved "https://registry.yarnpkg.com/jest-chain-transform/-/jest-chain-transform-0.0.8.tgz#cbb4d3aef8d02678b1852968a9b0c861f75eef5a"
integrity sha512-AELTTzYJ34WrmQKAbxUGT+xqnAHu0/XJZhahYNGvBVUhnAayjm1QmT45DQjwEbQPQp7gn6CXzu6rZA03riwBuw==
jest-changed-files@^29.7.0:
version "29.7.0"
resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.7.0.tgz#1c06d07e77c78e1585d020424dedc10d6e17ac3a"