Merge pull request #25 from IT4Change/eslint-typescript-strict

fix(other): eslint typescript strict

.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+build/
+coverage/
+.storybook/
+.vuepress/

.eslintrc.json

@@ -130,6 +130,28 @@
         "promise/no-multiple-resolved": "error"
     },
     "overrides": [
+        {
+            "files": ["*.ts", "*.tsx"],
+            "parser": "@typescript-eslint/parser",
+            "parserOptions": {
+                "tsconfigRootDir": ".",
+                "project": ["./tsconfig.json", "**/tsconfig.json"],
+                "ecmaVersion": "latest",
+                "parser": "@typescript-eslint/parser",
+                "sourceType": "module"
+            },
+            "plugins": ["@typescript-eslint"],
+            "extends": [
+                "plugin:@typescript-eslint/recommended",
+                "plugin:@typescript-eslint/recommended-requiring-type-checking",
+                "plugin:@typescript-eslint/strict"
+            ],
+            "rules": {
+                // allow explicitly defined dangling promises
+                "@typescript-eslint/no-floating-promises": ["error", { "ignoreVoid": true }],
+                "no-void": ["error", { "allowAsStatement": true }]
+            }
+        },
         {
             "files": ["!*.json"],
             "plugins": ["prettier"],

package.json

@@ -45,7 +45,7 @@
     "storybook:build": "storybook build -o build/storybook",
     "storybook:test": "test-storybook",
     "test:lint": "npm run test:lint:eslint && npm run test:lint:remark && npm run test:lint:style && npm run test:lint:locales",
-    "test:lint:eslint": "eslint --ext .vue,.ts,.tsx,.js,.jsx,.json,.yml,.yaml --max-warnings 0 --ignore-path .gitignore .",
+    "test:lint:eslint": "eslint --ext .vue,.ts,.tsx,.js,.jsx,.json,.yml,.yaml --max-warnings 0 .",
     "test:lint:locales": "scripts/locales/locales.sh src/locales",
     "test:lint:remark": "remark . --quiet --frail",
     "test:lint:style": "stylelint --max-warnings 0 --ignore-path .gitignore \"**/*.{css,scss,vue,vuex}\"",

renderer/_default.page.client.ts

@@ -2,13 +2,13 @@ import { createApp } from './app'
 
 import type { PageContext, VikePageContext } from '#types/PageContext'
 
-let app: ReturnType<typeof createApp>
-async function render(pageContext: VikePageContext & PageContext) {
-  if (!app) {
-    app = createApp(pageContext).app
-    app.mount('#app')
+let instance: ReturnType<typeof createApp>
+/* async */ function render(pageContext: VikePageContext & PageContext) {
+  if (!instance) {
+    instance = createApp(pageContext)
+    instance.app.mount('#app')
   } else {
-    app.changePage(pageContext)
+    instance.app.changePage(pageContext)
   }
 }
 

renderer/app.ts

@@ -49,7 +49,9 @@ function createApp(pageContext: VikePageContext & PageContext, isClient = true)
   objectAssign(app, {
     changePage: (pageContext: VikePageContext & PageContext) => {
       Object.assign(pageContextReactive, pageContext)
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       rootComponent.Page = markRaw(pageContext.Page)
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       rootComponent.pageProps = markRaw(pageContext.pageProps || {})
     },
   })

renderer/plugins/vuetify.ts

@@ -2,7 +2,7 @@
 import '@mdi/font/css/materialdesignicons.css'
 // eslint-disable-next-line import/no-unassigned-import
 import 'vuetify/lib/styles/main.sass'
-import { useI18n } from 'vue-i18n'
+import { I18n, useI18n } from 'vue-i18n'
 import { createVuetify } from 'vuetify'
 // eslint-disable-next-line import/no-namespace
 import * as components from 'vuetify/lib/components/index.mjs'
@@ -11,7 +11,7 @@ import * as directives from 'vuetify/lib/directives/index.mjs'
 import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default (i18n: any) =>
+export default (i18n: I18n<any, NonNullable<unknown>, NonNullable<unknown>, string, false>) =>
   createVuetify({
     locale: {
       adapter: createVueI18nAdapter({ i18n, useI18n }),

server/index.ts

@@ -19,7 +19,7 @@ import { root } from './root.js'
 
 const isProduction = process.env.NODE_ENV === 'production'
 
-startServer()
+void startServer()
 
 async function startServer() {
   const app = express()
@@ -52,6 +52,7 @@ async function startServer() {
 
   // Vike middleware. It should always be our last middleware (because it's a
   // catch-all middleware superseding any middleware placed after it).
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
   app.get('*', async (req, res, next) => {
     const pageContextInit = {
       urlOriginal: req.originalUrl,

src/components/ClientOnly.test.ts

@@ -6,7 +6,7 @@ import ClientOnly from './ClientOnly.vue'
 describe('ClientOnly', () => {
   const wrapper = mount(ClientOnly)
 
-  it('renders content if mounted', async () => {
+  it('renders content if mounted', () => {
     expect(wrapper.isVisible()).toBeTruthy()
   })
 })

src/env.ts

@@ -1,7 +1,8 @@
 const META = {
-  DEFAULT_TITLE: import.meta.env.PUBLIC_ENV__META__DEFAULT_TITLE ?? 'IT4C',
+  DEFAULT_TITLE: (import.meta.env.PUBLIC_ENV__META__DEFAULT_TITLE as string) ?? 'IT4C',
   DEFAULT_DESCRIPTION:
-    import.meta.env.PUBLIC_ENV__META__DEFAULT_DESCRIPTION ?? 'IT4C Frontend Boilerplate',
+    (import.meta.env.PUBLIC_ENV__META__DEFAULT_DESCRIPTION as string) ??
+    'IT4C Frontend Boilerplate',
 }
 
 export { META }

src/pages/_error.page.test.ts

@@ -1,10 +1,11 @@
-import { mount } from '@vue/test-utils'
+import { VueWrapper, mount } from '@vue/test-utils'
 import { describe, it, expect, beforeEach } from 'vitest'
+import { ComponentPublicInstance } from 'vue'
 
 import ErrorPage from './_error.page.vue'
 
 describe('ErrorPage', () => {
-  let wrapper: typeof ErrorPage
+  let wrapper: VueWrapper<unknown, ComponentPublicInstance<unknown, Omit<unknown, never>>>
   const Wrapper = () => {
     return mount(ErrorPage)
   }

src/pages/app/index.page.server.ts

@@ -2,7 +2,7 @@ import type { PageContextBuiltInServer } from 'vike/types'
 
 export { onBeforeRender }
 
-async function onBeforeRender(pageContext: PageContextBuiltInServer) {
+/* async */ function onBeforeRender(pageContext: PageContextBuiltInServer) {
   return {
     pageContext: {
       pageProps: pageContext.routeParams,

src/stores/counter.test.ts

@@ -1,5 +1,5 @@
 import { setActivePinia, createPinia } from 'pinia'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeEach } from 'vitest'
 
 import { useCounterStore } from './counter'
 

src/stories/ExampleHeader.stories.ts

@@ -13,6 +13,7 @@ const meta = {
   render: (args: any) => ({
     components: { ExampleHeader },
     setup() {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       return { args }
     },
     template: '<example-header :user="args.user" />',

src/stories/ExamplePage.stories.ts

@@ -26,8 +26,8 @@ type Story = StoryObj<typeof meta>
 export const LoggedIn: Story = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   play: async ({ canvasElement }: any) => {
-    const canvas = within(canvasElement)
-    const loginButton = await canvas.getByRole('button', {
+    const canvas = within(canvasElement as HTMLElement)
+    const loginButton = canvas.getByRole('button', {
       name: /Log in/i,
     })
     await userEvent.click(loginButton)

types/vue.d.ts

@@ -1,5 +1,5 @@
 declare module '*.vue' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const Component: any
-  export default Component
+  import Vue from 'vue'
+
+  export default Vue
 }