From 31d41d07b9a0d7e30ce904aee45043706df56e3f Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 15 Oct 2020 16:57:16 +0330
Subject: [PATCH 1/2] feat: add module option to modify `IntersectionObserver`
 options

---
 playground/nuxt.config.ts |  3 +++
 src/index.ts              |  2 ++
 src/runtime/image.ts      | 12 ++++++++----
 templates/plugin.js       |  2 ++
 types/module.d.ts         |  2 +-
 types/runtime.d.ts        |  1 +
 6 files changed, 17 insertions(+), 5 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 a7a59a182..61abf702d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ function imageModule (moduleOptions: ModuleOptions) {
 
   const options: ModuleOptions = {
     presets: [],
+    intersectOptions: {},
     ...nuxt.options.image,
     ...moduleOptions
   }
@@ -52,6 +53,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 64f52ed3c..29cfe58a9 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
@@ -88,13 +88,17 @@ export function createImage (context, { providers, defaultProvider, presets }: C
     }
   })
 
-  image.$observer = createObserver()
+  image.$observer = createObserver(intersectOptions)
 
   return image
 }
 
-function createObserver () {
-  const observer = (process.client ? new IntersectionObserver(callback) : {}) as IntersectionObserver
+function createObserver (options: object) {
+  const intersectOptions = {
+    rootMargin: '50px',
+    ...options
+  }
+  const observer = (process.client ? 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 a53763ff3..82bb319b4 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 {

From f56a3744c3b74a2e3422c1d1097331b143c32d06 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Thu, 22 Oct 2020 02:23:47 +0330
Subject: [PATCH 2/2] fix lint

---
 src/runtime/image.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/image.ts b/src/runtime/image.ts
index 52e395a79..1d43f026a 100644
--- a/src/runtime/image.ts
+++ b/src/runtime/image.ts
@@ -124,7 +124,7 @@ function createObserver (options: object) {
     rootMargin: '50px',
     ...options
   }
-  const observer = (typeof IntersectionObserver != "undefined" ? new IntersectionObserver(callback, intersectOptions) : {}) as IntersectionObserver
+  const observer = (typeof IntersectionObserver !== 'undefined' ? new IntersectionObserver(callback, intersectOptions) : {}) as IntersectionObserver
   const elementCallbackMap = {}
   function callback (entries, imgObserver) {
     entries.forEach((entry) => {