Merge pull request #27 from IT4Change/typechecks

feat(frontend): typechecks & type cleanups

package.json

@@ -129,7 +129,9 @@
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^11.1.0",
+    "vite-plugin-checker": "^0.6.2",
     "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.25",
     "vuepress": "^2.0.0-rc.0"
   },
   "imports": {

renderer/app.ts

@@ -1,5 +1,5 @@
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import { createSSRApp, defineComponent, h, markRaw, reactive } from 'vue'
+import { createSSRApp, defineComponent, h, markRaw, reactive, Component } from 'vue'
 
 import PageShell from '#components/PageShell.vue'
 import { setPageContext } from '#context/usePageContext'
@@ -7,13 +7,13 @@ import i18n from '#plugins/i18n'
 import pinia from '#plugins/pinia'
 import CreateVuetify from '#plugins/vuetify'
 
-import type { Component } from '#types/Component'
 import type { PageContext, VikePageContext } from '#types/PageContext'
 
 const vuetify = CreateVuetify(i18n)
 
 function createApp(pageContext: VikePageContext & PageContext, isClient = true) {
-  let rootComponent: Component
+  // eslint-disable-next-line no-use-before-define
+  let rootComponent: InstanceType<typeof PageWithWrapper>
   const PageWithWrapper = defineComponent({
     data: () => ({
       Page: markRaw(pageContext.Page),
@@ -26,7 +26,7 @@ function createApp(pageContext: VikePageContext & PageContext, isClient = true)
     },
     render() {
       return h(
-        PageShell,
+        PageShell as Component,
         {},
         {
           default: () => {
@@ -49,9 +49,7 @@ 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 || {})
     },
   })

src/stories/ExampleButton.stories.ts

@@ -5,6 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta = {
   title: 'Example/Button',
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   component: ExampleButton,
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],

src/stories/ExampleHeader.stories.ts

@@ -8,9 +8,11 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Example/Header',
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   component: ExampleHeader,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => ({
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     components: { ExampleHeader },
     setup() {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

src/stories/ExamplePage.stories.ts

@@ -6,8 +6,10 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 const meta = {
   title: 'Example/Page',
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   component: ExamplePage,
   render: () => ({
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     components: { ExamplePage },
     template: '<example-page />',
   }),

types/Component.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Component = any

types/vue.d.ts

@@ -1,5 +1 @@
-declare module '*.vue' {
-  import Vue from 'vue'
-
-  export default Vue
-}
+declare module '*.vue'

vite.config.ts

@@ -4,6 +4,7 @@ import vueI18n from '@intlify/unplugin-vue-i18n/vite'
 import vue from '@vitejs/plugin-vue'
 import vike from 'vike/plugin'
 import { UserConfig } from 'vite'
+import { checker } from 'vite-plugin-checker'
 
 const isStorybook = () =>
   ['storybook', 'storybook:build'].includes(process.env.npm_lifecycle_event as string)
@@ -16,6 +17,10 @@ const config: UserConfig = {
       ssr: true,
       include: path.resolve(__dirname, './src/locales/**'),
     }),
+    checker({
+      typescript: true,
+      vueTsc: true,
+    }),
   ],
   build: {
     outDir: './build',