|
| 1 | +<script lang="ts"> |
| 2 | + import { |
| 3 | + getPlainDiffTemplate, |
| 4 | + getPlainLineTemplate, |
| 5 | + type DiffLine, |
| 6 | + type File |
| 7 | + } from '@git-diff-view/core'; |
| 8 | +
|
| 9 | + import DiffNoNewLine from './DiffNoNewLine.svelte'; |
| 10 | + import { |
| 11 | + addContentHighlightBGName, |
| 12 | + delContentHighlightBGName, |
| 13 | + diffFontSizeName, |
| 14 | + getSymbol, |
| 15 | + NewLineSymbol |
| 16 | + } from '@git-diff-view/utils'; |
| 17 | +
|
| 18 | + interface Props { |
| 19 | + rawLine: string; |
| 20 | + diffLine?: DiffLine; |
| 21 | + plainLine?: File['plainFile'][number]; |
| 22 | + operator?: 'add' | 'del'; |
| 23 | + enableWrap?: boolean; |
| 24 | + enableTemplate?: boolean; |
| 25 | + } |
| 26 | +
|
| 27 | + let props: Props = $props(); |
| 28 | +
|
| 29 | + let isNewLineSymbolChanged = () => props.diffLine?.changes?.newLineSymbol; |
| 30 | +
|
| 31 | + const range = () => props.diffLine?.changes?.range; |
| 32 | +
|
| 33 | + const str1 = () => props.rawLine.slice(0, range()?.location); |
| 34 | +
|
| 35 | + const str2 = () => { |
| 36 | + const r = range(); |
| 37 | + return r ? props.rawLine.slice(r.location, r.location + r.length) : ''; |
| 38 | + }; |
| 39 | +
|
| 40 | + const str3 = () => { |
| 41 | + const r = range(); |
| 42 | + return r ? props.rawLine.slice(r.location + r.length) : ''; |
| 43 | + }; |
| 44 | +
|
| 45 | + const isLast = () => str2().includes('\n'); |
| 46 | +
|
| 47 | + const _str2 = () => (isLast() ? str2().replace('\n', '').replace('\r', '') : str2); |
| 48 | +
|
| 49 | + const initTemplate = () => { |
| 50 | + if (props.diffLine?.changes?.hasLineChange) { |
| 51 | + if ( |
| 52 | + props.enableTemplate && |
| 53 | + props.diffLine?.plainTemplate && |
| 54 | + typeof getPlainDiffTemplate === 'function' |
| 55 | + ) { |
| 56 | + getPlainDiffTemplate({ |
| 57 | + diffLine: props.diffLine, |
| 58 | + rawLine: props.rawLine, |
| 59 | + operator: props.operator || 'add' |
| 60 | + }); |
| 61 | + } |
| 62 | + } else { |
| 63 | + if (props.enableTemplate && props.plainLine && !props.plainLine?.template) { |
| 64 | + props.plainLine.template = getPlainLineTemplate(props.plainLine.value); |
| 65 | + } |
| 66 | + } |
| 67 | + }; |
| 68 | +
|
| 69 | + initTemplate(); |
| 70 | +</script> |
| 71 | + |
| 72 | +{#if props.diffLine?.changes?.hasLineChange} |
| 73 | + {#if props.enableTemplate && props.diffLine?.plainTemplate} |
| 74 | + <span class="diff-line-content-raw"> |
| 75 | + <span data-template> |
| 76 | + {@html props.diffLine.plainTemplate} |
| 77 | + </span> |
| 78 | + {#if isNewLineSymbolChanged() === NewLineSymbol.NEWLINE} |
| 79 | + <span |
| 80 | + data-no-newline-at-end-of-file-symbol |
| 81 | + class={props.enableWrap |
| 82 | + ? 'block !text-red-500' |
| 83 | + : 'inline-block align-middle !text-red-500'} |
| 84 | + style={` |
| 85 | + width: var(${diffFontSizeName}), |
| 86 | + height: var(${diffFontSizeName}) |
| 87 | + `} |
| 88 | + > |
| 89 | + <DiffNoNewLine /> |
| 90 | + </span> |
| 91 | + {/if} |
| 92 | + </span> |
| 93 | + {:else} |
| 94 | + <span class="diff-line-content-raw"> |
| 95 | + <span |
| 96 | + data-range-start={range()?.location} |
| 97 | + data-range-end={range() ? range()!.location + range()!.length : 0} |
| 98 | + > |
| 99 | + {str1()} |
| 100 | + <span |
| 101 | + data-diff-highlight |
| 102 | + class="rounded-[0.2em]" |
| 103 | + style={` |
| 104 | + background-color: |
| 105 | + operator === "add" ? var(${addContentHighlightBGName}) : var(${delContentHighlightBGName}), |
| 106 | + `} |
| 107 | + > |
| 108 | + {#if isLast()} |
| 109 | + {_str2()} |
| 110 | + <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged())}</span> |
| 111 | + {:else} |
| 112 | + {str2()} |
| 113 | + {/if} |
| 114 | + </span> |
| 115 | + {str3} |
| 116 | + </span> |
| 117 | + {#if isNewLineSymbolChanged() === NewLineSymbol.NEWLINE} |
| 118 | + <span |
| 119 | + data-no-newline-at-end-of-file-symbol |
| 120 | + class={props.enableWrap |
| 121 | + ? 'block !text-red-500' |
| 122 | + : 'inline-block align-middle !text-red-500'} |
| 123 | + style={` |
| 124 | + width: var(${diffFontSizeName}), |
| 125 | + height: var(${diffFontSizeName}) |
| 126 | + `} |
| 127 | + > |
| 128 | + <DiffNoNewLine /> |
| 129 | + </span> |
| 130 | + {/if} |
| 131 | + </span> |
| 132 | + {/if} |
| 133 | +{:else if props.enableTemplate && props.plainLine?.template} |
| 134 | + <span class="diff-line-content-raw"> |
| 135 | + <span data-template> |
| 136 | + {@html props.plainLine.template} |
| 137 | + </span> |
| 138 | + </span> |
| 139 | +{:else} |
| 140 | + <span class="diff-line-content-raw">{props.rawLine}</span> |
| 141 | +{/if} |
0 commit comments