Make Intersection Observer options configurable

Fixes #16

Author: maoberlehner

README.md

@@ -176,6 +176,22 @@ Because of how this package works, it is not possible to nest multiple root node
 </template>
 ```
 
+#### Intersection Obersver options
+
+Internally the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) is used to determine if a component is visible or not. You can provide Intersection Observer options to the `when-visible` property to configure the Intersection Observer.
+
+```html
+<template>
+  <div class="MyComponent">
+    <LazyHydrate when-visible="{ rootMargin: '100px' }">
+      <ArticleFooter/>
+    </LazyHydrate>
+  </div>
+</template>
+```
+
+For a list of possible options please [take a look at the Intersection Observer API documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver).
+
 ## Benchmarks
 
 ### Without lazy hydration

src/LazyHydrate.js

@@ -1,9 +1,15 @@
 const isServer = typeof window === `undefined`;
 const isBrowser = !isServer;
-let observer = null;
 
-if (typeof IntersectionObserver !== `undefined`) {
-  observer = new IntersectionObserver((entries) => {
+const observers = new Map();
+
+function createObserver(options) {
+  if (typeof IntersectionObserver === `undefined`) return null;
+
+  const optionKey = JSON.stringify(options);
+  if (observers.has(optionKey)) return observers.get(optionKey);
+
+  const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       // Use `intersectionRatio` because of Edge 15's
       // lack of support for `isIntersecting`.
@@ -13,7 +19,10 @@ if (typeof IntersectionObserver !== `undefined`) {
 
       entry.target.parentElement.hydrate();
     });
-  });
+  }, options);
+  observers.set(optionKey, observer);
+
+  return observer;
 }
 
 export default {
@@ -36,7 +45,7 @@ export default {
       type: Boolean,
     },
     whenVisible: {
-      type: Boolean,
+      type: [Boolean, Object],
     },
   },
   data() {
@@ -101,6 +110,9 @@ export default {
     }
 
     if (this.whenVisible) {
+      const options = this.whenVisible === true ? {} : this.whenVisible;
+      const observer = createObserver(options);
+
       // If Intersection Observer API is not supported, hydrate immediately.
       if (!observer) {
         this.hydrate();