Vue3

.eslintrc.js

@@ -1,149 +1,202 @@
 module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true,
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
   },
-  globals: { NodeJS: true, Timer: true },
-  extends: [
-    'standard',
-    'eslint:recommended',
-    '@nuxtjs/eslint-config-typescript',
-    'plugin:cypress/recommended',
+  "globals": {
+    "NodeJS": true,
+    "Timer": true
+  },
+  "extends": [
+    "standard",
+    "eslint:recommended",
+    "@nuxtjs/eslint-config-typescript",
+    "plugin:cypress/recommended"
   ],
-  // add your custom rules here
-  rules: {
-    'dot-notation': 'off',
-    'generator-star-spacing': 'off',
-    'guard-for-in': 'off',
-    'linebreak-style': 'off',
-    'new-cap': 'off',
-    'no-empty': 'off',
-    'no-extra-boolean-cast': 'off',
-    'no-new': 'off',
-    'no-plusplus': 'off',
-    'no-useless-escape': 'off',
-    'nuxt/no-cjs-in-config': 'off',
-    'semi-spacing': 'off',
-    'space-in-parens': 'off',
-    strict: 'off',
-    'unicorn/no-new-buffer': 'off',
-    'vue/html-self-closing': 'off',
-    'vue/no-unused-components': 'warn',
-    'vue/no-v-html': 'error',
-    'wrap-iife': 'off',
-
-    'array-bracket-spacing': 'warn',
-    'arrow-parens': 'off',
-    'arrow-spacing': ['warn', { before: true, after: true }],
-    'block-spacing': ['warn', 'always'],
-    'brace-style': ['warn', '1tbs'],
-    'comma-dangle': ['warn', 'only-multiline'],
-    'comma-spacing': 'warn',
-    curly: 'warn',
-    eqeqeq: 'warn',
-    'func-call-spacing': ['warn', 'never'],
-    'implicit-arrow-linebreak': 'warn',
-    'keyword-spacing': 'warn',
-    'lines-between-class-members': [
-      'warn',
-      'always',
-      { exceptAfterSingleLine: true },
-    ],
-    'multiline-ternary': ['warn', 'never'],
-    'newline-per-chained-call': ['warn', { ignoreChainWithDepth: 4 }],
-    'no-caller': 'warn',
-    'no-cond-assign': ['warn', 'except-parens'],
-    'no-console': 'warn',
-    'no-debugger': 'warn',
-    'no-eq-null': 'warn',
-    'no-eval': 'warn',
-    'no-trailing-spaces': 'warn',
-    'no-undef': 'warn',
-    'no-unused-vars': 'warn',
-    'no-whitespace-before-property': 'warn',
-    'object-curly-spacing': ['warn', 'always'],
-    'object-property-newline': 'warn',
-    'object-shorthand': 'warn',
-    'padded-blocks': ['warn', 'never'],
-    'prefer-arrow-callback': 'warn',
-    'prefer-template': 'warn',
-    'quote-props': 'warn',
-    'rest-spread-spacing': 'warn',
-    semi: ['warn', 'always'],
-    'space-before-function-paren': 'off',
-    'space-infix-ops': 'warn',
-    'spaced-comment': 'warn',
-    'switch-colon-spacing': 'warn',
-    'yield-star-spacing': ['warn', 'both'],
-
-    'padding-line-between-statements': [
-      'warn',
+  "rules": {
+    "dot-notation": "off",
+    "generator-star-spacing": "off",
+    "guard-for-in": "off",
+    "linebreak-style": "off",
+    "new-cap": "off",
+    "no-empty": "off",
+    "no-extra-boolean-cast": "off",
+    "no-new": "off",
+    "no-plusplus": "off",
+    "no-useless-escape": "off",
+    "nuxt/no-cjs-in-config": "off",
+    "semi-spacing": "off",
+    "space-in-parens": "off",
+    "strict": "off",
+    "unicorn/no-new-buffer": "off",
+    "vue/html-self-closing": "off",
+    "vue/no-unused-components": "warn",
+    "vue/no-v-html": "error",
+    "wrap-iife": "off",
+    "array-bracket-spacing": "warn",
+    "arrow-parens": "off",
+    "arrow-spacing": [
+      "warn",
       {
-        blankLine: 'always',
-        prev: '*',
-        next: 'return',
-      },
+        "before": true,
+        "after": true
+      }
+    ],
+    "block-spacing": [
+      "warn",
+      "always"
+    ],
+    "brace-style": [
+      "warn",
+      "1tbs"
+    ],
+    "comma-dangle": [
+      "warn",
+      "only-multiline"
+    ],
+    "comma-spacing": "warn",
+    "curly": "warn",
+    "eqeqeq": "warn",
+    "func-call-spacing": [
+      "warn",
+      "never"
+    ],
+    "implicit-arrow-linebreak": "warn",
+    "keyword-spacing": "warn",
+    "lines-between-class-members": [
+      "warn",
+      "always",
+      {
+        "exceptAfterSingleLine": true
+      }
+    ],
+    "multiline-ternary": [
+      "warn",
+      "never"
+    ],
+    "newline-per-chained-call": [
+      "warn",
+      {
+        "ignoreChainWithDepth": 4
+      }
+    ],
+    "no-caller": "warn",
+    "no-cond-assign": [
+      "warn",
+      "except-parens"
+    ],
+    "no-console": "warn",
+    "no-debugger": "warn",
+    "no-eq-null": "warn",
+    "no-eval": "warn",
+    "no-trailing-spaces": "warn",
+    "no-undef": "warn",
+    "no-unused-vars": "warn",
+    "no-whitespace-before-property": "warn",
+    "object-curly-spacing": [
+      "warn",
+      "always"
+    ],
+    "object-property-newline": "warn",
+    "object-shorthand": "warn",
+    "padded-blocks": [
+      "warn",
+      "never"
+    ],
+    "prefer-arrow-callback": "warn",
+    "prefer-template": "warn",
+    "quote-props": "warn",
+    "rest-spread-spacing": "warn",
+    "semi": [
+      "warn",
+      "always"
+    ],
+    "space-before-function-paren": "off",
+    "space-infix-ops": "warn",
+    "spaced-comment": "warn",
+    "switch-colon-spacing": "warn",
+    "yield-star-spacing": [
+      "warn",
+      "both"
+    ],
+    "padding-line-between-statements": [
+      "warn",
       {
-        blankLine: 'always',
-        prev: 'function',
-        next: 'function',
+        "blankLine": "always",
+        "prev": "*",
+        "next": "return"
       },
-      // This configuration would require blank lines after every sequence of variable declarations
       {
-        blankLine: 'always',
-        prev: ['const', 'let', 'var'],
-        next: '*',
+        "blankLine": "always",
+        "prev": "function",
+        "next": "function"
       },
       {
-        blankLine: 'any',
-        prev: ['const', 'let', 'var'],
-        next: ['const', 'let', 'var'],
+        "blankLine": "always",
+        "prev": [
+          "const",
+          "let",
+          "var"
+        ],
+        "next": "*"
       },
+      {
+        "blankLine": "any",
+        "prev": [
+          "const",
+          "let",
+          "var"
+        ],
+        "next": [
+          "const",
+          "let",
+          "var"
+        ]
+      }
     ],
-
-    quotes: [
-      'warn',
-      'single',
+    "quotes": [
+      "warn",
+      "single",
       {
-        avoidEscape: true,
-        allowTemplateLiterals: true,
-      },
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
     ],
-
-    'space-unary-ops': [
-      'warn',
+    "space-unary-ops": [
+      "warn",
       {
-        words: true,
-        nonwords: false,
-      },
+        "words": true,
+        "nonwords": false
+      }
     ],
-
-    // incompatible with prettier
-    'key-spacing': 'off',
-    'object-curly-newline': 'off',
-    indent: 'off',
-    'vue/html-indent': 'off',
-
-    // FIXME: The following is disabled due to new linter and old JS code. These should all be enabled and underlying issues fixed
-    'vue/order-in-components': 'off',
-    'vue/no-lone-template': 'off',
-    'vue/v-slot-style': 'off',
-    'vue/component-tags-order': 'off',
-    'vue/no-mutating-props': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    'array-callback-return': 'off',
+    "key-spacing": "off",
+    "object-curly-newline": "off",
+    "indent": "off",
+    "vue/html-indent": "off",
+    "vue/order-in-components": "off",
+    "vue/no-lone-template": "off",
+    "vue/v-slot-style": "off",
+    "vue/component-tags-order": "off",
+    "vue/no-mutating-props": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "array-callback-return": "off",
+    "vue/one-component-per-file": "off",
+    "vue/no-deprecated-slot-attribute": "off",
+    "vue/require-explicit-emits": "off",
+    "vue/v-on-event-hyphenation": "off"
   },
-  overrides: [
+  "overrides": [
     {
-      files: ['*.js'],
-      rules: {
-        // FIXME: The following is disabled due to new linter and old JS code. These should all be enabled and underlying issues fixed
-        'prefer-regex-literals': 'off',
-        'vue/component-definition-name-casing': 'off',
-        'no-unreachable-loop': 'off',
-        'computed-property-spacing': 'off',
-      },
-    },
-  ],
-};
+      "files": [
+        "*.js"
+      ],
+      "rules": {
+        "prefer-regex-literals": "off",
+        "vue/component-definition-name-casing": "off",
+        "no-unreachable-loop": "off",
+        "computed-property-spacing": "off"
+      }
+    }
+  ]
+}

