Upgrade for embla-carousel v6 (#145)

* Update for v6 of Embla Carousel (#142)
* Upgrade embla-carousel in peerDeps & demos to v6 (#143)

Co-authored-by: Cody Marcoux <cody@studio123.ca>

README.md

@@ -50,7 +50,7 @@ import { useEmblaCarousel } from 'embla-carousel-react'
 import { setupWheelGestures } from 'embla-carousel-wheel-gestures'
 
 const EmblaCarouselComponent = ({ children }) => {
-  const [emblaRef, embla] = useEmblaCarousel({ loop: false })
+  const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: true })
 
   useEffect(() => embla && setupWheelGestures(embla), [embla])
 

docs/react/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "embla-carousel": "^4.5.0",
-    "embla-carousel-wheel-gestures": "^1.1.1",
+    "embla-carousel-react": "^6.0.1",
+    "embla-carousel-wheel-gestures": "^1.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

docs/react/src/js/EmblaCarousel.tsx

@@ -1,11 +1,11 @@
+import useEmblaCarousel from 'embla-carousel-react'
 import { setupWheelGestures } from 'embla-carousel-wheel-gestures'
-import { useEmblaCarousel } from 'embla-carousel/react'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { DotButton, NextButton, PrevButton } from './EmblaCarouselButtons'
 
 const EmblaCarouselComponent = ({ children }: { children: React.ReactNode }) => {
-  const [emblaRef, embla] = useEmblaCarousel({ loop: false })
+  const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: true })
   const [prevBtnEnabled, setPrevBtnEnabled] = useState(false)
   const [nextBtnEnabled, setNextBtnEnabled] = useState(false)
   const [selectedIndex, setSelectedIndex] = useState(0)

docs/vanilla/package.json

@@ -9,8 +9,8 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "embla-carousel": "^4.5.0",
-    "embla-carousel-wheel-gestures": "^1.1.1",
+    "embla-carousel": "^6.0.1",
+    "embla-carousel-wheel-gestures": "^1.2.0",
     "events-polyfill": "^2.1.2",
     "core-js": "^3.11.1"
   },

docs/vanilla/src/js/index.ts

@@ -24,6 +24,7 @@ const radioButtonsArray = [].slice.call(radioButtons)
 
 const embla = EmblaCarousel(viewPort as HTMLElement, {
   loop: false,
+  skipSnaps: true,
 })
 
 const dotsArray = generateDotBtns(dots, embla)

embla-carousel-wheel-gestures/package.json

@@ -1,7 +1,7 @@
 {
   "name": "embla-carousel-wheel-gestures",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "wheel gestures for embla carousel",
   "main": "dist/index.js",
   "module": "dist/embla-carousel-wheel-gestures.esm.js",
@@ -48,7 +48,7 @@
   },
   "homepage": "https://github.com/xiel/embla-carousel-wheel-gestures#readme",
   "peerDependencies": {
-    "embla-carousel": "^4.5.0"
+    "embla-carousel": "^6.0.1"
   },
   "dependencies": {
     "wheel-gestures": "^2.2.5"
@@ -57,7 +57,7 @@
     "@testing-library/react": "^11.2.6",
     "@types/jest": "^26.0.23",
     "bundlewatch": "^0.3.2",
-    "embla-carousel": "^4.5.0",
+    "embla-carousel": "^6.0.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-app": "^6.2.2",

embla-carousel-wheel-gestures/src/setupWheelGestures.ts

@@ -1,7 +1,11 @@
 import { EmblaCarouselType } from 'embla-carousel'
 import WheelGestures, { WheelEventState } from 'wheel-gestures'
 
-type TEmblaCarousel = Pick<EmblaCarouselType, 'containerNode' | 'on' | 'off' | 'dangerouslyGetEngine'>
+type GetEngineFn = EmblaCarouselType['internalEngine']
+type TEmblaCarousel =
+  | Pick<EmblaCarouselType, 'containerNode' | 'on' | 'off' | 'internalEngine'>
+  // Backwards compatibility for embla-carousel v4 & v5. Can be removed in next major version
+  | (Pick<EmblaCarouselType, 'containerNode' | 'on' | 'off'> & { dangerouslyGetEngine: GetEngineFn })
 
 interface Options {
   wheelDraggingClass?: string
@@ -22,7 +26,7 @@ export function setupWheelGestures(embla: TEmblaCarousel, { wheelDraggingClass =
     embla.on('reInit', reInit)
     embla.on('destroy', cleanup)
 
-    const engine = embla.dangerouslyGetEngine()
+    const engine = 'internalEngine' in embla ? embla.internalEngine() : embla.dangerouslyGetEngine()
     const targetNode = embla.containerNode().parentNode as Element
     const wheelGestures = WheelGestures({
       preventWheelAction: engine.options.axis,

package.json

@@ -1,6 +1,9 @@
 {
   "name": "embla-carousel-wheel-gestures-workspace",
-  "workspaces": ["embla-carousel-wheel-gestures", "docs/*"],
+  "workspaces": [
+    "embla-carousel-wheel-gestures",
+    "docs/*"
+  ],
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -12,5 +15,6 @@
   "description": "workspace for embla-carousel-wheel-gestures",
   "repository": "git@github.com:xiel/embla-carousel-wheel-gestures.git",
   "author": "Felix Leupold <felix@xiel.de>",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {}
 }

yarn.lock

@@ -2401,9 +2401,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219:
-  version "1.0.30001228"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
-  integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
+  version "1.0.30001280"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001280.tgz"
+  integrity sha512-kFXwYvHe5rix25uwueBxC569o53J6TpnGu0BEEn+6Lhl2vsnAumRFWEBhDft1fwyo6m1r4i+RqA4+163FpeFcA==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -3326,10 +3326,17 @@ elliptic@^6.0.0, elliptic@^6.5.2:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
-embla-carousel@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-4.5.0.tgz#ac8a4cbf34f97a8ad5f7ae9caf58400fe92f1d7f"
-  integrity sha512-Y154DYESgzau+eIUH1hu4FNYRQmSFdzIr0dVE6Dhqv3IILCTLVcMmDosz5D0GpAd1jJDI1r0WbOBGBonA6wirw==
+embla-carousel-react@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-6.0.1.tgz#4a7d75860dc700bf7eb688ae5daa7a901d62fbb0"
+  integrity sha512-pNtxD1v90E4hIeNwolmmde3YcZEfFgV4xfZjiEjsI2feVDMmWWFEJC2nczsW2wruuaKQk5kPpe3M6m31T/p14Q==
+  dependencies:
+    embla-carousel "6.0.1"
+
+embla-carousel@6.0.1, embla-carousel@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-6.0.1.tgz#1974d64ad18a93963ba4c3532ae24fc18ec6562d"
+  integrity sha512-jz+7AqMOt+v6Ryi8jWVG4rK0rkqr5VunuNd/boGQb2z6lebtJSVR2VmKit3uQV9DkIPp92I9ZydiTYRquk9QUQ==
 
 emoji-regex@^7.0.1, emoji-regex@^7.0.2:
   version "7.0.3"