Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

eslint-plugin-ripple

Package Overview
Dependencies
Maintainers
3
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

eslint-plugin-ripple

ESLint plugin for Ripple

latest
Source
npmnpm
Version
0.2.115
Version published
Maintainers
3
Created
Source

eslint-plugin-ripple

ESLint plugin for Ripple - helps enforce best practices and catch common mistakes when writing Ripple applications.

Works just like eslint-plugin-react - simply install and use the recommended config!

Installation

npm install --save-dev eslint-plugin-ripple
# or
yarn add --dev eslint-plugin-ripple
# or
pnpm add --save-dev eslint-plugin-ripple

Usage

Flat Config (ESLint 9+)

// eslint.config.js
import ripple from 'eslint-plugin-ripple';

export default [...ripple.configs.recommended];

The plugin automatically:

  • Detects and uses eslint-parser-ripple if installed for .ripple files
  • Excludes .d.ts files, node_modules, dist, and build directories from linting
  • Works with both .ts/.tsx and .ripple files

Legacy Config (.eslintrc)

{
  "plugins": ["ripple"],
  "extends": ["plugin:ripple/recommended"]
}

Configurations

The recommended configuration enables all rules at their default severity levels (errors and warnings).

import ripple from 'eslint-plugin-ripple';

export default [
  {
    plugins: { ripple },
    rules: ripple.configs.recommended.rules,
  },
];

strict

The strict configuration enables all rules as errors.

import ripple from 'eslint-plugin-ripple';

export default [
  {
    plugins: { ripple },
    rules: ripple.configs.strict.rules,
  },
];

Rules

ripple/no-module-scope-track (error)

Prevents calling track() at module scope. Tracked values must be created within a component context.

Incorrect:

import { track } from 'ripple';

// This will cause runtime errors
let globalCount = track(0);

export component App() {
  <div>{@globalCount}</div>
}

Correct:

import { track } from 'ripple';

export component App() {
  // track() called within component
  let count = track(0);

  <div>{@count}</div>
}

ripple/require-component-export (warning)

Warns when capitalized components are not exported. This helps ensure components are reusable across modules.

Incorrect:

component MyButton() {
  <button>Click me</button>
}
// MyButton is defined but not exported

Correct:

export component MyButton() {
  <button>Click me</button>
}

ripple/prefer-oninput (warning, fixable)

Recommends using onInput instead of onChange for form inputs. Unlike React, Ripple doesn't have synthetic events, so onInput is the correct event handler.

Incorrect:

<input onChange={handleChange} />

Correct:

<input onInput={handleInput} />

This rule is auto-fixable with --fix.

ripple/no-return-in-component (error)

Prevents returning JSX from Ripple components. In Ripple, JSX should be used as statements, not expressions.

Incorrect:

export component App() {
  return <div>Hello World</div>;
}

Correct:

export component App() {
  <div>Hello World</div>
}

ripple/unbox-tracked-values (error)

Ensures tracked values are unboxed with the @ operator when used in JSX expressions.

Incorrect:

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

  // Missing @ operator
  <div>{count}</div>
}

Correct:

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

  // Properly unboxed with @
  <div>{@count}</div>
}

Custom Configuration

You can customize individual rules in your ESLint config:

export default [
  {
    plugins: { ripple },
    rules: {
      'ripple/no-module-scope-track': 'error',
      'ripple/require-component-export': 'off', // Disable this rule
      'ripple/prefer-oninput': 'error', // Make this an error instead of warning
      'ripple/no-return-in-component': 'error',
      'ripple/unbox-tracked-values': 'error',
    },
  },
];

Using with TypeScript

This plugin works seamlessly with TypeScript. Make sure you have @typescript-eslint/parser configured:

import ripple from 'eslint-plugin-ripple';
import tsParser from '@typescript-eslint/parser';

export default [
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.ripple'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: { ripple },
    rules: ripple.configs.recommended.rules,
  },
];

Using with .ripple Files

Full support for .ripple files is available via the eslint-parser-ripple package:

npm install --save-dev eslint-parser-ripple

Then configure your ESLint to use the Ripple parser for .ripple files:

import ripple from 'eslint-plugin-ripple';
import rippleParser from 'eslint-parser-ripple';

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

License

MIT

Contributing

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

Keywords

eslint

FAQs

Package last updated on 09 Oct 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts