From 1f9ab6dd9d757c37c6acd20ebaf7cf8790d9da73 Mon Sep 17 00:00:00 2001 From: Le Vivilet Date: Sun, 19 Jul 2026 11:33:12 +0000 Subject: [PATCH] feature: enable recommended virtual dom lint rules --- eslint.config.js | 19 +++++++++++++++++++ .../src/parts/AriaRoles/AriaRoles.ts | 1 + .../GetContentDomWithLineNumbers.ts | 3 ++- .../GetContentDomWithoutLineNumbers.ts | 3 ++- .../src/parts/GetCursorDom/GetCursorDom.ts | 3 ++- .../GetDiffEditorVirtualDom.ts | 3 ++- .../GetEmptyLineNumberDom.ts | 3 ++- .../src/parts/GetErrorDom/GetErrorDom.ts | 3 ++- .../parts/GetImageLeftDom/GetImageLeftDom.ts | 5 ++++- .../GetImageRightDom/GetImageRightDom.ts | 5 ++++- .../GetInlineDiffEditorVirtualDom.ts | 2 +- .../src/parts/GetSashDom/GetSashDom.ts | 3 ++- .../test/GetDiffEditorVirtualDom.test.ts | 1 + .../diff-view/test/GetImageRightDom.test.ts | 1 + 14 files changed, 45 insertions(+), 10 deletions(-) create mode 100644 packages/diff-view/src/parts/AriaRoles/AriaRoles.ts diff --git a/eslint.config.js b/eslint.config.js index 9a265af7..63380793 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -2,8 +2,27 @@ import * as config from '@lvce-editor/eslint-config' export default [ ...config.default, + ...config.recommendedVirtualDom, ...config.recommendedRegex, ...config.recommendedActions, + { + files: [ + 'packages/diff-view/src/parts/{ApplyEditInput,CursorConstants,DeleteLeft,DeleteRight,GetCursorPositionFromCoordinates,GetNextPaneSizes,HandleBeforeInput,HandleClickAt,HandleClickRightSide,HandleContextMenu,HandleResize,HandleSashPointerUp,HandleScrollBarPointerDown,HandleScrollBarPointerMove,HandleWheel,HandleWorkspaceChange,Initialize,InsertLineBreak,MoveCursor,SetCursorPosition,SetDiffMode,SetFontFamily,SetLayout,ToggleDiffMode,ToggleWhitespace}/**/*.ts', + ], + rules: { + 'virtual-dom/prefer-state-destructuring': 'off', + }, + }, + { + files: ['packages/diff-view/test/**/*.ts'], + rules: { + 'virtual-dom/clickable-div-needs-role': 'off', + 'virtual-dom/no-object-attribute-values': 'off', + 'virtual-dom/prefer-constants': 'off', + 'virtual-dom/prefer-merge-class-names': 'off', + 'virtual-dom/valid-child-count': 'off', + }, + }, { files: ['packages/e2e/**/*.ts'], rules: { diff --git a/packages/diff-view/src/parts/AriaRoles/AriaRoles.ts b/packages/diff-view/src/parts/AriaRoles/AriaRoles.ts new file mode 100644 index 00000000..0ae4dcf0 --- /dev/null +++ b/packages/diff-view/src/parts/AriaRoles/AriaRoles.ts @@ -0,0 +1 @@ +export const Presentation = 'presentation' diff --git a/packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetContentDomWithLineNumbers.ts b/packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetContentDomWithLineNumbers.ts index 91685456..4c009ba3 100644 --- a/packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetContentDomWithLineNumbers.ts +++ b/packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetContentDomWithLineNumbers.ts @@ -2,6 +2,7 @@ import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import { 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 { getGutterDom } from './GetGutterDom/GetGutterDom.ts' import { getRowsDom } from './GetRowsDom/GetRowsDom.ts' @@ -15,7 +16,7 @@ export const getContentDomWithLineNumbers = ( return [ { childCount: 2, - className: `${ClassNames.DiffEditorContent} ${contentClassName}`, + className: mergeClassNames(ClassNames.DiffEditorContent, contentClassName), type: VirtualDomElements.Div, }, ...getGutterDom(visibleLines, itemHeight), diff --git a/packages/diff-view/src/parts/GetContentDomWithoutLineNumbers/GetContentDomWithoutLineNumbers.ts b/packages/diff-view/src/parts/GetContentDomWithoutLineNumbers/GetContentDomWithoutLineNumbers.ts index 52f3a720..5c2d8f43 100644 --- a/packages/diff-view/src/parts/GetContentDomWithoutLineNumbers/GetContentDomWithoutLineNumbers.ts +++ b/packages/diff-view/src/parts/GetContentDomWithoutLineNumbers/GetContentDomWithoutLineNumbers.ts @@ -1,12 +1,13 @@ import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import { VirtualDomElements } from '@lvce-editor/virtual-dom-worker' import * as ClassNames from '../ClassNames/ClassNames.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' export const getContentDomWithoutLineNumbers = (contentClassName: string, rowsChildCount: number, rows: readonly VirtualDomNode[]): readonly VirtualDomNode[] => { return [ { childCount: rowsChildCount, - className: `${ClassNames.DiffEditorContent} ${contentClassName}`, + className: mergeClassNames(ClassNames.DiffEditorContent, contentClassName), type: VirtualDomElements.Div, }, ...rows, diff --git a/packages/diff-view/src/parts/GetCursorDom/GetCursorDom.ts b/packages/diff-view/src/parts/GetCursorDom/GetCursorDom.ts index 9c2f94c7..8c0ae612 100644 --- a/packages/diff-view/src/parts/GetCursorDom/GetCursorDom.ts +++ b/packages/diff-view/src/parts/GetCursorDom/GetCursorDom.ts @@ -1,5 +1,6 @@ import { VirtualDomElements, type VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import * as ClassNames from '../ClassNames/ClassNames.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' export const getCursorDom = (): readonly VirtualDomNode[] => { return [ @@ -10,7 +11,7 @@ export const getCursorDom = (): readonly VirtualDomNode[] => { }, { childCount: 0, - className: `${ClassNames.EditorCursor} ${ClassNames.EditorCursorRight}`, + className: mergeClassNames(ClassNames.EditorCursor, ClassNames.EditorCursorRight), type: VirtualDomElements.Div, }, ] diff --git a/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts b/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts index 49e7c4d7..0bc55c88 100644 --- a/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts +++ b/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts @@ -12,6 +12,7 @@ import { getImageRightDom } from '../GetImageRightDom/GetImageRightDom.ts' import { getInlineDiffEditorVirtualDom } from '../GetInlineDiffEditorVirtualDom/GetInlineDiffEditorVirtualDom.ts' import { getSashDom } from '../GetSashDom/GetSashDom.ts' import { getScrollBarDom } from '../GetScrollBarDom/GetScrollBarDom.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' const getRootDom = (childCount: number, className: string): VirtualDomNode => { return { @@ -26,7 +27,7 @@ const getRootDom = (childCount: number, className: string): VirtualDomNode => { const getEditorBodyDom = (diffEditorLayoutClass: string): VirtualDomNode => { return { childCount: 3, - className: `${ClassNames.DiffEditorBody} ${diffEditorLayoutClass}`, + className: mergeClassNames(ClassNames.DiffEditorBody, diffEditorLayoutClass), type: VirtualDomElements.Div, } } diff --git a/packages/diff-view/src/parts/GetEmptyLineNumberDom/GetEmptyLineNumberDom.ts b/packages/diff-view/src/parts/GetEmptyLineNumberDom/GetEmptyLineNumberDom.ts index 8fe0526a..5749a7ef 100644 --- a/packages/diff-view/src/parts/GetEmptyLineNumberDom/GetEmptyLineNumberDom.ts +++ b/packages/diff-view/src/parts/GetEmptyLineNumberDom/GetEmptyLineNumberDom.ts @@ -1,13 +1,14 @@ import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import { VirtualDomElements } from '@lvce-editor/virtual-dom-worker' import * as ClassNames from '../ClassNames/ClassNames.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' export const getEmptyLineNumberDom = (emptyLineCount: number, itemHeight: number): VirtualDomNode => { const height = emptyLineCount * itemHeight return { childCount: 0, - className: `${ClassNames.DiffEditorLineNumberEmpty} Height-${height}`, + className: mergeClassNames(ClassNames.DiffEditorLineNumberEmpty, `Height-${height}`), type: VirtualDomElements.Div, } } diff --git a/packages/diff-view/src/parts/GetErrorDom/GetErrorDom.ts b/packages/diff-view/src/parts/GetErrorDom/GetErrorDom.ts index edd727fd..80050736 100644 --- a/packages/diff-view/src/parts/GetErrorDom/GetErrorDom.ts +++ b/packages/diff-view/src/parts/GetErrorDom/GetErrorDom.ts @@ -4,6 +4,7 @@ import { defaultAllowedLinkSchemes } from '../AllowedLinkSchemes/AllowedLinkSche import * as ClassNames from '../ClassNames/ClassNames.ts' import { getErrorCodeFrameDom } from '../GetErrorCodeFrameDom/GetErrorCodeFrameDom.ts' import { getErrorStackDom } from '../GetErrorStackDom/GetErrorStackDom.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' export const getErrorDom = ( contentClassName: string, @@ -16,7 +17,7 @@ export const getErrorDom = ( return [ { childCount, - className: `${ClassNames.DiffEditorContent} ${contentClassName} ${ClassNames.DiffEditorError}`, + className: mergeClassNames(ClassNames.DiffEditorContent, contentClassName, ClassNames.DiffEditorError), type: VirtualDomElements.Div, }, { diff --git a/packages/diff-view/src/parts/GetImageLeftDom/GetImageLeftDom.ts b/packages/diff-view/src/parts/GetImageLeftDom/GetImageLeftDom.ts index 5c0f1fdd..6a11a98e 100644 --- a/packages/diff-view/src/parts/GetImageLeftDom/GetImageLeftDom.ts +++ b/packages/diff-view/src/parts/GetImageLeftDom/GetImageLeftDom.ts @@ -1,14 +1,17 @@ import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import { VirtualDomElements } from '@lvce-editor/virtual-dom-worker' +import * as AriaRoles from '../AriaRoles/AriaRoles.ts' import * as ClassNames from '../ClassNames/ClassNames.ts' import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' export const getImageLeftDom = (uriLeft: string, imageSrc: string): readonly VirtualDomNode[] => { return [ { childCount: 1, - className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentLeft}`, + className: mergeClassNames(ClassNames.DiffEditorContent, ClassNames.DiffEditorContentLeft), onClick: DomEventListenerFunctions.HandleClickLeftSide, + role: AriaRoles.Presentation, type: VirtualDomElements.Div, }, { diff --git a/packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts b/packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts index b7884fd1..518b83a0 100644 --- a/packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts +++ b/packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts @@ -1,14 +1,17 @@ import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import { VirtualDomElements } from '@lvce-editor/virtual-dom-worker' +import * as AriaRoles from '../AriaRoles/AriaRoles.ts' import * as ClassNames from '../ClassNames/ClassNames.ts' import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' export const getImageRightDom = (uriRight: string, imageSrc: string): readonly VirtualDomNode[] => { return [ { childCount: 1, - className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentRight}`, + className: mergeClassNames(ClassNames.DiffEditorContent, ClassNames.DiffEditorContentRight), onClick: DomEventListenerFunctions.HandleClickRightSide, + role: AriaRoles.Presentation, type: VirtualDomElements.Div, }, { diff --git a/packages/diff-view/src/parts/GetInlineDiffEditorVirtualDom/GetInlineDiffEditorVirtualDom.ts b/packages/diff-view/src/parts/GetInlineDiffEditorVirtualDom/GetInlineDiffEditorVirtualDom.ts index 1ec3b9e9..898b9198 100644 --- a/packages/diff-view/src/parts/GetInlineDiffEditorVirtualDom/GetInlineDiffEditorVirtualDom.ts +++ b/packages/diff-view/src/parts/GetInlineDiffEditorVirtualDom/GetInlineDiffEditorVirtualDom.ts @@ -46,7 +46,7 @@ export const getInlineDiffEditorVirtualDom = ( ...searchHeaderDom, { childCount: contentChildCount, - className: `${ClassNames.DiffEditorContent} ${ClassNames.InlineDiffEditorContent}`, + className: mergeClassNames(ClassNames.DiffEditorContent, ClassNames.InlineDiffEditorContent), type: VirtualDomElements.Div, }, ...lineNumberDom, diff --git a/packages/diff-view/src/parts/GetSashDom/GetSashDom.ts b/packages/diff-view/src/parts/GetSashDom/GetSashDom.ts index 2ca562ca..07bc80cd 100644 --- a/packages/diff-view/src/parts/GetSashDom/GetSashDom.ts +++ b/packages/diff-view/src/parts/GetSashDom/GetSashDom.ts @@ -2,10 +2,11 @@ import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker' import { VirtualDomElements } from '@lvce-editor/virtual-dom-worker' import * as ClassNames from '../ClassNames/ClassNames.ts' import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts' +import { mergeClassNames } from '../MergeClassNames/MergeClassNames.ts' export const getSashDom = (sashLayoutClass: string): VirtualDomNode => ({ childCount: 0, - className: `${ClassNames.Sash} ${sashLayoutClass}`, + className: mergeClassNames(ClassNames.Sash, sashLayoutClass), name: 'sash', onPointerDown: DomEventListenerFunctions.HandleSashPointerDown, type: VirtualDomElements.Div, diff --git a/packages/diff-view/test/GetDiffEditorVirtualDom.test.ts b/packages/diff-view/test/GetDiffEditorVirtualDom.test.ts index f0ad66e6..da1bdafe 100644 --- a/packages/diff-view/test/GetDiffEditorVirtualDom.test.ts +++ b/packages/diff-view/test/GetDiffEditorVirtualDom.test.ts @@ -385,6 +385,7 @@ test('getDiffEditorVirtualDom renders image panes when render mode is image', () childCount: 1, className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentLeft}`, onClick: DomEventListenerFunctions.HandleClickLeftSide, + role: 'presentation', type: VirtualDomElements.Div, }, { diff --git a/packages/diff-view/test/GetImageRightDom.test.ts b/packages/diff-view/test/GetImageRightDom.test.ts index 6c924a3b..1f4848d3 100644 --- a/packages/diff-view/test/GetImageRightDom.test.ts +++ b/packages/diff-view/test/GetImageRightDom.test.ts @@ -11,6 +11,7 @@ test('getImageRightDom renders an image element', (): void => { childCount: 1, className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentRight}`, onClick: DomEventListenerFunctions.HandleClickRightSide, + role: 'presentation', type: VirtualDomElements.Div, }, {