@uibit/diff-viewer 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,17 @@
1
1
  # Diff Viewer
2
2
 
3
+ [![NPM Version](https://img.shields.io/npm/v/@uibit/diff-viewer.svg?style=flat-square&color=black)](https://www.npmjs.com/package/@uibit/diff-viewer)
4
+
5
+
3
6
  [Interactive Demonstration](https://rawlings.github.io/uibit/components/diff-viewer)
4
7
 
8
+ ## Installation
9
+
10
+ ```bash
11
+ npm install @uibit/diff-viewer
12
+ ```
13
+
14
+
5
15
  Diff Viewer provides a comparison block for reviewing differences between two sets of text or code. It computes a line-level diff internally using the Longest Common Subsequence (LCS) algorithm, displaying additions and removals in a side-by-side (split) or inline format.
6
16
 
7
17
  ## Value Delivery
@@ -8,7 +8,7 @@
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "Side-by-side or inline comparison block for two blocks of text or code.\nComputes a line-level diff internally using LCS — no external libraries needed.\nDeleted lines are highlighted red, inserted lines green, in the familiar\ncode-review style.\n\nSupply the two texts via the `old` and `new` properties (or `old-text` /\n`new-text` attributes for HTML usage). Switch between layouts with the\n`mode` attribute.",
11
+ "description": "Side-by-side or inline comparison block for two blocks of text or code.",
12
12
  "name": "DiffViewer",
13
13
  "cssProperties": [
14
14
  {
@@ -208,6 +208,211 @@
208
208
  }
209
209
  }
210
210
  ]
211
+ },
212
+ {
213
+ "kind": "field",
214
+ "name": "locale",
215
+ "type": {
216
+ "text": "string"
217
+ },
218
+ "default": "''",
219
+ "description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
220
+ "attribute": "locale",
221
+ "inheritedFrom": {
222
+ "name": "UIBitElement",
223
+ "module": "../../platform/core/src/element.ts"
224
+ }
225
+ },
226
+ {
227
+ "kind": "field",
228
+ "name": "resolvedLocale",
229
+ "type": {
230
+ "text": "string | undefined"
231
+ },
232
+ "description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
233
+ "readonly": true,
234
+ "inheritedFrom": {
235
+ "name": "UIBitElement",
236
+ "module": "../../platform/core/src/element.ts"
237
+ }
238
+ },
239
+ {
240
+ "kind": "field",
241
+ "name": "_disposables",
242
+ "type": {
243
+ "text": "Set<() => void>"
244
+ },
245
+ "privacy": "private",
246
+ "default": "new Set()",
247
+ "inheritedFrom": {
248
+ "name": "UIBitElement",
249
+ "module": "../../platform/core/src/element.ts"
250
+ }
251
+ },
252
+ {
253
+ "kind": "method",
254
+ "name": "createProperty",
255
+ "static": true,
256
+ "parameters": [
257
+ {
258
+ "name": "name",
259
+ "type": {
260
+ "text": "PropertyKey"
261
+ }
262
+ },
263
+ {
264
+ "name": "options",
265
+ "optional": true,
266
+ "type": {
267
+ "text": "PropertyDeclaration"
268
+ }
269
+ }
270
+ ],
271
+ "description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
272
+ "inheritedFrom": {
273
+ "name": "UIBitElement",
274
+ "module": "../../platform/core/src/element.ts"
275
+ }
276
+ },
277
+ {
278
+ "kind": "method",
279
+ "name": "finalizeStyles",
280
+ "static": true,
281
+ "return": {
282
+ "type": {
283
+ "text": "Array<any>"
284
+ }
285
+ },
286
+ "parameters": [
287
+ {
288
+ "name": "styles",
289
+ "optional": true,
290
+ "type": {
291
+ "text": "CSSResultGroup"
292
+ }
293
+ }
294
+ ],
295
+ "description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
296
+ "inheritedFrom": {
297
+ "name": "UIBitElement",
298
+ "module": "../../platform/core/src/element.ts"
299
+ }
300
+ },
301
+ {
302
+ "kind": "method",
303
+ "name": "dispatchCustomEvent",
304
+ "return": {
305
+ "type": {
306
+ "text": "boolean"
307
+ }
308
+ },
309
+ "parameters": [
310
+ {
311
+ "name": "name",
312
+ "type": {
313
+ "text": "string"
314
+ }
315
+ },
316
+ {
317
+ "name": "detail",
318
+ "optional": true,
319
+ "type": {
320
+ "text": "T"
321
+ }
322
+ },
323
+ {
324
+ "name": "options",
325
+ "optional": true,
326
+ "type": {
327
+ "text": "Omit<CustomEventInit<T>, 'detail'>"
328
+ }
329
+ }
330
+ ],
331
+ "description": "Helper to dispatch a custom event with standard bubbles and composed options.",
332
+ "inheritedFrom": {
333
+ "name": "UIBitElement",
334
+ "module": "../../platform/core/src/element.ts"
335
+ }
336
+ },
337
+ {
338
+ "kind": "method",
339
+ "name": "getCssPropertyValue",
340
+ "return": {
341
+ "type": {
342
+ "text": "string"
343
+ }
344
+ },
345
+ "parameters": [
346
+ {
347
+ "name": "propertyName",
348
+ "type": {
349
+ "text": "string"
350
+ }
351
+ }
352
+ ],
353
+ "description": "Helper to retrieve a computed CSS custom property value from the element.",
354
+ "inheritedFrom": {
355
+ "name": "UIBitElement",
356
+ "module": "../../platform/core/src/element.ts"
357
+ }
358
+ },
359
+ {
360
+ "kind": "method",
361
+ "name": "registerDisposable",
362
+ "parameters": [
363
+ {
364
+ "name": "cleanup",
365
+ "type": {
366
+ "text": "() => void"
367
+ }
368
+ }
369
+ ],
370
+ "description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
371
+ "inheritedFrom": {
372
+ "name": "UIBitElement",
373
+ "module": "../../platform/core/src/element.ts"
374
+ }
375
+ },
376
+ {
377
+ "kind": "method",
378
+ "name": "listen",
379
+ "return": {
380
+ "type": {
381
+ "text": "() => void"
382
+ }
383
+ },
384
+ "parameters": [
385
+ {
386
+ "name": "target",
387
+ "type": {
388
+ "text": "EventTarget"
389
+ }
390
+ },
391
+ {
392
+ "name": "type",
393
+ "type": {
394
+ "text": "K"
395
+ }
396
+ },
397
+ {
398
+ "name": "listener",
399
+ "type": {
400
+ "text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
401
+ }
402
+ },
403
+ {
404
+ "name": "options",
405
+ "optional": true,
406
+ "type": {
407
+ "text": "boolean | AddEventListenerOptions"
408
+ }
409
+ }
410
+ ],
411
+ "description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
412
+ "inheritedFrom": {
413
+ "name": "UIBitElement",
414
+ "module": "../../platform/core/src/element.ts"
415
+ }
211
416
  }
212
417
  ],
