chore(eslint): add warning when using async preventDefault()

packages/eslint-plugin-qwik/index.ts

@@ -10,6 +10,7 @@ import { preferClasslist } from './src/preferClasslist';
 import { unusedServer } from './src/unusedServer';
 import { useMethodUsage } from './src/useMethodUsage';
 import { validLexicalScope } from './src/validLexicalScope';
+import { noAsyncPreventDefault } from './src/noAsyncPreventDefault';
 import pkg from './package.json';
 
 type Rules = NonNullable<TSESLint.FlatConfig.Plugin['rules']>;
@@ -26,6 +27,7 @@ const rules = {
   'jsx-img': jsxImg,
   'jsx-a': jsxAtag,
   'no-use-visible-task': noUseVisibleTask,
+  'no-async-prevent-default': noAsyncPreventDefault,
 } satisfies Rules;
 
 const recommendedRulesLevels = {
@@ -40,6 +42,7 @@ const recommendedRulesLevels = {
   'qwik/jsx-img': 'warn',
   'qwik/jsx-a': 'warn',
   'qwik/no-use-visible-task': 'warn',
+  'qwik/no-async-prevent-default': 'warn',
 } satisfies TSESLint.FlatConfig.Rules;
 
 const strictRulesLevels = {
@@ -54,6 +57,7 @@ const strictRulesLevels = {
   'qwik/jsx-img': 'error',
   'qwik/jsx-a': 'error',
   'qwik/no-use-visible-task': 'warn',
+  'qwik/no-async-prevent-default': 'warn',
 } satisfies TSESLint.FlatConfig.Rules;
 
 const configs = {

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

@@ -0,0 +1,38 @@
+import type { Rule } from 'eslint';
+
+export const noAsyncPreventDefault: Rule.RuleModule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Detect preventDefault in $(()=>{}) Async Functions.',
+      recommended: true,
+      url: 'https://qwik.dev/docs/components/events/#preventdefault--stoppropagation',
+    },
+    messages: {
+      noAsyncPreventDefault:
+        'This is an asynchronous function and does not support preventDefault. \nUse preventDefault attributes instead',
+    },
+  },
+  create(context) {
+    return {
+      "CallExpression[callee.property.name='preventDefault']"(node) {
+        let parent = node.parent;
+        while (parent) {
+          if (
+            parent.type === 'CallExpression' &&
+            parent.callee &&
+            parent.callee.type === 'Identifier' &&
+            parent.callee.name === '$'
+          ) {
+            context.report({
+              node,
+              messageId: 'noAsyncPreventDefault',
+            });
+            break;
+          }
+          parent = parent.parent;
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin-qwik/tests/no-async-prevent-default/invalid-prevent-default-arrow.tsx

@@ -0,0 +1,13 @@
+// Expect error: { "messageId": "noAsyncPreventDefault" }
+import { $ } from '@builder.io/qwik';
+
+export const InvalidPreventDefaultArrow = () => {
+  const handleSubmit = $((event: SubmitEvent) => {
+    event.preventDefault();
+  });
+  return (
+    <form onSubmit$={handleSubmit}>
+      <button type="submit">Hello World</button>
+    </form>
+  );
+};

packages/eslint-plugin-qwik/tests/no-async-prevent-default/invalid-prevent-default.tsx

@@ -0,0 +1,14 @@
+// Expect error: { "messageId": "noAsyncPreventDefault" }
+import { $ } from '@builder.io/qwik';
+
+export const NoAsyncPreventDefault = () => {
+  return (
+    <form
+      onSubmit$={$((event: SubmitEvent) => {
+        event.preventDefault();
+      })}
+    >
+      <button type="submit">Hello World</button>
+    </form>
+  );
+};

packages/eslint-plugin-qwik/tests/no-async-prevent-default/valid-prevent-default-arrow.tsx

@@ -0,0 +1,12 @@
+import { sync$ } from '@builder.io/qwik';
+
+export const ValidPreventDefaultTest = () => {
+  const handleSubmit = sync$((event: SubmitEvent) => {
+    event.preventDefault();
+  });
+  return (
+    <form onSubmit$={handleSubmit}>
+      <button type="submit">Hello World</button>
+    </form>
+  );
+};

packages/eslint-plugin-qwik/tests/no-async-prevent-default/valid-prevent-default.tsx

@@ -0,0 +1,13 @@
+import { sync$ } from '@builder.io/qwik';
+
+export const ValidPreventDefaultTest = () => {
+  return (
+    <form
+      onSubmit$={sync$((event: SubmitEvent) => {
+        event.preventDefault();
+      })}
+    >
+      <button type="submit">Hello World</button>
+    </form>
+  );
+};