v7

package.json

@@ -25,7 +25,7 @@
     "lint": "npm-run-all prettier:report eslint:report",
     "format": "npm-run-all prettier:fix eslint:fix",
     "test": "yarn workspaces foreach -v --exclude \"{embla-carousel-monorepo}\" run test",
-    "start": "yarn workspaces foreach -vpi --exclude \"{embla-carousel-monorepo,embla-carousel}\" run start",
+    "start": "yarn workspace embla-carousel-docs run start",
     "build": "yarn workspaces foreach -vt --exclude \"{embla-carousel-monorepo}\" run build",
     "eslint:report": "yarn workspaces foreach -v --exclude \"{embla-carousel-monorepo}\" run eslint:report",
     "eslint:fix": "yarn workspaces foreach -v --exclude \"{embla-carousel-monorepo}\" run eslint:fix",
@@ -45,7 +45,7 @@
     "husky": "^4.3.8",
     "npm-run-all": "^4.1.5",
     "prettier": "2.5.1",
-    "rollup": "^2.67.0",
+    "rollup": "^2.68.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "typescript": "^4.5.5"

packages/embla-carousel-auto-height/.eslintrc.js

@@ -15,5 +15,14 @@ module.exports = {
     'no-console': 2,
     '@typescript-eslint/no-inferrable-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          '{}': false,
+        },
+        extendDefaults: true,
+      },
+    ],
   },
 }

packages/embla-carousel-auto-height/package.json

@@ -23,9 +23,10 @@
     "typescript",
     "react"
   ],
-  "main": "embla-carousel-auto-height.umd.js",
   "unpkg": "embla-carousel-auto-height.umd.js",
+  "main": "embla-carousel-auto-height.cjs.js",
   "module": "embla-carousel-auto-height.esm.js",
+  "browser": "embla-carousel-auto-height.umd.js",
   "types": "index.d.ts",
   "sideEffects": false,
   "files": [
@@ -49,7 +50,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.5.0",
     "prettier": "2.5.1",
-    "rollup": "^2.67.0",
+    "rollup": "^2.68.0",
     "ts-jest": "^27.1.3",
     "typescript": "^4.5.5"
   },

packages/embla-carousel-auto-height/rollup.config.js

@@ -2,39 +2,44 @@ import packageJson from './package.json'
 import {
   CONFIG_BABEL,
   CONFIG_TYPESCRIPT,
+  CONFIG_GLOBALS,
   babel,
   typescript,
   resolve,
   terser,
-  kebabCaseToPascalCase,
+  kebabToPascalCase,
 } from '../../rollup.config'
 
 export default [
   {
     input: 'src/index.ts',
     output: [
       {
-        file: `${packageJson.name}.js`,
+        file: `${packageJson.name}.cjs.js`,
         format: 'cjs',
+        globals: CONFIG_GLOBALS,
         strict: true,
         sourcemap: true,
         exports: 'auto',
       },
       {
         file: `${packageJson.name}.esm.js`,
         format: 'esm',
+        globals: CONFIG_GLOBALS,
         strict: true,
         sourcemap: true,
       },
       {
         file: `${packageJson.name}.umd.js`,
         format: 'umd',
+        globals: CONFIG_GLOBALS,
         strict: true,
         sourcemap: false,
-        name: kebabCaseToPascalCase(packageJson.name),
+        name: kebabToPascalCase(packageJson.name),
         plugins: [terser()],
       },
     ],
+    external: Object.keys(CONFIG_GLOBALS),
     plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)],
   },
 ]

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

@@ -1,8 +1,12 @@
-export type OptionsType = {
+import { CreateOptionsType } from 'embla-carousel/components/Options'
+
+export type OptionsType = CreateOptionsType<{
   destroyHeight: CSSStyleDeclaration['height']
-}
+}>
 
 export const defaultOptions: OptionsType = {
+  active: true,
+  breakpoints: {},
   destroyHeight: 'auto',
 }
 

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

@@ -1,32 +1,36 @@
 import { defaultOptions, AutoHeightOptionsType, OptionsType } from './Options'
 import { SlideBoundType } from 'embla-carousel/components/SlidesInView'
