feat(eslint): support eslint for ReactLynx (#1274)

<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

## Summary

<!-- Can you explain the reasoning behind implementing this change? What
problem or issue does this pull request resolve? -->

<!-- It would be helpful if you could provide any relevant context, such
as GitHub issues or related discussions. -->

Support ESLint for ReactLynx.

As `eslint-plugin-react-hooks` is the prerequisite eslint rule for
[React
Compiler](https://react.dev/learn/react-compiler#installing-eslint-plugin-react-compiler),
we need to support eslint for ReactLynx before landing React Compiler.

Related PR: #1269

## Checklist

<!--- Check and mark with an "x" -->

- [x] Tests updated (or not required).
- [x] Documentation updated (or not required).


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added ESLint support for ReactLynx templates, including integration
with React Hooks and React Refresh linting rules.
  * Enabled linting for example TypeScript and TSX files.
* Implemented ESLint template mapping for React JavaScript and
TypeScript projects.

* **Bug Fixes**
* Updated callback prop from `onMounted` to `onRender` in relevant
components and tests for improved consistency.

* **Style**
* Refined JSX syntax by converting empty elements to self-closing tags.

* **Chores**
  * Updated test workflows to include ESLint checks.
  * Added new ESLint plugins to development dependencies.
  * Added a changeset documenting ESLint support.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Signed-off-by: Yiming Li <yimingli.cs@gmail.com>
Co-authored-by: Qingyu Wang <40660121+colinaaa@users.noreply.github.com>

Author: upupming

.changeset/floppy-singers-chew.md

@@ -0,0 +1,5 @@
+---
+"create-rspeedy": patch
+---
+
+Support ESLint for ReactLynx templates

.github/workflows/test.yml

@@ -146,16 +146,18 @@ jobs:
         node packages/tools/canary-release/snapshot.js
         pnpm --recursive publish --no-git-checks --access public --registry=http://localhost:4873
         cd `mktemp -d`
-        npx --registry http://localhost:4873 create-rspeedy-canary@latest --template react --dir create-rspeedy-regression
+        npx --registry http://localhost:4873 create-rspeedy-canary@latest --template react --dir create-rspeedy-regression --tools eslint
         cd create-rspeedy-regression
         pnpm install --registry=http://localhost:4873
         pnpm run build
         pnpm run build --mode development
-        npx --registry http://localhost:4873 create-rspeedy-canary@latest --template react-vitest-rltl --dir create-rspeedy-regression-vitest-rltl
+        pnpm run lint
+        npx --registry http://localhost:4873 create-rspeedy-canary@latest --template react-vitest-rltl --dir create-rspeedy-regression-vitest-rltl --tools eslint
         cd create-rspeedy-regression-vitest-rltl
         pnpm install --registry=http://localhost:4873
         pnpm run build
         pnpm run build --mode development
+        pnpm run lint
         pnpm run test
   test-react:
     needs: build

eslint.config.js

@@ -12,6 +12,8 @@ import * as regexpPlugin from 'eslint-plugin-regexp';
 import eslintPluginUnicorn from 'eslint-plugin-unicorn';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
 
 export default tseslint.config(
   // Global ignores
@@ -67,7 +69,6 @@ export default tseslint.config(
 
       // TODO: enable eslint for react
       // react
-      'examples/**',
       'packages/react/types/**',
       'packages/react/runtime/__test__/**',
       'packages/react/runtime/jsx-dev-runtime/**',
@@ -383,4 +384,31 @@ export default tseslint.config(
       '@typescript-eslint/require-await': 'off',
     },
   },
+  // React-related
+  {
+    files: [
+      'examples/**/*.{jsx,tsx}',
+    ],
+    extends: [
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+  },
+  {
+    files: [
+      'examples/**',
+    ],
+    settings: {
+      'import/resolver': {
+        typescript: {
+          project: 'examples/**/tsconfig.json',
+          noWarnOnMultipleProjects: true,
+        },
+      },
+    },
+    rules: {
+      // TODO: enable header for examples
+      'headers/header-format': 'off',
+    },
+  },
 );

examples/react/lynx.config.js

@@ -1,6 +1,6 @@
-import { defineConfig } from '@lynx-js/rspeedy';
 import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
 import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { defineConfig } from '@lynx-js/rspeedy';
 
 const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
 

examples/react/test/jsx-runtime.test-d.tsx

@@ -5,10 +5,10 @@ import { assertType, describe, expectTypeOf, test } from 'vitest';
 
 import {
   Component,
-  forwardRef,
   Fragment,
-  memo,
   Suspense,
+  forwardRef,
+  memo,
   useMainThreadRef,
   useRef,
 } from '@lynx-js/react';

examples/react/tsconfig.json

@@ -9,7 +9,7 @@
     "checkJs": true,
     "isolatedDeclarations": false,
   },
-  "include": ["src", "lynx.config.js", "test"],
+  "include": ["src", "lynx.config.js", "test", "vitest.config.ts"],
   "references": [
     { "path": "../../packages/react/tsconfig.json" },
     { "path": "../../packages/rspeedy/core/tsconfig.build.json" },

examples/tailwindcss/lynx.config.js

@@ -1,7 +1,8 @@
-import { defineConfig } from '@lynx-js/rspeedy';
+import { pluginTailwindCSS } from 'rsbuild-plugin-tailwindcss';
+
 import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
 import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
-import { pluginTailwindCSS } from 'rsbuild-plugin-tailwindcss';
+import { defineConfig } from '@lynx-js/rspeedy';
 
 export default defineConfig({
   plugins: [

examples/tailwindcss/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from '@lynx-js/react';
+
 import { cn } from './utils.js';
 import './App.css';
 

examples/tailwindcss/src/index.tsx

@@ -1,4 +1,5 @@
 import { root } from '@lynx-js/react';
+
 import { App } from './App.js';
 
 root.render(

examples/tailwindcss/src/utils.ts

@@ -1,5 +1,7 @@
-import { clsx, type ClassValue } from 'clsx';
+import { clsx } from 'clsx';
+import type { ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }