chore: development

Author: hoiheart

dev/App.vue

@@ -1,30 +1,51 @@
 <template>
+  <link rel="stylesheet" :href="`/src/themes/${theme}.css`">
   <h1>Vue Diff</h1>
-  <section>
-    <h2>Split</h2>
-    <Diff
-      type="split"
-      language="javascript"
-      :prev="prev"
-      :current="current"
-    />
-  </section>
-  <section>
-    <h2>Unified</h2>
-    <Diff
-      type="unified"
-      language="javascript"
-      :prev="prev"
-      :current="current"
-    />
-  </section>
+  language
+  type
+  theme
+  <div class="editor">
+    <section>
+      <h2>Editor</h2>
+      <div>
+        <h3>Prev</h3>
+        <textarea v-model="prev"></textarea>
+      </div>
+      <div>
+        <h3>Current</h3>
+        <textarea v-model="current"></textarea>
+      </div>
+    </section>
+  </div>
+  <div class="viewer">
+    <section>
+      <h2>Split</h2>
+      <Diff
+        type="split"
+        language="javascript"
+        :prev="prev"
+        :current="current"
+      />
+    </section>
+    <section>
+      <h2>Unified</h2>
+      <Diff
+        type="unified"
+        language="javascript"
+        :prev="prev"
+        :current="current"
+      />
+    </section>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   setup () {
+    const theme = 'okaidia'
+
     const prev = ref(
 `var a = {
   "name": "vue-diff",
@@ -47,7 +68,29 @@ export default defineComponent({
   }
 }`)
 
-    return { prev, current }
+    return { prev, current, theme }
   }
 })
 </script>
+
+<style scoped lang="scss">
+.editor {
+  section {
+    display: flex;
+    flex-wrap: wrap;
+
+    h2 {
+      width: 100%;
+    }
+
+    div {
+      width: 50%;
+    }
+
+    textarea {
+      width: 100%;
+      height: 100px;
+    }
+  }
+}
+</style>

dev/main.ts

@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import VueDiff from '../src'
-import '../src/themes/okaidia.css'
 
 const app = createApp(App)
 app.use(VueDiff)

package-lock.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "diff": "^5.0.0",
+    "html-entities": "^2.0.2",
     "prismjs": "^1.22.0",
     "vue": "^3.0.0"
   },

package.json

@@ -3,16 +3,18 @@
     <td class="lineNum">
       {{ data.lineNum }}
     </td>
-    <td ref="code" class="code">
-      <pre><code :class="`language-${language}`" v-html="data.value"></code></pre>
+    <td class="code">
+      <pre><code ref="codeRef" :class="`language-${language}`" v-html="code"></code></pre>
     </td>
   </tr>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, onMounted } from 'vue'
+// @ts-ignore
+import { encode } from 'html-entities'
+import { defineComponent, PropType, ref, onMounted, watch, nextTick, computed } from 'vue'
 import { Prism } from './index'
