Add dev config for injecting HTML comments around function components

[chrismccord]

This would inject something like:

<!-- MyAppWeb.Components.flash lib/app_web/components.ex:125 -->
<div id="flash>
  ...
</div>
<!-- /MyAppWeb.Components.flash lib/app_web/components.ex:125 -->

Rationale: for a componentized app it can often become difficult to ascertain from the browser markup where it is being generated from. The module/func/file/line will be a nice dev UX boost.

Caveats: we can only inject comments when we see HTML tags inside the component.

[derpycoder]

Hello @chrismccord,

This is how I solve this problem:

A Live Component is shown at the top:

Instant.Nav.to.Source.Code.mov

<.live_component
        :if={Mix.env() == :dev}
        module={DerpyToolsWeb.InspectorComponent}
        file={__ENV__.file}
        line={__ENV__.line}
        id={"#{__MODULE__}-inspector"}
 />

defmodule DerpyToolsWeb.InspectorComponent do
  @moduledoc """
  Useful component for development.
  Can be embedded into other components, which will allow developers to open
  the source code of the component directly from browser.
  """
  use DerpyToolsWeb, :live_component

  def render(assigns) do
    ~H"""
    <div class="absolute -top-10 flex justify-end w-full">
      <%!-- To link directly to the storybook page! --%>
      <button class="rounded-tl-lg rounded-bl-lg p-2 bg-slate-100 m-0" title="Show in Catalog">
        <Heroicons.eye solid class="h-3 w-3 text-gray-500" />
      </button>
      <button
        phx-click="inspect-source"
        class="-ml-1 rounded-tr-lg rounded-br-lg p-2 bg-slate-100 m-0 border-l border-slate-200"
        title="Open in VS Code"
        phx-target={@myself}
      >
        <Heroicons.code_bracket solid class="h-3 w-3 text-gray-500" />
      </button>
    </div>
    """
  end

  def handle_event("inspect-source", _params, socket) do
    %{file: file, line: line} = socket.assigns
    System.cmd("code", ["--goto", "#{file}:#{line}"])

    {:noreply, socket}
  end
end

Of course, I had to put the following env variable for iex to open the VS Code editor properly:

export ELIXIR_EDITOR="code --goto __FILE__:__LINE__"

---

I was thinking if it was possible for this kind of functionality to be built in. So in dev, upon hover of a web component, a red outline can show up, with buttons to take us to the source code.

In production, if enabled, it can take us to the hosted storybook, or source code in git.
In dev, it can open the storybook locally, or just take us to our editor of choice!

Much better UX, than just printing the file name and line number in comments.

---

P.S. This doesn't work for function components, since we can't embed live component inside function components!

[derpycoder]

Tada, it works like a charm!

But it would be great, if every component somehow had this ability, and we can just inspect each component, and jump to the source code!

Made a Source Code Inspector, useful in big projects or large teams

[tmbb]

I've made a pull request handing the compiler side of this issue: #2719

[SteffenDE]

Added in 0.20, right?

phoenix_live_view/CHANGELOG.md

Line 77 in 7781a38

* Add heex debug annotations via `config :phoenix_live_view, debug_heex_annotations: true`, which provides special HTML comments that wrap around rendered components to help you identify where markup in your HTML document is rendered within your function component tree