diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 4efa8af4e6..66b2fc990d 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -37,6 +37,7 @@ import DevTools from "components/devtools/DevTools.svelte" import FreeFooter from "components/FreeFooter.svelte" import licensing from "../licensing" + import SnippetsProvider from "./context/SnippetsProvider.svelte" // Provide contexts setContext("sdk", SDK) @@ -116,112 +117,116 @@ - - - {#key $builderStore.selectedComponentId} - {#if $builderStore.inBuilder} - - {/if} - {/key} - - -
- -
- {#if showDevTools} - + + + + {#key $builderStore.selectedComponentId} + {#if $builderStore.inBuilder} + {/if} + {/key} -
- {#if permissionError} -
- - - {@html ErrorSVG} - - You don't have permission to use this app - - - Ask your administrator to grant you access - - -
- {:else if !$screenStore.activeLayout} -
- - - {@html ErrorSVG} - - Something went wrong rendering your app - - - Get in touch with support if this issue persists - - -
- {:else if embedNoScreens} -
- - - {@html ErrorSVG} - - This Budibase app is not publicly accessible - - -
- {:else} - - {#key $screenStore.activeLayout._id} - - {/key} + +
+ +
+ {#if showDevTools} + + {/if} - + {@html ErrorSVG} + + You don't have permission to use this app + + + Ask your administrator to grant you access + + +
+ {:else if !$screenStore.activeLayout} +
+ + + {@html ErrorSVG} + + Something went wrong rendering your app + + + Get in touch with support if this issue persists + + +
+ {:else if embedNoScreens} +
+ + + {@html ErrorSVG} + + This Budibase app is not publicly accessible + + +
+ {:else} + + {#key $screenStore.activeLayout._id} + + {/key} + + -
+
- -
+ +
- - - - - - {/if} + + + + + + {/if} - {#if showDevTools} - + {#if showDevTools} + + {/if} +
+ + {#if !$builderStore.inBuilder && licensing.logoEnabled()} + {/if}
- {#if !$builderStore.inBuilder && licensing.logoEnabled()} - + + {#if $appStore.isDevApp} + + {/if} + {#if $builderStore.inBuilder || $devToolsStore.allowSelection} + + {/if} + {#if $builderStore.inBuilder} + + {/if}
- - - {#if $appStore.isDevApp} - - {/if} - {#if $builderStore.inBuilder || $devToolsStore.allowSelection} - - {/if} - {#if $builderStore.inBuilder} - - - {/if} -
+ diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 3d267ec623..7dbe0c0e44 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -565,7 +565,8 @@ // If we don't know, check and cache if (used == null) { - used = bindingString.indexOf(`[${key}]`) !== -1 + const searchString = key === "snippets" ? key : `[${key}]` + used = bindingString.indexOf(searchString) !== -1 knownContextKeyMap[key] = used } diff --git a/packages/client/src/components/context/SnippetsProvider.svelte b/packages/client/src/components/context/SnippetsProvider.svelte new file mode 100644 index 0000000000..53fa1e8b7f --- /dev/null +++ b/packages/client/src/components/context/SnippetsProvider.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/packages/client/src/stores/derived/snippets.js b/packages/client/src/stores/derived/snippets.js index 806ff85c4a..74b2797643 100644 --- a/packages/client/src/stores/derived/snippets.js +++ b/packages/client/src/stores/derived/snippets.js @@ -1,8 +1,8 @@ -import { derived } from "svelte/store" import { appStore } from "../app.js" import { builderStore } from "../builder.js" +import { derivedMemo } from "@budibase/frontend-core" -export const snippets = derived( +export const snippets = derivedMemo( [appStore, builderStore], ([$appStore, $builderStore]) => { return $builderStore?.snippets || $appStore?.application?.snippets || [] diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js index 0068a3241c..3756d8789a 100644 --- a/packages/client/src/utils/enrichDataBinding.js +++ b/packages/client/src/utils/enrichDataBinding.js @@ -1,14 +1,10 @@ import { Helpers } from "@budibase/bbui" import { processObjectSync } from "@budibase/string-templates" -import { snippets } from "../stores" -import { get } from "svelte/store" /** * Recursively enriches all props in a props object and returns the new props. * Props are deeply cloned so that no mutation is done to the source object. */ export const enrichDataBindings = (props, context) => { - const totalContext = { ...context, snippets: get(snippets) } - const opts = { cache: true } - return processObjectSync(Helpers.cloneDeep(props), totalContext, opts) + return processObjectSync(Helpers.cloneDeep(props), context, { cache: true }) }