npm.io
0.3.85 • Published 6d ago

@tsrx/eslint-parser

Licence
MIT
Version
0.3.85
Deps
1
Size
57 kB
Vulns
0
Weekly
0

@tsrx/eslint-parser

npm version npm downloads

ESLint parser for TSRX files. This parser enables ESLint to understand and lint .tsrx files by default, using the shared TSRX parser from @tsrx/core.

Installation

pnpm add --save-dev '@tsrx/eslint-parser'
# or
npm install --save-dev '@tsrx/eslint-parser'
# or
yarn add --dev '@tsrx/eslint-parser'

Usage

Flat Config (ESLint 9+)
// eslint.config.js
import tsrxParser from '@tsrx/eslint-parser';
import tsrxPlugin from '@tsrx/eslint-plugin';

export default [
  {
    files: ['**/*.tsrx'],
    languageOptions: {
      parser: tsrxParser,
    },
    plugins: {
      ripple: tsrxPlugin,
    },
    rules: {
      ...tsrxPlugin.configs.recommended.rules,
    },
  },
];
Legacy Config (.eslintrc)
{
  "overrides": [
    {
      "files": ["*.tsrx"],
      "parser": "@tsrx/eslint-parser",
      "plugins": ["ripple"],
      "extends": ["plugin:ripple/recommended"]
    }
  ]
}

How It Works

This parser uses the shared TSRX parser (@tsrx/core) to parse TSRX files into an ESTree-compatible AST that ESLint can analyze.

The parser:

  1. Parses the TSRX source code (.tsrx)
  2. Normalizes the AST for ESLint traversal
  3. Returns the ESTree AST to ESLint
  4. Allows ESLint rules to analyze TSRX-specific patterns

Supported Syntax

The parser supports TSRX syntax including:

  • Native TSRX elements and fragments as JavaScript expressions
  • JSX statement containers with @{ ... } for setup plus one rendered output
  • Template directives like @if, @for, @switch, and @try
  • Function components that return TSRX, TSX, or standard JavaScript values
  • track() reactive values (imported from ripple)
  • &{} and &[] lazy destructuring
  • Reactive collections
  • All standard JavaScript/TypeScript syntax

Example

Given a .tsrx file:

import { track } from 'ripple';

export function Counter() @{
  let &[count] = track(0);

  <button onClick={() => count++}>
    Increment
    <span>{count}</span>
  </button>
}

The parser will successfully parse this and allow ESLint rules (like those from @tsrx/eslint-plugin) to check for:

  • Track calls at module scope
  • Missing @ operators
  • Invalid rendering control flow
  • And more

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Keywords