fix: add prefer-dom-node-dataset rule (#5107)

.eslintrc.js

@@ -207,6 +207,7 @@ const config = {
     ],
     'unicorn/no-unnecessary-await': 'error',
     'unicorn/no-useless-fallback-in-spread': 'error',
+    'unicorn/prefer-dom-node-dataset': 'error',
     'sonarjs/no-all-duplicated-branches': 'error',
     'sonarjs/no-element-overwrite': 'error',
     'sonarjs/no-empty-collection': 'error',

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx

@@ -84,8 +84,7 @@ const Settings = () => {
         scrollWrapper.current.getBoundingClientRect().left -
         parseInt(wrapperComputedStyle.paddingLeft)
       : 0;
-    const appeared =
+    const appeared = scrollWrapper.current.dataset.appeared === 'true';
-      scrollWrapper.current.getAttribute('data-appeared') === 'true';
     const animationFrameId = requestAnimationFrame(() => {
       scrollWrapper.current?.scrollTo({
         behavior: appeared ? 'smooth' : 'instant',

packages/plugins/image-preview/src/component/index.jotai.ts

@@ -9,7 +9,7 @@ previewBlockIdAtom.onMount = set => {
     if (target?.tagName === 'IMG') {
       const imageBlock = target.closest('affine-image');
       if (imageBlock) {
-        const blockId = imageBlock.getAttribute('data-block-id');
+        const blockId = imageBlock.dataset.blockId;
         if (!blockId) return;
         set(blockId);
       }

tests/affine-desktop/e2e/basic.spec.ts

@@ -114,9 +114,7 @@ test('clientBorder value should disable by default on window', async ({
 test('app theme', async ({ page, electronApp }) => {
   const root = page.locator('html');
   {
-    const themeMode = await root.evaluate(element =>
+    const themeMode = await root.evaluate(element => element.dataset.theme);
-      element.getAttribute('data-theme')
-    );
     expect(themeMode).toBe('light');
 
     const theme = await electronApp.evaluate(({ nativeTheme }) => {
@@ -131,9 +129,7 @@ test('app theme', async ({ page, electronApp }) => {
     await page.getByTestId('appearance-panel-trigger').click();
     await page.waitForTimeout(50);
     await page.getByTestId('dark-theme-trigger').click();
-    const themeMode = await root.evaluate(element =>
+    const themeMode = await root.evaluate(element => element.dataset.theme);
-      element.getAttribute('data-theme')
-    );
     expect(themeMode).toBe('dark');
     const theme = await electronApp.evaluate(({ nativeTheme }) => {
       return nativeTheme.shouldUseDarkColors ? 'dark' : 'light';

tests/affine-local/e2e/all-page.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/prefer-dom-node-dataset */
 import { test } from '@affine-test/kit/playwright';
 import {
   changeFilter,
@@ -307,7 +308,6 @@ test('select a group of items by clicking "Select All" in group header', async (
   const selectedGroupItemTotalCount = await page
     .locator('[data-testid="page-list-group-header"]')
     .getAttribute('data-group-items-count');
-
   expect(selectedItemCount).toBe(selectedGroupItemTotalCount);
 
   // check the selected count is equal to the one displayed in the floating toolbar

tests/affine-local/e2e/image-preview.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/prefer-dom-node-dataset */
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,

tests/affine-local/e2e/settings.spec.ts

@@ -49,15 +49,11 @@ test('Change theme', async ({ page }) => {
   const root = page.locator('html');
 
   await page.getByTestId('light-theme-trigger').click();
-  const lightMode = await root.evaluate(element =>
+  const lightMode = await root.evaluate(element => element.dataset.theme);
-    element.getAttribute('data-theme')
-  );
   expect(lightMode).toBe('light');
 
   await page.getByTestId('dark-theme-trigger').click();
-  const darkMode = await root.evaluate(element =>
+  const darkMode = await root.evaluate(element => element.dataset.theme);
-    element.getAttribute('data-theme')
-  );
   expect(darkMode).toBe('dark');
 });
 

tests/affine-local/e2e/theme.spec.ts

@@ -14,9 +14,7 @@ test('default white', async ({ browser }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
   const root = page.locator('html');
-  const themeMode = await root.evaluate(element =>
+  const themeMode = await root.evaluate(element => element.dataset.theme);
-    element.getAttribute('data-theme')
-  );
   expect(themeMode).toBe('light');
   await page.screenshot({
     path: resolve(testResultDir, 'affine-light-theme.png'),
@@ -25,9 +23,7 @@ test('default white', async ({ browser }) => {
   await page.getByTestId('appearance-panel-trigger').click();
   await page.waitForTimeout(50);
   await page.getByTestId('dark-theme-trigger').click();
-  const darkMode = await root.evaluate(element =>
+  const darkMode = await root.evaluate(element => element.dataset.theme);
-    element.getAttribute('data-theme')
-  );
   expect(darkMode).toBe('dark');
   await page.screenshot({
     path: resolve(testResultDir, 'affine-dark-theme.png'),

tests/kit/utils/filter.ts

@@ -48,6 +48,8 @@ export const getPagesCount = async (page: Page) => {
     return 0;
   }
 
+  // locator is not a HTMLElement, so we can't use dataset
+  // eslint-disable-next-line unicorn/prefer-dom-node-dataset
   const count = await locator.getAttribute('data-total-count');
   return count ? parseInt(count) : 0;
 };