From 3eaa6173e3574a65d949e459f47c533788962ae1 Mon Sep 17 00:00:00 2001 From: David Jerleke Date: Sun, 31 Jul 2022 22:07:49 +0200 Subject: [PATCH] Implement #307. --- README.md | 8 +- package.json | 1 + packages/embla-carousel-auto-height/README.md | 2 + .../embla-carousel-auto-height/package.json | 3 +- packages/embla-carousel-autoplay/README.md | 2 + packages/embla-carousel-autoplay/package.json | 3 +- packages/embla-carousel-class-names/README.md | 2 + .../embla-carousel-class-names/package.json | 3 +- packages/embla-carousel-docs/README.md | 2 + .../src/content/pages/api/options.md | 10 ++ .../src/content/pages/get-started/cdn.md | 3 +- .../content/pages/get-started/ie11-support.md | 2 +- .../src/content/pages/get-started/module.md | 1 - .../src/content/pages/get-started/react.md | 1 - .../src/content/pages/get-started/svelte.md | 103 ++++++++++++++++++ .../content/pages/get-started/typescript.md | 3 +- .../src/content/pages/get-started/vue.md | 1 - .../static/svelte-logo.svg | 1 + packages/embla-carousel-react/README.md | 2 + packages/embla-carousel-react/package.json | 3 +- packages/embla-carousel-svelte/.eslintignore | 5 + packages/embla-carousel-svelte/.eslintrc.js | 20 ++++ packages/embla-carousel-svelte/.prettierrc.js | 1 + packages/embla-carousel-svelte/README.md | 69 ++++++++++++ packages/embla-carousel-svelte/jest.config.js | 8 ++ packages/embla-carousel-svelte/package.json | 66 +++++++++++ .../embla-carousel-svelte/rollup.config.js | 50 +++++++++ .../src/components/index.ts | 62 +++++++++++ .../src/components/utils.ts | 34 ++++++ packages/embla-carousel-svelte/src/index.ts | 7 ++ packages/embla-carousel-svelte/tsconfig.json | 15 +++ packages/embla-carousel-vue/README.md | 2 + packages/embla-carousel-vue/package.json | 3 +- .../src/components/index.ts | 12 +- packages/embla-carousel/README.md | 2 + packages/embla-carousel/package.json | 3 +- yarn.lock | 29 +++++ 37 files changed, 522 insertions(+), 22 deletions(-) create mode 100644 packages/embla-carousel-docs/src/content/pages/get-started/svelte.md create mode 100644 packages/embla-carousel-docs/static/svelte-logo.svg create mode 100644 packages/embla-carousel-svelte/.eslintignore create mode 100644 packages/embla-carousel-svelte/.eslintrc.js create mode 100644 packages/embla-carousel-svelte/.prettierrc.js create mode 100644 packages/embla-carousel-svelte/README.md create mode 100644 packages/embla-carousel-svelte/jest.config.js create mode 100644 packages/embla-carousel-svelte/package.json create mode 100644 packages/embla-carousel-svelte/rollup.config.js create mode 100644 packages/embla-carousel-svelte/src/components/index.ts create mode 100644 packages/embla-carousel-svelte/src/components/utils.ts create mode 100644 packages/embla-carousel-svelte/src/index.ts create mode 100644 packages/embla-carousel-svelte/tsconfig.json diff --git a/README.md b/README.md index 258d7172c..c85d2931d 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@

+
+

@@ -66,8 +68,10 @@   - + +   + +

diff --git a/package.json b/package.json index d71947f23..fd8f9b756 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "packages/embla-carousel", "packages/embla-carousel-react", "packages/embla-carousel-vue", + "packages/embla-carousel-svelte", "packages/embla-carousel-docs", "packages/embla-carousel-autoplay", "packages/embla-carousel-auto-height", diff --git a/packages/embla-carousel-auto-height/README.md b/packages/embla-carousel-auto-height/README.md index 1db94dc38..b4f07c63f 100644 --- a/packages/embla-carousel-auto-height/README.md +++ b/packages/embla-carousel-auto-height/README.md @@ -5,6 +5,8 @@

+
+

diff --git a/packages/embla-carousel-auto-height/package.json b/packages/embla-carousel-auto-height/package.json index e832eb207..c9ff84258 100644 --- a/packages/embla-carousel-auto-height/package.json +++ b/packages/embla-carousel-auto-height/package.json @@ -22,7 +22,8 @@ "javascript", "typescript", "react", - "vue" + "vue", + "svelte" ], "unpkg": "embla-carousel-auto-height.umd.js", "main": "embla-carousel-auto-height.cjs.js", diff --git a/packages/embla-carousel-autoplay/README.md b/packages/embla-carousel-autoplay/README.md index 63295826b..4343850da 100644 --- a/packages/embla-carousel-autoplay/README.md +++ b/packages/embla-carousel-autoplay/README.md @@ -5,6 +5,8 @@

+
+

diff --git a/packages/embla-carousel-autoplay/package.json b/packages/embla-carousel-autoplay/package.json index 95c251b66..6a46cd378 100644 --- a/packages/embla-carousel-autoplay/package.json +++ b/packages/embla-carousel-autoplay/package.json @@ -22,7 +22,8 @@ "javascript", "typescript", "react", - "vue" + "vue", + "svelte" ], "unpkg": "embla-carousel-autoplay.umd.js", "main": "embla-carousel-autoplay.cjs.js", diff --git a/packages/embla-carousel-class-names/README.md b/packages/embla-carousel-class-names/README.md index 712d92776..41a8e5bd9 100644 --- a/packages/embla-carousel-class-names/README.md +++ b/packages/embla-carousel-class-names/README.md @@ -5,6 +5,8 @@

+
+

diff --git a/packages/embla-carousel-class-names/package.json b/packages/embla-carousel-class-names/package.json index f04de4afa..672f9ca1d 100644 --- a/packages/embla-carousel-class-names/package.json +++ b/packages/embla-carousel-class-names/package.json @@ -22,7 +22,8 @@ "javascript", "typescript", "react", - "vue" + "vue", + "svelte" ], "unpkg": "embla-carousel-class-names.umd.js", "main": "embla-carousel-class-names.cjs.js", diff --git a/packages/embla-carousel-docs/README.md b/packages/embla-carousel-docs/README.md index 5eb5b7b1b..89c10aad3 100644 --- a/packages/embla-carousel-docs/README.md +++ b/packages/embla-carousel-docs/README.md @@ -5,6 +5,8 @@

+
+

