From b35cdf1fd7589ccefc9f3370ad1fe384ecead3c8 Mon Sep 17 00:00:00 2001
From: Mayel de Borniol <git@mayel.space>
Date: Tue, 8 Oct 2024 16:55:26 +0100
Subject: [PATCH] WIP
 https://github.com/bonfire-networks/bonfire-app/issues/1043

---
 assets/static/assets/_.swiftui.styles         |   0
 lib/components/core_components.swiftui.ex     |  81 ++++++++++--
 .../nav/header/guest_header_live.ex           |   2 +-
 .../nav/user_menu/user_menu_links_live.sface  |   4 +-
 lib/endpoint_live_reload.ex                   |   2 +-
 lib/layout/app.swiftui.heex                   |   1 -
 lib/layout/app.swiftui.neex                   |   2 +
 lib/layout/root.swiftui.heex                  |   1 -
 lib/layout/root.swiftui.neex                  |   5 +
 lib/static_generator/static_generator_plug.ex |  20 ++-
 lib/themes/default/app.swiftui.ex             |  70 +++++++++++
 lib/ui_common.ex                              |  28 +++++
 lib/web.ex                                    | 118 +++++++++++-------
 lib/web_native.ex                             |  15 +--
 mix.exs                                       |  12 +-
 15 files changed, 285 insertions(+), 76 deletions(-)
 create mode 100644 assets/static/assets/_.swiftui.styles
 delete mode 100644 lib/layout/app.swiftui.heex
 create mode 100644 lib/layout/app.swiftui.neex
 delete mode 100644 lib/layout/root.swiftui.heex
 create mode 100644 lib/layout/root.swiftui.neex
 create mode 100644 lib/themes/default/app.swiftui.ex

diff --git a/assets/static/assets/_.swiftui.styles b/assets/static/assets/_.swiftui.styles
new file mode 100644
index 00000000..e69de29b
diff --git a/lib/components/core_components.swiftui.ex b/lib/components/core_components.swiftui.ex
index 2bd2cfc1..da16bc16 100644
--- a/lib/components/core_components.swiftui.ex
+++ b/lib/components/core_components.swiftui.ex
@@ -1,4 +1,5 @@
 if Code.ensure_loaded?(LiveViewNative.Component) do
+
   defmodule Bonfire.UI.Common.CoreComponents.SwiftUI do
     @moduledoc """
     Provides core UI components built for SwiftUI.
@@ -18,9 +19,62 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
     """
 
     use LiveViewNative.Component
+    use Bonfire.UI.Common
 
     import LiveViewNative.LiveForm.Component
 
