From 8f04710047fe2af04421e40d3f57738d0dbc473e Mon Sep 17 00:00:00 2001
From: Sagar-Kap <69609200+Sagar-Kap@users.noreply.github.com>
Date: Fri, 7 Aug 2026 12:59:32 +0300
Subject: [PATCH 1/2] refactor: extract facade activation and iframe registry
 composables

Share the facade-holds-a-live-iframe tracking (useFacadeActivation) and the
per-key iframe bind-once/park/restore lifecycle (useFrameRegistry) across the
three platform carousels. Add a happy-dom unit test covering both composables
and the pure park/restore helpers; vue added as a devDependency so the
composables' Vue imports resolve under vitest.
---
 package.json                                  |   1 +
 src/module.ts                                 |   8 ++
 src/runtime/components/InstagramCarousel.vue  |  40 ++-----
 src/runtime/components/TikTokCarousel.vue     |  65 +++--------
 src/runtime/components/YouTubeCarousel.vue    |  57 ++++------
 .../composables/useFacadeActivation.ts        |  41 +++++++
 src/runtime/composables/useFrameRegistry.ts   |  75 +++++++++++++
 test/embed-state.test.ts                      | 105 ++++++++++++++++++
 8 files changed, 277 insertions(+), 115 deletions(-)
 create mode 100644 src/runtime/composables/useFacadeActivation.ts
 create mode 100644 src/runtime/composables/useFrameRegistry.ts
 create mode 100644 test/embed-state.test.ts

diff --git a/package.json b/package.json
index a975eb3..47def93 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "nuxt": "^4.4.5",
     "typescript": "~6.0.3",
     "vitest": "^4.1.5",
+    "vue": "^3.5.41",
     "vue-tsc": "^3.2.8"
   },
   "publishConfig": {
diff --git a/src/module.ts b/src/module.ts
index 936344c..07e2c4f 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -76,6 +76,14 @@ export default defineNuxtModule<ModuleOptions>({
         name: 'useEmbedMetadata',
         from: resolver.resolve('./runtime/composables/useEmbedMetadata'),
       },
+      {
+        name: 'useFacadeActivation',
+        from: resolver.resolve('./runtime/composables/useFacadeActivation'),
+      },
+      {
+        name: 'useFrameRegistry',
+        from: resolver.resolve('./runtime/composables/useFrameRegistry'),
+      },
     ])
   },
 })
diff --git a/src/runtime/components/InstagramCarousel.vue b/src/runtime/components/InstagramCarousel.vue
index 94388b3..47d1e95 100644
--- a/src/runtime/components/InstagramCarousel.vue
+++ b/src/runtime/components/InstagramCarousel.vue
@@ -71,7 +71,7 @@
       >
         <div class="weburz-instagram-media">
           <iframe
-            :ref="(el: Element | null) => bindIframe(el, index)"
+            :ref="(el: unknown) => bindIframe(el, index)"
             class="weburz-instagram-embed"
             :src="buildEmbedUrl(post.url)"
             :title="post.title ?? `Instagram post ${index + 1}`"
@@ -119,6 +119,7 @@
 import { computed, ref } from 'vue'
 import type { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
 import type { InstagramPost, SlidesPerView } from '../types'
+import { useFrameRegistry } from '../composables/useFrameRegistry'
 import { useScrollAwayHandler } from '../composables/useScrollAwayHandler'
 
 interface Props {
@@ -178,8 +179,8 @@ const props = withDefaults(defineProps<Props>(), {
 const rootEl = ref<HTMLElement | null>(null)
 const activeIndex = ref(0)
 const activePost = computed(() => props.posts[activeIndex.value])
-const iframeEls = new Map<number, HTMLIFrameElement>()
-const boundIframes = new Set<number>()
+
+const { bind: bindIframe, park, restore, parkAll, restoreAll } = useFrameRegistry<number>()
 
 // Instagram's direct embed URL bypasses embed.js entirely — works even when
 // content blockers drop instagram.com/embed.js. We use /embed/captioned/ rather
@@ -200,30 +201,9 @@ const buildEmbedUrl = (url: string): string => {
   }
 }
 
-const bindIframe = (el: Element | null, index: number) => {
-  if (!el || !(el instanceof HTMLIFrameElement)) return
-  iframeEls.set(index, el)
-  if (boundIframes.has(index)) return
-  boundIframes.add(index)
-}
-
-// IG has no postMessage control API, so pause = unload the iframe (src → about:blank).
+// IG has no postMessage control API, so pause = park the iframe (src → about:blank).
 // On scroll-back / swipe-back the original src is restored, which causes a brief
 // reload of the embed. Acceptable trade-off; opt out via prop if it bothers you.
-const unloadIframe = (iframe: HTMLIFrameElement) => {
-  if (iframe.src && iframe.src !== 'about:blank') {
-    iframe.dataset.savedSrc = iframe.src
-    iframe.src = 'about:blank'
-  }
-}
-
-const restoreIframe = (iframe: HTMLIFrameElement) => {
-  const saved = iframe.dataset.savedSrc
-  if (saved && iframe.src === 'about:blank') {
-    iframe.src = saved
-    delete iframe.dataset.savedSrc
-  }
-}
 
 // Embla cancels the click that follows a drag, so dragging across the overlay
 // never accidentally unlocks a post.
@@ -237,20 +217,18 @@ const onSelect = (index: number) => {
   activeIndex.value = index
   unlockedIndex.value = null
   if (!props.pauseOnLeave) return
-  const previous = iframeEls.get(previousIndex)
-  if (previous) unloadIframe(previous)
-  const current = iframeEls.get(index)
-  if (current) restoreIframe(current)
+  park(previousIndex)
+  restore(index)
 }
 
 useScrollAwayHandler(
   rootEl,
   () => {
     if (props.onScrollAway !== 'pause') return
-    iframeEls.forEach(unloadIframe)
+    parkAll()
   },
   () => {
-    iframeEls.forEach(restoreIframe)
+    restoreAll()
   },
 )
 </script>
diff --git a/src/runtime/components/TikTokCarousel.vue b/src/runtime/components/TikTokCarousel.vue
index 5c8903d..b16ca13 100644
--- a/src/runtime/components/TikTokCarousel.vue
+++ b/src/runtime/components/TikTokCarousel.vue
@@ -107,7 +107,7 @@
         </button>
         <iframe
           v-else
-          :ref="(el: Element | null) => bindIframe(el, index)"
+          :ref="(el: unknown) => bindIframe(el, index)"
           class="weburz-tiktok-embed"
           :src="buildEmbedUrl(video.url)"
           :title="captionTitle(video) ?? `TikTok video ${index + 1}`"
@@ -148,6 +148,8 @@ import { computed, onMounted, ref } from 'vue'
 import type { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
 import type { SlidesPerView, TikTokCarouselMode, TikTokVideo } from '../types'
 import { useEmbedMetadata } from '../composables/useEmbedMetadata'
+import { useFacadeActivation } from '../composables/useFacadeActivation'
+import { useFrameRegistry } from '../composables/useFrameRegistry'
 import { useScrollAwayHandler } from '../composables/useScrollAwayHandler'
 
 interface Props {
@@ -230,8 +232,9 @@ onMounted(() => {
 const rootEl = ref<HTMLElement | null>(null)
 const activeIndex = ref(0)
 const activeVideo = computed(() => props.videos[activeIndex.value])
-const iframeEls = new Map<number, HTMLIFrameElement>()
-const boundIframes = new Set<number>()
+
+const { activated, isActivated, activate, deactivate } = useFacadeActivation<number>()
+const { bind: bindIframe, remove: removeIframe, park, restore, parkAll, restoreAll } = useFrameRegistry<number>()
 
 const extractTikTokId = (url: string): string => {
   const match = url.match(/\/video\/(\d+)/)
@@ -243,47 +246,13 @@ const buildEmbedUrl = (url: string): string => {
   return `https://www.tiktok.com/embed/v2/${id}`
 }
 
-const bindIframe = (el: Element | null, index: number) => {
-  if (!el || !(el instanceof HTMLIFrameElement)) return
-  iframeEls.set(index, el)
-  if (boundIframes.has(index)) return
-  boundIframes.add(index)
-}
-
 // Facade activation: the thumbnail button swaps for the live iframe (which
 // autoplays — TikTok's /embed/v2/ starts on load). Deactivating destroys the
 // iframe, hard-stopping playback, and brings the thumbnail back.
-const activatedIndexes = ref(new Set<number>())
-const isActivated = (index: number) => activatedIndexes.value.has(index)
-
-const activate = (index: number) => {
-  const next = new Set(activatedIndexes.value)
-  next.add(index)
-  activatedIndexes.value = next
-}
-
-const deactivate = (index: number) => {
-  if (!activatedIndexes.value.has(index)) return
-  const next = new Set(activatedIndexes.value)
-  next.delete(index)
-  activatedIndexes.value = next
-  iframeEls.delete(index)
-  boundIframes.delete(index)
-}
-
-const unloadIframe = (iframe: HTMLIFrameElement) => {
-  if (iframe.src && iframe.src !== 'about:blank') {
-    iframe.dataset.savedSrc = iframe.src
-    iframe.src = 'about:blank'
-  }
-}
-
-const restoreIframe = (iframe: HTMLIFrameElement) => {
-  const saved = iframe.dataset.savedSrc
-  if (saved && iframe.src === 'about:blank') {
-    iframe.src = saved
-    delete iframe.dataset.savedSrc
-  }
+const deactivateFacade = (index: number) => {
+  if (!isActivated(index)) return
+  deactivate(index)
+  removeIframe(index)
 }
 
 const onSelect = (index: number) => {
@@ -291,13 +260,11 @@ const onSelect = (index: number) => {
   activeIndex.value = index
   if (!props.pauseOnLeave) return
   if (props.mode === 'facade') {
-    deactivate(previousIndex)
+    deactivateFacade(previousIndex)
     return
   }
-  const previous = iframeEls.get(previousIndex)
-  if (previous) unloadIframe(previous)
-  const current = iframeEls.get(index)
-  if (current) restoreIframe(current)
+  park(previousIndex)
+  restore(index)
 }
 
 useScrollAwayHandler(
@@ -307,14 +274,14 @@ useScrollAwayHandler(
     if (props.mode === 'facade') {
       // Destroy rather than about:blank-park: the facade is the natural
       // stopped state, and it stays swipeable when the user scrolls back.
-      for (const index of [...activatedIndexes.value]) deactivate(index)
+      for (const index of [...activated.value]) deactivateFacade(index)
       return
     }
-    iframeEls.forEach(unloadIframe)
+    parkAll()
   },
   () => {
     if (props.mode === 'facade') return
-    iframeEls.forEach(restoreIframe)
+    restoreAll()
   },
 )
 </script>
diff --git a/src/runtime/components/YouTubeCarousel.vue b/src/runtime/components/YouTubeCarousel.vue
index 591e506..cd96080 100644
--- a/src/runtime/components/YouTubeCarousel.vue
+++ b/src/runtime/components/YouTubeCarousel.vue
@@ -106,7 +106,7 @@
           </button>
           <iframe
             v-else-if="mode === 'iframe-embed' || mode === 'facade'"
-            :ref="(el: Element | null) => bindIframe(el, video)"
+            :ref="(el: unknown) => bindIframe(el, video.id, (frame) => sendListening(frame, video.id))"
             :src="buildEmbedUrl(video)"
             :title="captionTitle(video) ?? `YouTube ${video.kind ?? 'video'} ${video.id}`"
             loading="lazy"
@@ -116,7 +116,7 @@
           />
           <div
             v-else
-            :ref="(el: Element | null) => bindPlayer(el as HTMLElement | null, video)"
+            :ref="(el: unknown) => bindPlayer(el as HTMLElement | null, video)"
             class="weburz-yt__player"
             :data-video-id="video.id"
           />
@@ -152,6 +152,8 @@ import { computed, onMounted, ref } from 'vue'
 import type { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
 import type { SlidesPerView, YouTubeCarouselMode, YouTubeVideo } from '../types'
 import { useEmbedMetadata } from '../composables/useEmbedMetadata'
+import { useFacadeActivation } from '../composables/useFacadeActivation'
+import { useFrameRegistry } from '../composables/useFrameRegistry'
 import { useScrollAwayHandler } from '../composables/useScrollAwayHandler'
 import { useYouTubePlayer } from '../composables/useYouTubePlayer'
 
@@ -239,22 +241,13 @@ const onThumbError = (video: YouTubeVideo) => {
 // Activated facade slides have swapped their thumbnail for a live iframe.
 // Deactivating destroys the iframe (hard-stops playback) and brings the
 // facade back.
-const activatedIds = ref(new Set<string>())
-const isActivated = (id: string) => activatedIds.value.has(id)
+const { isActivated, activate, deactivate } = useFacadeActivation<string>()
+const { bind: bindIframe, get: getIframe, remove: removeIframe } = useFrameRegistry<string>()
 
-const activate = (id: string) => {
-  const next = new Set(activatedIds.value)
-  next.add(id)
-  activatedIds.value = next
-}
-
-const deactivate = (id: string) => {
-  if (!activatedIds.value.has(id)) return
-  const next = new Set(activatedIds.value)
-  next.delete(id)
-  activatedIds.value = next
-  iframeEls.delete(id)
-  registeredIframes.delete(id)
+const deactivateFacade = (id: string) => {
+  if (!isActivated(id)) return
+  deactivate(id)
+  removeIframe(id)
 }
 
 const { forYouTube } = useEmbedMetadata()
@@ -283,9 +276,7 @@ const rootEl = ref<HTMLElement | null>(null)
 const activeIndex = ref(0)
 const activeVideo = computed(() => props.videos[activeIndex.value])
 const playerEls = new Map<string, HTMLElement>()
-const iframeEls = new Map<string, HTMLIFrameElement>()
 const registeredPlayers = new Set<string>()
-const registeredIframes = new Set<string>()
 
 const { register, pause, play, mute, unmute } = useYouTubePlayer()
 
@@ -303,25 +294,21 @@ const bindPlayer = (el: HTMLElement | null, video: YouTubeVideo) => {
   }
 }
 
-const bindIframe = (el: Element | null, video: YouTubeVideo) => {
-  if (!el || !(el instanceof HTMLIFrameElement)) return
-  iframeEls.set(video.id, el)
-  if (registeredIframes.has(video.id)) return
-  registeredIframes.add(video.id)
-  // YouTube only reliably accepts postMessage commands once the parent has
-  // sent a "listening" handshake. Without this, mute/pause work intermittently.
-  const sendListening = () => {
+// YouTube only reliably accepts postMessage commands once the parent has sent a
+// "listening" handshake. Without this, mute/pause work intermittently.
+const sendListening = (el: HTMLIFrameElement, id: string) => {
+  const handshake = () => {
     el.contentWindow?.postMessage(
       JSON.stringify({
         event: 'listening',
-        id: `weburz-${video.id}`,
+        id: `weburz-${id}`,
         channel: 'widget',
       }),
       '*',
     )
   }
-  el.addEventListener('load', sendListening, { once: true })
-  sendListening()
+  el.addEventListener('load', handshake, { once: true })
+  handshake()
 }
 
 const postIframeCommand = (iframe: HTMLIFrameElement, func: string) => {
@@ -338,7 +325,7 @@ const unmuteIframe = (iframe: HTMLIFrameElement) => postIframeCommand(iframe, 'u
 
 const playByVideo = (video: YouTubeVideo) => {
   if (props.mode !== 'player-api') {
-    const iframe = iframeEls.get(video.id)
+    const iframe = getIframe(video.id)
     if (iframe) playIframe(iframe)
     return
   }
@@ -348,7 +335,7 @@ const playByVideo = (video: YouTubeVideo) => {
 
 const pauseByVideo = (video: YouTubeVideo) => {
   if (props.mode !== 'player-api') {
-    const iframe = iframeEls.get(video.id)
+    const iframe = getIframe(video.id)
     if (iframe) pauseIframe(iframe)
     return
   }
@@ -358,7 +345,7 @@ const pauseByVideo = (video: YouTubeVideo) => {
 
 const muteByVideo = (video: YouTubeVideo) => {
   if (props.mode !== 'player-api') {
-    const iframe = iframeEls.get(video.id)
+    const iframe = getIframe(video.id)
     if (iframe) muteIframe(iframe)
     return
   }
@@ -368,7 +355,7 @@ const muteByVideo = (video: YouTubeVideo) => {
 
 const unmuteByVideo = (video: YouTubeVideo) => {
   if (props.mode !== 'player-api') {
-    const iframe = iframeEls.get(video.id)
+    const iframe = getIframe(video.id)
     if (iframe) unmuteIframe(iframe)
     return
   }
@@ -384,7 +371,7 @@ const onSelect = (index: number) => {
   if (!previousVideo) return
   // Facade slides revert to the thumbnail on leave: destroying the iframe is
   // the only hard stop, and the facade is the natural "stopped" state.
-  if (props.mode === 'facade') deactivate(previousVideo.id)
+  if (props.mode === 'facade') deactivateFacade(previousVideo.id)
   else pauseByVideo(previousVideo)
 }
 
diff --git a/src/runtime/composables/useFacadeActivation.ts b/src/runtime/composables/useFacadeActivation.ts
new file mode 100644
index 0000000..165aa0c
--- /dev/null
+++ b/src/runtime/composables/useFacadeActivation.ts
@@ -0,0 +1,41 @@
+import { shallowRef } from 'vue'
+
+/**
+ * Tracks which facade slides have been swapped for a live iframe. Keyed by a
+ * primitive (`string` for YouTube video ids, `number` for TikTok slide
+ * indexes) so every embed type shares one activation model.
+ *
+ * The Set is replaced on every change rather than mutated, so Vue tracks the
+ * update and re-renders the facade↔iframe swap. A shallow ref fits: the value
+ * is never mutated in place.
+ */
+export const useFacadeActivation = <Key extends string | number>() => {
+  const activated = shallowRef(new Set<Key>())
+
+  const isActivated = (key: Key) => activated.value.has(key)
+
+  const activate = (key: Key) => {
+    const next = new Set<Key>(activated.value)
+    next.add(key)
+    activated.value = next
+  }
+
+  const deactivate = (key: Key) => {
+    if (!activated.value.has(key)) return
+    const next = new Set<Key>(activated.value)
+    next.delete(key)
+    activated.value = next
+  }
+
+  const deactivateAll = () => {
+    activated.value = new Set<Key>()
+  }
+
+  return {
+    activated,
+    isActivated,
+    activate,
+    deactivate,
+    deactivateAll,
+  }
+}
diff --git a/src/runtime/composables/useFrameRegistry.ts b/src/runtime/composables/useFrameRegistry.ts
new file mode 100644
index 0000000..eca3aa1
--- /dev/null
+++ b/src/runtime/composables/useFrameRegistry.ts
@@ -0,0 +1,75 @@
+interface FrameLike {
+  src: string
+  dataset: Record<string, string | undefined>
+}
+
+const BLANK_SRC = 'about:blank'
+
+const isFrame = (el: unknown): el is HTMLIFrameElement =>
+  el instanceof HTMLIFrameElement
+
+/**
+ * Parks an iframe at about:blank without losing its original src, so playback
+ * halts but the embed can be restored without re-navigating from scratch.
+ */
+export const parkFrame = (frame: FrameLike) => {
+  if (!frame.src || frame.src === BLANK_SRC) return
+  frame.dataset.savedSrc = frame.src
+  frame.src = BLANK_SRC
+}
+
+/** Restores an iframe parked by {@link parkFrame} to its saved src. */
+export const restoreFrame = (frame: FrameLike) => {
+  const savedSrc = frame.dataset.savedSrc
+  if (!savedSrc) return
+  frame.src = savedSrc
+  delete frame.dataset.savedSrc
+}
+
+/**
+ * Registry of iframe elements bound per key, with single-bind guarantees and
+ * park/restore helpers. Shared by the TikTok and Instagram carousels, where
+ * the embeds expose no postMessage control API — halting playback means
+ * parking the iframe.
+ *
+ * The Map is plain (not reactive) — callers read live elements from template
+ * refs or event handlers, never render from it.
+ */
+export const useFrameRegistry = <Key extends string | number>() => {
+  const frames = new Map<Key, HTMLIFrameElement>()
+  const bound = new Set<Key>()
+
+  const bind = (
+    el: unknown,
+    key: Key,
+    onFirstBind?: (el: HTMLIFrameElement) => void,
+  ) => {
+    if (!isFrame(el)) return
+    frames.set(key, el)
+    if (bound.has(key)) return
+    bound.add(key)
+    onFirstBind?.(el)
+  }
+
+  const get = (key: Key) => frames.get(key)
+
+  const remove = (key: Key) => {
+    frames.delete(key)
+    bound.delete(key)
+  }
+
+  const park = (key: Key) => {
+    const frame = frames.get(key)
+    if (frame) parkFrame(frame)
+  }
+
+  const restore = (key: Key) => {
+    const frame = frames.get(key)
+    if (frame) restoreFrame(frame)
+  }
+
+  const parkAll = () => frames.forEach(parkFrame)
+  const restoreAll = () => frames.forEach(restoreFrame)
+
+  return { bind, get, remove, park, restore, parkAll, restoreAll }
+}
diff --git a/test/embed-state.test.ts b/test/embed-state.test.ts
new file mode 100644
index 0000000..e15ae24
--- /dev/null
+++ b/test/embed-state.test.ts
@@ -0,0 +1,105 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { useFacadeActivation } from '../src/runtime/composables/useFacadeActivation'
+import { parkFrame, restoreFrame, useFrameRegistry } from '../src/runtime/composables/useFrameRegistry'
+
+describe('useFacadeActivation', () => {
+  it('starts empty', () => {
+    const { activated } = useFacadeActivation<string>()
+    expect(activated.value.size).toBe(0)
+  })
+
+  it('activates a key', () => {
+    const { isActivated, activate } = useFacadeActivation<string>()
+    expect(isActivated('a')).toBe(false)
+    activate('a')
+    expect(isActivated('a')).toBe(true)
+  })
+
+  it('deactivates a key', () => {
+    const { isActivated, activate, deactivate } = useFacadeActivation<string>()
+    activate('a')
+    deactivate('a')
+    expect(isActivated('a')).toBe(false)
+  })
+
+  it('deactivate of an inactive key is a no-op', () => {
+    const { deactivate, activated } = useFacadeActivation<string>()
+    deactivate('missing')
+    expect(activated.value.size).toBe(0)
+  })
+
+  it('keeps other keys active when one is deactivated', () => {
+    const { isActivated, activate, deactivate } = useFacadeActivation<string>()
+    activate('a')
+    activate('b')
+    deactivate('a')
+    expect(isActivated('b')).toBe(true)
+  })
+
+  it('replaces the Set so Vue sees the change', () => {
+    const { activate, activated } = useFacadeActivation<string>()
+    activate('a')
+    const first = activated.value
+    activate('b')
+    expect(activated.value).not.toBe(first)
+    expect(activated.value.size).toBe(2)
+  })
+})
+
+describe('parkFrame / restoreFrame', () => {
+  const makeFrame = () => ({
+    src: 'https://example.com/embed',
+    dataset: {} as Record<string, string>,
+  })
+
+  it('parks a frame to about:blank and saves its src', () => {
+    const frame = makeFrame()
+    parkFrame(frame)
+    expect(frame.src).toBe('about:blank')
+    expect(frame.dataset.savedSrc).toBe('https://example.com/embed')
+  })
+
+  it('does not park an already-blank frame', () => {
+    const frame = { src: 'about:blank', dataset: {} as Record<string, string> }
+    parkFrame(frame)
+    expect(frame.dataset.savedSrc).toBeUndefined()
+  })
+
+  it('restores the saved src and clears the marker', () => {
+    const frame = makeFrame()
+    parkFrame(frame)
+    restoreFrame(frame)
+    expect(frame.src).toBe('https://example.com/embed')
+    expect(frame.dataset.savedSrc).toBeUndefined()
+  })
+})
+
+describe('useFrameRegistry bind', () => {
+  const makeFrame = () => document.createElement('iframe')
+
+  it('stores the frame on first bind', () => {
+    const { bind, get } = useFrameRegistry<number>()
+    const frame = makeFrame()
+    bind(frame, 1)
+    expect(get(1)).toBe(frame)
+  })
+
+  it('runs onFirstBind only once', () => {
+    const { bind } = useFrameRegistry<number>()
+    const frame = makeFrame()
+    let calls = 0
+    const onFirstBind = () => {
+      calls += 1
+    }
+    bind(frame, 1, onFirstBind)
+    bind(frame, 1, onFirstBind)
+    expect(calls).toBe(1)
+  })
+
+  it('ignores null elements', () => {
+    const { bind, get } = useFrameRegistry<number>()
+    bind(null, 1)
+    expect(get(1)).toBeUndefined()
+  })
+})

From ddfbbe2423346b8a7a29f3390e8a9050f5551c01 Mon Sep 17 00:00:00 2001
From: Sagar-Kap <69609200+Sagar-Kap@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:13:00 +0300
Subject: [PATCH 2/2] chore: re-add vue devDependency resolution to lockfile
 after rebase

---
 pnpm-lock.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f610f0..3b6fc80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,9 @@ importers:
       vitest:
         specifier: ^4.1.5
         version: 4.1.10(@types/node@26.1.2)(happy-dom@20.11.1)(vite@8.2.0(@types/node@26.1.2)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.49.2)(yaml@2.9.0))
+      vue:
+        specifier: ^3.5.41
+        version: 3.5.41(typescript@6.0.3)
       vue-tsc:
         specifier: ^3.2.8
         version: 3.3.9(typescript@6.0.3)