Custom Extension, server connect (node) - Code Diff, compare two texts for differences

[Hyperbytes]

Needed this for my current project, not sure how useful it will be to everyone outside my specific use case (quantifying scope/quality of changes made to page content) but here is is anyway.

Introduction

This extension takes two differing texts and compares the two for differences identifying the changes, words added, words removed and gives a score (1-100 ) indicating the amount of change.

The NPM

The npm can be found here

https://www.npmjs.com/package/@hyperbytes/wappler-codediff

This extension leverages the "diff" npm for analysis so ensure on publishing, all npms are updated on your server if neccesary.

https://www.npmjs.com/package/diff

Installing

Please follow this post.

How To Install Custom Wappler Extensions

Intro Wappler offers powerful extensibility options that let you build and use custom extensions for both Server Connect and App Connect. It also provides a user-friendly interface to easily browse, install, and manage extensions directly from within your projects. Installing Custom Extensions Extensions in Wappler are installed per project, so you need to add them individually to each project where you want to use them. To get started, open your Project Settings: [Screenshot_20] Go to th…

Usage

The component can be found in the "Data Management" group.

In this simple case i compare two short pieces of text which are defined in set value stages.
These pieces of text could be from a form text area and from a file read into the API action.

So i define two pieces of text

and

I then use codediff to compare them.

The text is compared and the changes output (available in picker)

diff1: {
changes: [
"Removed: "cat"",
"Added: "dog"",
"Removed: "mat"",
"Added: "rug and slept""
],
changeScore: 60,
addedChars: 16,
removedChars: 6
}

Note, obviously this routine may take a few seconds if large texts are used so consider some mechanism for warning the user to be patient!

Again, in large texts, the "Changes" section can be extensive in detail

Enjoy!

[Hyperbytes]

BREAKING CHANGE IN V1.1.3

In using this extension i found issues with the schema output which forces a change which may break existing uses code.

The schema output was inconsistant in realation to the changes array which could have keys of "removed" or "added" breaking the schema consistancy

So i have changed the output so changes are output consistantly with the action type embedded in the text

        "changes": [
            "change: \"Removed: or\"",
            "change: \"Added: . You can\"",
            "change: \"Added: use\"",
            "change: \"Removed:  \""
        ],

The picker now correctly deals with the schema

I have also added two new options to the interface.

Changes as string
This forces the output to a delimited multiline string rather than an array, default delimited by /n

Use br not /n

This forces an html <br> tag as the line delimiter