+
+     @doc """
+     A special component that allows users to inject dynamic live components
+     """
+     attr :module, :atom, required: true
+     attr :id, :string, required: true
+     attr :function, :atom, default: :render
+     slot :default
+     def stateful_component(assigns) do
+       # TEMP: until LVN supports live components
+       stateless_component(with true <- module_enabled?(assigns[:module]),
+         {:ok, assigns} <- assigns
+         |> assign(module_default_assigns(assigns[:module])) 
+         |> assign(assigns) # again so we override defaults
+         |> assign_new(:myself, fn -> nil end)
+         |> assign_new(:streams, fn -> nil end)
+         |> apply(assigns[:module], :mount, [...]),
+         {:ok, assigns} <- apply(assigns[:module], :update, [assigns, assigns]) do
+            assign_new(assigns, :function, fn -> :render end)
+            |> debug("assi")
+            else e ->
+            error(e)
+            assigns
+            |> debug("erssi")
+            |> assign(:module, __MODULE__)
+            |> assign(:function, :error_msg)
+            |> assign(:text, "Could not render component")
+         end
+       )
+       # TODO: when LVN supports live components
+       # ~LVN"""
+       #  <Phoenix.Component.live_component module={@module} id={@id}><%= render_slot(@default) %></Phoenix.Component.live_component>
+       # """
+     end
+
+     @doc """
+     A special component that allows users to inject dynamic function components
+     """
+     attr :module, :atom, default: nil
+     attr :function, :atom, default: :render
+     attr :id, :string, default: nil
+     slot :default
+     def stateless_component(assigns) do
+       ~LVN"""
+       <%= Phoenix.LiveView.TagEngine.component(
+             &apply(@module || __MODULE__, @function || :render, [&1]),
+             assigns,
+             {__ENV__.module, __ENV__.function, __ENV__.file, __ENV__.line}
+           ) %>
+       """
+     end
+
     @doc """
     Renders an input with label and error messages.
 
@@ -124,7 +178,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
             <%= @label %>
           </TextFieldLink>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -135,7 +189,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
         <DatePicker id={@id} name={@name} selection={@value} {@rest}>
           <%= @label %>
         </DatePicker>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -147,7 +201,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <MultiDatePicker id={@id} name={@name} selection={@value} {@rest}><%= @label %></MultiDatePicker>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -164,7 +218,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
             <%= name %>
           </Text>
         </Picker>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -176,7 +230,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <Slider id={@id} name={@name} value={@value} lowerBound={@min} upperBound={@max} {@rest}><%= @label %></Slider>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -188,7 +242,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <Stepper id={@id} name={@name} value={@value} {@rest}></Stepper>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -200,7 +254,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <TextEditor id={@id} name={@name} text={@value} {@rest} />
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -209,7 +263,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
       ~LVN"""
       <VStack alignment="leading">
         <TextField id={@id} name={@name} text={@value} prompt={@prompt} {@rest}><%= @placeholder || @label %></TextField>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -218,7 +272,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
       ~LVN"""
       <VStack alignment="leading">
         <SecureField id={@id} name={@name} text={@value} prompt={@prompt} {@rest}><%= @placeholder || @label %></SecureField>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -230,7 +284,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <Toggle id={@id} name={@name} isOn={Map.get(assigns, :checked, Map.get(assigns, :value))} {@rest}></Toggle>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -239,12 +293,13 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
     Generates a generic error message.
     """
     @doc type: :component
-    slot :inner_block, required: true
+    attr :text, :string, required: false, default: nil
+    slot :inner_block, required: false
 
-    def error(assigns) do
+    def error_msg(assigns) do
       ~LVN"""
       <Group style="font(.caption); foregroundStyle(.red)">
-        <%= render_slot(@inner_block) %>
+        <%= @text %> <%= render_slot(@inner_block) %>
       </Group>
       """
     end
diff --git a/lib/components/nav/header/guest_header_live.ex b/lib/components/nav/header/guest_header_live.ex
index 9fa359ca..585191fa 100644
--- a/lib/components/nav/header/guest_header_live.ex
+++ b/lib/components/nav/header/guest_header_live.ex
@@ -4,5 +4,5 @@ defmodule Bonfire.UI.Common.GuestHeaderLive do
   prop page, :string, default: "home"
 
   # @decorate time()
-  render_sface_or_native()
+  # render_sface_or_native()
 end
diff --git a/lib/components/nav/user_menu/user_menu_links_live.sface b/lib/components/nav/user_menu/user_menu_links_live.sface
index 1a064f13..75ce189f 100644
--- a/lib/components/nav/user_menu/user_menu_links_live.sface
+++ b/lib/components/nav/user_menu/user_menu_links_live.sface
@@ -48,14 +48,14 @@
   </LinkLive>
 </li> -->
 
-<!-- <li>
+{!-- <li>
   <StatelessComponent
     module={maybe_component(Bonfire.UI.Groups.NewGroupLive, @__context__)}
     parent_id="user_menu_links"
     open_btn_wrapper_class="flex items-center gap-2 text-sm text-base-content"
     open_btn_class=""
   />
-</li> -->
+</li> --}
 
 <li>
   <LinkLive to={~p"/settings"} class="flex items-center gap-2 text-sm text-base-content">
