feat(repo): move to antfu eslint config ; fix all errors ; cleanup

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,6 +1,6 @@
-name: "\U0001F41E Bug report"
+name: 🐞 Bug report
 description: Report an issue with @vueuse/motion
-labels: ['pending triage']
+labels: [pending triage]
 body:
   - type: textarea
     id: bug-env

.github/PULL_REQUEST_TEMPLATE.md

@@ -29,4 +29,4 @@
 
 - [ ] I have linked an issue or discussion.
 - [ ] I have added tests (if possible).
-- [ ] I have updated the documentation accordingly.
+- [ ] I have updated the documentation accordingly.

.github/reproduire/needs-reproduction.md

@@ -24,4 +24,4 @@ You might also find these other articles interesting and/or helpful:
 - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required)
 - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/minimal-reproducible-example)
 
-</details>
+</details>

.github/workflows/ci.yml

@@ -34,7 +34,7 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           registry-url: https://registry.npmjs.org/
-          cache: "pnpm"
+          cache: pnpm
 
       - name: Install dependencies
         run: pnpm install

.github/workflows/reproduire-close.yml

@@ -14,11 +14,11 @@ jobs:
       - uses: actions/stale@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.0.0
         with:
           days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
-          stale-issue-label: 'needs reproduction' # Label that flags an issue as stale.
-          only-labels: 'needs reproduction' # Only process these issues
+          stale-issue-label: needs reproduction # Label that flags an issue as stale.
+          only-labels: needs reproduction # Only process these issues
           days-before-issue-close: 7
           ignore-updates: true
           remove-stale-when-updated: false
           close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
           close-issue-label: closed by bot
-          operations-per-run: 300 #default 30
+          operations-per-run: 300 # default 30

.github/workflows/reproduire.yml

@@ -13,4 +13,4 @@ jobs:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       - uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp
         with:
-          label: needs reproduction
+          label: needs reproduction

.github/workflows/targets.yml

@@ -34,7 +34,7 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           registry-url: https://registry.npmjs.org/
-          cache: "pnpm"
+          cache: pnpm
 
       - name: Install dependencies
         run: pnpm install

docs/components/content/Hero.vue

@@ -82,7 +82,9 @@ useMotion(sources, {
       </div>
 
       <div ref="sources" class="action alt">
-        <NuxtLink to="https://github.com/vueuse/motion">Source</NuxtLink>
+        <NuxtLink to="https://github.com/vueuse/motion">
+          Source
+        </NuxtLink>
       </div>
     </div>
   </header>

docs/components/content/PresetSection.vue

@@ -26,7 +26,8 @@ const replayInstance = useMotion(replayButton, {
 })
 
 async function replay() {
-  if (isReplaying.value) return
+  if (isReplaying.value)
+    return
 
   isReplaying.value = true
 
@@ -36,11 +37,14 @@ async function replay() {
 
   await apply(props.preset.initial)
 
-  if (props.preset.visible) await apply(props.preset.visible)
+  if (props.preset.visible)
+    await apply(props.preset.visible)
 
-  if (props.preset.visibleOnce) await apply(props.preset.visibleOnce)
+  if (props.preset.visibleOnce)
+    await apply(props.preset.visibleOnce)
 
-  if (props.preset.enter) await apply(props.preset.enter)
+  if (props.preset.enter)
+    await apply(props.preset.enter)
 
   replayInstance.set({ rotate: 0 })
 

docs/components/content/examples/MotionComponent.vue

@@ -2,9 +2,13 @@
 
 <template>
   <div class="example-wrapper">
-    <div class="example-hint">Scroll down to trigger motion!</div>
+    <div class="example-hint">
+      Scroll down to trigger motion!
+    </div>
     <Motion is="p" preset="slideVisibleLeft">
-      <div class="example-target">Text in Motion!</div>
+      <div class="example-target">
+        Text in Motion!
+      </div>
     </Motion>
   </div>
 </template>

docs/components/content/examples/MotionGroupComponent.vue

@@ -2,7 +2,9 @@
 
 <template>
   <div class="example-wrapper">
-    <div class="example-hint">Scroll down to trigger motion!</div>
+    <div class="example-hint">
+      Scroll down to trigger motion!
+    </div>
     <MotionGroup preset="slideVisibleLeft" :duration="600">
       <section>
         <h3>Product 1</h3>

eslint.config.js

@@ -0,0 +1,26 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    vue: true,
+    typescript: true,
+    markdown: false,
+    rules: {
+      'semi': ['error', 'never'],
+      'jsdoc/check-param-names': 'off',
+      'jsdoc/check-tag-names': 'off',
+    },
+  },
+  {
+    ignores: [
+      '*.md',
+      '*.css',
+      'dist/**/*',
+      '.output/**/*',
+      '.nuxt/**/*',
+      'coverage/',
+      'dist/',
+      'templates/',
+    ],
+  },
+)

netlify.toml

@@ -1,11 +1,11 @@
 [[redirects]]
-  from = "https://motion.vueuse.js.org/*"
-  to = "https://motion.vueuse.org/:splat"
-  status = 301
-  force = true
+from = "https://motion.vueuse.js.org/*"
+to = "https://motion.vueuse.org/:splat"
+status = 301
+force = true
 
 [[redirects]]
-  from = "https://vueuse-motion.netlify.app/*"
-  to = "https://motion.vueuse.org/:splat"
-  status = 301
-  force = true
+from = "https://vueuse-motion.netlify.app/*"
+to = "https://motion.vueuse.org/:splat"
+status = 301
+force = true

package.json

@@ -32,11 +32,6 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ],
   "typesVersions": {
     "*": {
       "*": [
@@ -45,12 +40,17 @@
       ]
     }
   },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist"
+  ],
   "scripts": {
     "build": "unbuild  && node ./scripts/fix-nuxt-build.mjs",
     "dev": "pnpm dev:vite",
     "release": "release-it",
-    "lint": "eslint --ext .js,.vue,.ts,.tsx .",
-    "lint:fix": "eslint --ext .js,.vue,.ts,.tsx . --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test:unit": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test": "pnpm test:unit && pnpm test:coverage",
@@ -89,14 +89,10 @@
     "@antfu/eslint-config": "^2.19.1",
     "@nuxt/kit": "^3.11.2",
     "@nuxt/schema": "^3.11.2",
-    "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@vitest/coverage-v8": "^1.6.0",
     "@vue/test-utils": "^2.4.6",
     "chokidar": "^3.6.0",
     "eslint": "^9.3.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-prettier-vue": "^5.0.0",
     "happy-dom": "^14.12.0",
     "lint-staged": "^15.2.5",
     "prettier": "^3.2.5",
@@ -107,9 +103,6 @@
     "vue": "^3.4.27",
     "yorkie": "^2.0.0"
   },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [
@@ -129,14 +122,6 @@
       }
     }
   },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix"
