- vue-cli upgrade 4.5 to 5.0.4

- npm updates for rxjs, axios, sass-loader, typescript and eslint
- adapt eslint and prettier

.eslintrc.js

@@ -1,26 +1,19 @@
 module.exports = {
-  
-  root: true,
-  env: {
-    es6: true,
-    node: true,
-  },
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    // 'prettier/prettier': ['error', { printWidth: 120 }],
-    "prettier/prettier": "error",
-    "@typescript-eslint/indent": ["error", 4],
-    // "@vue-eslint/printWidth": ["error", 120],
-  },
+    root: true,
+    env: {
+        es6: true,
+        node: true,
+    },
+    extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
+    parserOptions: {
+        ecmaVersion: 2020,
+    },
+    rules: {
+        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+        // 'prettier/prettier': ['error', { printWidth: 120 }],
+        "prettier/prettier": "error",
+        "@typescript-eslint/indent": ["error", 4],
+        // "@vue-eslint/printWidth": ["error", 120],
+    },
 };

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+    presets: ["@vue/cli-plugin-babel/preset"],
 };

package.json

@@ -6,18 +6,18 @@
     "serve": "vue-cli-service serve --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "format": "prettier --write 'src/**/*.{ts,tsx}'"
+    "format": "prettier --check src/**/*.ts"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@openfonts/open-sans_all": "^1.44.2",
-    "axios": "^0.26.1",
+    "axios": "^0.27.2",
     "class-transformer": "^0.5.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
     "leaflet": "^1.7.1",
     "qs": "^6.10.1",
-    "rxjs": "^6.6.0",
+    "rxjs": "^7.5.5",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",
     "vue-matomo": "^4.1.0",
@@ -30,20 +30,22 @@
     "@types/xml2js": "^0.4.9",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "~5.0.4",
+    "@vue/cli-plugin-eslint": "~5.0.4",
+    "@vue/cli-plugin-typescript": "~5.0.4",
+    "@vue/cli-service": "~5.0.4",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "bulma": "^0.9.3",
-    "eslint": "^6.7.2",
+    "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
+    "node-polyfill-webpack-plugin": "^1.1.4",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "typescript": "^4.5.2"
+    "sass-loader": "^13.0.0",
+    "typescript": "^4.7.2",
+    "webpack": "^5.72.1"
   }
 }

src/components/face-category/FacetCategory.ts

@@ -1,8 +1,7 @@
 import { FacetItem } from "@/models/headers";
-import { FilterItem } from "@/models/solr";
+// import { FilterItem } from "@/models/solr";
 import { Options, Vue } from "vue-class-component";
 import { Prop, Emit } from "vue-property-decorator";
