chore: init

Author: hoiheart

dev/App.vue

@@ -1,10 +1,23 @@
 <template>
   <h1>Vue Diff</h1>
-  <Diff
-    language="javascript"
-    :prev="prev"
-    :current="current"
-  />
+  <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>
 </template>
 
 <script lang="ts">

src/Diff.vue

@@ -1,21 +1,30 @@
 <template>
-  <div class="vue-diff-wrapper">
-    <!-- <Viewer type="unified" :language="language" :diffLines="diffLines" /> -->
-    <Viewer type="prev" :language="language" :diffs="diffs" />
-    <Viewer type="current" :language="language" :diffs="diffs" />
+  <div class="vue-diff-wrapper" :class="`vue-diff-wrapper-${type}`">
+    <template v-if="type === 'unified'">
+      <Viewer role="unified" :language="language" :prev="prev" :current="current" />
+    </template>
+    <template v-else>
+      <Viewer role="prev" :language="language" :prev="prev" :current="current" />
+      <Viewer role="current" :language="language" :prev="prev" :current="current" />
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue'
-import * as Diff from 'diff'
+import { defineComponent, PropType } from 'vue'
 import Viewer from './Viewer.vue'
 
+import { Type } from './utils'
+
 export default defineComponent({
   components: {
     Viewer
   },
   props: {
+    type: {
+      type: String as PropType<Type>,
+      required: true
+    },
     language: {
       type: String,
       required: true
@@ -28,11 +37,6 @@ export default defineComponent({
       type: String,
       required: true
     }
-  },
-  setup (props) {
-    const diffs = reactive(Diff.diffLines(props.prev, props.current))
-
-    return { diffs }
   }
 })
 </script>
@@ -44,7 +48,7 @@ export default defineComponent({
   width: 100%;
 }
 
-.vue-diff-viewer {
+.vue-diff-wrapper-split .vue-diff-viewer {
   width: calc(50% - 10px);
 }
 </style>

src/Viewer.vue

@@ -14,32 +14,38 @@
 </template>
 
 <script lang="ts">
+import * as Diff from 'diff'
 import { defineComponent, ref, PropType } from 'vue'
 import { renderLines } from './utils'
 import Code from './Code.vue'
 
-import type { Type, Change } from './utils'
+import type { Role } from './utils'
 
 export default defineComponent({
   components: {
     Code
   },
   props: {
-    type: {
-      type: String as PropType<Type>,
+    role: {
+      type: String as PropType<Role>,
       required: true
     },
     language: {
       type: String,
       required: true
     },
-    diffs: {
-      type: Array as PropType<Array<Change>>,
+    prev: {
+      type: String,
+      required: true
+    },
+    current: {
+      type: String,
       required: true
     }
   },
   setup (props) {
-    const lines = ref(renderLines(props.type, props.diffs))
+    const diff = Diff.diffLines(props.prev, props.current)
+    const lines = ref(renderLines(props.role, diff))
 
     return { lines }
   }

src/utils.ts

@@ -2,7 +2,8 @@ import * as Diff from 'diff'
 
 import type { Change } from 'diff'
 
-type Type = 'prev' | 'current' | 'unified'
+type Type = 'split' | 'unified'
+type Role = 'prev' | 'current' | 'unified'
 
 interface Line {
   type: 'added' | 'removed' | 'equal';
@@ -68,14 +69,16 @@ const renderCurrent = (diffs: Array<Change>) => {
 
   diffs.map((diff, index) => {
     const type = getDiffType(diff)
+    const prevDiff = index > 0 ? diffs[index - 1] : null
     const nextDiff = index < diffs.length - 1 ? diffs[index + 1] : null
+    const isModifiedLine = prevDiff && diff.count === 1 && prevDiff.count === 1 && type === 'added' && prevDiff.removed
+    const isUnuseLine = nextDiff && diff.count === 1 && nextDiff.count === 1 && type === 'removed' && nextDiff.added
 
-    if (nextDiff && type === 'removed' && nextDiff.added) {
-      if (diff.count === 1 && nextDiff.count === 1) {
-        const diffWords = Diff.diffWords(nextDiff.value, diff.value)
-        diff.value = renderLine(diffWords)
-        return
-      }
+    if (isUnuseLine) return
+
+    if (isModifiedLine) {
+      const diffWords = Diff.diffWords((prevDiff as Change).value, diff.value)
+      diff.value = renderLine(diffWords)
     }
 
     diff.value.replace(/\n$/, '').split('\n').map((value) => {
@@ -100,15 +103,17 @@ const renderUnified = (diffs: Array<Change>) => {
   console.log(diffs)
 }
 
-const renderLines = (type: Type, diffs: Array<Change>) => {
-  if (type === 'prev') {
-    return renderPrev([...diffs])
-  } else if (type === 'current') {
-    return renderCurrent([...diffs])
-  } else if (type === 'unified') {
-    return renderUnified([...diffs])
+const renderLines = (role: Role, diffs: Array<Change>) => {
+  const deepCopy = JSON.parse(JSON.stringify(diffs))
+
+  if (role === 'prev') {
+    return renderPrev(deepCopy)
+  } else if (role === 'current') {
+    return renderCurrent(deepCopy)
+  } else if (role === 'unified') {
+    return renderUnified(deepCopy)
   }
 }
 
 export { renderLines }
-export type { Type, Change, Line }
+export type { Type, Role, Change, Line }

vite.config.js

@@ -1,17 +1,7 @@
-import commonjs from '@rollup/plugin-commonjs'
-
 export default {
-  rollupInputOptions: {
-    plugins: [
-      commonjs()
-    ]
-  },
   optimizeDeps: {
     include: [
-      // 'prismjs/components/index',
-      // 'prismjs/plugins/autoloader/prism-autoloader',
-      // 'prismjs/plugins/diff-highlight/prism-diff-highlight',
-      // 'prismjs/plugins/line-numbers/prism-line-numbers'
+      'prismjs/plugins/keep-markup/prism-keep-markup'
     ]
   }
 }