-    ],
-    "*.ts?(x)": [
-      "eslint --fix"
-    ]
-  },
   "release-it": {
     "hooks": {
       "before:init": [

playgrounds/vite-ssg/package.json

@@ -7,14 +7,14 @@
     "preview:ssg": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.27",
+    "@vueuse/head": "^2.0.0",
     "@vueuse/motion": "workspace:~",
-    "vue-router": "^4.3.2",
-    "@vueuse/head": "^2.0.0"
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "vite": "5.2.12",
     "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "5.2.12",
     "vite-ssg": "latest"
   }
 }

playgrounds/vite/package.json

@@ -6,15 +6,15 @@
     "preview:vite": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.27",
     "@vueuse/motion": "workspace:~",
     "prism-theme-vars": "^0.2.5",
-    "prismjs": "^1.29.0"
+    "prismjs": "^1.29.0",
+    "vue": "^3.4.27"
   },
   "devDependencies": {
-    "vite": "5.2.12",
-    "vite-plugin-windicss": "^1.9.3",
+    "@types/prismjs": "^1.26.4",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@types/prismjs": "^1.26.4"
+    "vite": "5.2.12",
+    "vite-plugin-windicss": "^1.9.3"
   }
 }

playgrounds/vite/src/App.vue

@@ -10,19 +10,27 @@ const sandbox = false
 <template>
   <div>
     <div class="flex items-center justify-center">
-      <h1 class="m-6 cursor-pointer select-none text-4xl font-bold">🤹&nbsp;@vueuse/motion</h1>
+      <h1 class="m-6 cursor-pointer select-none text-4xl font-bold">
+        🤹&nbsp;@vueuse/motion
+      </h1>
     </div>
 
     <template v-if="!sandbox">
-      <h1 class="flex items-center justify-center text-3xl font-bold">Delay</h1>
+      <h1 class="flex items-center justify-center text-3xl font-bold">
+        Delay
+      </h1>
 
       <Delay class="mt-6 mb-6" />
 
-      <h1 class="flex items-center justify-center text-3xl font-bold">Editor</h1>
+      <h1 class="flex items-center justify-center text-3xl font-bold">
+        Editor
+      </h1>
 
       <Editor class="mt-6 mb-6" />
 
-      <h1 class="flex items-center justify-center text-3xl font-bold">Transitions</h1>
+      <h1 class="flex items-center justify-center text-3xl font-bold">
+        Transitions
+      </h1>
 
       <Transitions class="mt-6 mb-6" />
     </template>

playgrounds/vite/src/components/CodeBlock.vue

@@ -23,12 +23,14 @@ function preRender(codeContent: string) {
 }
 
 async function render() {
-  if (!Prism.languages[props.language]) await import(/* @vite-ignore */ `prismjs/components/prism-${props.language}`)
+  if (!Prism.languages[props.language])
+    await import(/* @vite-ignore */ `prismjs/components/prism-${props.language}`)
 
   await nextTick()
-  if (!code.value) return
+  if (!code.value)
+    return
 
-  const codeContent = props.text || code?.value?.innerText || ''
+  const codeContent = props.text || code?.value?.textContent || ''
 
   code.value.textContent = preRender(codeContent)
   Prism.highlightElement(code.value)