From fd84b8404894c7df63557ecd594a2804ecaf25b3 Mon Sep 17 00:00:00 2001 From: Le Vivilet Date: Mon, 20 Jul 2026 00:34:55 +0000 Subject: [PATCH] feature: hoist static virtual dom nodes --- package-lock.json | 72 +++++++++---------- package.json | 2 +- packages/build/src/config.ts | 2 +- .../GetContentRightDom/GetContentRightDom.ts | 12 ++-- .../src/parts/GetCursorDom/GetCursorDom.ts | 12 ++-- .../GetDiffEditorButtonsDom.ts | 16 ++--- .../GetDiffEditorVirtualDom.ts | 4 +- .../GetDiffSearchHeaderDom.ts | 12 ++-- .../GetErrorCodeFrameDom.ts | 13 ++-- .../src/parts/GetErrorDom/GetErrorDom.ts | 12 ++-- .../GetErrorStackLineDom.ts | 13 ++-- .../parts/GetImageLeftDom/GetImageLeftDom.ts | 12 ++-- .../GetImageRightDom/GetImageRightDom.ts | 12 ++-- .../GetLineNumberClassName.ts | 7 +- .../parts/GetScrollBarDom/GetScrollBarDom.ts | 29 ++++---- .../parts/GetVisibleLines/GetVisibleLines.ts | 3 +- .../GetLineDom/GetLineDom.ts | 3 +- .../GetWhitespaceToggleDom.ts | 5 +- 18 files changed, 128 insertions(+), 113 deletions(-) diff --git a/package-lock.json b/package-lock.json index ff37616e..94ac1a43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "devDependencies": { "@lerna/legacy-package-management": "^8.2.4", - "@lvce-editor/eslint-config": "^16.4.0", + "@lvce-editor/eslint-config": "^17.0.3", "eslint": "^10.7.0", "lerna": "^8.2.3", "prettier": "^3.9.5", @@ -1701,9 +1701,9 @@ } }, "node_modules/@lvce-editor/eslint-config": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-config/-/eslint-config-16.4.0.tgz", - "integrity": "sha512-vc382ImEo+upv9LR+kr0vSpfyV8BBxKb+m2nCBVXjGm7eu5Cw9zTPv9X+mxOjWiNkUyWfuwY+NgbgsSC4Scu8g==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-config/-/eslint-config-17.0.3.tgz", + "integrity": "sha512-ChzOGQfCDANWLZlaR05tO6880FDTz9RZ+ATbijYSEByVDzdMSCgoDBPOzOXKDyCpeIR6KZ2I+O80mvNKTYlEgw==", "dev": true, "license": "MIT", "dependencies": { @@ -1713,14 +1713,14 @@ "@eslint/js": "10.0.1", "@eslint/json": "2.0.1", "@eslint/markdown": "8.0.3", - "@lvce-editor/eslint-plugin-devcontainer": "16.4.0", - "@lvce-editor/eslint-plugin-e2e": "16.4.0", - "@lvce-editor/eslint-plugin-github-actions": "16.4.0", - "@lvce-editor/eslint-plugin-nvmrc": "16.4.0", - "@lvce-editor/eslint-plugin-regex": "16.4.0", - "@lvce-editor/eslint-plugin-rpc": "16.4.0", - "@lvce-editor/eslint-plugin-tsconfig": "16.4.0", - "@lvce-editor/eslint-plugin-virtual-dom": "16.4.0", + "@lvce-editor/eslint-plugin-devcontainer": "17.0.3", + "@lvce-editor/eslint-plugin-e2e": "17.0.3", + "@lvce-editor/eslint-plugin-github-actions": "17.0.3", + "@lvce-editor/eslint-plugin-nvmrc": "17.0.3", + "@lvce-editor/eslint-plugin-regex": "17.0.3", + "@lvce-editor/eslint-plugin-rpc": "17.0.3", + "@lvce-editor/eslint-plugin-tsconfig": "17.0.3", + "@lvce-editor/eslint-plugin-virtual-dom": "17.0.3", "eslint-plugin-jest": "29.15.4", "eslint-plugin-n": "18.2.1", "eslint-plugin-package-json": "1.5.0", @@ -1735,9 +1735,9 @@ } }, "node_modules/@lvce-editor/eslint-plugin-devcontainer": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-devcontainer/-/eslint-plugin-devcontainer-16.4.0.tgz", - "integrity": "sha512-KWAhBTB5GZrgFoL16rYvY6QI+MHUd5kQ++uFWpV8WE2/pF4RI2xiOTft7lfWUD+EARG9ygyRFbgtVO0RFlFOQw==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-devcontainer/-/eslint-plugin-devcontainer-17.0.3.tgz", + "integrity": "sha512-9lKoUZZitH134WxgfjGsYS8I2p5/e2bdwMCAtSuc31+a9Q/atpRSqStUSlsyumRxt781lgRdUvn9/jhGzTEoUQ==", "dev": true, "license": "MIT", "dependencies": { @@ -1745,16 +1745,16 @@ } }, "node_modules/@lvce-editor/eslint-plugin-e2e": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-e2e/-/eslint-plugin-e2e-16.4.0.tgz", - "integrity": "sha512-kS1IGkvUeOZeVUGs+fxSOzGqqXRwWL1dZq1Kq0KHo24gNZ/WqKi2cLVWpAAyQZA+P0dp82SG7WwZ+NZHhPYoSA==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-e2e/-/eslint-plugin-e2e-17.0.3.tgz", + "integrity": "sha512-vE+DWFSlacnLOtHEhp5YS3q8Z0s0OQOBKYDvXG8g8fHyMGEQ2HFkE+WcIBe3LejQ39F2edh+y+vEs8xPgL8u0g==", "dev": true, "license": "MIT" }, "node_modules/@lvce-editor/eslint-plugin-github-actions": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-github-actions/-/eslint-plugin-github-actions-16.4.0.tgz", - "integrity": "sha512-T66LFDS0nX3/H5nxFiNIkUMEou55FlOxLgOfkbCivZdQQ+fTZnNYb1zOdkxk9hKzQC6RaO4Oj0soilT02TDOQQ==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-github-actions/-/eslint-plugin-github-actions-17.0.3.tgz", + "integrity": "sha512-+LMl161bH/f6iS4H+Uc/9lkZnF7jZOxChV2ghn0u9v3326r0rIfbE2eUiaWWZIxh2ox1qWXPWyGhyqxkdkUBjw==", "dev": true, "license": "MIT", "dependencies": { @@ -1763,9 +1763,9 @@ } }, "node_modules/@lvce-editor/eslint-plugin-nvmrc": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-nvmrc/-/eslint-plugin-nvmrc-16.4.0.tgz", - "integrity": "sha512-/vx42EiKdt8E7oJ+pbTTKC+V9tgO7yiLKnHlXi664A/s4rEQOfJbB9wq4HYY2hmsDymGokKcNCJNOrdE8GwszA==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-nvmrc/-/eslint-plugin-nvmrc-17.0.3.tgz", + "integrity": "sha512-KmcXC9mDB5a6aAYon+OP60ybRmfdlShu8EefEbkm+pL3+ZBvOBpaj0haHnCTD2sXBBiZCPqBsyIK6kuZSsVg0w==", "dev": true, "license": "MIT", "dependencies": { @@ -1786,23 +1786,23 @@ } }, "node_modules/@lvce-editor/eslint-plugin-regex": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-regex/-/eslint-plugin-regex-16.4.0.tgz", - "integrity": "sha512-XOVlNT6inumz2GLe70A5yuqRvEhGtXe2aCwtCuAnbkD5d1HH5G5NwSA374sF6Z+Kiy02s23eVfxOk+0oh2yQ6g==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-regex/-/eslint-plugin-regex-17.0.3.tgz", + "integrity": "sha512-QcDlgWoQdTkdt3CIINvQ+ZzKUJeYvPXq1s7AInPpqVHvkpmJAOkOst3lFDRNnLDcbW7HR3iynhzC54TqUNOqnw==", "dev": true, "license": "MIT" }, "node_modules/@lvce-editor/eslint-plugin-rpc": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-rpc/-/eslint-plugin-rpc-16.4.0.tgz", - "integrity": "sha512-ghI9uGpUyxPnJnVgKojf0RWTxGnNdmPz/JS4GdvHhw+Kl0cC2OQmvOKLDTSV423hj4WjaUBDqfdeAIZVMq0vLg==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-rpc/-/eslint-plugin-rpc-17.0.3.tgz", + "integrity": "sha512-LATOZfFUtuweBsCHJr8EpZv9CnKyFTKQ/JCPK8z3dHGXv/313pmGamN+N7qMioMXnzAL6M5OFRFpA2yBEU6euw==", "dev": true, "license": "MIT" }, "node_modules/@lvce-editor/eslint-plugin-tsconfig": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-tsconfig/-/eslint-plugin-tsconfig-16.4.0.tgz", - "integrity": "sha512-tVzMUV7vVy3H6M5kCgDxnL8EXRvDic0+GUb6fmzdsemU/HkA+zlKDbvKs9bfI79hX3EWeptFN2GOXnrGB84MbQ==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-tsconfig/-/eslint-plugin-tsconfig-17.0.3.tgz", + "integrity": "sha512-eXADQLKjL0eGvYItn0yKfZIGjnide4Su9emR7tsKTNsSHowEPX5IMfk+z90106xsR9G33kTutre2o94AOSihkQ==", "dev": true, "license": "MIT", "dependencies": { @@ -1810,9 +1810,9 @@ } }, "node_modules/@lvce-editor/eslint-plugin-virtual-dom": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-virtual-dom/-/eslint-plugin-virtual-dom-16.4.0.tgz", - "integrity": "sha512-h0QVBtyzs0/ICLIDBDB1DFzmdvyCHfJB/AFxaonFJ7f6PIrUEFz/HjxvX8jMhcCllRxUrslWqF6DC9Gs76isVw==", + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@lvce-editor/eslint-plugin-virtual-dom/-/eslint-plugin-virtual-dom-17.0.3.tgz", + "integrity": "sha512-HbcAuxZ/8ZltmOanAqqpqsmL5YZh6kOQZXcyEtH0Xl+xkRJlC3hS2KAEtWDANsHYZJsbM6S7fR4pdORcgiHcKg==", "dev": true, "license": "MIT" }, diff --git a/package.json b/package.json index 5cbb46fe..513bdd0a 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ }, "devDependencies": { "@lerna/legacy-package-management": "^8.2.4", - "@lvce-editor/eslint-config": "^16.4.0", + "@lvce-editor/eslint-config": "^17.0.3", "eslint": "^10.7.0", "lerna": "^8.2.3", "prettier": "^3.9.5", diff --git a/packages/build/src/config.ts b/packages/build/src/config.ts index 85d56a0a..cc56aee1 100644 --- a/packages/build/src/config.ts +++ b/packages/build/src/config.ts @@ -2,7 +2,7 @@ import { join } from 'node:path' import { pathToFileURL } from 'node:url' import { root } from './root.ts' -export const threshold = 525_000 +export const threshold = 530_000 export const instantiations = 8000 diff --git a/packages/diff-view/src/parts/GetContentRightDom/GetContentRightDom.ts b/packages/diff-view/src/parts/GetContentRightDom/GetContentRightDom.ts index de8c7e4b..2cdfa79b 100644 --- a/packages/diff-view/src/parts/GetContentRightDom/GetContentRightDom.ts +++ b/packages/diff-view/src/parts/GetContentRightDom/GetContentRightDom.ts @@ -27,12 +27,14 @@ interface GetContentRightDomOptions { readonly visibleLines?: readonly VisibleLine[] } +const diffEditorInputWrapperNode: VirtualDomNode = { + childCount: 1, + className: ClassNames.DiffEditorInputWrapper, + type: VirtualDomElements.Div, +} + const getInputWrapperDom = (inputValue: string, caretPosition = inputValue.length): readonly VirtualDomNode[] => [ - { - childCount: 1, - className: ClassNames.DiffEditorInputWrapper, - type: VirtualDomElements.Div, - }, + diffEditorInputWrapperNode, { childCount: 0, className: ClassNames.DiffEditorInput, diff --git a/packages/diff-view/src/parts/GetCursorDom/GetCursorDom.ts b/packages/diff-view/src/parts/GetCursorDom/GetCursorDom.ts index 8c0ae612..ad4e773d 100644 --- a/packages/diff-view/src/parts/GetCursorDom/GetCursorDom.ts +++ b/packages/diff-view/src/parts/GetCursorDom/GetCursorDom.ts @@ -2,13 +2,15 @@ import { VirtualDomElements, type VirtualDomNode } from '@lvce-editor/virtual-do import * as ClassNames from '../ClassNames/ClassNames.ts' import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' +const diffEditorSelectionsNode: VirtualDomNode = { + childCount: 1, + className: ClassNames.DiffEditorSelections, + type: VirtualDomElements.Div, +} + export const getCursorDom = (): readonly VirtualDomNode[] => { return [ - { - childCount: 1, - className: ClassNames.DiffEditorSelections, - type: VirtualDomElements.Div, - }, + diffEditorSelectionsNode, { childCount: 0, className: mergeClassNames(ClassNames.EditorCursor, ClassNames.EditorCursorRight), diff --git a/packages/diff-view/src/parts/GetDiffEditorButtonsDom/GetDiffEditorButtonsDom.ts b/packages/diff-view/src/parts/GetDiffEditorButtonsDom/GetDiffEditorButtonsDom.ts index 0b04c870..036b5b5f 100644 --- a/packages/diff-view/src/parts/GetDiffEditorButtonsDom/GetDiffEditorButtonsDom.ts +++ b/packages/diff-view/src/parts/GetDiffEditorButtonsDom/GetDiffEditorButtonsDom.ts @@ -5,14 +5,12 @@ import * as ClassNames from '../ClassNames/ClassNames.ts' import { getDiffModeToggleDom } from '../GetDiffModeToggleDom/GetDiffModeToggleDom.ts' import { getWhitespaceToggleDom } from '../GetWhitespaceToggleDom/GetWhitespaceToggleDom.ts' +const diffEditorButtonsNode: VirtualDomNode = { + childCount: 2, + className: ClassNames.DiffEditorButtons, + type: VirtualDomElements.Div, +} + export const getDiffEditorButtonsDom = (diffMode: DiffMode, showWhitespace: boolean): readonly VirtualDomNode[] => { - return [ - { - childCount: 2, - className: ClassNames.DiffEditorButtons, - type: VirtualDomElements.Div, - }, - ...getWhitespaceToggleDom(showWhitespace), - ...getDiffModeToggleDom(diffMode), - ] + return [diffEditorButtonsNode, ...getWhitespaceToggleDom(showWhitespace), ...getDiffModeToggleDom(diffMode)] } diff --git a/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts b/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts index 9e7c13a4..93a2033f 100644 --- a/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts +++ b/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts @@ -45,7 +45,7 @@ const getDiffEditorWithSearchDom = ( searchQuery: string, ): readonly VirtualDomNode[] => { return [ - getRootDom(scrollBarActive ? 4 : 3, `${ClassNames.Viewlet} ${ClassNames.DiffEditor} ${diffEditorLayoutClass} ${ClassNames.DiffEditorWithSearch}`), + getRootDom(scrollBarActive ? 4 : 3, mergeClassNames(ClassNames.Viewlet, ClassNames.DiffEditor, diffEditorLayoutClass, ClassNames.DiffEditorWithSearch)), ...getDiffSearchHeaderDom(contentLeft, contentRight, searchQuery), getEditorBodyDom(diffEditorLayoutClass), ...leftDom, @@ -66,7 +66,7 @@ const getDiffEditorWithoutSearchDom = ( scrollBarActive: boolean, ): readonly VirtualDomNode[] => { return [ - getRootDom(scrollBarActive ? 5 : 4, `${ClassNames.Viewlet} ${ClassNames.DiffEditor} ${diffEditorLayoutClass}`), + getRootDom(scrollBarActive ? 5 : 4, mergeClassNames(ClassNames.Viewlet, ClassNames.DiffEditor, diffEditorLayoutClass)), ...leftDom, getSashDom(sashLayoutClass), ...rightDom, diff --git a/packages/diff-view/src/parts/GetDiffSearchHeaderDom/GetDiffSearchHeaderDom.ts b/packages/diff-view/src/parts/GetDiffSearchHeaderDom/GetDiffSearchHeaderDom.ts index 924d2d85..3a707c02 100644 --- a/packages/diff-view/src/parts/GetDiffSearchHeaderDom/GetDiffSearchHeaderDom.ts +++ b/packages/diff-view/src/parts/GetDiffSearchHeaderDom/GetDiffSearchHeaderDom.ts @@ -3,6 +3,12 @@ import { VirtualDomElements } from '@lvce-editor/virtual-dom-worker' import * as ClassNames from '../ClassNames/ClassNames.ts' import * as DiffStrings from '../DiffStrings/DiffStrings.ts' +const diffSearchHeaderNode: VirtualDomNode = { + childCount: 1, + className: ClassNames.DiffSearchHeader, + type: VirtualDomElements.Div, +} + const countOccurrences = (text: string, query: string): number => { if (!query) return 0 let count = 0 @@ -24,11 +30,7 @@ export const getDiffSearchHeaderDom = (contentLeft: string, contentRight: string const widgetClass = total === 0 && query ? 'DiffSearchWidget DiffSearchWidgetNoResults' : 'DiffSearchWidget' return [ - { - childCount: 1, - className: ClassNames.DiffSearchHeader, - type: VirtualDomElements.Div, - }, + diffSearchHeaderNode, { childCount: 2, className: widgetClass, diff --git a/packages/diff-view/src/parts/GetErrorCodeFrameDom/GetErrorCodeFrameDom.ts b/packages/diff-view/src/parts/GetErrorCodeFrameDom/GetErrorCodeFrameDom.ts index ef48a114..3642f385 100644 --- a/packages/diff-view/src/parts/GetErrorCodeFrameDom/GetErrorCodeFrameDom.ts +++ b/packages/diff-view/src/parts/GetErrorCodeFrameDom/GetErrorCodeFrameDom.ts @@ -2,6 +2,11 @@ import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker' import * as ClassNames from '../ClassNames/ClassNames.ts' +const errorCodeFrameLineNode: VirtualDomNode = { + childCount: 1, + type: VirtualDomElements.Div, +} + export const getErrorCodeFrameDom = (codeFrame: string): readonly VirtualDomNode[] => { if (!codeFrame) { return [] @@ -13,12 +18,6 @@ export const getErrorCodeFrameDom = (codeFrame: string): readonly VirtualDomNode className: ClassNames.DiffEditorErrorCodeFrame, type: VirtualDomElements.Div, }, - ...lines.flatMap((line) => [ - { - childCount: 1, - type: VirtualDomElements.Div, - }, - text(line), - ]), + ...lines.flatMap((line) => [errorCodeFrameLineNode, text(line)]), ] } diff --git a/packages/diff-view/src/parts/GetErrorDom/GetErrorDom.ts b/packages/diff-view/src/parts/GetErrorDom/GetErrorDom.ts index 80050736..afbea38a 100644 --- a/packages/diff-view/src/parts/GetErrorDom/GetErrorDom.ts +++ b/packages/diff-view/src/parts/GetErrorDom/GetErrorDom.ts @@ -6,6 +6,12 @@ import { getErrorCodeFrameDom } from '../GetErrorCodeFrameDom/GetErrorCodeFrameD import { getErrorStackDom } from '../GetErrorStackDom/GetErrorStackDom.ts' import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' +const diffEditorErrorMessageNode: VirtualDomNode = { + childCount: 1, + className: ClassNames.DiffEditorErrorMessage, + type: VirtualDomElements.Div, +} + export const getErrorDom = ( contentClassName: string, errorMessage: string, @@ -20,11 +26,7 @@ export const getErrorDom = ( className: mergeClassNames(ClassNames.DiffEditorContent, contentClassName, ClassNames.DiffEditorError), type: VirtualDomElements.Div, }, - { - childCount: 1, - className: ClassNames.DiffEditorErrorMessage, - type: VirtualDomElements.Div, - }, + diffEditorErrorMessageNode, text(errorMessage), ...getErrorCodeFrameDom(errorCodeFrame), ...getErrorStackDom(errorStack, allowedLinkSchemes), diff --git a/packages/diff-view/src/parts/GetErrorStackDom/GetErrorStackLineDom/GetErrorStackLineDom.ts b/packages/diff-view/src/parts/GetErrorStackDom/GetErrorStackLineDom/GetErrorStackLineDom.ts index 3df9f045..57625d70 100644 --- a/packages/diff-view/src/parts/GetErrorStackDom/GetErrorStackLineDom/GetErrorStackLineDom.ts +++ b/packages/diff-view/src/parts/GetErrorStackDom/GetErrorStackLineDom/GetErrorStackLineDom.ts @@ -6,16 +6,15 @@ import { getStackLineLabel } from '../GetStackLineLabel/GetStackLineLabel.ts' import { getStackLineLocation } from '../GetStackLineLocation/GetStackLineLocation.ts' import { getStackLinePrefix } from '../GetStackLinePrefix/GetStackLinePrefix.ts' +const errorStackLineNode: VirtualDomNode = { + childCount: 1, + type: VirtualDomElements.Div, +} + export const getErrorStackLineDom = (stackLine: string, allowedLinkSchemes: readonly string[]): readonly VirtualDomNode[] => { const location = getStackLineLocation(stackLine) if (!location) { - return [ - { - childCount: 1, - type: VirtualDomElements.Div, - }, - text(stackLine), - ] + return [errorStackLineNode, text(stackLine)] } const prefix = getStackLinePrefix(stackLine) const href = getStackLineHref(location, allowedLinkSchemes) diff --git a/packages/diff-view/src/parts/GetImageLeftDom/GetImageLeftDom.ts b/packages/diff-view/src/parts/GetImageLeftDom/GetImageLeftDom.ts index da1ca8a7..c86af933 100644 --- a/packages/diff-view/src/parts/GetImageLeftDom/GetImageLeftDom.ts +++ b/packages/diff-view/src/parts/GetImageLeftDom/GetImageLeftDom.ts @@ -4,6 +4,12 @@ import * as ClassNames from '../ClassNames/ClassNames.ts' import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts' import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' +const imageContentNode: VirtualDomNode = { + childCount: 1, + className: ClassNames.ImageContent, + type: VirtualDomElements.Div, +} + export const getImageLeftDom = (uriLeft: string, imageSrc: string): readonly VirtualDomNode[] => { return [ { @@ -12,11 +18,7 @@ export const getImageLeftDom = (uriLeft: string, imageSrc: string): readonly Vir onClick: DomEventListenerFunctions.HandleClickLeftSide, type: VirtualDomElements.Div, }, - { - childCount: 1, - className: ClassNames.ImageContent, - type: VirtualDomElements.Div, - }, + imageContentNode, { alt: uriLeft, childCount: 0, diff --git a/packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts b/packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts index 9eec1d99..665bb29b 100644 --- a/packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts +++ b/packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts @@ -4,6 +4,12 @@ import * as ClassNames from '../ClassNames/ClassNames.ts' import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts' import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' +const imageContentNode: VirtualDomNode = { + childCount: 1, + className: ClassNames.ImageContent, + type: VirtualDomElements.Div, +} + export const getImageRightDom = (uriRight: string, imageSrc: string): readonly VirtualDomNode[] => { return [ { @@ -12,11 +18,7 @@ export const getImageRightDom = (uriRight: string, imageSrc: string): readonly V onClick: DomEventListenerFunctions.HandleClickRightSide, type: VirtualDomElements.Div, }, - { - childCount: 1, - className: ClassNames.ImageContent, - type: VirtualDomElements.Div, - }, + imageContentNode, { alt: uriRight, childCount: 0, diff --git a/packages/diff-view/src/parts/GetLineNumberClassName/GetLineNumberClassName.ts b/packages/diff-view/src/parts/GetLineNumberClassName/GetLineNumberClassName.ts index 67386a83..f7bfc6bf 100644 --- a/packages/diff-view/src/parts/GetLineNumberClassName/GetLineNumberClassName.ts +++ b/packages/diff-view/src/parts/GetLineNumberClassName/GetLineNumberClassName.ts @@ -1,18 +1,19 @@ import * as ClassNames from '../ClassNames/ClassNames.ts' import { InlineDiffRowType, type InlineDiffRow } from '../GetInlineDiffRows/GetInlineDiffRows.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' import { VisibleLineType, type VisibleLine } from '../VisibleLine/VisibleLine.ts' type LineNumberType = VisibleLine['type'] | InlineDiffRow['type'] export const getLineNumberClassName = (type: LineNumberType = VisibleLineType.Normal): string => { if (type === VisibleLineType.Removed || type === InlineDiffRowType.Deletion) { - return `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}` + return mergeClassNames(ClassNames.DiffEditorLineNumber, ClassNames.DiffEditorLineNumberDeletion) } if (type === VisibleLineType.Added || type === InlineDiffRowType.Insertion) { - return `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}` + return mergeClassNames(ClassNames.DiffEditorLineNumber, ClassNames.DiffEditorLineNumberInsertion) } if (type === InlineDiffRowType.GitButtons || type === InlineDiffRowType.IncomingChange) { - return `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberMeta}` + return mergeClassNames(ClassNames.DiffEditorLineNumber, ClassNames.DiffEditorLineNumberMeta) } return ClassNames.DiffEditorLineNumber } diff --git a/packages/diff-view/src/parts/GetScrollBarDom/GetScrollBarDom.ts b/packages/diff-view/src/parts/GetScrollBarDom/GetScrollBarDom.ts index a77cd91c..adaf15bf 100644 --- a/packages/diff-view/src/parts/GetScrollBarDom/GetScrollBarDom.ts +++ b/packages/diff-view/src/parts/GetScrollBarDom/GetScrollBarDom.ts @@ -3,19 +3,20 @@ import { VirtualDomElements } from '@lvce-editor/virtual-dom-worker' import * as ClassNames from '../ClassNames/ClassNames.ts' import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts' +const diffScrollBarNode: VirtualDomNode = { + childCount: 1, + className: ClassNames.DiffScrollBar, + type: VirtualDomElements.Div, +} + +const diffScrollBarThumbNode: VirtualDomNode = { + childCount: 0, + className: ClassNames.DiffScrollBarThumb, + name: 'scrollBarThumb', + onPointerDown: DomEventListenerFunctions.HandleScrollBarPointerDown, + type: VirtualDomElements.Div, +} + export const getScrollBarDom = (): readonly VirtualDomNode[] => { - return [ - { - childCount: 1, - className: ClassNames.DiffScrollBar, - type: VirtualDomElements.Div, - }, - { - childCount: 0, - className: ClassNames.DiffScrollBarThumb, - name: 'scrollBarThumb', - onPointerDown: DomEventListenerFunctions.HandleScrollBarPointerDown, - type: VirtualDomElements.Div, - }, - ] + return [diffScrollBarNode, diffScrollBarThumbNode] } diff --git a/packages/diff-view/src/parts/GetVisibleLines/GetVisibleLines.ts b/packages/diff-view/src/parts/GetVisibleLines/GetVisibleLines.ts index bca9b96e..cb324e66 100644 --- a/packages/diff-view/src/parts/GetVisibleLines/GetVisibleLines.ts +++ b/packages/diff-view/src/parts/GetVisibleLines/GetVisibleLines.ts @@ -6,6 +6,7 @@ import * as ClassNames from '../ClassNames/ClassNames.ts' import { getVisibleInlineDiffRows } from '../GetVisibleInlineDiffRows/GetVisibleInlineDiffRows.ts' import { getVisibleRows } from '../GetVisibleRows/GetVisibleRows.ts' import * as InlineDiffChangeType from '../InlineDiffChangeType/InlineDiffChangeType.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' import { VisibleLineType as VisibleLineTypeValue } from '../VisibleLine/VisibleLine.ts' import { getLine } from './GetLine/GetLine.ts' import { getTokens } from './GetTokens/GetTokens.ts' @@ -185,7 +186,7 @@ const mergeChangedClassName = (className: string): string => { if (!className) { return ClassNames.DiffTokenChanged } - return `${className} ${ClassNames.DiffTokenChanged}` + return mergeClassNames(className, ClassNames.DiffTokenChanged) } const getTokenSlice = (token: VisibleLineToken, tokenStart: number, sliceStart: number, sliceEnd: number, type: string): VisibleLineToken => { diff --git a/packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts b/packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts index 774acef7..d48f0407 100644 --- a/packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts +++ b/packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts @@ -2,13 +2,14 @@ import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker' import type { VisibleLine } from '../../VisibleLine/VisibleLine.ts' import * as ClassNames from '../../ClassNames/ClassNames.ts' +import { mergeClassNames } from '../../MergeClassNames/MergeClassNames.ts' import { getRowClassName } from '../GetRowClassName/GetRowClassName.ts' import { getTokenDom } from '../GetTokenDom/GetTokenDom.ts' export const getLineDom = (line: VisibleLine): readonly VirtualDomNode[] => { const children = line.tokens.length === 0 ? [text('')] : line.tokens.flatMap(getTokenDom) const childCount = line.tokens.length === 0 ? 1 : line.tokens.length - const className = line.lineNumber === -1 ? `${ClassNames.EditorRow} ${ClassNames.DiffEditorLineMissing}` : getRowClassName(line.type) + const className = line.lineNumber === -1 ? mergeClassNames(ClassNames.EditorRow, ClassNames.DiffEditorLineMissing) : getRowClassName(line.type) return [ { childCount, diff --git a/packages/diff-view/src/parts/GetWhitespaceToggleDom/GetWhitespaceToggleDom.ts b/packages/diff-view/src/parts/GetWhitespaceToggleDom/GetWhitespaceToggleDom.ts index 44e45aaf..ec17257b 100644 --- a/packages/diff-view/src/parts/GetWhitespaceToggleDom/GetWhitespaceToggleDom.ts +++ b/packages/diff-view/src/parts/GetWhitespaceToggleDom/GetWhitespaceToggleDom.ts @@ -4,6 +4,7 @@ import * as ActionName from '../ActionName/ActionName.ts' import * as ClassNames from '../ClassNames/ClassNames.ts' import * as DiffStrings from '../DiffStrings/DiffStrings.ts' import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' /* eslint-disable sonarjs/no-selector-parameter */ const getLabel = (showWhitespace: boolean): string => { @@ -12,7 +13,9 @@ const getLabel = (showWhitespace: boolean): string => { export const getWhitespaceToggleDom = (showWhitespace: boolean): readonly VirtualDomNode[] => { const label = getLabel(showWhitespace) - const className = showWhitespace ? `${ClassNames.DiffEditorWhitespaceToggle} ${ClassNames.DiffEditorWhitespaceToggleActive}` : ClassNames.DiffEditorWhitespaceToggle + const className = showWhitespace + ? mergeClassNames(ClassNames.DiffEditorWhitespaceToggle, ClassNames.DiffEditorWhitespaceToggleActive) + : ClassNames.DiffEditorWhitespaceToggle return [ { childCount: 1,