.github/workflows/build-extension.yml

@@ -49,15 +49,15 @@ jobs:
       - name: Setup Nodejs and npm
         uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '20'
 
       - name: Setup yarn
         run: npm install -g yarn
 
       - name: Setup Nodejs with yarn caching
         uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '20'
           cache: yarn
           node-version-file: package.json
 

README.md

@@ -60,7 +60,7 @@ Profit!
 
 ## Requirements
 
-The extensions and the Rancher Dashboard code are currently built with Node 16.
+The extensions and the Rancher Dashboard code are currently built with Node 20.
 
 We recommend managing node versions with [nvm](https://github.com/nvm-sh/nvm).
 
@@ -70,10 +70,10 @@ cd # project directory
 nvm install $(cat package.json | grep '\"node\": ' | grep -o '[0-9.]*')
 ```
 
-When using nvm, you can use the following command to switch to the correct node version:
+When using nvm, you can use the following command to switch to the correct Node version:
 
 ```sh
-  nvm use 16
+  nvm use 20
 ```
 
 <!-- verify if we actually need this.
@@ -106,7 +106,7 @@ You may encounter an error that appears like the following:
   code: 'ERR_OSSL_EVP_UNSUPPORTED' }
 ```
 
-If so, make sure you are using node 16. Those with NVM can use the following command to switch to node 16: `nvm use 16`.
+If so, make sure you are using Node 20. Those with NVM can use the following command to switch to Node 20: `nvm use 20`.
 
 ## Misc