feat(eslint): support eslint for ReactLynx

.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));
 }

examples/tailwindcss/test/App.test-d.ts

@@ -1,7 +1,10 @@
 import { assertType, describe, test } from 'vitest';
-import type { JSX } from '@lynx-js/react';
+
 import { App } from '@/App.js';
 import { cn } from '@/utils.js';
+import type { JSX } from '@lynx-js/react';
+
+const handler = (prev: boolean): boolean => !prev;
 
 describe('App Component Type Tests', () => {
   test('App should return JSX.Element', () => {
@@ -10,14 +13,13 @@ describe('App Component Type Tests', () => {
   });
 
   test('bindtap handler should toggle boolean state', () => {
-    const handler = (prev: boolean): boolean => !prev;
     assertType<(prev: boolean) => boolean>(handler);
   });
 });
 
 describe('cn utility', () => {
   test('cn() returns string', () => {
-    const result = cn('a', 'b', false && 'c');
+    const result = cn('a', 'b', 'c');
     assertType<string>(result);
   });
 });

examples/tailwindcss/tsconfig.json

@@ -11,7 +11,7 @@
       "@/*": ["./src/*"],
     },
   },
-  "include": ["src", "lynx.config.js", "test"],
+  "include": ["src", "lynx.config.js", "test", "vitest.config.ts", "tailwind.config.ts"],
   "exclude": ["dist/"],
   "references": [
     { "path": "../../packages/react/tsconfig.json" },

package.json

@@ -33,6 +33,8 @@
     "eslint-plugin-headers": "^1.3.3",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-n": "^17.21.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-regexp": "^2.9.0",
     "eslint-plugin-unicorn": "^59.0.1",
     "globals": "^16.3.0",

packages/rspeedy/create-rspeedy/src/index.ts

@@ -101,8 +101,20 @@ void create({
   ),
   version: devDependencies,
   getTemplateName,
-  mapESLintTemplate() {
-    // TODO: support ESLint later
-    return null
+  mapESLintTemplate(templateName) {
+    const lang = TEMPLATES.find(({ template }) =>
+      templateName.startsWith(template)
+    )?.lang
+
+    if (!lang) return null
+
+    switch (lang) {
+      case 'js':
+        return 'react-js'
+      case 'ts':
+        return 'react-ts'
+      default:
+        return null
+    }
   },
 })

packages/rspeedy/create-rspeedy/template-react-ts/src/rspeedy-env.d.ts → packages/rspeedy/create-rspeedy/template-common/src/rspeedy-env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="@lynx-js/rspeedy/client" />
 
 declare module '@lynx-js/types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface GlobalProps {
     /**
      * Define your global properties in this interface.

packages/rspeedy/create-rspeedy/template-react-js/src/App.jsx

@@ -45,7 +45,7 @@ export function App() {
             to see updates!
           </text>
         </view>
-        <view style={{ flex: 1 }}></view>
+        <view style={{ flex: 1 }} />
       </view>
     </view>
   )

packages/rspeedy/create-rspeedy/template-react-ts/src/App.tsx

@@ -45,7 +45,7 @@ export function App() {
             to see updates!
           </text>
         </view>
-        <view style={{ flex: 1 }}></view>
+        <view style={{ flex: 1 }} />
       </view>
     </view>
   )

packages/rspeedy/create-rspeedy/template-react-vitest-rltl-js/src/App.jsx

@@ -10,8 +10,8 @@ export function App(props) {
 
   useEffect(() => {
     console.info('Hello, ReactLynx')
-    props.onMounted?.()
   }, [])
+  props.onRender?.()
 
   const onTap = useCallback(() => {
     'background only'
@@ -46,7 +46,7 @@ export function App(props) {
             to see updates!
           </text>
         </view>
-        <view style={{ flex: 1 }}></view>
+        <view style={{ flex: 1 }} />
       </view>
     </view>
   )

packages/rspeedy/create-rspeedy/template-react-vitest-rltl-ts/src/App.tsx

@@ -6,14 +6,14 @@ import lynxLogo from './assets/lynx-logo.png'
 import reactLynxLogo from './assets/react-logo.png'
 
 export function App(props: {
-  onMounted?: () => void
+  onRender?: () => void
 }) {
   const [alterLogo, setAlterLogo] = useState(false)
 
   useEffect(() => {
     console.info('Hello, ReactLynx')
-    props.onMounted?.()
   }, [])
+  props.onRender?.()
 
   const onTap = useCallback(() => {
     'background only'
@@ -48,7 +48,7 @@ export function App(props: {
             to see updates!
           </text>
         </view>
-        <view style={{ flex: 1 }}></view>
+        <view style={{ flex: 1 }} />
       </view>
     </view>
   )

packages/rspeedy/create-rspeedy/template-react-vitest-rltl-ts/src/__tests__/index.test.tsx

@@ -12,7 +12,7 @@ test('App', async () => {
 
   render(
     <App
-      onMounted={() => {
+      onRender={() => {
         cb(`__MAIN_THREAD__: ${__MAIN_THREAD__}`)
       }}
     />,