Merge branch 'main' into teams

README.md

@@ -548,6 +548,16 @@ Become a financial contributor and help us sustain our community [[Support](#sup
 
 #### GitHub Sponsors
 
+<p align="center">
+<a href="https://simplescraper.io/?utm_source=hs" target="_blank" rel="noopener">
+<img
+  width="100"
+	src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/assets/images/Simplescraper.png"
+	alt="Simplescraper"
+/>
+</a>
+</p>
+
 <p align="center">
 <a href="https://github.com/eldadfux" target="_blank" rel="noopener">
 <img

components/app/Contributors.vue

@@ -116,6 +116,15 @@
           />
         </a>
       </div>
+      <div class="contributors">
+        <a href="https://simplescraper.io/?utm_source=hs" target="_blank" rel="noopener">
+          <img
+            style="max-height: 50px"
+            src="~assets/images/Simplescraper_dark.png"
+            alt="Simplescraper"
+          />
+        </a>
+      </div>
       <div class="contributors">
         <a href="https://tyk.io?ref=hoppscotch" target="_blank" rel="noopener">
           <img

components/app/Footer.vue

@@ -5,7 +5,6 @@
         <a class="footer-link" href="https://www.netlify.com" target="_blank" rel="noopener">
           Powered by Netlify
         </a>
-        <span class="footer-link"> Sponsored by </span>
         <span>
           <a
             class="footer-link"
@@ -15,9 +14,6 @@
           >
             OSS Capital
           </a>
-        </span>
-        <span class="footer-link"> & </span>
-        <span>
           <a
             class="footer-link"
             href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
@@ -26,6 +22,14 @@
           >
             Paw
           </a>
+          <a
+            class="footer-link"
+            href="https://simplescraper.io/?utm_source=hs"
+            target="_blank"
+            rel="noopener"
+          >
+            Simplescraper
+          </a>
         </span>
         <iframe
           src="https://ghbtns.com/github-btn.html?user=hoppscotch&type=sponsor"
@@ -70,6 +74,7 @@
   @apply my-2;
   @apply mx-4;
   @apply text-fgLightColor;
+  @apply text-sm;
 
   &:hover {
     @apply text-fgColor;

components/http/CodegenModal.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div slot="body" class="flex flex-col">
-      <label for="requestType">{{ $t("request_type") }}</label>
+      <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
         <v-popover>
           <pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
@@ -46,15 +46,22 @@
           </button>
         </div>
       </div>
-      <textarea
+      <SmartAceEditor
-        id="generatedCode"
+        v-if="requestType"
+        :value="requestCode"
+        :lang="codegens.find((x) => x.id === requestType).language"
+        :options="{
+          maxLines: '10',
+          minLines: '10',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+        styles="rounded-b-lg"
         ref="generatedCode"
-        name="generatedCode"
+      />
-        rows="8"
-        v-model="requestCode"
-        readonly
-        class="rounded-b-lg"
-      ></textarea>
     </div>
   </SmartModal>
 </template>
@@ -66,7 +73,7 @@ export default {
   props: {
     show: Boolean,
     requestCode: String,
-    requestTypeProp: { type: String, default: "" },
+    requestTypeProp: { type: String, default: "curl" },
   },
   data() {
     return {
@@ -97,7 +104,8 @@ export default {
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
-      this.$refs.generatedCode.select()
+      this.$refs.generatedCode.editor.selectAll()
+      this.$refs.generatedCode.editor.focus()
       document.execCommand("copy")
       setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
     },

helpers/codegen/codegen.js

@@ -25,6 +25,8 @@ import { ShellWgetCodegen } from "./generators/shell-wget"
  *
  * id: string
  * name: string
+ * language: string // a string identifier used in ace editor for syntax highlighting
+ *                  // see node_modules/ace-builds/src-noconflict/mode-** files for valid value
  * generator: (ctx) => string
  *
  */

helpers/codegen/generators/c-libcurl.js

@@ -1,6 +1,7 @@
 export const CLibcurlCodegen = {
   id: "c-libcurl",
   name: "C libcurl",
+  language: "c_cpp",
   generator: ({
     auth,
     httpUser,

helpers/codegen/generators/cs-restsharp.js

@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const CsRestsharpCodegen = {
   id: "cs-restsharp",
   name: "C# RestSharp",
+  language: "csharp",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/curl.js

@@ -1,6 +1,7 @@
 export const CurlCodegen = {
   id: "curl",
   name: "cURL",
+  language: "sh",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/go-native.js

@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const GoNativeCodegen = {
   id: "go-native",
   name: "Go Native",
+  language: "golang",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/java-okhttp.js

@@ -1,6 +1,7 @@
 export const JavaOkhttpCodegen = {
   id: "java-okhttp",
   name: "Java OkHttp",
+  language: "java",
   generator: ({
     auth,
     httpUser,

helpers/codegen/generators/java-unirest.js

@@ -1,6 +1,7 @@
 export const JavaUnirestCodegen = {
   id: "java-unirest",
   name: "Java Unirest",
+  language: "java",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/javascript-fetch.js

@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const JavascriptFetchCodegen = {
   id: "js-fetch",
   name: "JavaScript Fetch",
+  language: "javascript",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/javascript-jquery.js

@@ -1,6 +1,7 @@
 export const JavascriptJqueryCodegen = {
   id: "js-jquery",
   name: "JavaScript jQuery",
+  language: "javascript",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/javascript-xhr.js

@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const JavascriptXhrCodegen = {
   id: "js-xhr",
   name: "JavaScript XHR",
+  language: "javascript",
   generator: ({
     auth,
     httpUser,

helpers/codegen/generators/nodejs-axios.js

@@ -1,6 +1,7 @@
 export const NodejsAxiosCodegen = {
   id: "nodejs-axios",
   name: "NodeJs Axios",
+  language: "javascript",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/nodejs-native.js

@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsNativeCodegen = {
   id: "nodejs-native",
   name: "NodeJs Native",
+  language: "javascript",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/nodejs-request.js

@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsRequestCodegen = {
   id: "nodejs-request",
   name: "NodeJs Request",
+  language: "javascript",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/nodejs-unirest.js

@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsUnirestCodegen = {
   id: "nodejs-unirest",
   name: "NodeJs Unirest",
+  language: "javascript",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/php-curl.js

@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const PhpCurlCodegen = {
   id: "php-curl",
   name: "PHP cURL",
+  language: "php",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/powershell-restmethod.js

@@ -1,6 +1,7 @@
 export const PowershellRestmethodCodegen = {
   id: "powershell-restmethod",
   name: "PowerShell RestMethod",
+  language: "powershell",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/python-http-client.js

@@ -11,6 +11,7 @@ const printHeaders = (headers) => {
 export const PythonHttpClientCodegen = {
   id: "python-http-client",
   name: "Python http.client",
+  language: "python",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/python-requests.js

@@ -11,6 +11,7 @@ const printHeaders = (headers) => {
 export const PythonRequestsCodegen = {
   id: "python-requests",
   name: "Python Requests",
+  language: "python",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/ruby-net-http.js

@@ -1,6 +1,7 @@
 export const RubyNetHttpCodeGen = {
   id: "ruby-net-http",
   name: "Ruby Net::HTTP",
+  language: "ruby",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/salesforce-apex.js

@@ -1,6 +1,7 @@
 export const SalesforceApexCodegen = {
   id: "salesforce-apex",
   name: "Salesforce Apex",
+  language: "apex",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/shell-httpie.js

@@ -1,6 +1,7 @@
 export const ShellHttpieCodegen = {
   id: "shell-httpie",
   name: "Shell HTTPie",
+  language: "sh",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/shell-wget.js

@@ -1,6 +1,7 @@
 export const ShellWgetCodegen = {
   id: "shell-wget",
   name: "Shell wget",
+  language: "sh",
   generator: ({
     url,
     pathName,

nuxt.config.js

@@ -203,7 +203,6 @@ export default {
 
   // TailwindCSS module configuration (https://github.com/nuxt-community/tailwindcss-module)
   tailwindcss: {
-    jit: true,
     viewer: false,
   },
 

package.json

@@ -27,19 +27,19 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/toast": "^3.3.1",
     "ace-builds": "^1.4.12",
-    "acorn": "^8.2.1",
+    "acorn": "^8.2.4",
     "acorn-walk": "^8.1.0",
     "esprima": "^4.0.1",
-    "firebase": "^8.4.2",
+    "firebase": "^8.5.0",
     "graphql": "^15.5.0",
     "graphql-language-service-interface": "^2.8.3",
     "lodash": "^4.17.20",
     "mustache": "^4.2.0",
-    "nuxt": "^2.15.4",
+    "nuxt": "^2.15.5",
-    "nuxt-i18n": "^6.26.0",
+    "nuxt-i18n": "^6.27.0",
     "paho-mqtt": "^1.1.0",
-    "rxjs": "^6.6.7",
+    "rxjs": "^7.0.0",
-    "socket.io-client": "^4.0.1",
+    "socket.io-client": "^4.0.2",
     "socketio-wildcard": "^2.0.0",
     "tern": "^0.24.3",
     "v-tooltip": "^2.1.3",
@@ -51,35 +51,32 @@
     "yargs-parser": "^20.2.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.16",
+    "@babel/core": "^7.14.0",
-    "@babel/plugin-proposal-class-properties": "^7.12.13",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/preset-env": "^7.13.15",
-    "@nuxt/types": "^2.15.4",
+    "@nuxt/types": "^2.15.5",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/color-mode": "^2.0.5",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/pwa": "^3.3.5",
-    "@nuxtjs/tailwindcss": "^4.0.3",
+    "@nuxtjs/tailwindcss": "^4.1.1",
     "@testing-library/jest-dom": "^5.12.0",
     "@types/lodash": "^4.14.168",
-    "@vue/test-utils": "^1.1.4",
+    "@vue/test-utils": "^1.2.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.6.3",
-    "eslint": "^7.25.0",
+    "eslint": "^7.26.0",
     "eslint-plugin-vue": "^7.9.0",
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "jest-serializer-vue": "^2.0.2",
-    "postcss": "^8.2.12",
+    "postcss": "^8.2.14",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "raw-loader": "^4.0.2",
-    "sass": "^1.32.11",
+    "sass": "^1.32.12",
     "sass-loader": "^10.1.1",
-    "ts-jest": "^26.5.5",
+    "ts-jest": "^26.5.6",
     "vue-jest": "^3.0.7",
     "worker-loader": "^3.0.8"
   },

store/state.js

@@ -15,7 +15,7 @@ export default () => ({
     bodyParams: [],
     rawParams: "",
     rawInput: false,
-    requestType: "",
+    requestType: "curl",
     contentType: "",
   },
   gql: {

tailwind.config.js

@@ -8,6 +8,7 @@ import colors from "tailwindcss/colors"
 
 export default {
   dark: "class",
+  mode: "jit",
   corePlugins: {
     float: false,
     clear: false,
@@ -49,13 +50,11 @@ export default {
   },
   variants: {},
   plugins: [],
-  purge: {
+  purge: [
-    content: [
+    "components/**/*.vue",
-      "components/**/*.vue",
+    "layouts/**/*.vue",
-      "layouts/**/*.vue",
+    "pages/**/*.vue",
-      "pages/**/*.vue",
+    "plugins/**/*.js",
-      "plugins/**/*.js",
+    "nuxt.config.js",
-      "nuxt.config.js",
+  ],
-    ],
-  },
 }