jshprentz

jshprentz

Programming Phoenix LiveView B10.0: Some readers do not use VSCode (page 191)

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.

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.

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>

Where Next?

Popular Pragmatic Bookshelf topics Top

abtin
page 20: … protoc command… I had to additionally run the following go get commands in order to be able to compile protobuf code using go...
New
jeffmcompsci
Title: Design and Build Great Web APIs - typo “https://company-atk.herokuapp.com/2258ie4t68jv” (page 19, third bullet in URL list) Typo:...
New
fynn
This is as much a suggestion as a question, as a note for others. Locally the SGP30 wasn’t available, so I ordered a SGP40. On page 53, ...
New
jgchristopher
“The ProductLive.Index template calls a helper function, live_component/3, that in turn calls on the modal component. ” Excerpt From: Br...
New
jskubick
I found an issue in Chapter 7 regarding android:backgroundTint vs app:backgroundTint. How to replicate: load chapter-7 from zipfile i...
New
brunogirin
When installing Cards as an editable package, I get the following error: ERROR: File “setup.py” not found. Directory cannot be installe...
New
taguniversalmachine
Hi, I am getting an error I cannot figure out on my test. I have what I think is the exact code from the book, other than I changed “us...
New
EdBorn
Title: Agile Web Development with Rails 7: (page 70) I am running windows 11 pro with rails 7.0.3 and ruby 3.1.2p20 (2022-04-12 revision...
New
redconfetti
Docker-Machine became part of the Docker Toolbox, which was deprecated in 2020, long after Docker Desktop supported Docker Engine nativel...
New
roadbike
From page 13: On Python 3.7, you can install the libraries with pip by running these commands inside a Python venv using Visual Studio ...
New

Other popular topics Top

AstonJ
Or looking forward to? :nerd_face:
483 10427 254
New
PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
mafinar
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New
Maartz
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
New
AstonJ
If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol: bre...
New
PragmaticBookshelf
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File &gt; New Rule: And select Deny, O...
New
AstonJ
Curious what kind of results others are getting, I think actually prefer the 7B model to the 32B model, not only is it faster but the qua...
New

Sub Categories: