This module should be used for creating new LiveView Native Clients.

Configuration

To use LiveView Native you must configure application to register LiveView Native plugins and instruct Phoenix on how to handle certain formats.

# registers each plugin for use
config :live_view_native, plugins: [
  LiveViewNative.SwiftUI,
  LiveViewNative.Jetpack
]

# configure the mimetype for each plugin's format
# refer to the plugin's documentation for each format
# in nearly all cases the content-type should be `"text/:format"`
config :mime, :types, %{
  "text/swiftui" => [:swiftui],
  "text/jetpack" => [:jetpack]
}

# configures the stylesheet for each format
# refer to the documentation of `LiveViewNative.Stylesheet`
# for more information on configuration options
config :live_view_native_stylesheet,
  content: [
    swiftui: [
      "lib/**/*swiftui*"
    ],
    jetpack: [
      "lib/**/*jetpack*"
    ]
  ]

# instructs Phoenix on how to encode a given format
config :phoenix_template, :format_encoders, [
  swiftui: Phoenix.HTML.Engine,
  jetpack: Phoenix.HTML.Engine
]

# instructs Phoenix on which engine to
# use when compiling `neex` templates
config :phoenix, :template_engines,
  neex: LiveViewNative.Engine

Next you should add LiveViewNative.LiveReloader to your application's endpoint.

if code_reloading? do
  socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
  plug Phoenix.LiveReloader

  # add here to ensure it is only enabled
  # when your application is configured for code reloading
  plug LiveViewNative.LiveReloader

Finally you will need to configure your router's plugs

plug :accepts, ["html", "swiftui", "jetpack"]
plug :put_root_layout,
  html: {MyAppWeb.Layouts, :root},
  swiftui: {MyAppWeb.Layouts.SwiftUI, :root},
  jetpack: {MyAppWeb.Layouts.Jetpack, :root}

Refer to the documentation in LiveViewNative.Component for more information on native layouts.

You are now ready to create your first LiveView Native app. Refer to the documentation in LiveViewNative.LiveView on how to configure your live views for native.

Enabling LiveView for Native

Now that your application is configured you will need to enable a LiveView for Native.

Assuming your application has the following LiveView route:

live "/", HomeLive

You'll need to add the user MyAppNative, :live_view to that module:

defmodule MyAppWeb.HomeLive do
  use MyAppWeb, :live_view
  use MyAppNative, :live_view

Next you should use the mix lvn.gen.live task to generate the LiveView Native render component and template.

> mix lvn.gen.live swiftui Home

This will generate the following files in your project:

• lib/my_app_web/live/home_live.swiftui.ex
• lib/my_app_web/live/swiftui/home_live.swiftui.neex

Just like a regular LiveView you can decide not to use the template and render templates in-line inside the render component:

defmodule MyAppWeb.HomeLive.SwiftUI do
  use MyAppNative, [:render_component, format: :swiftui]

  def render(assigns, _interface) do
    ~LVN"""
    <Text>Hello, LiveView Native!</Text>
    """
  end
end

Note that unlike a regular LiveView that has render/1 the LiveView Native render component uses render/2 as the 2nd argument will include interface information about the client.

You can read more in LiveViewNative.Component