Skip to content

Commit bc6ca55

Browse files
authored
Update README.md
1 parent 9738420 commit bc6ca55

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff 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

0 commit comments

Comments
 (0)