upgrade build from Vue CLI to Vite

.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'

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

public/index.html → 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>

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"

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 {

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: {

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.

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;

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');
 

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

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';

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';

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'
+    }
+});