Merge pull request #475 from davidjerleke/feature/#455

Add support for multiple realms

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

@@ -16,17 +16,17 @@ export type AutoHeightOptionsType = AutoHeightType['options']
 
 function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
   let options: OptionsType
-  let carousel: EmblaCarouselType
+  let emblaApi: EmblaCarouselType
   let slideBounds: SlideBoundType[] = []
   let slideHeights: number[] = []
   const heightEvents: EmblaEventType[] = ['select', 'pointerUp']
   const inViewThreshold = 0.5
 
   function init(
-    embla: EmblaCarouselType,
+    emblaApiInstance: EmblaCarouselType,
     optionsHandler: OptionsHandlerType,
   ): void {
-    carousel = embla
+    emblaApi = emblaApiInstance
 
     const { mergeOptions, optionsAtMedia } = optionsHandler
     const optionsBase = mergeOptions(defaultOptions, AutoHeight.globalOptions)
@@ -37,23 +37,23 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
       options: { axis },
       slidesInView,
       slideRects,
-    } = carousel.internalEngine()
+    } = emblaApi.internalEngine()
     if (axis === 'y') return
 
     slideBounds = slidesInView.findSlideBounds(undefined, inViewThreshold)
     slideHeights = slideRects.map((rect) => rect.height)
 
