From 1fe0210752efb90a521ae7d134ea0fa32cdee688 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Sep 2022 10:13:06 +0100 Subject: [PATCH 1/8] Fix custom components not working properly with generated bindings --- packages/builder/src/builderStore/componentUtils.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js index 2ad7e82075..e7787dea72 100644 --- a/packages/builder/src/builderStore/componentUtils.js +++ b/packages/builder/src/builderStore/componentUtils.js @@ -143,7 +143,10 @@ export const getComponentSettings = componentType => { } // Ensure whole component name is used - if (!componentType.startsWith("@budibase")) { + if ( + !componentType.startsWith("plugin/") && + !componentType.startsWith("@budibase") + ) { componentType = `@budibase/standard-components/${componentType}` } From f046caf0f3a349bed47949daec12aee9b8a0120e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Sep 2022 10:13:26 +0100 Subject: [PATCH 2/8] Fix fetchRow not working in internal API --- packages/frontend-core/src/api/rows.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/frontend-core/src/api/rows.js b/packages/frontend-core/src/api/rows.js index 70030d7f80..3734310eed 100644 --- a/packages/frontend-core/src/api/rows.js +++ b/packages/frontend-core/src/api/rows.js @@ -8,10 +8,9 @@ export const buildRowEndpoints = API => ({ if (!tableId || !rowId) { return null } - const row = await API.get({ + return await API.get({ url: `/api/${tableId}/rows/${rowId}`, }) - return (await API.enrichRows([row], tableId))[0] }, /** From 8b4fe612982b6ac172a4d587c6553117237480f8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Sep 2022 11:26:33 +0100 Subject: [PATCH 3/8] Use friendly name when adding instances of custom components --- packages/builder/src/builderStore/store/frontend.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index b74261a7e8..86b8ff1c43 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -428,7 +428,7 @@ export const getFrontendStore = () => { _id: Helpers.uuid(), _component: definition.component, _styles: { normal: {}, hover: {}, active: {} }, - _instanceName: `New ${definition.name}`, + _instanceName: `New ${definition.friendlyName || definition.name}`, ...cloneDeep(props), ...extras, } From ca275c1b12cb7c392f004d47014fc4e89a31c3ff Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Sep 2022 11:38:12 +0100 Subject: [PATCH 4/8] Show notification when a plugin is hot reloaded --- packages/client/src/websocket.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/client/src/websocket.js b/packages/client/src/websocket.js index 827453fad6..0ad445863d 100644 --- a/packages/client/src/websocket.js +++ b/packages/client/src/websocket.js @@ -1,4 +1,8 @@ -import { builderStore, environmentStore } from "./stores/index.js" +import { + builderStore, + environmentStore, + notificationStore, +} from "./stores/index.js" import { get } from "svelte/store" import { io } from "socket.io-client" @@ -31,5 +35,6 @@ export const initWebsocket = () => { // Event handlers socket.on("plugin-update", data => { builderStore.actions.updateUsedPlugin(data.name, data.hash) + notificationStore.actions.info(`"${data.name}" plugin reloaded`) }) } From d4778c2cf4c2993f3dd5e0778e0c23624699baab Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Sep 2022 12:01:25 +0100 Subject: [PATCH 5/8] Hot reload custom component settings in the builder --- .../src/builderStore/store/frontend.js | 40 +++++++++++-------- .../[screenId]/_components/AppPreview.svelte | 2 + packages/client/src/stores/builder.js | 3 ++ 3 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 86b8ff1c43..aefdba9fb2 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -88,27 +88,12 @@ export const getFrontendStore = () => { initialise: async pkg => { const { layouts, screens, application, clientLibPath } = pkg - // Fetch component definitions. - // Allow errors to propagate. - const components = await API.fetchComponentLibDefinitions( - application.appId - ) - - // Filter out custom component keys so we can flag them - const customComponents = Object.keys(components).filter(name => - name.startsWith("plugin/") - ) + await store.actions.components.refreshDefinitions(application.appId) // Reset store state store.update(state => ({ ...state, libraries: application.componentLibraries, - components, - customComponents, - clientFeatures: { - ...INITIAL_FRONTEND_STATE.clientFeatures, - ...components.features, - }, name: application.name, description: application.description, appId: application.appId, @@ -385,6 +370,29 @@ export const getFrontendStore = () => { }, }, components: { + refreshDefinitions: async appId => { + if (!appId) { + appId = get(store).appId + } + + // Fetch definitions and filter out custom component definitions so we + // can flag them + const components = await API.fetchComponentLibDefinitions(appId) + const customComponents = Object.keys(components).filter(name => + name.startsWith("plugin/") + ) + + // Update store + store.update(state => ({ + ...state, + components, + customComponents, + clientFeatures: { + ...INITIAL_FRONTEND_STATE.clientFeatures, + ...components.features, + }, + })) + }, getDefinition: componentName => { if (!componentName) { return null diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index bc42eadff2..9f21a6a29f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -198,6 +198,8 @@ block: "center", }) } + } else if (type === "reload-plugin") { + await store.actions.components.refreshDefinitions() } else { console.warn(`Client sent unknown event type: ${type}`) } diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js index 608a058e01..fea070c27c 100644 --- a/packages/client/src/stores/builder.js +++ b/packages/client/src/stores/builder.js @@ -98,6 +98,9 @@ const createBuilderStore = () => { return state }) } + + // Notify the builder so we can reload component definitions + dispatchEvent("reload-plugin") }, } return { From f4160569a8739cc6457ac22768f95f3a1840763e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Sep 2022 12:01:56 +0100 Subject: [PATCH 6/8] Ensure only one instance of the client websocket exists and reduce reconnection attemps --- packages/client/src/websocket.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/client/src/websocket.js b/packages/client/src/websocket.js index 0ad445863d..0a99fa8606 100644 --- a/packages/client/src/websocket.js +++ b/packages/client/src/websocket.js @@ -6,12 +6,14 @@ import { import { get } from "svelte/store" import { io } from "socket.io-client" +let socket + export const initWebsocket = () => { const { inBuilder, location } = get(builderStore) const { cloud } = get(environmentStore) // Only connect when we're inside the builder preview, for now - if (!inBuilder || !location || cloud) { + if (!inBuilder || !location || cloud || socket) { return } @@ -20,16 +22,15 @@ export const initWebsocket = () => { const proto = tls ? "wss:" : "ws:" const host = location.hostname const port = location.port || (tls ? 443 : 80) - const socket = io(`${proto}//${host}:${port}`, { + socket = io(`${proto}//${host}:${port}`, { path: "/socket/client", - // Cap reconnection attempts to 10 (total of 95 seconds before giving up) - reconnectionAttempts: 10, - // Delay initial reconnection attempt by 5 seconds + // Cap reconnection attempts to 3 (total of 15 seconds before giving up) + reconnectionAttempts: 3, + // Delay reconnection attempt by 5 seconds reconnectionDelay: 5000, - // Then decrease to 10 second intervals - reconnectionDelayMax: 10000, - // Timeout after 5 seconds so we never stack requests - timeout: 5000, + reconnectionDelayMax: 5000, + // Timeout after 4 seconds so we never stack requests + timeout: 4000, }) // Event handlers From ee4e9e7a61899f681885d0d2a5ed66d7c247a228 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 30 Sep 2022 15:43:47 +0100 Subject: [PATCH 7/8] Fix table setting type --- .../settings/controls/TableSelect.svelte | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte index b41098da2d..384bbe1e3a 100644 --- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/TableSelect.svelte @@ -1,26 +1,28 @@ -
- -
- - +