diff --git a/packages/embla-carousel-docs/src/content/pages/api/options.md b/packages/embla-carousel-docs/src/content/pages/api/options.md index afa53a16c..a37df5d6e 100644 --- a/packages/embla-carousel-docs/src/content/pages/api/options.md +++ b/packages/embla-carousel-docs/src/content/pages/api/options.md @@ -175,6 +175,16 @@ import emblaCarouselVue from 'embla-carousel-vue' emblaCarouselVue.globalOptions = { loop: true } ``` +### Svelte global options + +**Svelte** users can set global options by assigning them to the `emblaCarouselSvelte` action: + +```js +import emblaCarouselSvelte from 'embla-carousel-svelte' + +emblaCarouselSvelte.globalOptions = { loop: true } +``` + Make sure to assign global options **before** initializing any carousel. You should **only assign it once**, because re-assigning global options can lead to confusing code and unexpected behaviour. ## Option priority diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/cdn.md b/packages/embla-carousel-docs/src/content/pages/get-started/cdn.md index 413862e59..67d59113d 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/cdn.md +++ b/packages/embla-carousel-docs/src/content/pages/get-started/cdn.md @@ -1,7 +1,7 @@ --- title: CDN description: Learn how to setup Embla Carousel using a CDN. -order: 4 +order: 5 date: 2021-02-21 --- @@ -39,7 +39,6 @@ The wrapping element with the classname `embla` is needed to cover the scroll ov display: flex; } .embla__slide { - position: relative; flex: 0 0 100%; } ``` diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/ie11-support.md b/packages/embla-carousel-docs/src/content/pages/get-started/ie11-support.md index ed021850f..0f5c410f4 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/ie11-support.md +++ b/packages/embla-carousel-docs/src/content/pages/get-started/ie11-support.md @@ -1,7 +1,7 @@ --- title: IE11 description: How to add Internet Explorer 11 support to Embla Carousel. -order: 4 +order: 6 date: 2021-02-21 --- diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/module.md b/packages/embla-carousel-docs/src/content/pages/get-started/module.md index 9545415f9..de1fad90e 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/module.md +++ b/packages/embla-carousel-docs/src/content/pages/get-started/module.md @@ -39,7 +39,6 @@ The wrapping element with the classname `embla` is needed to cover the scroll ov display: flex; } .embla__slide { - position: relative; flex: 0 0 100%; } ``` diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/react.md b/packages/embla-carousel-docs/src/content/pages/get-started/react.md index 5165383c4..5b36b571e 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/react.md +++ b/packages/embla-carousel-docs/src/content/pages/get-started/react.md @@ -48,7 +48,6 @@ The hook gives us a **ref** to attach to our wrapping element with the classname display: flex; } .embla__slide { - position: relative; flex: 0 0 100%; } ``` diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/svelte.md b/packages/embla-carousel-docs/src/content/pages/get-started/svelte.md new file mode 100644 index 000000000..3f457e80b --- /dev/null +++ b/packages/embla-carousel-docs/src/content/pages/get-started/svelte.md @@ -0,0 +1,103 @@ +--- +title: Svelte +description: Learn how to setup Embla Carousel using Svelte. +order: 3 +date: 2021-02-21 +--- + +# Svelte + +Start by installing the Embla Carousel **npm package** and add it to your dependencies. + +```shell +npm install embla-carousel-svelte --save +``` + +Embla Carousel provides the handy `emblaCarouselSvelte` action for seamless integration with Svelte. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel: + +```html + + +

