refactor: improved provide inject by using a single symbol

.eslintrc.json

@@ -19,6 +19,8 @@
     "parser": "@typescript-eslint/parser"
   },
   "rules": {
+    "no-console": "error",
+    "semi": ["error", "never", { "beforeStatementContinuationChars": "always" }],
     "import/order": [
       "error",
       {
@@ -27,9 +29,8 @@
         "groups": ["builtin", "external", "internal", "parent", "sibling", "index"]
       }
     ],
-    "vue/multi-word-component-names": "off",
-    "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/no-this-alias": "off",
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-non-null-assertion": "off"
   }
 }

.github/workflows/test.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Tests
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x, 22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+      - run: npm run lint
+      - run: npm run test

.gitignore

@@ -20,3 +20,5 @@ yarn-error.log*
 *.sln
 *.sw?
 *cache
+
+package-lock.json

package.json

@@ -4,17 +4,21 @@
   "type": "module",
   "scripts": {
     "build": "rollup -c",
-    "dev": "rollup -cw",
+    "dev": "vite playground",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
+    "prepublishOnly": "$npm_execpath run build",
     "release": "sh scripts/new-release.sh",
     "lint": "eslint . --ext .ts",
-    "lint:fix": "yarn lint --fix",
+    "lint:fix": "$npm_execpath run lint -- --fix",
     "prettier": "prettier . --check",
-    "prettier:fix": "yarn prettier --write",
-    "test": "vitest",
-    "test:watch": "npm run test -- --watchAll"
+    "prettier:fix": "$npm_execpath run prettier --write",
+    "typecheck": "tsc -p .",
+    "typecheck:watch": "tsc -p . --watch --preserveWatchOutput",
+    "test": "$npm_execpath run typecheck && vitest run",
+    "test:update": "vitest run --u",
+    "test:watch": "vitest watch"
   },
   "repository": {
     "type": "git",
@@ -23,24 +27,25 @@
   "exports": {
     ".": {
       "types": "./dist/carousel.d.ts",
-      "import": "./dist/carousel.es.js",
+      "browser": "./dist/carousel.min.js",
       "require": "./dist/carousel.js",
-      "browser": "./dist/carousel.min.js"
+      "import": "./dist/carousel.es.js"
     },
     "./dist/carousel": {
       "types": "./dist/carousel.d.ts",
-      "import": "./dist/carousel.es.js",
+      "browser": "./dist/carousel.min.js",
       "require": "./dist/carousel.js",
-      "browser": "./dist/carousel.min.js"
+      "import": "./dist/carousel.es.js"
     },
     "./dist/carousel.min.js": {
-      "import": "./dist/carousel.es.min.js",
-      "require": "./dist/carousel.min.js"
+      "require": "./dist/carousel.min.js",
+      "import": "./dist/carousel.es.min.js"
     },
     "./dist/*.css": {
-      "import": "./dist/*.css",
-      "require": "./dist/*.css"
-    }
+      "require": "./dist/*.css",
+      "import": "./dist/*.css"
+    },
+    "./carousel.css": "./dist/carousel.css"
   },
   "main": "dist/carousel.js",
   "module": "dist/carousel.es.js",
@@ -54,6 +59,7 @@
     "@stackblitz/sdk": "^1.11.0",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
@@ -70,8 +76,8 @@
     "rollup-plugin-typescript-paths": "^1.5.0",
     "typescript": "^5.4.3",
     "vite-tsconfig-paths": "^5.0.1",
-    "vitepress": "^1.3.4",
-    "vitest": "^2.1.4",
+    "vitepress": "^1.5.0",
+    "vitest": "^2.1.6",
     "vue": "^3.2.0"
   },
   "peerDependencies": {
@@ -82,5 +88,9 @@
     "last 2 versions",
     "not dead"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "resolutions": {
+    "vite": "^6",
+    "esbuild": "^0.24.0"
+  }
 }

