Implement #429.

Co-authored-by: David Jerleke <[email protected]>
Co-authored-by: Liam Martens <[email protected]>

package.json

@@ -16,6 +16,7 @@
   "workspaces": [
     "packages/embla-carousel",
     "packages/embla-carousel-react",
+    "packages/embla-carousel-solid",
     "packages/embla-carousel-vue",
     "packages/embla-carousel-svelte",
     "packages/embla-carousel-docs",
@@ -24,19 +25,23 @@
     "packages/embla-carousel-class-names",
     "packages/embla-carousel-reactive-utils",
     "playgrounds/embla-carousel-playground-vanilla",
-    "playgrounds/embla-carousel-playground-react"
+    "playgrounds/embla-carousel-playground-react",
+    "playgrounds/embla-carousel-playground-solid"
   ],
   "scripts": {
     "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",
     "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: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",
     "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",
     "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:package-readmes": "npx ts-node --project scripts/tsconfig.node.json scripts/create-readmes/index.ts --templatePath=scripts/create-readmes/readme-template.md",

packages/embla-carousel-docs/src/assets/icons/index.ts

@@ -8,6 +8,7 @@ import github from './github-logo.svg'
 import javascript from './javascript-logo.svg'
 import typescript from './typescript-logo.svg'
 import react from './react-logo.svg'
+import solid from './solid-logo.svg'
 import search from './search.svg'
 import cross from './cross.svg'
 import info from './info.svg'
@@ -41,6 +42,7 @@ export const ICONS = {
   javascript: styledSvg(javascript),
   typescript: styledSvg(typescript),
   react: styledSvg(react),
+  solid: styledSvg(solid),
   search: styledSvg(search),
   cross: styledSvg(cross),
   info: styledSvg(info),

packages/embla-carousel-docs/src/content/pages/get-started/cdn.mdx

@@ -1,7 +1,7 @@
 ---
 title: CDN
 description: Learn how to setup Embla Carousel using a CDN.
-order: 4
+order: 5
 date: 2021-02-21
 ---
 

packages/embla-carousel-docs/src/content/pages/get-started/solid.mdx

@@ -0,0 +1,150 @@
+---
+title: Solid
+description: Learn how to setup Embla Carousel using Solid.
+order: 4
+date: 2023-12-31
+---
+
+import { Tabs } from 'components/Tabs/Tabs'
+import { TabsItem } from 'components/Tabs/TabsItem'
+
+# Solid
+
+Start by installing the Embla Carousel **npm package** and add it to your dependencies.
+
+<Tabs groupId="package-manager">
+  <TabsItem label="npm" value="npm">
+
+    ```shell
+    npm install embla-carousel-solid --save
+    ```
+
+  </TabsItem>
+  <TabsItem label="yarn" value="yarn">
+
+    ```shell
+    yarn add embla-carousel-solid
+    ```
+
+  </TabsItem>
+</Tabs>
+
+---
+
+## The component structure
+
+Embla Carousel provides the handy `createEmblaCarousel` method for seamless integration with Solid. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:
+
+```jsx
+import createEmblaCarousel from 'embla-carousel-solid'
+
+export const EmblaCarousel = () => {
+  const [emblaRef] = createEmblaCarousel()
+
+  return (
+    <div class="embla" ref={emblaRef}>
+      <div class="embla__container">
+        <div class="embla__slide">Slide 1</div>
+        <div class="embla__slide">Slide 2</div>
+        <div class="embla__slide">Slide 3</div>
+      </div>
+    </div>
+  )
+}
+```
+
+## Styling the carousel
+
+The method gives us a **ref** to attach to our wrapping element with the classname `embla`, which is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:
+
+```css
+.embla {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+}
+.embla__slide {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+```
+
+## Accessing the carousel API
+
+The `createEmblaCarousel` method takes the Embla Carousel [options](/api/options/) as the first argument, which is a Solid accessor. Additionally, you can access the [API](/api/) with a `createEffect` like demonstrated below:
+
+```jsx{5,7-12}
+import { createEffect } from 'solid-js'
+import createEmblaCarousel from 'embla-carousel-solid'
+
+export const EmblaCarousel = () => {
+  const [emblaRef, emblaApi] = createEmblaCarousel(() => ({ loop: true }))
+
+  createEffect(() => {
+    const api = emblaApi()
+    if (api) {
+      console.log(api.slideNodes()) // Access API
+    }
+  })
+
+  return (
+    <div class="embla" ref={emblaRef}>
+      <div class="embla__container">
+        <div class="embla__slide">Slide 1</div>
+        <div class="embla__slide">Slide 2</div>
+        <div class="embla__slide">Slide 3</div>
+      </div>
+    </div>
+  )
+}
+```
+
+## Adding plugins
+
+Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:
+
+<Tabs groupId="package-manager">
+  <TabsItem label="npm" value="npm">
+
+    ```shell
+    npm install embla-carousel-autoplay --save
+    ```
+
+  </TabsItem>
+  <TabsItem label="yarn" value="yarn">
+
+    ```shell
+    yarn add embla-carousel-autoplay
+    ```
+
+  </TabsItem>
+</Tabs>
+
+The `createEmblaCarousel` method accepts [plugins](/plugins/) as the second argument, which is a Solid accessor. Note that plugins need to be passed in an **array** like so:
+
+The config getter can also return a list of plugins, like so:
+
+```jsx{2,7}
+import createEmblaCarousel from 'embla-carousel-solid'
+import Autoplay from 'embla-carousel-autoplay'
+
+export const EmblaCarousel = () => {
+  const [emblaRef] = createEmblaCarousel(
+    () => ({ loop: true }),
+    () => [AutoPlay()]
+  )
+
+  return (
+    <div class="embla" ref={emblaRef}>
+      <div class="embla__container">
+        <div class="embla__slide">Slide 1</div>
+        <div class="embla__slide">Slide 2</div>
+        <div class="embla__slide">Slide 3</div>
+      </div>
+    </div>
+  )
+}
+```
+
+Congratulations! You just created your first Embla Carousel component.

packages/embla-carousel-solid/.eslintignore

@@ -0,0 +1,5 @@
+docs
+package.json
+package-lock.json
+yarn.lock
+node_modules

packages/embla-carousel-solid/.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'
+  }
+}

packages/embla-carousel-solid/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('../../.prettierrc.js')