Clear pixel tolerance during SSR

davidjerleke · Feb 4, 2025 · 196cbdf · 196cbdf
1 parent 4ae9e0c
commit 196cbdf
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
diff --git a/packages/embla-carousel/src/components/EmblaCarousel.ts b/packages/embla-carousel/src/components/EmblaCarousel.ts
@@ -83,7 +83,6 @@ function EmblaCarousel(
   ): EngineType {
     nodeHandler.clearOffsets(container, ...slides)
 
-    // TODO: Pass pixelTolerance, should be 0 when SSR
     const engine = Engine(
       root,
       container,
@@ -137,21 +136,21 @@ function EmblaCarousel(
     ]).forEach((query) => mediaHandlers.add(query, 'change', reActivate))
 
     if (!options.active) return
-    if (!ownerWindow) return
-    if (isSsr) return
 
-    engine.translate.to(engine.location.get())
-    engine.animation.init(ownerWindow)
-    engine.resizeHandler.init(ownerWindow)
-    engine.slidesInView.init(ownerWindow)
-    engine.slidesHandler.init(ownerWindow)
-    engine.eventHandler.init(self)
-    engine.watchHandler.init(self)
-    engine.slideFocus.init()
-
-    if (engine.options.loop) engine.slideLooper.loop()
-    if (container.offsetParent && slides.length) {
-      engine.dragHandler.init(ownerWindow)
+    if (!isSsr && ownerWindow) {
+      engine.translate.to(engine.location.get())
+      engine.animation.init(ownerWindow)
+      engine.resizeHandler.init(ownerWindow)
+      engine.slidesInView.init(ownerWindow)
+      engine.slidesHandler.init(ownerWindow)
+      engine.slideFocus.init(ownerWindow)
+      engine.eventHandler.init(self)
+      engine.watchHandler.init(self)
+
+      if (engine.options.loop) engine.slideLooper.loop()
+      if (container.offsetParent && slides.length) {
+        engine.dragHandler.init(ownerWindow)
+      }
     }
 
     pluginApis = pluginsHandler.init(self, pluginList)

diff --git a/packages/embla-carousel/src/components/Engine.ts b/packages/embla-carousel/src/components/Engine.ts
@@ -109,7 +109,7 @@ export function Engine(
   } = options
 
   // Measurements
-  const pixelTolerance = 2
+  const pixelTolerance = isSsr ? 0 : 2
   const containerRect = nodeHandler.getRect(container)
   const slideRects = slides.map(nodeHandler.getRect)
   const axis = Axis(scrollAxis, direction)

diff --git a/packages/embla-carousel/src/components/ScrollContain.ts b/packages/embla-carousel/src/components/ScrollContain.ts
@@ -21,7 +21,7 @@ export function ScrollContain(
   const snapsContained = measureContained()
 
   function usePixelTolerance(bound: number, snap: number): boolean {
-    return deltaAbs(bound, snap) <= 1
+    return pixelTolerance ? deltaAbs(bound, snap) <= 1 : false
   }
 
   function findScrollContainLimit(): LimitType {

diff --git a/packages/embla-carousel/src/components/SlideFocus.ts b/packages/embla-carousel/src/components/SlideFocus.ts
@@ -4,10 +4,10 @@ import { EventStoreType } from './EventStore'
 import { ScrollBodyType } from './ScrollBody'
 import { ScrollToType } from './ScrollTo'
 import { SlideRegistryType } from './SlideRegistry'
-import { isNumber } from './utils'
+import { isNumber, WindowType } from './utils'
 
 export type SlideFocusType = {
-  init: () => void
+  init: (ownerWindow: WindowType) => void
 }
 
 export function SlideFocus(
@@ -24,10 +24,10 @@ export function SlideFocus(
   const focusListenerOptions = { passive: true, capture: true }
   let lastTabPressTime = 0
 
-  function init(): void {
+  function init(ownerWindow: WindowType): void {
     if (!active) return
 
-    eventStore.add(document, 'keydown', onKeyDown, false)
+    eventStore.add(ownerWindow.document, 'keydown', onKeyDown, false)
 
     slides.forEach((slide, slideIndex) => {
       eventStore.add(