Improve how snippets are handled in client apps

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,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:tablet-preview={$builderStore.previewDevice ===
-                class:mobile-preview={$builderStore.previewDevice === "mobile"}
+                    "tablet"}
+                  class:mobile-preview={$builderStore.previewDevice ===
+                    "mobile"}
                 >
                   <!-- Actual app -->
                   <div id="app-root">
@@ -222,6 +226,7 @@
                     <GridDNDHandler />
                   {/if}
                 </div>
+              </SnippetsProvider>
             </QueryParamsProvider>
           </RowSelectionProvider>
         </StateBindingsProvider>

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
     }
 

packages/client/src/components/context/SnippetsProvider.svelte

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

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

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) }
+  return processObjectSync(Helpers.cloneDeep(props), context, { cache: true })
-  const opts = { cache: true }
-  return processObjectSync(Helpers.cloneDeep(props), totalContext, opts)
 }