diff --git a/lib/endpoint_live_reload.ex b/lib/endpoint_live_reload.ex
index 0657b871..5bf1e5bf 100644
--- a/lib/endpoint_live_reload.ex
+++ b/lib/endpoint_live_reload.ex
@@ -15,7 +15,7 @@ defmodule Bonfire.UI.Common.Endpoint.LiveReload do
         plug(Phoenix.LiveReloader)
         plug(Phoenix.CodeReloader)
 
-        if unquote(System.get_env("NATIVE_ENABLED") in ["1", "true"]) do
+        if unquote(System.get_env("WITH_LV_NATIVE") in ["1", "true"]) do
           plug LiveViewNative.LiveReloader
         end
 
diff --git a/lib/layout/app.swiftui.heex b/lib/layout/app.swiftui.heex
deleted file mode 100644
index 05433985..00000000
--- a/lib/layout/app.swiftui.heex
+++ /dev/null
@@ -1 +0,0 @@
-<%= @inner_content %>
diff --git a/lib/layout/app.swiftui.neex b/lib/layout/app.swiftui.neex
new file mode 100644
index 00000000..3d8af175
--- /dev/null
+++ b/lib/layout/app.swiftui.neex
@@ -0,0 +1,2 @@
+<.flash_group flash={@flash} />
+<%= @inner_content %>
diff --git a/lib/layout/root.swiftui.heex b/lib/layout/root.swiftui.heex
deleted file mode 100644
index 05433985..00000000
--- a/lib/layout/root.swiftui.heex
+++ /dev/null
@@ -1 +0,0 @@
-<%= @inner_content %>
diff --git a/lib/layout/root.swiftui.neex b/lib/layout/root.swiftui.neex
new file mode 100644
index 00000000..75440c9c
--- /dev/null
+++ b/lib/layout/root.swiftui.neex
@@ -0,0 +1,5 @@
+<.csrf_token />
+<Style url={~p"/assets/app.swiftui.styles"} />
+<NavigationStack>
+  <%= @inner_content %>
+</NavigationStack>
diff --git a/lib/static_generator/static_generator_plug.ex b/lib/static_generator/static_generator_plug.ex
index 7ee5c4f0..d62e4063 100644
--- a/lib/static_generator/static_generator_plug.ex
+++ b/lib/static_generator/static_generator_plug.ex
@@ -17,14 +17,30 @@ defmodule Bonfire.UI.Common.StaticGeneratorPlug do
     conn
   end
 
+  def make_request_path_static(%{query_params: %{"_format" => format}} = conn, _) do
+    # for LVN
+    debug("skip cache")
+    conn
+    # do_make_request_path_static(conn, format)
+  end
+
+  def make_request_path_static(%{query_params: %{"_email_format" => format}} = conn, _) do
+    # for email templates
+    do_make_request_path_static(conn, format)
+  end
+
   def make_request_path_static(conn, _) do
-    filename = "index.html"
+    do_make_request_path_static(conn)
+  end
+
+  defp do_make_request_path_static(conn, ext \\ "html") do
+    filename = "index.#{ext}"
 
     request_path = conn.request_path || "/"
 
     #  only generate expired or non-existing caches if on demand mode is enabled (vs for example cron mode)
     with true <- Config.get([__MODULE__, :generate_mode]) == :on_demand,
-         %{error: _} <- Bonfire.UI.Common.StaticGenerator.maybe_generate(request_path) do
+         %{error: _} <- Bonfire.UI.Common.StaticGenerator.maybe_generate(request_path, ext: ext) do
       error("Could not find or generate a static cache at #{request_path}")
       conn
     else
