Skip to content

Linter Rule: Disallow deprecated Rails UJS attributes #1346

@marcoroth

Description

@marcoroth

Rule: html-no-deprecated-ujs-attributes

Description

Disallow the use of deprecated Rails UJS attributes and data-* attributes. These were part of @rails/ujs (and its predecessor jquery-ujs) and have been superseded by Turbo and Stimulus equivalents.

Rationale

Prior to Rails 7, Rails shipped with @rails/ujs by default. This library added JavaScript behavior to HTML elements through special options and data-* attributes. Following Rails 7, this library is no longer included by default.

The @rails/ujs library integrated with the following link_to options:

  • method: dynamically creates an HTML form and immediately submits it using the specified HTTP verb. Supported verbs are :post, :delete, :patch, and :put. If the user has JavaScript disabled, the request falls back to GET.

  • remote: true makes @rails/ujs perform an Ajax request to the URL instead of following the link.

It also integrated with the following data: options:

  • confirm: prompts the user with the specified question. If the user accepts, the action proceeds normally; otherwise no action is taken.

  • disable_with: replaces the element's text with the specified value while the request is in progress, preventing double submissions.

Continuing to use these attributes in new code leads to a mix of legacy and modern patterns, making the codebase harder to understand and maintain. Migrating to Turbo equivalents ensures compatibility with modern Rails and removes the dependency on the legacy @rails/ujs library.

Examples

✅ Good

<%= link_to "Delete", post_path(@post), data: { turbo_method: :delete } %>
<%= link_to "Delete", post_path(@post), data: { turbo_confirm: "Are you sure?" } %>
<%= form_with model: @post do |f| %>
  <%= f.submit "Save", data: { turbo_submits_with: "Saving..." } %>
<% end %>
<a href="/posts/1" data-turbo-method="delete">Delete</a>
<a href="/posts/1" data-turbo-confirm="Are you sure?">Delete</a>
<button data-turbo-submits-with="Saving...">Save</button>

🚫 Bad

<%= link_to "Delete", post_path(@post), method: :delete %>
<%= link_to "Delete", post_path(@post), data: { method: :delete } %>
<%= link_to "Delete", post_path(@post), data: { confirm: "Are you sure?" } %>
<%= form_with model: @post do |f| %>
  <%= f.submit "Save", data: { disable_with: "Saving..." } %>
<% end %>
<a href="/posts/1" data-method="delete">Delete</a>
<a href="/posts/1" data-confirm="Are you sure?">Delete</a>
<button data-disable-with="Saving...">Save</button>
<a href="/posts" data-remote="true">Load posts</a>

References

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions