Refactor Vector component

packages/embla-carousel-auto-height/src/components/AutoHeight.ts

@@ -54,7 +54,7 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
 
   function highestInView(): number {
     const { slidesInView, target } = carousel.internalEngine()
-    const inViewIndexes = slidesInView.check(target.value, slideBounds)
+    const inViewIndexes = slidesInView.check(target.get(), slideBounds)
     const heights = inViewIndexes.map((index) => slideHeights[index])
     return heights.reduce((a, b) => Math.max(a, b), 0)
   }

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.jsx

@@ -26,12 +26,12 @@ const EmblaCarousel = (props) => {
 
         emblaApi.reInit()
         const newEngine = emblaApi.internalEngine()
-        const copyEngineModules = ['scrollBody', 'location', 'target']
+        const copyEngineModules = ['location', 'target', 'scrollBody']
         copyEngineModules.forEach((engineModule) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])
         })
 
-        newEngine.translate.to(oldEngine.location.value)
+        newEngine.translate.to(oldEngine.location.get())
         const { index } = newEngine.scrollTarget.byDistance(0, false)
         newEngine.index.set(index)
         newEngine.animation.start()
@@ -48,7 +48,7 @@ const EmblaCarousel = (props) => {
       const engine = emblaApi.internalEngine()
 
       if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
-        const boundsActive = engine.limit.reachedMax(engine.target.value)
+        const boundsActive = engine.limit.reachedMax(engine.target.get())
         engine.scrollBounds.toggleActive(boundsActive)
         emblaApi.on('pointerUp', reloadAfterPointerUp)
       } else {
@@ -100,6 +100,9 @@ const EmblaCarousel = (props) => {
     const onResize = () => emblaApi.reInit()
     window.addEventListener('resize', onResize)
     emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))
+
+    // @ts-ignore
+    window.embla = emblaApi
   }, [emblaApi, addScrollListener])
 
   useEffect(() => {

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/InfiniteScroll/EmblaCarousel.tsx

@@ -40,15 +40,15 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
         emblaApi.reInit()
         const newEngine = emblaApi.internalEngine()
         const copyEngineModules: (keyof EngineType)[] = [
-          'scrollBody',
           'location',
           'target',
+          'scrollBody',
         ]
         copyEngineModules.forEach((engineModule) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])
         })
 
-        newEngine.translate.to(oldEngine.location.value)
+        newEngine.translate.to(oldEngine.location.get())
         const { index } = newEngine.scrollTarget.byDistance(0, false)
         newEngine.index.set(index)
         newEngine.animation.start()
@@ -65,7 +65,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       const engine = emblaApi.internalEngine()
 
       if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
-        const boundsActive = engine.limit.reachedMax(engine.target.value)
+        const boundsActive = engine.limit.reachedMax(engine.target.get())
         engine.scrollBounds.toggleActive(boundsActive)
         emblaApi.on('pointerUp', reloadAfterPointerUp)
       } else {
@@ -117,6 +117,9 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const onResize = () => emblaApi.reInit()
     window.addEventListener('resize', onResize)
     emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))