diff --git a/lib/themes/default/app.swiftui.ex b/lib/themes/default/app.swiftui.ex
new file mode 100644
index 00000000..48fd3954
--- /dev/null
+++ b/lib/themes/default/app.swiftui.ex
@@ -0,0 +1,70 @@
+defmodule Bonfire.UI.Common.Themes.Default.App.SwiftUI do
+  use LiveViewNative.Stylesheet, :swiftui
+
+  # Add your styles here
+  # Refer to your client's documentation on what the proper syntax
+  # is for defining rules within classes
+  ~SHEET"""
+  
+  """
+
+  def class("main_header") do
+    ~RULES"""
+      toolbar(content: :toolbar)
+      navigationTitle(:title)
+      toolbarTitleMenu(content: :content)
+      navigationBarTitleDisplayMode(.inline)
+      toolbarBackgroundVisibility(.visible, for: .navigationBar)
+      toolbarBackground(.ultraThinMaterial, for: .navigationBar)
+    """
+  end
+
+  def class("simple_header") do
+    ~RULES"""
+      toolbar(content: :toolbar)
+      navigationTitle(:title)
+      navigationBarTitleDisplayMode(.inline)
+    """
+  end
+
+  def class("detents:" <> props) do
+    [height, size] = String.split(props, ":")
+
+    # {height, _} = Integer.parse(height)
+
+    ~RULES"""
+    presentationDetents([.{height}, .{size}])
+    """
+ end
+
+ def class("dragindicator:" <> props) do
+
+    ~RULES"""
+    presentationDragIndicator(.{props})
+    """
+ end
+
+
+ def class("ultrathinmaterial") do
+  ~RULES"""
+  presentationBackground(.ultraThinMaterial)
+  """
+ end
+
+  # If you need to have greater control over how your style rules are created
+  # you can use the function defintion style which is more verbose but allows
+  # for more fine-grained controled
+  #
+  # This example shows what is not possible within the more concise ~SHEET
+  # use `<Text class="frame:w100:h200" />` allows for a setting
+  # of both the `width` and `height` values.
+
+  # def class("frame:" <> dims) do
+  #   [width] = Regex.run(~r/w(\d+)/, dims, capture: :all_but_first)
+  #   [height] = Regex.run(~r/h(\d+)/, dims, capture: :all_but_first)
+
+  #   ~RULES"""
+  #   frame(width: {width}, height: {height})
+  #   """
+  # end
+end
\ No newline at end of file
diff --git a/lib/ui_common.ex b/lib/ui_common.ex
index a18e90db..029a8d4b 100644
--- a/lib/ui_common.ex
+++ b/lib/ui_common.ex
@@ -1334,6 +1334,16 @@ defmodule Bonfire.UI.Common do
   Inserts one or many items in an existing stream.
   See `Phoenix.LiveView.stream_insert/4` for opts.
   """
+  def maybe_stream_insert(%{assigns: %{streams: streams}} = socket, name, items, _opts) when is_nil(streams) or streams==%{} do
+    error(
+      assigns(socket),
+      "Invalid stream '#{name}' to render data in. Will set as regular assign instead"
+    )
+
+    socket
+    |> assign_generic(name, items)
+  end
+
   def maybe_stream_insert(%{assigns: %{streams: _}} = socket, name, items, opts)
       when is_list(items) do
     Phoenix.LiveView.stream(socket, name, items, opts)
@@ -1424,4 +1434,22 @@ defmodule Bonfire.UI.Common do
   end
 
   def assigns(_), do: %{}
+
+  def component_props(module) do
+    component_attr(module, :prop)
+  end
+  def component_data(module) do
+    component_attr(module, :data)
+  end
+  defp component_attr(module, key) do
+    apply(Bonfire.UI.Social.FeedLive, :__info__, [:attributes])
+    |> Keyword.get_values(key)
+    |> Enum.flat_map(&(&1))
+  end
+
+  def module_default_assigns(module) do
+    for %{name: name, opts: opts} <- component_props(module) ++ component_data(module), Keyword.has_key?(opts, :default) do
+      {name, opts[:default]}
+    end
+  end
 end
diff --git a/lib/web.ex b/lib/web.ex
index 9db8797c..0c7dbe64 100755
--- a/lib/web.ex
+++ b/lib/web.ex
@@ -41,7 +41,7 @@ defmodule Bonfire.UI.Common.Web do
     # end
   end
 
-  def controller(opts \\ []) do
+  def controller(caller, opts \\ []) do
     opts =
       Keyword.put_new(
         opts,
@@ -63,7 +63,7 @@ defmodule Bonfire.UI.Common.Web do
     end
   end
 
-  def layout(opts \\ []) do
+  def layout(caller, opts \\ []) do
     opts =
       opts
       |> Keyword.put_new(:namespace, Bonfire.UI.Common.Web)
@@ -85,12 +85,27 @@ defmodule Bonfire.UI.Common.Web do
 
       # Include shared imports and aliases for views
       # import Surface
-
       unquote(live_view_helpers())
+
+      ## support LVN layout
+      # use_if_enabled(LiveViewNative.Layouts, env: Application.compile_env!(:bonfire, :env))
+      # use_if_enabled(Bonfire.UI.Common.Web.Native.layout(opts))
+      defmodule SwiftUI do
+        use LiveViewNative.Component, format: :swiftui
+        unquote(live_view_helpers())
+        unquote(Bonfire.UI.Common.Web.Native.helpers(:swiftui))
+        import LiveViewNative.Component, only: [csrf_token: 1]
+        import LiveViewNative.Renderer
+        "*.swiftui"
+        |> LiveViewNative.Renderer.embed_templates()
+        |> IO.inspect(label: "embed_templates layout")
+      end
+
+
     end
   end
 
-  def view(opts \\ []) do
+  def view(caller, opts \\ []) do
     opts =
       opts
       |> Keyword.put_new(:namespace, Bonfire.UI.Common.Web)
@@ -129,19 +144,10 @@ defmodule Bonfire.UI.Common.Web do
   #   )
   # end
 
-  def layout_view(opts \\ []) do
-    quote do
-      unquote(view(opts))
 
-      # support LVN layout
-      # use_if_enabled(LiveViewNative.Layouts, env: Application.compile_env!(:bonfire, :env))
-      # use_if_enabled(Bonfire.UI.Common.Web.Native.layout(opts))
-    end
-  end
-
-  def live_view(opts \\ []) do
+  def live_view(caller, opts \\ []) do
     # IO.inspect(live_view: opts)
-    # maybe_put_layout(opts, :live) 
+    # maybe_put_layout(opts, :live)
     opts =
       Keyword.put_new(
         opts,
@@ -176,7 +182,7 @@ defmodule Bonfire.UI.Common.Web do
     end
   end
 
-  def live_component(opts \\ []) do
+  def live_component(caller, opts \\ []) do
     quote do
       @moduledoc false
       use Phoenix.LiveComponent, unquote(opts)
@@ -199,7 +205,7 @@ defmodule Bonfire.UI.Common.Web do
     end
   end
 
-  def function_component(opts \\ []) do
+  def function_component(caller, opts \\ []) do
     quote do
       @moduledoc false
       # , unquote(Bonfire.UI.Common.Web.take_components_opts(opts))
@@ -222,7 +228,7 @@ defmodule Bonfire.UI.Common.Web do
     if Keyword.keyword?(opts), do: Keyword.take(opts, [:global_prefixes]), else: Keyword.new()
   end
 
-  def live_handler(_opts \\ []) do
+  def live_handler(caller, _opts \\ []) do
     quote do
       import Phoenix.LiveView
       import Phoenix.Component
@@ -241,7 +247,7 @@ defmodule Bonfire.UI.Common.Web do
   #   end
   # end
 
-  def live_plug(_opts \\ []) do
+  def live_plug(caller, _opts \\ []) do
     quote do
       unquote(common_helpers())
 
@@ -250,7 +256,7 @@ defmodule Bonfire.UI.Common.Web do
     end
   end
 
-  def plug(_opts \\ []) do
+  def plug(caller, _opts \\ []) do
     quote do
       unquote(common_helpers())
 
@@ -259,7 +265,7 @@ defmodule Bonfire.UI.Common.Web do
     end
   end
 
-  def router(opts \\ []) do
+  def router(caller, opts \\ []) do
     quote do
       use Phoenix.Router, unquote(opts)
       unquote(common_helpers())
@@ -272,7 +278,7 @@ defmodule Bonfire.UI.Common.Web do
     end
   end
 
-  def channel(opts \\ []) do
+  def channel(caller, opts \\ []) do
     quote do
       use Phoenix.Channel, unquote(opts)
       import Untangle
@@ -527,7 +533,7 @@ defmodule Bonfire.UI.Common.Web do
   end
 
   if Bonfire.Common.Extend.module_exists?(Surface) do
-    def surface_live_view_child(opts \\ []) do
+    def surface_live_view_child(caller, opts \\ []) do
       opts =
         Keyword.put_new(
           opts,
@@ -555,7 +561,7 @@ defmodule Bonfire.UI.Common.Web do
       end
     end
 
-    def surface_live_view(opts \\ []) do
+    def surface_live_view(caller, opts \\ []) do
       opts =
         Keyword.put_new(
           opts,
@@ -581,14 +587,24 @@ defmodule Bonfire.UI.Common.Web do
         embed_templates("#{template_name}.text", suffix: "_text")
 
         # use_if_enabled(LiveViewNative.LiveView, unquote(native_opts()))
-        # Bonfire.UI.Common.Web.Native.live_view(template_name: template_name)
-        # unquote(Bonfire.UI.Common.Web.Native.live_view())
-
-        # require LiveViewNative.Renderer
-        # # "#{template_name || "*"}.*.neex"
-        # "*.*.neex"
-        # |> LiveViewNative.Renderer.embed_templates()
-        # |> IO.inspect(label: "embed_templates #{template_name}")
+        # unquote(Bonfire.UI.Common.Web.Native.live_view(format: :swiftui))
+        # Bonfire.UI.Common.Web.Native.live_view(format: :swiftui, template_name: template_name)
+        # if module_enabled?(LiveViewNative) do
+        use LiveViewNative.LiveView, format: :swiftui, formats: [:swiftui], layouts: [
+          swiftui: {Bonfire.UI.Common.LayoutView.SwiftUI, :app}
+        ]
+        defmodule SwiftUI do
+          # use Phoenix.LiveView, unquote(opts)
+          use LiveViewNative.Component, format: :swiftui
+          unquote(live_view_helpers())
+          unquote(Bonfire.UI.Common.Web.Native.helpers(:swiftui))
+          import LiveViewNative.Renderer
+          unquote("#{Bonfire.UI.Common.filename_for_module_template(caller.module)}.swiftui")
+          # "*.swiftui"
+          |> LiveViewNative.Renderer.embed_templates(name: :render, root: unquote(Path.dirname(caller.file)))
+          |> IO.inspect(label: "embed_templates #{template_name}")
+        end
+        # end
 
         unquote(surface_helpers())
 
@@ -598,7 +614,7 @@ defmodule Bonfire.UI.Common.Web do
       end
     end
 
-    def stateful_component(opts \\ []) do
+    def stateful_component(caller, opts \\ []) do
       # opts =
       #   Keyword.put_new(
       #     opts,
@@ -631,17 +647,25 @@ defmodule Bonfire.UI.Common.Web do
         embed_templates("#{template_name}.text", suffix: "_text")
 
         # use_if_enabled(LiveViewNative.Component) # TEMP workaround for `Not yet implemented. Please convert to a LiveViewNative.Component for now`
-        # #use_if_enabled(LiveViewNative.LiveComponent) 
+        # #use_if_enabled(LiveViewNative.LiveComponent)
 
         # use_if_enabled LiveViewNative.Component,
         #   format: :swiftui,
         #   as: :render_native
 
-        # LiveViewNative.Renderer.embed_templates("*.swiftui.neex", format: :swiftui, name: :render_native)
+        # LiveViewNative.Renderer.embed_templates("*.swiftui", format: :swiftui, name: :render_native)
+
+        use LiveViewNative.Component, format: :swiftui
+        unquote(Bonfire.UI.Common.Web.Native.helpers(:swiftui))
+        import LiveViewNative.Component, only: [csrf_token: 1]
+        import LiveViewNative.Renderer
+        unquote("#{Bonfire.UI.Common.filename_for_module_template(caller.module)}.swiftui")
+        |> LiveViewNative.Renderer.embed_templates(name: :render)
+        |> IO.inspect(label: "embed_templates layout")
       end
     end
 
-    def stateless_component(opts \\ []) do
+    def stateless_component(caller, opts \\ []) do
       quote do
         @moduledoc false
 
@@ -661,13 +685,21 @@ defmodule Bonfire.UI.Common.Web do
         embed_templates("#{template_name}.mjml", suffix: "_mjml")
         embed_templates("#{template_name}.text", suffix: "_text")
 
+        use LiveViewNative.Component, format: :swiftui
+        unquote(Bonfire.UI.Common.Web.Native.helpers(:swiftui))
+        import LiveViewNative.Component, only: [csrf_token: 1]
+        import LiveViewNative.Renderer
+        unquote("#{Bonfire.UI.Common.filename_for_module_template(caller.module)}.swiftui")
+        |> LiveViewNative.Renderer.embed_templates(name: :render)
+        |> IO.inspect(label: "embed_templates layout")
+
         # use_if_enabled LiveViewNative.Component,
         #   format: :swiftui,
         #   as: :render_native
       end
     end
 
-    def macro_component(opts \\ []) do
+    def macro_component(caller, opts \\ []) do
       quote do
         @moduledoc false
         alias Surface.MacroComponent
@@ -747,6 +779,10 @@ defmodule Bonfire.UI.Common.Web do
 
         alias Iconify.Icon
         require Iconify.Icon
+
+        Module.register_attribute(__MODULE__, :prop, persist: true)
+        Module.register_attribute(__MODULE__, :data, persist: true)
+        Module.register_attribute(__MODULE__, :slot, persist: true)
       end
     end
   end
@@ -755,13 +791,11 @@ defmodule Bonfire.UI.Common.Web do
   When used, dispatch to the appropriate controller/view/etc.
   """
   defmacro __using__(which) when is_atom(which) do
