ditrit · Mbuchart · Aug 30, 2023 · Aug 30, 2023 · Aug 30, 2023
diff --git a/changelog.md b/changelog.md
@@ -47,6 +47,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   * Add panel to display all errors.
   * Add a button to rearrange all components automatically.
 * Splash screen.
+* Technical content:
+  *  quasar/app-vite plugin to use vite.
 
 ### Changed
 

diff --git a/src/index.template.html → index.html b/src/index.template.html → index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <title><%= productName %></title>
 
@@ -18,7 +18,6 @@
     <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#474262">
   </head>
   <body>
-    <!-- DO NOT touch the following DIV -->
-    <div id="q-app"></div>
+    <!-- quasar:entry-point -->
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "@babel/preset-env": "=7.23.2",
     "@badeball/cypress-cucumber-preprocessor": "=18.0.6",
     "@cypress/browserify-preprocessor": "=3.0.2",
+    "@quasar/app-vite": "^1.4.6",
     "@quasar/app-webpack": "=3.9.6",
     "@quasar/quasar-app-extension-testing": "=2.1.1",
     "@quasar/quasar-app-extension-testing-unit-jest": "=3.0.0-alpha.10",

diff --git a/src/components/card/DiagramsCard.vue b/src/components/card/DiagramsCard.vue
@@ -98,8 +98,8 @@ import { getAllModels } from 'src/composables/Project';
 import { getAllTagsByType } from 'src/composables/PluginManager';
 import { searchText } from 'src/composables/Filter';
 
-import DiagramTable from 'src/components/table/DiagramTable';
-import DiagramGrid from 'src/components/grid/DiagramGrid';
+import DiagramTable from 'src/components/table/DiagramTable.vue';
+import DiagramGrid from 'src/components/grid/DiagramGrid.vue';
 import DiagramFilterCard from 'components/card/DiagramFilterCard.vue';
 
 import DialogEvent from 'src/composables/events/DialogEvent';

diff --git a/src/components/card/FileExplorerActionCard.vue b/src/components/card/FileExplorerActionCard.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import FileExplorerActionMenu from 'components/menu/FileExplorerActionMenu';
+import FileExplorerActionMenu from 'components/menu/FileExplorerActionMenu.vue';
 
 const isActionMenuOpen = ref(false);
 

diff --git a/src/components/card/GitBranchCard.vue b/src/components/card/GitBranchCard.vue
@@ -24,7 +24,7 @@ import { useRoute } from 'vue-router';
 import { onMounted, onUnmounted, ref } from 'vue';
 import GitEvent from 'src/composables/events/GitEvent';
 import FileEvent from 'src/composables/events/FileEvent';
-import GitBranchMenu from 'components/menu/GitBranchMenu';
+import GitBranchMenu from 'components/menu/GitBranchMenu.vue';
 
 let addRemoteSubscription;
 let checkoutSubscription;

