feat: migrating to Vue3 (#280)

* feat: migrating to Vue3

* fix:  removing unnecessary code from Vite config

* fix:  removing unnecessary css style

* fix:  adding folder browser to test case

* fix: proxy objects

---------

Co-authored-by: Vered Constantin1 <[email protected]>

Author: nprijic

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     node: true,
     jest: true,
     es6: true,
+    es2020: true,
   },
   rules: {
     "eslint-comments/require-description": ["error", { ignore: [] }],
@@ -19,7 +20,7 @@ module.exports = {
       parserOptions: {
         // The `ecmaVersion` should align to the supported features of our target runtimes (browsers / nodejs / others)
         // Consult with: https://kangax.github.io/compat-table/es2016plus/
-        ecmaVersion: 2017,
+        ecmaVersion: 2020,
       },
     },
     {
@@ -30,7 +31,7 @@ module.exports = {
         sourceType: "module",
         // The `ecmaVersion` should align to the supported features of our target runtimes (browsers / nodejs / others)
         // Consult with: https://kangax.github.io/compat-table/es2016plus/
-        ecmaVersion: 2018,
+        ecmaVersion: 2020,
       },
     },
     {

.github/workflows/ci.yml

@@ -15,10 +15,7 @@ jobs:
     strategy:
       matrix:
         node_version:
-          - 14.x
-          # Build fails on node versions 16 and 18  
-          # - 16.x
-          # - 18.x
+          - 20.x
       # https://stackoverflow.com/questions/61070925/github-actions-disable-auto-cancel-when-job-fails
       fail-fast: false
 

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
           cache: 'yarn'
 

examples/vscode-snippet-contrib/src/configHelper.ts

@@ -13,7 +13,7 @@ export class ConfigHelper {
     }
     try {
       return _.merge(parse(content), ConfigHelper.getDefaultContent());
-    } catch (e) {
+    } catch (e: any) {
       vscode.window.showErrorMessage(e.message);
       return Promise.reject();
     }

examples/vscode-snippet-contrib/src/extension.ts

@@ -142,6 +142,23 @@ function createCodeSnippetQuestions(): any[] {
       default: "",
       message: "Program",
     },
+    {
+      guiOptions: {
+        hint: "Select the folder you want to run.",
+        type: "folder-browser",
+        link: {
+          text: "Open Settings",
+          command: {
+            id: "workbench.action.openSettings",
+            params: ["Typescript.Format"],
+          },
+        },
+      },
+      type: "input",
+      name: "folder",
+      default: "",
+      message: "Select folder",
+    },
     {
       type: "input",
       guiOptions: {

package.json

@@ -34,8 +34,8 @@
     "@commitlint/config-conventional": "11.0.0",
     "@types/chai": "4.2.16",
     "@types/mocha": "7.0.2",
-    "@typescript-eslint/eslint-plugin": "4.15.0",
-    "@typescript-eslint/parser": "4.20.0",
+    "@typescript-eslint/eslint-plugin": "5.28.0",
+    "@typescript-eslint/parser": "5.28.0",
     "chai": "4.3.4",
     "coveralls": "2.11.16",
     "cz-conventional-changelog": "3.3.0",
@@ -53,7 +53,7 @@
     "prettier": "2.2.1",
     "rimraf": "3.0.2",
     "shx": "0.3.3",
-    "typescript": "^3.9.7"
+    "typescript": "~4.5.0"
   },
   "husky": {
     "hooks": {

packages/backend/package.json

@@ -121,7 +121,8 @@
     "lodash": "4.17.21",
     "strip-ansi": "6.0.0",
     "ws": "7.4.4",
-    "yeoman-environment": "2.10.3"
+    "yeoman-environment": "2.10.3",
+    "jsdom": "23.2.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.4",
@@ -136,7 +137,7 @@
     "ts-loader": "^8.0.14",
     "ts-node": "^9.1.1",
     "vsce": "^1.73.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack": "^5.89.0",
+    "webpack-cli": "5.1.4"
   }
 }

packages/backend/src/extension.ts

@@ -16,7 +16,7 @@ export function activate(context: vscode.ExtensionContext): void {
   try {
     createExtensionLoggerAndSubscribeToLogSettingsChanges(context);
     SWA.createSWATracker(getLogger());
-  } catch (error) {
+  } catch (error: any) {
     console.error(
       "Extension activation failed due to Logger configuration failure:",
       error.message

packages/backend/src/panels/AbstractWebviewPanel.ts

@@ -5,6 +5,7 @@ import * as fsextra from "fs-extra";
 import { IChildLogger } from "@vscode-logging/logger";
 import { getClassLogger } from "../logger/logger-wrapper";
 import { createFlowPromise, FlowPromise } from "../utils";
+import { JSDOM } from "jsdom";
 
 export abstract class AbstractWebviewPanel {
   public viewType: string;
@@ -147,20 +148,26 @@ export abstract class AbstractWebviewPanel {
         scriptPathOnDisk
       );
 
-      // TODO: very fragile: assuming double quotes and src is first attribute
-      // specifically, doesn't work when building vue for development (vue-cli-service build --mode development)
-      indexHtml = indexHtml.replace(
-        /<link href=/g,
-        `<link href=${scriptUri.toString()}`
-      );
-      indexHtml = indexHtml.replace(
-        /<script src=/g,
-        `<script src=${scriptUri.toString()}`
-      );
-      indexHtml = indexHtml.replace(
-        /<img src=/g,
-        `<img src=${scriptUri.toString()}`
-      );
+      const baseUrl = scriptUri.toString();
+      const dom = new JSDOM(indexHtml);
+      const { document } = dom.window;
+
+      function replaceAttributePaths(elements: any, attributeName: string) {
+        elements.forEach((element: any) => {
+          const currentAttr = element.getAttribute(attributeName);
+          if (currentAttr) {
+            element.setAttribute(attributeName, `${baseUrl}/${currentAttr}`);
+          }
+        });
+      }
+
+      const srcElements = document.querySelectorAll("[src]");
+      const hrefElements = document.querySelectorAll("[href]");
+
+      replaceAttributePaths(srcElements, "src");
+      replaceAttributePaths(hrefElements, "href");
+
+      indexHtml = dom.serialize();
     }
     this.webViewPanel.webview.html = indexHtml;
   }

packages/backend/src/swa-tracker/swa-tracker-wrapper.ts

@@ -79,7 +79,7 @@ export class SWA {
           `SAP Web Analytics tracker was created for ${SWA.CODE_SNIPPET}`
         );
       }
-    } catch (error) {
+    } catch (error: any) {
       logger.error(error);
     }
   }
@@ -106,7 +106,7 @@ export class SWA {
           );
         }
       }
-    } catch (error) {
+    } catch (error: any) {
       logger.error(error);
     }
   }
@@ -144,7 +144,7 @@ export class SWA {
           });
         }
       }
-    } catch (error) {
+    } catch (error: any) {
       logger.error(error);
     }
   }