@embeddable.com/sdk-core 3.9.9 → 3.9.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-core",
-  "version": "3.9.9",
+  "version": "3.9.11",
   "description": "Core Embeddable SDK module responsible for web-components bundling and publishing.",
   "keywords": [
     "embeddable",

package/src/validate.ts

@@ -247,10 +247,13 @@ const viewModelSchema = z.object({
 });
 
 const securityContextSchema = z.array(
-  z.object({
-    name: z.string(),
-    securityContext: z.object({}), // can be any object
-  }),
+  z
+    .object({
+      name: z.string(),
+      securityContext: z.object({}), // can be any object
+      environment: z.string().optional(),
+    })
+    .strict(),
 );
 
 const clientContextSchema = z.array(
@@ -258,6 +261,7 @@ const clientContextSchema = z.array(
     .object({
       name: z.string(),
       clientContext: z.object({}), // can be any object
+      canvas: z.object({}).optional(),
     })
     .strict(),
 );

package/templates/component.tsx.template

@@ -9,7 +9,7 @@ import { Component, Watch, Host, Prop, Event, EventEmitter, h, Listen } from '@s
 export class EmbeddableComponent {
 
   private rootElement?: HTMLDivElement;
-  private updatePropsEventDispatched?: boolean;
+  private updateEventDispatched?: boolean;
 
   @Prop() componentName: string;
   @Prop() props: string = '{}';
@@ -22,7 +22,6 @@ export class EmbeddableComponent {
     bubbles: true,
   }) componentDidLoadEvent: EventEmitter<any>;
 
-  @Watch('clientContext')
   @Watch('componentName')
   watchComponentName() {
     this.handlePops();
@@ -45,20 +44,27 @@ export class EmbeddableComponent {
   }
 
   componentWillUpdate() {
-    const event = new CustomEvent('embeddable-event:update-props', {
+    const eventProps = new CustomEvent('embeddable-event:update-props', {
       bubbles: false,
       detail: JSON.parse(this.props),
     });
-    this.rootElement.dispatchEvent(event);
-    this.updatePropsEventDispatched = true;
+
+    const eventClientContext = new CustomEvent('embeddable-event:update-client-context', {
+      bubbles: false,
+      detail: JSON.parse(this.clientContext),
+    });
+
+    this.rootElement.dispatchEvent(eventProps);
+    this.rootElement.dispatchEvent(eventClientContext);
+    this.updateEventDispatched = true;
   }
 
   @Listen('embeddable-event:update-props-listen', {target: 'window'})
   handleUpdatePropsListen(e) {
-    const componentId = e.detail.componentId;
-    const props = JSON.parse(this.props);
+    if(this.updateEventDispatched && componentId === props.componentId) {
+      const componentId = e.detail.componentId;
+      const props = JSON.parse(this.props);
 
-    if(this.updatePropsEventDispatched && componentId === props.componentId) {
       const event = new CustomEvent('embeddable-event:update-props', {
         bubbles: false,
         detail: props,
@@ -67,6 +73,20 @@ export class EmbeddableComponent {
    } 
   }
 
+  @Listen('embeddable-event:update-client-context-listen', {target: 'window'})
+  handleUpdateClientContextListen(e) {
+    if(this.updateEventDispatched && componentId === props.componentId) {
+      const componentId = e.detail.componentId;
+      const clientContext = JSON.parse(this.clientContext);
+
+      const event = new CustomEvent('embeddable-event:update-client-context', {
+        bubbles: false,
+        detail: props,
+      });
+      this.rootElement.dispatchEvent(event);
+   } 
+  }
+
   render() {
     return (
       <Host>