feat: Lint rule for unsupported js (#2299)

aleksanderkatan · web-flow · commit b4d49dc463b1 · 2026-04-28T10:27:51.000+02:00
diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md
@@ -46,6 +46,7 @@ export default defineConfig([
 | [no-invalid-assignment](docs/rules/no-invalid-assignment.md)           | Disallow assignments that will generate invalid WGSL                                        | ⭐  |    |
 | [no-math](docs/rules/no-math.md)                                       | Disallow usage of JavaScript 'Math' methods inside 'use gpu' functions                      |    | ⭐  |
 | [no-uninitialized-variables](docs/rules/no-uninitialized-variables.md) | Disallow variable declarations without initializers inside 'use gpu' functions              | ⭐  |    |
+| [no-unsupported-syntax](docs/rules/no-unsupported-syntax.md)           | Disallow JS syntax that will not be parsed into valid WGSL.                                 | ⭐  |    |
 | [no-unwrapped-objects](docs/rules/no-unwrapped-objects.md)             | Disallow unwrapped Plain Old JavaScript Objects inside 'use gpu' functions (except returns) | ⭐  |    |
 
 <!-- end auto-generated rules list -->
diff --git a/packages/eslint-plugin/docs/rules/no-unsupported-syntax.md b/packages/eslint-plugin/docs/rules/no-unsupported-syntax.md
@@ -0,0 +1,65 @@
+# typegpu/no-unsupported-syntax
+
+📝 Disallow JS syntax that will not be parsed into valid WGSL.
+
+🚨 This rule is enabled in the ⭐ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+```ts
+const fn = () => { 
+  'use gpu'; 
+  const helper = (n) => 2 * n; // ArrowFunctionExpression
+  return helper(1);
+}
+```
+```ts
+const fn = () => { 
+  'use gpu'; 
+  const myStruct = Struct({prop: 1});
+  const otherStruct = Struct({...myStruct}); // SpreadElement
+  return otherStruct;
+}
+```
+```ts
+const fn = () => { 
+  'use gpu'; 
+  throw new Error(); // ThrowStatement
+}
+```
+
+Examples of **correct** code for this rule:
+
+```ts
+const fn = (a) => { 
+  'use gpu';
+  let counter = 0; 
+  let i = a;
+  while (i) {
+    if (i % 2 === 1) {
+      counter += 1;
+    }
+    i >>= 1;
+  }
+  return otherFn(counter);
+} 
+```
+```ts
+const fn = () => { 
+  'use gpu'; 
+  let a = 0;
+  const arr = [1, 2, 3];
+  for (const item of arr) {
+    a += item;
+  }
+  return a;
+} 
+```
+
+> [!NOTE]
+> Note that it is possible that TypeGPU starts/stops supporting JS syntax from version to version.
+> Make sure that the minor versions of `typegpu` and `eslint-plugin-typegpu` match.
diff --git a/packages/eslint-plugin/src/configs.ts b/packages/eslint-plugin/src/configs.ts
@@ -4,13 +4,15 @@ import { noUnwrappedObjects } from './rules/noUnwrappedObjects.ts';
 import { noMath } from './rules/noMath.ts';
 import { noUninitializedVariables } from './rules/noUninitializedVariables.ts';
 import { noInvalidAssignment } from './rules/noInvalidAssignment.ts';
+import { noUnsupportedSyntax } from './rules/noUnsupportedSyntax.ts';
 
 export const rules = {
   'no-integer-division': noIntegerDivision,
   'no-unwrapped-objects': noUnwrappedObjects,
   'no-uninitialized-variables': noUninitializedVariables,
   'no-math': noMath,
   'no-invalid-assignment': noInvalidAssignment,
+  'no-unsupported-syntax': noUnsupportedSyntax,
 } as const;
 
 type Rules = Record<`typegpu/${keyof typeof rules}`, TSESLint.FlatConfig.RuleEntry>;
@@ -21,6 +23,7 @@ export const recommendedRules = {
   'typegpu/no-uninitialized-variables': 'error',
   'typegpu/no-math': 'warn',
   'typegpu/no-invalid-assignment': 'error',
+  'typegpu/no-unsupported-syntax': 'error',
 } as const satisfies Rules;
 
 export const allRules = {
@@ -29,4 +32,5 @@ export const allRules = {
   'typegpu/no-uninitialized-variables': 'error',
   'typegpu/no-math': 'error',
   'typegpu/no-invalid-assignment': 'error',
+  'typegpu/no-unsupported-syntax': 'error',
 } as const satisfies Rules;
diff --git a/packages/eslint-plugin/src/enhancers/directiveTracking.ts b/packages/eslint-plugin/src/enhancers/directiveTracking.ts
@@ -9,6 +9,7 @@ export type FunctionNode =
 
 export type DirectiveData = {
   getEnclosingTypegpuFunction: () => FunctionNode | undefined;
+  getDirectiveStack: () => readonly { node: FunctionNode; directives: string[] }[];
 };
 
 /**
@@ -48,13 +49,16 @@ export const directiveTracking: RuleEnhancer<DirectiveData> = () => {
   return {
     visitors,
     state: {
-      getEnclosingTypegpuFunction: () => {
+      getEnclosingTypegpuFunction() {
         const current = stack.at(-1);
         if (current && current.directives.includes('use gpu')) {
           return current.node;
         }
         return undefined;
       },
+      getDirectiveStack() {
+        return stack;
+      },
     },
   };
 };
diff --git a/packages/eslint-plugin/src/rules/noUnsupportedSyntax.ts b/packages/eslint-plugin/src/rules/noUnsupportedSyntax.ts
@@ -0,0 +1,252 @@
+import type { TSESTree } from '@typescript-eslint/utils';
+import { enhanceRule } from '../enhanceRule.ts';
+import { directiveTracking } from '../enhancers/directiveTracking.ts';
+import { createRule } from '../ruleCreator.ts';
+
+export const noUnsupportedSyntax = createRule({
+  name: 'no-unsupported-syntax',
+  meta: {
+    type: 'problem',
+    docs: {
+      description: `Disallow JS syntax that will not be parsed into valid WGSL.`,
+    },
+    messages: {
+      unexpected:
+        "'{{snippet}}' will not parse into valid WGSL because it uses unsupported syntax: {{syntax}}.",
+    },
+    schema: [],
+  },
+  defaultOptions: [],
+
+  create: enhanceRule({ directives: directiveTracking }, (context, state) => {
+    const { directives } = state;
+
+    function report(node: TSESTree.Node, syntax: string) {
+      context.report({
+        node,
+        messageId: 'unexpected',
+        data: { snippet: context.sourceCode.getText(node), syntax },
+      });
+    }
+
+    return {
+      ArrowFunctionExpression(node) {
+        if (directives.getDirectiveStack().at(-2)?.directives.includes('use gpu')) {
+          report(node, 'arrow function');
+        }
+      },
+
+      AssignmentExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if (unsupportedAssignmentOps.includes(node.operator)) {
+          report(node, `assignment expression '${node.operator}'`);
+        }
+      },
+
+      AssignmentPattern(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'assignment pattern (default parameter)');
+      },
+
+      AwaitExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'await expression');
+      },
+
+      BinaryExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if (unsupportedBinaryOps.includes(node.operator)) {
+          report(node, `binary operator '${node.operator}'`);
+        }
+      },
+
+      ChainExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'chain expression');
+      },
+
+      ClassDeclaration(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'class declaration');
+      },
+
+      ClassExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'class expression');
+      },
+
+      DoWhileStatement(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'do-while loop');
+      },
+
+      ForInStatement(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'for-in loop');
+      },
+
+      FunctionDeclaration(node) {
+        if (directives.getDirectiveStack().at(-2)?.directives.includes('use gpu')) {
+          report(node, 'function declaration');
+        }
+      },
+
+      FunctionExpression(node) {
+        if (directives.getDirectiveStack().at(-2)?.directives.includes('use gpu')) {
+          report(node, 'function expression');
+        }
+      },
+
+      Literal(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if ('regex' in node && node.regex) {
+          report(node, 'regular expression literal');
+        }
+      },
+
+      LogicalExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if (node.operator === '??') {
+          report(node, 'nullish coalescing');
+        }
+      },
+
+      NewExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, `'new' expression`);
+      },
+
+      PrivateIdentifier(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'private identifier');
+      },
+
+      Property(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if (node.computed) {
+          report(node, 'computed property key');
+        }
+      },
+
+      SequenceExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'sequence expression (comma operator)');
+      },
+
+      SpreadElement(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'spread element');
+      },
+
+      SwitchStatement(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'switch statement');
+      },
+
+      TemplateLiteral(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'template literal');
+      },
+
+      ThrowStatement(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'throw statement');
+      },
+
+      TryStatement(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'try-catch statement');
+      },
+
+      UnaryExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if (unsupportedUnaryOps.includes(node.operator)) {
+          report(node, `unary operator '${node.operator}'`);
+        }
+      },
+
+      UpdateExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if (node.prefix) {
+          report(node, 'prefix update expression');
+        }
+      },
+
+      VariableDeclaration(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if (node.kind === 'var') {
+          report(node, `'var' declaration`);
+        }
+        if (node.declarations.length > 1) {
+          report(node, 'multiple variable declarations in one statement');
+        }
+      },
+
+      VariableDeclarator(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        if (node.id.type !== 'Identifier') {
+          report(node, 'variable declaration using destructuring');
+        }
+      },
+
+      YieldExpression(node) {
+        if (!directives.getEnclosingTypegpuFunction()) {
+          return;
+        }
+        report(node, 'yield expression');
+      },
+    };
+  }),
+});
+
+const unsupportedAssignmentOps = ['&&=', '**=', '||=', '>>>=', '??='];
+const unsupportedBinaryOps = ['==', '!=', '>>>', 'in', 'instanceof', '|>'];
+const unsupportedUnaryOps = ['+', 'typeof', 'void', 'delete'];
diff --git a/packages/eslint-plugin/tests/rules/noUnsupportedSyntax.test.ts b/packages/eslint-plugin/tests/rules/noUnsupportedSyntax.test.ts