213
418
  "attributes": [
@@ -228,12 +433,36 @@
228
433
  "default": "true",
229
434
  "description": "Show line numbers in the gutter.",
230
435
  "fieldName": "showLineNumbers"
436
+ },
437
+ {
438
+ "name": "locale",
439
+ "type": {
440
+ "text": "string"
441
+ },
442
+ "default": "''",
443
+ "description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
444
+ "fieldName": "locale",
445
+ "inheritedFrom": {
446
+ "name": "UIBitElement",
447
+ "module": "../../platform/core/src/element.ts"
448
+ }
449
+ }
450
+ ],
451
+ "cssStates": [
452
+ {
453
+ "name": "split",
454
+ "description": "Active when in split-pane side-by-side view."
455
+ },
456
+ {
457
+ "name": "unified",
458
+ "description": "Active when in unified inline view."
231
459
  }
232
460
  ],
233
461
  "superclass": {
234
462
  "name": "UIBitElement",
235
463
  "package": "@uibit/core"
236
464
  },
465
+ "summary": "A high-performance side-by-side or inline code diff viewer component.\nComputes a line-level diff internally using LCS — no external libraries needed.\nDeleted lines are highlighted red, inserted lines green, in the familiar\ncode-review style.\n\nSupply the two texts via the `old` and `new` properties (or `old-text` /\n`new-text` attributes for HTML usage). Switch between layouts with the\n`mode` attribute.",
237
466
  "tagName": "uibit-diff-viewer",
