feat: add module option to modify IntersectionObserver options (#41)

playground/nuxt.config.ts

@@ -31,6 +31,9 @@ export default {
       imgix: {
         baseURL: 'https://assets.imgix.net'
       }
+    },
+    intersectOptions: {
+      rootMargin: '50px'
     }
   }
 }

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

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) => {

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)

types/module.d.ts

@@ -11,7 +11,7 @@ export interface ModuleOptions {
     }
     [name: string]: any
   }
-  provider: object;
+  intersectOptions: object;
 }
 
 export const imageModule: Module<ModuleOptions>

types/runtime.d.ts

@@ -9,6 +9,7 @@ export interface CreateImageOptions {
   }
   presets: ImagePreset[]
   defaultProvider: string
+  intersectOptions: object
 }
 
 export interface $Image {