@skyservice-developers/vue-dev-kit 1.2.9 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyservice-developers/vue-dev-kit",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "Vue 2 and Vue 3 developer toolkit - components and helpers",
   "type": "module",
   "main": "./dist/vue3/vue-dev-kit.cjs",

package/src/shared/utils/index.js

@@ -1 +1,2 @@
 export { webviewCheck, isIosWebview, isAndroidWebview, isCefWebview, isWebview, isInIframe } from './webviewCheck'
+export { getParentLocalStorage, getParentStoreValue, getParentWindowValue, sendToParent, setSenderId, getSenderId } from './parentBridge'

package/src/shared/utils/parentBridge.js

@@ -2,11 +2,36 @@ import { isInIframe } from './webviewCheck'
 
 const TIMEOUT = 3000
 let counter = 0
+let _senderId = null
 
 function generateRequestId() {
   return `req_${++counter}_${Date.now()}`
 }
 
+function generateAppId() {
+  return 'APP_' + Math.random().toString(36).slice(2, 10)
+}
+
+export function setSenderId(id) {
+  _senderId = id
+}
+
+export function getSenderId() {
+  if (!_senderId) {
+    _senderId = generateAppId()
+  }
+  return _senderId
+}
+
+export function sendToParent(message) {
+  if (!isInIframe()) return
+  window.parent.postMessage({
+    ...message,
+    sender: getSenderId(),
+    target: message.target || 'DASHBOARD',
+  }, '*')
+}
+
 function requestFromParent(source, key) {
   if (!isInIframe()) return Promise.resolve(null)
 
@@ -19,22 +44,26 @@ function requestFromParent(source, key) {
     }, TIMEOUT)
 
     function handler(event) {
+      const d = event.data
       if (
-        event.data?.type === 'DATA_RESPONSE' &&
-        event.data?.requestId === requestId
+        d?.type === 'DATA_RESPONSE' &&
+        d?.requestId === requestId &&
+        (!d.target || d.target === getSenderId())
       ) {
         clearTimeout(timeout)
         window.removeEventListener('message', handler)
-        resolve(event.data.data ?? null)
+        resolve(d.data ?? null)
       }
     }
 
     window.addEventListener('message', handler)
 
-    window.parent.postMessage(
-      { type: 'DATA_REQUEST', requestId, source, key },
-      '*',
-    )
+    sendToParent({
+      type: 'DATA_REQUEST',
+      requestId,
+      source,
+      key,
+    })
   })
 }
 

package/src/vue3/components/Header.vue

@@ -80,7 +80,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { isInIframe } from '../../shared/utils/webviewCheck'
-import { getParentLocalStorage, getParentWindowValue } from '../../shared/utils/parentBridge'
+import { getParentLocalStorage, getParentWindowValue, sendToParent, setSenderId, getSenderId } from '../../shared/utils/parentBridge'
 
 const props = defineProps({
   title: {
@@ -123,8 +123,15 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  appId: {
+    type: String,
+    default: "",
+  },
 });
 
+// Initialize sender ID from prop or generate
+setSenderId(props.appId || getSenderId())
+
 const emit = defineEmits(['back', 'navigate'])
 
 const dropdownRef = ref(null)
@@ -135,16 +142,16 @@ const parentLang = ref({})
 
 // Track page visit in parent's componentStats
 if (isInIframe() && props.trackPageName) {
-  window.parent.postMessage({
+  sendToParent({
     type: 'trackVisit',
     name: props.trackPageName,
     path: props.trackPagePath || `/${props.trackPageName}`,
-  }, '*')
+  })
 }
 
 // Set rocketMode in parent
 if (isInIframe()) {
-  window.parent.postMessage({ type: 'setRocketMode', value: true }, '*')
+  sendToParent({ type: 'setRocketMode', value: true })
 }
 
 // Load translations from parent
@@ -197,7 +204,7 @@ const closeDropdown = () => {
 const selectItem = (item) => {
   emit('navigate', item.path)
   if (isInIframe()) {
-    window.parent.postMessage({ type: 'navigate', path: item.path }, '*')
+    sendToParent({ type: 'navigate', path: item.path })
   }
   closeDropdown()
 }
@@ -245,7 +252,7 @@ const shouldShowBackButton = computed(() => {
 const handleBack = () => {
   if (props.backEvent) return props.backEvent()
 
-  window.parent.postMessage({ type: 'exit' }, '*')
+  sendToParent({ type: 'exit' })
 }
 </script>