playground/App.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <fieldset>
+      <label
+        >Snap Align
+        <select v-model="snapAlign">
+          <option v-for="opt in SNAP_ALIGN_OPTIONS" :value="opt" :key="opt">
+            {{ opt }}
+          </option>
+        </select>
+      </label>
+      <label
+        >Direction
+        <select v-model="dir">
+          <option v-for="opt in Object.keys(DIR_MAP)" :value="opt" :key="opt">
+            {{ opt }}
+          </option>
+        </select>
+      </label>
+      <label>Items to show: <input type="number" v-model="itemsToShow" /></label>
+      <label>Items to scroll: <input type="number" v-model="itemsToScroll" /></label>
+      <label>Height: <input v-model="height" type="number" /></label>
+      <label
+        >Autoplay time:
+        <input type="number" v-model="autoplay" step="100" min="0" max="10000"
+      /></label>
+      <label><input type="checkbox" v-model="wrapAround" />Wrap Around</label>
+      <label>Current slide: <input type="number" v-model="currentSlide" /></label>
+    </fieldset>
+    <div class="carousel-wrapper">
+      <VueCarousel
+        v-model="currentSlide"
+        :items-to-show="itemsToShow"
+        :items-to-scroll="itemsToScroll"
+        :gap="10"
+        :height="height || 'auto'"
+        :autoplay="autoplay ? parseInt(autoplay) : null"
+        :pause-autoplay-on-hover="true"
+        :wrap-around="wrapAround"
+        :dir="dir"
+        :snap-align="snapAlign"
+      >
+        <CarouselSlide v-for="i in 10" :key="i" v-slot="{ isActive, isClone }">
+          <div class="carousel__item">{{ i }}<button>This is a button</button></div>
+        </CarouselSlide>
+        <template #addons>
+          <CarouselPagination />
+          <CarouselNavigation />
+        </template>
+      </VueCarousel>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '@/styles'
+import {
+  Carousel as VueCarousel,
+  Slide as CarouselSlide,
+  Pagination as CarouselPagination,
+  Navigation as CarouselNavigation,
+} from '@/index'
+import { ref } from 'vue'
+
+import { DIR_MAP, SNAP_ALIGN_OPTIONS } from '@/partials/defaults'
+
+const currentSlide = ref(0)
+const snapAlign = ref('center')
+const itemsToScroll = ref(1)
+const itemsToShow = ref(1)
+const autoplay = ref()
+const wrapAround = ref(true)
+const height = ref('200')
+const dir = ref('left-to-right')
+</script>
+
+<style lang="css">
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  color-scheme: light dark;
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --brand-color: #535bf2;
+}
+
+fieldset {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-bottom: 10px;
+}
+
+@keyframes pop-in {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.carousel-wrapper {
+  animation: pop-in 3s;
+}
+
+fieldset label {
+  display: inline-flex;
+  gap: 10px;
+  flex-grow: 1;
+}
+
+.carousel__item {
+  width: 100%;
+  height: 100%;
+  background-color: var(--brand-color);
+  color: #fff;
+  font-size: 20px;
+  border-radius: 8px;
+  flex-direction: column;
+  gap: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

playground/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Vue3 Carousel playground</title>
+  <script type="module">
+    import { createApp } from 'vue'
+    import App from './App.vue'
+
+    createApp(App).mount('#app')
+  </script>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>

playground/vite.config.ts

@@ -0,0 +1,23 @@
+import {resolve} from 'node:path'
+
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+import { compilerOptions } from '../tsconfig.json'
+
+const resolvePaths = () => {
+  return Object.fromEntries(
+    Object.entries(compilerOptions.paths || {}).map(([key, value]) => [
+      key.replace('/*', ''),
+      resolve(__dirname, '..', value[0].replace('/*', '')),
+    ])
+  )
+}
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: resolvePaths(),
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
+})

rollup.config.js

@@ -5,7 +5,7 @@ import { typescriptPaths } from 'rollup-plugin-typescript-paths'
 import typescript from '@rollup/plugin-typescript'
 import terser from '@rollup/plugin-terser'
 
-import pkg from './package.json' assert { type: 'json' }
+import pkg from './package.json' with { type: 'json' }
 
 const banner = `/**
  * Vue 3 Carousel ${pkg.version}

scripts/new-release.sh

@@ -3,8 +3,5 @@
 # abort on errors
 set -e
 
-npm run build
-
+npm publish
 git push --tags
-git push
-npm publish

src/components/ARIA.ts

@@ -1,16 +1,16 @@
-import { defineComponent, inject, ref, h, reactive } from 'vue'
+import { defineComponent, inject, h } from 'vue'
 
-import { DEFAULT_CONFIG } from '@/partials/defaults'
+import { injectCarousel } from '@/injectSymbols'
 import { i18nFormatter } from '@/utils/i18nFormater'
 
-import { CarouselConfig } from '../types'
-
 export default defineComponent({
-  name: 'ARIA',
+  name: 'CarouselAria',
   setup() {
-    const config: CarouselConfig = inject('config', reactive({ ...DEFAULT_CONFIG }))
-    const currentSlide = inject('currentSlide', ref(0))
-    const slidesCount = inject('slidesCount', ref(0))
+    const carousel = inject(injectCarousel)
+
+    if (!carousel) {
+      return
+    }
 
     return () =>
       h(
@@ -20,9 +20,9 @@ export default defineComponent({
           'aria-live': 'polite',
           'aria-atomic': 'true',
         },
-        i18nFormatter(config.i18n['itemXofY'], {
-          currentSlide: currentSlide.value + 1,
-          slidesCount: slidesCount.value,
+        i18nFormatter(carousel.config.i18n['itemXofY'], {
+          currentSlide: carousel.currentSlide + 1,
+          slidesCount: carousel.slidesCount,
         })
       )
   },