Implement #202.

Author: davidjerleke

.github/workflows/cd.yml

@@ -25,6 +25,6 @@ jobs:
         run: yarn build
 
       - name: NPM PKG Publish 🎉
-        run: yarn workspaces foreach -t --exclude '{embla-carousel-monorepo,embla-carousel-docs,embla-carousel-playground-vanilla,embla-carousel-playground-react,embla-carousel-playground-solid}' npm publish
+        run: yarn workspaces foreach -t --exclude '{embla-carousel-monorepo,embla-carousel-docs,embla-carousel-playground-vanilla,embla-carousel-playground-react,embla-carousel-playground-solid,embla-carousel-playground-vue,embla-carousel-playground-svelte}' npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.vscode/extenstions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "unifiedjs.vscode-mdx",
+    "Vue.volar",
+    "svelte.svelte-vscode"
+  ]
+}

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-  "prettier.configPath": ""
+  "prettier.configPath": "",
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  }
 }

package.json

@@ -28,26 +28,34 @@
     "packages/embla-carousel-reactive-utils",
     "playgrounds/embla-carousel-playground-vanilla",
     "playgrounds/embla-carousel-playground-react",
-    "playgrounds/embla-carousel-playground-solid"
+    "playgrounds/embla-carousel-playground-solid",
+    "playgrounds/embla-carousel-playground-vue",
+    "playgrounds/embla-carousel-playground-svelte"
   ],
   "scripts": {
-    "eslint:report": "yarn workspaces foreach -v --exclude \"{embla-carousel-monorepo,embla-carousel-playground-vanilla,embla-carousel-playground-react}\" run eslint:report",
+    "eslint:report": "yarn workspaces foreach -v --exclude \"{embla-carousel-monorepo,embla-carousel-playground-vanilla,embla-carousel-playground-react,embla-carousel-playground-solid,embla-carousel-playground-vue,embla-carousel-playground-svelte}\" run eslint:report",
     "prettier:report": "prettier \"**/*.{js,jsx,tsx,ts,scss,json}\" --check",
     "lint": "npm-run-all prettier:report eslint:report",
     "format": "prettier \"**/*.{js,jsx,tsx,ts,scss,json}\" --write",
-    "test": "yarn workspaces foreach -v --exclude \"{embla-carousel-monorepo,embla-carousel-playground-vanilla,embla-carousel-playground-react}\" run test",
+    "test": "yarn workspaces foreach -v --exclude \"{embla-carousel-monorepo,embla-carousel-playground-vanilla,embla-carousel-playground-react,embla-carousel-playground-solid,embla-carousel-playground-vue,embla-carousel-playground-svelte}\" run test",
     "watch:package-vanilla": "yarn workspace embla-carousel run start",
     "watch:package-react": "yarn workspace embla-carousel-react run start",
     "watch:package-solid": "yarn workspace embla-carousel-solid run start",
+    "watch:package-vue": "yarn workspace embla-carousel-vue run start",
+    "watch:package-svelte": "yarn workspace embla-carousel-svelte run start",
     "watch:playground-vanilla": "yarn workspace embla-carousel-playground-vanilla run dev",
     "watch:playground-react": "yarn workspace embla-carousel-playground-react run dev",
     "watch:playground-solid": "yarn workspace embla-carousel-playground-solid run dev",
+    "watch:playground-vue": "yarn workspace embla-carousel-playground-vue run dev",
+    "watch:playground-svelte": "yarn workspace embla-carousel-playground-svelte run dev",
     "start": "yarn workspace embla-carousel-docs run start",
     "start:vanilla": "npm-run-all --parallel watch:package-vanilla watch:playground-vanilla",
     "start:react": "npm-run-all --parallel watch:package-vanilla watch:package-react watch:playground-react",
     "start:solid": "npm-run-all --parallel watch:package-vanilla watch:package-solid watch:playground-solid",
+    "start:vue": "npm-run-all --parallel watch:package-vanilla watch:package-vue watch:playground-vue",
+    "start:svelte": "npm-run-all --parallel watch:package-vanilla watch:package-svelte watch:playground-svelte",
     "build": "npm-run-all build:packages build:package-readmes format",
-    "build:packages": "yarn workspaces foreach -vt --exclude \"{embla-carousel-monorepo,embla-carousel-playground-vanilla,embla-carousel-playground-react}\" run build",
+    "build:packages": "yarn workspaces foreach -vt --exclude \"{embla-carousel-monorepo,embla-carousel-playground-vanilla,embla-carousel-playground-react,embla-carousel-playground-solid,embla-carousel-playground-vue,embla-carousel-playground-svelte}\" run build",
     "build:package-readmes": "npx ts-node --project scripts/tsconfig.node.json scripts/create-readmes/index.ts --templatePath=scripts/create-readmes/readme-template.md",
     "build:docs": "yarn workspace embla-carousel-docs run predeploy",
     "version:patch": "yarn workspaces foreach version patch && yarn version:push",

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

@@ -1,8 +1,9 @@
-import { OptionsType } from './Options'
+import { defaultOptions, OptionsType } from './Options'
 import {
   EmblaEventType,
   CreatePluginType,
-  EmblaCarouselType
+  EmblaCarouselType,
+  OptionsHandlerType
 } from 'embla-carousel'
 
 declare module 'embla-carousel' {
@@ -16,18 +17,40 @@ export type AutoHeightType = CreatePluginType<{}, OptionsType>
 export type AutoHeightOptionsType = AutoHeightType['options']
 
 function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
+  let options: OptionsType
   let emblaApi: EmblaCarouselType
+  let isSsr = false
+  let destroyed = false
+
   let slideHeights: number[] = []
   const heightEvents: EmblaEventType[] = ['select', 'slidefocus']
 
-  function init(emblaApiInstance: EmblaCarouselType): void {
+  function pluginIsActive(): boolean {
+    if (isSsr) return false
+    if (destroyed) return false
+    return options.active
+  }
+
+  function init(
+    emblaApiInstance: EmblaCarouselType,
+    optionsHandler: OptionsHandlerType
+  ): void {
     emblaApi = emblaApiInstance
 
+    const { mergeOptions, optionsAtMedia } = optionsHandler
+    const optionsBase = mergeOptions(defaultOptions, AutoHeight.globalOptions)
+    const allOptions = mergeOptions(optionsBase, userOptions)
+
+    destroyed = false
+    options = optionsAtMedia(allOptions)
+    isSsr = emblaApi.internalEngine().isSsr
+
     const {
       options: { axis },
       slideRects
     } = emblaApi.internalEngine()
 
+    if (!pluginIsActive()) return
     if (axis === 'y') return
 
     slideHeights = slideRects.map((slideRect) => slideRect.height)
@@ -37,10 +60,13 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
   }
 
   function destroy(): void {
+    if (!pluginIsActive()) return
+
     heightEvents.forEach((evt) => emblaApi.off(evt, setContainerHeight))
     const container = emblaApi.containerNode()
     container.style.height = ''
-    if (!container.getAttribute('style')) container.removeAttribute('style')
+
+    destroyed = true
   }
 
   function highestInView(): number | null {

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

@@ -1,3 +1,8 @@
 import { CreateOptionsType } from 'embla-carousel'
 
 export type OptionsType = CreateOptionsType<{}>
+
+export const defaultOptions: OptionsType = {
+  active: true,
+  breakpoints: {}
+}

packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts

@@ -39,13 +39,21 @@ export type AutoScrollOptionsType = AutoScrollType['options']
 function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
   let options: OptionsType
   let emblaApi: EmblaCarouselType
-  let destroyed: boolean
+  let isSsr = false
+  let destroyed = false
+
   let startDelay: number
   let timerId = 0
-  let autoScrollActive = false
+  let autoScrollRunning = false
   let mouseIsOver = false
   let defaultScrollBehaviour: ScrollBodyType
 
+  function pluginIsActive(): boolean {
+    if (isSsr) return false
+    if (destroyed) return false
+    return options.active
+  }
+
   function init(
     emblaApiInstance: EmblaCarouselType,
     optionsHandler: OptionsHandlerType
@@ -55,8 +63,12 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
     const { mergeOptions, optionsAtMedia } = optionsHandler
     const optionsBase = mergeOptions(defaultOptions, AutoScroll.globalOptions)
     const allOptions = mergeOptions(optionsBase, userOptions)
+
+    destroyed = false
     options = optionsAtMedia(allOptions)
+    isSsr = emblaApi.internalEngine().isSsr
 
+    if (!pluginIsActive()) return
     if (emblaApi.snapList().length <= 1) return
 
     startDelay = options.startDelay
@@ -95,6 +107,8 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
   }
 
   function destroy(): void {
+    if (!pluginIsActive()) return
+
     emblaApi
       .off('pointerdown', onPointerDown)
       .off('pointerup', onPointerUp)
@@ -103,38 +117,42 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
 
     stopAutoScroll()
     destroyed = true
-    autoScrollActive = false
+    autoScrollRunning = false
   }
 
   function startAutoScroll(): void {
-    if (destroyed) return
-    if (autoScrollActive) return
-    emblaApi.emit('autoscroll:play', null)
+    if (!pluginIsActive()) return
 
     const engine = emblaApi.internalEngine()
-    const { ownerWindow } = engine
+    const { ownerWindow } = engine.nodeHandler
+
+    if (!ownerWindow) return
+    if (autoScrollRunning) return
+    emblaApi.emit('autoscroll:play', null)
 
     timerId = ownerWindow.setTimeout(() => {
       engine.scrollBody = createAutoScrollBehaviour(engine)
       engine.animation.start()
     }, startDelay)
 
-    autoScrollActive = true
+    autoScrollRunning = true
   }
 
   function stopAutoScroll(): void {
-    if (destroyed) return
-    if (!autoScrollActive) return
-    emblaApi.emit('autoscroll:stop', null)
+    if (!pluginIsActive()) return
 
     const engine = emblaApi.internalEngine()
-    const { ownerWindow } = engine
+    const { ownerWindow } = engine.nodeHandler
+
+    if (!ownerWindow) return
+    if (!autoScrollRunning) return
+    emblaApi.emit('autoscroll:stop', null)
 
     engine.scrollBody = defaultScrollBehaviour
     ownerWindow.clearTimeout(timerId)
     timerId = 0
 
-    autoScrollActive = false
+    autoScrollRunning = false
   }
 
   function createAutoScrollBehaviour(engine: EngineType): ScrollBodyType {
@@ -245,18 +263,18 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
   }
 
   function stop(): void {
-    if (autoScrollActive) stopAutoScroll()
+    if (autoScrollRunning) stopAutoScroll()
   }
 
   function reset(): void {
-    if (autoScrollActive) {
+    if (autoScrollRunning) {
       stopAutoScroll()
       startAutoScrollOnSettle()
     }
   }
 
   function isPlaying(): boolean {
-    return autoScrollActive
+    return autoScrollRunning
   }
 
   const self: AutoScrollType = {