2020-11-14 04:42:32 +13:00
|
|
|
<script>
|
2020-11-20 22:50:10 +13:00
|
|
|
import { getContext, setContext } from "svelte"
|
2020-11-24 22:31:54 +13:00
|
|
|
import { writable } from "svelte/store"
|
2020-11-19 08:18:18 +13:00
|
|
|
import * as ComponentLibrary from "@budibase/standard-components"
|
|
|
|
import Router from "./Router.svelte"
|
2020-11-25 22:50:51 +13:00
|
|
|
import { enrichProps } from "../utils/componentProps"
|
2020-11-25 00:02:10 +13:00
|
|
|
import { bindingStore } from "../store"
|
2020-11-14 04:42:32 +13:00
|
|
|
|
2020-11-18 01:08:24 +13:00
|
|
|
export let definition = {}
|
2020-11-14 04:42:32 +13:00
|
|
|
|
2020-11-25 22:50:51 +13:00
|
|
|
// Get local data binding context
|
2020-11-26 07:43:58 +13:00
|
|
|
const dataContext = getContext("data")
|
2020-11-19 08:18:18 +13:00
|
|
|
|
2020-11-25 22:50:51 +13:00
|
|
|
// Create component context
|
|
|
|
const componentStore = writable({})
|
|
|
|
setContext("component", componentStore)
|
2020-11-18 01:08:24 +13:00
|
|
|
|
2020-11-20 22:50:10 +13:00
|
|
|
// Extract component definition info
|
2020-11-25 22:50:51 +13:00
|
|
|
$: constructor = getComponentConstructor(definition._component)
|
2020-11-24 22:31:54 +13:00
|
|
|
$: children = definition._children
|
2020-11-25 00:02:10 +13:00
|
|
|
$: id = definition._id
|
2020-11-26 07:43:58 +13:00
|
|
|
$: enrichedProps = enrichProps(definition, $dataContext, $bindingStore)
|
2020-11-20 22:50:10 +13:00
|
|
|
|
2020-11-25 00:02:10 +13:00
|
|
|
// Update component context
|
|
|
|
// ID is duplicated inside style so that the "styleable" helper can set
|
|
|
|
// an ID data tag for unique reference to components
|
2020-11-25 22:50:51 +13:00
|
|
|
$: componentStore.set({ id, styles: { ...definition._styles, id } })
|
|
|
|
|
|
|
|
// Gets the component constructor for the specified component
|
|
|
|
const getComponentConstructor = component => {
|
|
|
|
const split = component?.split("/")
|
|
|
|
const name = split?.[split.length - 1]
|
|
|
|
return name === "screenslot" ? Router : ComponentLibrary[name]
|
|
|
|
}
|
2020-11-14 04:42:32 +13:00
|
|
|
</script>
|
|
|
|
|
2020-11-18 01:08:24 +13:00
|
|
|
{#if constructor}
|
2020-11-20 22:50:10 +13:00
|
|
|
<svelte:component this={constructor} {...enrichedProps}>
|
2020-11-18 01:08:24 +13:00
|
|
|
{#if children && children.length}
|
2020-11-24 22:31:54 +13:00
|
|
|
{#each children as child (child._id)}
|
2020-11-18 01:08:24 +13:00
|
|
|
<svelte:self definition={child} />
|
|
|
|
{/each}
|
|
|
|
{/if}
|
|
|
|
</svelte:component>
|
2020-11-14 04:42:32 +13:00
|
|
|
{/if}
|