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 {