feat(lite): upgrade deps + root eslint config (#7292)

.eslintrc.js

@@ -15,9 +15,10 @@ module.exports = {
 
   overrides: [
     {
-      files: ['cli.{,c,m}js', '*-cli.{,c,m}js', '**/*cli*/**/*.{,c,m}js'],
+      files: ['cli.{,c,m}js', '*-cli.{,c,m}js', '**/*cli*/**/*.{,c,m}js', '**/scripts/**.{,c,m}js'],
       rules: {
         'n/no-process-exit': 'off',
+        'n/shebang': 'off',
         'no-console': 'off',
       },
     },
@@ -46,6 +47,38 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['@xen-orchestra/lite/**/*.{vue,ts}'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+      plugins: ['import'],
+      extends: [
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+        'plugin:vue/vue3-recommended',
+        '@vue/eslint-config-typescript/recommended',
+        '@vue/eslint-config-prettier',
+      ],
+      settings: {
+        'import/resolver': {
+          typescript: true,
+          'eslint-import-resolver-custom-alias': {
+            alias: {
+              '@': './src',
+            },
+            extensions: ['.ts'],
+            packages: ['@xen-orchestra/lite'],
+          },
+        },
+      },
+      rules: {
+        'no-void': 'off',
+        'n/no-missing-import': 'off', // using 'import' plugin instead to support TS aliases
+        '@typescript-eslint/no-explicit-any': 'off',
+        'vue/require-default-prop': 'off', // https://github.com/vuejs/eslint-plugin-vue/issues/2051
+      },
+    },
   ],
 
   parserOptions: {

.gitignore

@@ -30,6 +30,7 @@ pnpm-debug.log.*
 yarn-error.log
 yarn-error.log.*
 .env
+*.tsbuildinfo
 
 # code coverage
 .nyc_output/

@xen-orchestra/lite/README.md

@@ -48,18 +48,16 @@ Note: When reading Vue official doc, don't forget to set "API Preference" toggle
 
 ```vue
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
-  greetings: string;
-}>();
+  greetings: string
+}>()
 
-const firstName = ref("");
-const lastName = ref("");
+const firstName = ref('')
+const lastName = ref('')
 
-const fullName = computed(
-  () => `${props.greetings} ${firstName.value} ${lastName.value}`
-);
+const fullName = computed(() => `${props.greetings} ${firstName.value} ${lastName.value}`)
 </script>
 ```
 
@@ -73,9 +71,9 @@ Vue variables can be interpolated with `v-bind`.
 
 ```vue
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref } from 'vue'
 
-const fontSize = ref("2rem");
+const fontSize = ref('2rem')
 </script>
 
 <style scoped>
@@ -105,8 +103,8 @@ Use the `busy` prop to display a loader icon.
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import { faDisplay } from "@fortawesome/free-solid-svg-icons";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import { faDisplay } from '@fortawesome/free-solid-svg-icons'
 </script>
 ```
 
@@ -140,21 +138,21 @@ For a `foobar` store, create a `store/foobar.store.ts` then use `defineStore('fo
 #### Example
 
 ```typescript
-import { computed, ref } from "vue";
+import { computed, ref } from 'vue'
 
-export const useFoobarStore = defineStore("foobar", () => {
-  const aStateVar = ref(0);
-  const otherStateVar = ref(0);
-  const aGetter = computed(() => aStateVar.value * 2);
-  const anAction = () => (otherStateVar.value += 10);
+export const useFoobarStore = defineStore('foobar', () => {
+  const aStateVar = ref(0)
+  const otherStateVar = ref(0)
+  const aGetter = computed(() => aStateVar.value * 2)
+  const anAction = () => (otherStateVar.value += 10)
 
   return {
     aStateVar,
     otherStateVar,
     aGetter,
     anAction,
-  };
-});
+  }
+})
 ```
 
 ### I18n

@xen-orchestra/lite/docs/component-stories.md

@@ -85,9 +85,9 @@ In your `.story.vue` file, import and use the `ComponentStory` component.
 </template>
 
 <script lang="ts" setup>
-import MyComponent from "@/components/MyComponent.vue";
-import ComponentStory from "@/components/component-story/ComponentStory.vue";
-import { prop, event, model, slot, setting } from "@/libs/story/story-param";
+import MyComponent from '@/components/MyComponent.vue'
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, event, model, slot, setting } from '@/libs/story/story-param'
 </script>
 ```
 
@@ -119,27 +119,27 @@ Let's take this Vue component:
 <script lang="ts" setup>
 withDefaults(
   defineProps<{
-    imString: string;
-    imNumber: number;
-    imOptional?: string;
-    imOptionalWithDefault?: string;
-    modelValue?: string;
-    customModel?: number;
+    imString: string
+    imNumber: number
+    imOptional?: string
+    imOptionalWithDefault?: string
+    modelValue?: string
+    customModel?: number
   }>(),
-  { imOptionalWithDefault: "Hi World" }
-);
+  { imOptionalWithDefault: 'Hi World' }
+)
 
 const emit = defineEmits<{
-  (event: "click"): void;
-  (event: "clickWithArg", id: string): void;
-  (event: "update:modelValue", value: string): void;
-  (event: "update:customModel", value: number): void;
-}>();
+  (event: 'click'): void
+  (event: 'clickWithArg', id: string): void
+  (event: 'update:modelValue', value: string): void
+  (event: 'update:customModel', value: number): void
+}>()
 