-    # [[env_module: __ENV__.module]])
-    apply(__MODULE__, which, [])
+    apply(__MODULE__, which, [__CALLER__])
   end
 
   defmacro __using__({which, opts}) when is_atom(which) and is_list(opts) do
-    # ++ [env_module: __ENV__.module]])
-    apply(__MODULE__, which, [opts])
+    apply(__MODULE__, which, [__CALLER__, opts])
   end
 
   @doc """
@@ -771,7 +805,7 @@ defmodule Bonfire.UI.Common.Web do
 
       use Bonfire.UI.Common.Web, :controller
       use Phoenix.Component
-    
+
       def index(conn, _) do
         render_inline conn, ~H"<u><%= @current_user.name %></u>"
       end
diff --git a/lib/web_native.ex b/lib/web_native.ex
index e16c5899..c09145a5 100644
--- a/lib/web_native.ex
+++ b/lib/web_native.ex
@@ -15,17 +15,18 @@ defmodule Bonfire.UI.Common.Web.Native do
   below. Instead, define additional modules and import
   those modules here.
   """
+  import Untangle
 
   def native_formats,
     do: [
-      :swiftui
+      # :swiftui
     ]
 
   def native_opts,
     do: [
       formats: native_formats(),
       layouts: [
-        swiftui: {Bonfire.UI.Common.LayoutLive.SwiftUI, :app}
+        swiftui: {Bonfire.UI.Common.LayoutView.SwiftUI, :app}
       ]
     ]
 
@@ -44,14 +45,14 @@ defmodule Bonfire.UI.Common.Web.Native do
   '''
   def live_view(opts \\ []) do
     quote do
-      use LiveViewNative.LiveView, unquote(native_opts())
+      use LiveViewNative.LiveView, unquote(debug(opts ++ native_opts()))
       # formats: unquote(Bonfire.UI.Common.Web.native_formats())
       # # layouts: [
       # #   swiftui: {BonfireUmbrellaWeb.Layouts.SwiftUI, :app}
       # # ]
 
       # require LiveViewNative.Renderer
-      # LiveViewNative.Renderer.embed_templates(IO.inspect("#{unquote(opts)[:template_name] || "*"}.*.neex", label: "embed_templates_*"))
+      # LiveViewNative.Renderer.embed_templates(IO.inspect("#{unquote(opts)[:template_name] || "*"}.*", label: "embed_templates_*"))
       # |> IO.inspect(label: "embed_templates")
 
       # unquote(Bonfire.UI.Common.Web.verified_routes())
@@ -101,7 +102,7 @@ defmodule Bonfire.UI.Common.Web.Native do
   LiveView Native Components are identical to Phoenix Components. Please
   refer to the `Phoenix.Component` documentation for more information.
   '''
-  def component(opts) do
+  def component(opts \\ []) do
     opts = Keyword.take(opts, [:format, :root, :as])
 
     quote do
