chore: development

Author: hoiheart

.eslintrc.js

@@ -19,8 +19,7 @@ module.exports = {
   overrides: [
     {
       files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+        '**/__tests__/*.{j,t}s?(x)'
       ],
       env: {
         jest: true

__tests__/index.spec.ts

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils'
+import VueDiff from '../src/index'
+
+describe('Plugin and component', () => {
+  it('Install plugin', () => {
+    const wrapper = mount({
+      template: `
+        <Diff />
+      `
+    }, {
+      global: {
+        plugins: [
+          [VueDiff]
+        ]
+      }
+    })
+    expect(wrapper.find('.vue-diff-wrapper')).toBeTruthy()
+    expect(wrapper.find('.vue-diff-mode-split')).toBeTruthy()
+    expect(wrapper.find('.vue-diff-theme-dark')).toBeTruthy()
+  })
+
+  it('Set plugin options', () => {
+    const wrapper = mount({
+      template: `
+        <VueDiff />
+      `
+    }, {
+      global: {
+        plugins: [
+          [VueDiff, {
+            componentName: 'VueDiff'
+          }]
+        ]
+      }
+    })
+    expect(wrapper.find('.vue-diff-wrapper')).toBeTruthy()
+    expect(wrapper.find('.vue-diff-mode-split')).toBeTruthy()
+    expect(wrapper.find('.vue-diff-theme-dark')).toBeTruthy()
+  })
+
+  it('Set component property', () => {
+    const wrapper = mount({
+      template: `
+        <Diff
+          mode="unified"
+          theme="light"
+        />
+      `
+    }, {
+      global: {
+        plugins: [
+          [VueDiff]
+        ]
+      }
+    })
+    expect(wrapper.find('.vue-diff-wrapper')).toBeTruthy()
+    expect(wrapper.find('.vue-diff-mode-unified')).toBeTruthy()
+    expect(wrapper.find('.vue-diff-theme-light')).toBeTruthy()
+  })
+})

__tests__/utils.spec.ts

@@ -0,0 +1,104 @@
+import { ref } from 'Vue'
+import { MODIFIED_START_TAG, MODIFIED_CLOSE_TAG, getDiffType, getSplitLines, getUnifiedLines, renderLines, renderWords, setHighlightCode } from '../src/utils'
+
+describe('Utils unit', () => {
+  const added = {
+    count: 1,
+    added: true,
+    removed: undefined,
+    value: ''
+  }
+
+  const removed = {
+    count: 1,
+    added: undefined,
+    removed: true,
+    value: ''
+  }
+
+  const equal = {
+    count: 1,
+    added: undefined,
+    removed: undefined,
+    value: ''
+  }
+
+  const disabled = {
+    value: ''
+  }
+
+  const prev = 'a\nb'
+  const curr = 'c'
+
+  const diffsMap = [
+    [
+      {
+        count: 2,
+        added: undefined,
+        removed: true,
+        value: prev
+      },
+      {
+        count: 1,
+        added: true,
+        removed: undefined,
+        value: curr
+      }
+    ]
+  ]
+
+  it('getDiffType', () => {
+    expect(getDiffType(added)).toBe('added')
+    expect(getDiffType(removed)).toBe('removed')
+    expect(getDiffType(equal)).toBe('equal')
+    expect(getDiffType(disabled)).toBe('disabled')
+  })
+
+  it('getSplitLines', () => {
+    const result = getSplitLines(diffsMap)
+    expect(result.length).toBe(2)
+    expect(result[0][0].type).toBe('removed')
+    expect(result[0][0].lineNum).toBe(1)
+    expect(result[0][0].value).toBe('a')
+    expect(result[0][0].chkWords).toBe(false)
+  })
+
+  it('getUnifiedLines', () => {
+    const result = getUnifiedLines(diffsMap)
+    expect(result.length).toBe(3)
+    expect(result[0][0].type).toBe('removed')
+    expect(result[0][0].lineNum).toBe(undefined)
+    expect(result[0][0].value).toBe('a')
+    expect(result[1][0].type).toBe('removed')
+    expect(result[1][0].lineNum).toBe(undefined)
+    expect(result[1][0].value).toBe('b')
+    expect(result[2][0].type).toBe('added')
+    expect(result[2][0].lineNum).toBe(1)
+    expect(result[2][0].value).toBe('c')
+  })
+
+  it('getUnifiedLines', () => {
+    const split = renderLines('split', prev, curr)
+    const unified = renderLines('unified', prev, curr)
+    expect(split.length).toBe(2)
+    expect(unified.length).toBe(3)
+  })
+
+  it('renderWords', () => {
+    expect(renderWords('abc', 'abc')).toBe('abc')
+    expect(renderWords('abc', 'acc')).toBe(`${MODIFIED_START_TAG}acc${MODIFIED_CLOSE_TAG}`)
+    expect(renderWords('a b c', 'a c c')).toBe(`a ${MODIFIED_START_TAG}c${MODIFIED_CLOSE_TAG} c`)
+  })
+
+  it('setHighlightCode', () => {
+    const highlightCode = ref('')
+
+    setHighlightCode({
+      highlightCode,
+      language: 'plaintext',
+      code: `a ${MODIFIED_START_TAG}c${MODIFIED_CLOSE_TAG} c`
+    })
+
+    expect(highlightCode.value).toBe('a <span class="modified">c</span> c')
+  })
+})

dev/App.vue

@@ -48,7 +48,7 @@ import template from './template'
 export default defineComponent({
   setup () {
     const modes = ref(['split', 'unified'])
-    const mode = ref('split')
+    const mode = ref('unified')
     const languages = ref(['javascript', 'html', 'css'])
     const language = ref('javascript')
     const themes = ref(['dark', 'light'])

index.html

@@ -8,10 +8,10 @@
 </head>
 <body class="bg-gray-900">
   <div class="p-12">
-    <h1 class="text-3xl font-extrabold text-gray-100 flex items-center">
-      <span class="mr-4">Vue Diff</span>
+    <h1 class="text-3xl font-extrabold text-gray-100">
+      Vue Diff
       <!-- Place this tag where you want the button to render. -->
-      <span class="mt-2">
+      <span style="display: inline-block; line-height: 0; margin: -4px 0 0 10px; vertical-align: middle; font-size: 0;">
         <a class="github-button" href="https://github.com/hoiheart/vue-diff" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star hoiheart/vue-diff on GitHub">Star</a>
       </span>
     </h1>

package-lock.json

@@ -11,8 +11,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
+    "test": "vue-cli-service test:unit",
+    "test:watch": "vue-cli-service test:unit --watch",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -48,7 +48,6 @@
     "sass-loader": "^8.0.2",
     "typescript": "~3.9.3",
     "vite": "^1.0.0-rc.13",
-    "vue-github-button": "^1.3.0",
     "vue-jest": "^5.0.0-0"
   },
   "_id": "vue-diff@0.0.0",

package.json

@@ -3,83 +3,8 @@
 </template>
 
 <script lang="ts">
-import { highlight } from 'highlight.js'
 import { defineComponent, ref, onMounted, watch } from 'vue'
-import { MODIFIED_START_TAG, MODIFIED_CLOSE_TAG } from './utils'
-
-import type { Ref } from 'vue'
-
-/**
- * Set hightlight code
- * This function must calling at client only (use DOM)
- */
-const setHighlightCode = ({ highlightCode, language, code }: { highlightCode: Ref; language: string; code: string }) => {
-  const hasModifiedTags = code.match(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'))
-
-  if (!hasModifiedTags) {
-    highlightCode.value = highlight(language, code).value
-    return
-  }
-
-  /**
-   * Explore highlight DOM extracted from pure code and compare the text with the original code code to generate the highlight code
-   */
-  let originalCode = code // original code with modified tags
-  const pureCode = code.replace(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'), '') // Without modified tags
-  let pureElement = document.createElement('div')
-  pureElement.innerHTML = highlight(language, pureCode).value // Highlight DOM without modified tags
-
-  const diffElements = (node: HTMLElement) => {
-    node.childNodes.forEach(child => {
-      if (child.nodeType === 1) {
-        diffElements(child as HTMLElement)
-      }
-
-      // Compare text nodes and check changed text
-      if (child.nodeType === 3) {
-        if (!child.textContent) return
-
-        let oldContent = child.textContent
-        let newContent = ''
-
-        while (oldContent.length) {
-          if (originalCode.startsWith(MODIFIED_START_TAG)) { // Add modified start tag
-            originalCode = originalCode.slice(MODIFIED_START_TAG.length)
-            newContent = newContent + MODIFIED_START_TAG
-            continue
-          }
-          if (originalCode.startsWith(MODIFIED_CLOSE_TAG)) { // Add modified close tag
-            originalCode = originalCode.slice(MODIFIED_CLOSE_TAG.length)
-            newContent = newContent + MODIFIED_CLOSE_TAG
-            continue
-          }
-
-          // Add words before modified tag
-          const hasModifiedTag = originalCode.match(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`))
-          const originalCodeDiffLength = hasModifiedTag && hasModifiedTag.index ? hasModifiedTag.index : originalCode.length
-          const nextDiffsLength = Math.min(originalCodeDiffLength, oldContent.length)
-
-          newContent = newContent + originalCode.substring(0, nextDiffsLength)
-          originalCode = originalCode.slice(nextDiffsLength)
-          oldContent = oldContent.slice(nextDiffsLength)
-        }
-
-        child.textContent = newContent // put as entity code because change textContent
-      }
-    })
-  }
-  diffElements(pureElement)
-
-  const startEntity = MODIFIED_START_TAG.replace('<', '&lt;').replace('>', '&gt;')
-  const closeEntity = MODIFIED_CLOSE_TAG.replace('<', '&lt;').replace('>', '&gt;')
-
-  highlightCode.value = pureElement.innerHTML
-    .replace(new RegExp(startEntity, 'g'), '<span class="modified">')
-    .replace(new RegExp(closeEntity, 'g'), '</span>')
-
-  // @ts-ignore
-  pureElement = null
-}
+import { setHighlightCode } from './utils'
 
 export default defineComponent({
   props: {

src/Code.vue

@@ -30,15 +30,15 @@ export default defineComponent({
   props: {
     mode: {
       type: String as PropType<Mode>,
-      required: true
+      default: 'split'
     },
     theme: {
       type: String as PropType<Theme>,
       default: 'dark'
     },
     language: {
       type: String,
-      default: ''
+      default: 'plaintext'
     },
     prev: {
       type: String,

src/Diff.vue

@@ -23,7 +23,7 @@
       <td class="code" :class="`vue-diff-cell-${data[0].type}`">
         <Code
           :language="language"
-          :code="setCode(line)"
+          :code="setCode(data[0])"
         />
       </td>
     </tr>