Clean up SSR code.

davidjerleke · davidjerleke · commit 56b9b4168e10 · 2025-02-27T19:24:06.000+01:00
diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx
@@ -70,10 +70,11 @@ export const IosPickerItem = (props) => {
 
   const inactivateEmblaTransform = useCallback((emblaApi) => {
     if (!emblaApi) return
-    const { translate, slideLooper } = emblaApi.internalEngine()
-    translate.clear()
-    translate.toggleActive(false)
-    slideLooper.loopPoints.forEach(({ translate }) => {
+
+    const { translate, slideTranslates } = emblaApi.internalEngine()
+    const translates = [translate, ...slideTranslates]
+
+    translates.forEach((translate) => {
       translate.clear()
       translate.toggleActive(false)
     })
diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx
@@ -88,10 +88,11 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
   const inactivateEmblaTransform = useCallback(
     (emblaApi: EmblaCarouselType) => {
       if (!emblaApi) return
-      const { translate, slideLooper } = emblaApi.internalEngine()
-      translate.clear()
-      translate.toggleActive(false)
-      slideLooper.loopPoints.forEach(({ translate }) => {
+
+      const { translate, slideTranslates } = emblaApi.internalEngine()
+      const translates = [translate, ...slideTranslates]
+
+      translates.forEach((translate) => {
         translate.clear()
         translate.toggleActive(false)
       })
diff --git a/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx b/packages/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx
@@ -88,10 +88,11 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
   const inactivateEmblaTransform = useCallback(
     (emblaApi: EmblaCarouselType) => {
       if (!emblaApi) return
-      const { translate, slideLooper } = emblaApi.internalEngine()
-      translate.clear()
-      translate.toggleActive(false)
-      slideLooper.loopPoints.forEach(({ translate }) => {
+
+      const { translate, slideTranslates } = emblaApi.internalEngine()
+      const translates = [translate, ...slideTranslates]
+
+      translates.forEach((translate) => {
         translate.clear()
         translate.toggleActive(false)
       })
diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.js b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.js
@@ -66,10 +66,10 @@ const rotateWheel = (emblaApi, slideCount, rotationOffset) => {
 }
 
 const inactivateEmblaTransform = (emblaApi) => {
-  const { translate, slideLooper } = emblaApi.internalEngine()
-  translate.clear()
-  translate.toggleActive(false)
-  slideLooper.loopPoints.forEach(({ translate }) => {
+  const { translate, slideTranslates } = emblaApi.internalEngine()
+  const translates = [translate, ...slideTranslates]
+
+  translates.forEach((translate) => {
     translate.clear()
     translate.toggleActive(false)
   })
diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesDist/IosPicker/EmblaCarouselIosPicker.ts
@@ -84,10 +84,10 @@ const rotateWheel = (
 }
 
 const inactivateEmblaTransform = (emblaApi: EmblaCarouselType): void => {
-  const { translate, slideLooper } = emblaApi.internalEngine()
-  translate.clear()
-  translate.toggleActive(false)
-  slideLooper.loopPoints.forEach(({ translate }) => {
+  const { translate, slideTranslates } = emblaApi.internalEngine()
+  const translates = [translate, ...slideTranslates]
+
+  translates.forEach((translate) => {
     translate.clear()
     translate.toggleActive(false)
   })
diff --git a/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarouselIosPicker.ts b/packages/embla-carousel-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/IosPicker/EmblaCarouselIosPicker.ts
@@ -84,10 +84,10 @@ const rotateWheel = (
 }
 
 const inactivateEmblaTransform = (emblaApi: EmblaCarouselType): void => {
-  const { translate, slideLooper } = emblaApi.internalEngine()
-  translate.clear()
-  translate.toggleActive(false)
-  slideLooper.loopPoints.forEach(({ translate }) => {
+  const { translate, slideTranslates } = emblaApi.internalEngine()
+  const translates = [translate, ...slideTranslates]
+
+  translates.forEach((translate) => {
     translate.clear()
     translate.toggleActive(false)
   })
diff --git a/packages/embla-carousel-fade/src/components/Fade.ts b/packages/embla-carousel-fade/src/components/Fade.ts
@@ -89,7 +89,6 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType {
 
     disableScroll()
     fadeToSelectedSnapInstantly()
-    emblaApi.containerNode().style.transform = 'none'
   }
 
   function destroy(): void {
@@ -108,7 +107,6 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType {
     emblaApi.slideNodes().forEach((slideNode) => {
       const slideStyle = slideNode.style
       slideStyle.opacity = ''
-      slideStyle.transform = ''
       slideStyle.pointerEvents = ''
     })
 
@@ -148,15 +146,15 @@ function Fade(userOptions: FadeOptionsType = {}): FadeType {
   }
 
   function disableScroll(): void {
-    const { translate, slideLooper } = emblaApi.internalEngine()
+    const { translate, slideTranslates } = emblaApi.internalEngine()
+    const translates = [translate, ...slideTranslates]
 
-    translate.clear()
-    translate.toggleActive(false)
-
-    slideLooper.loopPoints.forEach(({ translate }) => {
+    translates.forEach((translate) => {
       translate.clear()
       translate.toggleActive(false)
     })
+
+    emblaApi.containerNode().style.transform = 'translate(0px,0px)'
   }
 
   function lockExcessiveScroll(fadeIndex: number | null): void {
diff --git a/packages/embla-carousel/src/components/Animations.ts b/packages/embla-carousel/src/components/Animations.ts
@@ -71,6 +71,7 @@ export function Animations(
   }
 
   function stop(): void {
+    if (!animationId) return
     windowInstance.cancelAnimationFrame(animationId)
     lastTimeStamp = null
     accumulatedTime = 0
diff --git a/packages/embla-carousel/src/components/EmblaCarousel.ts b/packages/embla-carousel/src/components/EmblaCarousel.ts
@@ -81,11 +81,8 @@ function EmblaCarousel(
     container: HTMLElement,
     slides: HTMLElement[]
   ): EngineType {
-    nodeHandler.clearOffsets(container, ...slides)
-
     const ssrOptions = isSsr ? { direction: 'ltr' } : {}
     const engineOptions = mergeOptions(options, ssrOptions)
-
     const engine = Engine(
       root,
       container,
@@ -101,6 +98,7 @@ function EmblaCarousel(
       const optionsWithoutLoop = mergeOptions(options, { loop: false })
       return createEngine(optionsWithoutLoop, container, slides)
     }
+
     return engine
   }
 
@@ -142,6 +140,8 @@ function EmblaCarousel(
 
     if (!isSsr && ownerWindow) {
       engine.translate.to(engine.location.get())
+      if (engine.options.loop) engine.slideLooper.loop()
+
       engine.animation.init(ownerWindow)
       engine.resizeHandler.init(ownerWindow)
       engine.slidesInView.init(ownerWindow)
@@ -150,7 +150,6 @@ function EmblaCarousel(
       engine.eventHandler.init(self)
       engine.watchHandler.init(self)
 
-      if (engine.options.loop) engine.slideLooper.loop()
       if (container.offsetParent && slides.length) {
         engine.dragHandler.init(ownerWindow)
       }
@@ -176,10 +175,10 @@ function EmblaCarousel(
     engine.slidesInView.destroy()
     engine.animation.destroy()
     pluginsHandler.destroy()
-    engine.translate.clear()
-    engine.slideLooper.clear()
     engine.eventStore.clear()
     mediaHandlers.clear()
+    engine.translate.clear()
+    engine.slideTranslates.forEach((translate) => translate.clear())
   }
 
   function destroy(): void {
@@ -244,12 +243,12 @@ function EmblaCarousel(
     return isSsr ? ssrHandler.getStyles(container, slides) : ''
   }
 
-  function snapList(): number[] {
-    return engine.snapList
+  function scrollProgress(): number {
+    return engine.scrollProgress.get(engine.offsetLocation.get())
   }
 
-  function scrollProgress(): number {
-    return engine.scrollProgress.get(engine.location.get())
+  function snapList(): number[] {
+    return engine.snapList
   }
 
   function selectedSnap(): number {
diff --git a/packages/embla-carousel/src/components/Engine.ts b/packages/embla-carousel/src/components/Engine.ts
@@ -64,6 +64,7 @@ export type EngineType = {
   slidesToScroll: SlidesToScrollType
   target: Vector1DType
   translate: TranslateType
+  slideTranslates: TranslateType[]
   resizeHandler: ResizeHandlerType
   slidesHandler: SlidesHandlerType
   nodeHandler: NodeHandlerType
@@ -110,9 +111,8 @@ export function Engine(
 
   // Measurements
   const pixelTolerance = isSsr ? 0 : 2
-  const containerRect = nodeHandler.getRect(container)
-  const slideRects = slides.map(nodeHandler.getRect)
   const axis = Axis(scrollAxis, direction)
+  const { containerRect, slideRects } = nodeHandler.getRects(container, slides)
   const viewSize = axis.measureSize(containerRect)
   const percentOfView = PercentOfView(viewSize)
   const alignment = Alignment(align, viewSize)
@@ -223,6 +223,9 @@ export function Engine(
   const previousLocation = Vector1D(startLocation)
   const offsetLocation = Vector1D(startLocation)
   const target = Vector1D(startLocation)
+  const translate = Translate(axis, container)
+  const slideTranslates = slides.map((slide) => Translate(axis, slide))
+
   const scrollBody = ScrollBody(
     location,
     offsetLocation,
@@ -343,15 +346,14 @@ export function Engine(
     scrollTarget,
     scrollTo,
     slideLooper: SlideLooper(
-      axis,
       viewSize,
       contentSize,
       slideSizes,
       slideSizesWithGaps,
       snaps,
       scrollSnaps,
       offsetLocation,
-      slides
+      slideTranslates
     ),
     slideFocus,
     slidesHandler: SlidesHandler(
@@ -364,8 +366,9 @@ export function Engine(
     slideIndexes,
     slideRegistry,
     slidesToScroll,
+    slideTranslates,
+    translate,
     target,
-    translate: Translate(axis, container),
     watchHandler
   }
 
diff --git a/packages/embla-carousel/src/components/NodeHandler.ts b/packages/embla-carousel/src/components/NodeHandler.ts
@@ -16,12 +16,17 @@ type NodesType = {
   slides: HTMLElement[]
 }
 
+type NodeRectsType = {
+  containerRect: NodeRectType
+  slideRects: NodeRectType[]
+}
+
 export type NodeHandlerType = {
   ownerDocument: Document | null
   ownerWindow: WindowType | null
-  clearOffsets: (...nodes: HTMLElement[]) => void
   getNodes: (options: OptionsType) => NodesType
   getRect: (node: HTMLElement) => NodeRectType
+  getRects: (container: HTMLElement, slides: HTMLElement[]) => NodeRectsType
 }
 
 export function NodeHandler(root: HTMLElement): NodeHandlerType {
@@ -30,28 +35,35 @@ export function NodeHandler(root: HTMLElement): NodeHandlerType {
     ? <WindowType>ownerDocument.defaultView
     : null
 
-  function clearOffsets(...nodes: HTMLElement[]): void {
-    if (!root) return
-
-    nodes.forEach((node) => {
-      const style = node.style
-      if (!style.transform) style.transform = 'none'
-    })
-  }
-
   function getRect(node: HTMLElement): NodeRectType {
-    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = node
+    const { offsetTop: top, offsetLeft: left, offsetWidth, offsetHeight } = node
     const offset: NodeRectType = {
-      top: offsetTop,
-      right: offsetLeft + offsetWidth,
-      bottom: offsetTop + offsetHeight,
-      left: offsetLeft,
+      top,
+      right: left + offsetWidth,
+      bottom: top + offsetHeight,
+      left,
       width: offsetWidth,
       height: offsetHeight
     }
+
     return offset
   }
 
+  function getRects(
+    container: HTMLElement,
+    slides: HTMLElement[]
+  ): NodeRectsType {
+    const containerStyle = root ? container.style : { transform: '' }
+    const previousTransform = containerStyle.transform
+    containerStyle.transform = 'none'
+
+    const containerRect = getRect(container)
+    const slideRects = slides.map(getRect)
+
+    containerStyle.transform = previousTransform
+    return { containerRect, slideRects }
+  }
+
   function createSsrNode(
     offsetLeft: number,
     offsetTop: number,
@@ -99,9 +111,9 @@ export function NodeHandler(root: HTMLElement): NodeHandlerType {
   const self: NodeHandlerType = {
     ownerDocument,
     ownerWindow,
-    clearOffsets,
     getNodes,
-    getRect
+    getRect,
+    getRects
   }
   return self
 }
diff --git a/packages/embla-carousel/src/components/SlideLooper.ts b/packages/embla-carousel/src/components/SlideLooper.ts
@@ -1,7 +1,6 @@
-import { AxisType } from './Axis'
 import { arrayKeys } from './utils'
 import { Vector1D, Vector1DType } from './Vector1d'
-import { Translate, TranslateType } from './Translate'
+import { TranslateType } from './Translate'
 
 type SlideBoundType = {
   start: number
@@ -18,21 +17,19 @@ type LoopPointType = {
 
 export type SlideLooperType = {
   canLoop: () => boolean
-  clear: () => void
   loop: () => void
   loopPoints: LoopPointType[]
 }
 
 export function SlideLooper(
-  axis: AxisType,
   viewSize: number,
   contentSize: number,
   slideSizes: number[],
   slideSizesWithGaps: number[],
   snaps: number[],
   scrollSnaps: number[],
   location: Vector1DType,
-  slides: HTMLElement[]
+  slideTranslates: TranslateType[]
 ): SlideLooperType {
   const roundingSafety = 0.5
   const ascItems = arrayKeys(slideSizesWithGaps)
@@ -76,7 +73,7 @@ export function SlideLooper(
         index,
         loopPoint,
         slideLocation: Vector1D(-1),
-        translate: Translate(axis, slides[index]),
+        translate: slideTranslates[index],
         target: () => (location.get() > loopPoint ? initial : altered)
       }
     })
@@ -111,13 +108,8 @@ export function SlideLooper(
     })
   }
 
-  function clear(): void {
-    slides.forEach((slide) => Translate(axis, slide).clear())
-  }
-
   const self: SlideLooperType = {
     canLoop,
-    clear,
     loop,
     loopPoints
   }
diff --git a/packages/embla-carousel/src/components/Translate.ts b/packages/embla-carousel/src/components/Translate.ts

Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,7 @@ export function Animations(`
`71`	`71`	`}`
`72`	`72`
`73`	`73`	`function stop(): void {`
	`74`	`+ if (!animationId) return`
`74`	`75`	`windowInstance.cancelAnimationFrame(animationId)`
`75`	`76`	`lastTimeStamp = null`
`76`	`77`	`accumulatedTime = 0`