Merge pull request #1040 from AndrewBastin/feat/js-linting

Basic linting for JS code

components/ui/js-editor.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="show-if-initialized" :class="{ initialized }">
+    <pre ref="editor"></pre>
+  </div>
+</template>
+
+<style lang="scss">
+.show-if-initialized {
+  opacity: 0;
+
+  &.initialized {
+    opacity: 1;
+  }
+
+  & > * {
+    transition: none;
+  }
+}
+</style>
+
+<script>
+const DEFAULT_THEME = "twilight"
+
+import ace from "ace-builds"
+import "ace-builds/webpack-resolver"
+import jsonParse from "~/helpers/jsonParse"
+import debounce from "~/helpers/utils/debounce"
+
+import * as esprima from "esprima"
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    theme: {
+      type: String,
+      required: false,
+    },
+    options: {
+      type: Object,
+      default: {},
+    },
+  },
+
+  data() {
+    return {
+      initialized: false,
+      editor: null,
+      cacheValue: "",
+    }
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.cacheValue) {
+        this.editor.session.setValue(value, 1)
+        this.cacheValue = value
+        if (this.lint) this.provideLinting(value)
+      }
+    },
+    theme() {
+      this.initialized = false
+      this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+        this.$nextTick().then(() => {
+          this.initialized = true
+        })
+      })
+    },
+    options(value) {
+      this.editor.setOptions(value)
+    },
+  },
+
+  mounted() {
+    const editor = ace.edit(this.$refs.editor, {
+      mode: `ace/mode/javascript`,
+      ...this.options,
+    })
+
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true
+      })
+    })
+
+    if (this.value) editor.setValue(this.value, 1)
+
+    this.editor = editor
+    this.cacheValue = this.value
+
+    editor.on("change", () => {
+      const content = editor.getValue()
+      this.$emit("input", content)
+      this.cacheValue = content
+      this.provideLinting(content)
+    })
+
+    this.provideLinting(this.value)
+  },
+
+  methods: {
+    defineTheme() {
+      if (this.theme) {
+        return this.theme
+      }
+      return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+    },
+
+    provideLinting: debounce(function (code) {
+      try {
+        const res = esprima.parseScript(code, { tolerant: true })
+        if (res.errors && res.errors.length > 0) {
+          this.editor.session.setAnnotations(
+            res.errors.map((err) => {
+              const pos = this.editor.session.getDocument().indexToPosition(err.index, 0)
+
+              return {
+                row: pos.row,
+                column: pos.column,
+                text: err.description,
+                type: "error",
+              }
+            })
+          )
+        }
+      } catch (e) {
+        const pos = this.editor.session.getDocument().indexToPosition(e.index, 0)
+        this.editor.session.setAnnotations([
+          {
+            row: pos.row,
+            column: pos.column,
+            text: e.description,
+            type: "error",
+          },
+        ])
+      }
+    }, 2000),
+  },
+
+  destroyed() {
+    this.editor.destroy()
+  },
+}
+</script>

helpers/preRequest.js

@@ -1,20 +1,22 @@
 export default function getEnvironmentVariablesFromScript(script) {
   let _variables = {}
 
-  // the pw object is the proxy by which pre-request scripts can pass variables to the request.
-  // for security and control purposes, this is the only way a pre-request script should modify variables.
-  let pw = {
-    environment: {
-      set: (key, value) => (_variables[key] = value),
-    },
-    env: {
-      set: (key, value) => (_variables[key] = value),
-    },
-    // globals that the script is allowed to have access to.
-  }
+  try {
+    // the pw object is the proxy by which pre-request scripts can pass variables to the request.
+    // for security and control purposes, this is the only way a pre-request script should modify variables.
+    let pw = {
+      environment: {
+        set: (key, value) => (_variables[key] = value),
+      },
+      env: {
+        set: (key, value) => (_variables[key] = value),
+      },
+      // globals that the script is allowed to have access to.
+    }
 
-  // run pre-request script within this function so that it has access to the pw object.
-  new Function("pw", script)(pw)
+    // run pre-request script within this function so that it has access to the pw object.
+    new Function("pw", script)(pw)
+  } catch (_e) {}
 
   return _variables
 }

package.json

@@ -37,6 +37,7 @@
     "@nuxtjs/toast": "^3.3.1",
     "ace-builds": "^1.4.12",
     "firebase": "^7.17.1",
+    "esprima": "^4.0.1",
     "graphql": "^15.3.0",
     "graphql-language-service-interface": "^2.4.0",
     "nuxt": "^2.12.2",

pages/index.vue

@@ -821,9 +821,8 @@
                         </a>
                       </div>
                     </div>
-                    <Editor
+                    <JSEditor
                       v-model="preRequestScript"
-                      :lang="'javascript'"
                       :options="{
                         maxLines: '16',
                         minLines: '8',
@@ -867,9 +866,8 @@
                         </a>
                       </div>
                     </div>
-                    <Editor
+                    <JSEditor
                       v-model="testScript"
-                      :lang="'javascript'"
                       :options="{
                         maxLines: '16',
                         minLines: '8',
@@ -1254,6 +1252,7 @@ import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
 import runTestScriptWithVariables from "~/helpers/postwomanTesting"
 import parseTemplateString from "~/helpers/templating"
 import AceEditor from "~/components/ui/ace-editor"
+import JSEditor from "~/components/ui/js-editor"
 import { tokenRequest, oauthRedirect } from "~/assets/js/oauth"
 import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
 import { fb } from "~/helpers/fb"
@@ -1322,6 +1321,7 @@ export default {
     collections: () => import("~/components/collections"),
     saveRequestAs: () => import("~/components/collections/saveRequestAs"),
     Editor: AceEditor,
+    JSEditor: JSEditor,
     environments: () => import("~/components/environments"),
     inputform: () => import("~/components/firebase/inputform"),
     notes: () => import("~/components/firebase/feeds"),