fix(eslint): rule understands interfaces (QwikDev#689)

Author: manucorporat

.github/workflows/ci.yml

@@ -50,6 +50,7 @@ jobs:
               - 'packages/qwik/src/**/*.toml'
               - 'packages/qwik/src/**/*.rs'
               - 'packages/qwik/src/**/*.lock'
+              - 'packages/eslint-plugin-qwik/**/*.ts'
               - 'tsconfig.json'
       - name: Print fullbuild output
         run: echo ${{ steps.filter.outputs.fullbuild == 'true' || github.event.inputs.disttag != '' }}

packages/eslint-plugin-qwik/index.ts

@@ -1,5 +1,5 @@
-import { validLexicalScope } from './lib/validLexicalScope';
-import { noUseAfterAwait } from './lib/noUseAfterAwait';
+import { validLexicalScope } from './src/validLexicalScope';
+import { noUseAfterAwait } from './src/noUseAfterAwait';
 
 export const rules = {
   'no-use-after-await': noUseAfterAwait,

packages/eslint-plugin-qwik/qwik.unit.ts

@@ -81,6 +81,18 @@ ruleTester.run('my-rule', rules['no-use-after-await'], {
 
 ruleTester.run('valid-lexical-scope', rules['valid-lexical-scope'], {
   valid: [
+    `
+    import { useMethod, component$ } from 'stuff';
+    export interface Value {
+      value: number;
+    }
+    export const HelloWorld = component$(() => {
+      const state: Value = { value: 12 };
+      useWatch$(() => {
+        console.log(state.value);
+      });
+      return <Host></Host>
+    });`,
     `
       import { useMethod, component$ } from 'stuff';
       interface Value {
@@ -324,6 +336,23 @@ ruleTester.run('valid-lexical-scope', rules['valid-lexical-scope'], {
         'Identifier ("a") can not be captured inside the scope (onClick$) because it is a Promise, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
       ],
     },
+    {
+      code: `
+      import { useMethod, component$ } from 'stuff';
+      export interface Value {
+        value: () => void;
+      }
+      export const HelloWorld = component$(() => {
+        const state: Value = { value: () => console.log('thing') };
+        useWatch$(() => {
+          console.log(state.value);
+        });
+        return <Host></Host>
+      });`,
+      errors: [
+        'Identifier ("state") can not be captured inside the scope (useWatch$) because "state.value" is a function, which is not serializable. Check out https://qwik.builder.io/docs/advanced/optimizer for more details.',
+      ],
+    },
   ],
 });
 

packages/eslint-plugin-qwik/lib/noUseAfterAwait.ts packages/eslint-plugin-qwik/src/noUseAfterAwait.ts

@@ -324,7 +324,7 @@ function _isTypeCapturable(
       }
     }
 
-    if (!symbolName.startsWith('__')) {
+    if (!symbolName.startsWith('__') && type.symbol.valueDeclaration) {
       return {
         type,
         typeStr: checker.typeToString(type),

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

@@ -99,13 +99,21 @@ async function validateStarter(
   console.log(`🌟 ${projectName}: copy @builder.io/qwik distribution`);
   const qwikNodeModule = join(appDir, 'node_modules', '@builder.io', 'qwik');
   rmSync(qwikNodeModule, { force: true, recursive: true });
-
   const distQwik = join(__dirname, '..', 'packages', 'qwik', 'dist');
   cpSync(distQwik, qwikNodeModule);
 
+  console.log(`🌟 ${projectName}: copy eslint-plugin-qwik distribution`);
+  const eslintNodeModule = join(appDir, 'node_modules', 'eslint-plugin-qwik');
+  rmSync(eslintNodeModule, { force: true, recursive: true });
+  const distEslintQwik = join(__dirname, '..', 'packages', 'eslint-plugin-qwik', 'dist');
+  cpSync(distEslintQwik, eslintNodeModule);
+
   console.log(`🌈 ${projectName}: npm run build`);
   await execa('npm', ['run', 'build'], { cwd: appDir, stdout: 'inherit' });
 
+  console.log(`🌈 ${projectName}: npm run lint`);
+  await execa('npm', ['run', 'lint'], { cwd: appDir, stdout: 'inherit' });
+
   accessSync(join(appDir, '.vscode'));
   accessSync(join(appDir, 'dist', 'favicon.ico'));
   accessSync(join(appDir, 'dist', 'q-manifest.json'));

scripts/validate-cli.ts

@@ -1,4 +1,5 @@
 module.exports = {
+  root: true,
   env: {
     browser: true,
     es2021: true,