Using types in composables and use new Nuxt ESLint (#65)

* Switch to new Nuxt ESLint * add types * workaround case issue in useWPNuxtLogger.ts
wpnuxt · Apr 24, 2024 · 15e0310 · 15e0310
1 parent d9768ba
commit 15e0310
Show file tree

Hide file tree

Showing 75 changed files with 10,642 additions and 9,041 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -15,28 +15,22 @@ jobs:
       - checkout
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}
-      - run:
-          name: Check node version
-          command: node -v
-      - run:
-          name: Check pnpm version
-          command: pnpm -v
       - run:
           name: Install packages
-          command: pnpm install --frozen-lockfile
+          command: pnpm install
       - save_cache:
           key: dependency-cache-{{ checksum "package.json" }}
           paths:
             - ./node_modules
       - run:
-          name: Playground Build
-          command: pnpm run dev:build
+          name: Lint
+          command: pnpm run lint
       - run:
           name: Module Build
           command: pnpm run build
       - run:
-          name: Lint
-          command: pnpm run lint
+          name: Playground Build
+          command: pnpm run dev:build
       - slack/notify:
           channel: circleci
           event: always

diff --git a/.eslintrc b/.eslintrc
diff --git a/.gitignore b/.gitignore
@@ -63,3 +63,4 @@ examples/yoastseo/test-src/queries/
 examples/yoastseo/test-src/schema.graphql
 tests/fixtures/basic/queries/
 tests/fixtures/basic/schema.graphql
+playground/.eslintcache
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  // Enable ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+}
diff --git a/docs/.eslintcache b/docs/.eslintcache
@@ -0,0 +1 @@
+[{"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/layouts/default.vue":"1","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/app.config.ts":"2","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/app.vue":"3","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/error.vue":"4","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/nuxt.config.ts":"5","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/nuxt.schema.ts":"6","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/tailwind.config.ts":"7","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/components/FooterComponent.vue":"8","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/components/HeaderComponent.vue":"9","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/components/LogoComponent.vue":"10","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/layouts/docs.vue":"11","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/pages/[...slug].vue":"12","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/pages/index.vue":"13","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/pages/playground.vue":"14","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/components/OgImage/OgImageDocs.vue":"15","/Users/wouter/git/wpnuxt/wpnuxt-module/docs/server/api/search.json.get.ts":"16"},{"size":53,"mtime":1712308934974,"results":"17","hashOfConfig":"18"},{"size":2642,"mtime":1713937151495,"results":"19","hashOfConfig":"20"},{"size":1167,"mtime":1713933330778,"results":"21","hashOfConfig":"22"},{"size":1023,"mtime":1713933330778,"results":"23","hashOfConfig":"22"},{"size":907,"mtime":1713936805400,"results":"24","hashOfConfig":"20"},{"size":7111,"mtime":1713933330778,"results":"25","hashOfConfig":"20"},{"size":1862,"mtime":1713933330778,"results":"26","hashOfConfig":"20"},{"size":494,"mtime":1712308934970,"results":"27","hashOfConfig":"22"},{"size":1369,"mtime":1713933330778,"results":"28","hashOfConfig":"22"},{"size":149,"mtime":1712308934971,"results":"29","hashOfConfig":"22"},{"size":495,"mtime":1712308934975,"results":"30","hashOfConfig":"18"},{"size":2510,"mtime":1713933330778,"results":"31","hashOfConfig":"18"},{"size":13057,"mtime":1713937410635,"results":"32","hashOfConfig":"18"},{"size":577,"mtime":1713933330778,"results":"33","hashOfConfig":"18"},{"size":536,"mtime":1713933330778,"results":"34","hashOfConfig":"22"},{"size":203,"mtime":1713933330778,"results":"35","hashOfConfig":"20"},{"filePath":"36","messages":"37","suppressedMessages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"kacpou",{"filePath":"39","messages":"40","suppressedMessages":"41","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1di4uzd",{"filePath":"42","messages":"43","suppressedMessages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"brs66o",{"filePath":"45","messages":"46","suppressedMessages":"47","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","suppressedMessages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","suppressedMessages":"53","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","suppressedMessages":"56","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"57","messages":"58","suppressedMessages":"59","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","suppressedMessages":"62","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"63","messages":"64","suppressedMessages":"65","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","suppressedMessages":"68","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"69","messages":"70","suppressedMessages":"71","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","suppressedMessages":"74","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"75","messages":"76","suppressedMessages":"77","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"78","messages":"79","suppressedMessages":"80","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"81","messages":"82","suppressedMessages":"83","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/layouts/default.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/app.config.ts",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/app.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/error.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/nuxt.config.ts",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/nuxt.schema.ts",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/tailwind.config.ts",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/components/FooterComponent.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/components/HeaderComponent.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/components/LogoComponent.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/layouts/docs.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/pages/[...slug].vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/pages/index.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/pages/playground.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/components/OgImage/OgImageDocs.vue",[],[],"/Users/wouter/git/wpnuxt/wpnuxt-module/docs/server/api/search.json.get.ts",[],[]]
diff --git a/docs/.eslintrc.cjs b/docs/.eslintrc.cjs
diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -5,18 +5,18 @@ export default defineAppConfig({
     footer: {
       bottom: {
         left: 'text-sm text-gray-500 dark:text-gray-400',
-        wrapper: 'border-t border-gray-200 dark:border-gray-800'
-      }
+        wrapper: 'border-t border-gray-200 dark:border-gray-800',
+      },
     },
     content: {
       prose: {
         code: {
           icon: {
             // terminal: 'i-ph-terminal'
-          }
-        }
-      }
-    }
+          },
+        },
+      },
+    },
   },
   seo: {
     siteName: 'WPNuxt ',
@@ -25,16 +25,16 @@ export default defineAppConfig({
     logo: {
       alt: '',
       light: '',
-      dark: ''
+      dark: '',
     },
     search: true,
     colorMode: true,
     links: [{
       icon: 'i-simple-icons-github',
       to: 'https://github.com/vernaillen/wpnuxt-module',
       target: '_blank',
-      'aria-label': 'WPNuxt on GitHub'
-    }]
+      ariaLabel: 'WPNuxt on GitHub',
+    }],
   },
   footer: {
     credits: 'Copyright © 2024',
@@ -43,14 +43,14 @@ export default defineAppConfig({
       icon: 'i-simple-icons-nuxtdotjs',
       to: 'https://nuxt.com',
       target: '_blank',
-      'aria-label': 'Nuxt Website'
+      ariaLabel: 'Nuxt Website',
     },
     {
       icon: 'i-simple-icons-github',
       to: 'https://github.com/vernaillen/wpnuxt-module',
       target: '_blank',
-      'aria-label': 'WPNuxt on GitHub'
-    }]
+      ariaLabel: 'WPNuxt on GitHub',
+    }],
   },
   toc: {
     title: 'Table of Contents',
@@ -61,21 +61,21 @@ export default defineAppConfig({
           icon: 'i-ph-shooting-star-duotone',
           label: 'Star on GitHub',
           to: 'https://github.com/vernaillen/wpnuxt-module',
-          target: '_blank'
+          target: '_blank',
         },
         {
           icon: 'i-ph-hand-heart-duotone',
           label: 'Become a Sponsor',
           to: 'https://github.com/sponsors/vernaillen',
-          target: '_blank'
+          target: '_blank',
         },
         {
           icon: 'i-custom-vernaillen-logo-dark',
           label: 'Vernaillen.dev',
           to: 'https://vernaillen.dev',
           target: '_blank',
-        }
-      ]
+        },
+      ],
     },
     bottom: {
       title: 'Nuxt Community',
@@ -84,33 +84,33 @@ export default defineAppConfig({
           icon: 'i-simple-icons-nuxtdotjs',
           label: 'Nuxt docs',
           to: 'https://nuxt.com',
-          target: '_blank'
+          target: '_blank',
         },
         {
           icon: 'i-ph-chat-centered-text-duotone',
           label: 'Nuxt Discord',
           to: 'https://chat.nuxt.dev',
-          target: '_blank'
+          target: '_blank',
         },
         {
           icon: 'i-ph-hand-heart-duotone',
           label: 'Sponsor Nuxt',
           to: 'https://github.com/sponsors/nuxt',
-          target: '_blank'
-        }
-      ]
-    }
+          target: '_blank',
+        },
+      ],
+    },
   },
   elements: {
     variables: {
       light: {
         background: '255 255 255',
-        foreground: 'var(--color-gray-700)'
+        foreground: 'var(--color-gray-700)',
       },
       dark: {
         background: 'var(--color-gray-950)',
-        foreground: 'var(--color-gray-400)'
-      }
-    }
-  }
+        foreground: 'var(--color-gray-400)',
+      },
+    },
+  },
 })
