From b1d3fa3f42ff424f246543c0a24e7ee5296bc208 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 23 Jul 2020 22:51:12 -0400
Subject: [PATCH 1/5] Handled error handling to pre-request script execution

---
 helpers/preRequest.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/helpers/preRequest.js b/helpers/preRequest.js
index dc5ba9a9..6375fece 100644
--- a/helpers/preRequest.js
+++ b/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
 }

From da9e599e8f9f5c704667ddf12f7262abecaf6839 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 24 Jul 2020 00:35:54 -0400
Subject: [PATCH 2/5] Added esprima as dependency

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 88fad4a8..c88e7e05 100644
--- a/package.json
+++ b/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",

From ec99b486052c2045ccfaac9de09c1f87c53c04e4 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 24 Jul 2020 00:38:14 -0400
Subject: [PATCH 3/5] Added JS linting to Ace Editor

---
 components/ui/ace-editor.vue | 37 ++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/components/ui/ace-editor.vue b/components/ui/ace-editor.vue
index ca77e09b..7525c1c3 100644
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -26,6 +26,8 @@ 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: {
@@ -136,6 +138,41 @@ export default {
             },
           ])
         }
+      } else if (this.lang === "javascript") {
+        try {
+          const res = esprima.parseScript(code, { tolerant: true })
+          console.log(res)
+          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)
+
+                console.log({
+                  row: pos.row,
+                  column: pos.column,
+                  text: err.description,
+                  type: "error",
+                })
+                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),
   },

From 3c3e8a6c31d56dc42e37b8816372b61cf7fde702 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sun, 2 Aug 2020 11:47:16 -0400
Subject: [PATCH 4/5] Move JS linting code to separate component

---
 components/ui/ace-editor.vue |  37 ---------
 components/ui/js-editor.vue  | 154 +++++++++++++++++++++++++++++++++++
 2 files changed, 154 insertions(+), 37 deletions(-)
 create mode 100644 components/ui/js-editor.vue

diff --git a/components/ui/ace-editor.vue b/components/ui/ace-editor.vue
index 7525c1c3..ca77e09b 100644
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -26,8 +26,6 @@ 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: {
@@ -138,41 +136,6 @@ export default {
             },
           ])
         }
-      } else if (this.lang === "javascript") {
-        try {
-          const res = esprima.parseScript(code, { tolerant: true })
-          console.log(res)
-          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)
-
-                console.log({
-                  row: pos.row,
-                  column: pos.column,
-                  text: err.description,
-                  type: "error",
-                })
-                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),
   },
diff --git a/components/ui/js-editor.vue b/components/ui/js-editor.vue
new file mode 100644
index 00000000..4bf20193
--- /dev/null
+++ b/components/ui/js-editor.vue
@@ -0,0 +1,154 @@
+<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 })
+        console.log(res)
+        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)
+
+              console.log({
+                row: pos.row,
+                column: pos.column,
+                text: err.description,
+                type: "error",
+              })
+              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>

From 45f1e386cc2909109b2a356b926e9e23b3c37ae5 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sun, 2 Aug 2020 11:47:51 -0400
Subject: [PATCH 5/5] PreReq scripts and Test scripts now use JSEditor

---
 components/ui/js-editor.vue | 7 -------
 pages/index.vue             | 8 ++++----
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/components/ui/js-editor.vue b/components/ui/js-editor.vue
index 4bf20193..f0d488e4 100644
--- a/components/ui/js-editor.vue
+++ b/components/ui/js-editor.vue
@@ -112,18 +112,11 @@ export default {
     provideLinting: debounce(function (code) {
       try {
         const res = esprima.parseScript(code, { tolerant: true })
-        console.log(res)
         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)
 
-              console.log({
-                row: pos.row,
-                column: pos.column,
-                text: err.description,
-                type: "error",
-              })
               return {
                 row: pos.row,
                 column: pos.column,
diff --git a/pages/index.vue b/pages/index.vue
index 971f2085..b1763e18 100644
--- a/pages/index.vue
+++ b/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"),