1.2.4 • Published 2 years ago

vue-diff v1.2.4

Weekly downloads
26
License
ISC
Repository
github
Last release
2 years ago

vue-diff

Vue diff viewer plugin for Vue@3
demo

Table of Contents

Introduction

You can see the difference between the two codes with the vue-diff plugin.
This plugin dependent on diff-match-patch and highlight.js, shows similar results to other diff viewers (e.g., Github Desktop).
Here is the demo

Features

  • Support split / unified mode
  • Support multiple languages and can be extended
  • Support two themes (dark / light) and can be customized
  • Virtual scroll for large text comparison
  • Folding view (Partial folding is not supported)
  • Support typescript

Install plugin

npm install vue-diff

And install plugin in vue application

import VueDiff from 'vue-diff';

import 'vue-diff/dist/index.css';

app.use(VueDiff);

Options

app.use(VueDiff, {
  componentName: 'VueDiff',
});
nametypedetaultdescription
componentNamestringDiffGlobal diff component name

Usage diff viewer

Insert the diff component with props.

Settings with default props

<template>
  <!-- If the changed componentName
  <VueDiff>
  -->
  <Diff
    :mode="mode"
    :theme="theme"
    :language="language"
    :prev="prev"
    :current="current"
  />
</template>

Settings with full props

<template>
  <Diff
    :mode="mode"
    :theme="theme"
    :language="language"
    :prev="prev"
    :current="current"
    :folding="folding"
    :input-delay="0"
    :virtual-scroll="{ height: 500, lineMinHeight: 24, delay: 100 }"
  />
</template>

Props

nametypedetaultvaluesdescription
modestringsplitsplit, unified
themestringdarkdark, light, custom${string}See Custom theme
languagestringplaintextSee Extend languages
prevstring''Prev code
currentstring''Current Code
foldingbooleanfalseFolding not different
inputDelaynumber0Setting up rendering debounce for changes for performance benefit (mode, prev, curr)
virtualScrollboolean\|objectfalseDefault value when setting true :{ height: 500, lineMinHeight: 24, delay: 100 }See virtual scroll

Custom theme

vue-diff uses the following highlight.js themes and can be customized.

  • dark: highlight.js/scss/monokai.scss
  • light: highlight.js/scss/vs.scss
npm install highlight.js
<template>
  <Diff
    :mode="mode"
    <!-- Characters that begin with custom -->
    theme="custom"
    :language="language"
    :prev="prev"
    :current="current"
  />
</template>

<style lang="scss">
.vue-diff-theme-custom {
  @import 'highlight.js/scss/vs2015.scss'; // import theme

  background-color: #000; // Set background color
}
</style>

Extend languages

vue-diff supports the following languages and can be extended through highlight.js language registration.

Default supported languages and values

  • css
  • xml: xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
  • markdown: markdown, md, mkdown, mkd
  • javascript: javascript, js, jsx
  • json
  • plaintext: plaintext, txt, text
  • typescript: typescript, ts
npm install highlight.js
import VueDiff from 'vue-diff';
import 'vue-diff/dist/index.css';

// extend yaml language
import yaml from 'highlight.js/lib/languages/yaml';

VueDiff.hljs.registerLanguage('yaml', yaml);

app.use(VueDiff);

Check supported languages of Highlight.js

Virtual scroll

Comparing text from many lines can slow down performance. With virtualScroll props, virtualScroll applies. (Self-made for this plug-in.)

Object property value

When using virtual scroll, the css of all code lines is changed to the absolute position, which requires detailed settings.

  • height (number): Diff box height (Applies only to px values)
  • lineMinHeight (number): minimum height of line

    Minimum height value of line is required for visible area calculation.The default is 24, but you can set it yourself if you need to adjust it according to the page's front-size, line-height, etc.

  • delay (number): re-rendering delay when scrolling or resizing

    Performance problems occur when too often a re-rendering function is invoked based on scrolling or resizingThis setting applies a delay using throttle.

1.2.4

2 years ago

1.2.0

3 years ago

1.1.5

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.0

4 years ago