Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for native layouts #68

Merged
merged 8 commits into from
Dec 1, 2023
Merged

Add support for native layouts #68

merged 8 commits into from
Dec 1, 2023

Conversation

supernintendo
Copy link
Contributor

@supernintendo supernintendo commented Nov 29, 2023

This PR adds layouts support for native platforms. To enable native layouts within a Phoenix application, add use LiveViewNative.Layouts to your app's layout module like so:

defmodule MyAppWeb.Layouts do
  use ElixirconfChatWeb, :html
  use LiveViewNative.Layouts

  embed_templates "layouts/*.html"
end

Now each time the embed_templates/1 macro is used, LiveView Native will look for a template in the same directory with the same name for each platform using its file extension. For example if your app includes :live_view_native_swift_ui as a Mix dependency, all of the following templates will be compiled:

  • app.html.heex
  • app.swiftui.heex
  • root.html.heex
  • root.swiftui.heex

LiveView Native will choose which layout to render automatically based on the type of client that connects:

layoutsdemo.mov

Some additional notes:

  • Each template will be compiled using the configuration of the platform library it corresponds with (so for :swiftui your template will contain SwiftUI nodes like <HStack>, <VStack>, <Text> instead of HTML).
  • Stylesheets can be included within layouts by using them on the layouts module, similar to how they're inherited in LiveViews and LiveComponents.
  • A special element, csrf-token, is supported on all non-HTML platforms for setting the CRSF token (since native platforms might not support the meta tag. Include it in your root layout like so:
<csrf-token value={get_csrf_token()} />
<%= @inner_content %>

Closes #44

@supernintendo supernintendo changed the title Add support for layouts Add support for native layouts Nov 29, 2023
@AZholtkevych
Copy link

@carson-katri could you please review this one?

@supernintendo supernintendo merged commit 02b628a into main Dec 1, 2023
1 check passed
@supernintendo supernintendo deleted the layouts branch December 1, 2023 00:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for native layouts
3 participants