feat(import-wrappers): supports asynchronous loading of wrapped compo…

…nent
freddy38510 · Jul 18, 2022 · 63f7983 · 63f7983
1 parent 77071ca
commit 63f7983
Show file tree

Hide file tree

Showing 30 changed files with 889 additions and 149 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();