Action items for potential upstream LV changes

bcardarella commented 10 months ago

If https://github.com/phoenixframework/phoenix_live_view/pull/2962 is accepted then the following changes will need to be done to the client:

on the DeadView render the text/swiftui ACCEPT header should be used instead of a query param
on the LV socket connection ?_phoenix_format=swiftui will be used
ignore HTML comments. With this PR template annotations will be possible. Here is some example output:

<!-- <LvnDemo3Web.Layouts.root_swiftui> lib/lvn_demo3_web/components/layouts/root.swiftui.heex:1 --><meta name="csrf-token" content="LSoFLnwGJlUBYAQwKBhqLDkCKjRxansmDP1A90RbY2JIgMSazGhM7_9v"></meta>
<div id="phx-F6NOJYrpw5xq2gyj" data-phx-main data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIdwJpZG0AAAAUcGh4LUY2Tk9KWXJwdzV4cTJneWp3B3Nlc3Npb250AAAAAHcKcGFyZW50X3BpZHcDbmlsdwZyb3V0ZXJ3GUVsaXhpci5Mdm5EZW1vM1dlYi5Sb3V0ZXJ3BHZpZXd3G0VsaXhpci5Mdm5EZW1vM1dlYi5Ib21lTGl2ZXcIcm9vdF9waWR3A25pbHcJcm9vdF92aWV3dxtFbGl4aXIuTHZuRGVtbzNXZWIuSG9tZUxpdmV3DGxpdmVfc2Vzc2lvbmgCdwdkZWZhdWx0bggAUm76PQ1OoxduBgD7MA6UjAFiAAFRgA.3fojK8jhpAK5_RnATE9rScxiySWoIQeVsBsHoKlULxY" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADdwJpZG0AAAAUcGh4LUY2Tk9KWXJwdzV4cTJneWp3BWZsYXNodAAAAAB3CmFzc2lnbl9uZXdqbgYA-zAOlIwBYgABUYA.6UEem35YQfWxXKMDgzrIgDbFzQB-egLQ-QlJtjIk1io"><!-- <LvnDemo3Web.Layouts.app_swiftui> lib/lvn_demo3_web/components/layouts/app.swiftui.heex:1 --><NavStack>
<!-- <LvnDemo3Web.HomeLive.render_swiftui> lib/lvn_demo3_web/live/home_live.swiftui.heex:1 --><Text>Hello, SwiftUI Template!</Text><!-- </LvnDemo3Web.HomeLive.render_swiftui> -->
</NavStack><!-- </LvnDemo3Web.Layouts.app_swiftui> --></div><!-- </LvnDemo3Web.Layouts.root_swiftui> -->

So all of the  elements should be ignored in the client if they aren't already

bcardarella commented 10 months ago

Using the ACCEPT header with text/swiftui content-type gives us the root layout rendering because that is always a DeadView render. The following setup is necessary:

# config.exs
config :mime, :types, %{
  "text/swiftui" => ["swiftui"]
}

# router.ex
# note the :accepts and :put_root_layout plugs
pipeline :browser do
   plug :accepts, ["html", "json", "swiftui"]
   plug :fetch_session
   plug :fetch_live_flash
   plug :put_root_layout, html: {LvnDemo3Web.Layouts, :root}, swiftui: {LvnDemo3Web.Layouts, :root_swiftui}
   plug :protect_from_forgery
   plug :put_secure_browser_headers
 end

# layouts.ex
embed_templates "layouts/*.html"
embed_templates "layouts/*.swiftui", suffix: "_swiftui"

I still don't know yet if we will require the LiveViewNative.SessionPlug any longer. That plug provides the format, layouts, and LiveReload functionality. The upstream PR in LV covers all of this except LiveReload and that is only not rendering out because of a constraint against the HTML content-type: https://github.com/phoenixframework/phoenix_live_reload/blob/main/lib/phoenix_live_reload/live_reloader.ex#L154

now the file root.swiftui.heex can be added to layouts/. Because the root layout is a DeadView render only I advocate for not putting any actual application views in there and believe it should be limited to just:

<meta name="csrf-token" content={get_csrf_token()} />
<%= @inner_content %>

carson-katri commented 10 months ago

Because the root layout is a DeadView render only I advocate for not putting any actual application views in there

You need to put the navigation structure in the root layout so that it exists outside of the LiveView. This could be a NavigationStack, NavigationSplitView, TabView, etc.

bcardarella commented 10 months ago

@carson-katri and I discussed in Slack. There are few catches when it comes to the navigation views and why just merging the ViewTree on top of it may break things.

The plan right now is to recommend Navigation views be put into the root template as that is currently working. Once v0.2 is released and we're in development cycle for v0.3 we'll try to implement a method that would allow for nav views to be put into the app layout and some intelligence on the client about how to pop content out

AZholtkevych commented 10 months ago

Blocked by upstream changes

bcardarella commented 9 months ago

This has been completed with https://github.com/liveview-native/live_view_native/commit/17d246342c8254b5011a17b3248012e94b501ad3

liveview-native / liveview-client-swiftui

Action items for potential upstream LV changes #1205