Fixed ESlint issues with the web-new package

.eslintrc.json

@@ -6,7 +6,8 @@
         "jest": true
     },
     "parserOptions": {
-        "ecmaVersion": 8
+        "ecmaVersion": 2018,
+        "sourceType": "module"
     },
     "extends": ["eslint:recommended", "prettier"],
     "ignorePatterns": ["dist", "node_modules", "bin"]

packages/web-new/package.json

@@ -41,7 +41,7 @@
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
     "@node-wot/td-tools": "0.8.12",

packages/web-new/src/scripts/console.js

@@ -146,7 +146,7 @@ visualizationOptions.forEach(option => {
                         showConsoleError("This function is only allowed for Thing Descriptions!")
                     } else {
                         switch (option.id) {
-                            case "open-api-tab":
+                            case "open-api-tab": {
 
                                 if (fileType === "yaml") {
                                     openApiJsonBtn.disabled = false
@@ -159,8 +159,8 @@ visualizationOptions.forEach(option => {
                                 enableAPIConversionWithProtocol(editorInstance)
 
                                 break;
-
-                            case "async-api-tab":
+                            }
+                            case "async-api-tab": {
                                 if (fileType === "yaml") {
                                     asyncApiJsonBtn.disabled = false
                                     asyncApiYamlBtn.disabled = true
@@ -172,15 +172,15 @@ visualizationOptions.forEach(option => {
                                 enableAPIConversionWithProtocol(editorInstance)
 
                                 break;
-
-                            case "aas-tab":
+                            }
+                            case "aas-tab": {
 
                                 generateAAS(fileType, editorInstance)
                                 AASView.classList.remove("hidden")
 
                                 break;
-
-                            case "defaults-tab":
+                            }
+                            case "defaults-tab": {
                                 if (fileType === "yaml") {
                                     defaultsJsonBtn.disabled = false
                                     defaultsYamlBtn.disabled = true
@@ -194,21 +194,22 @@ visualizationOptions.forEach(option => {
                                 defaultsView.classList.remove("hidden")
 
                                 break;
-
-                            case "visualize-tab":
+                            }
+                            case "visualize-tab": {
                                 visualize(td)
 
                                 break;
-
-                            case "validation-tab":
+                            }
+                            case "validation-tab": {
                                 validationView.classList.remove("hidden")
                                 const editorData = getEditorData(editorInstance)
                                 validate(editorData[1], editorValue)
 
                                 break;
-
-                            default:
+                            }
+                            default: {
                                 break;
+                            }
                         }
 
                     }

packages/web-new/src/scripts/editor.js

@@ -324,7 +324,7 @@ async function initEditor(ideNumber, editorValue, editorLanguage) {
     setFontSize(editorInstance)
   })
 
-  editorInstance.getModel().onDidChangeContent(_ => {
+  editorInstance.getModel().onDidChangeContent(() => {
 
     try {
       const editorValues = getEditorData(editorInstance)

packages/web-new/src/scripts/jsonld-vis.js

@@ -326,7 +326,7 @@ export function jsonldVis(jsonld, selector, config) {
     const nodeEnter = node.enter()
       .append('g')
       .attr('class', 'node')
-      .attr('transform', function (d) { return 'translate(' + source.y0 + ',' + source.x0 + ')'; })
+      .attr('transform', function () { return 'translate(' + source.y0 + ',' + source.x0 + ')'; })
       .on('click', click);
 
     nodeEnter.append('circle')
@@ -389,7 +389,7 @@ export function jsonldVis(jsonld, selector, config) {
     const nodeExit = node.exit().transition()
       .duration(transitionDuration)
       .ease(transitionEase)
-      .attr('transform', function (d) { return 'translate(' + source.y + ',' + source.x + ')'; })
+      .attr('transform', function () { return 'translate(' + source.y + ',' + source.x + ')'; })
       .remove();
 
     nodeExit.select('circle').attr('r', 0);
@@ -400,7 +400,7 @@ export function jsonldVis(jsonld, selector, config) {
 
     link.enter().insert('path', 'g')
       .attr('class', 'link')
-      .attr('d', function (d) {
+      .attr('d', function () {
         const o = { x: source.x0, y: source.y0 };
         return diagonal({ source: o, target: o });
       });
@@ -413,7 +413,7 @@ export function jsonldVis(jsonld, selector, config) {
     link.exit().transition()
       .duration(transitionDuration)
       .ease(transitionEase)
-      .attr('d', function (d) {
+      .attr('d', function () {
         const o = { x: source.x, y: source.y };
         return diagonal({ source: o, target: o });
       })

packages/web-new/src/scripts/save-menu.js

@@ -38,7 +38,7 @@ const downloadBtn = document.querySelector("#download-btn")
 // const saveAsBtn = document.querySelector("#save-as-btn")
 // const saveAsWarning = document.querySelector(".save-warning")
 const saveMenuContainer = document.querySelector(".save-menu__container")
-let fileHandle;
+// let fileHandle;
 openUrlTab.disabled = true
 shareUrlContainer.value = ""
 
@@ -160,6 +160,8 @@ downloadBtn.addEventListener("click", () => {
   openUrlTab.disabled = true
 })
 
+
+//TODO: Uncomment when https is implemented
 /* Save as btn functionality */
 // saveAsBtn.addEventListener("click", () => {
 //   saveAsFile()
@@ -169,13 +171,12 @@ downloadBtn.addEventListener("click", () => {
  * Saves the td as a file in the file system
  * @param {*} content
  */
-async function saveFileInSystem(content) {
-  let stream = await fileHandle.createWritable()
-  await stream.write(content)
-  await stream.close()
-}
+// async function saveFileInSystem(content) {
+//   let stream = await fileHandle.createWritable()
+//   await stream.write(content)
+//   await stream.close()
+// }
 
-//TODO: Uncomment when https is implemented
 /**
  * Opens the file system allows the user to input a file
  * name and save it as json , jsonld or yaml

packages/web-new/tests/test.spec.js

@@ -1007,7 +1007,7 @@ test.describe("OpenAPI view functionality", () => {
         const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: '"openapi": "3.0.3",' }).nth(4)
 
         await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json")
-        await expect(openAPIContainer).toHaveText('\"openapi\": \"3.0.3\",')
+        await expect(openAPIContainer).toHaveText('"openapi": "3.0.3",')
 
         const openAPIJsonBtn = page.locator('#open-api-json')
 
@@ -1160,7 +1160,7 @@ test.describe("OpenAPI view functionality", () => {
         const openAPIContainer = openAPIEditor.getByRole('code').locator('div').filter({ hasText: '"openapi": "3.0.3",' }).nth(4)
 
         await expect(openAPIEditor).toHaveAttribute('data-mode-id', "json")
-        await expect(openAPIContainer).toHaveText('\"openapi\": \"3.0.3\",')
+        await expect(openAPIContainer).toHaveText('"openapi": "3.0.3",')
 
         const openAPIJsonBtn = page.locator('#open-api-json')
         await expect(openAPIJsonBtn).toBeDisabled()