refactor: add ts libs and config

app/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
   extends: [
     'plugin:vue/vue3-strongly-recommended',
     'eslint:recommended',
+    '@vue/eslint-config-typescript',
     'plugin:prettier/recommended',
   ],
   rules: {
@@ -15,13 +16,13 @@ module.exports = {
     //   { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
     // ],
     // temp vue3 compat3
-    'vue/no-v-for-template-key-on-child': 'error',
+    // 'vue/no-v-for-template-key-on-child': 'error',
-    'vue/no-v-for-template-key': 'off',
+    // 'vue/no-v-for-template-key': 'off',
-    'vue/attribute-hyphenation': 'off',
+    // 'vue/attribute-hyphenation': 'off',
-    'vue/v-on-event-hyphenation': 'off',
+    // 'vue/v-on-event-hyphenation': 'off',
     // temp flemme
-    'vue/require-explicit-emits': 'off',
+    // 'vue/require-explicit-emits': 'off',
-    'vue/require-default-prop': 'off',
+    // 'vue/require-default-prop': 'off',
-    'no-unused-vars': 'off',
+    // 'no-unused-vars': 'off',
   },
 }

app/components.d.ts

@@ -0,0 +1,115 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AbstractForm: typeof import('./src/components/globals/AbstractForm.vue')['default']
+    AdressInputSelect: typeof import('./src/components/AdressInputSelect.vue')['default']
+    BAlert: typeof import('bootstrap-vue-next')['BAlert']
+    BBadge: typeof import('bootstrap-vue-next')['BBadge']
+    BBreadcrumb: typeof import('bootstrap-vue-next')['BBreadcrumb']
+    BBreadcrumbItem: typeof import('bootstrap-vue-next')['BBreadcrumbItem']
+    BButton: typeof import('bootstrap-vue-next')['BButton']
+    BButtonGroup: typeof import('bootstrap-vue-next')['BButtonGroup']
+    BButtonToolbar: typeof import('bootstrap-vue-next')['BButtonToolbar']
+    BCard: typeof import('bootstrap-vue-next')['BCard']
+    BCardBody: typeof import('bootstrap-vue-next')['BCardBody']
+    BCardFooter: typeof import('bootstrap-vue-next')['BCardFooter']
+    BCardGroup: typeof import('bootstrap-vue-next')['BCardGroup']
+    BCardHeader: typeof import('bootstrap-vue-next')['BCardHeader']
+    BCardText: typeof import('bootstrap-vue-next')['BCardText']
+    BCardTitle: typeof import('bootstrap-vue-next')['BCardTitle']
+    BCol: typeof import('bootstrap-vue-next')['BCol']
+    BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
+    BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
+    BDropdownDivider: typeof import('bootstrap-vue-next')['BDropdownDivider']
+    BDropdownForm: typeof import('bootstrap-vue-next')['BDropdownForm']
+    BDropdownGroup: typeof import('bootstrap-vue-next')['BDropdownGroup']
+    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
+    BDropdownItemButton: typeof import('bootstrap-vue-next')['BDropdownItemButton']
+    BDropdownText: typeof import('bootstrap-vue-next')['BDropdownText']
+    BForm: typeof import('bootstrap-vue-next')['BForm']
+    BFormCheckbox: typeof import('bootstrap-vue-next')['BFormCheckbox']
+    BFormFile: typeof import('bootstrap-vue-next')['BFormFile']
+    BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
+    BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
+    BFormRadio: typeof import('bootstrap-vue-next')['BFormRadio']
+    BFormRadioGroup: typeof import('bootstrap-vue-next')['BFormRadioGroup']
+    BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
+    BFormTag: typeof import('bootstrap-vue-next')['BFormTag']
+    BFormTags: typeof import('bootstrap-vue-next')['BFormTags']
+    BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
+    BImg: typeof import('bootstrap-vue-next')['BImg']
+    BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
+    BInputGroupText: typeof import('bootstrap-vue-next')['BInputGroupText']
+    BLink: typeof import('bootstrap-vue-next')['BLink']
+    BListGroup: typeof import('bootstrap-vue-next')['BListGroup']
+    BListGroupItem: typeof import('bootstrap-vue-next')['BListGroupItem']
+    BModal: typeof import('bootstrap-vue-next')['BModal']
+    BModalOrchestrator: typeof import('bootstrap-vue-next')['BModalOrchestrator']
+    BNav: typeof import('bootstrap-vue-next')['BNav']
+    BNavbar: typeof import('bootstrap-vue-next')['BNavbar']
+    BNavbarBrand: typeof import('bootstrap-vue-next')['BNavbarBrand']
+    BNavbarNav: typeof import('bootstrap-vue-next')['BNavbarNav']
+    BNavItem: typeof import('bootstrap-vue-next')['BNavItem']
+    BNavText: typeof import('bootstrap-vue-next')['BNavText']
+    BOverlay: typeof import('bootstrap-vue-next')['BOverlay']
+    BPopover: typeof import('bootstrap-vue-next')['BPopover']
+    BProgress: typeof import('bootstrap-vue-next')['BProgress']
+    BProgressBar: typeof import('bootstrap-vue-next')['BProgressBar']
+    BRow: typeof import('bootstrap-vue-next')['BRow']
+    BSkeleton: typeof import('./src/components/globals/skeletons/BSkeleton.vue')['default']
+    BSkeletonWrapper: typeof import('./src/components/globals/skeletons/BSkeletonWrapper.vue')['default']
+    ButtonItem: typeof import('./src/components/globals/formItems/ButtonItem.vue')['default']
+    CardButtonsSkeleton: typeof import('./src/components/globals/skeletons/CardButtonsSkeleton.vue')['default']
+    CardCollapse: typeof import('./src/components/CardCollapse.vue')['default']
+    CardDeckFeed: typeof import('./src/components/CardDeckFeed.vue')['default']
+    CardForm: typeof import('./src/components/globals/CardForm.vue')['default']
+    CardFormSkeleton: typeof import('./src/components/globals/skeletons/CardFormSkeleton.vue')['default']
+    CardInfoSkeleton: typeof import('./src/components/globals/skeletons/CardInfoSkeleton.vue')['default']
+    CardListSkeleton: typeof import('./src/components/globals/skeletons/CardListSkeleton.vue')['default']
+    CheckboxItem: typeof import('./src/components/globals/formItems/CheckboxItem.vue')['default']
+    ConfigPanel: typeof import('./src/components/ConfigPanel.vue')['default']
+    ConfigPanels: typeof import('./src/components/ConfigPanels.vue')['default']
+    DescriptionRow: typeof import('./src/components/globals/DescriptionRow.vue')['default']
+    DisplayTextItem: typeof import('./src/components/globals/formItems/DisplayTextItem.vue')['default']
+    ExplainWhat: typeof import('./src/components/globals/ExplainWhat.vue')['default']
+    FileItem: typeof import('./src/components/globals/formItems/FileItem.vue')['default']
+    FormField: typeof import('./src/components/globals/FormField.vue')['default']
+    InputItem: typeof import('./src/components/globals/formItems/InputItem.vue')['default']
+    LazyRenderer: typeof import('./src/components/LazyRenderer.vue')['default']
+    ListGroupSkeleton: typeof import('./src/components/globals/skeletons/ListGroupSkeleton.vue')['default']
+    MarkdownItem: typeof import('./src/components/globals/formItems/MarkdownItem.vue')['default']
+    MessageListGroup: typeof import('./src/components/MessageListGroup.vue')['default']
+    QueryHeader: typeof import('./src/components/QueryHeader.vue')['default']
+    ReadOnlyAlertItem: typeof import('./src/components/globals/formItems/ReadOnlyAlertItem.vue')['default']
+    ReadOnlyField: typeof import('./src/components/globals/ReadOnlyField.vue')['default']
+    RecursiveListGroup: typeof import('./src/components/RecursiveListGroup.vue')['default']
+    RoutableTabs: typeof import('./src/components/RoutableTabs.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SelectItem: typeof import('./src/components/globals/formItems/SelectItem.vue')['default']
+    TagsItem: typeof import('./src/components/globals/formItems/TagsItem.vue')['default']
+    TagsSelectizeItem: typeof import('./src/components/globals/formItems/TagsSelectizeItem.vue')['default']
+    TextAreaItem: typeof import('./src/components/globals/formItems/TextAreaItem.vue')['default']
+    TopBar: typeof import('./src/components/globals/TopBar.vue')['default']
+    ViewBase: typeof import('./src/components/globals/ViewBase.vue')['default']
+    ViewSearch: typeof import('./src/components/globals/ViewSearch.vue')['default']
+    YAlert: typeof import('./src/components/globals/YAlert.vue')['default']
+    YBreadcrumb: typeof import('./src/components/globals/YBreadcrumb.vue')['default']
+    YCard: typeof import('./src/components/globals/YCard.vue')['default']
+    YIcon: typeof import('./src/components/globals/YIcon.vue')['default']
+    YListGroupItem: typeof import('./src/components/globals/YListGroupItem.vue')['default']
+    YSpinner: typeof import('./src/components/globals/YSpinner.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vBModal: typeof import('bootstrap-vue-next')['vBModal']
+    vBPopover: typeof import('bootstrap-vue-next')['vBPopover']
+    vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
+    vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
+  }
+}