-// import FilterItem from '../models/filter-item';
 
 @Options({
     name: "FacetCategory",

src/components/map/map-options.ts

@@ -10,5 +10,4 @@ export interface LayerOptions {
 
 // export type LayerMap = Map<string, LayerOptions>;
 
-export class LayerMap extends Map<string, LayerOptions> {
- }
+export class LayerMap extends Map<string, LayerOptions> {}

src/components/map/map.component.ts

@@ -1,7 +1,8 @@
 import { Options, Vue } from "vue-class-component";
-import { Prop, Emit } from "vue-property-decorator";
+// import { Prop, Emit } from "vue-property-decorator";
+import { Prop } from "vue-property-decorator";
 import { LatLng, LatLngBounds, Map, MapOptions, Rectangle, tileLayer } from "leaflet";
-import { LayerOptions } from "./map-options";
+// import { LayerOptions } from "./map-options";
 import DatasetService from "../../services/dataset.service";
 import { Subscription } from "rxjs";
 import { OaiDataset } from "@/models/oai";
@@ -110,7 +111,8 @@ export default class MapComponent extends Vue {
                                 </p>`);
     }
 
-    private addBaseMap(layerOptions?: LayerOptions): void {
+    // private addBaseMap(layerOptions?: LayerOptions): void {
+    private addBaseMap(): void {
         if (this.map) {
             const map = this.map.setView([47.7, 13.5], 7);
             const southWest = new LatLng(46.5, 9.9),

src/components/vs-input/vs-input.ts

@@ -38,18 +38,18 @@ export default class VsInput extends Vue {
         // host: "repository.geologie.ac.at",
     };
     // private rdrAPI!: DatasetService;
-    itemRefs!: Array<any>;
+    itemRefs!: Array<Element>;
     emits = ["filter"];
 
-    setItemRef(el: any) {
+    setItemRef(el: Element): void {
         this.itemRefs.push(el);
     }
 
-    beforeUpdate() {
+    beforeUpdate(): void {
         this.itemRefs = [];
     }
 
-    mounted() {
+    mounted(): void {
         // this.rdrAPI = new DatasetService();
     }
 
@@ -156,7 +156,7 @@ export default class VsInput extends Vue {
     private request(): void {
         DatasetService.searchTerm(this.display, this.solr.core, this.solr.host).subscribe(
             (res: Dataset[]) => this.dataHandler(res),
-            (error: any) => this.errorHandler(error),
+            (error: string) => this.errorHandler(error),
             () => (this.loading = false),
         );
     }
@@ -167,7 +167,7 @@ export default class VsInput extends Vue {
         // this.loading = false;
     }
 
-    private errorHandler(err: any): void {
+    private errorHandler(err: string): void {
         this.error = err;
         // this.loading = false;
     }
@@ -181,7 +181,7 @@ export default class VsInput extends Vue {
         return key === this.selectedIndex;
     }
 
-    onArrowDown(ev: any): void {
+    onArrowDown(ev: Event): void {
         ev.preventDefault();
         if (this.selectedIndex === null) {
             this.selectedIndex = 0;
@@ -200,7 +200,7 @@ export default class VsInput extends Vue {
         });
     }
 
-    onArrowUp(ev: any): void {
+    onArrowUp(ev: Event): void {
         ev.preventDefault();
         if (this.selectedIndex === null) {
             this.selectedIndex = this.suggestions.length - 1;

src/notes.txt

@@ -86,4 +86,46 @@ https://www.programmerall.com/article/19972027526/
 
 ======================== xml2js ==========================================================
 npm install --save xml2js
-npm i --save-dev @types/xml2js
+npm i --save-dev @types/xml2js
+
+
+
+
+============================== upgrade cli-Service =========================================
+
+https://cli.vuejs.org/migrations/migrate-from-v4.html
+
+vue --version
+@vue/cli 5.0.4
+
+vue upgrade
+continue to upgrade these plugins?
+ Name                        Installed       Wanted          Latest          Command to upgrade
+  @vue/cli-service            4.5.17          4.5.17          5.0.4           vue upgrade @vue/cli-service
+  @vue/cli-plugin-babel       4.5.17          4.5.17          5.0.4           vue upgrade @vue/cli-plugin-babel
+  @vue/cli-plugin-eslint      4.5.17          4.5.17          5.0.4           vue upgrade @vue/cli-plugin-eslint
+  @vue/cli-plugin-typescript  4.5.17          4.5.17          5.0.4           vue upgrade @vue/cli-plugin-typescript
+
+   npm install --save-dev node-polyfill-webpack-plugin
+
+vue.config.js:
+1.
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+2.
+  // devServer: {
+    //     disableHostCheck: true,
+    // },
+3.
+    configureWebpack: {
+        plugins: [
+            new webpack.DefinePlugin({
+                VUE_APP_PORTAL: JSON.stringify(process.env.VUE_APP_PORTAL),
+                SOLR_HOST: JSON.stringify(process.env.SOLR_HOST),
+                SOLR_CORE: JSON.stringify(process.env.SOLR_CORE),
+            }),
+            new NodePolyfillPlugin(),
+        ],
+
+============================ eslint ===========================================
+https://dev-yakuza.posstree.com/en/react-native/eslint-prettier-husky-lint-staged/
+https://prettier.io/docs/en/cli.html

src/services/dataset.service.ts

@@ -1,11 +1,13 @@
 import api from "../api/api";
-import { Observable, of } from "rxjs";
+// import { Observable, of } from "rxjs";
+import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 import { Dataset, DbDataset, Suggestion } from "@/models/dataset";
 import { SolrResponse } from "@/models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
 import { VUE_APP_PORTAL } from "@/constants";
-import { deserialize, instanceToInstance } from "class-transformer";
+// import { deserialize, instanceToInstance } from "class-transformer";
+import { deserialize } from "class-transformer";
 // import { OAI_DATASETS } from "./mock-oai-datasets";
 import { OaiDataset } from "@/models/oai";
 import xml2js from "xml2js";
@@ -169,7 +171,7 @@ class DatasetService {
         const host = "https:" + VUE_APP_PORTAL;
         const path = "/api/dataset/" + id;
         const apiUrl = host + path;
-        const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
+        const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res)));
         // const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
 
         // this.messageService.add('HeroService: fetched heroes');
@@ -178,7 +180,7 @@ class DatasetService {
 
     public getOAI(): Observable<OaiDataset[]> {
         const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
-        const oaiDatasets = api.get<any>(apiUrl).pipe(
+        const oaiDatasets = api.get<string>(apiUrl).pipe(
             map(
                 (response: string) => {
                     // const arrOai = new Array<OaiDataset>();
@@ -209,13 +211,13 @@ class DatasetService {
         //     console.log(records[i].getAttribute("name"));
         // }
 
-        const parser = new xml2js.Parser({
+        const parser: xml2js.Parser = new xml2js.Parser({
             trim: true,
             explicitArray: false,
             ignoreAttrs: false,
             // mergeAttrs: true,
         });
-        parser.parseString(records.outerHTML, function (err: any, result: any) {
+        parser.parseString(records.outerHTML, function (err: Error | null, result: any) {
             const xmlNode = result.ListRecords;
             // const rt = xmlNode.resumptionToken;
             for (const rNode in xmlNode.record) {
@@ -294,7 +296,8 @@ class DatasetService {
     //     //
     // }
 
-    private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
+    // private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
+    private prepareDataset(datasetObj: DbDataset): DbDataset {
         const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj));
         dataset.url = document.documentURI;
         // this.internalDatasetId.generateInternalId(dataset);

src/shims-vue.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+    import type { DefineComponent } from "vue";
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
 }
-declare module 'vue-matomo';
+declare module "vue-matomo";

src/views/map-view/map-view.component.ts

@@ -1,6 +1,7 @@
 import { Options, Vue } from "vue-class-component";
 import MapComponent from "@/components/map/map.component.vue";
-import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
+// import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
+import { MapOptions } from "leaflet";
 
 // const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
 // const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

src/views/search-view/search-view-component.ts

@@ -122,7 +122,7 @@ export default class SearchViewComponent extends Vue {
         this.searchTerm = suggestion;
         DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
             (res: SolrResponse) => this.dataHandler(res),
-            (error: any) => this.errorHandler(error),
+            (error: string) => this.errorHandler(error),
         );
     }
 
@@ -163,7 +163,7 @@ export default class SearchViewComponent extends Vue {
             if (facetCategory.buckets) {
                 const facetItems: Array<FacetItem> = facetCategory.buckets;
 
-                let facetValues = facetItems.map((facetItem, index) => {
+                let facetValues = facetItems.map((facetItem) => {
                     let rObj: FacetItem;
                     if (filterItem?.val == facetItem.val) {
                         rObj = filterItem;
@@ -189,7 +189,7 @@ export default class SearchViewComponent extends Vue {
         }
     }
 
-    private errorHandler(err: any): void {
+    private errorHandler(err: string): void {
         this.error = err;
         // this.loading = false;
     }
@@ -206,7 +206,7 @@ export default class SearchViewComponent extends Vue {
 
             DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
                 (res: SolrResponse) => this.dataHandler(res, facetItem),
-                (error: any) => this.errorHandler(error),
+                (error: string) => this.errorHandler(error),
             );
             // alert(this.activeFilterCategories[filter.Category]);
             // var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
@@ -268,7 +268,7 @@ export default class SearchViewComponent extends Vue {
                     if (facetCategory.buckets) {
                         const facetItems: Array<FacetItem> = facetCategory.buckets;
 
-                        const facetValues = facetItems.map((facetItem, index) => {
+                        const facetValues = facetItems.map((facetItem) => {
                             let rObj: FacetItem;
                             if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
                                 // console.log(facetValue + " is included")
@@ -290,7 +290,7 @@ export default class SearchViewComponent extends Vue {
                     }
                 }
             },
-            (error: any) => this.errorHandler(error),
+            (error: string) => this.errorHandler(error),
         );
     }
 }

vue.config.js

@@ -1,4 +1,7 @@
+/* eslint @typescript-eslint/no-var-requires: "off" */
 const webpack = require("webpack");
+// const { defineConfig } = require("@vue/cli-service");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 
 module.exports = {
     publicPath: "/",
@@ -21,9 +24,9 @@ module.exports = {
             title: "TETHYS - Research Data Repository",
         },
     },
-    devServer: {
-        disableHostCheck: true,
-    },
+    // devServer: {
+    //     disableHostCheck: true,
+    // },
     configureWebpack: {
         plugins: [
             new webpack.DefinePlugin({
@@ -31,6 +34,7 @@ module.exports = {
                 SOLR_HOST: JSON.stringify(process.env.SOLR_HOST),
                 SOLR_CORE: JSON.stringify(process.env.SOLR_CORE),
             }),
+            new NodePolyfillPlugin(),
         ],
     },
 };