chore: fix test

refactor: use antfu/eslint

.github/workflows/cd.yaml

@@ -18,8 +18,8 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
+          node-version-file: .nvmrc
+          cache: pnpm
 
       - name: Install Dependencies
         run: pnpm install

.github/workflows/ci.yaml

@@ -3,79 +3,21 @@ on:
   push:
     branches-ignore:
       - main
-jobs:
-  sherif:
-    name: Monorepo Sherif
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Run sherif
-        run: pnpm dlx sherif@latest
-
-  lint:
-    name: Lint and Format
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Lint
-        run: pnpm run eslint:check
-
-      - name: Format
-        run: pnpm run prettier:check
 
+jobs:
   tests:
-    name: Tests
+    name: Playwright Tests
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build package
-        run: pnpm run build-package
-
-      - name: Install Playwright browsers
-        run: pnpm dlx playwright install --with-deps
-
-      - name: Run tests
-        run: pnpm test
-
+          node-version: 20
+      - run: npm install -g [email protected]
+      - run: pnpm install --no-frozen-lockfile
+      - run: pnpm build:package
+      - run: npx playwright install --with-deps
+      - run: pnpm test || exit 1
       - uses: actions/upload-artifact@v3
         if: always()
         with:

.gitignore

@@ -20,6 +20,7 @@ coverage
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 *.suo
 *.ntvs*

.vscode/extensions.json

@@ -3,7 +3,6 @@
     "Vue.volar",
     "Vue.vscode-typescript-vue-plugin",
     "ms-playwright.playwright",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
+    "dbaeumer.vscode-eslint"
   ]
 }

.vscode/settings.json

@@ -0,0 +1,43 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml"
+  ]
+}

README.md

@@ -21,7 +21,7 @@ yarn add vaul-vue
 
 ```vue
 <script setup lang="ts">
-import { DrawerRoot, DrawerTrigger, DrawerOverlay, DrawerContent, DrawerPortal } from 'vaul-vue'
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
 </script>
 
 <template>

eslint.config.js

@@ -0,0 +1,11 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  vue: true,
+  typescript: true,
+  rules: {
+    'unused-imports/no-unused-vars': 'off', // off for now
+    '@typescript-eslint/no-unused-vars': 'off', // off for now
+    'node/prefer-global/process': 'off', // off for now
+  },
+})

package.json

@@ -1,25 +1,22 @@
 {
+  "type": "module",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
+  "packageManager": "[email protected]",
   "scripts": {
-    "prettier:check": "prettier --check .",
-    "prettier:fix": "prettier --write .",
-    "eslint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
-    "eslint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "pnpm -r test",
     "release": "pnpm -r release && changeset publish",
     "build:package": "pnpm --filter vaul-vue build-only",
     "build:playground": "pnpm build:package && pnpm --filter playground build"
   },
-  "packageManager": "[email protected]",
   "devDependencies": {
+    "@antfu/eslint-config": "^2.6.4",
     "@changesets/cli": "^2.27.1",
+    "@playwright/test": "^1.41.2",
     "@rushstack/eslint-patch": "^1.3.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "prettier": "^3.0.3"
+    "eslint": "^8.56.0"
   }
-}
+}

packages/vaul-vue/package.json

@@ -1,20 +1,8 @@
 {
   "name": "vaul-vue",
-  "version": "0.0.3",
   "type": "module",
-  "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    }
-  },
-  "files": [
-    "dist",
-    "../../README.md"
-  ],
+  "version": "0.0.3",
+  "repository": "https://github.com/Elliot-Alexander/vaul-vue",
   "keywords": [
     "vue",
     "vue3",
@@ -23,7 +11,19 @@
     "modal",
     "headless"
   ],
-  "repository": "https://github.com/Elliot-Alexander/vaul-vue",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "../../README.md",
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -46,20 +46,18 @@
     "@types/jsdom": "^21.1.6",
     "@types/node": "^18.19.3",
     "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.0",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "jsdom": "^23.0.1",
     "npm-run-all2": "^6.1.1",
-    "prettier": "^3.0.3",
     "typescript": "~5.3.0",
     "vite": "^5.0.10",
     "vite-plugin-css-injected-by-js": "^3.3.1",
     "vite-plugin-dts": "^3.7.0",
     "vitest": "^1.0.4",
     "vue-tsc": "^1.8.25"
   }
-}
+}

packages/vaul-vue/src/DrawerContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, useAttrs, watch } from 'vue'
+import { computed, useAttrs, watch } from 'vue'
 import { DialogContent } from 'radix-vue'
 import { injectDrawerRootContext } from './context'
 
@@ -15,30 +15,30 @@ const {
   emitOpenChange,
   dismissible,
   keyboardIsOpen,
-  closeDrawer
+  closeDrawer,
 } = injectDrawerRootContext()
 
 const attrs = useAttrs()
 
 const snapPointHeight = computed(() => {
-  if (snapPointsOffset.value && snapPointsOffset.value.length > 0) {
+  if (snapPointsOffset.value && snapPointsOffset.value.length > 0)
     return `${snapPointsOffset.value[0]}px`
-  }
+
   return '0'
 })
 
-const handlePointerDownOutside = (event: Event) => {
+function handlePointerDownOutside(event: Event) {
   if (!modal.value || event.defaultPrevented) {
     event.preventDefault()
     return
   }
-  if (keyboardIsOpen.value) {
+  if (keyboardIsOpen.value)
     keyboardIsOpen.value = false
-  }
+
   event.preventDefault()
-  if (!dismissible.value) {
+  if (!dismissible.value)
     return
-  }
+
   closeDrawer()
 }
 
@@ -50,14 +50,16 @@ watch(
         isVisible.value = true
       }, 1)
     }
-  }
+  },
 )
 </script>
 
 <template>
-  <DialogContent vaul-drawer="" :vaul-drawer-visible="isVisible ? 'true' : 'false'" ref="drawerRef"
+  <DialogContent
+    ref="drawerRef" vaul-drawer="" :vaul-drawer-visible="isVisible ? 'true' : 'false'"
     :style="[attrs.style, { '--snap-point-height': snapPointHeight }]" @pointerdown="onPress" @pointermove="onDrag"
-    @pointerup="onRelease" @pointer-down-outside="handlePointerDownOutside">
+    @pointerup="onRelease" @pointer-down-outside="handlePointerDownOutside"
+  >
     <slot />
   </DialogContent>
 </template>

packages/vaul-vue/src/DrawerOverlay.vue

@@ -2,6 +2,7 @@
 import { DialogOverlay } from 'radix-vue'
 import { computed } from 'vue'
 import { injectDrawerRootContext } from './context'
+
 const { overlayRef, snapPoints, isVisible, isOpen, shouldFade } = injectDrawerRootContext()
 
 const hasSnapPoints = computed(() => snapPoints && (snapPoints.value?.length ?? 0) > 0)