fix lint

Author: Pederzh

eslint.config.js

@@ -14,6 +14,7 @@ export default [
       '**/*.min.js',
       '**/.turbo/**',
       '**/.vercel/**',
+      '**/.tsup/**',
       'packages/*/dist/**',
       'packages/*/build/**',
       'packages/*/node_modules/**',
@@ -75,6 +76,20 @@ export default [
         location: 'readonly',
         localStorage: 'readonly',
         sessionStorage: 'readonly',
+        // HTML Element types
+        HTMLInputElement: 'readonly',
+        HTMLButtonElement: 'readonly',
+        HTMLDivElement: 'readonly',
+        HTMLSpanElement: 'readonly',
+        HTMLTextAreaElement: 'readonly',
+        HTMLElement: 'readonly',
+        // Browser APIs
+        MutationObserver: 'readonly',
+        ResizeObserver: 'readonly',
+        queueMicrotask: 'readonly',
+        FileReader: 'readonly',
+        // React
+        React: 'readonly',
       },
     },
     plugins: {

packages/cli/src/build.ts

@@ -148,8 +148,8 @@ export async function buildWidgets(projectPath: string, watch = false) {
         },
         plugins: [{
           name: 'html-writer',
-          setup(build) {
-            build.onEnd(async () => {
+          setup(buildPlugin) {
+            buildPlugin.onEnd(async () => {
               try {
                 const files = await fs.readdir(path.join(pageOutDir, 'assets'))
                 const mainJs = files.find(f => f.startsWith(`${baseName}-`) && f.endsWith('.js'))

packages/inspector/eslint.config.js

@@ -3,8 +3,21 @@ import antfu from '@antfu/eslint-config'
 export default antfu({
   formatters: true,
   typescript: true,
-  react: false,
+  react: true,
   rules: {
     'node/prefer-global/process': 'off',
   },
+}, {
+  languageOptions: {
+    globals: {
+      HTMLInputElement: 'readonly',
+      HTMLButtonElement: 'readonly',
+      HTMLDivElement: 'readonly',
+      HTMLSpanElement: 'readonly',
+      HTMLElement: 'readonly',
+      MutationObserver: 'readonly',
+      ResizeObserver: 'readonly',
+      queueMicrotask: 'readonly',
+    },
+  },
 })

packages/inspector/src/client/components/AnimatedThemeToggler.tsx

@@ -1,65 +1,72 @@
-"use client";
+'use client'
 
-import { cn } from "@/lib/utils";
-import { Monitor, Moon, SunDim } from "lucide-react";
-import { useTheme } from "../context/ThemeContext";
-import { useEffect, useRef, useState } from "react";
-import { flushSync } from "react-dom";
+import { Monitor, Moon, SunDim } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
+import { cn } from '@/lib/utils'
+import { useTheme } from '../context/ThemeContext'
 
-type props = {
-  className?: string;
-};
+interface props {
+  className?: string
+}
 
-export const AnimatedThemeToggler = ({ className }: props) => {
-  const { theme, setTheme } = useTheme();
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const [mounted, setMounted] = useState(false);
+export function AnimatedThemeToggler({ className }: props) {
+  const { theme, setTheme } = useTheme()
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const [mounted, setMounted] = useState(false)
 
   // Prevent hydration mismatch by only showing theme-dependent content after mount
   useEffect(() => {
-    setMounted(true);
-  }, []);
+    setMounted(true)
+  }, [])
 
   // Cycle through: system -> light -> dark -> system
   const getNextTheme = () => {
-    if (theme === "system") return "light";
-    if (theme === "light") return "dark";
-    return "system";
-  };
+    if (theme === 'system')
+      return 'light'
+    if (theme === 'light')
+      return 'dark'
+    return 'system'
+  }
 
   const getThemeIcon = () => {
-    if (theme === "system") return <Monitor className="size-4" />;
-    if (theme === "light") return <SunDim className="size-4" />;
-    return <Moon className="size-4" />;
-  };
+    if (theme === 'system')
+      return <Monitor className="size-4" />
+    if (theme === 'light')
+      return <SunDim className="size-4" />
+    return <Moon className="size-4" />
+  }
 
   const getThemeLabel = () => {
-    if (theme === "system") return "Switch to light mode";
-    if (theme === "light") return "Switch to dark mode";
-    return "Switch to system mode";
-  };
+    if (theme === 'system')
+      return 'Switch to light mode'
+    if (theme === 'light')
+      return 'Switch to dark mode'
+    return 'Switch to system mode'
+  }
 
   const changeTheme = async () => {
-    if (!buttonRef.current) return;
+    if (!buttonRef.current)
+      return
 
-    const nextTheme = getNextTheme();
+    const nextTheme = getNextTheme()
 
     // Check if view transitions are supported
     if (typeof document !== 'undefined' && 'startViewTransition' in document) {
       await document.startViewTransition(() => {
         flushSync(() => {
-          setTheme(nextTheme);
-        });
-      }).ready;
+          setTheme(nextTheme)
+        })
+      }).ready
 
-      const { top, left, width, height } =
-        buttonRef.current.getBoundingClientRect();
-      const y = top + height / 2;
-      const x = left + width / 2;
+      const { top, left, width, height }
+        = buttonRef.current.getBoundingClientRect()
+      const y = top + height / 2
+      const x = left + width / 2
 
-      const right = window.innerWidth - left;
-      const bottom = window.innerHeight - top;
-      const maxRad = Math.hypot(Math.max(left, right), Math.max(top, bottom));
+      const right = window.innerWidth - left
+      const bottom = window.innerHeight - top
+      const maxRad = Math.hypot(Math.max(left, right), Math.max(top, bottom))
 
       document.documentElement.animate(
         {
@@ -70,15 +77,16 @@ export const AnimatedThemeToggler = ({ className }: props) => {
         },
         {
           duration: 700,
-          easing: "ease-in-out",
-          pseudoElement: "::view-transition-new(root)",
-        }
-      );
-    } else {
+          easing: 'ease-in-out',
+          pseudoElement: '::view-transition-new(root)',
+        },
+      )
+    }
+    else {
       // Fallback for browsers that don't support view transitions
-      setTheme(nextTheme);
+      setTheme(nextTheme)
     }
-  };
+  }
 
   // Show a placeholder during SSR to prevent hydration mismatch
   if (!mounted) {
@@ -90,7 +98,7 @@ export const AnimatedThemeToggler = ({ className }: props) => {
       >
         <Monitor className="size-4" />
       </button>
-    );
+    )
   }
 
   return (
@@ -99,9 +107,9 @@ export const AnimatedThemeToggler = ({ className }: props) => {
       onClick={changeTheme}
       className={cn(className)}
       aria-label={getThemeLabel()}
-      title={`Current: ${theme === "system" ? "Auto" : theme === "light" ? "Light" : "Dark"}`}
+      title={`Current: ${theme === 'system' ? 'Auto' : theme === 'light' ? 'Light' : 'Dark'}`}
     >
       {getThemeIcon()}
     </button>
-  );
-};
+  )
+}