fix: vue tsconfig (#1262)

* fix: extend vue tsconfig

* fix: type exports

* fix: lockfile

.eslintrc.cjs

@@ -16,7 +16,7 @@ module.exports = {
     indent: 'off',
     camelcase: 'off',
     'space-before-function-paren': 'off',
-    quotes: ['error', 'single', { avoidEscape: true }],
+    quotes: ['error', 'single', {avoidEscape: true}],
     'no-multi-spaces': 'error',
     'no-trailing-spaces': 'error',
     'comma-dangle': ['error', 'always-multiline'],
@@ -41,6 +41,10 @@ module.exports = {
     'vue/attributes-order': ['error', {
       alphabetical: true,
     }],
+    '@typescript-eslint/consistent-type-imports': ['error', {
+      prefer: 'type-imports',
+      fixStyle: 'separate-type-imports',
+    }],
   },
   overrides: [
     {

package.json

@@ -55,11 +55,12 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@types/node": "^16.18.41",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "@vitejs/plugin-vue": "^4.3.2",
     "@vue/eslint-config-standard": "^6.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/tsconfig": "^0.4.0",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "cypress": "^12.17.4",
@@ -82,7 +83,7 @@
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-order": "^6.0.3",
-    "typescript": "~4.9.5",
+    "typescript": "^5.1.6",
     "vite": "^4.4.9",
     "vue-router": "^4.2.4",
     "vue-tsc": "^1.8.8"

sandbox/shared/SharedLayout.vue

@@ -16,7 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
 import AppNav from '../shared/AppNav.vue'
 
 const props = defineProps({

sandbox/shared/router.ts

@@ -1,4 +1,5 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import PageView from './PageView.vue'
 
 const pageRoutes = [

src/components/AcceptInvitationForm.vue

@@ -96,15 +96,16 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, Ref, reactive, computed, onMounted } from 'vue'
+import type { Ref } from 'vue'
+import { inject, ref, reactive, computed, onMounted } from 'vue'
 import { createMachine } from 'xstate'
 import { useMachine } from '@xstate/vue'
 import { win } from '@/utils'
 import useConfigOptions from '@/composables/useConfigOptions'
 import useI18n from '@/composables/useI18n'
 import useAxios from '@/composables/useAxios'
 import { acceptInvitationEmits } from '@/components/emits'
-import { AxiosResponse } from 'axios'
+import type { AxiosResponse } from 'axios'
 import { ProgressIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 // Components

src/components/ChangePasswordForm.vue

@@ -92,7 +92,8 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, Ref, reactive, computed, watch } from 'vue'
+import type { Ref } from 'vue'
+import { inject, ref, reactive, computed, watch } from 'vue'
 import { createMachine } from 'xstate'
 import { useMachine } from '@xstate/vue'
 import useConfigOptions from '@/composables/useConfigOptions'

src/components/ForgotPasswordForm.vue

@@ -70,14 +70,15 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, Ref, reactive, computed } from 'vue'
+import type { Ref } from 'vue'
+import { inject, ref, reactive, computed } from 'vue'
 import { createMachine } from 'xstate'
 import { useMachine } from '@xstate/vue'
 import useConfigOptions from '@/composables/useConfigOptions'
 import useAxios from '@/composables/useAxios'
 import useI18n from '@/composables/useI18n'
 import { forgotPasswordEmits } from '@/components/emits'
-import { AxiosResponse } from 'axios'
+import type { AxiosResponse } from 'axios'
 import { ProgressIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 // Components

src/components/LoginForm.vue

@@ -140,10 +140,11 @@
 </template>
 
 <script setup lang="ts">
-import { inject, reactive, ref, Ref, computed, onMounted, watch } from 'vue'
+import type { Ref } from 'vue'
+import { inject, reactive, ref, computed, onMounted, watch } from 'vue'
 import { useMachine } from '@xstate/vue'
 import { createMachine } from 'xstate'
-import { AxiosResponse } from 'axios'
+import type { AxiosResponse } from 'axios'
 import { win } from '@/utils'
 import useConfigOptions from '@/composables/useConfigOptions'
 import useIdentityProvider from '@/composables/useIdentityProvider'

src/components/RegisterForm.vue

@@ -157,14 +157,15 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, reactive, Ref, computed, onMounted } from 'vue'
+import type { Ref } from 'vue'
+import { inject, ref, reactive, computed, onMounted } from 'vue'
 import { createMachine } from 'xstate'
 import { useMachine } from '@xstate/vue'
 import useConfigOptions from '@/composables/useConfigOptions'
 import useAxios from '@/composables/useAxios'
 import useI18n from '@/composables/useI18n'
 import { registerEmits } from '@/components/emits'
-import { AxiosResponse } from 'axios'
+import type { AxiosResponse } from 'axios'
 import { win } from '@/utils'
 import { VueRecaptcha } from 'vue-recaptcha'
 import { ProgressIcon } from '@kong/icons'

src/components/ResetPasswordForm.vue

@@ -60,15 +60,16 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, Ref, reactive, computed, onMounted } from 'vue'
+import type { Ref } from 'vue'
+import { inject, ref, reactive, computed, onMounted } from 'vue'
 import { createMachine } from 'xstate'
 import { useMachine } from '@xstate/vue'
 import { win } from '@/utils'
 import useConfigOptions from '@/composables/useConfigOptions'
 import useAxios from '@/composables/useAxios'
 import useI18n from '@/composables/useI18n'
 import { resetPasswordEmits } from '@/components/emits'
-import { AxiosResponse } from 'axios'
+import type { AxiosResponse } from 'axios'
 import { ProgressIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 // Components

src/composables/useIdentityProvider.ts

@@ -1,4 +1,5 @@
-import { onMounted, ref, Ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import useConfigOptions from '@/composables/useConfigOptions'
 import { win } from '@/utils'
 

src/composables/useInjectStyles.ts

@@ -1,4 +1,5 @@
-import { computed, ref, ComputedRef, onMounted, onUnmounted } from 'vue'
+import type { ComputedRef } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import useConfigOptions from '@/composables/useConfigOptions'
 interface InjectStylesComposable {
   injectedStyles: ComputedRef<string>

src/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue'
+import type { App } from 'vue'
 // Do not use '@' alias in utils paths here so that imports within a consuming project resolve properly.
 import { registerCustomElement } from './utils'
 import type {
@@ -49,7 +49,7 @@ export default function registerKongAuthNativeElements(options?: KongAuthElement
   registerCustomElement('kong-auth-change-password', elements.KongAuthChangePassword, userOptions)
 }
 
-export {
+export type {
   CustomEndpointElement,
   CustomEndpointErrorEvent,
   CustomEndpointRequest,

src/utils/index.ts

@@ -1,5 +1,5 @@
 // Do not use '@' alias in paths here so that imports within a consuming project resolve properly.
-import { AxiosError } from 'axios'
+import type { AxiosError } from 'axios'
 export { default as convertToTitleCase } from './convertToTitleCase'
 export { default as registerCustomElement } from './registerCustomElement'
 export { default as kebabize } from './kebabize'

tsconfig.json

@@ -1,15 +1,11 @@
 {
+  "extends": "@vue/tsconfig/tsconfig.json",
   "compilerOptions": {
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
     "moduleResolution": "node",
     "strict": true,
     "jsx": "preserve",
     "importHelpers": true,
     "sourceMap": false,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
     "baseUrl": ".",
     "lib": [
       "esnext",