+
+
Slide 1
+
Slide 2
+
Slide 3
+
+
+``` + +## Styling the carousel + +The element with the classname `embla` is needed to cover the scroll overflow. Its child element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements: + +```html + +``` + +## Accessing the carousel API + +The `emblaCarouselSvelte` action takes the Embla Carousel [options](/api/options/) as part of its parameter. Additionally, you can access the [API](/api/) by using the `init` event to store the carousel instance in a variable: + +```html{6-8, 10-13, 16} + + +
+
+
Slide 1
+
Slide 2
+
Slide 3
+
+
+``` + +## Adding plugins + +The `emblaCarouselSvelte` action parameter also accepts [plugins](/plugins/). Note that plugins need to be passed in an array like so: + +```html{3, 7} + + +
+
+
Slide 1
+
Slide 2
+
Slide 3
+
+
+``` + +Congratulations! You just created your first Embla Carousel component. diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/typescript.md b/packages/embla-carousel-docs/src/content/pages/get-started/typescript.md index e8726d5ce..d18f11e3c 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/typescript.md +++ b/packages/embla-carousel-docs/src/content/pages/get-started/typescript.md @@ -1,7 +1,7 @@ --- title: TypeScript description: Learn how to setup Embla Carousel using TypeScript. -order: 3 +order: 4 date: 2021-02-21 --- @@ -11,7 +11,6 @@ Before continuing with this guide, make sure to setup a working carousel followi - [module](/get-started/module/) - [react](/get-started/react/) -- [vue](/get-started/vue/) Embla Carousel and all its related packages are fully typed and has built-in type definitions, because they're written in TypeScript. diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/vue.md b/packages/embla-carousel-docs/src/content/pages/get-started/vue.md index 2db64f52f..3132d2850 100644 --- a/packages/embla-carousel-docs/src/content/pages/get-started/vue.md +++ b/packages/embla-carousel-docs/src/content/pages/get-started/vue.md @@ -53,7 +53,6 @@ The `emblaCarouselVue` function gives us an **emblaNode** to attach to our wrapp display: flex; } .embla__slide { - position: relative; flex: 0 0 100%; } diff --git a/packages/embla-carousel-docs/static/svelte-logo.svg b/packages/embla-carousel-docs/static/svelte-logo.svg new file mode 100644 index 000000000..369891a85 --- /dev/null +++ b/packages/embla-carousel-docs/static/svelte-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/embla-carousel-react/README.md b/packages/embla-carousel-react/README.md index f356463cc..8657a179d 100644 --- a/packages/embla-carousel-react/README.md +++ b/packages/embla-carousel-react/README.md @@ -5,6 +5,8 @@

+
+

diff --git a/packages/embla-carousel-react/package.json b/packages/embla-carousel-react/package.json index b5a468ea1..690e5d8ba 100644 --- a/packages/embla-carousel-react/package.json +++ b/packages/embla-carousel-react/package.json @@ -22,7 +22,8 @@ "javascript", "typescript", "react", - "vue" + "vue", + "svelte" ], "unpkg": "embla-carousel-react.umd.js", "main": "embla-carousel-react.cjs.js", diff --git a/packages/embla-carousel-svelte/.eslintignore b/packages/embla-carousel-svelte/.eslintignore new file mode 100644 index 000000000..f5efc98ab --- /dev/null +++ b/packages/embla-carousel-svelte/.eslintignore @@ -0,0 +1,5 @@ +docs +package.json +package-lock.json +yarn.lock +node_modules diff --git a/packages/embla-carousel-svelte/.eslintrc.js b/packages/embla-carousel-svelte/.eslintrc.js new file mode 100644 index 000000000..1fc3eb041 --- /dev/null +++ b/packages/embla-carousel-svelte/.eslintrc.js @@ -0,0 +1,20 @@ +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module', + ecmaFeatures: { jsx: true }, + }, + extends: [ + 'eslint:recommended', + 'plugin:prettier/recommended', + 'plugin:@typescript-eslint/eslint-recommended', + 'plugin:@typescript-eslint/recommended', + ], + rules: { + 'no-debugger': 2, + 'no-console': 2, + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/no-explicit-any': 'off', + }, +} diff --git a/packages/embla-carousel-svelte/.prettierrc.js b/packages/embla-carousel-svelte/.prettierrc.js new file mode 100644 index 000000000..5100fc98a --- /dev/null +++ b/packages/embla-carousel-svelte/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require('../../.prettierrc.js') diff --git a/packages/embla-carousel-svelte/README.md b/packages/embla-carousel-svelte/README.md new file mode 100644 index 000000000..a8fff152d --- /dev/null +++ b/packages/embla-carousel-svelte/README.md @@ -0,0 +1,69 @@ +
+

+

+ Embla Carousel + +

+ +
+ +

+ + + + + + +

+ + +

Embla Carousel Svelte

+ + +

+ The Svelte version of Embla Carousel. +

+ +
+ +

+ +  Installation  + +

+ +

+ +  API Reference  + +

+ +

+ +  Examples  + +

+
+ +
+ +

Open Source

+ +

+ Copyright © 2019-present, David Jerleke.
+ Embla is MIT licensed 💖. +

+ +

+ · · · +

+ +

+ Thanks BrowserStack. +

+ +

+ + + +

diff --git a/packages/embla-carousel-svelte/jest.config.js b/packages/embla-carousel-svelte/jest.config.js new file mode 100644 index 000000000..161ccbc1f --- /dev/null +++ b/packages/embla-carousel-svelte/jest.config.js @@ -0,0 +1,8 @@ +module.exports = { + transform: { + '^.+\\.(t|j)sx?$': 'ts-jest', + }, + testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], + testEnvironment: 'jsdom', +} diff --git a/packages/embla-carousel-svelte/package.json b/packages/embla-carousel-svelte/package.json new file mode 100644 index 000000000..a1fd2bbb3 --- /dev/null +++ b/packages/embla-carousel-svelte/package.json @@ -0,0 +1,66 @@ +{ + "name": "embla-carousel-svelte", + "version": "7.0.0-rc05", + "author": "David Jerleke", + "description": "A lightweight carousel library with fluid motion and great swipe precision", + "repository": { + "type": "git", + "url": "git+https://github.com/davidjerleke/embla-carousel" + }, + "bugs": { + "url": "https://github.com/davidjerleke/embla-carousel/issues" + }, + "homepage": "https://www.embla-carousel.com", + "license": "MIT", + "keywords": [ + "slider", + "carousel", + "slideshow", + "gallery", + "lightweight", + "touch", + "javascript", + "typescript", + "react", + "vue", + "svelte" + ], + "unpkg": "embla-carousel-svelte.umd.js", + "main": "embla-carousel-svelte.cjs.js", + "module": "embla-carousel-svelte.esm.js", + "browser": "embla-carousel-svelte.umd.js", + "types": "index.d.ts", + "sideEffects": false, + "files": [ + "embla-carousel-svelte*", + "components/**/*", + "index.d.ts" + ], + "scripts": { + "test": "echo \"Info: no tests specified\" && exit 0", + "build": "rollup -c", + "start": "rollup -c --watch", + "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\"", + "eslint:fix": "eslint \"src/**/*.{js,tsx,ts}\" --fix" + }, + "devDependencies": { + "@types/jest": "^27.4.0", + "@typescript-eslint/eslint-plugin": "^5.10.2", + "@typescript-eslint/parser": "^5.10.2", + "eslint": "^8.8.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-prettier": "^4.0.0", + "jest": "^27.5.0", + "prettier": "2.5.1", + "rollup": "^2.68.0", + "svelte": "^3.49.0", + "ts-jest": "^27.1.3", + "typescript": "^4.5.5" + }, + "dependencies": { + "embla-carousel": "7.0.0-rc05" + }, + "peerDependencies": { + "svelte": "^3.49.0" + } +} diff --git a/packages/embla-carousel-svelte/rollup.config.js b/packages/embla-carousel-svelte/rollup.config.js new file mode 100644 index 000000000..6cf67f8a2 --- /dev/null +++ b/packages/embla-carousel-svelte/rollup.config.js @@ -0,0 +1,50 @@ +import packageJson from './package.json' +import { + CONFIG_BABEL, + CONFIG_TYPESCRIPT, + CONFIG_GLOBALS as CONFIG_GLOBALS_DEFAULT, + babel, + typescript, + resolve, + terser, + kebabToPascalCase, +} from '../../rollup.config' + +const CONFIG_GLOBALS = { + ...CONFIG_GLOBALS_DEFAULT, + react: 'React', +} + +export default [ + { + input: 'src/index.ts', + output: [ + { + 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: kebabToPascalCase(packageJson.name), + plugins: [terser()], + }, + ], + plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)], + external: Object.keys(CONFIG_GLOBALS), + }, +] diff --git a/packages/embla-carousel-svelte/src/components/index.ts b/packages/embla-carousel-svelte/src/components/index.ts new file mode 100644 index 000000000..86524f962 --- /dev/null +++ b/packages/embla-carousel-svelte/src/components/index.ts @@ -0,0 +1,62 @@ +import { ActionReturn } from 'svelte/action' +import { arePluginsEqual, canUseDOM } from './utils' +import EmblaCarousel, { + EmblaCarouselType, + EmblaOptionsType, + EmblaPluginType, +} from 'embla-carousel' + +type EmblaCarouselParameterType = { + options: EmblaOptionsType + plugins: EmblaPluginType[] +} + +export type EmblaCarouselSvelteType = ActionReturn + +function emblaCarouselSvelte( + emblaNode: HTMLElement, + emblaConfig: EmblaCarouselParameterType = { options: {}, plugins: [] }, +): EmblaCarouselSvelteType { + const areOptionsEqual = EmblaCarousel.optionsHandler().areEqual + let storedEmblaConfig = emblaConfig + let embla: EmblaCarouselType + + if (canUseDOM()) { + EmblaCarousel.globalOptions = emblaCarouselSvelte.globalOptions + embla = EmblaCarousel( + emblaNode, + storedEmblaConfig.options, + storedEmblaConfig.plugins, + ) + embla.on('init', () => + emblaNode.dispatchEvent(new CustomEvent('init', { detail: embla })), + ) + } + + return { + destroy: () => { + if (embla) embla.destroy() + }, + update: (newEmblaConfig) => { + const optionsChanged = !areOptionsEqual( + storedEmblaConfig.options, + newEmblaConfig.options, + ) + const pluginsChanged = !arePluginsEqual( + storedEmblaConfig.plugins, + newEmblaConfig.plugins, + ) + + if (!optionsChanged && !pluginsChanged) return + storedEmblaConfig = newEmblaConfig + + if (embla) { + embla.reInit(storedEmblaConfig.options, storedEmblaConfig.plugins) + } + }, + } +} + +emblaCarouselSvelte.globalOptions = undefined + +export default emblaCarouselSvelte diff --git a/packages/embla-carousel-svelte/src/components/utils.ts b/packages/embla-carousel-svelte/src/components/utils.ts new file mode 100644 index 000000000..883753ff8 --- /dev/null +++ b/packages/embla-carousel-svelte/src/components/utils.ts @@ -0,0 +1,34 @@ +import EmblaCarousel, { EmblaPluginType } from 'embla-carousel' + +export function canUseDOM(): boolean { + return !!( + typeof window !== 'undefined' && + window.document && + window.document.createElement + ) +} + +export function sortAndMapPluginToOptions( + plugins: EmblaPluginType[], +): EmblaPluginType['options'][] { + return plugins + .concat() + .sort((a, b) => (a.name > b.name ? 1 : -1)) + .map((plugin) => plugin.options) +} + +export function arePluginsEqual( + pluginsA: EmblaPluginType[], + pluginsB: EmblaPluginType[], +): boolean { + if (pluginsA.length !== pluginsB.length) return false + + const { areEqual } = EmblaCarousel.optionsHandler() + const optionsA = sortAndMapPluginToOptions(pluginsA) + const optionsB = sortAndMapPluginToOptions(pluginsB) + + return optionsA.every((optionA, index) => { + const optionB = optionsB[index] + return areEqual(optionA, optionB) + }) +} diff --git a/packages/embla-carousel-svelte/src/index.ts b/packages/embla-carousel-svelte/src/index.ts new file mode 100644 index 000000000..a1fab5869 --- /dev/null +++ b/packages/embla-carousel-svelte/src/index.ts @@ -0,0 +1,7 @@ +export { EmblaOptionsType } from 'embla-carousel/components/Options' +export { EmblaEventType } from 'embla-carousel/components/EventHandler' +export { EmblaPluginType } from 'embla-carousel/components/Plugins' +export { EmblaCarouselType } from 'embla-carousel/components' +export { EmblaCarouselSvelteType } from './components' + +export { default } from './components' diff --git a/packages/embla-carousel-svelte/tsconfig.json b/packages/embla-carousel-svelte/tsconfig.json new file mode 100644 index 000000000..0056dac9b --- /dev/null +++ b/packages/embla-carousel-svelte/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "module": "esnext", + "lib": ["dom", "esnext"], + "esModuleInterop": true, + "sourceMap": true, + "strict": true, + "declaration": true, + "declarationDir": "./", + "moduleResolution": "node", + "jsx": "react" + }, + "include": ["src"], + "exclude": ["node_modules", "**/*.test.ts"] +} diff --git a/packages/embla-carousel-vue/README.md b/packages/embla-carousel-vue/README.md index 9bba3e52a..de7dd2a21 100644 --- a/packages/embla-carousel-vue/README.md +++ b/packages/embla-carousel-vue/README.md @@ -5,6 +5,8 @@

+
+

diff --git a/packages/embla-carousel-vue/package.json b/packages/embla-carousel-vue/package.json index 091985dd6..a506510ca 100644 --- a/packages/embla-carousel-vue/package.json +++ b/packages/embla-carousel-vue/package.json @@ -22,7 +22,8 @@ "javascript", "typescript", "react", - "vue" + "vue", + "svelte" ], "unpkg": "embla-carousel-vue.umd.js", "main": "embla-carousel-vue.cjs.js", diff --git a/packages/embla-carousel-vue/src/components/index.ts b/packages/embla-carousel-vue/src/components/index.ts index 79f6e0c3f..a47860f3a 100644 --- a/packages/embla-carousel-vue/src/components/index.ts +++ b/packages/embla-carousel-vue/src/components/index.ts @@ -19,17 +19,17 @@ function emblaCarouselVue( const storedOptions = ref(isRef(options) ? options.value : options) const storedPlugins = ref(isRef(plugins) ? plugins.value : plugins) const emblaNode = ref() - const emblaApi = ref() + const embla = ref() function reInit() { - if (!emblaApi.value) return - emblaApi.value.reInit(storedOptions.value, storedPlugins.value) + if (!embla.value) return + embla.value.reInit(storedOptions.value, storedPlugins.value) } onMounted(() => { if (!canUseDOM() || !emblaNode.value) return EmblaCarousel.globalOptions = emblaCarouselVue.globalOptions - emblaApi.value = EmblaCarousel( + embla.value = EmblaCarousel( emblaNode.value, storedOptions.value, storedPlugins.value, @@ -37,7 +37,7 @@ function emblaCarouselVue( }) onUnmounted(() => { - if (emblaApi.value) emblaApi.value.destroy() + if (embla.value) embla.value.destroy() }) if (isRef(options)) { @@ -58,7 +58,7 @@ function emblaCarouselVue( }) } - return [emblaNode, emblaApi] + return [emblaNode, embla] } emblaCarouselVue.globalOptions = undefined diff --git a/packages/embla-carousel/README.md b/packages/embla-carousel/README.md index ff1cc502f..f78066997 100644 --- a/packages/embla-carousel/README.md +++ b/packages/embla-carousel/README.md @@ -5,6 +5,8 @@

+
+

diff --git a/packages/embla-carousel/package.json b/packages/embla-carousel/package.json index 782626459..06a0dccd0 100644 --- a/packages/embla-carousel/package.json +++ b/packages/embla-carousel/package.json @@ -22,7 +22,8 @@ "javascript", "typescript", "react", - "vue" + "vue", + "svelte" ], "unpkg": "embla-carousel.umd.js", "main": "embla-carousel.cjs.js", diff --git a/yarn.lock b/yarn.lock index f6c47cd1a..97190d809 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8116,6 +8116,28 @@ __metadata: languageName: unknown linkType: soft +"embla-carousel-svelte@workspace:packages/embla-carousel-svelte": + version: 0.0.0-use.local + resolution: "embla-carousel-svelte@workspace:packages/embla-carousel-svelte" + dependencies: + "@types/jest": ^27.4.0 + "@typescript-eslint/eslint-plugin": ^5.10.2 + "@typescript-eslint/parser": ^5.10.2 + embla-carousel: 7.0.0-rc05 + eslint: ^8.8.0 + eslint-config-prettier: ^8.3.0 + eslint-plugin-prettier: ^4.0.0 + jest: ^27.5.0 + prettier: 2.5.1 + rollup: ^2.68.0 + svelte: ^3.49.0 + ts-jest: ^27.1.3 + typescript: ^4.5.5 + peerDependencies: + svelte: ^3.49.0 + languageName: unknown + linkType: soft + "embla-carousel-vue@workspace:packages/embla-carousel-vue": version: 0.0.0-use.local resolution: "embla-carousel-vue@workspace:packages/embla-carousel-vue" @@ -17902,6 +17924,13 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard +"svelte@npm:^3.49.0": + version: 3.49.0 + resolution: "svelte@npm:3.49.0" + checksum: 5b7cb8dbf6b6581b50fab1de63cbcb81816081a1240b03e234b299268fff2f3237bf8f92b683a848f95453353b5694dfe26fa05a55da185a4bb0cd8b80d87dd4 + languageName: node + linkType: hard + "svg-react-loader@npm:^0.4.6": version: 0.4.6 resolution: "svg-react-loader@npm:0.4.6"