Add Svelte playground and add SSR

Author: davidjerleke

Diff for: .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,embla-carousel-playground-vue}' 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 }}

Diff for: .vscode/extenstions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "esbenp.prettier-vscode",
     "unifiedjs.vscode-mdx",
-    "Vue.volar"
+    "Vue.volar",
+    "svelte.svelte-vscode"
   ]
 }

Diff for: .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"
+  }
 }

Diff for: package.json

@@ -29,29 +29,33 @@
     "playgrounds/embla-carousel-playground-vanilla",
     "playgrounds/embla-carousel-playground-react",
     "playgrounds/embla-carousel-playground-solid",
-    "playgrounds/embla-carousel-playground-vue"
+    "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,embla-carousel-playground-solid,embla-carousel-playground-vue}\" 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,embla-carousel-playground-solid,embla-carousel-playground-vue}\" 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,embla-carousel-playground-solid,embla-carousel-playground-vue}\" 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",

Diff for: playgrounds/embla-carousel-playground-react/eslint.config.js

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Diff for: playgrounds/embla-carousel-playground-svelte/.gitignore

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body class="theme-dark">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

Diff for: playgrounds/embla-carousel-playground-svelte/index.html

@@ -0,0 +1,24 @@
+{
+  "name": "embla-carousel-playground-svelte",
+  "private": true,
+  "version": "8.5.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "echo \"Info: no tests specified\" && exit 0",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+  },
+  "dependencies": {
+    "embla-carousel-svelte": "8.5.2"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^5.15.0",
+    "svelte-check": "^4.1.1",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5"
+  }
+}

Diff for: playgrounds/embla-carousel-playground-svelte/package.json

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { EmblaOptionsType } from 'embla-carousel'
+  import { arrayFromNumber } from 'utils/arrayFromNumber'
+  import { styledComponentsStylesToString } from 'utils/styledComponentStylesToString'
+  import { RESET_STYLES } from 'components/Layout/GlobalStyles/reset'
+  import { BASE_STYLES } from 'components/Layout/GlobalStyles/base'
+  import { FONT_STYLES } from 'components/Layout/GlobalStyles/font'
+  import { SANDBOX_CSS } from 'components/Sandbox/sandboxStyles'
+  import { THEME_STYLES } from 'consts/themes'
+  import {
+    ARROWS_STYLES,
+    CONTROLS_STYLES,
+    DOTS_STYLES,
+    SLIDE_NUMBER_STYLES,
+    examplesCarouselDefaultStyles
+  } from 'components/Examples/examplesCarouselStyles'
+  import Carousel from './Carousel/Carousel.svelte'
+  import './main.css'
+
+  const SSR_ACTIVE = true
+  const SLIDE_SIZE = 50
+  const SLIDES = arrayFromNumber(4)
+
+  const OPTIONS: EmblaOptionsType = {
+    loop: true,
+    direction: 'ltr',
+    startSnap: 3,
+    axis: 'x',
+    ssr: SLIDES.map(() => SLIDE_SIZE)
+  }
+
+  const injectBaseStyles = (): void => {
+    const styleElement = document.createElement('style')
+    const carouselStyles = examplesCarouselDefaultStyles(
+      `${SLIDE_SIZE}%`,
+      '1rem',
+      'x',
+      styledComponentsStylesToString(
+        CONTROLS_STYLES,
+        SLIDE_NUMBER_STYLES,
+        ARROWS_STYLES,
+        DOTS_STYLES
+      )
+    )
+
+    styleElement.innerHTML =
+      SANDBOX_CSS +
+      styledComponentsStylesToString(
+        THEME_STYLES,
+        RESET_STYLES,
+        BASE_STYLES,
+        FONT_STYLES
+      ) +
+      carouselStyles
+
+    document.head.appendChild(styleElement)
+  }
+
+  injectBaseStyles()
+</script>
+
+<main class="playground">
+  <h1 class="playground__h1">Playground - Svelte</h1>
+  <Carousel options={OPTIONS} slides={SLIDES} isSsr={SSR_ACTIVE} />
+</main>