-const moonDistance = 384400;
+const moonDistance = 384400
 
-const handleClick = () => emit("click");
-const handleClickWithArg = (id: string) => emit("clickWithArg", id);
+const handleClick = () => emit('click')
+const handleClickWithArg = (id: string) => emit('clickWithArg', id)
 </script>
 ```
 
@@ -150,53 +150,33 @@ Here is how to document it with a Component Story:
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('imString')
-        .str()
-        .required()
-        .preset('Example')
-        .widget()
-        .help('This is a required string prop'),
-      prop('imNumber')
-        .num()
-        .required()
-        .preset(42)
-        .widget()
-        .help('This is a required number prop'),
+      prop('imString').str().required().preset('Example').widget().help('This is a required string prop'),
+      prop('imNumber').num().required().preset(42).widget().help('This is a required number prop'),
       prop('imOptional').str().widget().help('This is an optional string prop'),
-      prop('imOptionalWithDefault')
-        .str()
-        .default('Hi World')
-        .widget()
-        .default('My default value'),
-      model().prop((p) => p.str()),
-      model('customModel').prop((p) => p.num()),
+      prop('imOptionalWithDefault').str().default('Hi World').widget().default('My default value'),
+      model().prop(p => p.str()),
+      model('customModel').prop(p => p.num()),
       event('click').help('Emitted when the user clicks the first button'),
-      event('clickWithArg')
-        .args({ id: 'string' })
-        .help('Emitted when the user clicks the second button'),
+      event('clickWithArg').args({ id: 'string' }).help('Emitted when the user clicks the second button'),
       slot().help('This is the default slot'),
       slot('namedSlot').help('This is a named slot'),
-      slot('namedScopedSlot')
-        .prop('moon-distance', 'number')
-        .help('This is a named slot'),
+      slot('namedScopedSlot').prop('moon-distance', 'number').help('This is a named slot'),
       setting('contentExample').widget(text()).preset('Some content'),
     ]"
   >
     <MyComponent v-bind="properties">
       {{ settings.contentExample }}
       <template #named-slot>Named slot content</template>
-      <template #named-scoped-slot="{ moonDistance }">
-        Moon distance is {{ moonDistance }} meters.
-      </template>
+      <template #named-scoped-slot="{ moonDistance }"> Moon distance is {{ moonDistance }} meters. </template>
     </MyComponent>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
-import ComponentStory from "@/components/component-story/ComponentStory.vue";
-import MyComponent from "@/components/MyComponent.vue";
-import { event, model, prop, setting, slot } from "@/libs/story/story-param";
-import { text } from "@/libs/story/story-widget";
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import MyComponent from '@/components/MyComponent.vue'
+import { event, model, prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
 </script>
 ```
 

@xen-orchestra/lite/docs/modals.md

@@ -20,53 +20,53 @@ This will return an object with the following methods:
 ### Static modal
 
 ```ts
-useModal(MyModal);
+useModal(MyModal)
 ```
 
 ### Modal with props
 
 ```ts
-useModal(MyModal, { message: "Hello world!" });
+useModal(MyModal, { message: 'Hello world!' })
 ```
 
 ### Handle modal approval
 
 ```ts
-const { onApprove } = useModal(MyModal, { message: "Hello world!" });
+const { onApprove } = useModal(MyModal, { message: 'Hello world!' })
 
-onApprove(() => console.log("Modal approved"));
+onApprove(() => console.log('Modal approved'))
 ```
 
 ### Handle modal approval with payload
 
 ```ts
-const { onApprove } = useModal(MyModal, { message: "Hello world!" });
+const { onApprove } = useModal(MyModal, { message: 'Hello world!' })
 
-onApprove((payload) => console.log("Modal approved with payload", payload));
+onApprove(payload => console.log('Modal approved with payload', payload))
 ```
 
 ### Handle modal decline
 
 ```ts
-const { onDecline } = useModal(MyModal, { message: "Hello world!" });
+const { onDecline } = useModal(MyModal, { message: 'Hello world!' })
 
-onDecline(() => console.log("Modal declined"));
+onDecline(() => console.log('Modal declined'))
 ```
 
 ### Handle modal close
 
 ```ts
-const { onClose } = useModal(MyModal, { message: "Hello world!" });
+const { onClose } = useModal(MyModal, { message: 'Hello world!' })
 
-onClose(() => console.log("Modal closed"));
+onClose(() => console.log('Modal closed'))
 ```
 
 ## Modal controller
 
 Inside the modal component, you can inject the modal controller with `inject(IK_MODAL)!`.
 
 ```ts
-const modal = inject(IK_MODAL)!;
+const modal = inject(IK_MODAL)!
 ```
 
 You can then use the following properties and methods on the `modal` object: