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
300
300
</html >
301
301
```
302
302
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
+
303
345
## Diff2Html Usage
304
346
305
347
### Diff2Html API
You can’t perform that action at this time.
0 commit comments