DevactionUI.DiffView (devaction_ui v0.2.3)

Copy Markdown View Source

The diff of one file in a review: a header with the path, the lines added and removed and a "viewed" checkbox, and the unified diff as a table with the old and the new line numbers, a gutter with the button that adds a comment, and tinted rows for the added and the removed lines. line_thread/1 is the conversation that hangs from a line.

The diff comes as data, never as text to parse: hunks is a list of %{header: "@@ -12,6 +12,9 @@", lines: [...]} (the header is optional) and each line is %{old: 15, new: nil, kind: :del, text: "..."}, where kind is :context, :add or :del and the number that does not exist is nil. With lang: :elixir the code is coloured through DevactionUI.Highlight; without it the row's own colour is used. The sign of the line (a space, + or -) is part of the text, so the difference is not only a colour.

A thread is a :thread slot with the line it hangs from and its side (:new, the default, or :old); it opens under that line, and the button of that line turns amber. The button of a line sends comment_event with path, line and side; a removed line has no button unless comment_removed is set. The checkbox sends viewed_event with path. Events are attributes (a string or a %JS{}) and target is the phx-target when used inside a LiveComponent. The icons come through slots; the button falls back to + and the checkbox to ✓.

Summary

Types

hunk()
line()

Functions

diff(assigns)

The header and the unified diff of one file.

line_thread(assigns)

The conversation attached to a line of the diff.

Types

hunk()

@type hunk() :: %{optional(:header) => String.t() | nil, lines: [line()]}

line()

@type line() :: %{
  :kind => :context | :add | :del,
  :text => String.t(),
  optional(:old) => pos_integer() | nil,
  optional(:new) => pos_integer() | nil
}

Functions

diff(assigns)

@spec diff(map()) :: Phoenix.LiveView.Rendered.t()

The header and the unified diff of one file.

Attributes

  • id (:string) (required)
  • path (:string) (required) - the path of the file, shown in the header.
  • hunks (:list) (required) - the diff as data; see the module documentation.
  • additions (:integer) - the lines added in the header; counted from the hunks when not given. Defaults to nil.
  • deletions (:integer) - the lines removed in the header; counted from the hunks when not given. Defaults to nil.
  • lang (:atom) - :elixir colours the code through DevactionUI.Highlight. Defaults to nil. Must be one of nil, or :elixir.
  • viewed (:boolean) - the file is marked as viewed. Defaults to false.
  • viewed_label (:string) (required) - the label of the viewed checkbox.
  • viewed_event (:any) - sent with path when the checkbox is pressed. Defaults to nil.
  • comment_label (:string) (required) - names the button of a line, as in "Comment on line %{line}".
  • comment_event (:any) - sent with path, line and side when the button of a line is pressed. Defaults to nil.
  • comment_removed (:boolean) - removed lines get the comment button too (on the old side). Defaults to false.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • thread - a conversation hung from a line; its content is a line_thread/1. Accepts attributes:
    • line (:integer) (required) - the number of the line it hangs from.
    • side (:atom) - :new (the default) or :old.
  • file_icon - the icon before the path.
  • comment_icon - the content of the comment button; without it, +.
  • check_icon - the mark of the checked viewed checkbox; without it, ✓.

line_thread(assigns)

@spec line_thread(map()) :: Phoenix.LiveView.Rendered.t()

The conversation attached to a line of the diff.

Attributes

  • id (:string) (required)
  • label (:string) (required) - the name of the conversation for assistive technology.
  • path (:string) (required) - the file the conversation is about.
  • line (:integer) (required) - the line it hangs from.
  • side (:atom) - Defaults to :new. Must be one of :new, or :old.
  • placeholder (:string) (required) - the placeholder of the reply field.
  • reply_label (:string) (required) - the name of the reply field.
  • note (:string) (required) - the small note under the field, e.g. Markdown supported.
  • resolve_label (:string) (required) - the label of the button that closes the thread.
  • comment_label (:string) (required) - the label of the button that sends the reply.
  • suggestion_label (:string) - the title of a suggested change. Defaults to nil.
  • apply_label (:string) - the label of the button that applies a suggested change. Defaults to nil.
  • resolved (:boolean) - the thread is closed: the :summary slot shows instead, or nothing without it. Defaults to false.
  • resolve_event (:any) - sent with path, line and side. Defaults to nil.
  • comment_event (:any) - the form's submit event, with body, path, line and side. Defaults to nil.
  • apply_event (:any) - sent with path, line, side and message. Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • message (required) - one message; its content is the text. Accepts attributes:
    • id (:string) - sent as message when its suggestion is applied.
    • author (:string) (required)
    • initials (:string) (required) - in the square before the author.
    • time (:string) - when it was written, as text.
    • ai_label (:string) - the tag after the author; given, the author is an AI.
    • suggestion (:map) - a suggested change, %{from: "old line", to: "new line"}.
  • summary - what shows in place of the thread when it is resolved.