authenticated iframe PoC

packages/builder/src/dataBinding.js

@@ -56,6 +56,7 @@ export const getBindableProperties = (asset, componentId) => {
   const stateBindings = getStateBindings()
   const selectedRowsBindings = getSelectedRowsBindings(asset)
   const roleBindings = getRoleBindings()
+  const embedBindings = getEmbedBindings()
   return [
     ...contextBindings,
     ...urlBindings,
@@ -64,6 +65,7 @@ export const getBindableProperties = (asset, componentId) => {
     ...deviceBindings,
     ...selectedRowsBindings,
     ...roleBindings,
+    ...embedBindings,
   ]
 }
 
@@ -823,6 +825,26 @@ export const getActionBindings = (actions, actionId) => {
   return bindings
 }
 
+/**
+ * Gets all device bindings for embeds.
+ */
+const getEmbedBindings = () => {
+  let bindings = []
+  const safeEmbed = makePropSafe("embed")
+
+  bindings = [
+    {
+      type: "context",
+      runtimeBinding: `${safeEmbed}.`,
+      readableBinding: `ParentData`,
+      category: "Embed",
+      icon: "DevicePhone",
+      display: { type: "object", name: "Parent Data" },
+    },
+  ]
+  return bindings
+}
+
 /**
  * Gets the schema for a certain datasource plus.
  * The options which can be passed in are:

packages/client/src/components/ClientApp.svelte

@@ -42,6 +42,7 @@
   import FreeFooter from "components/FreeFooter.svelte"
   import MaintenanceScreen from "components/MaintenanceScreen.svelte"
   import SnippetsProvider from "./context/SnippetsProvider.svelte"
+  import EmbedProvider from "./context/EmbedProvider.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -160,6 +161,7 @@
     {#if $environmentStore.maintenance.length > 0}
       <MaintenanceScreen maintenanceList={$environmentStore.maintenance} />
     {:else}
+      <EmbedProvider>
         <DeviceBindingsProvider>
           <UserBindingsProvider>
             <StateBindingsProvider>
@@ -273,6 +275,7 @@
             </StateBindingsProvider>
           </UserBindingsProvider>
         </DeviceBindingsProvider>
+      </EmbedProvider>
     {/if}
   </div>
   <KeyboardManager />

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

@@ -0,0 +1,11 @@
+<script>
+  import Provider from "./Provider.svelte"
+
+  $: data = window.parent?.data
+  $: console.log("parentWindow", data)
+</script>
+
+
+<Provider key="embed" {data}>
+  <slot />
+</Provider>