Diff for: playgrounds/embla-carousel-playground-svelte/src/App.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
+  import useEmblaCarousel from 'embla-carousel-svelte'
+  import DotButton from './DotButton.svelte'
+  import PrevButton from './PrevButton.svelte'
+  import NextButton from './NextButton.svelte'
+
+  const { options, slides, isSsr } = $props<{
+    options?: EmblaOptionsType
+    slides: number[]
+    isSsr: boolean
+  }>()
+
+  const emblaServerApi = useEmblaCarousel({ options })
+  let emblaApi: EmblaCarouselType | null = $state(null)
+
+  let actionAttached = $state(false)
+  let prevBtnEnabled = $state(emblaServerApi.canScrollPrev())
+  let nextBtnEnabled = $state(emblaServerApi.canScrollNext())
+  let scrollSnaps = $state<number[]>([])
+  let selectedIndex = $state(emblaServerApi.selectedSnap())
+  let showSsr = $derived(isSsr && !emblaApi)
+
+  const ssrStyles = `<style>${emblaServerApi.ssrStyles(
+    '.embla__container',
+    '.embla__slide'
+  )}</style>`
+
+  function onInit(emblaApi: EmblaCarouselType): void {
+    scrollSnaps = emblaApi.snapList()
+  }
+
+  function onEmblaInit(event: CustomEvent<EmblaCarouselType>): void {
+    emblaApi = event.detail
+
+    onInit(emblaApi)
+    onSelect(emblaApi)
+    emblaApi.on('reinit', onInit).on('reinit', onSelect).on('select', onSelect)
+  }
+
+  function onSelect(emblaApi: EmblaCarouselType): void {
+    prevBtnEnabled = emblaApi.canScrollPrev()
+    nextBtnEnabled = emblaApi.canScrollNext()
+    selectedIndex = emblaApi.selectedSnap()
+  }
+
+  function scrollPrev(): void {
+    emblaApi?.scrollPrev()
+  }
+
+  function scrollNext(): void {
+    emblaApi?.scrollNext()
+  }
+
+  function scrollTo(index: number): void {
+    emblaApi?.scrollToSnap(index)
+  }
+
+  setTimeout(
+    () => {
+      actionAttached = true
+    },
+    isSsr ? 2000 : 0
+  )
+</script>
+
+{#if showSsr}
+  <div id="embla-ssr-styles">
+    {@html ssrStyles}
+  </div>
+{/if}
+
+<div class="playground__ssr-text">
+  <strong>SSR:</strong> <span>{showSsr.toString()}</span>
+</div>
+
+<div class="embla">
+  {#if actionAttached}
+    <div
+      class="embla__viewport"
+      use:useEmblaCarousel={{ options }}
+      onemblainit={onEmblaInit}
+    >
+      <div class="embla__container">
+        {#each slides as index}
+          <div class="embla__slide">
+            <div class="embla__slide__number">{index + 1}</div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="embla__viewport">
+      <div class="embla__container">
+        {#each slides as index}
+          <div class="embla__slide">
+            <div class="embla__slide__number">{index + 1}</div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <div class="embla__controls">
+    <div class="embla__buttons">
+      <PrevButton enabled={prevBtnEnabled} onClick={scrollPrev} />
+      <NextButton enabled={nextBtnEnabled} onClick={scrollNext} />
+    </div>
+
+    <div class="embla__dots">
+      {#each scrollSnaps as _, index}
+        <DotButton
+          selected={index === selectedIndex}
+          onClick={() => scrollTo(index)}
+        />
+      {/each}
+    </div>
+  </div>
+</div>

Diff for: playgrounds/embla-carousel-playground-svelte/src/Carousel/Carousel.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  const { selected, onClick } = $props<{
+    selected: boolean
+    onClick: () => void
+  }>()
+</script>
+
+<button
+  class="embla__dot {selected ? 'embla__dot--selected' : ''}"
+  type="button"
+  onclick={onClick}
+  aria-label="Go to slide"
+>
+</button>

Diff for: playgrounds/embla-carousel-playground-svelte/src/Carousel/DotButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  const { enabled, onClick } = $props<{
+    enabled: boolean
+    onClick: () => void
+  }>()
+</script>
+
+<button
+  class="embla__button embla__button--next"
+  type="button"
+  onclick={onClick}
+  disabled={!enabled}
+  aria-label="Go to slide"
+>
+  <svg
+    class="embla__button__svg"
+    viewBox="0 0 238.003 238.003"
+    fill="currentColor"
+  >
+    <path
+      d="M181.776 107.719L78.705 4.648c-6.198-6.198-16.273-6.198-22.47 0s-6.198 16.273 0 22.47l91.883 91.883-91.883 91.883c-6.198 6.198-6.198 16.273 0 22.47s16.273 6.198 22.47 0l103.071-103.039a15.741 15.741 0 0 0 4.64-11.283c0-4.13-1.526-8.199-4.64-11.313z"
+    />
+  </svg>
+</button>