feature: enable recommended virtual dom lint rules

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: {

packages/diff-view/src/parts/AriaRoles/AriaRoles.ts

@@ -0,0 +1 @@
+export const Presentation = 'presentation'

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),

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,

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,
     },
   ]

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,
   }
 }

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,
   }
 }

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,
     },
     {

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,
     },
     {

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,
     },
     {

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,

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,

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,
     },
     {

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,
     },
     {