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

packages/backend/test/code-snippet.spec.ts

@@ -557,7 +557,7 @@ describe("codeSnippet unit test", () => {
           "question1",
           "method1"
         );
-      } catch (e) {
+      } catch (e: any) {
         expect(e.stack).to.contain("method1");
       }
     });

packages/backend/webpack.config.js

@@ -18,9 +18,8 @@ const config = {
     vscode: "commonjs vscode", // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
   },
   resolve: {
-    modules: ["node_modules"],
-    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
     extensions: [".ts", ".js"],
+    alias: {},
   },
   module: {
     rules: [
@@ -30,10 +29,14 @@ const config = {
         use: [
           {
             loader: "ts-loader",
+            options: {},
           },
         ],
       },
     ],
   },
+  optimization: {},
+  plugins: [],
 };
+
 module.exports = config;

packages/frontend/babel.config.js

@@ -1,8 +1,7 @@
 module.exports = {
-  presets: ["@vue/app", ["@babel/preset-env", { modules: false }]],
-  env: {
-    test: {
-      presets: [["@babel/preset-env", { targets: { node: "current" } }]],
-    },
-  },
+  presets: ["@babel/preset-env", "@babel/preset-typescript"],
+  plugins: [
+    "@babel/plugin-transform-modules-commonjs",
+    "@babel/plugin-transform-runtime",
+  ],
 };

packages/frontend/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+        <title>Code-snippet</title>
+    </head>
+    <body  >
+        <div id="app"></div>
+        <script type="module" src="/src/main.js"></script>
+    </body>
+</html>

packages/frontend/jest.config.js

@@ -2,31 +2,36 @@ module.exports = {
   verbose: true,
   testRegex: "(/test/(.*).(test|spec)).[jt]sx?$",
   collectCoverage: true,
+  coverageProvider: "v8",
   collectCoverageFrom: [
     "src/**/*.{js,vue}",
     "!**/node_modules/**",
     "!<rootDir>/src/main.js",
+    "!<rootDir>/src/assets/**",
     "!<rootDir>/src/plugins/**",
   ],
-  coverageReporters: ["lcov", "html", "text-summary"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
   moduleFileExtensions: ["js", "vue", "json"],
-  transformIgnorePatterns: ["<rootDir>/node_modules/(?!(@sap-devx)/)"],
+  transformIgnorePatterns: ["<rootDir>/node_modules/(?!(.+)/)"],
   modulePaths: ["<rootDir>/src", "<rootDir>/node_modules"],
   transform: {
-    ".*\\.(vue)$": "vue-jest",
-    "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
-      "jest-transform-stub",
+    "^.+\\.vue$": "@vue/vue3-jest",
     "^.+\\.tsx?$": "ts-jest",
-    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+    "^.+\\.js$": "babel-jest",
+    "^.+\\.jsx?$": "babel-jest",
+  },
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
   },
-  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
+  testEnvironment: "jsdom",
   coverageThreshold: {
     global: {
-      branches: 85,
-      functions: 96.9,
-      lines: 95.5,
-      statements: 95.5,
+      branches: 89,
+      functions: 78,
+      lines: 89,
+      statements: 89,
     },
   },
 };