238
467
  "customElement": true
239
468
  }
@@ -369,6 +598,250 @@
369
598
  "path": "src/types.ts",
370
599
  "declarations": [],
371
600
  "exports": []
601
+ },
602
+ {
603
+ "kind": "javascript-module",
604
+ "path": "../../platform/core/src/element.ts",
605
+ "declarations": [
606
+ {
607
+ "kind": "class",
608
+ "description": "A foundational base class for all UIBit web components.\nProvides custom event helpers, default kebab-case attribute mapping,\nautomatic cleanup/disposable tracking, and auto-injected reset styles.",
609
+ "name": "UIBitElement",
610
+ "members": [
611
+ {
612
+ "kind": "field",
613
+ "name": "locale",
614
+ "type": {
615
+ "text": "string"
616
+ },
617
+ "default": "''",
618
+ "description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
619
+ "attribute": "locale"
620
+ },
621
+ {
622
+ "kind": "field",
623
+ "name": "resolvedLocale",
624
+ "type": {
625
+ "text": "string | undefined"
626
+ },
627
+ "description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
628
+ "readonly": true
629
+ },
630
+ {
631
+ "kind": "field",
632
+ "name": "_disposables",
633
+ "type": {
634
+ "text": "Set<() => void>"
635
+ },
636
+ "privacy": "private",
637
+ "default": "new Set()"
638
+ },
639
+ {
640
+ "kind": "method",
641
+ "name": "createProperty",
642
+ "static": true,
643
+ "parameters": [
644
+ {
645
+ "name": "name",
646
+ "type": {
647
+ "text": "PropertyKey"
648
+ }
649
+ },
650
+ {
651
+ "name": "options",
652
+ "optional": true,
653
+ "type": {
654
+ "text": "PropertyDeclaration"
655
+ }
656
+ }
657
+ ],
658
+ "description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
659
+ },
660
+ {
661
+ "kind": "method",
662
+ "name": "finalizeStyles",
663
+ "static": true,
664
+ "return": {
665
+ "type": {
666
+ "text": "Array<any>"
667
+ }
668
+ },
669
+ "parameters": [
670
+ {
671
+ "name": "styles",
672
+ "optional": true,
673
+ "type": {
674
+ "text": "CSSResultGroup"
675
+ }
676
+ }
677
+ ],
678
+ "description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
679
+ },
680
+ {
681
+ "kind": "method",
682
+ "name": "dispatchCustomEvent",
683
+ "return": {
684
+ "type": {
685
+ "text": "boolean"
686
+ }
687
+ },
688
+ "parameters": [
689
+ {
690
+ "name": "name",
691
+ "type": {
692
+ "text": "string"
693
+ }
694
+ },
695
+ {
696
+ "name": "detail",
697
+ "optional": true,
698
+ "type": {
699
+ "text": "T"
700
+ }
701
+ },
702
+ {
703
+ "name": "options",
704
+ "optional": true,
705
+ "type": {
706
+ "text": "Omit<CustomEventInit<T>, 'detail'>"
707
+ }
708
+ }
709
+ ],
710
+ "description": "Helper to dispatch a custom event with standard bubbles and composed options."
711
+ },
712
+ {
713
+ "kind": "method",
714
+ "name": "getCssPropertyValue",
715
+ "return": {
716
+ "type": {
717
+ "text": "string"
718
+ }
719
+ },
720
+ "parameters": [
721
+ {
722
+ "name": "propertyName",
723
+ "type": {
724
+ "text": "string"
725
+ }
726
+ }
727
+ ],
728
+ "description": "Helper to retrieve a computed CSS custom property value from the element."
729
+ },
730
+ {
731
+ "kind": "method",
732
+ "name": "registerDisposable",
733
+ "parameters": [
734
+ {
735
+ "name": "cleanup",
736
+ "type": {
737
+ "text": "() => void"
738
+ }
739
+ }
740
+ ],
741
+ "description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
742
+ },
743
+ {
744
+ "kind": "method",
745
+ "name": "listen",
746
+ "return": {
747
+ "type": {
748
+ "text": "() => void"
749
+ }
750
+ },
751
+ "parameters": [
752
+ {
753
+ "name": "target",
754
+ "type": {
755
+ "text": "EventTarget"
756
+ }
757
+ },
758
+ {
759
+ "name": "type",
760
+ "type": {
761
+ "text": "K"
762
+ }
763
+ },
764
+ {
765
+ "name": "listener",
766
+ "type": {
767
+ "text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
768
+ }
769
+ },
770
+ {
771
+ "name": "options",
772
+ "optional": true,
773
+ "type": {
774
+ "text": "boolean | AddEventListenerOptions"
775
+ }
776
+ }
777
+ ],
778
+ "description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
779
+ },
780
+ {
781
+ "kind": "method",
782
+ "name": "listen",
783
+ "return": {
784
+ "type": {
785
+ "text": "() => void"
786
+ }
787
+ },
788
+ "parameters": [
789
+ {
790
+ "name": "target",
791
+ "type": {
792
+ "text": "EventTarget"
793
+ }
794
+ },
795
+ {
796
+ "name": "type",
797
+ "type": {
798
+ "text": "string"
799
+ }
800
+ },
801
+ {
802
+ "name": "listener",
803
+ "type": {
804
+ "text": "EventListenerOrEventListenerObject"
805
+ }
806
+ },
807
+ {
808
+ "name": "options",
809
+ "optional": true,
810
+ "type": {
811
+ "text": "boolean | AddEventListenerOptions"
812
+ }
813
+ }
814
+ ]
815
+ }
816
+ ],
817
+ "attributes": [
818
+ {
819
+ "name": "locale",
820
+ "type": {
821
+ "text": "string"
822
+ },
823
+ "default": "''",
824
+ "description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
825
+ "fieldName": "locale"
826
+ }
827
+ ],
828
+ "superclass": {
829
+ "name": "LitElement",
830
+ "package": "lit"
831
+ },
832
+ "customElement": true
833
+ }
834
+ ],
835
+ "exports": [
836
+ {
837
+ "kind": "js",
838
+ "name": "UIBitElement",
839
+ "declaration": {
840
+ "name": "UIBitElement",
841
+ "module": "../../platform/core/src/element.ts"
842
+ }
843
+ }
844
+ ]
372
845
  }
