Finish resize + slide + media query observers

packages/embla-carousel-auto-height/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2015",
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "esModuleInterop": true,

packages/embla-carousel-autoplay/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2015",
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "esModuleInterop": true,

packages/embla-carousel-class-names/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2015",
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "esModuleInterop": true,

packages/embla-carousel-react/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2015",
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "esModuleInterop": true,

packages/embla-carousel-svelte/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2015",
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "esModuleInterop": true,

packages/embla-carousel-vue/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2015",
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "esModuleInterop": true,

packages/embla-carousel/src/components/OptionsHandler.ts

@@ -13,6 +13,7 @@ export type OptionsHandlerType = {
     optionsB: TypeB,
   ) => boolean
   atMedia: <Type extends OptionsType>(options: Type) => Type
+  mediaQueries: (optionsList: OptionsType[]) => MediaQueryList[]
 }
 
 export function OptionsHandler(): OptionsHandlerType {
@@ -28,9 +29,9 @@ export function OptionsHandler(): OptionsHandlerType {
     optionsA: TypeA,
     optionsB: TypeB,
   ): boolean {
-    const breakpointsA = JSON.stringify(objectKeys(optionsA.breakpoints || {}))
-    const breakpointsB = JSON.stringify(objectKeys(optionsB.breakpoints || {}))
-    if (breakpointsA !== breakpointsB) return false
+    // const breakpointsA = JSON.stringify(objectKeys(optionsA.breakpoints || {}))
+    // const breakpointsB = JSON.stringify(objectKeys(optionsB.breakpoints || {}))
+    // if (breakpointsA !== breakpointsB) return false
     return objectsAreEqual(optionsA, optionsB) // TODO: Move to embla-carousel-reactive-utils
   }
 
@@ -44,10 +45,18 @@ export function OptionsHandler(): OptionsHandlerType {
     return merge(options, matchedMediaOptions)
   }
 
+  function mediaQueries(optionsList: OptionsType[]): MediaQueryList[] {
+    return optionsList
+      .map((options) => objectKeys(options.breakpoints || {}))
+      .reduce((acc, mediaQueries) => acc.concat(mediaQueries), [])
+      .map(matchMedia)
+  }
+
   const self: OptionsHandlerType = {
     merge,
     areEqual,
     atMedia,
+    mediaQueries,
   }
   return self
 }

packages/embla-carousel/src/components/ResizeHandler.ts

@@ -15,6 +15,7 @@ export function ResizeHandler(
   let resizeObserver: ResizeObserver
   let containerSize: number
   let slideSizes: number[] = []
+  let destroyed = false
 
   function readSize(node: Element | HTMLElement): number {
     return axis.measureSize(node.getBoundingClientRect())
@@ -29,7 +30,7 @@ export function ResizeHandler(
         const slideSize = slideSizes[slides.indexOf(<HTMLElement>entry.target)]
         const lastSize = entry.target === container ? containerSize : slideSize
 
-        if (lastSize !== readSize(entry.target)) cb()
+        if (lastSize !== readSize(entry.target) && !destroyed) cb()
         eventHandler.emit('resize')
       })
     })
@@ -40,6 +41,7 @@ export function ResizeHandler(
 
   function destroy(): void {
     resizeObserver.disconnect()
+    destroyed = true
   }
 
   const self: ResizeHandlerType = {

packages/embla-carousel/src/components/SlidesHandler.ts

@@ -5,19 +5,21 @@ export type SlidesHandlerType = {
 
 export function SlidesHandler(container: HTMLElement): SlidesHandlerType {
   let mutationObserver: MutationObserver
+  let destroyed = false
 
   function init<CallbackType extends Function>(cb: CallbackType): void {
-    mutationObserver = new MutationObserver((mutationList) => {
-      for (const mutation of mutationList) {
-        if (mutation.type === 'childList') cb()
-      }
+    mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList' && !destroyed) cb()
+      })
     })
 
     mutationObserver.observe(container, { childList: true })
   }
 
   function destroy(): void {
     mutationObserver.disconnect()
+    destroyed = true
   }
 
   const self: SlidesHandlerType = {

packages/embla-carousel/src/components/index.ts

@@ -5,7 +5,7 @@ import { defaultOptions, EmblaOptionsType } from './Options'
 import { OptionsHandler } from './OptionsHandler'
 import { PluginsHandler } from './PluginsHandler'
 import { EmblaPluginsType, EmblaPluginType } from './Plugins'
-import { isString, objectKeys } from './utils'
+import { isString } from './utils'
 
 export type EmblaCarouselType = {
   canScrollNext: () => boolean
@@ -88,32 +88,13 @@ function EmblaCarousel(
     pluginList = withPlugins || pluginList
     pluginApis = pluginsHandler.init(pluginList, self)
 
-    // NEW ---------------------->
-
-    // move to optionsHandler
-    const mediaQueryList = pluginList.reduce(
-      (acc, { options }) => acc.concat(objectKeys(options.breakpoints)),
-      objectKeys(optionsBase.breakpoints),
-    )
-    const uniqueMediaQueryList = mediaQueryList.filter((mediaQuery, index) => {
-      return mediaQueryList.indexOf(mediaQuery) === index
-    }) // change to new [...Set(mediaQueryList)]
-
-    mediaHandlers.removeAll()
-    uniqueMediaQueryList.forEach((mediaQuery) => {
-      mediaHandlers.add(matchMedia(mediaQuery), 'change', () => {
-        console.log('options changed')
-        return reActivate()
-      })
-    })
+    optionsHandler
+      .mediaQueries([optionsBase, ...pluginList.map((p) => p.options)])
+      .forEach((query) => mediaHandlers.add(query, 'change', reActivate))
 
     engine.slidesHandler.init(reActivate)
     engine.resizeHandler.init(reActivate)
 
-    // TODO: DRY out engine.axis.measureSize() used in many places
-
-    // NEW ----------------------<
-
     if (options.loop) {
       if (!engine.slideLooper.canLoop()) {
         deActivate()
@@ -147,6 +128,7 @@ function EmblaCarousel(
     engine.resizeHandler.destroy()
     engine.slidesHandler.destroy()
     pluginsHandler.destroy()
+    mediaHandlers.removeAll()
   }
 
   function destroy(): void {

packages/embla-carousel/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2015",
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "esModuleInterop": true,