or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-rules.mdindex.mdjsx-rules.mdquality-rules.md
tile.json

core-rules.mddocs/

Core Framework Rules

Essential rules for Qwik framework patterns including dollar functions, hooks, and serialization validation.

Capabilities

Valid Lexical Scope

Uses the TypeScript compiler to detect capture of unserializable data in dollar ($) scopes.

/**
 * Detects capture of unserializable data in dollar ($) scopes using TypeScript type checking
 * @param options Configuration for the rule
 * @param options.allowAny Whether to allow 'any' type captures (default: true)
 */
validLexicalScope: Rule<[{ allowAny?: boolean }]>;

interface DetectorOptions {
  allowAny: boolean;
}

Rule Configuration:

  • Type: problem rule with TypeScript type checking
  • Category: Variables
  • Recommended: error level
  • Strict: error level

Options Schema:

{
  type: 'object',
  properties: {
    allowAny: {
      type: 'boolean',
      default: true
    }
  },
  additionalProperties: false
}

Error Messages:

  • referencesOutside: When referencing variables inside different scopes requiring serialization
  • invalidJsxDollar: When using functions as event handlers without proper wrapping
  • mutableIdentifier: When capturing mutable identifiers that can't be serialized

Usage Example:

// ❌ Invalid: capturing non-serializable closure
function component() {
  const callback = () => console.log('hello');
  
  return <button onClick$={callback} />; // Error: functions not serializable
}

// ✅ Valid: proper dollar wrapping
function component() {
  const callback = $(() => console.log('hello'));
  
  return <button onClick$={callback} />;
}

Use Method Usage

Detects invalid use of use hooks in Qwik components.

/**
 * Detects invalid use of use hooks
 * Targets CallExpression with callee.name matching /^use[A-Z]/
 */
useMethodUsage: Rule;

Rule Configuration:

  • Type: problem rule
  • Category: Variables
  • Recommended: error level
  • Strict: error level

Usage Example:

// ❌ Invalid: incorrect hook usage
function component() {
  const state = useState(); // Error: improper hook call
  return <div>{state}</div>;
}

// ✅ Valid: proper hook usage
export default component$(() => {
  const state = useSignal(0);
  return <div>{state.value}</div>;
});

Unused Server

Detects unused server$() functions in the codebase.

/**
 * Detects unused server$() functions
 */
unusedServer: Rule;

Rule Configuration:

  • Type: problem rule
  • Category: Variables
  • Recommended: error level
  • Strict: error level

Usage Example:

// ❌ Invalid: unused server function
const unusedServerFunction = server$(() => {
  return { data: 'unused' };
}); // Error: server function defined but never used

// ✅ Valid: used server function
const getServerData = server$(() => {
  return { data: 'server data' };
});

export default component$(() => {
  const serverData = useResource$(getServerData);
  return <div>{serverData.value?.data}</div>;
});

Error Handling

Common Error Patterns

Lexical Scope Violations:

  • Capturing DOM elements in dollar functions
  • Referencing non-serializable objects (functions, classes, symbols)
  • Using variables from outer scopes that contain unserializable data

Hook Usage Errors:

  • Calling hooks outside of component functions
  • Conditional hook calls
  • Hook calls in regular functions instead of component$

Server Function Issues:

  • Defining server$ functions that are never called
  • Unused imports of server functions
  • Dead code containing server$ calls

TypeScript Integration

The valid-lexical-scope rule requires TypeScript compiler integration:

Required Setup:

// ESLint configuration must include TypeScript parser options
parserOptions: {
  projectService: true, // or project: ['./tsconfig.json']
  tsconfigRootDir: import.meta.dirname,
}

Type Checking Process:

  1. Rule accesses TypeScript Program from parser services
  2. Performs type analysis on captured variables
  3. Validates serializability based on TypeScript types
  4. Reports violations with detailed error messages

Types

// Rule type definitions (standardized to TSESLint)  
type Rule<TOptions = any> = TSESLint.RuleModule<string, TOptions>;

// TypeScript integration types
interface DetectorOptions {
  allowAny: boolean;
}

// ESLint rule context
interface RuleContext {
  report(descriptor: ReportDescriptor): void;
  getSourceCode(): SourceCode;
  parserServices?: {
    program: ts.Program;
    esTreeNodeToTSNodeMap: WeakMap<any, ts.Node>;
  };
}

// Error reporting
interface ReportDescriptor {
  node: any;
  messageId: string;
  data?: Record<string, any>;
  fix?: (fixer: RuleFixer) => Fix | Fix[];
}