From 9f9b920c18c76227d15981be5f465b46da8183d8 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Thu, 22 Oct 2020 02:25:53 +0330
Subject: [PATCH] feat: add module option to modify `IntersectionObserver`
 options (#41)

---
 playground/nuxt.config.ts |  3 +++
 src/index.ts              |  2 ++
 src/runtime/image.ts      | 13 ++++++++-----
 templates/plugin.js       |  2 ++
 types/module.d.ts         |  2 +-
 types/runtime.d.ts        |  1 +
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index a467403ce..ed6268038 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -31,6 +31,9 @@ export default {
       imgix: {
         baseURL: 'https://assets.imgix.net'
       }
+    },
+    intersectOptions: {
+      rootMargin: '50px'
     }
   }
 }
diff --git a/src/index.ts b/src/index.ts
index 01eca003e..1b15dd5f5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,7 @@ function imageModule (moduleOptions: ModuleOptions) {
 
   const options: ModuleOptions = {
     presets: [],
+    intersectOptions: {},
     providers: {},
     ...nuxt.options.image,
     ...moduleOptions
@@ -36,6 +37,7 @@ function imageModule (moduleOptions: ModuleOptions) {
 
   const pluginOptions = {
     defaultProvider: options.defaultProvider,
+    intersectOptions: options.intersectOptions,
     imports: {} as { [name: string]: string },
     providers: [] as { name: string, import: string, options: any }[],
     presets: options.presets
diff --git a/src/runtime/image.ts b/src/runtime/image.ts
index 38b018daf..1d43f026a 100644
--- a/src/runtime/image.ts
+++ b/src/runtime/image.ts
@@ -15,7 +15,7 @@ function processSource (src: string) {
   }
 }
 
-export function createImage (context, { providers, defaultProvider, presets }: CreateImageOptions) {
+export function createImage (context, { providers, defaultProvider, presets, intersectOptions }: CreateImageOptions) {
   const presetMap = presets.reduce((map, preset) => {
     map[preset.name] = preset
     return map
@@ -96,7 +96,6 @@ export function createImage (context, { providers, defaultProvider, presets }: C
       })
     }
   })
-
   image.getMeta = async (source: string, modifiers: ImageModifiers, options: any = {}) => {
     const { src, provider: sourceProvider } = processSource(source)
     const provider = getProvider(sourceProvider || options.provider || defaultProvider)
@@ -115,13 +114,17 @@ export function createImage (context, { providers, defaultProvider, presets }: C
     return meta
   }
 
-  image.$observer = createObserver()
+  image.$observer = createObserver(intersectOptions)
 
   return image
 }
 
-function createObserver () {
-  const observer = (typeof window !== 'undefined' ? new IntersectionObserver(callback) : {}) as IntersectionObserver
+function createObserver (options: object) {
+  const intersectOptions = {
+    rootMargin: '50px',
+    ...options
+  }
+  const observer = (typeof IntersectionObserver !== 'undefined' ? new IntersectionObserver(callback, intersectOptions) : {}) as IntersectionObserver
   const elementCallbackMap = {}
   function callback (entries, imgObserver) {
     entries.forEach((entry) => {
diff --git a/templates/plugin.js b/templates/plugin.js
index 4dd6990f2..71d2da653 100644
--- a/templates/plugin.js
+++ b/templates/plugin.js
@@ -5,6 +5,7 @@ import { createImage } from '~image/image'
 
 <%=Object.entries(options.imports).map(([name, path]) => `import ${name} from '${path}'`).join('\n')%>
 
+const intersectOptions = <%= devalue(options.intersectOptions) %>
 const defaultProvider = '<%= options.defaultProvider %>'
 const presets = <%= devalue(options.presets) %>
 const providers = {}
@@ -25,6 +26,7 @@ export default function (context, inject) {
     defaultProvider,
     providers,
     presets,
+    intersectOptions
   })
 
   inject('img', image)
diff --git a/types/module.d.ts b/types/module.d.ts
index 10b3e43a9..17ee65f3f 100644
--- a/types/module.d.ts
+++ b/types/module.d.ts
@@ -11,7 +11,7 @@ export interface ModuleOptions {
     }
     [name: string]: any
   }
-  provider: object;
+  intersectOptions: object;
 }
 
 export const imageModule: Module<ModuleOptions>
diff --git a/types/runtime.d.ts b/types/runtime.d.ts
index 394677d7f..387999e00 100644
--- a/types/runtime.d.ts
+++ b/types/runtime.d.ts
@@ -9,6 +9,7 @@ export interface CreateImageOptions {
   }
   presets: ImagePreset[]
   defaultProvider: string
+  intersectOptions: object
 }
 
 export interface $Image {