-import { Line } from './utils'
+import { MODIFIED_TAG, Line } from './utils'
 
 export default defineComponent({
   props: {
@@ -25,34 +27,52 @@ export default defineComponent({
       required: true
     }
   },
-  setup () {
-    const code = ref(null)
+  setup (props) {
+    const codeRef = ref(null)
+    const code = computed(() => {
+      return encode(props.data.value)
+        .replace(new RegExp(`&lt;${MODIFIED_TAG}&gt;`, 'gi'), '<span class="token modified">')
+        .replace(new RegExp(`&lt;/${MODIFIED_TAG}&gt;`, 'gi'), '</span>')
+    })
 
     onMounted(() => {
-      Prism.highlightAllUnder(code.value as unknown as HTMLElement)
+      watch(() => props.data.value, () => {
+        nextTick(() => Prism.highlightElement(codeRef.value as unknown as HTMLElement))
+      }, { immediate: true })
     })
 
-    return { code }
+    return { codeRef, code }
   }
 })
 </script>
 
 <style scoped lang="scss">
 td {
-  padding: 0 10px;
+  padding: 0 0.5em;
 
   &.lineNum {
     width: 2em;
     text-align: right;
     color: #999;
     font-size: 0.9em;
   }
+
+  pre[class*="language-"]:before {
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0.8;
+  }
 }
 
 pre[class*="language-"] {
-  padding: 0;
+  display: block;
+  position: relative;
   margin: 0;
-  overflow: auto;
+  padding: 0;
+  padding-left: 1.5em;
+  overflow: visible;
   background: none;
   border-radius: 0;
 }
@@ -63,6 +83,21 @@ tr.vue-diff-row-removed td {
   :deep(.token.modified) {
     background-color: rgba(255, 0, 0, .3);
   }
+
+  pre[class*="language-"]:before {
+    content: "-";
+  }
+
+}
+
+.vue-diff-viewer-prev {
+  tr.vue-diff-row-added td {
+    background-color: rgba(128, 128, 128, 0.1);
+
+    pre[class*="language-"]:before {
+      display: none;
+    }
+  }
 }
 
 tr.vue-diff-row-added td {
@@ -71,5 +106,19 @@ tr.vue-diff-row-added td {
   :deep(.token.modified) {
     background-color: rgba(0, 255, 128, .3);
   }
+
+  pre[class*="language-"]:before {
+    content: "+";
+  }
+}
+
+.vue-diff-viewer-current {
+  tr.vue-diff-row-removed td {
+    background-color: rgba(128, 128, 128, 0.1);
+
+    pre[class*="language-"]:before {
+      display: none;
+    }
+  }
 }
 </style>

src/Code.vue

@@ -47,8 +47,4 @@ export default defineComponent({
   justify-content: space-between;
   width: 100%;
 }
-
-.vue-diff-wrapper-split .vue-diff-viewer {
-  width: calc(50% - 10px);
-}
 </style>

src/Diff.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="viewer" class="vue-diff-viewer">
+  <div ref="viewer" class="vue-diff-viewer" :class="`vue-diff-viewer-${role}`">
     <table>
       <tbody>
         <Code
@@ -15,11 +15,11 @@
 
 <script lang="ts">
 import * as Diff from 'diff'
-import { defineComponent, ref, PropType } from 'vue'
+import { defineComponent, ref, PropType, watch } from 'vue'
 import { renderLines } from './utils'
 import Code from './Code.vue'
 
-import type { Role } from './utils'
+import type { Role, Line } from './utils'
 
 export default defineComponent({
   components: {
@@ -44,23 +44,34 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const diff = Diff.diffLines(props.prev, props.current)
-    const lines = ref(renderLines(props.role, diff))
+    const lines = ref<Array<Line>>([])
+
+    watch([() => props.prev, () => props.current], () => {
+      const diff = Diff.diffLines(props.prev, props.current)
+      lines.value = renderLines(props.role, diff)
+    }, { immediate: true })
 
     return { lines }
   }
 })
 </script>
 
 <style scoped lang="scss">
+.vue-diff-wrapper-split {
+  .vue-diff-viewer {
+    width: calc(50% - 10px);
+  }
+}
+
 .vue-diff-viewer {
-  overflow: hidden;
+  overflow: auto;
+  width: 100%;
   padding: 1em 0;
   border-radius: 0.3em;
 }
 
 table {
-  width: 100%;
+  min-width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
 }

src/Viewer.vue

@@ -3,3 +3,5 @@ declare module '*.vue' {
   const component: DefineComponent
   export default component
 }
+
+declare module '*.css'

src/shims-vue.d.ts

@@ -1,4 +1,4 @@
-@import 'prismjs/themes/prism-okaidia.css';
+@import '../../node_modules/prismjs/themes/prism-okaidia.css';
 
 .vue-diff-viewer {
   background-color: #272822;