Compatibility with LiveView 0.20

[mayel]

Our codebase compiles and runs with no issues using LV 0.20.0 and Surface 0.11.0 :)

It seems that support for debug annotations needs to be added to Surface though. That's all I've noticed so far.

[noozo]

+1

[noozo]

Related to enhancement released in LV 0.20.0:

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

[endorphin3d]

I installed LiveView 0.20.2 with Surface 0.11.1 and I discovered one bug: When you embed a Surface.LiveComponent from a Surface.LiveView, the LiveComponent's update/3 function gets called twice on page load (I just put an IO.inspect in the update body). I then downgraded LiveView to 0.19.0 and found that update was now only being called once.

[dougw-bc]

Another LiveComponent issue I noticed, which might be related, and is not fixed in fix-lv-20-compat is all my Surface LiveComponents when calculating diffs (i think) it errors with more than a single root node.
There is a single root node, but it is a Surface component. Using a plain div as the root node of the LC fixes it.

I think update/3 being called twice might have something to do with it. 🤷

[msaraiva]

@dougw-bc is that a server or client error? Live components must have a single root node but that root node cannot be another component. As far as I can remember we even have validation for that.

Update: We validate it as a warning:

cannot have a LiveComponent as root node of another LiveComponent.

[dougw-bc]

It is not a LiveComponent but a regular Component at the root of a LiveComponent - which was working prior to liveview 0.20.2. If this was a deliberate upstream liveview change - no problem adding a wrapper div seems to solve the problem...

LiveView now throws this error - but as mentioned ^ maybe it is intentional:

** (ArgumentError) error on BCWeb.DirectInviteModal.render/1 with id of "direct-invite-modal". Stateful components must have a single static HTML tag at the root
  (phoenix_live_view 0.20.3) lib/phoenix_live_view/diff.ex:344: Phoenix.LiveView.Diff.component_to_rendered/3

The fix-lv-20-compat branch needs updated deps to get to liveview 0.20.2 that upgrades phoenix_html 3.3.3 => 4.0.0 (major) which breaks some other components mostly inputs - worked through some of the changes here:

main...harmon25:surface:lv-0.20.2

[dougw-bc]

I have made a PR with latest liveview + other updates deps:

#728