feat(SDK): communicate sdk and app versions

hatemhosny · hatemhosny · commit 63e7db2f9b4c · 2025-05-21T00:38:17.000+03:00
diff --git a/src/livecodes/events/custom-events.ts b/src/livecodes/events/custom-events.ts
@@ -1,6 +1,7 @@
 import type { CustomEvents } from '../models';
 
 export const customEvents: CustomEvents = {
+  init: 'livecodes-init',
   getConfig: 'livecodes-get-config',
   config: 'livecodes-config',
   load: 'livecodes-load',
diff --git a/src/livecodes/index.ts b/src/livecodes/index.ts
@@ -3,12 +3,18 @@ import type { I18nKeyType } from './i18n';
 import { clickToLoad, isEmbed, livecodes, loading, params } from './main';
 import type { Config, CustomEvents } from './models';
 
+const sdkVersion = params.get('sdkVersion');
 const rootSelector = '#livecodes';
 const loadingEl = document.querySelector<HTMLElement>('#loading')!;
 const loadingText = document.querySelector<HTMLElement>('#loading-text')!;
 const loadingHTML = loadingEl.innerHTML;
 
 if (isEmbed) {
+  parent.postMessage(
+    { type: customEvents.init, payload: { appVersion: process.env.VERSION } },
+    '*',
+  );
+
   document.body.classList.add('embed');
   if (clickToLoad) {
     loadingEl.classList.add('click-to-load');
@@ -107,7 +113,8 @@ window.addEventListener(customEvents.destroy, () => {
   document.head.innerHTML = '';
 });
 
-if (isEmbed && params.get('config') === 'sdk') {
+// for backward-compatibility
+if (isEmbed && params.get('config') === 'sdk' && !sdkVersion) {
   addEventListener(
     'message',
     function configHandler(
diff --git a/src/sdk/index.ts b/src/sdk/index.ts
@@ -38,16 +38,17 @@ export async function createPlayground(
   if (
     typeof container === 'object' &&
     !(container instanceof HTMLElement) &&
-    (container as any).view === 'headless'
+    ((container as any).headless || (container as any).view === 'headless')
   ) {
     options = container;
     container = null as any;
   }
 
-  const { headless, loading = 'lazy', view } = options;
+  const { config = {}, params = {}, headless, loading = 'lazy', view } = options;
   const isHeadless = headless || view === 'headless'; // for backwards compatibility;
 
   let containerElement: HTMLElement | null = null;
+  let appVersion: number | null = null;
 
   if (typeof container === 'string') {
     containerElement = document.querySelector(container);
@@ -67,9 +68,24 @@ export async function createPlayground(
   }
 
   const playgroundUrl = new URL(getPlaygroundUrl(options));
+  const origin = playgroundUrl.origin;
   playgroundUrl.searchParams.set('embed', 'true');
+  playgroundUrl.searchParams.set('sdkVersion', (process as any).env.SDK_VERSION);
   playgroundUrl.searchParams.set('loading', isHeadless ? 'eager' : loading);
-  const origin = playgroundUrl.origin;
+
+  // for backward-compatibility
+  if (typeof config === 'object' && Object.keys(config).length > 0) {
+    playgroundUrl.searchParams.set('config', 'sdk');
+  }
+  if (
+    typeof params === 'object' &&
+    Object.keys(params).length > 0 &&
+    JSON.stringify(params).length < 1800
+  ) {
+    (Object.keys(params) as Array<keyof UrlQueryParams>).forEach((param) => {
+      playgroundUrl.searchParams.set(param, encodeURIComponent(String(params[param])));
+    });
+  }
 
   let destroyed = false;
   const alreadyDestroyedMessage = 'Cannot call API methods after calling `destroy()`.';
@@ -126,7 +142,40 @@ export async function createPlayground(
         frame.style.border = '0';
         frame.style.borderRadius = containerElement.style.borderRadius;
       }
+      addEventListener(
+        'message',
+        function initHandler(
+          e: MessageEventInit<{ type: CustomEvents['init']; payload: { appVersion: string } }>,
+        ) {
+          if (
+            e.source !== frame.contentWindow ||
+            e.origin !== origin ||
+            e.data?.type !== 'livecodes-init'
+          ) {
+            return;
+          }
+          removeEventListener('message', initHandler);
+          appVersion = Number(e.data.payload.appVersion.replace(/^v/, ''));
+        },
+      );
 
+      // for backward-compatibility
+      if (!appVersion || appVersion < 46) {
+        addEventListener(
+          'message',
+          function configHandler(e: MessageEventInit<{ type: CustomEvents['getConfig'] }>) {
+            if (
+              e.source !== frame.contentWindow ||
+              e.origin !== origin ||
+              e.data?.type !== 'livecodes-get-config'
+            ) {
+              return;
+            }
+            removeEventListener('message', configHandler);
+            frame.contentWindow?.postMessage({ type: 'livecodes-config', payload: config }, origin);
+          },
+        );
+      }
       frame.onload = () => {
         resolve(frame);
       };
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
@@ -2003,6 +2003,7 @@ export type UrlQueryParams = Partial<
     Pick<Screen, 'screen'> & { new: '' } & { [key in Language]: string } & {
       [key in languageSelector]: string;
     } & {
+      sdkVersion: string;
       config: string;
       embed: boolean;
       preview: boolean;
@@ -2029,7 +2030,10 @@ export type UrlQueryParams = Partial<
 >;
 
 export interface CustomEvents {
+  init: 'livecodes-init';
+  /** @deprecated config is sent in hash params */
   getConfig: 'livecodes-get-config';
+  /** @deprecated config is sent in hash params */
   config: 'livecodes-config';
   load: 'livecodes-load';
   appLoaded: 'livecodes-app-loaded';