-    heightEvents.forEach((evt) => carousel.on(evt, setContainerHeight))
+    heightEvents.forEach((evt) => emblaApi.on(evt, setContainerHeight))
     setContainerHeight()
   }
 
   function destroy(): void {
-    heightEvents.forEach((evt) => carousel.off(evt, setContainerHeight))
+    heightEvents.forEach((evt) => emblaApi.off(evt, setContainerHeight))
     setContainerHeight(undefined, 'destroy')
   }
 
   function highestInView(): number {
-    const { slidesInView, target } = carousel.internalEngine()
+    const { slidesInView, target } = emblaApi.internalEngine()
     const inViewIndexes = slidesInView.check(target.get(), slideBounds)
     const heights = inViewIndexes.map((index) => slideHeights[index])
     return heights.reduce((a, b) => Math.max(a, b), 0)
@@ -65,7 +65,7 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
   ): void {
     const height =
       evt === 'destroy' ? options.destroyHeight : `${highestInView()}px`
-    carousel.containerNode().style.height = height
+    emblaApi.containerNode().style.height = height
   }
 
   const self: AutoHeightType = {

packages/embla-carousel-autoplay/src/components/Autoplay.ts

@@ -22,16 +22,16 @@ export type AutoplayOptionsType = AutoplayType['options']
 
 function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
   let options: OptionsType
-  let carousel: EmblaCarouselType
+  let emblaApi: EmblaCarouselType
   let interaction: () => void
   let timer = 0
   let jump = false
 
   function init(
-    embla: EmblaCarouselType,
+    emblaApiInstance: EmblaCarouselType,
     optionsHandler: OptionsHandlerType,
   ): void {
-    carousel = embla
+    emblaApi = emblaApiInstance
 
     const { mergeOptions, optionsAtMedia } = optionsHandler
     const optionsBase = mergeOptions(defaultOptions, Autoplay.globalOptions)
@@ -41,32 +41,32 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
     jump = options.jump
     interaction = options.stopOnInteraction ? destroy : stop
 
-    const { eventStore } = carousel.internalEngine()
-    const emblaRoot = carousel.rootNode()
+    const { eventStore, ownerDocument, ownerWindow } = emblaApi.internalEngine()
+    const emblaRoot = emblaApi.rootNode()
     const root = (options.rootNode && options.rootNode(emblaRoot)) || emblaRoot
 
-    carousel.on('pointerDown', interaction)
-    if (!options.stopOnInteraction) carousel.on('pointerUp', reset)
+    emblaApi.on('pointerDown', interaction)
+    if (!options.stopOnInteraction) emblaApi.on('pointerUp', reset)
 
     if (options.stopOnMouseEnter) {
       eventStore.add(root, 'mouseenter', interaction)
       if (!options.stopOnInteraction) eventStore.add(root, 'mouseleave', reset)
     }
 
-    eventStore.add(document, 'visibilitychange', () => {
-      if (document.visibilityState === 'hidden') return stop()
+    eventStore.add(ownerDocument, 'visibilitychange', () => {
+      if (ownerDocument.visibilityState === 'hidden') return stop()
       reset()
     })
-    eventStore.add(window, 'pagehide', (event: PageTransitionEvent) => {
+    eventStore.add(ownerWindow, 'pagehide', (event: PageTransitionEvent) => {
       if (event.persisted) stop()
     })
 
     if (options.playOnInit) play()
   }
 
   function destroy(): void {
-    carousel.off('pointerDown', interaction)
-    if (!options.stopOnInteraction) carousel.off('pointerUp', reset)
+    emblaApi.off('pointerDown', interaction)
+    if (!options.stopOnInteraction) emblaApi.off('pointerUp', reset)
     stop()
     timer = 0
   }
@@ -89,15 +89,16 @@ function Autoplay(userOptions: AutoplayOptionsType = {}): AutoplayType {
   }
 
   function next(): void {
-    const { index } = carousel.internalEngine()
-    const kill = options.stopOnLastSnap && index.get() === index.max
+    const { index } = emblaApi.internalEngine()
+    const lastIndex = emblaApi.scrollSnapList().length - 1
+    const kill = options.stopOnLastSnap && index.get() === lastIndex
 
     if (kill) return destroy()
 
-    if (carousel.canScrollNext()) {
-      carousel.scrollNext(jump)
+    if (emblaApi.canScrollNext()) {
+      emblaApi.scrollNext(jump)
     } else {
-      carousel.scrollTo(0, jump)
+      emblaApi.scrollTo(0, jump)
     }
     play()
   }

packages/embla-carousel-class-names/src/components/ClassNames.ts

@@ -16,43 +16,43 @@ export type ClassNamesOptionsType = ClassNamesType['options']
 
 function ClassNames(userOptions: ClassNamesOptionsType = {}): ClassNamesType {
   let options: OptionsType
-  let carousel: EmblaCarouselType
+  let emblaApi: EmblaCarouselType
   let root: HTMLElement
   let slides: HTMLElement[]
   const selectedEvents: EmblaEventType[] = ['select', 'pointerUp']
   const draggingEvents: EmblaEventType[] = ['pointerDown', 'pointerUp']
 
   function init(
-    embla: EmblaCarouselType,
+    emblaApiInstance: EmblaCarouselType,
     optionsHandler: OptionsHandlerType,
   ): void {
-    carousel = embla
+    emblaApi = emblaApiInstance
 
     const { mergeOptions, optionsAtMedia } = optionsHandler
     const optionsBase = mergeOptions(defaultOptions, ClassNames.globalOptions)
     const allOptions = mergeOptions(optionsBase, userOptions)
     options = optionsAtMedia(allOptions)
 
-    root = carousel.rootNode()
-    slides = carousel.slideNodes()
-    const isDraggable = !!carousel.internalEngine().options.watchDrag
+    root = emblaApi.rootNode()
+    slides = emblaApi.slideNodes()
+    const isDraggable = !!emblaApi.internalEngine().options.watchDrag
 
     if (isDraggable) {
       addClass(root, options.draggable)
     }
     if (options.dragging) {
-      draggingEvents.forEach((evt) => carousel.on(evt, toggleDraggingClass))
+      draggingEvents.forEach((evt) => emblaApi.on(evt, toggleDraggingClass))
     }
     if (options.selected) {
-      selectedEvents.forEach((evt) => carousel.on(evt, toggleSelectedClass))
+      selectedEvents.forEach((evt) => emblaApi.on(evt, toggleSelectedClass))
       toggleSelectedClass()
     }
   }
 
   function destroy(): void {
     removeClass(root, options.draggable)
-    draggingEvents.forEach((evt) => carousel.off(evt, toggleDraggingClass))
-    selectedEvents.forEach((evt) => carousel.off(evt, toggleSelectedClass))
+    draggingEvents.forEach((evt) => emblaApi.off(evt, toggleDraggingClass))
+    selectedEvents.forEach((evt) => emblaApi.off(evt, toggleSelectedClass))
     slides.forEach((slide) => removeClass(slide, options.selected))
   }
 
@@ -65,8 +65,8 @@ function ClassNames(userOptions: ClassNamesOptionsType = {}): ClassNamesType {
   }
 
   function toggleSelectedClass(): void {
-    const inView = carousel.slidesInView(true)
-    const notInView = carousel.slidesNotInView(true)
+    const inView = emblaApi.slidesInView(true)
+    const notInView = emblaApi.slidesNotInView(true)
     notInView.forEach((index) => removeClass(slides[index], options.selected))
     inView.forEach((index) => addClass(slides[index], options.selected))
   }

packages/embla-carousel-docs/src/components/Examples/carouselWrapperStyles.ts

@@ -67,4 +67,5 @@ export const iosPickerWrapperStyles = css`
   background-color: ${COLORS.BACKGROUND_CODE};
   padding-left: ${CAROUSEL_WRAPPER_SPACING};
   padding-right: ${CAROUSEL_WRAPPER_SPACING};
+  touch-action: none;
 `

packages/embla-carousel-docs/src/components/Examples/createCarouselStyles.ts

@@ -42,7 +42,6 @@ const BASE_STYLES = css`
   }
 
   .embla__slide {
-    overflow: hidden;
     flex: 0 0 var(--slide-size);
     min-__replace-axis-size__: 0;
     padding-__replace_axis_spacing__: var(--slide-spacing);
@@ -483,7 +482,6 @@ const IOS_PICKER_STYLES = css`
     justify-content: center;
     line-height: 1;
     font-size: 1.8rem;
-    touch-action: pan-x;
   }
 
   .embla__ios-picker__scene {
@@ -524,7 +522,6 @@ const IOS_PICKER_STYLES = css`
     position: absolute;
     transform-style: preserve-3d;
     will-change: transform;
-    touch-action: pan-x;
   }
 
   .embla__ios-picker__slide {

packages/embla-carousel-react/rollup.config.js

@@ -57,7 +57,7 @@ export default [
         strict: true,
         sourcemap: false,
         name: kebabToPascalCase(packageJson.name),
-        plugins: [resolve() /*, terser() */],
+        plugins: [resolve(), terser()],
       },
     ],
     onwarn: CONFIG_EXTERNAL_MODULE_SUPPRESS,

packages/embla-carousel-react/src/components/useEmblaCarousel.ts

@@ -25,27 +25,27 @@ function useEmblaCarousel(
 ): UseEmblaCarouselType {
   const storedOptions = useRef(options)
   const storedPlugins = useRef(plugins)
-  const [embla, setEmbla] = useState<EmblaCarouselType>()
+  const [emblaApi, setEmblaApi] = useState<EmblaCarouselType>()
   const [viewport, setViewport] = useState<HTMLElement>()
 
   const reInit = useCallback(() => {
-    if (embla) embla.reInit(storedOptions.current, storedPlugins.current)
-  }, [embla])
+    if (emblaApi) emblaApi.reInit(storedOptions.current, storedPlugins.current)
+  }, [emblaApi])
 
   useEffect(() => {
     if (canUseDOM() && viewport) {
       EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions
-      const newEmbla = EmblaCarousel(
+      const newEmblaApi = EmblaCarousel(
         viewport,
         storedOptions.current,
         storedPlugins.current,
       )
-      setEmbla(newEmbla)
-      return () => newEmbla.destroy()
+      setEmblaApi(newEmblaApi)
+      return () => newEmblaApi.destroy()
     } else {
-      setEmbla(undefined)
+      setEmblaApi(undefined)
     }
-  }, [viewport, setEmbla])
+  }, [viewport, setEmblaApi])
 
   useEffect(() => {
     if (areOptionsEqual(storedOptions.current, options)) return
@@ -59,7 +59,7 @@ function useEmblaCarousel(
     reInit()
   }, [plugins, reInit])
 
-  return [<EmblaViewportRefType>setViewport, embla]
+  return [<EmblaViewportRefType>setViewport, emblaApi]
 }
 
 useEmblaCarousel.globalOptions = <EmblaOptionsType | undefined>undefined

packages/embla-carousel-svelte/src/components/emblaCarouselSvelte.ts

@@ -29,23 +29,25 @@ function emblaCarouselSvelte(
   emblaConfig: EmblaCarouselParameterType = { options: {}, plugins: [] },
 ): EmblaCarouselSvelteType {
   let storedEmblaConfig = emblaConfig
-  let embla: EmblaCarouselType
+  let emblaApi: EmblaCarouselType
 
   if (canUseDOM()) {
     EmblaCarousel.globalOptions = emblaCarouselSvelte.globalOptions
-    embla = EmblaCarousel(
+    emblaApi = EmblaCarousel(
       emblaNode,
       storedEmblaConfig.options,
       storedEmblaConfig.plugins,
     )
-    embla.on('init', () =>
-      emblaNode.dispatchEvent(new CustomEvent('emblaInit', { detail: embla })),
+    emblaApi.on('init', () =>
+      emblaNode.dispatchEvent(
+        new CustomEvent('emblaInit', { detail: emblaApi }),
+      ),
     )
   }
 
   return {
     destroy: () => {
-      if (embla) embla.destroy()
+      if (emblaApi) emblaApi.destroy()
     },
     update: (newEmblaConfig) => {
       const optionsChanged = !areOptionsEqual(
@@ -60,8 +62,8 @@ function emblaCarouselSvelte(
       if (!optionsChanged && !pluginsChanged) return
       storedEmblaConfig = newEmblaConfig
 
-      if (embla) {
-        embla.reInit(storedEmblaConfig.options, storedEmblaConfig.plugins)
+      if (emblaApi) {
+        emblaApi.reInit(storedEmblaConfig.options, storedEmblaConfig.plugins)
       }
     },
   }

packages/embla-carousel-vue/src/components/emblaCarouselVue.ts

@@ -22,25 +22,25 @@ function emblaCarouselVue(
   const storedOptions = ref(isRef(options) ? options.value : options)
   const storedPlugins = ref(isRef(plugins) ? plugins.value : plugins)
   const emblaNode = ref<HTMLElement>()
-  const embla = ref<EmblaCarouselType>()
+  const emblaApi = ref<EmblaCarouselType>()
 
   function reInit() {
-    if (!embla.value) return
-    embla.value.reInit(storedOptions.value, storedPlugins.value)
+    if (!emblaApi.value) return
+    emblaApi.value.reInit(storedOptions.value, storedPlugins.value)
   }
 
   onMounted(() => {
     if (!canUseDOM() || !emblaNode.value) return
     EmblaCarousel.globalOptions = emblaCarouselVue.globalOptions
-    embla.value = EmblaCarousel(
+    emblaApi.value = EmblaCarousel(
       emblaNode.value,
       storedOptions.value,
       storedPlugins.value,
     )
   })
 
   onUnmounted(() => {
-    if (embla.value) embla.value.destroy()
+    if (emblaApi.value) emblaApi.value.destroy()
   })
 
   if (isRef(options)) {
@@ -59,7 +59,7 @@ function emblaCarouselVue(
     })
   }
 
-  return [emblaNode, embla]
+  return [emblaNode, emblaApi]
 }
 
 emblaCarouselVue.globalOptions = <EmblaOptionsType | undefined>undefined

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

@@ -136,6 +136,10 @@ describe('Counter', () => {
       test('And preserves its current value', () => {
         expect(loopCounter.clone().get()).toBe(start)
       })
+
+      test('And returns it when add is invoked', () => {
+        expect(loopCounter.add(1)).not.toBe(loopCounter)
+      })
     })
   })
 })

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

@@ -1,6 +1,6 @@
 import { OptionsHandler } from '../components/OptionsHandler'
 
-const { optionsAtMedia, optionsMediaQueries } = OptionsHandler()
+const { optionsAtMedia, optionsMediaQueries } = OptionsHandler(window)
 const matchMediaQuery = '(min-width: 768px)'
 const matchMediaQuery2 = '(min-width: 576px)'
 const notMatchMediaQuery = '(min-width: 992px)'