Bylaw.Credo.Check.HEEx.RequireLoadingStateForSubmit (bylaw_credo v0.1.0-alpha.1)

Basics

This check has a base priority of high and works with any version of Elixir.

Explanation

Requires HEEx submit forms and controls to expose a loading or disabled state.

Examples

Embedded ~H templates are checked during normal Credo runs over Elixir files. Standalone .html.heex templates require enabling Bylaw.Credo.Plugin.HEExSources in Credo's plugins configuration. Avoid:

  ~H"""
  <.form for={@form} phx-submit="save">
    <button type="submit">Save</button>
  </.form>
  """

Prefer:

  ~H"""
  <.form for={@form} phx-submit="save">
    <button type="submit" phx-disable-with="Saving...">Save</button>
  </.form>
  """

Custom loading conventions can be configured with :loading_attrs or :loading_class_patterns.

Notes

Embedded ~H templates in .ex and .exs files are checked by Credo's normal source traversal. Standalone .html.heex templates are checked when Bylaw.Credo.Plugin.HEExSources is enabled in .credo.exs.

This check uses static HEEx token analysis, so it reports only patterns visible in the template source.

Options

Configure options in .credo.exs with the check tuple:

%{
  configs: [
    %{
      name: "default",
      checks: [
        {Bylaw.Credo.Check.HEEx.RequireLoadingStateForSubmit,
         [
           loading_attrs: ["phx-disable-with", "disabled"],
           loading_class_patterns: ["is-loading"]
         ]}
      ]
    }
  ]
}

• :loading_attrs - Attribute names that satisfy the loading-state requirement (default: phx-disable-with, disabled).
• :loading_class_patterns - Class-name substrings that satisfy the loading-state requirement (default: none).

Usage

Add this check to Credo's checks: list in .credo.exs:

%{
  configs: [
    %{
      name: "default",
      checks: [
        {Bylaw.Credo.Check.HEEx.RequireLoadingStateForSubmit, []}
      ]
    }
  ]
}

Check-Specific Parameters

Use the following parameters to configure this check:

:loading_attrs

Attribute names that satisfy the loading-state requirement (default: phx-disable-with, disabled).

This parameter defaults to ["phx-disable-with", "disabled"].

:loading_class_patterns

Class-name substrings that satisfy the loading-state requirement (default: none).

This parameter defaults to [].

General Parameters

Like with all checks, general params can be applied.

Parameters can be configured via the .credo.exs config file.