fix: provide a proper wrapper for IO with the comp

packages/nuxt/src/components/runtime/client-io-component.ts

@@ -1,34 +1,38 @@
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
+import { defineComponent, h, ref, onMounted, onBeforeUnmount } from 'vue'
-import type { Ref } from 'vue'
+import type { Component, Ref } from "vue"
+import ClientOnly from '#app/components/client-only'
+import { useObserver } from "#app/utils"
 
-export default defineComponent({
+export const createLazyIOClientPage = (componentLoader: Component) => {
-  emits: ['intersect'],
+  return defineComponent({
-  setup (props, { emit }) {
+    inheritAttrs: false,
-    const intersectionTarget: Ref<Element | null> = ref(null)
+    setup (_, { attrs }) {
-    let observer: IntersectionObserver | null = null
+      const isIntersecting = ref(false);
-
+      const el: Ref<Element | null> = ref(null);
-    const intersectionCallback: IntersectionObserverCallback = (entries) => {
+      let unobserve: (() => void) | null = null
-      entries.forEach((entry) => {
+      onMounted(() => {
-        if (entry.isIntersecting) {
+        const observer = useObserver()
-          emit('intersect')
+        unobserve = observer.observe(el.value as Element, () => {
-          observer!.unobserve(entry.target)
+          isIntersecting.value = true
-        }
+          unobserve?.()
+          unobserve = null
+        })
+      });
+      onBeforeUnmount(() => {
+        unobserve?.()
+        unobserve = null
       })
+      return () => h('div', { ref: el }, [
+        h(ClientOnly, undefined, {
+          default: () => {
+            if (isIntersecting.value) {
+              return h(componentLoader, attrs);
+            } else {
+              return null;
+            }
+          }
+        })
+      ]);
     }
-
+  });
-    onMounted(() => {
+};
-      observer = new IntersectionObserver(intersectionCallback)
-      observer.observe(intersectionTarget.value as Element)
-    })
-
-    onUnmounted(() => {
-      if (observer) {
-        observer.disconnect()
-      }
-    })
-
-    return {
-      intersectionTarget
-    }
-  }
-})