Git Product home page Git Product logo

Comments (18)

rtfpessoa avatar rtfpessoa commented on May 24, 2024

Hi @georgeedwards

The API is basically defined by:

API METHODS

  /*
   * Generates json object from string diff input
   */
  Diff2Html.prototype.getJsonFromDiff = function(diffInput, config)

  /*
   * Generates the html diff. The config parameter configures the output/input formats and other options
   */
  Diff2Html.prototype.getPrettyHtml = function(diffInput, config)

DEPRECATED METHODS BELLOW

  /*
   * Generates pretty html from string diff input
   */
  Diff2Html.prototype.getPrettyHtmlFromDiff = function(diffInput, config)

  /*
   * Generates pretty html from a json object
   */
  Diff2Html.prototype.getPrettyHtmlFromJson = function(diffJson, config)

  /*
   * Generates pretty side by side html from string diff input
   */
  Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function(diffInput, config)

  /*
   * Generates pretty side by side html from a json object
   */
  Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function(diffJson, config)

And I have some docs about parameters etc here: https://github.com/rtfpessoa/diff2html#how-to-use

You can also find some real usage examples in the UI helper I have here: https://github.com/rtfpessoa/diff2html/blob/master/src/ui/js/diff2html-ui.js

The error is probably because you need: require('diff2html').Diff2Html instead of require('diff2html').

Let me know if I can help you with any more information.

from diff2html.

georgeedwards avatar georgeedwards commented on May 24, 2024

Thanks! It would be good to add that example to the README docs? The functions seem to return strings? Would you like me to put together a definition file for TS in a PR?

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

I know nothing about ts definitions. I can try.

When I have some time I can look into it.

from diff2html.

georgeedwards avatar georgeedwards commented on May 24, 2024

Awesome - that'd be great. This is what I got which I believe fully describes the two main functions, just not the UI helper stuff.

declare module 'diff2html' {
    function getPrettyHtml(exInput: string, configuration?: options): string;
    function getJsonFromDiff(exInput: string, configuration?: options): string;
}

interface options {
    inputFormat?: string;
    outputFormat?: string;
    showFiles?: boolean;
    matching?: string;
    synchronisedScroll?: boolean;
    matchWordsThreshold?: number;
    matchingMaxComparisons?: number;
}

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

That seems to be it. I will give the code a check to see if the docs are missing something.

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

@georgeedwards sorry for the delay.

There is one thing that can be more specified. In getJsonFromDiff it returns an object and that object has some properties. I will try to make some interfaces for it.

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

@georgeedwards, just finished it, what do you think?

NOTES: the method getPrettyHtml can have two types of inputs, how can I specify it?

// Type definitions for diff2html
// Project: https://github.com/rtfpessoa/diff2html
// Definitions by: georgeedwards <https://github.com/georgeedwards/>
//                 rtfpessoa <https://github.com/rtfpessoa/>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

declare namespace Diff2Html {

    interface Diff2HtmlOptions {
        inputFormat?: string;
        outputFormat?: string;
        showFiles?: boolean;
        matching?: string;
        synchronisedScroll?: boolean;
        matchWordsThreshold?: number;
        matchingMaxComparisons?: number;
    }

    enum DiffLineType {
        INSERTS: 'd2h-ins',
        DELETES: 'd2h-del',
        INSERT_CHANGES: 'd2h-ins d2h-change',
        DELETE_CHANGES: 'd2h-del d2h-change',
        CONTEXT: 'd2h-cntx',
        INFO: 'd2h-info'
    }

    interface DiffLine {
        content: string;
        type: DiffLineType;
        oldNumber: number;
        newNumber: number;
    }

    interface DiffBlock {
        oldStartLine: number;
        oldStartLine2?: number;
        newStartLine: number;
        header: string;
        lines: DiffLine[];
    }

    interface DiffResult {
        addedLines: number;
        deletedLines: number;
        isCombined: boolean;
        isGitDiff: boolean;
        oldName: string;
        newName: string;
        language: string;
        blocks: DiffBlock[];
        oldMode?: string;
        newMode?: string;
        deletedFileMode?: string;
        newFileMode?: string;
        isDeleted?: boolean;
        isNew?: boolean;
        isCopy?: boolean;
        isRename?: boolean;
        unchangedPercentage?: number;
        changedPercentage?: number;
        checksumBefore?: string;
        checksumAfter?: string;
        mode?: string;
    }

    function getJsonFromDiff(input: string, configuration?: Diff2HtmlOptions): DiffResult;

    function getPrettyHtml(input: any, configuration?: Diff2HtmlOptions): string;
}