app/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

app/index.html

@@ -21,6 +21,6 @@
       </strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

app/package.json

@@ -30,14 +30,18 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
+    "typescript": "^5.4.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.4"
+    "vite": "^5.1.4",
+    "vue-tsc": "^2.0.19"
   },
   "browserslist": [
     "> 1%",

app/src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, type Component } from 'vue'
 import App from './App.vue'
 import { createBootstrap } from 'bootstrap-vue-next'
 import { VueShowdownPlugin } from 'vue-showdown'
@@ -12,9 +12,9 @@ import { initDefaultLocales } from './i18n/helpers'
 
 import '@/scss/main.scss'
 
-const app = createApp({
+type Module = { default: Component }
-  ...App,
+
-})
+const app = createApp(App)
 
 app.use(store)
 app.use(router)
@@ -33,11 +33,17 @@ app.use(VueShowdownPlugin, {
 const globalComponentsModules = import.meta.glob(
   ['@/components/globals/*.vue', '@/components/globals/*/*.vue'],
   { eager: true },
+) as Record<string, Module>
+Object.values(globalComponentsModules).forEach(
+  ({ default: component }: Module) => {
+    // FIXME component name is not automatic (there is the `__name` but it's private and may change)
+    // Solution seems to use:
+    // defineOptions({
+    //   name: 'FormField',
+    // })
+    app.component(component.__name || component.name, component)
+  },
 )
-Object.values(globalComponentsModules).forEach((module) => {
-  const component = module.default
-  app.component(component.name, component)
-})
 
 registerGlobalErrorHandlers()
 

app/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["vite/client"]
+  }
+}

app/tsconfig.node.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "skipLibCheck": true,
+      "module": "ESNext",
+      "moduleResolution": "bundler",
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "types": [
+        "node"
+      ]
+    },
+    "include": ["vite.config.ts"]
+  }

app/vuex.d.ts

@@ -0,0 +1,6 @@
+declare module 'vuex' {
+  export * from 'vuex/types/index.d.ts'
+  export * from 'vuex/types/helpers.d.ts'
+  export * from 'vuex/types/logger.d.ts'
+  export * from 'vuex/types/vue.d.ts'
+}