-import {
+import { CreatePluginType } from 'embla-carousel/components/Plugins'
+import EmblaCarousel, {
   EmblaCarouselType,
   EmblaEventType,
-  EmblaPluginType,
 } from 'embla-carousel'
 
-export type AutoHeightType = EmblaPluginType<OptionsType>
+export type AutoHeightType = CreatePluginType<{}, OptionsType>
 
 function AutoHeight(userOptions?: AutoHeightOptionsType): AutoHeightType {
-  const options = Object.assign(
-    {},
+  const optionsHandler = EmblaCarousel.optionsHandler()
+  const optionsBase = optionsHandler.merge(
     defaultOptions,
     AutoHeight.globalOptions,
-    userOptions,
   )
-  const { destroyHeight } = options
-  const heightEvents: EmblaEventType[] = ['select', 'pointerUp']
-  const inViewThreshold = 0.5
-
+  let options: AutoHeightType['options']
   let carousel: EmblaCarouselType
+
   let slideBounds: SlideBoundType[] = []
   let slideHeights: number[] = []
+  const heightEvents: EmblaEventType[] = ['select', 'pointerUp']
+  const inViewThreshold = 0.5
 
   function init(embla: EmblaCarouselType): void {
     carousel = embla
-    const { options, slidesInView, slideRects } = carousel.internalEngine()
-    if (options.axis === 'y') return
+    options = optionsHandler.atMedia(self.options)
+    const {
+      options: { axis },
+      slidesInView,
+      slideRects,
+    } = carousel.internalEngine()
+    if (axis === 'y') return
 
     slideBounds = slidesInView.findSlideBounds(undefined, inViewThreshold)
     slideHeights = slideRects.map((rect) => rect.height)
@@ -48,13 +52,14 @@ function AutoHeight(userOptions?: AutoHeightOptionsType): AutoHeightType {
   }
 
   function setContainerHeight(evt?: EmblaEventType): void {
-    const height = evt === 'destroy' ? destroyHeight : `${highestInView()}px`
+    const height =
+      evt === 'destroy' ? options.destroyHeight : `${highestInView()}px`
     carousel.containerNode().style.height = height
   }
 
   const self: AutoHeightType = {
-    name: 'AutoHeight',
-    options,
+    name: 'autoHeight',
+    options: optionsHandler.merge(optionsBase, userOptions),
     init,
     destroy,
   }

packages/embla-carousel-auto-height/tsconfig.json

@@ -7,8 +7,9 @@
     "strict": true,
     "declaration": true,
     "declarationDir": "./",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "noEmit": true
   },
-  "include": ["src/index.ts"],
+  "include": ["src"],
   "exclude": ["node_modules", "**/*.test.ts"]
 }

packages/embla-carousel-autoplay/.eslintrc.js

@@ -15,5 +15,14 @@ module.exports = {
     'no-console': 2,
     '@typescript-eslint/no-inferrable-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          '{}': false,
+        },
+        extendDefaults: true,
+      },
+    ],
   },
 }

packages/embla-carousel-autoplay/package.json

@@ -23,9 +23,10 @@
     "typescript",
     "react"
   ],
-  "main": "embla-carousel-autoplay.umd.js",
   "unpkg": "embla-carousel-autoplay.umd.js",
+  "main": "embla-carousel-autoplay.cjs.js",
   "module": "embla-carousel-autoplay.esm.js",
+  "browser": "embla-carousel-autoplay.umd.js",
   "types": "index.d.ts",
   "sideEffects": false,
   "files": [
@@ -49,7 +50,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.5.0",
     "prettier": "2.5.1",
-    "rollup": "^2.67.0",
+    "rollup": "^2.68.0",
     "ts-jest": "^27.1.3",
     "typescript": "^4.5.5"
   },

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

@@ -2,39 +2,44 @@ import packageJson from './package.json'
 import {
   CONFIG_BABEL,
   CONFIG_TYPESCRIPT,
+  CONFIG_GLOBALS,
   babel,
   typescript,
   resolve,
   terser,
-  kebabCaseToPascalCase,
+  kebabToPascalCase,
 } from '../../rollup.config'
 
 export default [
   {
     input: 'src/index.ts',
     output: [
       {
-        file: `${packageJson.name}.js`,
+        file: `${packageJson.name}.cjs.js`,
         format: 'cjs',
+        globals: CONFIG_GLOBALS,
         strict: true,
         sourcemap: true,
         exports: 'auto',
       },
       {
         file: `${packageJson.name}.esm.js`,
         format: 'esm',
+        globals: CONFIG_GLOBALS,
         strict: true,
         sourcemap: true,
       },
       {
         file: `${packageJson.name}.umd.js`,
         format: 'umd',
+        globals: CONFIG_GLOBALS,
         strict: true,
         sourcemap: false,
-        name: kebabCaseToPascalCase(packageJson.name),
+        name: kebabToPascalCase(packageJson.name),
         plugins: [terser()],
       },
     ],
+    external: Object.keys(CONFIG_GLOBALS),
     plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)],
   },
 ]

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

@@ -1,17 +1,23 @@
-export type OptionsType = {
+import { CreateOptionsType } from 'embla-carousel/components/Options'
+
+export type OptionsType = CreateOptionsType<{
   delay: number
   playOnInit: boolean
   stopOnInteraction: boolean
   stopOnMouseEnter: boolean
   stopOnLastSnap: boolean
-}
+  rootNode: ((emblaRoot: HTMLElement) => HTMLElement | null) | null
+}>
 
 export const defaultOptions: OptionsType = {
+  active: true,
+  breakpoints: {},
   delay: 4000,
   playOnInit: true,
   stopOnInteraction: true,
   stopOnMouseEnter: false,
   stopOnLastSnap: false,
+  rootNode: null,
 }
 
 export type AutoplayOptionsType = Partial<OptionsType>