Add Vue playground and add SSR

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}' npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.vscode/extenstions.json

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

package.json

@@ -28,26 +28,30 @@
     "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"
   ],
   "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}\" 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}\" 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: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",
     "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",
     "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}\" 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-react/src/components/useEmblaCarousel.ts

@@ -6,12 +6,12 @@ import EmblaCarousel, {
   EmblaPluginType
 } from 'embla-carousel'
 
-export type EmblaViewportRefType = <ViewportElement extends HTMLElement>(
-  instance: ViewportElement | null
+export type EmblaRootNodeRefType = <RootNode extends HTMLElement>(
+  instance: RootNode | null
 ) => void
 
 export type UseEmblaCarouselType = [
-  EmblaViewportRefType,
+  EmblaRootNodeRefType,
   EmblaCarouselType | undefined,
   EmblaCarouselType
 ]
@@ -27,7 +27,7 @@ function useEmblaCarousel(
 
   const serverApi = useRef(EmblaCarousel(null, options, plugins))
   const [clientApi, setClientApi] = useState<EmblaCarouselType>()
-  const [viewport, setViewport] = useState<HTMLElement>()
+  const [rootNode, setRootNode] = useState<HTMLElement>()
 
   const reInit = useCallback(() => {
     if (!clientApi) return
@@ -47,10 +47,10 @@ function useEmblaCarousel(
   }, [plugins, reInit])
 
   useEffect(() => {
-    if (viewport) {
+    if (rootNode) {
       EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions
       const newClientApi = EmblaCarousel(
-        viewport,
+        rootNode,
         storedOptions.current,
         storedPlugins.current
       )
@@ -59,9 +59,9 @@ function useEmblaCarousel(
     } else {
       setClientApi(undefined)
     }
-  }, [viewport])
+  }, [rootNode])
 
-  return [<EmblaViewportRefType>setViewport, clientApi, serverApi.current]
+  return [<EmblaRootNodeRefType>setRootNode, clientApi, serverApi.current]
 }
 
 declare namespace useEmblaCarousel {

packages/embla-carousel-react/src/index.ts

@@ -1,5 +1,5 @@
 export {
   UseEmblaCarouselType,
-  EmblaViewportRefType
+  EmblaRootNodeRefType
 } from './components/useEmblaCarousel'
 export { default } from './components/useEmblaCarousel'

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

@@ -30,19 +30,19 @@ function useEmblaCarousel(
 
   const serverApi = EmblaCarousel(null, storedOptions, storedPlugins)
   const [clientApi, setClientApi] = createSignal<EmblaCarouselType>()
-  const [viewport, setViewport] = createSignal<HTMLElement>()
+  const [rootNode, setRootNode] = createSignal<HTMLElement>()
 
   function reInit(): void {
     const api = clientApi()
     if (api) api.reInit(storedOptions, storedPlugins)
   }
 
   createEffect(
-    on(viewport, (viewport) => {
-      if (viewport) {
+    on(rootNode, (rootNode) => {
+      if (rootNode) {
         EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions
         const newEmblaApi = EmblaCarousel(
-          viewport,
+          rootNode,
           storedOptions,
           storedPlugins
         )
@@ -68,7 +68,7 @@ function useEmblaCarousel(
     reInit()
   })
 
-  return [setViewport, clientApi, serverApi]
+  return [setRootNode, clientApi, serverApi]
 }
 
 declare namespace useEmblaCarousel {

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

@@ -1,12 +1,4 @@
-import {
-  Ref,
-  MaybeRef,
-  isRef,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  shallowRef
-} from 'vue'
+import { Ref, MaybeRef, isRef, watch, onBeforeUnmount, shallowRef } from 'vue'
 import { areOptionsEqual, arePluginsEqual } from 'embla-carousel-reactive-utils'
 import EmblaCarousel, {
   EmblaCarouselType,
@@ -41,15 +33,22 @@ function useEmblaCarousel(
     clientApi.value.reInit(storedOptions, storedPlugins)
   }
 
-  onMounted(() => {
-    if (!rootNode.value) return
-    EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions
-    clientApi.value = EmblaCarousel(
-      rootNode.value,
-      storedOptions,
-      storedPlugins
-    )
-  })
+  watch(
+    () => rootNode.value,
+    () => {
+      if (rootNode.value) {
+        EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions
+        clientApi.value = EmblaCarousel(
+          rootNode.value,
+          storedOptions,
+          storedPlugins
+        )
+      } else {
+        clientApi.value = undefined
+      }
+    },
+    { immediate: true }
+  )
 
   onBeforeUnmount(() => {
     if (clientApi.value) clientApi.value.destroy()

playgrounds/embla-carousel-playground-react/package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
     "preview": "vite preview",
     "test": "echo \"Info: no tests specified\" && exit 0"
   },
@@ -17,16 +16,11 @@
     "react-router-dom": "^6.4.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
     "typescript": "~5.6.2",
-    "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5"
   }
 }

playgrounds/embla-carousel-playground-react/src/Carousel/Buttons.tsx

@@ -1,11 +1,9 @@
-import React from 'react'
-
 type DotButtonPropType = {
   selected: boolean
   onClick: () => void
 }
 
-export const DotButton: React.FC<DotButtonPropType> = (props) => {
+export const DotButton = (props: DotButtonPropType) => {
   const { selected, onClick } = props
 
   return (
@@ -22,7 +20,7 @@ type PrevNextButtonPropType = {
   onClick: () => void
 }
 
-export const PrevButton: React.FC<PrevNextButtonPropType> = (props) => {
+export const PrevButton = (props: PrevNextButtonPropType) => {
   const { enabled, onClick } = props
 
   return (
@@ -42,7 +40,7 @@ export const PrevButton: React.FC<PrevNextButtonPropType> = (props) => {
   )
 }
 
-export const NextButton: React.FC<PrevNextButtonPropType> = (props) => {
+export const NextButton = (props: PrevNextButtonPropType) => {
   const { enabled, onClick } = props
 
   return (

playgrounds/embla-carousel-playground-react/src/Carousel/Carousel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel'
 import useEmblaCarousel from 'embla-carousel-react'
 import { DotButton, PrevButton, NextButton } from './Buttons'
@@ -9,7 +9,7 @@ type PropType = {
   options?: EmblaOptionsType
 }
 
-export const EmblaCarousel: React.FC<PropType> = (props) => {
+export const EmblaCarousel = (props: PropType) => {
   const { slides, options, isSsr } = props
   const [refAttached, setRefAttached] = useState(false)
   const [emblaRef, emblaApi, emblaServerApi] = useEmblaCarousel(options)
@@ -19,8 +19,11 @@ export const EmblaCarousel: React.FC<PropType> = (props) => {
   const [nextBtnEnabled, setNextBtnEnabled] = useState(
     emblaServerApi.canScrollNext()
   )
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [selectedIndex, setSelectedIndex] = useState(
+    emblaServerApi.selectedSnap()
+  )
   const [scrollSnaps, setScrollSnaps] = useState<number[]>([])
+  const showSsr = isSsr && !emblaApi
 
   const scrollPrev = useCallback(
     () => emblaApi && emblaApi.scrollPrev(),
@@ -65,14 +68,14 @@ export const EmblaCarousel: React.FC<PropType> = (props) => {
 
   return (
     <>
-      {isSsr && !emblaApi && (
+      {showSsr && (
         <style id="embla-ssr-styles">
           {emblaServerApi.ssrStyles('.embla__container', '.embla__slide')}
         </style>
       )}
 
       <div className="playground__ssr-text">
-        <strong>SSR:</strong> <span>{(isSsr && !emblaApi).toString()}</span>
+        <strong>SSR:</strong> <span>{showSsr.toString()}</span>
       </div>
 
       <div className="embla">

playgrounds/embla-carousel-playground-react/src/main.tsx

@@ -59,7 +59,7 @@ const injectBaseStyles = (): void => {
 
 injectBaseStyles()
 
-const App: React.FC = () => {
+const App = () => {
   return (
     <main className="playground">
       <h1 className="playground__h1">Playground - React</h1>

playgrounds/embla-carousel-playground-vue/.gitignore

@@ -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?

playgrounds/embla-carousel-playground-vue/index.html

@@ -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 + Vue + TS</title>
+  </head>
+  <body class="theme-dark">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

playgrounds/embla-carousel-playground-vue/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "embla-carousel-playground-vue",
+  "private": true,
+  "version": "8.5.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "echo \"Info: no tests specified\" && exit 0"
+  },
+  "dependencies": {
+    "embla-carousel-vue": "8.5.2",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5",
+    "vue-tsc": "^2.2.0"
+  }
+}