Fix: Enhance lexical scope and skip variables declared by Qwik's internal hooks. (#7366)

* fix: a bug is about qwik ts  error

* When it is a Qwik hook, there is no need for recursive lookup.

* Create wicked-dolphins-boil.md

* modify comment

---------

Co-authored-by: wuls <[email protected]>

Author: JerryWu1234

.changeset/wicked-dolphins-boil.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-qwik': patch
+---
+
+FIX: Enhance lexical scope and skip variables declared by Qwik's internal hooks.

packages/eslint-plugin-qwik/src/validLexicalScope.ts

@@ -75,6 +75,11 @@ export const validLexicalScope = createRule({
           if (variableType === 'ImportBinding') {
             return;
           }
+
+          if (isQwikHook(declaredVariable, context)) {
+            return;
+          }
+
           let dollarScope: Scope.Scope | null = ref.from;
           let dollarIdentifier: string | undefined;
           while (dollarScope) {
@@ -478,6 +483,41 @@ function getContent(symbol: ts.Symbol, sourceCode: string) {
   return '';
 }
 
+function isQwikHook(variable, context) {
+  const def = variable.defs[0];
+  if (!def || def.type !== 'Variable') {
+    return false;
+  }
+
+  const init = def.node.init;
+  if (
+    init?.type === 'CallExpression' &&
+    init.callee.type === 'Identifier' &&
+    /^use[A-Z]/.test(init.callee.name)
+  ) {
+    const hookName = init.callee.name;
+    const scope = context.sourceCode.getScope(def.node);
+    const ref = scope.references.find((r) => r.identifier.name === hookName);
+
+    return ref?.resolved && isFromQwikModule(ref.resolved, context);
+  }
+  return false;
+}
+
+function isFromQwikModule(resolvedVar) {
+  return resolvedVar.defs.some((def) => {
+    if (def.type !== 'ImportBinding') {
+      return false;
+    }
+    const importSource = def.parent.source.value;
+
+    return (
+      importSource.startsWith('@builder.io/qwik') ||
+      importSource.startsWith('@builder.io/qwik-city')
+    );
+  });
+}
+
 const ALLOWED_CLASSES = {
   Promise: true,
   URL: true,

packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-use-doc.tsx

@@ -0,0 +1,18 @@
+import { component$, useComputed$ } from '@builder.io/qwik';
+import { useDocumentHead } from '@builder.io/qwik-city';
+import { useLocation as exampleTest } from '@builder.io/qwik-city';
+const loc = exampleTest();
+
+export default component$(() => {
+  const head = useDocumentHead();
+  const authorId = useComputed$(() => {
+    return head.meta; // <--- EESLint was not happy here, but now it is
+  });
+  return (
+    <>
+      {authorId.value}
+      <p>pathname: {loc.url.pathname}</p>
+      <p>skuId: {loc.params.skuId}</p>
+    </>
+  );
+});