Page 191 shows two screenshots of helpful warning messages about faulty calls to function components. The book explains:

The Elixir Language Server extension in VSCode provides us with these helpful warnings.

This is the first and only mention of VSCode in the book. Some users might not use VSCode. (I use Vim.)

I suggest showing the consequences of the faulty calls when VSCode is not used.

The first survey_live.html.heex example calls the hero component with a content attribute that has an invalid type.

<Component.hero content={123} >
  Please fill out our survey
</Component.hero>

The Phoenix server logs this warning:

warning: attribute "content" in component PentoWeb.SurveyLive.Component.hero/1 must be a :string, got: 123
  lib/pento_web/live/survey_live.html.heex:1: (file)

The survey web page displays the content 123.

image615×271 2.75 KB

The second example calls the hero component without any inner_block content.

<Component.hero content="Survey" />

The Phoenix server logs this error with a stack trace:

** (exit) an exception was raised:
    ** (KeyError) key :inner_block not found in: %{__changed__: nil, __given__: %{__changed__: nil, content: "Survey"}, content: "Survey"}

The web browser displays an error page with the error message, a listing of the hero component, and a stack trace.

It is interesting that Phoenix reports no warning or error when the inner_block content is omitted with either of these representations:

<Component.hero content="Survey" >
</Component.hero>

or

<Component.hero content="Survey" ></Component.hero>

In both cases, the web browser displays a reasonable page with no inner_block content.

image530×242 3.81 KB

The source HTML shows the two header elements of the hero component with the content attribute value and empty inner_block content interpolated:

<h1 class="font-heavy text-3xl">
  Survey
</h1>
<h3>
  
</h3>