declare module "diff2html" {
    export.Diff2Html = Diff2Html;
}

Where is this supposed to go? Should I PR it to DefinitelyTyped?

from diff2html.

georgeedwards avatar georgeedwards commented on May 24, 2024

Awesome! Looks good to me! Yes PR the Definitely Typed repo, here is the contributing guide if you need any more info.

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

Just tried the test but I cannot seem to make it work.

Due to the var Diff2Html = require('diff2html').Diff2Html ;

I have no idea how to write the declare module. This one is wrong.

Do you have any idea how to do it?

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

I think now is fine:

// Type definitions for diff2html
// Project: https://github.com/rtfpessoa/diff2html
// Definitions by: georgeedwards <https://github.com/georgeedwards/>
//                 rtfpessoa <https://github.com/rtfpessoa/>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

declare namespace Diff2Html {

    export interface Options {
        inputFormat?: string;
        outputFormat?: string;
        showFiles?: boolean;
        matching?: string;
        synchronisedScroll?: boolean;
        matchWordsThreshold?: number;
        matchingMaxComparisons?: number;
    }

    export interface Line {
        content: string;
        type: string;
        oldNumber: number;
        newNumber: number;
    }

    export interface Block {
        oldStartLine: number;
        oldStartLine2?: number;
        newStartLine: number;
        header: string;
        lines: Line[];
    }

    export interface Result {
        addedLines: number;
        deletedLines: number;
        isCombined: boolean;
        isGitDiff: boolean;
        oldName: string;
        newName: string;
        language: string;
        blocks: Block[];
        oldMode?: string;
        newMode?: string;
        deletedFileMode?: string;
        newFileMode?: string;
        isDeleted?: boolean;
        isNew?: boolean;
        isCopy?: boolean;
        isRename?: boolean;
        unchangedPercentage?: number;
        changedPercentage?: number;
        checksumBefore?: string;
        checksumAfter?: string;
        mode?: string;
    }

    export interface Diff2Html {
        getJsonFromDiff(input: string, configuration?: Options): Result;
        getPrettyHtml(input: any, configuration?: Options): string;
    }
}

declare module "diff2html" {
    var d2h: { "Diff2Html": Diff2Html.Diff2Html };
    export = d2h;
}
``

Can you test if it works?`

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

@georgeedwards, just did a PR here: DefinitelyTyped/DefinitelyTyped#10681

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

@georgeedwards take a look ate the published version. And let me know if it works.

from diff2html.

dilips86 avatar dilips86 commented on May 24, 2024

@rtfpessoa
I'm trying to use the Diff2HtmlUI for two json comparison like below as per doc.
var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
Trying in Angular 2.

Squawking with error saying Diff2HtmlUI() is not a defined constructor?

Can you provide help how to integrate in Angular2 to compare two json objects and highlight the differences?

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

@dilips86. I never used Angular so I am not sure if I can help.

Also diff2htmlui does not have a typescript definition, only diff2html has.

Maybe you can check #146 and see if it helps you.

from diff2html.

dilips86 avatar dilips86 commented on May 24, 2024

@rtfpessoa Thanks . Will check.

Also, in the Diff2Html.getPrettyHtml() , does the outputFormat: 'side-by-side' works? I couldn't see it effects.
var diff2htmlUi = Diff2Html.getPrettyHtml(difference, {inputFormat: 'diff', outputFormat: 'side-by-side', showFiles: false, matching: 'lines', templates:side-by-side-file-diff.mustache}); console.log("diff2htmlUi: " + diff2htmlUi);
Let me know if I miss anything here.

from diff2html.

dilips86 avatar dilips86 commented on May 24, 2024

@rtfpessoa Hey thanks. Anyways I figured it out the issue and fixed it. It works fine with difference highlighting as well with diff2html itself and not using diff2htmlUi.

Would also like to know, is there any API or functionality that will do highlighting the differences and still displays the entire json/string contents? Currently it shows only the differences [diff patch] snippets.

from diff2html.

rtfpessoa avatar rtfpessoa commented on May 24, 2024

@dilips86 diff2html does not generate any kind of diff. For you to have the full file you need to tell git to give you more context and pass a parameter to git like this, and then diff2html will just parse and generate the html as normal.

from diff2html.

Caiyeon avatar Caiyeon commented on May 24, 2024

@dilips86 were you able to get Diff2HtmlUi working? I'm seeing the same error
"TypeError: Diff2HtmlUI is not a constructor"
when importing via require('diff2html/dist/diff2html-ui.js').
I'm not sure if this is because the Diff2HtmlUI constructor was never exported or if I'm missing something.

from diff2html.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.