+
+    // @ts-ignore
+    window.embla = emblaApi
   }, [emblaApi, addScrollListener])
 
   useEffect(() => {

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.jsx

@@ -112,7 +112,7 @@ export const IosPickerItem = (props) => {
 
     emblaApi.on('pointerUp', () => {
       const { scrollTo, target, location } = emblaApi.internalEngine()
-      const diffToTarget = target.value - location.value
+      const diffToTarget = target.get() - location.get()
       const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
       const distance = diffToTarget * factor
       scrollTo.distance(distance, true)

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/IosPicker/EmblaCarouselIosPickerItem.tsx

@@ -140,7 +140,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
 
     emblaApi.on('pointerUp', () => {
       const { scrollTo, target, location } = emblaApi.internalEngine()
-      const diffToTarget = target.value - location.value
+      const diffToTarget = target.get() - location.get()
       const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
       const distance = diffToTarget * factor
       scrollTo.distance(distance, true)

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Progress/EmblaCarousel.jsx

@@ -41,7 +41,7 @@ const EmblaCarousel = (props) => {
       <div className="embla__progress">
         <div
           className="embla__progress__bar"
-          style={{ transform: `translateX(${scrollProgress}%)` }}
+          style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
         />
       </div>
     </div>

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesDist/Progress/EmblaCarousel.tsx

@@ -46,7 +46,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       <div className="embla__progress">
         <div
           className="embla__progress__bar"
-          style={{ transform: `translateX(${scrollProgress}%)` }}
+          style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
         />
       </div>
     </div>

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel.tsx

@@ -40,15 +40,15 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
         emblaApi.reInit()
         const newEngine = emblaApi.internalEngine()
         const copyEngineModules: (keyof EngineType)[] = [
-          'scrollBody',
           'location',
           'target',
+          'scrollBody',
         ]
         copyEngineModules.forEach((engineModule) => {
           Object.assign(newEngine[engineModule], oldEngine[engineModule])
         })
 
-        newEngine.translate.to(oldEngine.location.value)
+        newEngine.translate.to(oldEngine.location.get())
         const { index } = newEngine.scrollTarget.byDistance(0, false)
         newEngine.index.set(index)
         newEngine.animation.start()
@@ -65,7 +65,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       const engine = emblaApi.internalEngine()
 
       if (hasMoreToLoadRef.current && engine.dragHandler.pointerDown()) {
-        const boundsActive = engine.limit.reachedMax(engine.target.value)
+        const boundsActive = engine.limit.reachedMax(engine.target.get())
         engine.scrollBounds.toggleActive(boundsActive)
         emblaApi.on('pointerUp', reloadAfterPointerUp)
       } else {
@@ -117,6 +117,9 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     const onResize = () => emblaApi.reInit()
     window.addEventListener('resize', onResize)
     emblaApi.on('destroy', () => window.removeEventListener('resize', onResize))
+
+    // @ts-ignore
+    window.embla = emblaApi
   }, [emblaApi, addScrollListener])
 
   useEffect(() => {

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/IosPicker/EmblaCarouselIosPickerItem.tsx

@@ -140,7 +140,7 @@ export const IosPickerItem: React.FC<PropType> = (props) => {
 
     emblaApi.on('pointerUp', () => {
       const { scrollTo, target, location } = emblaApi.internalEngine()
-      const diffToTarget = target.value - location.value
+      const diffToTarget = target.get() - location.get()
       const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
       const distance = diffToTarget * factor
       scrollTo.distance(distance, true)

packages/embla-carousel-docs/src/components/CodeSandbox/React/SandboxFilesSrc/Progress/EmblaCarousel.tsx

@@ -46,7 +46,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       <div className="embla__progress">
         <div
           className="embla__progress__bar"
-          style={{ transform: `translateX(${scrollProgress}%)` }}
+          style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
         />
       </div>
     </div>

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/InfiniteScroll/infinite-scroll.js

@@ -39,7 +39,7 @@ export const setupInfiniteScroll = (emblaApi, loadMoreCallback) => {
   const deactivateBounds = () => {
     if (slideCount === emblaApi.slideNodes().length - 1) return
     const engine = emblaApi.internalEngine()
-    const boundsActive = engine.limit.reachedMax(engine.target.value)
+    const boundsActive = engine.limit.reachedMax(engine.target.get())
     engine.scrollBounds.toggleActive(boundsActive)
   }
 
@@ -57,7 +57,7 @@ export const setupInfiniteScroll = (emblaApi, loadMoreCallback) => {
       Object.assign(newEngine[engineModule], oldEngine[engineModule]),
     )
 
-    newEngine.translate.to(oldEngine.location.value)
+    newEngine.translate.to(oldEngine.location.get())
     const { index } = newEngine.scrollTarget.byDistance(0, false)
     newEngine.index.set(index)
     newEngine.animation.start()

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/InfiniteScroll/infinite-scroll.ts

@@ -55,7 +55,7 @@ export const setupInfiniteScroll = (
   const deactivateBounds = () => {
     if (slideCount === emblaApi.slideNodes().length - 1) return
     const engine = emblaApi.internalEngine()
-    const boundsActive = engine.limit.reachedMax(engine.target.value)
+    const boundsActive = engine.limit.reachedMax(engine.target.get())
     engine.scrollBounds.toggleActive(boundsActive)
   }
 
@@ -77,7 +77,7 @@ export const setupInfiniteScroll = (
       Object.assign(newEngine[engineModule], oldEngine[engineModule]),
     )
 
-    newEngine.translate.to(oldEngine.location.value)
+    newEngine.translate.to(oldEngine.location.get())
     const { index } = newEngine.scrollTarget.byDistance(0, false)
     newEngine.index.set(index)
     newEngine.animation.start()

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/IosPicker/ios-picker.js

@@ -97,7 +97,7 @@ export const setupIosPicker = (iosPickerNode, options) => {
 
   emblaApi.on('pointerUp', () => {
     const { scrollTo, target, location } = emblaApi.internalEngine()
-    const diffToTarget = target.value - location.value
+    const diffToTarget = target.get() - location.get()
     const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
     const distance = diffToTarget * factor
     scrollTo.distance(distance, true)

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/IosPicker/ios-picker.ts

@@ -118,7 +118,7 @@ export const setupIosPicker = (
 
   emblaApi.on('pointerUp', () => {
     const { scrollTo, target, location } = emblaApi.internalEngine()
-    const diffToTarget = target.value - location.value
+    const diffToTarget = target.get() - location.get()
     const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
     const distance = diffToTarget * factor
     scrollTo.distance(distance, true)

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Progress/progress-bar.js

@@ -1,7 +1,7 @@
 export const setupProgressBar = (emblaApi, progressNode) => {
   const applyProgress = () => {
     const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()))
-    progressNode.style.transform = `translateX(${progress * 100}%)`
+    progressNode.style.transform = `translate3d(${progress * 100}%,0px,0px)`
   }
 
   const removeProgress = () => {

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Progress/progress-bar.ts

@@ -9,7 +9,7 @@ export const setupProgressBar = (
 } => {
   const applyProgress = (): void => {
     const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()))
-    progressNode.style.transform = `translateX(${progress * 100}%)`
+    progressNode.style.transform = `translate3d(${progress * 100}%,0px,0px)`
   }
 
   const removeProgress = (): void => {

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/InfiniteScroll/infinite-scroll.ts

@@ -55,7 +55,7 @@ export const setupInfiniteScroll = (
   const deactivateBounds = () => {
     if (slideCount === emblaApi.slideNodes().length - 1) return
     const engine = emblaApi.internalEngine()
-    const boundsActive = engine.limit.reachedMax(engine.target.value)
+    const boundsActive = engine.limit.reachedMax(engine.target.get())
     engine.scrollBounds.toggleActive(boundsActive)
   }
 
@@ -77,7 +77,7 @@ export const setupInfiniteScroll = (
       Object.assign(newEngine[engineModule], oldEngine[engineModule]),
     )
 
-    newEngine.translate.to(oldEngine.location.value)
+    newEngine.translate.to(oldEngine.location.get())
     const { index } = newEngine.scrollTarget.byDistance(0, false)
     newEngine.index.set(index)
     newEngine.animation.start()

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/IosPicker/ios-picker.ts

@@ -118,7 +118,7 @@ export const setupIosPicker = (
 
   emblaApi.on('pointerUp', () => {
     const { scrollTo, target, location } = emblaApi.internalEngine()
-    const diffToTarget = target.value - location.value
+    const diffToTarget = target.get() - location.get()
     const factor = Math.abs(diffToTarget) < WHEEL_ITEM_SIZE / 2.5 ? 10 : 0.1
     const distance = diffToTarget * factor
     scrollTo.distance(distance, true)

packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/Progress/progress-bar.ts

@@ -9,7 +9,7 @@ export const setupProgressBar = (
 } => {
   const applyProgress = (): void => {
     const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()))
-    progressNode.style.transform = `translateX(${progress * 100}%)`
+    progressNode.style.transform = `translate3d(${progress * 100}%,0px,0px)`
   }
 
   const removeProgress = (): void => {

packages/embla-carousel/src/__tests__/ScrollBody.test.ts

@@ -11,63 +11,63 @@ const location = Vector1D(initialLocation)
 const scrollBody = ScrollBody(location, target, 25, 0.68)
 
 beforeEach(() => {
-  target.value = initialLocation
-  location.value = initialLocation
+  target.set(initialLocation)
+  location.set(initialLocation)
 })
 
 describe('ScrollBody', () => {
   describe('Seeks target in a', () => {
     test('Positive direction when target is positive', () => {
-      target.value = targetPositive
+      target.set(targetPositive)
       scrollBody.seek()
-      expect(location.value).toBeGreaterThan(initialLocation)
+      expect(location.get()).toBeGreaterThan(initialLocation)
     })
 
     test('Negative direction when target is negative', () => {
-      target.value = targetNegative
+      target.set(targetNegative)
       scrollBody.seek()
-      expect(location.value).toBeLessThan(initialLocation)
+      expect(location.get()).toBeLessThan(initialLocation)
     })
   })
 
   describe('Instantly goes to', () => {
     test('Positive target when duration is 0', () => {
-      target.value = targetPositive
+      target.set(targetPositive)
       scrollBody.useDuration(0)
       scrollBody.seek()
-      expect(location.value).toBe(targetPositive)
+      expect(location.get()).toBe(targetPositive)
     })
 
     test('Negative target when duration is 0', () => {
-      target.value = targetNegative
+      target.set(targetNegative)
       scrollBody.useDuration(0)
       scrollBody.seek()
-      expect(location.value).toBe(targetNegative)
+      expect(location.get()).toBe(targetNegative)
     })
   })
 
   describe('Direction is', () => {
     test('1 when it seeks a positive target', () => {
-      target.value = targetPositive
+      target.set(targetPositive)
       scrollBody.seek()
       expect(scrollBody.direction()).toBe(directionPositive)
     })
 
     test('1 when it instantly goes to a positive target', () => {
-      target.value = targetPositive
+      target.set(targetPositive)
       scrollBody.useDuration(0)
       scrollBody.seek()
       expect(scrollBody.direction()).toBe(directionPositive)
     })
 
     test('-1 when it seeks a negative target', () => {
-      target.value = targetNegative
+      target.set(targetNegative)
       scrollBody.seek()
       expect(scrollBody.direction()).toBe(directionNegative)
     })
 
     test('-1 when it instantly goes to a negative target', () => {
-      target.value = targetNegative
+      target.set(targetNegative)
       scrollBody.useDuration(0)
       scrollBody.seek()
       expect(scrollBody.direction()).toBe(directionNegative)
@@ -76,15 +76,15 @@ describe('ScrollBody', () => {
 
   describe('Settle is', () => {
     test('True when diff to given target is <= 0.001', () => {
-      target.value = targetPositive
-      location.value = 9.999
+      target.set(targetPositive)
+      location.set(9.999)
       scrollBody.seek()
       expect(scrollBody.settled()).toBe(true)
     })
 
     test('False when diff to given target is > 0.001', () => {
-      target.value = targetPositive
-      location.value = 9.99
+      target.set(targetPositive)
+      location.set(9.99)
       scrollBody.seek()
       expect(scrollBody.settled()).toBe(false)
     })