Improve how snippets are handled in client apps
This commit is contained in:
parent
1a9843fcc8
commit
b3cf3fa636
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
<script>
|
||||
import Provider from "./Provider.svelte"
|
||||
import { snippets } from "stores"
|
||||
</script>
|
||||
|
||||
<Provider key="snippets" data={$snippets}>
|
||||
<slot />
|
||||
</Provider>
|
|
@ -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 || []
|
||||
|
|
|
@ -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 })
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue