Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: any recommendation on how to visualize the output? #18

Closed
kirillgroshkov opened this issue Dec 6, 2021 · 7 comments
Closed

Comments

@kirillgroshkov
Copy link

I like the library. But is there a recommended way to visualize the output? I'm looking for something that looks like jest-diff output or "github PR changes", e.g just for the terminal?

@AsyncBanana
Copy link
Owner

Good question! Currently, there is no recommended way to visualize changes. However, it should not be difficult to make your own method of doing this, and if you make an open-source library for this, I would love to feature it on the Microdiff README. Also, #17 should help once it is merged.

@denis-bel
Copy link
Contributor

I like the library. But is there a recommended way to visualize the output? I'm looking for something that looks like jest-diff output or "github PR changes", e.g just for the terminal?

Hello, would you like to visualize the output like this one?

image

(Green - was created, Red - was deleted, Yellow - was changed)

@kirillgroshkov
Copy link
Author

Hello, would you like to visualize the output like this one?

Yes, exactly.

Like github visualizes differences. Or Jest.

@denis-bel
Copy link
Contributor

Hello, would you like to visualize the output like this one?

Yes, exactly.

Like github visualizes differences. Or Jest.

Okay, I asked because GitHub cannot show that something has been changed. It shows that the content of the line was deleted and then added, but the microdiff has a CHANGE type. So it will be okay to have a third format for changed values?

@kirillgroshkov
Copy link
Author

Aha, then I misunderstood.

No, I don't see the need for CHANGE type, but instead I expect to see "what exactly" is changed in that line. E.g if a string is changed, it would show in red the removed characters and in green the added characters.

@denis-bel
Copy link
Contributor

So, consider these objects like old and new

const oldObject = {
	a: 'value',
	b: 'old value'
};
const newObject = {
	b: 'another value',
	c: 'new value'
};

Would you like to get output like this?

image

@AsyncBanana
Copy link
Owner

Closing this because a solution to this should be developed separately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants