chore: first draft working

Author: technikhil314

helpers/utils.ts

@@ -0,0 +1,10 @@
+export function urlEncode(unencoded: string): string {
+  var encoded = globalThis.btoa(unencoded)
+  return encoded.replace('+', '-').replace('/', '_').replace(/=+$/, '')
+}
+
+export function urlDecode(encoded: string): string {
+  encoded = encoded.replace('-', '+').replace('_', '/')
+  while (encoded.length % 4) encoded += '='
+  return globalThis.atob(encoded)
+}

package-lock.json

@@ -23,6 +23,8 @@
   "dependencies": {
     "@nuxtjs/pwa": "^3.3.5",
     "core-js": "^3.15.1",
+    "diff": "^5.0.0",
+    "diff-match-patch": "^1.0.5",
     "nuxt": "^2.15.7"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <p v-for="(lineDiff, index) in lhsDiff" :key="index">
+      <span v-html="lineDiff"></span>
+    </p>
+    <p v-for="(lineDiff, index) in rhsDiff" :key="index">
+      <span v-html="lineDiff"></span>
+    </p>
+  </div>
+</template>
+
+<script>
+import DiffMatchPatch from 'diff-match-patch'
+import { urlDecode } from '../../../helpers/utils'
+const dmp = new DiffMatchPatch()
+export default {
+  lhs: '',
+  rhs: '',
+  diff: [],
+  mounted() {
+    const { lhs, rhs } = this.$route.params
+    this.originalLhs = urlDecode(lhs).split('\n')
+    this.originalRhs = urlDecode(rhs).split('\n')
+    const diff = this.originalLhs.map((x, i) => {
+      if (!this.originalRhs[i]) {
+        this.originalRhs[i] = ''
+      }
+      return dmp.diff_main(x, this.originalRhs[i])
+    })
+    this.lhsDiff = diff.map((lineDiff) => {
+      return lineDiff
+        .map((item) => {
+          if (item[0] === -1 || item[0] === 0) {
+            const className = item[0] === -1 ? 'bg-red-300' : ''
+            return `<pre class="inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</pre>`
+          }
+          return ''
+        })
+        .filter(Boolean)
+        .join('\n')
+    })
+    this.rhsDiff = diff.map((lineDiff) => {
+      return lineDiff
+        .map((item) => {
+          if (item[0] === 1 || item[0] === 0) {
+            const className = item[0] === 1 ? 'bg-green-300' : ''
+            return `<pre class="inline mr-[-4px] p-0 m-0 ${className}">${item[1]}</pre>`
+          }
+          return ''
+        })
+        .filter(Boolean)
+        .join('\n')
+    })
+    console.log(this.originalLhs, this.originalRhs, diff)
+  },
+  data() {
+    return {
+      diff: this.diff,
+      originalRhs: this.originalRhs,
+      originalLhs: this.originalLhs,
+      lhsDiff: this.lhsDiff,
+      rhsDiff: this.rhsDiff,
+    }
+  },
+}
+</script>

pages/_diff.vue

@@ -1,9 +1,30 @@
 <template>
-  <h1 class="text-7xl">index</h1>
+  <form @submit="checkForm">
+    <textarea id="lhs" cols="30" rows="10"></textarea>
+    <textarea id="rhs" cols="30" rows="10"></textarea>
+    <button>submit</button>
+  </form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-
-export default Vue.extend({})
+import { urlEncode } from '../helpers/utils'
+export default Vue.extend({
+  methods: {
+    checkForm: (e: any) => {
+      e.preventDefault()
+      const lhsTextArea: HTMLTextAreaElement = document.getElementById(
+        'lhs'
+      ) as HTMLTextAreaElement
+      const lhs: string = lhsTextArea?.value || ''
+      const rhsTextArea: HTMLTextAreaElement = document.getElementById(
+        'rhs'
+      ) as HTMLTextAreaElement
+      const rhs: string = rhsTextArea?.value || ''
+      this.$router.push({
+        path: `/diff/${urlEncode(lhs)}/${urlEncode(rhs)}`,
+      })
+    },
+  },
+})
 </script>

pages/diff/_lhs/_rhs.vue

@@ -0,0 +1,3 @@
+module.exports = {
+  mode: 'jit'
+}