@react-native/debugger-frontend/dist/third-party/front_end/ui/components/diff_view/diff_view.js

Debugger frontend for React Native based on Chrome DevTools

import*as e from"../../../core/i18n/i18n.js";import*as i from"../../../third_party/diff/diff.js";import*as t from"../../visual_logging/visual_logging.js";import*as n from"../../lit/lit.js";import*as r from"../code_highlighter/code_highlighter.js";var s={cssText:`.diff-listing{display:grid;grid-template-columns:max-content max-content max-content auto;font-family:var(--source-code-font-family);font-size:var(--source-code-font-size);white-space:pre;line-height:1.2em;user-select:text}.diff-line-number{color:var(--sys-color-token-subtle);padding:0 3px 0 9px;text-align:right;user-select:none}.diff-line-marker{border-right:1px solid var(--sys-color-divider);width:20px;text-align:center}.diff-line-content{padding:0 4px}.diff-line-marker-addition,\n.diff-line-addition{background-color:var(--sys-color-surface-green)}.diff-line-marker-deletion,\n.diff-line-deletion{background-color:var(--sys-color-surface-error)}.diff-line-addition .inner-diff{background-color:color-mix(in srgb,var(--ref-palette-green70) 40%,transparent)}.diff-line-deletion .inner-diff{background-color:color-mix(in srgb,var(--ref-palette-error60) 40%,transparent)}.diff-hidden-text{display:inline-block;width:0;overflow:hidden}.diff-line-equal{opacity:50%}.diff-line-spacer{text-align:center;background-color:var(--sys-color-surface5)}\n/*# sourceURL=${import.meta.resolve("./diffView.css")} */\n`};const o=new CSSStyleSheet;o.replaceSync(s.cssText);const a=new CSSStyleSheet;a.replaceSync(r.codeHighlighterStyles.cssText);const{html:l}=n,d={deletions:"Deletion:",additions:"Addition:",changesDiffViewer:"Changes diff viewer",SkippingDMatchingLines:"( … Skipping {PH1} matching lines … )"},f=e.i18n.registerUIStrings("ui/components/diff_view/DiffView.ts",d),c=e.i18n.getLocalizedString.bind(void 0,f);function h(e){let t=0,n=0;const r=[],s=[],o=[];for(let t=0;t<e.length;++t){const n=e[t];switch(n[0]){case i.Diff.Operation.Equal:o.push(...a(n[1],0===t,t===e.length-1)),r.push(...n[1]),s.push(...n[1]);break;case i.Diff.Operation.Insert:for(const e of n[1])o.push(f(e,"addition"));s.push(...n[1]);break;case i.Diff.Operation.Delete:if(r.push(...n[1]),e[t+1]&&e[t+1][0]===i.Diff.Operation.Insert)t++,o.push(...l(n[1].join("\n"),e[t][1].join("\n"))),s.push(...e[t][1]);else for(const e of n[1])o.push(f(e,"deletion"))}}return{originalLines:r,currentLines:s,rows:o};function a(e,i,r){const s=[];if(!i){for(let i=0;i<3&&i<e.length;i++)s.push(f(e[i],"equal"));e.length>7&&!r&&s.push(f(c(d.SkippingDMatchingLines,{PH1:e.length-6}),"spacer"))}if(!r){const r=Math.max(e.length-3-1,i?0:3);let o=e.length-3-1;i||(o-=3),o>0&&(n+=o,t+=o);for(let i=r;i<e.length;i++)s.push(f(e[i],"equal"))}return s}function l(e,t){const n=i.Diff.DiffWrapper.charDiff(e,t,!0),r=[f("","deletion")],s=[f("","addition")];for(const e of n){const t=e[1],n=e[0],o=n===i.Diff.Operation.Equal?"":"inner-diff",a=t.split("\n");for(let e=0;e<a.length;e++)e>0&&n!==i.Diff.Operation.Insert&&r.push(f("","deletion")),e>0&&n!==i.Diff.Operation.Delete&&s.push(f("","addition")),a[e]&&(n!==i.Diff.Operation.Insert&&r[r.length-1].tokens.push({text:a[e],className:o}),n!==i.Diff.Operation.Delete&&s[s.length-1].tokens.push({text:a[e],className:o}))}return r.concat(s)}function f(e,i){return"addition"===i&&t++,"deletion"===i&&n++,"equal"===i&&(n++,t++),{originalLineNumber:n,currentLineNumber:t,tokens:e?[{text:e,className:"inner-diff"}]:[],type:i}}}function p(e){const i=new Map;for(let t=0,n=0;n<e.length;n++)i.set(n+1,t),t+=e[n].length+1;return i}class g{originalHighlighter;originalMap;currentHighlighter;currentMap;constructor(e,i,t,n){this.originalHighlighter=e,this.originalMap=i,this.currentHighlighter=t,this.currentMap=n}#e(e){return l`
      <div class="diff-listing" aria-label=${c(d.changesDiffViewer)}>
        ${e.map((e=>this.#i(e)))}
      </div>`}#i(e){const i="equal"===e.type||"deletion"===e.type?String(e.originalLineNumber):"",n="equal"===e.type||"addition"===e.type?String(e.currentLineNumber):"";let r="",s="diff-line-marker",o=null;return"addition"===e.type?(r="+",s+=" diff-line-addition",o=l`<span class="diff-hidden-text">${c(d.additions)}</span>`):"deletion"===e.type&&(r="-",s+=" diff-line-deletion",o=l`<span class="diff-hidden-text">${c(d.deletions)}</span>`),l`
      <div class="diff-line-number" aria-hidden="true">${i}</div>
      <div class="diff-line-number" aria-hidden="true">${n}</div>
      <div class=${s} aria-hidden="true">${r}</div>
      <div class="diff-line-content diff-line-${e.type}" data-line-number=${n} jslog=${t.link("changes.reveal-source").track({click:!0})}>${o}${this.#t(e)}</div>`}#t(e){if("spacer"===e.type)return e.tokens.map((e=>l`${e.text}`));const[i,t]="deletion"===e.type?[this.originalHighlighter,this.originalMap.get(e.originalLineNumber)]:[this.currentHighlighter,this.currentMap.get(e.currentLineNumber)],n=[];let r=t;for(const t of e.tokens){const e=[];i.highlightRange(r,r+t.text.length,((i,t)=>{e.push(t?l`<span class=${t}>${i}</span>`:i)})),n.push(t.className?l`<span class=${t.className}>${e}</span>`:l`${e}`),r+=t.text.length}return n}static async render(e,i,t){const{originalLines:s,currentLines:o,rows:a}=h(e),l=new g(await r.CodeHighlighter.create(s.join("\n"),i),p(s),await r.CodeHighlighter.create(o.join("\n"),i),p(o));n.render(l.#e(a),t,{host:this})}}let u=class extends HTMLElement{#n=this.attachShadow({mode:"open"});loaded;constructor(e){super(),this.#n.adoptedStyleSheets=[o,a],this.loaded=e?g.render(e.diff,e.mimeType,this.#n):Promise.resolve()}set data(e){this.loaded=g.render(e.diff,e.mimeType,this.#n)}};customElements.define("devtools-diff-view",u);var m=Object.freeze({__proto__:null,DiffView:u,buildDiffRows:h});export{m as DiffView};