RexSkz/json-diff-kit

Output html

cdtut opened this issue · 6 comments

cdtut commented

Should have way to output html string only and not need any javascript like react or vue then it can be added to any html page.

RexSkz commented

Do you mean to use CLI to output HTML string? If so, I think we can add a format param (default is diff, but it can support html to satisfy your need):

jsondiff run --format html before.json after.json -o result.html
cdtut commented

In CLI but also differ.toHtml(before, after); so it can be printed anywhere.

RexSkz commented

It seems reasonable. I'll implement it soon.

Meanwhile, some features, such as "virtual scroll" and "hide unchanged lines", can't be implemented by pure HTML. It will be listed in the document.

cdtut commented

What is virtual scroll?

Hide unchanged lines will work just not dynamic. Depending if is true or false it will output static html with unchanged lines or not.

Few suggestion is html should be minimal no <head> or <body> so can be used inside page. No stylesheet so we can set our own classes for elements like line-add and line-equal. Default stylesheet should be separate so we can include with <link> if we want.

RexSkz commented
  1. Virtual scroll is a technique that lets a page with a huge amount of lines scroll without jank. It needs JS to calculate which lines are in the viewport.
  2. It's okay to support hiding unchanged lines technically. I'll add it if you insist, but it looks weird... lol
  3. Whether to output <head> & <body> can be made configurable, the default stylesheet can be placed inside the dist dir.
cdtut commented

I tried in demo and hiding unchanged lines is still helpful without javascript. Instead of link to show more lines it can be only text that say "5 unchanged lines hidden".

If I can suggest by default <head>, <body> and default stylesheet shouldn't be generated (enable with options). Anyone who produce diff as html string probably want to embed in something else.

  • 👍1