Bugfix #672

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

@@ -40,7 +40,7 @@
   "scripts": {
     "test": "echo \"Info: no tests specified\" && exit 0",
     "build": "rollup --bundleConfigAsCjs -c",
-    "start": "rollup --bundleConfigAsCjs -c --watch",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
     "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
   },
   "devDependencies": {

packages/embla-carousel-autoplay/package.json

@@ -40,7 +40,7 @@
   "scripts": {
     "test": "echo \"Info: no tests specified\" && exit 0",
     "build": "rollup --bundleConfigAsCjs -c",
-    "start": "rollup --bundleConfigAsCjs -c --watch",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
     "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
   },
   "devDependencies": {

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

@@ -40,7 +40,7 @@
   "scripts": {
     "test": "echo \"Info: no tests specified\" && exit 0",
     "build": "rollup --bundleConfigAsCjs -c",
-    "start": "rollup --bundleConfigAsCjs -c --watch",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
     "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
   },
   "devDependencies": {

packages/embla-carousel-react/package.json

@@ -40,7 +40,7 @@
   "scripts": {
     "test": "echo \"Info: no tests specified\" && exit 0",
     "build": "rollup --bundleConfigAsCjs -c",
-    "start": "rollup --bundleConfigAsCjs -c --watch",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
     "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
   },
   "devDependencies": {

packages/embla-carousel-reactive-utils/package.json

@@ -40,7 +40,7 @@
   "scripts": {
     "test": "jest --config jest.config.js",
     "build": "rollup --bundleConfigAsCjs -c",
-    "start": "rollup --bundleConfigAsCjs -c --watch",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
     "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
   },
   "devDependencies": {

packages/embla-carousel-svelte/package.json

@@ -40,7 +40,7 @@
   "scripts": {
     "test": "echo \"Info: no tests specified\" && exit 0",
     "build": "rollup --bundleConfigAsCjs -c",
-    "start": "rollup --bundleConfigAsCjs -c --watch",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
     "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
   },
   "devDependencies": {

packages/embla-carousel-vue/package.json

@@ -40,7 +40,7 @@
   "scripts": {
     "test": "echo \"Info: no tests specified\" && exit 0",
     "build": "rollup --bundleConfigAsCjs -c",
-    "start": "rollup --bundleConfigAsCjs -c --watch",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
     "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
   },
   "devDependencies": {

packages/embla-carousel/package.json

@@ -39,7 +39,7 @@
   "scripts": {
     "test": "jest --config jest.config.js",
     "build": "rollup --bundleConfigAsCjs -c",
-    "start": "rollup --bundleConfigAsCjs -c --watch",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
     "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
   },
   "devDependencies": {

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

@@ -1,33 +1,45 @@
 import { EngineType } from './Engine'
+import { EventStore } from './EventStore'
 import { mathAbs, WindowType } from './utils'
 
-export type AnimationUpdateType = (engine: EngineType) => void
-export type AnimationRenderType = (
+export type AnimationsUpdateType = (engine: EngineType) => void
+export type AnimationsRenderType = (
   engine: EngineType,
-  lagFactor: number
+  lagOffset: number
 ) => void
 
-export type AnimationType = {
+export type AnimationsType = {
+  init: () => void
+  destroy: () => void
   start: () => void
   stop: () => void
   update: () => void
-  render: (lagFactor: number) => void
+  render: (lagOffset: number) => void
 }
 
-export type AnimationsType = {
-  start: (engine: EngineType) => void
-  stop: (engine: EngineType) => void
-  reset: () => void
-  window: WindowType
-}
-
-export function Animations(ownerWindow: WindowType): AnimationsType {
+export function Animations(
+  ownerDocument: Document,
+  ownerWindow: WindowType,
+  update: AnimationsType['update'],
+  render: AnimationsType['render']
+): AnimationsType {
+  const documentVisibleHandler = EventStore()
   const timeStep = 1000 / 60
-  let engines: EngineType[] = []
   let lastTimeStamp: number | null = null
   let lag = 0
   let animationFrame = 0
 
+  function init(): void {
+    documentVisibleHandler.add(ownerDocument, 'visibilitychange', () => {
+      if (ownerDocument.hidden) reset()
+    })
+  }
+
+  function destroy(): void {
+    stop()
+    documentVisibleHandler.clear()
+  }
+
   function animate(timeStamp: DOMHighResTimeStamp): void {
     if (!lastTimeStamp) lastTimeStamp = timeStamp
 
@@ -36,27 +48,23 @@ export function Animations(ownerWindow: WindowType): AnimationsType {
     lag += elapsed
 
     while (lag >= timeStep) {
-      engines.forEach(({ animation }) => animation.update())
+      update()
       lag -= timeStep
     }
 
     const lagOffset = mathAbs(lag / timeStep)
-    engines.forEach(({ animation }) => animation.render(lagOffset))
+    render(lagOffset)
 
     if (animationFrame) ownerWindow.requestAnimationFrame(animate)
   }
 
-  function start(engine: EngineType): void {
-    if (!engines.includes(engine)) engines.push(engine)
+  function start(): void {
     if (animationFrame) return
 
     animationFrame = ownerWindow.requestAnimationFrame(animate)
   }
 
-  function stop(engine: EngineType): void {
-    engines = engines.filter((e) => e !== engine)
-    if (engines.length) return
-
+  function stop(): void {
     ownerWindow.cancelAnimationFrame(animationFrame)
     lastTimeStamp = null
     lag = 0
@@ -69,10 +77,12 @@ export function Animations(ownerWindow: WindowType): AnimationsType {
   }
 
   const self: AnimationsType = {
+    init,
+    destroy,
     start,
     stop,
-    reset,
-    window: ownerWindow
+    update,
+    render
   }
   return self
 }

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

@@ -1,5 +1,5 @@
 import { EmblaCarouselType } from './EmblaCarousel'
-import { AnimationType } from './Animations'
+import { AnimationsType } from './Animations'
 import { CounterType } from './Counter'
 import { DirectionType } from './Direction'
 import { DragTrackerType, PointerEventType } from './DragTracker'
@@ -44,7 +44,7 @@ export function DragHandler(
   target: Vector1DType,
   dragTracker: DragTrackerType,
   location: Vector1DType,
-  animation: AnimationType,
+  animation: AnimationsType,
   scrollTo: ScrollToType,
   scrollBody: ScrollBodyType,
   scrollTarget: ScrollTargetType,

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

@@ -1,5 +1,4 @@
 import { Engine, EngineType } from './Engine'
-import { Animations, AnimationsType } from './Animations'
 import { EventStore } from './EventStore'
 import { EventHandler, EventHandlerType } from './EventHandler'
 import { defaultOptions, EmblaOptionsType, OptionsType } from './Options'
@@ -42,9 +41,7 @@ function EmblaCarousel(
   const optionsHandler = OptionsHandler(ownerWindow)
   const pluginsHandler = PluginsHandler(optionsHandler)
   const mediaHandlers = EventStore()
-  const documentVisibleHandler = EventStore()
   const eventHandler = EventHandler()
-  const { animationRealms } = EmblaCarousel
   const { mergeOptions, optionsAtMedia, optionsMediaQueries } = optionsHandler
   const { on, off, emit } = eventHandler
   const reInit = reActivate
@@ -73,24 +70,20 @@ function EmblaCarousel(
     slides = <HTMLElement[]>[].slice.call(customSlides || container.children)
   }
 
-  function createEngine(
-    options: OptionsType,
-    animations: AnimationsType
-  ): EngineType {
+  function createEngine(options: OptionsType): EngineType {
     const engine = Engine(
       root,
       container,
       slides,
       ownerDocument,
       ownerWindow,
       options,
-      eventHandler,
-      animations
+      eventHandler
     )
 
     if (options.loop && !engine.slideLooper.canLoop()) {
       const optionsWithoutLoop = Object.assign({}, options, { loop: false })
-      return createEngine(optionsWithoutLoop, animations)
+      return createEngine(optionsWithoutLoop)
     }
     return engine
   }
@@ -101,17 +94,13 @@ function EmblaCarousel(
   ): void {
     if (destroyed) return
 
-    const animationRealm = animationRealms.find((a) => a.window === ownerWindow)
-    const animations = animationRealm || Animations(ownerWindow)
-    if (!animationRealm) animationRealms.push(animations)
-
     optionsBase = mergeOptions(optionsBase, withOptions)
     options = optionsAtMedia(optionsBase)
     pluginList = withPlugins || pluginList
 
     storeElements()
 
-    engine = createEngine(options, animations)
+    engine = createEngine(options)
 
     optionsMediaQueries([
       optionsBase,
@@ -121,16 +110,13 @@ function EmblaCarousel(
     if (!options.active) return
 
     engine.translate.to(engine.location.get())
+    engine.animation.init()
     engine.slidesInView.init()
     engine.slideFocus.init()
     engine.eventHandler.init(self)
     engine.resizeHandler.init(self)
     engine.slidesHandler.init(self)
 
-    documentVisibleHandler.add(ownerDocument, 'visibilitychange', () => {
-      if (ownerDocument.hidden) animations.reset()
-    })
-
     if (engine.options.loop) engine.slideLooper.loop()
     if (container.offsetParent && slides.length) engine.dragHandler.init(self)
 
@@ -149,16 +135,15 @@ function EmblaCarousel(
 
   function deActivate(): void {
     engine.dragHandler.destroy()
-    engine.animation.stop()
     engine.eventStore.clear()
     engine.translate.clear()
     engine.slideLooper.clear()
     engine.resizeHandler.destroy()
     engine.slidesHandler.destroy()
     engine.slidesInView.destroy()
+    engine.animation.destroy()
     pluginsHandler.destroy()
     mediaHandlers.clear()
-    documentVisibleHandler.clear()
   }
 
   function destroy(): void {
@@ -270,7 +255,6 @@ function EmblaCarousel(
   return self
 }
 
-EmblaCarousel.animationRealms = <AnimationsType[]>[]
 EmblaCarousel.globalOptions = <EmblaOptionsType | undefined>undefined
 
 export default EmblaCarousel

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

@@ -1,4 +1,10 @@
 import { Alignment } from './Alignment'
+import {
+  Animations,
+  AnimationsType,
+  AnimationsUpdateType,
+  AnimationsRenderType
+} from './Animations'
 import { Axis, AxisType } from './Axis'
 import { Counter, CounterType } from './Counter'
 import { Direction, DirectionType } from './Direction'
@@ -30,20 +36,14 @@ import { SlidesToScroll, SlidesToScrollType } from './SlidesToScroll'
 import { Translate, TranslateType } from './Translate'
 import { arrayKeys, arrayLast, arrayLastIndex, WindowType } from './utils'
 import { Vector1D, Vector1DType } from './Vector1d'
-import {
-  AnimationType,
-  AnimationUpdateType,
-  AnimationsType,
-  AnimationRenderType
-} from './Animations'
 
 export type EngineType = {
   ownerDocument: Document
   ownerWindow: WindowType
   eventHandler: EventHandlerType
   axis: AxisType
   direction: DirectionType
-  animation: AnimationType
+  animation: AnimationsType
   scrollBounds: ScrollBoundsType
   scrollLooper: ScrollLooperType
   scrollProgress: ScrollProgressType
@@ -82,8 +82,7 @@ export function Engine(
   ownerDocument: Document,
   ownerWindow: WindowType,
   options: OptionsType,
-  eventHandler: EventHandlerType,
-  animations: AnimationsType
+  eventHandler: EventHandlerType
 ): EngineType {
   // Options
   const {
@@ -160,7 +159,7 @@ export function Engine(
   const slideIndexes = arrayKeys(slides)
 
   // Animation
-  const update: AnimationUpdateType = ({
+  const update: AnimationsUpdateType = ({
     dragHandler,
     scrollBody,
     scrollBounds,
@@ -170,7 +169,7 @@ export function Engine(
     scrollBody.seek()
   }
 
-  const render: AnimationRenderType = (
+  const render: AnimationsRenderType = (
     {
       scrollBody,
       translate,
@@ -203,13 +202,12 @@ export function Engine(
 
     translate.to(offsetLocation.get())
   }
-
-  const animation: AnimationType = {
-    start: () => animations.start(engine),
-    stop: () => animations.stop(engine),
-    update: () => update(engine),
-    render: (lagOffset: number) => render(engine, lagOffset)
-  }
+  const animation = Animations(
+    ownerDocument,
+    ownerWindow,
+    () => update(engine),
+    (lagOffset: number) => render(engine, lagOffset)
+  )
 
   // Shared
   const friction = 0.68

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

@@ -1,4 +1,4 @@
-import { AnimationType } from './Animations'
+import { AnimationsType } from './Animations'
 import { CounterType } from './Counter'
 import { EventHandlerType } from './EventHandler'
 import { ScrollTargetType, TargetType } from './ScrollTarget'
@@ -10,7 +10,7 @@ export type ScrollToType = {
 }
 
 export function ScrollTo(
-  animation: AnimationType,
+  animation: AnimationsType,
   indexCurrent: CounterType,
   indexPrevious: CounterType,
   scrollTarget: ScrollTargetType,