Merge pull request #43 from technikhil314/develop

Develop

components/Toast.vue

@@ -28,12 +28,13 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   computed: {
     toastState() {
       return this.$store.state.toast
     },
   },
-}
+})
 </script>

components/buttons/copyLink.vue

@@ -47,8 +47,9 @@
     </button>
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
@@ -59,5 +60,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>

components/buttons/nextDiff.vue

@@ -25,14 +25,15 @@
     </button>
   </div>
   </template>
-  <script>
-    export default {
+  <script lang="ts">
+    import Vue from 'vue'
+    export default Vue.extend({
       props: {
         clickHandler: {
           type: Function,
           required: true,
         },
       },
-    }
+    })
   </script>
 </template>

components/buttons/prevDiff.vue

@@ -26,12 +26,13 @@
   </div>
 </template>
 <script>
-export default {
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
       required: true,
     },
   },
-}
+})
 </script>

components/buttons/skipToNav.vue

@@ -6,14 +6,15 @@
     Skip to main content
   </button>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   methods: {
     focusOnMain() {
       document.getElementsByTagName('main')[0].focus()
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/buttons/stickyCopy.vue

@@ -43,12 +43,13 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
-      default: () => {},
+      required: true,
     },
     ariaLabel: {
       type: String,
@@ -61,13 +62,13 @@ export default {
     }
   },
   methods: {
-    handleClick(e) {
+    handleClick(e: MouseEvent) {
       this.copied = true
       this.clickHandler(e)
       setTimeout(() => {
         this.copied = false
       }, 5000)
     },
   },
-}
+})
 </script>

components/buttons/toggleInSync.vue

@@ -15,13 +15,14 @@
     />
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
       required: true,
     },
   },
-}
+})
 </script>

components/diffActionBar.vue

@@ -30,22 +30,24 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import PrevDiff from './buttons/prevDiff.vue'
 import ToggleInSync from './buttons/toggleInSync.vue'
 import NextDiff from './buttons/nextDiff.vue'
 import CopyLink from './buttons/copyLink.vue'
 import { putToClipboard } from '~/helpers/utils'
