Compatibility with LiveView 0.20
mayel opened this issue · comments
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.
+1
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
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.
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. 🤷
@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.
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: