Improve how snippets are handled in client apps

This commit is contained in:
Andrew Kingston 2024-03-14 16:16:24 +00:00
parent 1a9843fcc8
commit b3cf3fa636
5 changed files with 109 additions and 99 deletions

View File

@ -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,6 +117,7 @@
<StateBindingsProvider>
<RowSelectionProvider>
<QueryParamsProvider>
<SnippetsProvider>
<!-- Settings bar can be rendered outside of device preview -->
<!-- Key block needs to be outside the if statement or it breaks -->
{#key $builderStore.selectedComponentId}
@ -128,8 +130,10 @@
<div
id="clip-root"
class:preview={$builderStore.inBuilder}
class:tablet-preview={$builderStore.previewDevice === "tablet"}
class:mobile-preview={$builderStore.previewDevice === "mobile"}
class:tablet-preview={$builderStore.previewDevice ===
"tablet"}
class:mobile-preview={$builderStore.previewDevice ===
"mobile"}
>
<!-- Actual app -->
<div id="app-root">
@ -222,6 +226,7 @@
<GridDNDHandler />
{/if}
</div>
</SnippetsProvider>
</QueryParamsProvider>
</RowSelectionProvider>
</StateBindingsProvider>

View File

@ -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
}

View File

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

View File

@ -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 || []

View File

@ -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 })
}