373
846
  ]
374
847
  }
@@ -1,6 +1,8 @@
1
1
  import { UIBitElement } from '@uibit/core';
2
2
  /**
3
3
  * Side-by-side or inline comparison block for two blocks of text or code.
4
+
5
+ * @summary A high-performance side-by-side or inline code diff viewer component.
4
6
  * Computes a line-level diff internally using LCS — no external libraries needed.
5
7
  * Deleted lines are highlighted red, inserted lines green, in the familiar
6
8
  * code-review style.
@@ -25,7 +27,9 @@ import { UIBitElement } from '@uibit/core';
25
27
  * @cssprop [--uibit-diff-viewer-insert-color=#166534] - Inserted-line text color
26
28
  * @cssprop [--uibit-diff-viewer-insert-gutter-bg=#dcfce7] - Inserted-line gutter background
27
29
  * @cssprop [--uibit-diff-viewer-equal-color=var(--uibit-text-secondary)] - Unchanged-line text color
28
- */
30
+
31
+ * @cssstate split - Active when in split-pane side-by-side view.
32
+ * @cssstate unified - Active when in unified inline view.*/
29
33
  export declare class DiffViewer extends UIBitElement {
30
34
  static styles: import("lit").CSSResult;
31
35
  private oldText;
@@ -1 +1 @@
1
- {"version":3,"file":"diff-viewer.d.ts","sourceRoot":"","sources":["../src/diff-viewer.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,OAAO,CAAM;IAE9B,+FAA+F;IAClE,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAW;IAEhE,iBAAiB,SAQhB;IAED,uCAAuC;IACsB,eAAe,UAAQ;IAEpF,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAQxB,MAAM,oCAOL;CACF;eAEc,UAAU"}
1
+ {"version":3,"file":"diff-viewer.d.ts","sourceRoot":"","sources":["../src/diff-viewer.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4DA8B4D;AAC5D,qBACa,UAAW,SAAQ,YAAY;IAC1C,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,OAAO,CAAM;IAE9B,+FAA+F;IAClE,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAW;IAEhE,iBAAiB,SAQhB;IAED,uCAAuC;IACsB,eAAe,UAAQ;IAEpF,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAQxB,MAAM,oCAOL;CACF;eAEc,UAAU"}
@@ -11,6 +11,8 @@ import { styles } from './styles';
11
11
  import { diffLines } from './diff';
12
12
  /**
13
13
  * Side-by-side or inline comparison block for two blocks of text or code.
14
+
15
+ * @summary A high-performance side-by-side or inline code diff viewer component.
14
16
  * Computes a line-level diff internally using LCS — no external libraries needed.
15
17
  * Deleted lines are highlighted red, inserted lines green, in the familiar
16
18
  * code-review style.
@@ -35,7 +37,9 @@ import { diffLines } from './diff';
35
37
  * @cssprop [--uibit-diff-viewer-insert-color=#166534] - Inserted-line text color
36
38
  * @cssprop [--uibit-diff-viewer-insert-gutter-bg=#dcfce7] - Inserted-line gutter background
37
39
  * @cssprop [--uibit-diff-viewer-equal-color=var(--uibit-text-secondary)] - Unchanged-line text color
38
- */
40
+
41
+ * @cssstate split - Active when in split-pane side-by-side view.
42
+ * @cssstate unified - Active when in unified inline view.*/
39
43
  let DiffViewer = class DiffViewer extends UIBitElement {
40
44
  constructor() {
41
45
  super(...arguments);
@@ -1 +1 @@
1
- {"version":3,"file":"diff-viewer.js","sourceRoot":"","sources":["../src/diff-viewer.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"diff-viewer.js","sourceRoot":"","sources":["../src/diff-viewer.ts"],"names":[],"mappings":"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"}
@@ -1,27 +1,33 @@
1
1
  import { Component, ChangeDetectionStrategy, ElementRef, input, effect, booleanAttribute } from '@angular/core';
2
2
  import '@uibit/diff-viewer';
3
3
  import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
4
-
5
4
  @Component({
6
- selector: 'uibit-diff-viewer',
7
- template: '<ng-content></ng-content>',
8
- changeDetection: ChangeDetectionStrategy.OnPush,
9
- standalone: true
5
+ selector: 'uibit-diff-viewer',
6
+ template: '<ng-content></ng-content>',
7
+ changeDetection: ChangeDetectionStrategy.OnPush,
8
+ standalone: true
10
9
  })
11
10
  export class NgxDiffViewer {
12
- constructor(private el: ElementRef<HTMLElementClass>) {
13
- effect(() => {
14
- if (this.el.nativeElement) {
15
- this.el.nativeElement.mode = this.mode();
16
- }
11
+ constructor(private el: ElementRef<HTMLElementClass>){
12
+ effect(()=>{
13
+ if (this.el.nativeElement) {
14
+ this.el.nativeElement.mode = this.mode();
15
+ }
16
+ });
17
+ effect(()=>{
18
+ if (this.el.nativeElement) {
19
+ this.el.nativeElement.showLineNumbers = this.showLineNumbers();
20
+ }
21
+ });
22
+ effect(()=>{
23
+ if (this.el.nativeElement) {
24
+ this.el.nativeElement.locale = this.locale();
25
+ }
26
+ });
27
+ }
28
+ readonly mode = input<'split' | 'inline'>('split');
29
+ readonly showLineNumbers = input<boolean, any>(true, {
30
+ transform: booleanAttribute
17
31
  });
18
- effect(() => {
19
- if (this.el.nativeElement) {
20
- this.el.nativeElement.showLineNumbers = this.showLineNumbers();
21
- }
22
- });
23
- }
24
-
25
- readonly mode = input<'split' | 'inline', any>('split');
26
- readonly showLineNumbers = input<boolean, any>(true, { transform: booleanAttribute });
32
+ readonly locale = input<string>('');
27
33
  }
@@ -4,7 +4,12 @@ import '@uibit/diff-viewer';
4
4
  declare global {
5
5
  namespace astroHTML.JSX {
6
6
  interface IntrinsicElements {
7
- 'uibit-diff-viewer': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
7
+ 'uibit-diff-viewer': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
8
+ mode?: 'split' | 'inline';
9
+ showLineNumbers?: boolean;
10
+ locale?: string;
11
+
12
+ };
8
13
  }
9
14
  }
10
15
  }
@@ -8,6 +8,8 @@ declare module 'preact' {
8
8
  'uibit-diff-viewer': JSX.HTMLAttributes<HTMLElementClass> & {
9
9
  mode?: 'split' | 'inline';
10
10
  showLineNumbers?: boolean;
11
+ locale?: string;
12
+
11
13
  };
12
14
  }
13
15
  }
@@ -0,0 +1,72 @@
1
+ import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
2
+ import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
3
+ import '@uibit/diff-viewer';
4
+ const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
5
+ export interface DiffViewerProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'mode' | 'showLineNumbers' | 'locale'> {
6
+ children?: React.ReactNode;
7
+ mode?: 'split' | 'inline';
8
+ showLineNumbers?: boolean;
9
+ locale?: string;
10
+ }
11
+ export const DiffViewer = ({ ref, children, ...props }: DiffViewerProps & {
12
+ ref?: React.Ref<HTMLElementClass>;
13
+ })=>{
14
+ const innerRef = useRef<HTMLElementClass>(null);
15
+ const propsRef = useRef(props);
16
+ propsRef.current = props;
17
+ useImperativeHandle(ref, ()=>innerRef.current!);
18
+ useTypeOfLayoutEffect(()=>{
19
+ const element = innerRef.current;
20
+ if (element && props.mode !== undefined) {
21
+ (element as any).mode = props.mode;
22
+ }
23
+ }, [
24
+ props.mode
25
+ ]);
26
+ useTypeOfLayoutEffect(()=>{
27
+ const element = innerRef.current;
28
+ if (element && props.showLineNumbers !== undefined) {
29
+ (element as any).showLineNumbers = props.showLineNumbers;
30
+ }
31
+ }, [
32
+ props.showLineNumbers
33
+ ]);
34
+ useTypeOfLayoutEffect(()=>{
35
+ const element = innerRef.current;
36
+ if (element && props.locale !== undefined) {
37
+ (element as any).locale = props.locale;
38
+ }
39
+ }, [
40
+ props.locale
41
+ ]);
42
+ const domProps = {
43
+ ...props
44
+ };
45
+ const customPropNames = [
46
+ 'mode',
47
+ 'showLineNumbers',
48
+ 'locale'
49
+ ];
50
+ for (const key of customPropNames){
51
+ delete (domProps as any)[key];
52
+ }
53
+ return React.createElement('uibit-diff-viewer', {
54
+ ref: innerRef,
55
+ ...domProps
56
+ }, children);
57
+ };
58
+ declare global {
59
+ namespace React {
60
+ namespace JSX {
61
+ interface IntrinsicElements {
62
+ 'uibit-diff-viewer': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
63
+ children?: React.ReactNode;
64
+ class?: string;
65
+ mode?: 'split' | 'inline';
66
+ showLineNumbers?: boolean;
67
+ locale?: string;
68
+ };
69
+ }
70
+ }
71
+ }
72
+ }
@@ -8,6 +8,7 @@ declare module 'solid-js' {
8
8
  'uibit-diff-viewer': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
9
9
  mode?: 'split' | 'inline';
10
10
  showLineNumbers?: boolean;
11
+ locale?: string;
11
12
 
12
13
  };
13
14
  }
@@ -7,6 +7,8 @@ declare module '@stencil/core' {
7
7
  'uibit-diff-viewer': HTMLElementClass & {
8
8
  mode?: 'split' | 'inline';
9
9
  showLineNumbers?: boolean;
10
+ locale?: string;
11
+
10
12
  };
11
13
  }
12
14
  }
@@ -1,32 +1,66 @@
1
1
  <script lang="ts">
2
2
  import '@uibit/diff-viewer';
3
3
  import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
4
-
5
- let {
6
- mode = undefined,
7
- showLineNumbers = undefined,
8
- children
4
+
5
+ let {
6
+ mode = $bindable(),
7
+ showLineNumbers = $bindable(),
8
+ locale = $bindable(),
9
+ children,
10
+ ...restProps
9
11
  } = $props<{
10
- children?: any;
12
+ children?: import('svelte').Snippet;
11
13
  mode?: 'split' | 'inline';
12
14
  showLineNumbers?: boolean;
13
-
15
+ locale?: string;
16
+
17
+ [key: string]: any;
14
18
  }>();
15
-
16
- let elementRef: HTMLElementClass | null = $state(null);
17
-
18
- $effect(() => {
19
- if (elementRef && mode !== undefined) {
19
+
20
+ let elementRef: HTMLElementClass | null = $state(null);
21
+
22
+ $effect(() => {
23
+ if (elementRef && mode !== undefined && elementRef.mode !== mode) {
20
24
  elementRef.mode = mode;
21
25
  }
22
- if (elementRef && showLineNumbers !== undefined) {
26
+ if (elementRef && showLineNumbers !== undefined && elementRef.showLineNumbers !== showLineNumbers) {
23
27
  elementRef.showLineNumbers = showLineNumbers;
24
28
  }
29
+ if (elementRef && locale !== undefined && elementRef.locale !== locale) {
30
+ elementRef.locale = locale;
31
+ }
25
32
  });
26
-
33
+
34
+ $effect(() => {
35
+ const element = elementRef;
36
+ if (!element) return;
37
+
38
+ const handleEvent = () => {
39
+ if (mode !== element.mode) {
40
+ mode = element.mode as any;
41
+ }
42
+ if (showLineNumbers !== element.showLineNumbers) {
43
+ showLineNumbers = element.showLineNumbers as any;
44
+ }
45
+ if (locale !== element.locale) {
46
+ locale = element.locale as any;
47
+ }
48
+ };
49
+
50
+ const events = ['change', 'input'];
51
+ for (const event of events) {
52
+ element.addEventListener(event, handleEvent);
53
+ }
54
+ return () => {
55
+ for (const event of events) {
56
+ element.removeEventListener(event, handleEvent);
57
+ }
58
+ };
59
+ });
60
+
27
61
  </script>
28
62
 
29
- <uibit-diff-viewer bind:this={elementRef} {...$$restProps}>
63
+ <uibit-diff-viewer bind:this={elementRef} {...restProps}>
30
64
 
31
65
  {#if children}
32
66
  {@render children()}
@@ -1,23 +1,78 @@
1
- import { defineComponent, h } from 'vue';
1
+ import { defineComponent, h, ref, watch } from 'vue';
2
2
  import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
3
3
  import '@uibit/diff-viewer';
4
-
5
4
  export const DiffViewer = defineComponent({
6
- name: 'DiffViewer',
7
- props: {
8
- mode: { type: [String, Number, Boolean, Array, Object] as any },
9
- showLineNumbers: { type: [String, Number, Boolean, Array, Object] as any }
10
- },
11
- emits: [],
12
- setup(props, { slots, emit }) {
13
- return () => {
14
- const eventListeners: Record<string, any> = {};
15
-
16
-
17
- return h('uibit-diff-viewer', {
18
- ...props,
19
- ...eventListeners
20
- }, slots.default?.());
21
- };
22
- }
5
+ name: 'DiffViewer',
6
+ props: {
7
+ mode: {
8
+ type: [
9
+ String,
10
+ Number,
11
+ Boolean,
12
+ Array,
13
+ Object
14
+ ] as any
15
+ },
16
+ showLineNumbers: {
17
+ type: [
18
+ String,
19
+ Number,
20
+ Boolean,
21
+ Array,
22
+ Object
23
+ ] as any
24
+ },
25
+ locale: {
26
+ type: [
27
+ String,
28
+ Number,
29
+ Boolean,
30
+ Array,
31
+ Object
32
+ ] as any
33
+ }
34
+ },
35
+ emits: [],
36
+ setup (props, { slots, emit }) {
37
+ const elementRef = ref<HTMLElementClass | null>(null);
38
+ if (false) {
39
+ watch(()=>props.modelValue, (newVal)=>{
40
+ if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
41
+ elementRef.value.value = newVal;
42
+ }
43
+ });
44
+ watch(()=>props.value, (newVal)=>{
45
+ if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
46
+ elementRef.value.value = newVal;
47
+ }
48
+ });
49
+ }
50
+ watch(()=>props.mode, (newVal)=>{
51
+ if (elementRef.value && newVal !== undefined) {
52
+ (elementRef.value as any).mode = newVal;
53
+ }
54
+ });
55
+ watch(()=>props.showLineNumbers, (newVal)=>{
56
+ if (elementRef.value && newVal !== undefined) {
57
+ (elementRef.value as any).showLineNumbers = newVal;
58
+ }
59
+ });
60
+ watch(()=>props.locale, (newVal)=>{
61
+ if (elementRef.value && newVal !== undefined) {
62
+ (elementRef.value as any).locale = newVal;
63
+ }
64
+ });
65
+ return ()=>{
66
+ const eventListeners: Record<string, any> = {};
67
+ const mergedProps = {
68
+ ...props,
69
+ ...eventListeners,
70
+ ref: elementRef
71
+ };
72
+ if (false && props.modelValue !== undefined) {
73
+ (mergedProps as any).value = props.modelValue;
74
+ }
75
+ return h('uibit-diff-viewer', mergedProps, slots.default?.());
76
+ };
77
+ }
23
78
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uibit/diff-viewer",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Encapsulated side-by-side or inline comparison block for two text or code snippets. Computes a line-level diff internally using LCS and renders color-coded deleted/inserted/unchanged lines with optional line numbers.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -11,7 +11,7 @@
11
11
  "import": "./dist/index.js"
12
12
  },
13
13
  "./custom-elements.json": "./custom-elements.json",
14
- "./react": "./dist/frameworks/react/index.d.ts",
14
+ "./react": "./dist/frameworks/react/index.ts",
15
15
  "./vue": "./dist/frameworks/vue/index.ts",
16
16
  "./svelte": "./dist/frameworks/svelte/index.svelte",
17
17
  "./angular": "./dist/frameworks/angular/index.ts",
@@ -43,13 +43,13 @@
43
43
  "directory": "packages/components/diff-viewer"
44
44
  },
45
45
  "dependencies": {
46
- "@uibit/core": "0.1.0"
46
+ "@uibit/core": "0.2.0"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@types/node": "^20.19.43",
50
50
  "lit": "^3.3.3",
51
51
  "typescript": "7.0.2",
52
- "@uibit/codegen": "0.1.0"
52
+ "@uibit/codegen": "0.2.0"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "lit": "^3.0.0",
@@ -80,9 +80,9 @@
80
80
  "tagName": "uibit-diff-viewer"
81
81
  },
82
82
  "scripts": {
83
- "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
84
- "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
85
- "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
83
+ "build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
84
+ "dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
85
+ "analyze": "cem analyze --config ../custom-elements-manifest.config.js",
86
86
  "typecheck": "tsc --noEmit"
87
87
  }
88
88
  }
@@ -1,18 +0,0 @@
1
- import type { HTMLAttributes, ClassAttributes } from 'react';
2
- import type { DiffViewer as HTMLElementClass } from '@uibit/diff-viewer';
3
- import '@uibit/diff-viewer';
4
-
5
- declare global {
6
- namespace React {
7
- namespace JSX {
8
- interface IntrinsicElements {
9
- 'uibit-diff-viewer': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
10
- children?: React.ReactNode;
11
- class?: string;
12
- mode?: 'split' | 'inline';
13
- showLineNumbers?: boolean;
14
- };
15
- }
16
- }
17
- }
18
- }