diff --git a/docs/app.vue b/docs/app.vue
@@ -6,27 +6,27 @@ const { seo } = useAppConfig()
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
-  server: false
+  server: false,
 })
 
 useHead({
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
   ],
   link: [
-    { rel: 'icon', href: '/favicon.ico' }
+    { rel: 'icon', href: '/favicon.ico' },
   ],
   htmlAttrs: {
-    lang: 'en'
-  }
+    lang: 'en',
+  },
 })
 
 useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
   ogImage: 'https://wpnuxt.com/social-card.png',
   twitterImage: 'https://wpnuxt.com/social-card.png',
-  twitterCard: 'summary_large_image'
+  twitterCard: 'summary_large_image',
 })
 
 provide('navigation', navigation)
@@ -36,18 +36,21 @@ provide('navigation', navigation)
   <div>
     <NuxtLoadingIndicator />
 
-    <Header />
+    <HeaderComponent />
 
     <UMain>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
     </UMain>
 
-    <Footer />
+    <FooterComponent />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
     </ClientOnly>
 
     <UNotifications />

diff --git a/docs/components/Footer.vue → docs/components/FooterComponent.vue b/docs/components/Footer.vue → docs/components/FooterComponent.vue
diff --git a/docs/components/Header.vue → docs/components/HeaderComponent.vue b/docs/components/Header.vue → docs/components/HeaderComponent.vue
@@ -8,22 +8,22 @@ const { header } = useAppConfig()
 const links = [{
   label: 'Documentation',
   icon: 'i-heroicons-book-open-solid',
-  to: '/getting-started/installation'
+  to: '/getting-started/installation',
 }, {
   label: 'Demo',
   icon: 'i-ph-monitor',
   to: 'https://demo.wpnuxt.com',
-  target: '_blank'
+  target: '_blank',
 }, {
   label: 'Open Demo in StackBlitz',
   icon: 'i-ph-play-duotone',
   to: 'https://stackblitz.com/github/vernaillen/wpnuxt-demo',
-  target: '_blank'
+  target: '_blank',
 }, {
   label: 'Releases',
   icon: 'i-heroicons-rocket-launch-solid',
   to: 'https://github.com/vernaillen/wpnuxt-module/releases',
-  target: '_blank'
+  target: '_blank',
 }]
 </script>
 
@@ -34,7 +34,10 @@ const links = [{
     </template>
 
     <template #right>
-      <UContentSearchButton v-if="header?.search" :label="null" />
+      <UContentSearchButton
+        v-if="header?.search"
+        :label="null"
+      />
 
       <UColorModeButton v-if="header?.colorMode" />
 

diff --git a/docs/components/OgImage/OgImageDocs.vue b/docs/components/OgImage/OgImageDocs.vue
@@ -1,17 +1,17 @@
 <script lang="ts" setup>
 defineOptions({
-  inheritAttrs: false
+  inheritAttrs: false,
 })
 
 defineProps({
   title: {
     type: String,
-    required: true
+    required: true,
   },
   description: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 </script>
 

diff --git a/docs/error.vue b/docs/error.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import type { NuxtError } from '#app'
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { NuxtError } from '#app'
 
 useSeoMeta({
   title: 'Page not found',
-  description: 'We are sorry but this page could not be found.'
+  description: 'We are sorry but this page could not be found.',
 })
 
 defineProps({
   error: {
     type: Object as PropType<NuxtError>,
-    required: true
-  }
+    required: true,
+  },
 })
 
 useHead({
   htmlAttrs: {
-    lang: 'en'
-  }
+    lang: 'en',
+  },
 })
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
@@ -31,7 +31,7 @@ provide('navigation', navigation)
 
 <template>
   <div>
-    <Header />
+    <HeaderComponent />
 
     <UMain>
       <UContainer>
@@ -41,10 +41,13 @@ provide('navigation', navigation)
       </UContainer>
     </UMain>
 
-    <Footer />
+    <FooterComponent />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
     </ClientOnly>
 
     <UNotifications />

diff --git a/docs/eslint.config.mjs b/docs/eslint.config.mjs
@@ -0,0 +1,15 @@
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  {
+    rules: {
+      // Global
+      'semi': ['error', 'never'],
+      'quotes': ['error', 'single'],
+      // Vue
+      'vue/multi-word-component-names': 0,
+      'vue/max-attributes-per-line': 'off',
+      'vue/no-v-html': 0,
+    },
+  },
+)