some minor versions uprade & finishing examples

coingaming · Oct 26, 2022 · bdb6645 · bdb6645
1 parent ca615fa
commit bdb6645
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 39 deletions.
diff --git a/lib/moon/helpers/surface_render.ex b/lib/moon/helpers/surface_render.ex
@@ -58,20 +58,4 @@ defmodule Moon.Helpers.SurfaceRender do
   def surface(props = %{module: module}) do
     get_render_function(module).(props)
   end
-
-  # TODO: remove this dirty hack & make a PR to liveview if bug still exists in newer versions
-  # refer this bug report - https://github.com/phoenixframework/phoenix_live_view/issues/1656
-  # looks like phoenix_live_view v0.17.6 cant nested components with the same tag, like
-  # <.surface module={A}><.surface ...></.surface></.surface>
-  # but still can handle
-  # <.surface0 module={A}><.surface1 ...> ... </.surface1></.surface0>
-  #
-  # Block below works the same as:
-  #  defdelegate surface0(props), to: __MODULE__, as: :render_surface_component
-  #  defdelegate surface1(props), to: __MODULE__, as: :render_surface_component
-  #  ...
-  #  defdelegate surface99(props), to: __MODULE__, as: :render_surface_component
-  Enum.each(0..99, fn x ->
-    defdelegate unquote(:"surface#{x}")(props), to: __MODULE__, as: :surface
-  end)
 end
diff --git a/lib/moon_web/pages/test/live_page.ex b/lib/moon_web/pages/test/live_page.ex
@@ -14,15 +14,15 @@ defmodule MoonWeb.Pages.Test.LivePage do
 
   def render(assigns) do
     ~H"""
-    <.surface0 module={Page} theme_name={@theme_name} active_page={@active_page} direction={@direction}>
-      <.surface1 module={Button} variant="secondary">Secondary</.surface1>
-      <.surface1 module={Datepicker}
+    <.surface module={Page} theme_name={@theme_name} active_page={@active_page} direction={@direction}>
+      <.surface module={Button} variant="secondary">Secondary</.surface>
+      <.surface module={Datepicker}
         start_date={Timex.today() |> Timex.beginning_of_week()}
         end_date={Timex.today() |> Timex.end_of_week()}
         week_starts_on={7}
         id="datepicker"
       />
-      <.surface1
+      <.surface
         module={SidebarLink}
         __context__={%{active_page: __MODULE__, global_params: %{
                         direction: @direction,
@@ -31,9 +31,9 @@ defmodule MoonWeb.Pages.Test.LivePage do
         route={MoonWeb.Pages.VisionPage}
       >
         Vision
-      </.surface1>
+      </.surface>
       <pre><%= inspect assigns, pretty: true, structs: false %></pre>
-    </.surface0>
+    </.surface>
     """
   end
 end
diff --git a/lib/moon_web/pages/usage_page.ex b/lib/moon_web/pages/usage_page.ex
@@ -38,9 +38,8 @@ defmodule MoonWeb.Pages.UsagePage do
       <PageSection title="HEEx templates">
         <p>
           But anyway you still can use Moon components with LiveView mechanism only. Some helpers are made for this.
-          But please note, that only some Surface features are supported, e.g. you can forget about contexts and named
-          slots (only default slot is supported for now).
-          The same is mentioned in
+          But please note, that only some Surface features are supported.
+          We've done even a bit more, than mentioned in
           <a
             class="text-piccolo-100 font-medium transition-colors duration-200 hover:text-hit visited:text-hit"
             href="https://surface-ui.org/usage_with_phoenix_templates"
@@ -52,9 +51,11 @@ defmodule MoonWeb.Pages.UsagePage do
           that actually do not work, except recommended way - rewrite all stuff as Surface's views and components.
           <p>
           </p>
-          So, actually working code looks like:
+          So, working code looks like:
         </p>
         <CodeSnippet>{liveview_code()}</CodeSnippet>
+        <p>And for the contexts - You can pass context as a Map to the component if needed, but context isn't populated to child components within HEEX template, sorry.</p>
+        <CodeSnippet>{liveview_context_code()}</CodeSnippet>
       </PageSection>
     </Page>
     """
@@ -77,13 +78,42 @@ defmodule MoonWeb.Pages.UsagePage do
   def liveview_code() do
     """
     alias Moon.Components.Button
+    alias Moon.Components.Datepicker
 
-    import Moon.Helpers.SurfaceRender, only: [surface: 1]
+    import Moon.Helpers.SurfaceRender
 
     def render(assigns) do
       ~H\"""
         ...
           <.surface module={Button} variant="secondary">Secondary</.surface>
+
+          # or, if you wish more explicit naming - use for stateless components
+          <.surface_component module={Button} variant="secondary">Secondary</.surface>
+
+          # and for stateful component
+          <.surface_live_component module={Datepicker}
+            start_date={Timex.today() |> Timex.beginning_of_week()}
+            end_date={Timex.today() |> Timex.end_of_week()}
+            week_starts_on={7}
+            id="datepicker"
+          />
+        ...
+      \"""
+    end
+    """
+  end
+
+  def liveview_context_code() do
+    """
+    def render(assigns) do
+      ~H\"""
+        ...
+          <.surface module={Button}
+              variant="secondary"
+              __context__={%{locale: @locale}}
+          >
+            Secondary
+          </.surface>
         ...
       \"""
     end

diff --git a/mix.exs b/mix.exs
@@ -65,7 +65,7 @@ defmodule Moon.MixProject do
   defp deps do
     deps_override([
       {:phoenix, "~> 1.6"},
-      {:phoenix_live_view, "~> 0.17"},
+      {:phoenix_live_view, "~> 0.17.12"},
       {:phoenix_html, "~> 3.0"},
       {:phoenix_live_dashboard, "~> 0.6"},
       {:phoenix_ecto, "~> 4.0"},