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] 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 7525c1c36..ca77e09bc 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 000000000..4bf201939
--- /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>