@yuebai008/cli/dist/cli-server/client/front_end/ui/components/diff_view/DiffView.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../../core/i18n/i18n.js";import*as Diff from"../../../third_party/diff/diff.js";import*as LitHtml from"../../lit-html/lit-html.js";import*as CodeHighlighter from"../code_highlighter/code_highlighter.js";import*as ComponentHelpers from"../helpers/helpers.js";import diffViewStyles from"./diffView.css.js";const UIStrings={deletions:"Deletion:",additions:"Addition:",changesDiffViewer:"Changes diff viewer",SkippingDMatchingLines:"( … Skipping {PH1} matching lines … )"},str_=i18n.i18n.registerUIStrings("ui/components/diff_view/DiffView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export function buildDiffRows(e){let i=0,t=0;const n=[],r=[],s=[];for(let i=0;i<e.length;++i){const t=e[i];switch(t[0]){case Diff.Diff.Operation.Equal:s.push(...o(t[1],0===i,i===e.length-1)),n.push(...t[1]),r.push(...t[1]);break;case Diff.Diff.Operation.Insert:for(const e of t[1])s.push(f(e,"addition"));r.push(...t[1]);break;case Diff.Diff.Operation.Delete:if(n.push(...t[1]),e[i+1]&&e[i+1][0]===Diff.Diff.Operation.Insert)i++,s.push(...l(t[1].join("\n"),e[i][1].join("\n"))),r.push(...e[i][1]);else for(const e of t[1])s.push(f(e,"deletion"))}}return{originalLines:n,currentLines:r,rows:s};function o(e,n,r){const s=[];if(!n){for(let i=0;i<3&&i<e.length;i++)s.push(f(e[i],"equal"));e.length>7&&!r&&s.push(f(i18nString(UIStrings.SkippingDMatchingLines,{PH1:e.length-6}),"spacer"))}if(!r){const r=Math.max(e.length-3-1,n?0:3);let o=e.length-3-1;n||(o-=3),o>0&&(t+=o,i+=o);for(let i=r;i<e.length;i++)s.push(f(e[i],"equal"))}return s}function l(e,i){const t=Diff.Diff.DiffWrapper.charDiff(e,i,!0),n=[f("","deletion")],r=[f("","addition")];for(const e of t){const i=e[1],t=e[0],s=t===Diff.Diff.Operation.Equal?"":"inner-diff",o=i.split("\n");for(let e=0;e<o.length;e++)e>0&&t!==Diff.Diff.Operation.Insert&&n.push(f("","deletion")),e>0&&t!==Diff.Diff.Operation.Delete&&r.push(f("","addition")),o[e]&&(t!==Diff.Diff.Operation.Insert&&n[n.length-1].tokens.push({text:o[e],className:s}),t!==Diff.Diff.Operation.Delete&&r[r.length-1].tokens.push({text:o[e],className:s}))}return n.concat(r)}function f(e,n){return"addition"===n&&i++,"deletion"===n&&t++,"equal"===n&&(t++,i++),{originalLineNumber:t,currentLineNumber:i,tokens:e?[{text:e,className:"inner-diff"}]:[],type:n}}}function documentMap(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 DiffRenderer{originalHighlighter;originalMap;currentHighlighter;currentMap;constructor(e,i,t,n){this.originalHighlighter=e,this.originalMap=i,this.currentHighlighter=t,this.currentMap=n}#e(e){return LitHtml.html`
      <div class="diff-listing" aria-label=${i18nString(UIStrings.changesDiffViewer)}>
        ${e.map((e=>this.#i(e)))}
      </div>`}#i(e){const i="equal"===e.type||"deletion"===e.type?String(e.originalLineNumber):"",t="equal"===e.type||"addition"===e.type?String(e.currentLineNumber):"";let n="",r="diff-line-marker",s=null;return"addition"===e.type?(n="+",r+=" diff-line-addition",s=LitHtml.html`<span class="diff-hidden-text">${i18nString(UIStrings.additions)}</span>`):"deletion"===e.type&&(n="-",r+=" diff-line-deletion",s=LitHtml.html`<span class="diff-hidden-text">${i18nString(UIStrings.deletions)}</span>`),LitHtml.html`
      <div class="diff-line-number" aria-hidden="true">${i}</div>
      <div class="diff-line-number" aria-hidden="true">${t}</div>
      <div class=${r} aria-hidden="true">${n}</div>
      <div class="diff-line-content diff-line-${e.type}" data-line-number=${t}>${s}${this.#t(e)}</div>`}#t(e){if("spacer"===e.type)return e.tokens.map((e=>LitHtml.html`${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?LitHtml.html`<span class=${t}>${i}</span>`:i)})),n.push(t.className?LitHtml.html`<span class=${t.className}>${e}</span>`:LitHtml.html`${e}`),r+=t.text.length}return n}static async render(e,i,t){const{originalLines:n,currentLines:r,rows:s}=buildDiffRows(e),o=new DiffRenderer(await CodeHighlighter.CodeHighlighter.create(n.join("\n"),i),documentMap(n),await CodeHighlighter.CodeHighlighter.create(r.join("\n"),i),documentMap(r));LitHtml.render(o.#e(s),t,{host:this})}}export class DiffView extends HTMLElement{static litTagName=LitHtml.literal`devtools-diff-view`;#n=this.attachShadow({mode:"open"});loaded;constructor(e){super(),this.#n.adoptedStyleSheets=[diffViewStyles,CodeHighlighter.Style.default],this.loaded=e?DiffRenderer.render(e.diff,e.mimeType,this.#n):Promise.resolve()}set data(e){this.loaded=DiffRenderer.render(e.diff,e.mimeType,this.#n)}}ComponentHelpers.CustomElements.defineComponent("devtools-diff-view",DiffView);