File tree Expand file tree Collapse file tree 1 file changed +42
-0
lines changed
Expand file tree Collapse file tree 1 file changed +42
-0
lines changed Original file line number Diff line number Diff line change @@ -300,6 +300,48 @@ index 0000001..0ddf2ba
300300</html >
301301```
302302
303+ #### StimulusJS with TypeScript
304+
305+ ``` ts
306+ import { Controller } from " @hotwired/stimulus" ;
307+
308+ import {
309+ Diff2HtmlUI ,
310+ Diff2HtmlUIConfig ,
311+ } from " diff2html/lib/ui/js/diff2html-ui-slim.js" ;
312+
313+ // Requires `yarn add highlight.js`
314+ import " highlight.js/styles/github.css" ;
315+ import " diff2html/bundles/css/diff2html.min.css" ;
316+
317+ export default class extends Controller {
318+ connect(): void {
319+ const diff2htmlUi = new Diff2HtmlUI (
320+ this .diffElement ,
321+ this .unifiedDiff ,
322+ this .diffConfiguration
323+ );
324+
325+ diff2htmlUi .draw ();
326+ }
327+
328+ get unifiedDiff(): string {
329+ return this .data .get (" unifiedDiff" ) || " " ;
330+ }
331+
332+ get diffElement(): HTMLElement {
333+ return this .element as HTMLElement ;
334+ }
335+
336+ get diffConfiguration(): Diff2HtmlUIConfig {
337+ return {
338+ drawFileList: true ,
339+ matching: " lines" ,
340+ };
341+ }
342+ }
343+ ```
344+
303345## Diff2Html Usage
304346
305347### Diff2Html API
You can’t perform that action at this time.
0 commit comments