From 63f7983d0a30bc4804ee527e52e68072ef3bf1aa Mon Sep 17 00:00:00 2001
From: Freddy <freddyescobar@hotmail.fr>
Date: Mon, 18 Jul 2022 13:14:19 +0200
Subject: [PATCH] feat(import-wrappers): supports asynchronous loading of
 wrapped component

---
 .eslintrc.cjs                                 |   3 +
 .../import-wrappers/HydrateNeverDemo.vue      |   6 +-
 .../HydrateOnInteractionDemo.vue              |   6 +-
 .../import-wrappers/HydrateWhenIdleDemo.vue   |   6 +-
 .../HydrateWhenTriggeredDemo.vue              |   4 +-
 .../HydrateWhenVisibleDemo.vue                |   6 +-
 src/components/LazyHydrationWrapper.js        | 118 +++++-----
 .../useHydrateOnInteraction.spec.js           |  10 +-
 src/composables/useHydrateWhenIdle.spec.js    |  10 +-
 .../useHydrateWhenTriggered.spec.js           |   6 +-
 src/composables/useHydrateWhenVisible.spec.js |  11 +-
 src/composables/useLazyHydration.spec.js      |  16 +-
 src/utils/create-hydration-wrapper.js         | 148 ++++++++++--
 src/utils/create-hydration-wrapper.spec.js    | 216 ++++++++++++++++++
 src/utils/helpers.js                          |   2 +
 src/utils/index.js                            |   2 +
 src/utils/traverse-children.js                |   5 +-
 src/utils/traverse-children.spec.js           |   6 +-
 src/wrappers/hydrate-never.js                 |   5 +-
 src/wrappers/hydrate-never.spec.js            |  68 ++++++
 src/wrappers/hydrate-on-interaction.js        |   8 +-
 src/wrappers/hydrate-on-interaction.spec.js   |  74 ++++++
 src/wrappers/hydrate-when-idle.js             |   8 +-
 src/wrappers/hydrate-when-idle.spec.js        |  85 +++++++
 src/wrappers/hydrate-when-triggered.js        |  10 +-
 src/wrappers/hydrate-when-triggered.spec.js   |  81 +++++++
 src/wrappers/hydrate-when-visible.js          |   8 +-
 src/wrappers/hydrate-when-visible.spec.js     |  91 ++++++++
 test/utils.js                                 |  10 +-
 vite.config.js                                |   9 +-
 30 files changed, 889 insertions(+), 149 deletions(-)
 create mode 100644 src/utils/create-hydration-wrapper.spec.js
 create mode 100644 src/utils/helpers.js
 create mode 100644 src/wrappers/hydrate-never.spec.js
 create mode 100644 src/wrappers/hydrate-on-interaction.spec.js
 create mode 100644 src/wrappers/hydrate-when-idle.spec.js
 create mode 100644 src/wrappers/hydrate-when-triggered.spec.js
 create mode 100644 src/wrappers/hydrate-when-visible.spec.js

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index ae334ae..0ee4c14 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -11,6 +11,9 @@ module.exports = {
     node: true,
     'vue/setup-compiler-macros': true,
   },
