vue3-lazy-hydration - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

CHANGELOG.md

 # Changelog
 
+## [1.1.3](https://github.com/freddy38510/vue3-lazy-hydration/compare/v1.1.2...v1.1.3) (2022-08-09)
+
+
+### Bug Fixes
+
+* **deps:** move Vue dependency to devDependencies ([454ef9f](https://github.com/freddy38510/vue3-lazy-hydration/commit/454ef9f146632b60201279a07ed4bc0f9e842d84)), closes [#22](https://github.com/freddy38510/vue3-lazy-hydration/issues/22)
+
 ## [1.1.2](https://github.com/freddy38510/vue3-lazy-hydration/compare/v1.1.1...v1.1.2) (2022-07-20)
@@ -4,0 +11,0 @@

dist/esm/components/LazyHydrationWrapper.js

@@ -10,52 +10,62 @@ import { markRaw, defineComponent, computed, toRef } from "vue";
 };
-const LazyHydrationWrapper = markRaw(defineComponent({
-  name: "LazyHydrationWrapper",
-  inheritAttrs: false,
-  suspensible: false,
-  props: {
-    whenIdle: {
-      default: false,
-      type: [Boolean, Number]
+const LazyHydrationWrapper = 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: void 0,
+        type: [Boolean, Object]
+      }
     },
-    whenVisible: {
-      default: false,
-      type: [Boolean, Object]
-    },
-    onInteraction: {
-      default: false,
-      type: [Array, Boolean, String]
-    },
-    whenTriggered: {
-      default: void 0,
-      type: [Boolean, Object]
-    }
-  },
-  emits: ["hydrated"],
-  setup(props, { slots, emit }) {
-    const result = useLazyHydration();
-    if (!result.willPerformHydration) {
+    emits: ["hydrated"],
+    setup(props, { slots, emit }) {
+      const result = useLazyHydration();
+      if (!result.willPerformHydration) {
+        return () => normalizeSlot(slots.default());
+      }
+      result.onHydrated(() => emit("hydrated"));
+      if (props.whenIdle) {
+        useHydrateWhenIdle(
+          result,
+          props.whenIdle !== true ? props.whenIdle : void 0
+        );
+      }
+      if (props.whenVisible) {
+        useHydrateWhenVisible(
+          result,
+          props.whenVisible !== true ? props.whenVisible : void 0
+        );
+      }
+      if (props.onInteraction) {
+        let events;
+        if (props.onInteraction !== true) {
+          events = computed(
+            () => Array.isArray(props.onInteraction) ? props.onInteraction : [props.onInteraction]
+          );
+        }
+        useHydrateOnInteraction(result, events);
+      }
+      if (props.whenTriggered !== void 0) {
+        useHydrateWhenTriggered(result, toRef(props, "whenTriggered"));
+      }
       return () => normalizeSlot(slots.default());
     }
-    result.onHydrated(() => emit("hydrated"));
-    if (props.whenIdle) {
-      useHydrateWhenIdle(result, props.whenIdle !== true ? props.whenIdle : void 0);
-    }
-    if (props.whenVisible) {
-      useHydrateWhenVisible(result, props.whenVisible !== true ? props.whenVisible : void 0);
-    }
-    if (props.onInteraction) {
-      let events;
-      if (props.onInteraction !== true) {
-        events = computed(() => Array.isArray(props.onInteraction) ? props.onInteraction : [props.onInteraction]);
-      }
-      useHydrateOnInteraction(result, events);
-    }
-    if (props.whenTriggered !== void 0) {
-      useHydrateWhenTriggered(result, toRef(props, "whenTriggered"));
-    }
-    return () => normalizeSlot(slots.default());
-  }
-}));
+  })
+);
 export {
   LazyHydrationWrapper as L
 };

dist/esm/composables/useHydrateOnInteraction.js

@@ -9,3 +9,5 @@ import { getCurrentInstance, unref, onMounted } from "vue";
   if (!instance || instance.isMounted) {
-    throw new Error("useHydrateOnInteraction must be called from the setup method.");
+    throw new Error(
+      "useHydrateOnInteraction must be called from the setup method."
+    );
   }
@@ -23,3 +25,3 @@ const eventsTypes = unref(events);
       event.stopPropagation();
-      const paths = event.path || event.composedPath && event.composedPath();
+      const paths = event.composedPath && event.composedPath() || event.path;
       if (!paths) {
@@ -50,3 +52,7 @@ let el = event.target;
       eventsTypes.forEach((eventType) => {
-        container.removeEventListener(eventType, listener, eventListenerOptions);
+        container.removeEventListener(
+          eventType,
+          listener,
+          eventListenerOptions
+        );
       });
@@ -53,0 +59,0 @@ });

dist/esm/composables/useHydrateWhenIdle.js

@@ -7,3 +7,5 @@ import { getCurrentInstance } from "vue";
   if (!getCurrentInstance()) {
-    throw new Error("useHydrateWhenIdle must be called from the setup or lifecycle hook methods.");
+    throw new Error(
+      "useHydrateWhenIdle must be called from the setup or lifecycle hook methods."
+    );
   }
@@ -14,5 +16,8 @@ if (!("requestIdleCallback" in window)) {
   }
-  const idleId = requestIdleCallback(() => {
-    hydrate();
-  }, { timeout });
+  const idleId = requestIdleCallback(
+    () => {
+      hydrate();
+    },
+    { timeout }
+  );
   onCleanup(() => {
@@ -19,0 +24,0 @@ cancelIdleCallback(idleId);

dist/esm/composables/useHydrateWhenTriggered.js

@@ -7,11 +7,17 @@ import { getCurrentInstance, watch, isRef } from "vue";
   if (!getCurrentInstance()) {
-    throw new Error("useHydrateWhenTriggered must be called from the setup or lifecycle hook methods.");
+    throw new Error(
+      "useHydrateWhenTriggered must be called from the setup or lifecycle hook methods."
+    );
   }
-  const unWatch = watch(isRef(trigger) ? trigger : () => trigger, (isTriggered) => {
-    if (isTriggered) {
-      hydrate();
+  const unWatch = watch(
+    isRef(trigger) ? trigger : () => trigger,
+    (isTriggered) => {
+      if (isTriggered) {
+        hydrate();
+      }
+    },
+    {
+      immediate: true
     }
-  }, {
-    immediate: true
-  });
+  );
   onCleanup(unWatch);
@@ -18,0 +24,0 @@ }

dist/esm/composables/useHydrateWhenVisible.js

@@ -10,3 +10,5 @@ import { getCurrentInstance, onMounted } from "vue";
   if (!instance || instance.isMounted) {
-    throw new Error("useHydrateWhenVisible must be called from the setup method.");
+    throw new Error(
+      "useHydrateWhenVisible must be called from the setup method."
+    );
   }
@@ -13,0 +15,0 @@ const { supported, observer } = createHydrationObserver(observerOptions);

dist/esm/utils/create-hydration-wrapper.js

@@ -25,3 +25,5 @@ import { markRaw, defineComponent, getCurrentInstance, ref, createVNode, handleError } from "vue";
       if (process.env.NODE_ENV === "development" && !comp) {
-        console.warn(`Async lazily hydrated wrapped component loader resolved to undefined.`);
+        console.warn(
+          `Async lazily hydrated wrapped component loader resolved to undefined.`
+        );
       }
@@ -32,3 +34,5 @@ if (comp && (comp.__esModule || comp[Symbol.toStringTag] === "Module")) {
       if (process.env.NODE_ENV === "development" && comp && !isObject(comp) && !isFunction(comp)) {
-        throw new Error(`Invalid async lazily hydrated wrapped component load result: ${comp}`);
+        throw new Error(
+          `Invalid async lazily hydrated wrapped component load result: ${comp}`
+        );
       }
@@ -39,54 +43,56 @@ resolvedComp = comp;
   };
-  return markRaw(defineComponent({
-    name: "LazyHydrationWrapper",
-    inheritAttrs: false,
-    suspensible: false,
-    emits: ["hydrated"],
-    get __asyncResolved() {
-      return resolvedComp;
-    },
-    setup(_, { emit }) {
-      const instance = getCurrentInstance();
-      const onError = (err) => {
-        pendingRequest = null;
-        handleError(err, instance, "async component loader");
-      };
-      const loaded = ref(false);
-      const result = useLazyHydration();
-      if (typeof window === "undefined") {
-        return load().then((comp) => {
-          return () => createInnerComp(comp, instance);
-        }).catch((err) => {
-          onError(err);
-          return () => null;
-        });
-      }
-      if (!result.willPerformHydration) {
-        if (resolvedComp) {
-          return () => createInnerComp(resolvedComp, instance);
+  return markRaw(
+    defineComponent({
+      name: "LazyHydrationWrapper",
+      inheritAttrs: false,
+      suspensible: false,
+      emits: ["hydrated"],
+      get __asyncResolved() {
+        return resolvedComp;
+      },
+      setup(_, { emit }) {
+        const instance = getCurrentInstance();
+        const onError = (err) => {
+          pendingRequest = null;
+          handleError(err, instance, "async component loader");
+        };
+        const loaded = ref(false);
+        const result = useLazyHydration();
+        if (typeof window === "undefined") {
+          return load().then((comp) => {
+            return () => createInnerComp(comp, instance);
+          }).catch((err) => {
+            onError(err);
+            return () => null;
+          });
         }
-        load().then(() => {
+        if (!result.willPerformHydration) {
+          if (resolvedComp) {
+            return () => createInnerComp(resolvedComp, instance);
+          }
+          load().then(() => {
+            loaded.value = true;
+          }).catch((err) => {
+            onError(err);
+          });
+          return () => {
+            if (loaded.value && resolvedComp) {
+              return createInnerComp(resolvedComp, instance);
+            }
+            return null;
+          };
+        }
+        const { hydrate } = result;
+        result.hydrate = () => load().then(() => {
           loaded.value = true;
+          hydrate();
         }).catch((err) => {
           onError(err);
         });
-        return () => {
-          if (loaded.value && resolvedComp) {
-            return createInnerComp(resolvedComp, instance);
-          }
-          return null;
-        };
+        result.onHydrated(() => emit("hydrated"));
+        onSetup(result);
+        return () => createInnerComp(resolvedComp, instance);
       }
-      const { hydrate } = result;
-      result.hydrate = () => load().then(() => {
-        loaded.value = true;
-        hydrate();
-      }).catch((err) => {
-        onError(err);
-      });
-      result.onHydrated(() => emit("hydrated"));
-      onSetup(result);
-      return () => createInnerComp(resolvedComp, instance);
-    }
-  }));
+    })
+  );
 }
@@ -93,0 +99,0 @@ export {

dist/vue3LazyHydration.cjs.js

@@ -80,3 +80,5 @@ "use strict";
       if (process.env.NODE_ENV === "development" && !comp) {
-        console.warn(`Async lazily hydrated wrapped component loader resolved to undefined.`);
+        console.warn(
+          `Async lazily hydrated wrapped component loader resolved to undefined.`
+        );
       }
@@ -87,3 +89,5 @@ if (comp && (comp.__esModule || comp[Symbol.toStringTag] === "Module")) {
       if (process.env.NODE_ENV === "development" && comp && !isObject(comp) && !isFunction(comp)) {
-        throw new Error(`Invalid async lazily hydrated wrapped component load result: ${comp}`);
+        throw new Error(
+          `Invalid async lazily hydrated wrapped component load result: ${comp}`
+        );
       }
@@ -94,54 +98,56 @@ resolvedComp = comp;
   };
-  return vue.markRaw(vue.defineComponent({
-    name: "LazyHydrationWrapper",
-    inheritAttrs: false,
-    suspensible: false,
-    emits: ["hydrated"],
-    get __asyncResolved() {
-      return resolvedComp;
-    },
-    setup(_, { emit }) {
-      const instance = vue.getCurrentInstance();
-      const onError = (err) => {
-        pendingRequest = null;
-        vue.handleError(err, instance, "async component loader");
-      };
-      const loaded = vue.ref(false);
-      const result = useLazyHydration();
-      if (typeof window === "undefined") {
-        return load().then((comp) => {
-          return () => createInnerComp(comp, instance);
-        }).catch((err) => {
-          onError(err);
-          return () => null;
-        });
-      }
-      if (!result.willPerformHydration) {
-        if (resolvedComp) {
-          return () => createInnerComp(resolvedComp, instance);
+  return vue.markRaw(
+    vue.defineComponent({
+      name: "LazyHydrationWrapper",
+      inheritAttrs: false,
+      suspensible: false,
+      emits: ["hydrated"],
+      get __asyncResolved() {
+        return resolvedComp;
+      },
+      setup(_, { emit }) {
+        const instance = vue.getCurrentInstance();
+        const onError = (err) => {
+          pendingRequest = null;
+          vue.handleError(err, instance, "async component loader");
+        };
+        const loaded = vue.ref(false);
+        const result = useLazyHydration();
+        if (typeof window === "undefined") {
+          return load().then((comp) => {
+            return () => createInnerComp(comp, instance);
+          }).catch((err) => {
+            onError(err);
+            return () => null;
+          });
         }
-        load().then(() => {
+        if (!result.willPerformHydration) {
+          if (resolvedComp) {
+            return () => createInnerComp(resolvedComp, instance);
+          }
+          load().then(() => {
+            loaded.value = true;
+          }).catch((err) => {
+            onError(err);
+          });
+          return () => {
+            if (loaded.value && resolvedComp) {
+              return createInnerComp(resolvedComp, instance);
+            }
+            return null;
+          };
+        }
+        const { hydrate } = result;
+        result.hydrate = () => load().then(() => {
           loaded.value = true;
+          hydrate();
         }).catch((err) => {
           onError(err);
         });
-        return () => {
-          if (loaded.value && resolvedComp) {
-            return createInnerComp(resolvedComp, instance);
-          }
-          return null;
-        };
+        result.onHydrated(() => emit("hydrated"));
+        onSetup(result);
+        return () => createInnerComp(resolvedComp, instance);
       }
-      const { hydrate } = result;
-      result.hydrate = () => load().then(() => {
-        loaded.value = true;
-        hydrate();
-      }).catch((err) => {
-        onError(err);
-      });
-      result.onHydrated(() => emit("hydrated"));
-      onSetup(result);
-      return () => createInnerComp(resolvedComp, instance);
-    }
-  }));
+    })
+  );
 }
@@ -285,3 +291,5 @@ function trackDepsOnRender(instance) {
   if (!vue.getCurrentInstance()) {
-    throw new Error("useHydrateWhenIdle must be called from the setup or lifecycle hook methods.");
+    throw new Error(
+      "useHydrateWhenIdle must be called from the setup or lifecycle hook methods."
+    );
   }
@@ -292,5 +300,8 @@ if (!("requestIdleCallback" in window)) {
   }
-  const idleId = requestIdleCallback(() => {
-    hydrate();
-  }, { timeout });
+  const idleId = requestIdleCallback(
+    () => {
+      hydrate();
+    },
+    { timeout }
+  );
   onCleanup(() => {
@@ -306,3 +317,5 @@ cancelIdleCallback(idleId);
   if (!instance || instance.isMounted) {
-    throw new Error("useHydrateOnInteraction must be called from the setup method.");
+    throw new Error(
+      "useHydrateOnInteraction must be called from the setup method."
+    );
   }
@@ -320,3 +333,3 @@ const eventsTypes = vue.unref(events);
       event.stopPropagation();
-      const paths = event.path || event.composedPath && event.composedPath();
+      const paths = event.composedPath && event.composedPath() || event.path;
       if (!paths) {
@@ -347,3 +360,7 @@ let el = event.target;
       eventsTypes.forEach((eventType) => {
-        container.removeEventListener(eventType, listener, eventListenerOptions);
+        container.removeEventListener(
+          eventType,
+          listener,
+          eventListenerOptions
+        );
       });
@@ -358,11 +375,17 @@ });
   if (!vue.getCurrentInstance()) {
-    throw new Error("useHydrateWhenTriggered must be called from the setup or lifecycle hook methods.");
+    throw new Error(
+      "useHydrateWhenTriggered must be called from the setup or lifecycle hook methods."
+    );
   }
-  const unWatch = vue.watch(vue.isRef(trigger) ? trigger : () => trigger, (isTriggered) => {
-    if (isTriggered) {
-      hydrate();
+  const unWatch = vue.watch(
+    vue.isRef(trigger) ? trigger : () => trigger,
+    (isTriggered) => {
+      if (isTriggered) {
+        hydrate();
+      }
+    },
+    {
+      immediate: true
     }
-  }, {
-    immediate: true
-  });
+  );
   onCleanup(unWatch);
@@ -376,3 +399,5 @@ }
   if (!instance || instance.isMounted) {
-    throw new Error("useHydrateWhenVisible must be called from the setup method.");
+    throw new Error(
+      "useHydrateWhenVisible must be called from the setup method."
+    );
   }
@@ -401,50 +426,60 @@ const { supported, observer } = createHydrationObserver(observerOptions);
 };
-const LazyHydrationWrapper = vue.markRaw(vue.defineComponent({
-  name: "LazyHydrationWrapper",
-  inheritAttrs: false,
-  suspensible: false,
-  props: {
-    whenIdle: {
-      default: false,
-      type: [Boolean, Number]
+const LazyHydrationWrapper = vue.markRaw(
+  vue.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: void 0,
+        type: [Boolean, Object]
+      }
     },
-    whenVisible: {
-      default: false,
-      type: [Boolean, Object]
-    },
-    onInteraction: {
-      default: false,
-      type: [Array, Boolean, String]
-    },
-    whenTriggered: {
-      default: void 0,
-      type: [Boolean, Object]
-    }
-  },
-  emits: ["hydrated"],
-  setup(props, { slots, emit }) {
-    const result = useLazyHydration();
-    if (!result.willPerformHydration) {
+    emits: ["hydrated"],
+    setup(props, { slots, emit }) {
+      const result = useLazyHydration();
+      if (!result.willPerformHydration) {
+        return () => normalizeSlot(slots.default());
+      }
+      result.onHydrated(() => emit("hydrated"));
+      if (props.whenIdle) {
+        useHydrateWhenIdle(
+          result,
+          props.whenIdle !== true ? props.whenIdle : void 0
+        );
+      }
+      if (props.whenVisible) {
+        useHydrateWhenVisible(
+          result,
+          props.whenVisible !== true ? props.whenVisible : void 0
+        );
+      }
+      if (props.onInteraction) {
+        let events;
+        if (props.onInteraction !== true) {
+          events = vue.computed(
+            () => Array.isArray(props.onInteraction) ? props.onInteraction : [props.onInteraction]
+          );
+        }
+        useHydrateOnInteraction(result, events);
+      }
+      if (props.whenTriggered !== void 0) {
+        useHydrateWhenTriggered(result, vue.toRef(props, "whenTriggered"));
+      }
       return () => normalizeSlot(slots.default());
     }
-    result.onHydrated(() => emit("hydrated"));
-    if (props.whenIdle) {
-      useHydrateWhenIdle(result, props.whenIdle !== true ? props.whenIdle : void 0);
-    }
-    if (props.whenVisible) {
-      useHydrateWhenVisible(result, props.whenVisible !== true ? props.whenVisible : void 0);
-    }
-    if (props.onInteraction) {
-      let events;
-      if (props.onInteraction !== true) {
-        events = vue.computed(() => Array.isArray(props.onInteraction) ? props.onInteraction : [props.onInteraction]);
-      }
-      useHydrateOnInteraction(result, events);
-    }
-    if (props.whenTriggered !== void 0) {
-      useHydrateWhenTriggered(result, vue.toRef(props, "whenTriggered"));
-    }
-    return () => normalizeSlot(slots.default());
-  }
-}));
+  })
+);
 function hydrateNever(loader) {
@@ -451,0 +486,0 @@ return createHydrationWrapper(loader, () => {

package.json

 {
   "name": "vue3-lazy-hydration",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Lazy Hydration for Vue 3 SSR",
@@ -44,12 +44,9 @@ "keywords": [
   },
-  "dependencies": {
-    "vue": "3.2.37"
-  },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.0.1",
-    "@vitest/ui": "0.18.1",
+    "@vitest/ui": "0.21.1",
     "@vue/server-renderer": "3.2.37",
     "@vue/test-utils": "2.0.2",
     "c8": "7.12.0",
-    "eslint": "8.20.0",
+    "eslint": "8.21.0",
     "eslint-config-airbnb-base": "15.0.0",
@@ -60,10 +57,11 @@ "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-vue": "9.2.0",
+    "eslint-plugin-vue": "9.3.0",
     "happy-dom": "6.0.4",
     "prettier": "2.7.1",
-    "sass": "1.53.0",
-    "vite": "3.0.2",
-    "vitest": "0.18.1",
-    "vue-router": "4.1.2"
+    "sass": "1.54.3",
+    "vite": "3.0.5",
+    "vitest": "0.21.1",
+    "vue": "3.2.37",
+    "vue-router": "4.1.3"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

50060

increased by2.58%

Dependency count

1

decreased by-50%

Lines of code

1150

increased by6.48%

Worsened metrics

Dev dependency count

19

increased by5.56%

Dependency changes

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@vue/compiler-core@3.5.13(transitive)

• + Added@vue/compiler-dom@3.5.13(transitive)

• + Added@vue/compiler-sfc@3.5.13(transitive)

• + Added@vue/compiler-ssr@3.5.13(transitive)

• + Added@vue/reactivity@3.5.13(transitive)

• + Added@vue/runtime-core@3.5.13(transitive)

• + Added@vue/runtime-dom@3.5.13(transitive)

• + Added@vue/server-renderer@3.5.13(transitive)

• + Added@vue/shared@3.5.13(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedmagic-string@0.30.17(transitive)

• + Addedvue@3.5.13(transitive)

• - Removedvue@3.2.37

• - Removed@vue/compiler-core@3.2.37(transitive)

• - Removed@vue/compiler-dom@3.2.37(transitive)

• - Removed@vue/compiler-sfc@3.2.37(transitive)

• - Removed@vue/compiler-ssr@3.2.37(transitive)

• - Removed@vue/reactivity@3.2.37(transitive)

• - Removed@vue/reactivity-transform@3.2.37(transitive)

• - Removed@vue/runtime-core@3.2.37(transitive)

• - Removed@vue/runtime-dom@3.2.37(transitive)

• - Removed@vue/server-renderer@3.2.37(transitive)

• - Removed@vue/shared@3.2.37(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removedmagic-string@0.25.9(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsourcemap-codec@1.4.8(transitive)

• - Removedvue@3.2.37(transitive)