-export default {
+import { DiffActionBarData } from '~/helpers/types'
+export default Vue.extend({
   components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
-  data() {
+  data(): DiffActionBarData {
     return {
-      copied: this.copied,
+      copied: false,
+      comparator: null,
+      comparer: null,
+      treeWalker: null,
     }
   },
-  beforeCreate() {
-    this.copied = false
-  },
   mounted() {
     const lhsDiffNode = document.getElementById('lhsDiff')
     const rhsDiffNode = document.getElementById('rhsDiff')
@@ -65,11 +67,14 @@ export default {
         comparer,
         NodeFilter.SHOW_ELEMENT,
         {
-          acceptNode: (node) => {
-            return (
-              node.classList.contains('bg-red-200') ||
-              node.classList.contains('bg-green-200')
-            )
+          acceptNode: (node: Node) => {
+            if (
+              (node as HTMLDivElement).classList.contains('bg-red-200') ||
+              (node as HTMLDivElement).classList.contains('bg-green-200')
+            ) {
+              return NodeFilter.FILTER_ACCEPT
+            }
+            return NodeFilter.FILTER_REJECT
           },
         }
       )
@@ -91,56 +96,67 @@ export default {
       this.$store.commit('scrollInSync/toggle')
     },
     goToNextDiff() {
-      const currentNode = this.treeWalker.currentNode
-      const nextNode = this.treeWalker.nextNode()
+      const currentNode = this.treeWalker?.currentNode
+      const nextNode = this.treeWalker?.nextNode()
       if (nextNode) {
         const currentNodeIndex = Array.prototype.indexOf.call(
-          currentNode.parentElement.children,
+          currentNode?.parentElement?.children,
           currentNode
         )
         const nextNodeIndex = Array.prototype.indexOf.call(
-          nextNode.parentElement.children,
+          nextNode.parentElement?.children,
           nextNode
         )
-        const comparatorCurrentNode = this.comparator.children[currentNodeIndex]
-        const comparatorNextNode = this.comparator.children[nextNodeIndex]
+        const comparatorCurrentNode =
+          this.comparator?.children[currentNodeIndex]
+        const comparatorNextNode = this.comparator?.children[nextNodeIndex]
         this.toggleDiffHunkAndScrollIntoView(
-          [currentNode, comparatorCurrentNode],
-          [nextNode, comparatorNextNode]
+          [
+            currentNode as HTMLDivElement,
+            comparatorCurrentNode as HTMLDivElement,
+          ],
+          [nextNode as HTMLDivElement, comparatorNextNode as HTMLDivElement]
         )
       }
     },
     goToPreviousDiff() {
-      const currentNode = this.treeWalker.currentNode
-      const prevNode = this.treeWalker.previousNode()
+      const currentNode = this.treeWalker?.currentNode
+      const prevNode = this.treeWalker?.previousNode()
       if (prevNode) {
         const currentNodeIndex = Array.prototype.indexOf.call(
-          currentNode.parentElement.children,
+          currentNode?.parentElement?.children,
           currentNode
         )
         const prevNodeIndex = Array.prototype.indexOf.call(
-          prevNode.parentElement.children,
+          prevNode.parentElement?.children,
           prevNode
         )
-        const comparatorCurrentNode = this.comparator.children[currentNodeIndex]
-        const comparatorPrevNode = this.comparator.children[prevNodeIndex]
+        const comparatorCurrentNode =
+          this.comparator?.children[currentNodeIndex]
+        const comparatorPrevNode = this.comparator?.children[prevNodeIndex]
         this.toggleDiffHunkAndScrollIntoView(
-          [currentNode, comparatorCurrentNode],
-          [prevNode, comparatorPrevNode]
+          [
+            currentNode as HTMLDivElement,
+            comparatorCurrentNode as HTMLDivElement,
+          ],
+          [prevNode as HTMLDivElement, comparatorPrevNode as HTMLDivElement]
         )
       }
     },
-    toggleDiffHunkAndScrollIntoView(unselectedNodes, selectedNodes) {
+    toggleDiffHunkAndScrollIntoView(
+      unselectedNodes: Array<HTMLDivElement | undefined> = [],
+      selectedNodes: Array<HTMLDivElement | undefined> = []
+    ) {
       unselectedNodes.forEach((element) => {
-        element.querySelector('p').classList.remove('selected')
+        element?.querySelector('p')?.classList.remove('selected')
       })
       selectedNodes.forEach((element) => {
-        element.querySelector('p').classList.add('selected')
-        element.scrollIntoView()
+        element?.querySelector('p')?.classList.add('selected')
+        element?.scrollIntoView()
       })
     },
   },
-}
+})
 </script>
 <style lang="scss">
 .copy-uri-button:hover svg {

components/navbar.vue

@@ -156,8 +156,10 @@
   </nav>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+let darkMode: Boolean | null = null
+export default Vue.extend({
   props: {
     showBackButton: {
       type: Boolean,
@@ -166,24 +168,25 @@ export default {
   },
   data() {
     return {
-      darkMode: false,
+      darkMode,
     }
   },
   mounted() {
-    if (this.$cookies.isDarkMode) {
-      this.toggleDarkMode(null, false)
+    if (darkMode === null) {
+      darkMode = this.$cookies.isDarkMode
+      if (darkMode) {
+        document.documentElement.classList.add('dark')
+        document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
+      }
     }
     document.documentElement.classList.remove('hidden')
   },
   methods: {
-    toggleDarkMode(e, val) {
-      e && e.preventDefault()
-      this.darkMode = val || !this.darkMode
-      document.documentElement.classList[this.darkMode ? 'add' : 'remove'](
-        'dark'
-      )
-      document.cookie = `darkMode=${this.darkMode}; Secure; max-age=31536000; path=/;`
+    toggleDarkMode() {
+      darkMode = !darkMode
+      document.documentElement.classList[darkMode ? 'add' : 'remove']('dark')
+      document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
     },
   },
-}
+})
 </script>

components/singleDiff.vue

@@ -28,10 +28,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import StickyCopy from './buttons/stickyCopy.vue'
 import { putToClipboard } from '~/helpers/utils'
-export default {
+export default Vue.extend({
   components: { StickyCopy },
   props: {
     diff: {
@@ -57,17 +58,18 @@ export default {
     },
   },
   methods: {
-    copyTextToClipboard(e) {
+    copyTextToClipboard(e: Event) {
+      const copyTextButton = e.currentTarget as HTMLButtonElement
       putToClipboard(
-        e.currentTarget.parentNode.parentNode.innerText
+        (copyTextButton.parentNode?.parentNode as HTMLElement).innerText
           .split('\n\n')
           .join('\n'),
         'Text copied to your clipboard',
         this.$store
       )
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>