+  globals: {
+    __DEV__: 'readonly',
+  },
   rules: {
     'prettier/prettier': 'error',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
diff --git a/demo/views/import-wrappers/HydrateNeverDemo.vue b/demo/views/import-wrappers/HydrateNeverDemo.vue
index 8ded7e0..aa93b9b 100644
--- a/demo/views/import-wrappers/HydrateNeverDemo.vue
+++ b/demo/views/import-wrappers/HydrateNeverDemo.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { ref, defineAsyncComponent } from 'vue';
+import { ref } from 'vue';
 import HydrationState from '../../components/HydrationState.vue';
 
 import { hydrateNever } from '../../../src';
 
-const CounterComp = hydrateNever(
-  defineAsyncComponent(() => import('../../components/CounterComp.vue'))
+const CounterComp = hydrateNever(() =>
+  import('../../components/CounterComp.vue')
 );
 
 const isHydrated = ref(false);
diff --git a/demo/views/import-wrappers/HydrateOnInteractionDemo.vue b/demo/views/import-wrappers/HydrateOnInteractionDemo.vue
index d1906c2..3d44a68 100644
--- a/demo/views/import-wrappers/HydrateOnInteractionDemo.vue
+++ b/demo/views/import-wrappers/HydrateOnInteractionDemo.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { ref, defineAsyncComponent } from 'vue';
+import { ref } from 'vue';
 import HydrationState from '../../components/HydrationState.vue';
 
 import { hydrateOnInteraction } from '../../../src';
 
-const InputComp = hydrateOnInteraction(
-  defineAsyncComponent(() => import('../../components/InputComp.vue'))
+const InputComp = hydrateOnInteraction(() =>
+  import('../../components/InputComp.vue')
 );
 
 const isHydrated = ref(false);
diff --git a/demo/views/import-wrappers/HydrateWhenIdleDemo.vue b/demo/views/import-wrappers/HydrateWhenIdleDemo.vue
index a3323d3..5d5e1a7 100644
--- a/demo/views/import-wrappers/HydrateWhenIdleDemo.vue
+++ b/demo/views/import-wrappers/HydrateWhenIdleDemo.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { ref, defineAsyncComponent } from 'vue';
+import { ref } from 'vue';
 import HydrationState from '../../components/HydrationState.vue';
 
 import { hydrateWhenIdle } from '../../../src';
 
-const CounterComp = hydrateWhenIdle(
-  defineAsyncComponent(() => import('../../components/CounterComp.vue'))
+const CounterComp = hydrateWhenIdle(() =>
+  import('../../components/CounterComp.vue')
 );
 
 const isHydrated = ref(false);
diff --git a/demo/views/import-wrappers/HydrateWhenTriggeredDemo.vue b/demo/views/import-wrappers/HydrateWhenTriggeredDemo.vue
index cac28d6..7a84cdb 100644
--- a/demo/views/import-wrappers/HydrateWhenTriggeredDemo.vue
+++ b/demo/views/import-wrappers/HydrateWhenTriggeredDemo.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, defineAsyncComponent } from 'vue';
+import { ref } from 'vue';
 import HydrationState from '../../components/HydrationState.vue';
 
 import { hydrateWhenTriggered } from '../../../src';
@@ -17,7 +17,7 @@ function onHydrated() {
 }
 
 const CounterComp = hydrateWhenTriggered(
-  defineAsyncComponent(() => import('../../components/CounterComp.vue')),
+  () => import('../../components/CounterComp.vue'),
   triggered
 );
 </script>
diff --git a/demo/views/import-wrappers/HydrateWhenVisibleDemo.vue b/demo/views/import-wrappers/HydrateWhenVisibleDemo.vue
index 27b3fe9..8275d27 100644
--- a/demo/views/import-wrappers/HydrateWhenVisibleDemo.vue
+++ b/demo/views/import-wrappers/HydrateWhenVisibleDemo.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { ref, defineAsyncComponent } from 'vue';
+import { ref } from 'vue';
 import HydrationState from '../../components/HydrationState.vue';
 
 import { hydrateWhenVisible } from '../../../src';
 
-const CounterComp = hydrateWhenVisible(
-  defineAsyncComponent(() => import('../../components/CounterComp.vue'))
+const CounterComp = hydrateWhenVisible(() =>
+  import('../../components/CounterComp.vue')
 );
 
 const isHydrated = ref(false);
diff --git a/src/components/LazyHydrationWrapper.js b/src/components/LazyHydrationWrapper.js
index 331bacb..5df39d7 100644
--- a/src/components/LazyHydrationWrapper.js
+++ b/src/components/LazyHydrationWrapper.js
@@ -1,4 +1,4 @@
-import { computed, toRef } from 'vue';
+import { computed, defineComponent, markRaw, toRef } from 'vue';
 
 import {
   useLazyHydration,
@@ -8,71 +8,77 @@ import {
   useHydrateWhenTriggered,
 } from '../composables';
 
-import { createHydrationWrapper } from '../utils';
-
-const opts = {
-  props: {
-    whenIdle: {
-      default: false,
-      type: [Boolean, Number],
-    },
-    whenVisible: {
-      default: false,
-      type: [Boolean, Object],
-    },
-    onInteraction: {
-      default: false,
-      type: [Array, Boolean, String],
-    },
-    whenTriggered: {
-      default: undefined,
-      type: [Boolean, Object],
-    },
-  },
+const normalizeSlot = (slotContent) => {
+  return slotContent.length === 1 ? slotContent[0] : slotContent;
 };
 
-export default createHydrationWrapper(
-  null,
-  (props) => {
-    const result = useLazyHydration();
+export default markRaw(
+  defineComponent({
+    name: 'LazyHydrationWrapper',
+    inheritAttrs: false,
+    suspensible: false,
+    props: {
+      whenIdle: {
+        default: false,
+        type: [Boolean, Number],
+      },
+      whenVisible: {
+        default: false,
+        type: [Boolean, Object],
+      },
+      onInteraction: {
+        default: false,
+        type: [Array, Boolean, String],
+      },
+      whenTriggered: {
+        default: undefined,
+        type: [Boolean, Object],
+      },
+    },
+    emits: ['hydrated'],
 
-    if (!result.willPerformHydration) {
-      return result;
-    }
+    setup(props, { slots, emit }) {
+      const result = useLazyHydration();
 
-    if (props.whenIdle) {
-      useHydrateWhenIdle(
-        result,
-        props.whenIdle !== true ? props.whenIdle : undefined
-      );
-    }
+      if (!result.willPerformHydration) {
+        return () => normalizeSlot(slots.default());
+      }
 
-    if (props.whenVisible) {
-      useHydrateWhenVisible(
-        result,
-        props.whenVisible !== true ? props.whenVisible : undefined
-      );
-    }
+      result.onHydrated(() => emit('hydrated'));
 
-    if (props.onInteraction) {
-      let events;
+      if (props.whenIdle) {
+        useHydrateWhenIdle(
+          result,
+          props.whenIdle !== true ? props.whenIdle : undefined
+        );
+      }
 
-      if (props.onInteraction !== true) {
-        events = computed(() =>
-          Array.isArray(props.onInteraction)
-            ? props.onInteraction
-            : [props.onInteraction]
+      if (props.whenVisible) {
+        useHydrateWhenVisible(
+          result,
+          props.whenVisible !== true ? props.whenVisible : undefined
         );
       }
 
-      useHydrateOnInteraction(result, events);
-    }
+      if (props.onInteraction) {
+        let events;
 
-    if (props.whenTriggered !== undefined) {
-      useHydrateWhenTriggered(result, toRef(props, 'whenTriggered'));
-    }
+        if (props.onInteraction !== true) {
+          events = computed(() =>
+            Array.isArray(props.onInteraction)
+              ? props.onInteraction
+              : [props.onInteraction]
+          );
+        }
+
+        useHydrateOnInteraction(result, events);
+      }
 
-    return result;
-  },
-  opts
+      if (props.whenTriggered !== undefined) {
+        useHydrateWhenTriggered(result, toRef(props, 'whenTriggered'));
+      }
+
+      return () => normalizeSlot(slots.default());
+    },
+  })
 );
diff --git a/src/composables/useHydrateOnInteraction.spec.js b/src/composables/useHydrateOnInteraction.spec.js
index dfd0a43..1d8b45c 100644
--- a/src/composables/useHydrateOnInteraction.spec.js
+++ b/src/composables/useHydrateOnInteraction.spec.js
@@ -2,7 +2,7 @@ import { flushPromises } from '@vue/test-utils';
 import { expect, vi } from 'vitest';
 import { h, ref } from 'vue';
 
-import { withSetup, triggerEvent } from '../../test/utils';
+import { withSSRSetup, triggerEvent } from '../../test/utils';
 
 import useLazyHydration from './useLazyHydration';
 import useHydrateOnInteraction from './useHydrateOnInteraction';
@@ -14,7 +14,7 @@ beforeEach(() => {
 it('should hydrate on interaction with single root element', async () => {
   const spyClick = vi.fn();
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateOnInteraction(result, ['click', 'focus']);
@@ -38,7 +38,7 @@ it('should hydrate on interaction with single root element', async () => {
 it('should hydrate on interaction with multiple root elements', async () => {
   const spyClick = vi.fn();
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateOnInteraction(result, ['click', 'focus']);
@@ -65,7 +65,7 @@ it('should hydrate on interaction with multiple root elements', async () => {
 it('should remove listeners when component has been hydrated', async () => {
   const spyClick = vi.fn();
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateOnInteraction(result, ['focus', 'select']);
@@ -95,7 +95,7 @@ it('should remove listeners when component has been hydrated', async () => {
 it('should remove listeners when component has been unmounted', async () => {
   const show = ref(true);
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const LazyComp = {
       setup() {
         const result = useLazyHydration();
diff --git a/src/composables/useHydrateWhenIdle.spec.js b/src/composables/useHydrateWhenIdle.spec.js
index c8a7cd2..ab9ec4c 100644
--- a/src/composables/useHydrateWhenIdle.spec.js
+++ b/src/composables/useHydrateWhenIdle.spec.js
@@ -3,7 +3,7 @@ import { expect, vi } from 'vitest';
 import { h, ref } from 'vue';
 
 import { ensureMocksReset, requestIdleCallback } from '../../test/dom-mocks';
-import { withSetup, triggerEvent } from '../../test/utils';
+import { withSSRSetup, triggerEvent } from '../../test/utils';
 
 import useLazyHydration from './useLazyHydration';
 import useHydrateWhenIdle from './useHydrateWhenIdle';
@@ -23,7 +23,7 @@ afterEach(() => {
 it('should hydrate when idle', async () => {
   const spyClick = vi.fn();
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateWhenIdle(result);
@@ -47,7 +47,7 @@ it('should hydrate when idle', async () => {
 it('should cancel Idle Callback when component has been hydrated', async () => {
   const spyCancelIdleCallback = vi.spyOn(window, 'cancelIdleCallback');
 
-  await withSetup(() => {
+  await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateWhenIdle(result);
@@ -68,7 +68,7 @@ it('should cancel Idle Callback when component has been unmounted', async () =>
 
   const show = ref(true);
 
-  await withSetup(() => {
+  await withSSRSetup(() => {
     const LazyComp = {
       setup() {
         const result = useLazyHydration();
@@ -96,7 +96,7 @@ it('should hydrate when requestIdleCallback is unsupported', async () => {
 
   const spyClick = vi.fn();
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateWhenIdle(result);
diff --git a/src/composables/useHydrateWhenTriggered.spec.js b/src/composables/useHydrateWhenTriggered.spec.js
index 1e89dc3..76d4f12 100644
--- a/src/composables/useHydrateWhenTriggered.spec.js
+++ b/src/composables/useHydrateWhenTriggered.spec.js
@@ -2,7 +2,7 @@ import { flushPromises } from '@vue/test-utils';
 import { expect, vi } from 'vitest';
 import { h, ref } from 'vue';
 
-import { withSetup, triggerEvent } from '../../test/utils';
+import { withSSRSetup, triggerEvent } from '../../test/utils';
 
 import useLazyHydration from './useLazyHydration';
 import useHydrateWhenTriggered from './useHydrateWhenTriggered';
@@ -15,7 +15,7 @@ it('should hydrate when trigger is true', async () => {
   const spyClick = vi.fn();
   const trigger = ref(false);
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateWhenTriggered(result, trigger);
@@ -42,7 +42,7 @@ it('should unWatch trigger when component has been unmounted', async () => {
 
   let spyHydrate;
 
-  await withSetup((isClient) => {
+  await withSSRSetup((isClient) => {
     const LazyComp = {
       setup() {
         const result = useLazyHydration();
diff --git a/src/composables/useHydrateWhenVisible.spec.js b/src/composables/useHydrateWhenVisible.spec.js
index 1927b84..82eaac0 100644
--- a/src/composables/useHydrateWhenVisible.spec.js
+++ b/src/composables/useHydrateWhenVisible.spec.js
@@ -3,7 +3,8 @@ import { expect, vi } from 'vitest';
 import { h, ref } from 'vue';
 
 import { ensureMocksReset, intersectionObserver } from '../../test/dom-mocks';
-import { withSetup, triggerEvent } from '../../test/utils';
+import { withSSRSetup, triggerEvent } from '../../test/utils';
+
 import { createHydrationObserver } from '../utils';
 
 import useLazyHydration from './useLazyHydration';
@@ -24,7 +25,7 @@ afterEach(() => {
 it('should hydrate when single root element is visible', async () => {
   const spyClick = vi.fn();
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateWhenVisible(result);
@@ -53,7 +54,7 @@ it('should hydrate when single root element is visible', async () => {
 it('should hydrate when one of multiple root elements is visible', async () => {
   const spyClick = vi.fn();
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateWhenVisible(result);
@@ -87,7 +88,7 @@ it('should hydrate when IntersectionObserver API is unsupported', async () => {
 
   const spyClick = vi.fn();
 
-  const { container } = await withSetup(() => {
+  const { container } = await withSSRSetup(() => {
     const result = useLazyHydration();
 
     useHydrateWhenVisible(result);
@@ -108,7 +109,7 @@ it('should unobserve root elements when component has been unmounted', async ()
   const { observer } = createHydrationObserver();
   const spyUnobserve = vi.spyOn(observer, 'unobserve');
 
-  await withSetup(() => {
+  await withSSRSetup(() => {
     const LazyComp = {
       setup() {
         const result = useLazyHydration();
diff --git a/src/composables/useLazyHydration.spec.js b/src/composables/useLazyHydration.spec.js
index 350a40c..7a2ee18 100644
--- a/src/composables/useLazyHydration.spec.js
+++ b/src/composables/useLazyHydration.spec.js
@@ -8,7 +8,7 @@ import {
 } from 'vue';
 import { flushPromises } from '@vue/test-utils';
 
-import { withSetup, triggerEvent } from '../../test/utils';
+import { withSSRSetup, triggerEvent } from '../../test/utils';
 
 import useLazyHydration from './useLazyHydration';
 
@@ -20,7 +20,7 @@ it('should delay hydration', async () => {
 
   const spyClick = vi.fn();
 
-  const { container } = await withSetup((isClient) => {
+  const { container } = await withSSRSetup((isClient) => {
     result[isClient ? 'client' : 'server'] = useLazyHydration();
 
     return () => h('button', { onClick: spyClick }, 'foo');
@@ -52,7 +52,7 @@ it('should run onCleanup hook when component has been unmounted', async () => {
 
   const show = ref(true);
 
-  await withSetup((isClient) => {
+  await withSSRSetup((isClient) => {
     const LazyComp = {
       setup() {
         result[isClient ? 'client' : 'server'] = useLazyHydration();
@@ -86,7 +86,7 @@ it('should not update component if hydration is delayed', async () => {
 
   const color = ref('red');
 
-  const { container } = await withSetup((isClient) => {
+  const { container } = await withSSRSetup((isClient) => {
     const LazyComp = {
       setup() {
         result[isClient ? 'client' : 'server'] = useLazyHydration();
@@ -127,7 +127,7 @@ it('should update props even if hydration is delayed', async () => {
 
   let lazyCompInstance;
 
-  const { container } = await withSetup((isClient) => {
+  const { container } = await withSSRSetup((isClient) => {
     const LazyComp = {
       props: ['foo'],
       setup(props) {
@@ -174,7 +174,7 @@ it('should not break if the parent is a renderless component and has been update
 
   let lazyCompInstance;
 
-  const { container } = await withSetup((isClient) => {
+  const { container } = await withSSRSetup((isClient) => {
     const LazyComp = defineComponent({
       setup() {
         result[isClient ? 'client' : 'server'] = useLazyHydration();
@@ -255,7 +255,7 @@ it('should run onHydrated hook when component has been hydrated', async () => {
   const spyClick = vi.fn();
   const spyOnHydratedHook = vi.fn();
 
-  const { container } = await withSetup((isClient) => {
+  const { container } = await withSSRSetup((isClient) => {
     const LazyComp = {
       setup() {
         result[isClient ? 'client' : 'server'] = useLazyHydration();
@@ -300,7 +300,7 @@ it('should run onHydrated hook when component has been hydrated and its children
   const spyAsyncCompClick = vi.fn();
   const spyOnHydratedHook = vi.fn();
 
-  const { container } = await withSetup((isClient) => {
+  const { container } = await withSSRSetup((isClient) => {
     const LazyComp = {
       setup() {
         result[isClient ? 'client' : 'server'] = useLazyHydration();
diff --git a/src/utils/create-hydration-wrapper.js b/src/utils/create-hydration-wrapper.js
index 9c4ab59..23f5096 100644
--- a/src/utils/create-hydration-wrapper.js
+++ b/src/utils/create-hydration-wrapper.js
@@ -1,34 +1,154 @@
-import { defineComponent, markRaw, getCurrentInstance, h } from 'vue';
+/* eslint-disable no-console */
+/* eslint-disable no-underscore-dangle */
+import {
+  defineComponent,
+  markRaw,
+  getCurrentInstance,
+  ref,
+  createVNode,
+  handleError,
+} from 'vue';
+import { isFunction, isObject } from './helpers';
+import { useLazyHydration } from '../composables';
+
+function createInnerComp(comp, { vnode: { ref: refOwner, props, children } }) {
+  const vnode = createVNode(comp, props, children);
+
+  // ensure inner component inherits the lazy hydrate wrapper's ref owner
+  vnode.ref = refOwner;
+
+  return vnode;
+}
+
+export default function createHydrationWrapper(source, onSetup) {
+  let pendingRequest;
+  let resolvedComp;
+
+  const loader = isFunction(source) ? source : () => Promise.resolve(source);
+
+  const load = () => {
+    let thisRequest;
+
+    if (pendingRequest) {
+      return pendingRequest;
+    }
+
+    // eslint-disable-next-line no-return-assign, no-multi-assign
+    return (thisRequest = pendingRequest =
+      loader()
+        .catch((err) => {
+          throw err instanceof Error ? err : new Error(String(err));
+        })
+        .then((comp) => {
+          if (thisRequest !== pendingRequest && pendingRequest) {
+            return pendingRequest;
+          }
+
+          if (__DEV__ && !comp) {
+            console.warn(
+              `Async lazily hydrated wrapped component loader resolved to undefined.`
+            );
+          }
+
+          // interop module default
+          if (
+            comp &&
+            (comp.__esModule || comp[Symbol.toStringTag] === 'Module')
+          ) {
+            // eslint-disable-next-line no-param-reassign
+            comp = comp.default;
+          }
+
+          if (__DEV__ && comp && !isObject(comp) && !isFunction(comp)) {
+            throw new Error(
+              `Invalid async lazily hydrated wrapped component load result: ${comp}`
+            );
+          }
+
+          resolvedComp = comp;
+
+          return comp;
+        }));
+  };
 
-export default function createHydrationWrapper(component, onSetup, opts = {}) {
   return markRaw(
     defineComponent({
       name: 'LazyHydrationWrapper',
       inheritAttrs: false,
       suspensible: false,
       emits: ['hydrated'],
-      ...opts,
 
-      setup(props, { attrs, slots, emit, expose }) {
-        const { onHydrated } = onSetup(props);
+      get __asyncResolved() {
+        return resolvedComp;
+      },
+
+      setup(_, { emit }) {
+        const instance = getCurrentInstance();
+
+        const onError = (err) => {
+          pendingRequest = null;
 
-        onHydrated(() => emit('hydrated'));
+          handleError(err, instance, 'async component loader');
+        };
+
+        if (typeof window === 'undefined') {
+          // on Server-side
+          return load()
+            .then((comp) => {
+              return () => createInnerComp(comp, instance);
+            })
+            .catch((err) => {
+              onError(err);
+
+              return () => null;
+            });
+        }
 
-        expose({});
+        const loaded = ref(false);
+        const result = useLazyHydration();
+
+        if (!result.willPerformHydration) {
+          // already resolved
+          if (resolvedComp) {
+            return () => createInnerComp(resolvedComp, instance);
+          }
+
+          load()
+            .then(() => {
+              loaded.value = true;
+            })
+            .catch((err) => {
+              onError(err);
+            });
 
-        if (component === null) {
           return () => {
-            const slotContent = slots.default();
+            if (loaded.value && resolvedComp) {
+              return createInnerComp(resolvedComp, instance);
+            }
 
-            return slotContent.length === 1 ? slotContent[0] : slotContent;
+            return null;
           };
         }
 
-        const {
-          vnode: { ref },
-        } = getCurrentInstance();
+        const { hydrate } = result;
+
+        // load component before hydrate
+        result.hydrate = () =>
+          load()
+            .then(() => {
+              loaded.value = true;
+
+              hydrate();
+            })
+            .catch((err) => {
+              onError(err);
+            });
+
+        result.onHydrated(() => emit('hydrated'));
+
+        onSetup(result);
 
-        return () => h(component, { ...attrs, ref }, slots);
+        return () => createInnerComp(resolvedComp, instance);
       },
     })
   );
diff --git a/src/utils/create-hydration-wrapper.spec.js b/src/utils/create-hydration-wrapper.spec.js
new file mode 100644
index 0000000..6834e45
--- /dev/null
+++ b/src/utils/create-hydration-wrapper.spec.js
@@ -0,0 +1,216 @@
+import { h, createApp as createClientApp, ref, nextTick } from 'vue';
+
+import { renderToString } from '@vue/server-renderer';
+import { flushPromises } from '@vue/test-utils';
+
+import { expect } from 'vitest';
+import { createApp, triggerEvent } from '../../test/utils';
+
+import { createHydrationWrapper } from '.';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+it('should handle error at server-side', async () => {
+  const originalWindow = window;
+  const handler = vi.fn();
+  const err = new Error('foo');
+
+  const WrappedComp = createHydrationWrapper(
+    () => Promise.reject(err),
+    () => {}
+  );
+
+  // make sure window is undefined at server-side
+  vi.stubGlobal('window', undefined);
+
+  const app = createApp(() => {
+    return () => h(WrappedComp);
+  });
+
+  app.config.errorHandler = handler;
+
+  await renderToString(app);
+
+  expect(handler).toHaveBeenCalled();
+  expect(handler.mock.calls[0][0]).toBe(err);
+
+  // restore window
+  vi.stubGlobal('window', originalWindow);
+});
+
+it('should handle error at client-side when hydrating', async () => {
+  const handler = vi.fn();
+  const spyClick = vi.fn();
+  const err = new Error('foo');
+
+  let resolve;
+  let reject;
+  let hydrate;
+
+  // pre-rendered html
+  const container = document.createElement('div');
+  container.innerHTML = '<button>foo</button>';
+  document.append(container);
+
+  const WrappedComp = createHydrationWrapper(
+    () =>
+      new Promise((_resolve, _reject) => {
+        resolve = _resolve;
+        reject = _reject;
+      }),
+    (result) => {
+      hydrate = result.hydrate;
+    }
+  );
+
+  const app = createApp(() => {
+    return () => h(WrappedComp);
+  });
+
+  app.config.errorHandler = handler;
+
+  // hydrate application
+  app.mount(container);
+
+  await flushPromises();
+
+  // simulate error when loading component
+  hydrate();
+  reject(err);
+
+  await flushPromises();
+
+  // should not be hydrated yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+  expect(handler).toHaveBeenCalledOnce();
+  expect(handler.mock.calls[0][0]).toBe(err);
+
+  // successfully load component this time
+  hydrate();
+  resolve(() => h('button', { onClick: spyClick }, 'foo'));
+
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+});
+
+it('should handle error at client-side without hydration', async () => {
+  const handler = vi.fn();
+  const err = new Error('foo');
+
+  let resolve;
+  let reject;
+
+  const container = document.createElement('div');
+  document.append(container);
+
+  const WrappedComp = createHydrationWrapper(
+    () =>
+      new Promise((_resolve, _reject) => {
+        resolve = _resolve;
+        reject = _reject;
+      }),
+    () => {}
+  );
+
+  const toggle = ref(true);
+  const app = createClientApp({
+    setup() {
+      return () => (toggle.value ? h(WrappedComp) : null);
+    },
+  });
+
+  app.config.errorHandler = handler;
+
+  app.mount(container);
+
+  await flushPromises();
+  expect(container.innerHTML).toBe('<!---->');
+
+  // simulate error when loading component
+  reject(err);
+  await flushPromises();
+
+  // should not be loaded yet
+  expect(handler).toHaveBeenCalledOnce();
+  expect(handler.mock.calls[0][0]).toBe(err);
+  expect(container.innerHTML).toBe('<!---->');
+
+  toggle.value = false;
+  await nextTick();
+  expect(container.innerHTML).toBe('<!---->');
+
+  // errored out on previous load, toggle and mock success this time
+  toggle.value = true;
+  await nextTick();
+  expect(container.innerHTML).toBe('<!---->');
+
+  // should render this time
+  resolve(() => 'resolved');
+  await flushPromises();
+  expect(container.innerHTML).toBe('resolved');
+});
+
+it('should handle error when load result is invalid', async () => {
+  const originalWindow = window;
+  const handler = vi.fn();
+  const err = new Error(
+    'Invalid async lazily hydrated wrapped component load result: invalid'
+  );
+
+  const WrappedComp = createHydrationWrapper(
+    () => Promise.resolve('invalid'),
+    () => {}
+  );
+
+  // make sure window is undefined at server-side
+  vi.stubGlobal('window', undefined);
+
+  const app = createApp(() => {
+    return () => h(WrappedComp);
+  });
+
+  app.config.errorHandler = handler;
+
+  await renderToString(app);
+
+  expect(handler).toHaveBeenCalled();
+  expect(handler.mock.calls[0][0]).toStrictEqual(err);
+
+  // restore window
+  vi.stubGlobal('window', originalWindow);
+});
+
+it('should warn when component loader resolved to undefined', async () => {
+  const originalWindow = window;
+
+  const WrappedComp = createHydrationWrapper(
+    () => Promise.resolve(),
+    () => {}
+  );
+
+  // make sure window is undefined at server-side
+  vi.stubGlobal('window', undefined);
+
+  const app = createApp(() => {
+    return () => h(WrappedComp);
+  });
+
+  await renderToString(app);
+
+  expect(
+    'Invalid vnode type when creating vnode: undefined.'
+  ).toHaveBeenWarned();
+
+  expect(
+    'Async lazily hydrated wrapped component loader resolved to undefined.'
+  ).toHaveBeenWarned();
+
+  // restore window
+  vi.stubGlobal('window', originalWindow);
+});
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
new file mode 100644
index 0000000..44ec6e8
--- /dev/null
+++ b/src/utils/helpers.js
@@ -0,0 +1,2 @@
+export const isFunction = (val) => typeof val === 'function';
+export const isObject = (val) => val !== null && typeof val === 'object';
diff --git a/src/utils/index.js b/src/utils/index.js
index d43e72b..11a6480 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -6,3 +6,5 @@ export { default as trackDepsOnRender } from './track-deps-on-render';
 export { default as waitForAsyncComponents } from './wait-for-async-components';
 export { default as getRootElements } from './get-root-elements';
 export { default as ensureParentHasSubTreeEl } from './ensure-parent-has-subtree-el';
+export { default as traverseChildren } from './traverse-children';
+export * from './helpers';
diff --git a/src/utils/traverse-children.js b/src/utils/traverse-children.js
index 5f7aca0..260b760 100644
--- a/src/utils/traverse-children.js
+++ b/src/utils/traverse-children.js
@@ -1,4 +1,5 @@
 import { isVNode } from 'vue';
+import { isFunction, isObject } from './helpers';
 
 export default function traverseChildren(vnode, fn) {
   if (!isVNode(vnode)) {
@@ -17,9 +18,9 @@ export default function traverseChildren(vnode, fn) {
     return;
   }
 
-  if (typeof vnode.children === 'object') {
+  if (isObject(vnode.children)) {
     Object.keys(vnode.children).forEach((slotName) => {
-      if (typeof vnode.children[slotName] !== 'function') {
+      if (!isFunction(vnode.children[slotName])) {
         return;
       }
 
diff --git a/src/utils/traverse-children.spec.js b/src/utils/traverse-children.spec.js
index 2752dcd..e7f2cde 100644
--- a/src/utils/traverse-children.spec.js
+++ b/src/utils/traverse-children.spec.js
@@ -1,6 +1,6 @@
 import { getCurrentInstance, h, onMounted } from 'vue';
 
-import { withSetup } from '../../test/utils';
+import { withSSRSetup } from '../../test/utils';
 
 import traverseChildren from './traverse-children';
 
@@ -23,7 +23,7 @@ it('should traverse slots children with single element', async () => {
     },
   };
 
-  await withSetup(() => {
+  await withSSRSetup(() => {
     const instance = getCurrentInstance();
 
     onMounted(() => {
@@ -54,7 +54,7 @@ it('should traverse slots children with multiple elements', async () => {
     },
   };
 
-  await withSetup(() => {
+  await withSSRSetup(() => {
     const instance = getCurrentInstance();
 
     onMounted(() => {
diff --git a/src/wrappers/hydrate-never.js b/src/wrappers/hydrate-never.js
index 64feaf0..0fcf11b 100644
--- a/src/wrappers/hydrate-never.js
+++ b/src/wrappers/hydrate-never.js
@@ -1,6 +1,5 @@
-import { useLazyHydration } from '../composables';
 import { createHydrationWrapper } from '../utils';
 
-export default function hydrateNever(component) {
-  return createHydrationWrapper(component, useLazyHydration);
+export default function hydrateNever(loader) {
+  return createHydrationWrapper(loader, () => {});
 }
diff --git a/src/wrappers/hydrate-never.spec.js b/src/wrappers/hydrate-never.spec.js
new file mode 100644
index 0000000..436ff5e
--- /dev/null
+++ b/src/wrappers/hydrate-never.spec.js
@@ -0,0 +1,68 @@
+import { h, onUpdated } from 'vue';
+import { flushPromises } from '@vue/test-utils';
+
+import { withSSRSetup, triggerEvent } from '../../test/utils';
+
+import { hydrateNever } from '.';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+it('should never hydrate and load the component', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+
+  const WrappedComp = hydrateNever({
+    setup() {
+      onUpdated(spyUpdated);
+
+      return () => h('button', { onClick: spyClick }, 'foo');
+    },
+  });
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // should not be hydrated
+  await flushPromises();
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+});
+
+it('should never hydrate and load the component (with function)', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+
+  const WrappedComp = hydrateNever(() =>
+    Promise.resolve({
+      setup() {
+        onUpdated(spyUpdated);
+
+        return () => h('button', { onClick: spyClick }, 'foo');
+      },
+    })
+  );
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // should not be hydrated
+  await flushPromises();
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+});
diff --git a/src/wrappers/hydrate-on-interaction.js b/src/wrappers/hydrate-on-interaction.js
index 4668b95..dc18b96 100644
--- a/src/wrappers/hydrate-on-interaction.js
+++ b/src/wrappers/hydrate-on-interaction.js
@@ -1,12 +1,8 @@
-import { useHydrateOnInteraction, useLazyHydration } from '../composables';
+import { useHydrateOnInteraction } from '../composables';
 import { createHydrationWrapper } from '../utils';
 
 export default function hydrateOnInteraction(component, events = ['focus']) {
-  return createHydrationWrapper(component, () => {
-    const result = useLazyHydration();
-
+  return createHydrationWrapper(component, (result) => {
     useHydrateOnInteraction(result, events);
-
-    return result;
   });
 }
diff --git a/src/wrappers/hydrate-on-interaction.spec.js b/src/wrappers/hydrate-on-interaction.spec.js
new file mode 100644
index 0000000..992d83e
--- /dev/null
+++ b/src/wrappers/hydrate-on-interaction.spec.js
@@ -0,0 +1,74 @@
+import { h, onUpdated } from 'vue';
+import { flushPromises } from '@vue/test-utils';
+
+import { withSSRSetup, triggerEvent } from '../../test/utils';
+
+import { hydrateOnInteraction } from '.';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+it('should load the wrapped component just before hydration on interaction', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+
+  const WrappedComp = hydrateOnInteraction({
+    setup() {
+      onUpdated(spyUpdated);
+
+      return () => h('button', { onClick: spyClick }, 'foo');
+    },
+  });
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // trigger hydration and wait for it to complete
+  triggerEvent('focus', container.querySelector('button'));
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+});
+
+it('should load the wrapped component just before hydration on interaction (with function)', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+
+  const WrappedComp = hydrateOnInteraction(() =>
+    Promise.resolve({
+      setup() {
+        onUpdated(spyUpdated);
+
+        return () => h('button', { onClick: spyClick }, 'foo');
+      },
+    })
+  );
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // trigger hydration and wait for it to complete
+  triggerEvent('focus', container.querySelector('button'));
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+});
diff --git a/src/wrappers/hydrate-when-idle.js b/src/wrappers/hydrate-when-idle.js
index 13ca8cc..d3fd274 100644
--- a/src/wrappers/hydrate-when-idle.js
+++ b/src/wrappers/hydrate-when-idle.js
@@ -1,12 +1,8 @@
-import { useHydrateWhenIdle, useLazyHydration } from '../composables';
+import { useHydrateWhenIdle } from '../composables';
 import { createHydrationWrapper } from '../utils';
 
 export default function hydrateWhenIdle(component, timeout = 2000) {
-  return createHydrationWrapper(component, () => {
-    const result = useLazyHydration();
-
+  return createHydrationWrapper(component, (result) => {
     useHydrateWhenIdle(result, timeout);
-
-    return result;
   });
 }
diff --git a/src/wrappers/hydrate-when-idle.spec.js b/src/wrappers/hydrate-when-idle.spec.js
new file mode 100644
index 0000000..d5d2a90
--- /dev/null
+++ b/src/wrappers/hydrate-when-idle.spec.js
@@ -0,0 +1,85 @@
+import { h, onUpdated } from 'vue';
+import { flushPromises } from '@vue/test-utils';
+
+import { ensureMocksReset, requestIdleCallback } from '../../test/dom-mocks';
+import { withSSRSetup, triggerEvent } from '../../test/utils';
+
+import { hydrateWhenIdle } from '.';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+afterEach(() => {
+  ensureMocksReset();
+});
+
+it('should load the wrapped component just before hydration when browser is idle', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+  requestIdleCallback.mock();
+
+  const WrappedComp = hydrateWhenIdle({
+    setup() {
+      onUpdated(spyUpdated);
+
+      return () => h('button', { onClick: spyClick }, 'foo');
+    },
+  });
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // trigger hydration and wait for it to complete
+  requestIdleCallback.runIdleCallbacks();
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+
+  requestIdleCallback.restore();
+});
+
+it('should load the wrapped component just before hydration when browser is idle (with function)', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+  requestIdleCallback.mock();
+
+  const WrappedComp = hydrateWhenIdle(() =>
+    Promise.resolve({
+      setup() {
+        onUpdated(spyUpdated);
+
+        return () => h('button', { onClick: spyClick }, 'foo');
+      },
+    })
+  );
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // trigger hydration and wait for it to complete
+  requestIdleCallback.runIdleCallbacks();
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+
+  requestIdleCallback.restore();
+});
diff --git a/src/wrappers/hydrate-when-triggered.js b/src/wrappers/hydrate-when-triggered.js
index d5a809c..9326f70 100644
--- a/src/wrappers/hydrate-when-triggered.js
+++ b/src/wrappers/hydrate-when-triggered.js
@@ -1,12 +1,8 @@
-import { useHydrateWhenTriggered, useLazyHydration } from '../composables';
+import { useHydrateWhenTriggered } from '../composables';
 import { createHydrationWrapper } from '../utils';
 
-export default function hydrateWhenTriggered(component, triggered) {
-  return createHydrationWrapper(component, () => {
-    const result = useLazyHydration();
-
+export default function hydrateWhenTriggered(source, triggered) {
+  return createHydrationWrapper(source, (result) => {
     useHydrateWhenTriggered(result, triggered);
-
-    return result;
   });
 }
diff --git a/src/wrappers/hydrate-when-triggered.spec.js b/src/wrappers/hydrate-when-triggered.spec.js
new file mode 100644
index 0000000..de37fca
--- /dev/null
+++ b/src/wrappers/hydrate-when-triggered.spec.js
@@ -0,0 +1,81 @@
+import { h, onUpdated, ref } from 'vue';
+import { flushPromises } from '@vue/test-utils';
+
+import { withSSRSetup, triggerEvent } from '../../test/utils';
+
+import { hydrateWhenTriggered } from '.';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+it('should load the wrapped component just before hydration when triggered', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+  const trigger = ref(false);
+
+  const WrappedComp = hydrateWhenTriggered(
+    {
+      setup() {
+        onUpdated(spyUpdated);
+
+        return () => h('button', { onClick: spyClick }, 'foo');
+      },
+    },
+    trigger
+  );
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // trigger hydration and wait for it to complete
+  trigger.value = true;
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+});
+
+it('should load the wrapped component just before hydration when triggered (with function)', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+  const trigger = ref(false);
+
+  const WrappedComp = hydrateWhenTriggered(
+    () =>
+      Promise.resolve({
+        setup() {
+          onUpdated(spyUpdated);
+
+          return () => h('button', { onClick: spyClick }, 'foo');
+        },
+      }),
+    trigger
+  );
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // trigger hydration and wait for it to complete
+  trigger.value = true;
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+});
diff --git a/src/wrappers/hydrate-when-visible.js b/src/wrappers/hydrate-when-visible.js
index 825b34d..c8e10a7 100644
--- a/src/wrappers/hydrate-when-visible.js
+++ b/src/wrappers/hydrate-when-visible.js
@@ -1,12 +1,8 @@
-import { useHydrateWhenVisible, useLazyHydration } from '../composables';
+import { useHydrateWhenVisible } from '../composables';
 import { createHydrationWrapper } from '../utils';
 
 export default function hydrateWhenVisible(component, observerOpts) {
-  return createHydrationWrapper(component, () => {
-    const result = useLazyHydration();
-
+  return createHydrationWrapper(component, (result) => {
     useHydrateWhenVisible(result, observerOpts);
-
-    return result;
   });
 }
diff --git a/src/wrappers/hydrate-when-visible.spec.js b/src/wrappers/hydrate-when-visible.spec.js
new file mode 100644
index 0000000..68af2d0
--- /dev/null
+++ b/src/wrappers/hydrate-when-visible.spec.js
@@ -0,0 +1,91 @@
+import { h, onUpdated } from 'vue';
+import { flushPromises } from '@vue/test-utils';
+
+import { ensureMocksReset, intersectionObserver } from '../../test/dom-mocks';
+import { withSSRSetup, triggerEvent } from '../../test/utils';
+
+import { hydrateWhenVisible } from '.';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+afterEach(() => {
+  ensureMocksReset();
+});
+
+it('should load the wrapped component just before hydration when component element is visible', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+  intersectionObserver.mock();
+
+  const WrappedComp = hydrateWhenVisible({
+    setup() {
+      onUpdated(spyUpdated);
+
+      return () => h('button', { onClick: spyClick }, 'foo');
+    },
+  });
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // trigger hydration and wait for it to complete
+  intersectionObserver.simulate({
+    target: container.querySelector('button'),
+    isIntersecting: true,
+  });
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+
+  intersectionObserver.restore();
+});
+
+it('should load the wrapped component just before hydration when component element is visible (with function)', async () => {
+  const spyClick = vi.fn();
+  const spyUpdated = vi.fn();
+  intersectionObserver.mock();
+
+  const WrappedComp = hydrateWhenVisible(() =>
+    Promise.resolve({
+      setup() {
+        onUpdated(spyUpdated);
+
+        return () => h('button', { onClick: spyClick }, 'foo');
+      },
+    })
+  );
+
+  const { container } = await withSSRSetup(() => {
+    return () => h(WrappedComp);
+  });
+
+  // hydration not complete yet
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).not.toHaveBeenCalled();
+
+  // trigger hydration and wait for it to complete
+  intersectionObserver.simulate({
+    target: container.querySelector('button'),
+    isIntersecting: true,
+  });
+  await flushPromises();
+
+  // should be hydrated now
+  triggerEvent('click', container.querySelector('button'));
+  expect(spyClick).toHaveBeenCalledOnce();
+  expect(spyUpdated).not.toHaveBeenCalled();
+  expect('Hydration node mismatch').not.toHaveBeenWarned();
+
+  intersectionObserver.restore();
+});
diff --git a/test/utils.js b/test/utils.js
index 69a8a3d..4946474 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -3,7 +3,7 @@ import { renderToString } from '@vue/server-renderer';
 
 const originalWindow = window;
 
-function createApp(isClient, setupFn) {
+export function createApp(setupFn, isClient = false) {
   const App = {
     setup(props, ctx) {
       return setupFn(isClient, props, ctx);
@@ -13,12 +13,12 @@ function createApp(isClient, setupFn) {
   return createSSRApp(App);
 }
 
-export async function withSetup(setupFn) {
+export async function withSSRSetup(setupFn) {
   // make sure window is undefined at server-side
   vi.stubGlobal('window', undefined);
 
   // render at server-side
-  const html = await renderToString(createApp(false, setupFn));
+  const html = await renderToString(createApp(setupFn));
 
   // restore window for client-side
   vi.stubGlobal('window', originalWindow);
@@ -30,9 +30,9 @@ export async function withSetup(setupFn) {
   document.append(container);
 
   // client-side app
-  const app = createApp(true, setupFn);
+  const app = createApp(setupFn, true);
 
-  // hydrate
+  // hydrate application
   app.mount(container);
 
   return { app, container };
diff --git a/vite.config.js b/vite.config.js
index 31da160..b514115 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -16,9 +16,16 @@ const getPackageNameCamelCase = () => {
 let format;
 
 // https://vitejs.dev/config/
-export default defineConfig(({ command }) => ({
+export default defineConfig(({ command, mode }) => ({
   plugins: [vue(), devSSR()],
   publicDir: command === 'build' ? false : 'public',
+  define: {
+    __DEV__: `${
+      mode.production
+        ? `process.env.NODE_ENV === 'development'`
+        : 'import.meta.env.DEV'
+    }`,
+  },
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/index.js'),