diff --git a/src/components/dialog/CreateFileDialog.vue b/src/components/dialog/CreateFileDialog.vue
@@ -24,8 +24,8 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'components/dialog/DefaultDialog';
-import CreateFileForm from 'components/form/CreateFileForm';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
+import CreateFileForm from 'components/form/CreateFileForm.vue';
 
 defineProps({
   projectName: {

diff --git a/src/components/dialog/CreateModelDialog.vue b/src/components/dialog/CreateModelDialog.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import DefaultDialog from 'components/dialog/DefaultDialog';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
 import CreateModelForm from 'components/form/CreateModelForm.vue';
 
 defineProps({

diff --git a/src/components/dialog/CreateProjectDialog.vue b/src/components/dialog/CreateProjectDialog.vue
@@ -20,8 +20,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'src/components/dialog/DefaultDialog';
-import CreateProjectForm from 'src/components/form/CreateProjectForm';
+import DefaultDialog from 'src/components/dialog/DefaultDialog.vue';
+import CreateProjectForm from 'src/components/form/CreateProjectForm.vue';
 import { useRouter } from 'vue-router';
 import { initProject } from 'src/composables/Project';
 import { Notify } from 'quasar';

diff --git a/src/components/dialog/CreateProjectTemplateDialog.vue b/src/components/dialog/CreateProjectTemplateDialog.vue
@@ -54,8 +54,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'src/components/dialog/DefaultDialog';
-import CreateProjectTemplateForm from 'src/components/form/CreateProjectTemplateForm';
+import DefaultDialog from 'src/components/dialog/DefaultDialog.vue';
+import CreateProjectTemplateForm from 'src/components/form/CreateProjectTemplateForm.vue';
 import { useRouter } from 'vue-router';
 import {
   onMounted,

diff --git a/src/components/dialog/DeleteFileDialog.vue b/src/components/dialog/DeleteFileDialog.vue
@@ -35,8 +35,8 @@ import {
   onUnmounted,
 } from 'vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'components/dialog/DefaultDialog';
-import DeleteFileForm from 'components/form/DeleteFileForm';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
+import DeleteFileForm from 'components/form/DeleteFileForm.vue';
 
 defineProps({
   projectName: {

diff --git a/src/components/dialog/DeleteModelDialog.vue b/src/components/dialog/DeleteModelDialog.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import DefaultDialog from 'components/dialog/DefaultDialog';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
 import DeleteModelForm from 'components/form/DeleteModelForm.vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
 import {

diff --git a/src/components/dialog/DeleteProjectDialog.vue b/src/components/dialog/DeleteProjectDialog.vue
@@ -21,8 +21,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'src/components/dialog/DefaultDialog';
-import DeleteProjectForm from 'src/components/form/DeleteProjectForm';
+import DefaultDialog from 'src/components/dialog/DefaultDialog.vue';
+import DeleteProjectForm from 'src/components/form/DeleteProjectForm.vue';
 import { onMounted, onUnmounted, ref } from 'vue';
 
 const projectId = ref(null);

diff --git a/src/components/dialog/GitAddRemoteDialog.vue b/src/components/dialog/GitAddRemoteDialog.vue
@@ -21,8 +21,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'components/dialog/DefaultDialog';
-import GitAddRemoteForm from 'components/form/GitAddRemoteForm';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
+import GitAddRemoteForm from 'components/form/GitAddRemoteForm.vue';
 
 defineProps({
   projectName: {

diff --git a/src/components/dialog/GitAuthenticationDialog.vue b/src/components/dialog/GitAuthenticationDialog.vue
@@ -21,8 +21,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'components/dialog/DefaultDialog';
-import GitAuthenticationForm from 'components/form/GitAuthenticationForm';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
+import GitAuthenticationForm from 'components/form/GitAuthenticationForm.vue';
 
 defineProps({
   projectName: {

diff --git a/src/components/dialog/GitCommitDialog.vue b/src/components/dialog/GitCommitDialog.vue
@@ -66,15 +66,15 @@
 </template>
 
 <script setup>
-import DefaultDialog from 'components/dialog/DefaultDialog';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
 import {
   onMounted,
   onUnmounted,
   ref,
 } from 'vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
 import { getStatus } from 'src/composables/Project';
-import GitCommitForm from 'components/form/GitCommitForm';
+import GitCommitForm from 'components/form/GitCommitForm.vue';
 import GitEvent from 'src/composables/events/GitEvent';
 
 const props = defineProps({

diff --git a/src/components/dialog/GitLogDialog.vue b/src/components/dialog/GitLogDialog.vue
@@ -99,7 +99,7 @@
 
 <script setup>
 import { onMounted, onUnmounted, ref } from 'vue';
-import DefaultDialog from 'components/dialog/DefaultDialog';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
 import { gitLog } from 'src/composables/Project';
 

diff --git a/src/components/dialog/GitNewBranchDialog.vue b/src/components/dialog/GitNewBranchDialog.vue
@@ -22,8 +22,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'components/dialog/DefaultDialog';
-import GitNewBranchForm from 'components/form/GitNewBranchForm';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
+import GitNewBranchForm from 'components/form/GitNewBranchForm.vue';
 import { onMounted, onUnmounted, ref } from 'vue';
 
 defineProps({

diff --git a/src/components/dialog/GitPushDialog.vue b/src/components/dialog/GitPushDialog.vue
@@ -22,8 +22,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'components/dialog/DefaultDialog';
-import GitPushForm from 'components/form/GitPushForm';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
+import GitPushForm from 'components/form/GitPushForm.vue';
 import { onMounted, onUnmounted, ref } from 'vue';
 
 defineProps({

diff --git a/src/components/dialog/GitStatusDialog.vue b/src/components/dialog/GitStatusDialog.vue
@@ -98,7 +98,7 @@
 </template>
 
 <script setup>
-import DefaultDialog from 'components/dialog/DefaultDialog';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
 import {
   computed,
   onMounted,

diff --git a/src/components/dialog/GitUpdateDialog.vue b/src/components/dialog/GitUpdateDialog.vue
@@ -22,8 +22,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'components/dialog/DefaultDialog';
-import GitUpdateForm from 'components/form/GitUpdateForm';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
+import GitUpdateForm from 'components/form/GitUpdateForm.vue';
 import { onMounted, onUnmounted, ref } from 'vue';
 
 defineProps({

diff --git a/src/components/dialog/ImportModelTemplateDialog.vue b/src/components/dialog/ImportModelTemplateDialog.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import DefaultDialog from 'components/dialog/DefaultDialog';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
 import ImportModelTemplateForm from 'components/form/ImportModelTemplateForm.vue';
 import {

diff --git a/src/components/dialog/ImportProjectDialog.vue b/src/components/dialog/ImportProjectDialog.vue
@@ -20,8 +20,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'src/components/dialog/DefaultDialog';
-import ImportProjectForm from 'src/components/form/ImportProjectForm';
+import DefaultDialog from 'src/components/dialog/DefaultDialog.vue';
+import ImportProjectForm from 'src/components/form/ImportProjectForm.vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();

diff --git a/src/components/dialog/RenameModelDialog.vue b/src/components/dialog/RenameModelDialog.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import DefaultDialog from 'components/dialog/DefaultDialog';
+import DefaultDialog from 'components/dialog/DefaultDialog.vue';
 import RenameModelForm from 'components/form/RenameModelForm.vue';
 import DialogEvent from 'src/composables/events/DialogEvent';
 import {

diff --git a/src/components/dialog/RenameProjectDialog.vue b/src/components/dialog/RenameProjectDialog.vue
@@ -20,8 +20,8 @@
 
 <script setup>
 import DialogEvent from 'src/composables/events/DialogEvent';
-import DefaultDialog from 'src/components/dialog/DefaultDialog';
-import RenameProjectForm from 'src/components/form/RenameProjectForm';
+import DefaultDialog from 'src/components/dialog/DefaultDialog.vue';
+import RenameProjectForm from 'src/components/form/RenameProjectForm.vue';
 import { onMounted, onUnmounted, ref } from 'vue';
 
 const projectId = ref(null);

diff --git a/src/components/drawer/HomeDrawer.vue b/src/components/drawer/HomeDrawer.vue
@@ -31,6 +31,6 @@
 </template>
 
 <script setup>
-import DefaultDrawer from 'src/components/drawer/DefaultDrawer';
-import ShortProjectsItem from 'src/components/item/ShortProjectsItem';
+import DefaultDrawer from 'src/components/drawer/DefaultDrawer.vue';
+import ShortProjectsItem from 'src/components/item/ShortProjectsItem.vue';
 </script>
diff --git a/src/components/drawer/ModelizerTextLeftDrawer.vue b/src/components/drawer/ModelizerTextLeftDrawer.vue
@@ -38,7 +38,7 @@
 
 <script setup>
 import FileExplorer from 'src/components/FileExplorer.vue';
-import GitBranchCard from 'src/components/card/GitBranchCard';
+import GitBranchCard from 'src/components/card/GitBranchCard.vue';
 import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 

diff --git a/src/components/editor/MonacoEditor.vue b/src/components/editor/MonacoEditor.vue
@@ -21,16 +21,13 @@ import {
   onMounted,
   onUpdated,
   onUnmounted,
-  nextTick,
   ref,
 } from 'vue';
 import FileEvent from 'src/composables/events/FileEvent';
 import GitEvent from 'src/composables/events/GitEvent';
 import { getPlugins } from 'src/composables/PluginManager';
 import Languages from 'assets/editor/languages';
 
-const monaco = require('monaco-editor');
-
 const props = defineProps({
   projectName: {
     type: String,
@@ -43,6 +40,7 @@ const props = defineProps({
 });
 
 const container = ref(null);
+let monaco;
 let editor;
 let checkoutSubscription;
 let addRemoteSubscription;
@@ -141,7 +139,8 @@ async function updateEditorContent() {
 }
 
 onBeforeMount(async () => {
-  await nextTick();
+  monaco = await import('monaco-editor');
+
   if (!editor) {
     await createEditor();
   }
@@ -163,7 +162,6 @@ onMounted(() => {
 });
 
 onUpdated(async () => {
-  await nextTick();
   await updateEditorLayout();
 });
 

diff --git a/src/components/grid/ComponentDefinitionGrid.vue b/src/components/grid/ComponentDefinitionGrid.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import ComponentDefinitionCard from 'src/components/card/ComponentDefinitionCard';
+import ComponentDefinitionCard from 'src/components/card/ComponentDefinitionCard.vue';
 
 defineProps({
   definitions: {

diff --git a/src/components/grid/DiagramGrid.vue b/src/components/grid/DiagramGrid.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import ModelCard from 'src/components/card/ModelCard';
+import ModelCard from 'src/components/card/ModelCard.vue';
 
 defineEmits(['click:diagram']);
 defineProps({

diff --git a/src/components/grid/TemplateGrid.vue b/src/components/grid/TemplateGrid.vue
@@ -51,7 +51,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { searchText } from 'src/composables/Filter';
-import TemplateCard from 'src/components/card/TemplateCard';
+import TemplateCard from 'src/components/card/TemplateCard.vue';
 
 defineEmits(['add:template']);
 

diff --git a/src/components/inputs/AttributesList.vue b/src/components/inputs/AttributesList.vue
@@ -58,7 +58,7 @@
 
 <script setup>
 import { reactive, toRef, watch } from 'vue';
-import InputWrapper from 'components/inputs/InputWrapper';
+import InputWrapper from 'components/inputs/InputWrapper.vue';
 import ObjectInput from 'src/components/inputs/ObjectInput.vue';
 
 const emit = defineEmits([

diff --git a/src/components/inputs/InputWrapper.vue b/src/components/inputs/InputWrapper.vue
@@ -88,13 +88,13 @@ const props = defineProps({
 });
 
 const inputList = {
-  Boolean: defineAsyncComponent(() => import('./BooleanInput')),
-  String: defineAsyncComponent(() => import('./StringInput')),
-  Number: defineAsyncComponent(() => import('./NumberInput')),
-  Reference: defineAsyncComponent(() => import('./ReferenceInput')),
-  Select: defineAsyncComponent(() => import('./SelectInput')),
-  Link: defineAsyncComponent(() => import('./LinkInput')),
-  Array: defineAsyncComponent(() => import('./ArrayInput')),
+  Boolean: defineAsyncComponent(() => import('./BooleanInput.vue')),
+  String: defineAsyncComponent(() => import('./StringInput.vue')),
+  Number: defineAsyncComponent(() => import('./NumberInput.vue')),
+  Reference: defineAsyncComponent(() => import('./ReferenceInput.vue')),
+  Select: defineAsyncComponent(() => import('./SelectInput.vue')),
+  Link: defineAsyncComponent(() => import('./LinkInput.vue')),
+  Array: defineAsyncComponent(() => import('./ArrayInput.vue')),
 };
 
 const propsAttribute = toRef(props, 'attribute');

diff --git a/src/components/list/ComponentDefinitionsList.vue b/src/components/list/ComponentDefinitionsList.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script setup>
-import LibraryList from 'src/components/list/LibraryList';
+import LibraryList from 'src/components/list/LibraryList.vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();