@@ -120,7 +121,7 @@ defmodule Bonfire.UI.Common.Web.Native do
         embed_templates "layouts_swiftui/*"
       end
   '''
-  def layout(opts) do
+  def layout(opts \\ []) do
     opts = Keyword.take(opts, [:format, :root])
 
     quote do
@@ -132,7 +133,7 @@ defmodule Bonfire.UI.Common.Web.Native do
     end
   end
 
-  defp helpers(format) do
+  def helpers(format) do
     gettext_quoted =
       quote do
         import Bonfire.Common.Localise.Gettext
diff --git a/mix.exs b/mix.exs
index ceedce4e..185d8f13 100755
--- a/mix.exs
+++ b/mix.exs
@@ -27,14 +27,14 @@ defmodule Bonfire.UI.Common.MixProject do
           {:floki, "~> 0.36", only: :test},
           {:zest, "~> 0.1", optional: true},
           {:phoenix_test, "~> 0.3", only: :test, runtime: false},
-          # {:pages, "~> 0.12", only: :test} # extends Floki for testing 
+          # {:pages, "~> 0.12", only: :test} # extends Floki for testing
           # {:bonfire_search, "https://github.com/bonfire-networks/bonfire_search", optional: true, runtime: false}
           # {:bonfire_boundaries, git: "https://github.com/bonfire-networks/bonfire_boundaries", optional: true, runtime: false}
-        ] ++ if(System.get_env("NATIVE_ENABLED") in ["1", "true"], do: [
-            {:live_view_native, "~> 0.3.0"},
-            {:live_view_native_stylesheet, "~> 0.3.0"},
-            {:live_view_native_swiftui, "~> 0.3.0"},
-            {:live_view_native_live_form, "~> 0.3.0"}
+        ] ++ if(System.get_env("WITH_LV_NATIVE") in ["1", "true"], do: [
+            {:live_view_native, "~> 0.3.1"},
+            {:live_view_native_stylesheet, "~> 0.3.1"},
+            {:live_view_native_swiftui, "~> 0.3.1"},
+            {:live_view_native_live_form, "~> 0.3.1"}
           ], else: [])
         )
     ]