Skip to content

v1.6.0

Latest
Latest

Choose a tag to compare

View all tags
@sitefinitysteve sitefinitysteve released this 30 Sep 00:13
· 1 commit to main since this release
v1.6.0
1782614
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

diff-text now covers Vue, React and PHP from one repository, with one behavior contract and one set of shared test fixtures. The three packages produce the same diffs and the same markup.

Package Install
vue-diff-text 1.6.0 npm i vue-diff-text
react-diff-text 1.6.0 (new) npm i react-diff-text
sitefinitysteve/php-diff-text 1.6.0 composer require sitefinitysteve/php-diff-text

Live demo: Vue · React · PHP

New

  • React package. react-diff-text is a 1:1 port of the Vue components: same names, same props, same DOM.
  • Line views:
    • DiffUnified: line numbers and folded context you can click to expand.
    • DiffSplit: side by side, with the changed words highlighted inside edited lines.
  • DiffStats: a badge with added, removed and unchanged counts, plus a similarity percentage.
  • Visualizations. All of them are static HTML and CSS, so they work in PHP output too:
    • Rewrite heatmap (DiffHeatmap): each sentence is shaded by how much it changed. Useful for AI-edited prose.
    • Moved blocks (detectMoves): a paragraph that moved shows as moved, not as a deletion plus an addition.
    • Change minimap (minimap): a strip of links to every change.
    • Revision timeline (DiffTimeline): step through v1 → v2 → v3.
    • Animated playback (DiffPlayback): changes animate in order, and it respects reduced motion.
  • Navigation: next(), prev() and goTo() on every view.

Fixed

  • HTML diff. It now runs one engine on every platform, replacing diffblazer in Vue/React:
    • output is always valid, balanced HTML;
    • content after <script>/<style> is no longer dropped;
    • entities compare by value (&eacute; equals é);
    • output is byte-identical across Vue, React and PHP.
  • PHP text diffs:
    • word and sentence diffs no longer drop spaces;
    • HTML output no longer breaks tags apart;
    • the engine is rewritten (Myers, jsdiff-compatible): a 10,000-character diff that used to run out of memory now takes about 2 ms.
  • Similarity stays between 0 and 1. It could go above 1 before. It also only strips tags for HTML input.
  • Split view: each column shows its own line exactly, including indentation.
  • Vue/React state: expanded rows and the navigation highlight survive parent re-renders.
  • Server rendering: SSR and hydration are clean for Nuxt/Next, including text with Windows line endings.

Upgrading

The public APIs are backward compatible, but some output changed on purpose:

  • Full replacement in DiffHtml renders <div class="diff-removed"> / <div class="diff-added"> instead of <span>.
  • Change attributes: every change carries data-change-index.
  • Word diffs follow jsdiff v8 whitespace rules (Vue was on v5).
  • Removed DiffHtml options: markers, atomicTags, repeatingWordsAccuracy, matchGranularity and ignoreWhiteSpaceDifferences were diffblazer-only and are now ignored. orphanMatchThreshold, ignoreFormattingTags, similarityThreshold and ignoreCase all work.
  • Runtime dependencies: Vue and React have none now; everything is bundled, and the bundles are about half the size (gzip).

Full details are in the changelogs: Vue, React, PHP.

Repository

sitefinitysteve/vue-diff-text is now sitefinitysteve/diff-text, and old links redirect. sitefinitysteve/php-diff-text is a read-only mirror that Packagist reads; please open issues and pull requests on diff-text.

Assets 2
Loading