更新 ESLint 配置，添加 TypeScript 和 React 插件，提升代码质量；在多个包中添加 lint 和类型检查脚本

Author: hotlong

eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['**/dist', '**/.next', '**/node_modules', '**/public'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    },
+  },
+)

package.json

@@ -30,6 +30,7 @@
     "lint": "pnpm -r lint"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -39,7 +40,10 @@
     "@types/react-dom": "18.3.1",
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
-    "eslint": "^8.0.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
     "happy-dom": "^20.1.0",
     "jsdom": "^27.4.0",
     "prettier": "^3.0.0",
@@ -49,6 +53,7 @@
     "tslib": "^2.6.0",
     "turbo": "^2.6.3",
     "typescript": "^5.0.0",
+    "typescript-eslint": "^8.46.4",
     "vitest": "^2.1.8"
   },
   "pnpm": {

packages/components/package.json

@@ -17,7 +17,9 @@
   "scripts": {
     "build": "vite build",
     "pretest": "pnpm --filter @object-ui/core build && pnpm --filter @object-ui/react build",
-    "test": "vitest run"
+    "test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
   },
   "dependencies": {
     "@object-ui/core": "workspace:*",

packages/components/src/renderers/form/form.tsx

@@ -97,7 +97,7 @@ ComponentRegistry.register('form',
         setSubmitError(errorMessage);
 
         // Log errors for debugging (dev environment only)
-        // @ts-ignore - process may not be defined in all environments
+        // @ts-expect-error - process may not be defined in all environments
         if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
           console.error('Form submission error:', error);
         }
@@ -356,7 +356,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
     case 'textarea':
       return <Textarea placeholder={placeholder} {...fieldProps} />;
 
-    case 'checkbox':
+    case 'checkbox': {
       // For checkbox, we need to handle the value differently
       const { value, onChange, ...checkboxProps } = fieldProps;
       return (
@@ -368,8 +368,9 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
           />
         </div>
       );
+    }
 
-    case 'select':
+    case 'select': {
       // For select with react-hook-form, we need to handle the onChange
       const { value: selectValue, onChange: selectOnChange, ...selectProps } = fieldProps;
 
@@ -392,6 +393,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
           </SelectContent>
         </Select>
       );
+    }
 
     default:
       return <Input type={inputType || 'text'} placeholder={placeholder} {...fieldProps} />;

packages/components/src/renderers/layout/page.tsx

@@ -62,7 +62,7 @@ ComponentRegistry.register(
         name: 'body', 
         type: 'array', 
         label: 'Content',
-        // @ts-ignore - itemType is experimental/extended metadata
+        // @ts-expect-error - itemType is experimental/extended metadata
         itemType: 'component' 
       }
     ]

packages/components/src/ui/sidebar.tsx

@@ -607,9 +607,9 @@ function SidebarMenuSkeleton({
   showIcon?: boolean
 }) {
   // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
+  const [width] = React.useState(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+  })
 
   return (
     <div

packages/core/package.json

@@ -6,7 +6,9 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
-    "test": "vitest run"
+    "test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
   },
   "dependencies": {
     "lodash": "^4.17.21",

packages/data-objectql/package.json

@@ -23,6 +23,7 @@
     "clean": "rm -rf dist",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
+    "lint": "eslint .",
     "test:watch": "vitest"
   },
   "keywords": [

packages/data-objectql/src/hooks.ts

@@ -76,9 +76,10 @@ export interface UseObjectQLMutationOptions {
  * ```
  */
 export function useObjectQL(options: UseObjectQLOptions): ObjectQLDataSource {
+  const { baseUrl, token, spaceId } = options.config;
   return useMemo(
-    () => new ObjectQLDataSource(options.config),
-    [options.config.baseUrl, options.config.token, options.config.spaceId]
+    () => new ObjectQLDataSource({ baseUrl, token, spaceId }),
+    [baseUrl, token, spaceId]
   );
 }
 
@@ -127,14 +128,20 @@ export function useObjectQLQuery<T = any>(
     ...queryParams
   } = options;
 
+  // Serialize params to string for stable dependency checking
+  const queryParamsString = JSON.stringify(queryParams);
+  
   const fetchData = useCallback(async () => {
     if (!enabled) return;
 
     setLoading(true);
     setError(null);
 
     try {
-      const queryResult = await dataSource.find(resource, queryParams);
+      // Parse params back from string to ensure we use the version 
+      // corresponding to the dependency trigger
+      const params = JSON.parse(queryParamsString);
+      const queryResult = await dataSource.find(resource, params);
       setResult(queryResult);
       setData(queryResult.data);
       onSuccess?.(queryResult.data);
@@ -145,7 +152,7 @@ export function useObjectQLQuery<T = any>(
     } finally {
       setLoading(false);
     }
-  }, [dataSource, resource, enabled, onSuccess, onError, JSON.stringify(queryParams)]);
+  }, [dataSource, resource, enabled, onSuccess, onError, queryParamsString]);
 
   useEffect(() => {
     fetchData();

packages/designer/src/components/PropertyPanel.tsx

@@ -25,18 +25,20 @@ interface PropertyPanelProps {
 export const PropertyPanel: React.FC<PropertyPanelProps> = React.memo(({ className }) => {
     const { schema, selectedNodeId, updateNode, removeNode, copyNode, pasteNode, canPaste } = useDesigner();
 
-    // Recursive finder - memoized to prevent recreation on every render
-    const findNode = useCallback((node: any, id: string): any => {
-        if (!node) return null;
-        if (node.id === id) return node;
-        if (node.body) {
-            if (Array.isArray(node.body)) {
-                for (const child of node.body) {
-                    const found = findNode(child, id);
-                    if (found) return found;
+    // Recursive finder
+    const findNode = useCallback((root: any, id: string): any => {
+        const queue = [root];
+        while (queue.length > 0) {
+            const node = queue.shift();
+            if (!node) continue;
+            if (node.id === id) return node;
+            
+            if (node.body) {
+                if (Array.isArray(node.body)) {
+                    queue.push(...node.body);
+                } else if (typeof node.body === 'object') {
+                    queue.push(node.body);
                 }
-            } else if (typeof node.body === 'object') {
-                return findNode(node.body, id);
             }
         }
         return null;
@@ -89,7 +91,7 @@ export const PropertyPanel: React.FC<PropertyPanelProps> = React.memo(({ classNa
                         />
                     </div>
                 );
-            case 'enum':
+            case 'enum': {
                 const options = Array.isArray(input.enum) 
                     ? input.enum.map(opt => typeof opt === 'string' ? { label: opt, value: opt } : opt)
                     : [];
@@ -113,6 +115,7 @@ export const PropertyPanel: React.FC<PropertyPanelProps> = React.memo(({ classNa
                         </Select>
                     </div>
                 );
+            }
             case 'number':
                 return (
                     <div className="space-y-1.5">