diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index cad74a3e63..e204209526 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -3,6 +3,7 @@
import { setContext, onMount } from "svelte"
import Component from "./Component.svelte"
import NotificationDisplay from "./NotificationDisplay.svelte"
+ import Provider from "./Provider.svelte"
import SDK from "../sdk"
import {
createContextStore,
@@ -27,6 +28,8 @@
{#if loaded && $screenStore.activeLayout}
-
-
+
+
+
+
{/if}
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a9d80a3c5f..6980313312 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -4,7 +4,7 @@
import * as ComponentLibrary from "@budibase/standard-components"
import Router from "./Router.svelte"
import { enrichProps, propsAreSame } from "../utils/componentProps"
- import { authStore, builderStore } from "../store"
+ import { builderStore } from "../store"
import { hashString } from "../utils/hash"
export let definition = {}
@@ -32,7 +32,7 @@
$: constructor = getComponentConstructor(definition._component)
$: children = definition._children || []
$: id = definition._id
- $: updateComponentProps(definition, $context, $authStore)
+ $: updateComponentProps(definition, $context)
$: styles = definition._styles
// Update component context
@@ -53,13 +53,13 @@
}
// Enriches any string component props using handlebars
- const updateComponentProps = async (definition, context, user) => {
+ const updateComponentProps = async (definition, context) => {
// Record the timestamp so we can reference it after enrichment
latestUpdateTime = Date.now()
const enrichmentTime = latestUpdateTime
// Enrich props with context
- const enrichedProps = await enrichProps(definition, context, user)
+ const enrichedProps = await enrichProps(definition, context)
// Abandon this update if a newer update has started
if (enrichmentTime !== latestUpdateTime) {
diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index f1349796eb..13dd70667b 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@@ -4,24 +4,22 @@
export let data
export let actions
+ export let key
// Clone and create new data context for this component tree
const context = getContext("context")
const component = getContext("component")
const newContext = createContextStore($context)
setContext("context", newContext)
+ $: providerKey = key || $component.id
// Add data context
- $: {
- if (data !== undefined) {
- newContext.actions.provideData($component.id, data)
- }
- }
+ $: newContext.actions.provideData(providerKey, data)
// Add actions context
$: {
actions?.forEach(({ type, callback }) => {
- newContext.actions.provideAction($component.id, type, callback)
+ newContext.actions.provideAction(providerKey, type, callback)
})
}
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index 63aaee3b14..5092161037 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -4,26 +4,28 @@ export const createContextStore = existingContext => {
const store = writable({ ...existingContext })
// Adds a data context layer to the tree
- const provideData = (componentId, data) => {
+ const provideData = (key, data) => {
+ if (!key) {
+ return
+ }
store.update(state => {
- if (componentId) {
- state[componentId] = data
+ state[key] = data
- // Keep track of the closest component ID so we can later hydrate a "data" prop.
- // This is only required for legacy bindings that used "data" rather than a
- // component ID.
- state.closestComponentId = componentId
- }
+ // Keep track of the closest component ID so we can later hydrate a "data" prop.
+ // This is only required for legacy bindings that used "data" rather than a
+ // component ID.
+ state.closestComponentId = key
return state
})
}
// Adds an action context layer to the tree
- const provideAction = (componentId, actionType, callback) => {
+ const provideAction = (key, actionType, callback) => {
+ if (!key || !actionType) {
+ return
+ }
store.update(state => {
- if (actionType && componentId) {
- state[`${componentId}_${actionType}`] = callback
- }
+ state[`${key}_${actionType}`] = callback
return state
})
}
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 42bb6e624a..18a894beaa 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -21,7 +21,7 @@ export const propsAreSame = (a, b) => {
* Enriches component props.
* Data bindings are enriched, and button actions are enriched.
*/
-export const enrichProps = async (props, context, user) => {
+export const enrichProps = async (props, context) => {
// Exclude all private props that start with an underscore
let validProps = {}
Object.entries(props)
@@ -34,7 +34,6 @@ export const enrichProps = async (props, context, user) => {
// Duplicate the closest context as "data" which the builder requires
const totalContext = {
...context,
- user,
// This is only required for legacy bindings that used "data" rather than a
// component ID.