@ripple-ts/eslint-parser

ESLint parser for Ripple component files. This parser enables ESLint to understand and lint .tsrx files by default, while also supporting .tsrx files through Ripple's built-in compiler.

Installation

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

Note: This parser requires ripple as a peer dependency.

Usage

Flat Config (ESLint 9+)

// eslint.config.js
import rippleParser from '@ripple-ts/eslint-parser';
import ripplePlugin from '@ripple-ts/eslint-plugin';

export default [
  {
    files: ['**/*.{tsrx,ripple}'],
    languageOptions: {
      parser: rippleParser,
    },
    plugins: {
      ripple: ripplePlugin,
    },
    rules: {
      ...ripplePlugin.configs.recommended.rules,
    },
  },
];

Legacy Config (.eslintrc)

{
  "overrides": [
    {
      "files": ["*.tsrx", "*.tsrx"],
      "parser": "@ripple-ts/eslint-parser",
      "plugins": ["ripple"],
      "extends": ["plugin:ripple/recommended"]
    }
  ]
}

How It Works

This parser uses Ripple's compiler (ripple/compiler) to parse Ripple component files into an ESTree-compatible AST that ESLint can analyze. The Ripple compiler already outputs ESTree-compliant ASTs, making integration straightforward.

The parser:

1. Loads the Ripple compiler
2. Parses the component source code (.tsrx or .tsrx)
3. Returns the ESTree AST to ESLint
4. Allows ESLint rules to analyze Ripple-specific patterns

Supported Syntax

The parser supports all Ripple syntax including:

• component declarations
• track() reactive values (imported from ripple)
• @ unboxing operator
• Reactive collections (RippleArray, RippleObject, etc.)
• JSX-like templating inside components
• All standard JavaScript/TypeScript syntax

Example

Given a .tsrx file:

import { track } from 'ripple';

export component Counter() {
  let count = track(0);

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

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

• Track calls at module scope
• Missing @ operators
• Component export requirements
• And more

Limitations

• The parser requires Node.js runtime as it uses require() to load the Ripple compiler
• Browser-based linting is not currently supported

Related Packages

• @ripple-ts/eslint-plugin - ESLint rules for Ripple
• ripple - The Ripple framework
• @ripple-ts/vite-plugin - Vite plugin for Ripple
• @ripple-ts/prettier-plugin - Prettier plugin for Ripple

License

MIT

Contributing

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