v-code-diff 0.3.11 → 1.0.0-alpha.1

package/src/lib/v-code-diff/styles/highlight.scss

@@ -1,84 +0,0 @@
-.d2h-wrapper {
-  .hljs {
-    display: inline-block;
-    padding: 0;
-    background: transparent;
-    vertical-align: middle;
-  }
-
-  .hljs-comment,
-  .hljs-quote {
-    color: #800;
-  }
-
-  .hljs-keyword,
-  .hljs-selector-tag,
-  .hljs-section,
-  .hljs-title,
-  .hljs-name {
-    color: #008;
-  }
-
-  .hljs-variable,
-  .hljs-template-variable {
-    color: #660;
-  }
-
-  .hljs-string,
-  .hljs-selector-attr,
-  .hljs-selector-pseudo,
-  .hljs-regexp {
-    color: #080;
-  }
-
-  .hljs-literal,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-meta,
-  .hljs-number,
-  .hljs-link {
-    color: #066;
-  }
-
-  .hljs-title,
-  .hljs-doctag,
-  .hljs-type,
-  .hljs-attr,
-  .hljs-built_in,
-  .hljs-builtin-name,
-  .hljs-params {
-    color: #606;
-  }
-
-  .hljs-attribute,
-  .hljs-subst {
-    color: #000;
-  }
-
-  .hljs-formula {
-    background-color: #eee;
-    font-style: italic;
-  }
-
-  .hljs-selector-id,
-  .hljs-selector-class {
-    color: #9B703F
-  }
-
-  .hljs-addition {
-    background-color: #baeeba;
-  }
-
-  .hljs-deletion {
-    background-color: #ffc8bd;
-  }
-
-  .hljs-doctag,
-  .hljs-strong {
-    font-weight: bold;
-  }
-
-  .hljs-emphasis {
-    font-style: italic;
-  }
-}

package/src/lib/v-code-diff/styles/index.ts

@@ -1,3 +0,0 @@
-import './highlight.scss'
-import './style.scss'
-import 'diff2html/bundles/css/diff2html.min.css'

package/src/lib/v-code-diff/styles/style.scss

@@ -1,36 +0,0 @@
-.d2h-wrapper {
-  position: relative;
-  line-height: normal;
-  .d2h-file-header {
-    display: none;
-  }
-  .d2h-files-diff {
-    display: flex;
-  }
-  .d2h-file-side-diff {
-    margin-bottom: -5px;
-  }
-  .d2h-code-side-emptyplaceholder {
-    max-height: 19px;
-  }
-  .d2h-code-side-line,
-  .d2h-code-line {
-    width: auto;
-  }
-  .d2h-code-side-line .d2h-info {
-    height: 18px;
-  }
-  .d2h-cntx,
-  .d2h-del,
-  .d2h-ins {
-    height: 18px;
-  }
-  .d2h-code-linenumber,
-  .d2h-code-side-linenumber {
-    line-height: 20px;
-    height: 20px;
-  }
-  tr {
-    height: 20px;
-  }
-}

package/src/lib/v-code-diff/util.ts

@@ -1,122 +0,0 @@
-import { createPatch } from 'diff'
-import * as d2h from 'diff2html'
-import hljs from 'highlight.js'
-import { SetupContext } from 'vue-demi'
-
-type Props = Readonly<{
-  highlight: boolean
-  oldString: string
-  newString: string
-  context: number
-  outputFormat: 'side-by-side' | 'line-by-line'
-  drawFileList: boolean
-  renderNothingWhenEmpty: boolean
-  fileName: string
-  isShowNoChange: boolean
-  diffStyle: 'word' | 'char'
-  trim: boolean
-  language: string
-  noDiffLineFeed: boolean
-} & {}>
-
-export function useDebounceFn (fn, delay) {
-  let timer
-  return function () {
-    const context = this
-    const args = arguments
-    clearTimeout(timer)
-    timer = setTimeout(function () {
-      fn.apply(context, args)
-    }, delay)
-  }
-}
-
-export const createHtml = (props: Props) => {
-  let oldString = props.trim ? props.oldString.trim() : props.oldString
-  let newString = props.trim ? props.newString.trim() : props.newString
-  oldString = props.noDiffLineFeed ? oldString.replace(/(\r\n)/g, '\n') : oldString
-  newString = props.noDiffLineFeed ? newString.replace(/(\r\n)/g, '\n') : newString
-  let context = props.context
-  if (props.isShowNoChange && oldString === newString) {
-    oldString = 'File Without Change\tOldString: ======================== \n' + oldString
-    newString = 'File Without Change\tNewString: ======================== \n' + newString
-    context = 99999
-  }
-  const dd = createPatch(props.fileName, oldString, newString, '', '', { context: context })
-  return d2h.html(dd, {
-    outputFormat: props.outputFormat,
-    drawFileList: props.drawFileList,
-    matching: 'lines',
-    diffStyle: props.diffStyle,
-    renderNothingWhenEmpty: props.renderNothingWhenEmpty
-  })
-}
-
-async function listElements (element: Element): Promise<Element[]> {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      const elements = element.querySelectorAll('.d2h-wrapper .d2h-code-line-ctn')
-      resolve(Array.from(elements))
-    }, 0)
-  })
-}
-
-async function highlightElement (el: HTMLElement, language: string): Promise<boolean> {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      if (language) {
-        const text = el.innerText
-        el.innerHTML = hljs.highlight(text, { language: language }).value
-      } else {
-        hljs.highlightElement(<HTMLElement>el)
-      }
-      resolve(true)
-    }, 0)
-  })
-}
-
-export async function highlightElements (element: Element, props, ctx: SetupContext<any>) {
-  ctx.emit('before-render')
-  const elements = await listElements(element)
-  const promises = Array.from(elements).map(el => highlightElement(el as HTMLElement, props.language))
-  await Promise.all(promises)
-  ctx.emit('after-render')
-}
-
-export function useSyncScroll (selector) {
-  let active: HTMLElement = document.createElement('div')
-
-  function onScroll (e) {
-    if (e.target !== active) return
-
-    document.querySelectorAll(selector).forEach(function (target) {
-      if (active === target) return
-
-      target.scrollTop = active.scrollTop
-      target.scrollLeft = active.scrollLeft
-    })
-  }
-
-  function onMouseenter (e) {
-    active = e.target
-  }
-
-  function addSyncScroll () {
-    document.querySelectorAll(selector).forEach(function (element) {
-      element.addEventListener('mouseenter', onMouseenter)
-      element.addEventListener('scroll', onScroll)
-    })
-  }
-
-  function removeSyncScroll () {
-    document.querySelectorAll(selector).forEach(function (element) {
-      element.removeEventListener('mouseenter', onMouseenter)
-      element.removeEventListener('scroll', onScroll)
-    })
-  }
-
-  return {
-    addSyncScroll,
-    removeSyncScroll
-  }
-}

package/src/lib/v-code-diff/v-code-diff.ts

@@ -1,108 +0,0 @@
-import { defineComponent, isVue3, PropType, h, ref, watch, onUpdated, onMounted } from 'vue-demi'
-import { createHtml, highlightElements, useDebounceFn, useSyncScroll } from '@/lib/v-code-diff/util'
-import './styles'
-
-export default defineComponent({
-  name: 'CodeDiff',
-  props: {
-    highlight: {
-      type: Boolean,
-      default: true
-    },
-    oldString: {
-      type: String,
-      default: ''
-    },
-    newString: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Number,
-      default: 10
-    },
-    outputFormat: {
-      type: String as PropType<'line-by-line' | 'side-by-side'>,
-      default: 'line-by-line'
-    },
-    drawFileList: {
-      type: Boolean,
-      default: false
-    },
-    renderNothingWhenEmpty: {
-      type: Boolean,
-      default: false
-    },
-    diffStyle: {
-      type: String as PropType<'word' | 'char'>,
-      default: 'word'
-    },
-    fileName: {
-      type: String,
-      default: ''
-    },
-    isShowNoChange: {
-      type: Boolean,
-      default: false
-    },
-    trim: {
-      type: Boolean,
-      default: false
-    },
-    language: {
-      type: String,
-      default: ''
-    },
-    noDiffLineFeed: {
-      type: Boolean,
-      default: false
-    },
-    syncScroll: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ['before-render', 'after-render'],
-  setup (props, ctx) {
-    const html = ref(createHtml(props))
-    const cb = useDebounceFn(async () => {
-      html.value = createHtml(props)
-      if (props.highlight) {
-        const el = document.createElement('div')
-        el.innerHTML = html.value
-        await highlightElements(el, props, ctx)
-        html.value = el.innerHTML
-      }
-    }, 200)
-    watch(props, cb, { deep: true, immediate: true })
-
-    const { addSyncScroll, removeSyncScroll } = useSyncScroll('.d2h-file-side-diff')
-    watch(() => props.syncScroll, (newVal, oldVal) => {
-      removeSyncScroll()
-      if (newVal) {
-        addSyncScroll()
-      }
-    })
-
-    onMounted(() => {
-      addSyncScroll()
-    })
-
-    return {
-      html
-    }
-  },
-  render () {
-    if (isVue3) {
-      return h('div', {
-        innerHTML: this.html
-      })
-    } else {
-      return h('div', {
-        domProps: {
-          innerHTML: this.html
-        }
-      })
-    }
-  }
-})