From 9253d6942dfe0c1955506858f24edf60a33d19ee Mon Sep 17 00:00:00 2001
From: Yi Lei Feng <fengyilei1@gmail.com>
Date: Thu, 9 May 2024 10:45:38 -0400
Subject: [PATCH] upgrade build from Vue CLI to Vite

---
 .eslintrc.js                                  |   7 +-
 README.md                                     |   4 +-
 babel.config.js                               |   3 -
 public/favicon.ico => favicon.ico             | Bin
 public/favicon.svg => favicon.svg             |   0
 {public/help => help}/en.md                   |   0
 {public/help => help}/fr.md                   |   0
 .../images/datatable/applyFilters.png         | Bin
 .../images/datatable/clearFilters.png         | Bin
 .../help => help}/images/datatable/close.png  | Bin
 .../images/datatable/collapse.png             | Bin
 .../help => help}/images/datatable/expand.png | Bin
 .../images/datatable/extentFilter.png         | Bin
 .../images/datatable/minimize.png             | Bin
 .../images/datatable/showFilters.png          | Bin
 .../images/datatable/toggleCols.png           | Bin
 .../help => help}/images/layer/addLayer.png   | Bin
 .../help => help}/images/layer/datatable.png  | Bin
 {public/help => help}/images/layer/legend.png | Bin
 .../help => help}/images/layer/metadata.png   | Bin
 {public/help => help}/images/layer/reload.png | Bin
 {public/help => help}/images/layer/remove.png | Bin
 .../images/layer/reorderLayers.png            | Bin
 .../help => help}/images/layer/settings.png   | Bin
 .../images/layer/toggleGroups.png             | Bin
 .../images/layer/toggleVisibility.png         | Bin
 .../images/layer/zoomBoundary.png             | Bin
 .../images/navigation/basemaps.png            | Bin
 .../images/navigation/fullscreen.png          | Bin
 .../images/navigation/geolocate.png           | Bin
 .../help => help}/images/navigation/help.png  | Bin
 .../help => help}/images/navigation/home.png  | Bin
 .../images/navigation/zoomin.png              | Bin
 .../images/navigation/zoomout.png             | Bin
 .../help => help}/images/overview/toggle.png  | Bin
 public/index-ca-en.html => index-ca-en.html   |   0
 public/index-ca-fr.html => index-ca-fr.html   |   0
 public/index.html => index.html               |   1 +
 package.json                                  |  23 +++---
 public/ramp-default.json => ramp-default.json |   0
 .../highcharts-editor.complete.js             |   0
 .../highcharts-editor.min.css                 |   0
 src/components/helpers/custom-editor.vue      |   7 +-
 src/components/map-editor.vue                 |   4 +-
 src/components/metadata-editor.vue            |  16 ++--
 src/definitions.ts                            |   5 --
 src/lang/index.ts                             |   2 +-
 src/lang/lang.csv                             |   3 +-
 src/main.ts                                   |   2 +-
 src/shims-vue.d.ts                            |   6 ++
 vite.config.mts                               |  21 ++++++
 vue.config.js                                 |  71 ------------------
 52 files changed, 62 insertions(+), 113 deletions(-)
 delete mode 100644 babel.config.js
 rename public/favicon.ico => favicon.ico (100%)
 rename public/favicon.svg => favicon.svg (100%)
 rename {public/help => help}/en.md (100%)
 rename {public/help => help}/fr.md (100%)
 rename {public/help => help}/images/datatable/applyFilters.png (100%)
 rename {public/help => help}/images/datatable/clearFilters.png (100%)
 rename {public/help => help}/images/datatable/close.png (100%)
 rename {public/help => help}/images/datatable/collapse.png (100%)
 rename {public/help => help}/images/datatable/expand.png (100%)
 rename {public/help => help}/images/datatable/extentFilter.png (100%)
 rename {public/help => help}/images/datatable/minimize.png (100%)
 rename {public/help => help}/images/datatable/showFilters.png (100%)
 rename {public/help => help}/images/datatable/toggleCols.png (100%)
 rename {public/help => help}/images/layer/addLayer.png (100%)
 rename {public/help => help}/images/layer/datatable.png (100%)
 rename {public/help => help}/images/layer/legend.png (100%)
 rename {public/help => help}/images/layer/metadata.png (100%)
 rename {public/help => help}/images/layer/reload.png (100%)
 rename {public/help => help}/images/layer/remove.png (100%)
 rename {public/help => help}/images/layer/reorderLayers.png (100%)
 rename {public/help => help}/images/layer/settings.png (100%)
 rename {public/help => help}/images/layer/toggleGroups.png (100%)
 rename {public/help => help}/images/layer/toggleVisibility.png (100%)
 rename {public/help => help}/images/layer/zoomBoundary.png (100%)
 rename {public/help => help}/images/navigation/basemaps.png (100%)
 rename {public/help => help}/images/navigation/fullscreen.png (100%)
 rename {public/help => help}/images/navigation/geolocate.png (100%)
 rename {public/help => help}/images/navigation/help.png (100%)
 rename {public/help => help}/images/navigation/home.png (100%)
 rename {public/help => help}/images/navigation/zoomin.png (100%)
 rename {public/help => help}/images/navigation/zoomout.png (100%)
 rename {public/help => help}/images/overview/toggle.png (100%)
 rename public/index-ca-en.html => index-ca-en.html (100%)
 rename public/index-ca-fr.html => index-ca-fr.html (100%)
 rename public/index.html => index.html (95%)
 rename public/ramp-default.json => ramp-default.json (100%)
 rename {public/scripts => scripts}/highcharts-editor/highcharts-editor.complete.js (100%)
 rename {public/scripts => scripts}/highcharts-editor/highcharts-editor.min.css (100%)
 create mode 100644 vite.config.mts
 delete mode 100644 vue.config.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 3d5ca672..74f2d1f4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
     root: true,
     env: {
-        node: true
+        node: true,
+        es2022: true
     },
     extends: [
         'plugin:vue/essential',
@@ -14,8 +15,8 @@ module.exports = {
         ecmaVersion: 2020
     },
     rules: {
-        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-console': import.meta.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-debugger': import.meta.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'prettier/prettier': ['error', { endOfLine: 'auto' }],
         'sort-imports': ['error', {"ignoreCase": true, "ignoreDeclarationSort": true }],
         '@typescript-eslint/no-var-requires': 'off'
diff --git a/README.md b/README.md
index c4f1b660..15dd5e05 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# RAMP Storylines Editor (formerly StoryRAMP)
+# RAMP Storylines Editor
 
 RAMP Storylines Editor is an implementation of [RAMP4](https://github.com/ramp4-pcar4/ramp4-pcar4) (the mapping framework), [RAMP4 Config Editor](https://github.com/ramp4-pcar4/config-editor) (used to create map configurations), [Highcharts Editor](https://www.highcharts.com/blog/products/highcharts-editor/) (used to create interactive charts and graphs), and [Storylines](https://github.com/ramp4-pcar4/story-ramp) (used to host and display the created product).
 
@@ -23,7 +23,7 @@ npm install
 ### Compiles and hot-reloads for development
 
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index 162a3ea9..00000000
--- a/babel.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
diff --git a/public/favicon.ico b/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to favicon.ico
diff --git a/public/favicon.svg b/favicon.svg
similarity index 100%
rename from public/favicon.svg
rename to favicon.svg
diff --git a/public/help/en.md b/help/en.md
similarity index 100%
rename from public/help/en.md
rename to help/en.md
diff --git a/public/help/fr.md b/help/fr.md
similarity index 100%
rename from public/help/fr.md
rename to help/fr.md
diff --git a/public/help/images/datatable/applyFilters.png b/help/images/datatable/applyFilters.png
similarity index 100%
rename from public/help/images/datatable/applyFilters.png
rename to help/images/datatable/applyFilters.png
diff --git a/public/help/images/datatable/clearFilters.png b/help/images/datatable/clearFilters.png
similarity index 100%
rename from public/help/images/datatable/clearFilters.png
rename to help/images/datatable/clearFilters.png
diff --git a/public/help/images/datatable/close.png b/help/images/datatable/close.png
similarity index 100%
rename from public/help/images/datatable/close.png
rename to help/images/datatable/close.png
diff --git a/public/help/images/datatable/collapse.png b/help/images/datatable/collapse.png
similarity index 100%
rename from public/help/images/datatable/collapse.png
rename to help/images/datatable/collapse.png
diff --git a/public/help/images/datatable/expand.png b/help/images/datatable/expand.png
similarity index 100%
rename from public/help/images/datatable/expand.png
rename to help/images/datatable/expand.png
diff --git a/public/help/images/datatable/extentFilter.png b/help/images/datatable/extentFilter.png
similarity index 100%
rename from public/help/images/datatable/extentFilter.png
rename to help/images/datatable/extentFilter.png
diff --git a/public/help/images/datatable/minimize.png b/help/images/datatable/minimize.png
similarity index 100%
rename from public/help/images/datatable/minimize.png
rename to help/images/datatable/minimize.png
diff --git a/public/help/images/datatable/showFilters.png b/help/images/datatable/showFilters.png
similarity index 100%
rename from public/help/images/datatable/showFilters.png
rename to help/images/datatable/showFilters.png
diff --git a/public/help/images/datatable/toggleCols.png b/help/images/datatable/toggleCols.png
similarity index 100%
rename from public/help/images/datatable/toggleCols.png
rename to help/images/datatable/toggleCols.png
diff --git a/public/help/images/layer/addLayer.png b/help/images/layer/addLayer.png
similarity index 100%
rename from public/help/images/layer/addLayer.png
rename to help/images/layer/addLayer.png
diff --git a/public/help/images/layer/datatable.png b/help/images/layer/datatable.png
similarity index 100%
rename from public/help/images/layer/datatable.png
rename to help/images/layer/datatable.png
diff --git a/public/help/images/layer/legend.png b/help/images/layer/legend.png
similarity index 100%
rename from public/help/images/layer/legend.png
rename to help/images/layer/legend.png
diff --git a/public/help/images/layer/metadata.png b/help/images/layer/metadata.png
similarity index 100%
rename from public/help/images/layer/metadata.png
rename to help/images/layer/metadata.png
diff --git a/public/help/images/layer/reload.png b/help/images/layer/reload.png
similarity index 100%
rename from public/help/images/layer/reload.png
rename to help/images/layer/reload.png
diff --git a/public/help/images/layer/remove.png b/help/images/layer/remove.png
similarity index 100%
rename from public/help/images/layer/remove.png
rename to help/images/layer/remove.png
diff --git a/public/help/images/layer/reorderLayers.png b/help/images/layer/reorderLayers.png
similarity index 100%
rename from public/help/images/layer/reorderLayers.png
rename to help/images/layer/reorderLayers.png
diff --git a/public/help/images/layer/settings.png b/help/images/layer/settings.png
similarity index 100%
rename from public/help/images/layer/settings.png
rename to help/images/layer/settings.png
diff --git a/public/help/images/layer/toggleGroups.png b/help/images/layer/toggleGroups.png
similarity index 100%
rename from public/help/images/layer/toggleGroups.png
rename to help/images/layer/toggleGroups.png
diff --git a/public/help/images/layer/toggleVisibility.png b/help/images/layer/toggleVisibility.png
similarity index 100%
rename from public/help/images/layer/toggleVisibility.png
rename to help/images/layer/toggleVisibility.png
diff --git a/public/help/images/layer/zoomBoundary.png b/help/images/layer/zoomBoundary.png
similarity index 100%
rename from public/help/images/layer/zoomBoundary.png
rename to help/images/layer/zoomBoundary.png
diff --git a/public/help/images/navigation/basemaps.png b/help/images/navigation/basemaps.png
similarity index 100%
rename from public/help/images/navigation/basemaps.png
rename to help/images/navigation/basemaps.png
diff --git a/public/help/images/navigation/fullscreen.png b/help/images/navigation/fullscreen.png
similarity index 100%
rename from public/help/images/navigation/fullscreen.png
rename to help/images/navigation/fullscreen.png
diff --git a/public/help/images/navigation/geolocate.png b/help/images/navigation/geolocate.png
similarity index 100%
rename from public/help/images/navigation/geolocate.png
rename to help/images/navigation/geolocate.png
diff --git a/public/help/images/navigation/help.png b/help/images/navigation/help.png
similarity index 100%
rename from public/help/images/navigation/help.png
rename to help/images/navigation/help.png
diff --git a/public/help/images/navigation/home.png b/help/images/navigation/home.png
similarity index 100%
rename from public/help/images/navigation/home.png
rename to help/images/navigation/home.png
diff --git a/public/help/images/navigation/zoomin.png b/help/images/navigation/zoomin.png
similarity index 100%
rename from public/help/images/navigation/zoomin.png
rename to help/images/navigation/zoomin.png
diff --git a/public/help/images/navigation/zoomout.png b/help/images/navigation/zoomout.png
similarity index 100%
rename from public/help/images/navigation/zoomout.png
rename to help/images/navigation/zoomout.png
diff --git a/public/help/images/overview/toggle.png b/help/images/overview/toggle.png
similarity index 100%
rename from public/help/images/overview/toggle.png
rename to help/images/overview/toggle.png
diff --git a/public/index-ca-en.html b/index-ca-en.html
similarity index 100%
rename from public/index-ca-en.html
rename to index-ca-en.html
diff --git a/public/index-ca-fr.html b/index-ca-fr.html
similarity index 100%
rename from public/index-ca-fr.html
rename to index-ca-fr.html
diff --git a/public/index.html b/index.html
similarity index 95%
rename from public/index.html
rename to index.html
index 37f60a7a..0abda623 100644
--- a/public/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
         <div id="app"></div>
         <!-- built files will be auto injected -->
 
+        <script type="module" src="/src/main.ts"></script>
         <script src="scripts/highcharts-editor/highcharts-editor.complete.js"></script>
         <script src="scripts/ramp4/ramp.js"></script>
     </body>
diff --git a/package.json b/package.json
index 8724dd95..cc630808 100644
--- a/package.json
+++ b/package.json
@@ -3,17 +3,18 @@
     "version": "1.0.0",
     "private": true,
     "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
+        "dev": "vite",
+        "serve": "vite preview",
+        "build": "vite build",
+        "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
     },
     "dependencies": {
         "@kangc/v-md-editor": "^2.3.17",
+        "@rollup/plugin-dsv": "^3.0.4",
         "@tailwindcss/typography": "^0.4.0",
         "@types/highcharts": "^7.0.0",
         "axios": "^1.2.0",
         "clone-deep": "^4.0.1",
-        "core-js": "^3.6.5",
         "file-saver": "^2.0.5",
         "highcharts": "^9.3.2",
         "highcharts-vue": "^1.4.3",
@@ -22,9 +23,12 @@
         "jszip": "^3.10.1",
         "markdown-it": "^12.0.6",
         "nouislider": "^15.5.0",
-        "ramp-config-editor_editeur-config-pcar": "^1.1.8",
         "throttle-debounce": "^5.0.0",
+        "ramp-config-editor_editeur-config-pcar": "^2.0.0",
+        "ramp-storylines_demo-scenarios-pcar": "^3.1.3",
+        "url": "^0.11.3",
         "uuid": "^9.0.0",
+        "vite": "^5.2.9",
         "vue": "^3.3.4",
         "vue-class-component": "^8.0.0-rc.1",
         "vue-final-modal": "^4.4.5",
@@ -42,27 +46,22 @@
         "@types/file-saver": "^2.0.5",
         "@types/markdown-it": "^12.0.1",
         "@types/throttle-debounce": "^5.0.2",
+        "@types/uuid": "^9.0.8",
         "@typescript-eslint/eslint-plugin": "^4.18.0",
         "@typescript-eslint/parser": "^4.18.0",
-        "@vue/cli-plugin-babel": "^4.5.19",
-        "@vue/cli-plugin-eslint": "^4.5.19",
-        "@vue/cli-plugin-typescript": "^4.5.19",
-        "@vue/cli-service": "^4.5.19",
+        "@vitejs/plugin-vue": "^5.0.4",
         "@vue/compiler-sfc": "^3.3.4",
         "@vue/eslint-config-prettier": "^6.0.0",
         "@vue/eslint-config-typescript": "^7.0.0",
         "autoprefixer": "^9.8.6",
-        "dsv-loader": "^2.0.0",
         "eslint": "^6.8.0",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-vue": "^6.2.2",
-        "html-loader": "^0.5.5",
         "pinia": "^2.1.7",
         "postcss": "^7.0.35",
         "prettier": "^2.2.1",
         "ramp-storylines_demo-scenarios-pcar": "^3.1.6",
         "sass": "^1.32.11",
-        "sass-loader": "^8.0.2",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",
         "typescript": "^4.4.4",
         "vue-eslint-parser": "^9.3.1"
diff --git a/public/ramp-default.json b/ramp-default.json
similarity index 100%
rename from public/ramp-default.json
rename to ramp-default.json
diff --git a/public/scripts/highcharts-editor/highcharts-editor.complete.js b/scripts/highcharts-editor/highcharts-editor.complete.js
similarity index 100%
rename from public/scripts/highcharts-editor/highcharts-editor.complete.js
rename to scripts/highcharts-editor/highcharts-editor.complete.js
diff --git a/public/scripts/highcharts-editor/highcharts-editor.min.css b/scripts/highcharts-editor/highcharts-editor.min.css
similarity index 100%
rename from public/scripts/highcharts-editor/highcharts-editor.min.css
rename to scripts/highcharts-editor/highcharts-editor.min.css
diff --git a/src/components/helpers/custom-editor.vue b/src/components/helpers/custom-editor.vue
index 8c3166a1..36fb5895 100644
--- a/src/components/helpers/custom-editor.vue
+++ b/src/components/helpers/custom-editor.vue
@@ -22,7 +22,7 @@
 <script lang="ts">
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import { Vue3JsonEditor } from 'vue3-json-editor';
-import { Validator } from '@/definitions';
+import { Validator } from 'jsonschema';
 
 @Options({
     components: {
@@ -38,8 +38,7 @@ export default class CustomEditorV extends Vue {
     updatedConfig = '';
     edited = false;
 
-    jsonValidator = require('jsonschema').Validator;
-    validator: Validator = new this.jsonValidator();
+    validator: Validator = new Validator();
     storylinesSchema = '';
 
     mounted(): void {
@@ -61,7 +60,7 @@ export default class CustomEditorV extends Vue {
 
     onJsonSave(): void {
         // TODO: add any missing properties in schema as required (e.g. chart options)
-        const checkValidation = this.validator.validate(this.updatedConfig, this.storylinesSchema);
+        const checkValidation = this.validator.validate(this.updatedConfig, this.storylinesSchema as any);
         if (checkValidation.valid) {
             this.$emit('config-edited', this.updatedConfig, true);
         } else {
diff --git a/src/components/map-editor.vue b/src/components/map-editor.vue
index 86b9c2c2..25fc68c8 100644
--- a/src/components/map-editor.vue
+++ b/src/components/map-editor.vue
@@ -49,10 +49,10 @@
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, MapPanel, SourceCounts, TimeSliderConfig } from '@/definitions';
 import { VueFinalModal } from 'vue-final-modal';
-import defaultConfig from '../../public/ramp-default.json';
+import defaultConfig from '../../../ramp-default.json';
 import TimeSliderEditorV from './helpers/time-slider-editor.vue';
 import { createInstance } from 'ramp-config-editor_editeur-config-pcar';
-import 'ramp-config-editor_editeur-config-pcar/dist/style.css';
+import 'ramp-config-editor_editeur-config-pcar/style.css';
 
 @Options({
     components: {
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index b38b12b3..f472d9a2 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -325,9 +325,9 @@ import { VueSpinnerOval } from 'vue3-spinners';
 import { VueFinalModal } from 'vue-final-modal';
 import { useUserStore } from '../stores/userStore';
 
-const JSZip = require('jszip');
-const axios = require('axios').default;
-const { v4: uuidv4 } = require('uuid');
+import JSZip from 'jszip';
+import axios from 'axios';
+import { v4 as uuidv4 } from 'uuid';
 
 import Message from 'vue-m-message';
 import SlideEditorV from './slide-editor.vue';
@@ -820,14 +820,14 @@ export default class MetadataEditorV extends Vue {
             zip: configZip,
             configs: this.configs as unknown as { [key: string]: StoryRampConfig },
             assets: {
-                en: assetsFolder.folder('en'),
-                fr: assetsFolder.folder('fr')
+                en: (assetsFolder as JSZip).folder('en') as JSZip,
+                fr: (assetsFolder as JSZip).folder('fr') as JSZip
             },
             charts: {
-                en: chartsFolder.folder('en'),
-                fr: chartsFolder.folder('fr')
+                en: (chartsFolder as JSZip).folder('en') as JSZip,
+                fr: (chartsFolder as JSZip).folder('fr') as JSZip
             },
-            rampConfig: rampConfigFolder
+            rampConfig: rampConfigFolder as JSZip
         };
 
         // If uploadLogo is set, upload the logo to the directory.
diff --git a/src/definitions.ts b/src/definitions.ts
index 45e9b5d9..75d3ccd2 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -46,11 +46,6 @@ export interface Highchart {
     toString(): string;
 }
 
-export interface Validator {
-    addSchema(): void;
-    validate(json: string, schema: string): any;
-}
-
 export interface DQVOptions {
     title: string;
     subtitle: string;
diff --git a/src/lang/index.ts b/src/lang/index.ts
index e6cc516a..f8fa4404 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -5,7 +5,7 @@ interface LocaleMessages {
     [key: string]: { [name: string]: string };
 }
 
-const rows = require('./lang.csv');
+import rows from './lang.csv';
 
 const lang = document.documentElement.getAttribute('lang');
 
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 9b4d8001..2a50a8ab 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -26,6 +26,7 @@ editor.lang.fr,French,1,Français,1
 editor.feedback,Send Us Feedback,1,Envoyez-nous vos commentaires,0
 editor.feedback.subject,Storylines Editor Feedback,1,Commentaires de l'éditeur de scénarios,0
 editor.window.title,RAMP Storylines Editor,1,Éditeur de scénarios de la PCAR,1
+editor.configOverwrite,Are you sure you want to overwrite product '{uuid}'?,1,[FR] Are you sure you want to overwrite product '{uuid}'?,0
 editor.createProduct,Create New Storylines Product,1,Créer un nouveau produit de scénarios,1
 editor.editProduct,Edit Existing Storylines Product,1,Modifier un produit de scénarios,1
 editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées d’un projet,1
@@ -91,8 +92,8 @@ editor.chart.label.edit,Edit,1,Éditer,1
 editor.chart.label.empty,Empty,1,Vide,1
 editor.chart.label.create,Add new chart,1,Ajouter un nouveau graphique,1
 editor.chart.label.info,Interactive chart,1,[FR] Interactive chart,0
-editor.chart.label.nameExists,There is already an existing chart with the name {name}.,1,There is already an existing chart with the name {name}.,0
 editor.chart.label.info,Interactive charts ({num}),1,Graphiques interactifs ({num}),1
+editor.chart.label.nameExists,There is already an existing chart with the name {name}.,1,There is already an existing chart with the name {name}.,0
 editor.chart.delete.confirm,Are you sure you want to delete the chart {name}?,1,Voulez-vous vraiment supprimer le graphique {nom}?,1
 editor.map.title,Map title,1,Titre de la carte,1
 editor.map.edit.cancel,Cancel editing,1,Annuler les modifications,1
diff --git a/src/main.ts b/src/main.ts
index de7e11e7..1bcf54f5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,8 +20,8 @@ VueMarkdownEditor.use(githubTheme, {
 });
 
 import { createVfm } from 'vue-final-modal';
+import 'vue-final-modal/style.css'
 const vfm = createVfm();
-import 'vue-final-modal/dist/style.css';
 
 import VueTippy from 'vue-tippy';
 import 'tippy.js/dist/tippy.css';
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 91501349..5caf11ed 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -3,6 +3,12 @@ declare module '*.vue' {
     export default Vue;
 }
 
+declare module '*lang.csv' {
+    import { LocaleMessages, VueMessageType } from 'vue-i18n';
+    const content: LocaleMessages<VueMessageType>;
+    export default content;
+}
+
 declare module '@kangc/v-md-editor';
 declare module '@kangc/v-md-editor/lib/lang/en-US';
 declare module '@kangc/v-md-editor/lib/theme/github.js';
diff --git a/vite.config.mts b/vite.config.mts
new file mode 100644
index 00000000..17ac9f09
--- /dev/null
+++ b/vite.config.mts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import dsv from '@rollup/plugin-dsv';
+// import VitePluginI18n from './scripts/vite-plugin-i18n';
+import path from 'path';
+
+export default defineConfig({
+    plugins: [vue(), dsv()],
+    base: './',
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'src')
+        }
+    },
+    build: {
+        target: 'esnext'
+    },
+    server: {
+        open: '/#/en/editor'
+    }
+});
diff --git a/vue.config.js b/vue.config.js
deleted file mode 100644
index aae430ea..00000000
--- a/vue.config.js
+++ /dev/null
@@ -1,71 +0,0 @@
-const crypto = require('crypto');
-
-/**
- * The MD4 algorithm is not available anymore in Node.js 17+ (because of library SSL 3).
- * In that case, silently replace MD4 by the MD5 algorithm.
- */
-try {
-    crypto.createHash('md4');
-} catch (e) {
-    console.warn('Crypto "MD4" is not supported anymore by this Node.js version');
-    const origCreateHash = crypto.createHash;
-    crypto.createHash = (alg, opts) => {
-        return origCreateHash(alg === 'md4' ? 'md5' : alg, opts);
-    };
-}
-
-const path = require('path');
-
-module.exports = {
-    pages: {
-        index: {
-            entry: './src/main.ts',
-            template: 'public/index.html',
-            filename: 'index.html',
-            title: 'RAMP Storylines'
-        },
-        indexCanadaEn: {
-            entry: './src/main.ts',
-            template: 'public/index-ca-en.html',
-            filename: 'index-ca-en.html',
-            title: 'RAMP Storylines'
-        },
-        indexCanadaFr: {
-            entry: './src/main.ts',
-            template: 'public/index-ca-fr.html',
-            filename: 'index-ca-fr.html',
-            title: 'Scenarios de PCAR'
-        }
-    },
-    publicPath: '',
-    configureWebpack: {
-        resolve: {
-            alias: {
-                '@': path.resolve(__dirname, 'src/')
-            }
-        }
-    },
-    chainWebpack: (config) => {
-        config.module
-            .rule('lint')
-            .test(/lang\.csv$/)
-            .use('eslint')
-            .loader('dsv-loader')
-            .end();
-
-        config.module
-            .rule('html')
-            .test(/(.)*.(html)$/)
-            .use('html-loader')
-            .loader('html-loader')
-            .end();
-
-        config.module
-            .rule('cjs')
-            .test(/\.cjs$/)
-            .include.add(/node_modules/)
-            .end()
-            .use('babel-loader')
-            .loader('babel-loader');
-    }
-};