after surface upgrade

coingaming · Nov 3, 2022 · b384085 · b384085
1 parent 55cec5d
commit b384085
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 59 deletions.
diff --git a/lib/moon/helpers/moon_render.ex b/lib/moon/helpers/moon_render.ex
@@ -3,7 +3,8 @@ defmodule Moon.Helpers.MoonRender do
   Functions for rendering Moon components in HEEX/SLIM/... (not Surface) templates
   """
 
-  import Phoenix.LiveView.Helpers, only: [component: 2, live_component: 1]
+  import Phoenix.LiveView.HTMLEngine, only: [component: 3]
+  import Phoenix.Component, only: [live_component: 1]
 
   defp get_default_props(module) do
     Enum.reduce(module.__props__(), %{__context__: %{}}, fn
@@ -26,7 +27,8 @@ defmodule Moon.Helpers.MoonRender do
   def moon_component(module, props) do
     component(
       &module.render/1,
-      get_default_props(module) |> Map.merge(transform_slots(props))
+      get_default_props(module) |> Map.merge(transform_slots(props)),
+      {__ENV__.module, __ENV__.function, __ENV__.file, __ENV__.line}
     )
   end
 

diff --git a/lib/moon_web.ex b/lib/moon_web.ex
@@ -50,14 +50,6 @@ defmodule MoonWeb do
     end
   end
 
-  def live_view_only do
-    quote do
-      use Phoenix.LiveView, layout: {MoonWeb.LayoutView, "live.html"}
-
-      unquote(view_helpers())
-    end
-  end
-
   def stateless_component do
     quote do
       use Moon.StatelessComponent

diff --git a/lib/moon_web/components/page.ex b/lib/moon_web/components/page.ex
@@ -19,39 +19,37 @@ defmodule MoonWeb.Components.Page do
 
   def render(assigns) do
     ~F"""
-    <Context put={global_params: %{theme_name: @theme_name, direction: @direction}}>
-      <div role="main" class={"bg-goku-100 text-bulma-100 flex", @class, @theme_name} dir={@direction}>
-        <LeftMenu
-          id="left-menu"
-          theme_name={@theme_name}
-          direction={@direction}
-          active_page={@active_page}
-          click={hide_left_menu()}
-          hide_items
-        />
+    <div role="main" class={"bg-goku-100 text-bulma-100 flex", @class, @theme_name} dir={@direction}>
+      <LeftMenu
+        id="left-menu"
+        theme_name={@theme_name}
+        direction={@direction}
+        active_page={@active_page}
+        click={hide_left_menu()}
+        hide_items
+      />
 
-        <div class={
-          "min-h-screen lg:ms-80 bg-gohan-100 flex-1 w-0 flex flex-col lg:rounded-tl-3xl lg:rounded-bl-3xl px-5 xl:px-20 2xl:px-32 lg:pt-12",
-          @theme_name
-        }>
-          <div class="flex flex-col grow max-w-screen-xl">
-            <Header click={show_left_menu()}>
-              <Breadcrumbs
-                class="pb-12 hidden lg:block"
-                :if={@breadcrumbs}
-                theme_name={@theme_name}
-                breadcrumbs={@breadcrumbs}
-              />
-            </Header>
-            <div class="flex flex-col gap-12 flex-1 relative overflow-y-auto focus:outline-none">
-              <#slot />
-            </div>
-            <Footer />
-            <ThemesSelect id="themes_select" {=@theme_name} {=@active_page} {=@direction} />
+      <div class={
+        "min-h-screen lg:ms-80 bg-gohan-100 flex-1 w-0 flex flex-col lg:rounded-tl-3xl lg:rounded-bl-3xl px-5 xl:px-20 2xl:px-32 lg:pt-12",
+        @theme_name
+      }>
+        <div class="flex flex-col grow max-w-screen-xl">
+          <Header click={show_left_menu()}>
+            <Breadcrumbs
+              class="pb-12 hidden lg:block"
+              :if={@breadcrumbs}
+              theme_name={@theme_name}
+              breadcrumbs={@breadcrumbs}
+            />
+          </Header>
+          <div class="flex flex-col gap-12 flex-1 relative overflow-y-auto focus:outline-none">
+            <#slot />
           </div>
+          <Footer />
+          <ThemesSelect id="themes_select" {=@theme_name} {=@active_page} {=@direction} />
         </div>
       </div>
-    </Context>
+    </div>
     """
   end
 

diff --git a/lib/moon_web/components/started/for_developer.ex b/lib/moon_web/components/started/for_developer.ex
@@ -6,6 +6,9 @@ defmodule MoonWeb.Components.Started.ForDeveloper do
   alias MoonWeb.Components.CodeSnippet
   alias MoonWeb.Components.PageSection
 
+  data theme_name, :string, from_context: :theme_name
+  data direction, :string, from_context: :direction
+
   def render(assigns) do
     ~F"""
     <PageSection title="Requirements">
@@ -14,14 +17,12 @@ defmodule MoonWeb.Components.Started.ForDeveloper do
       </p>
       <p>
         Moon Surface components
-        <Context get={global_params: globals}>
-          <a
-            class="text-piccolo-100 font-medium transition-colors duration-200 hover:text-hit visited:text-hit"
-            href={"#{live_path(MoonWeb.Endpoint, MoonWeb.Pages.PhoenixUsagePage, globals)}"}
-          >
-            can be used from SLIM and EEX templates
-          </a>
-        </Context>
+        <a
+          class="text-piccolo-100 font-medium transition-colors duration-200 hover:text-hit visited:text-hit"
+          href={"#{live_path(MoonWeb.Endpoint, MoonWeb.Pages.PhoenixUsagePage, theme_name: @theme_name, direction: @direction)}"}
+        >
+          can be used from SLIM and EEX templates
+        </a>
         , but recommended format is
         <a
           class="text-piccolo-100 font-medium transition-colors duration-200 hover:text-hit visited:text-hit"

diff --git a/lib/moon_web/pages/test/live_page.ex b/lib/moon_web/pages/test/live_page.ex
@@ -1,20 +1,65 @@
+defmodule MoonWeb.Pages.Test.LivePage.ContextInside do
+  @moduledoc false
+  use MoonWeb, :stateless_component
+  alias Moon.Components.Button
+  # that's just a copy of Surface.Components.Context in project tree for debug perspective
+  # alias MoonWeb.Pages.Test.Context
+  alias Surface.Components.Context
+
+  prop texter, :string, from_context: :texter
+
+  def render(assigns) do
+    ~F"""
+    <Button>{@texter || "no texter given"}</Button>
+    """
+  end
+
+  def context_only(assigns) do
+    ~F"""
+    <Context put={foo: :bar}>
+      we do put this line to debug the context iternal data presentation
+    </Context>
+    """
+  end
+end
+
 defmodule MoonWeb.Pages.Test.LivePage do
   @moduledoc """
     Page for visual and automatic testing of moon render helper
   """
 
-  use MoonWeb, :live_view_only
+  use Phoenix.LiveView, layout: {MoonWeb.LayoutView, :live}
 
   alias Moon.Components.Button
   alias Moon.Components.Datepicker
   alias MoonWeb.Components.Page
   alias MoonWeb.Components.SidebarLink
 
+  # that's just a copy of Surface.Components.Context in project tree for debug perspective
+  # alias MoonWeb.Pages.Test.Context
+  alias Surface.Components.Context
+
+  alias MoonWeb.Pages.Test.LivePage.ContextInside
+  import ContextInside, only: [context_only: 1]
+
   import Moon.Helpers.MoonRender
 
+  def mount(_, _, socket) do
+    # IO.puts inspect socket.assigns, pretty: true
+    {:ok, socket}
+  end
+
   def render(assigns) do
     ~H"""
-    <.moon module={Page} theme_name={@theme_name} active_page={@active_page} direction={@direction}>
+    <.moon module={Page}
+      theme_name={@theme_name}
+      active_page={@active_page}
+      direction={@direction}
+      __context__={%{
+        active_page: __MODULE__,
+        direction: @direction,
+        theme_name: @theme_name
+    }}>
       <.moon module={Button} variant="secondary">Secondary</.moon>
       <.moon module={Datepicker}
         start_date={Timex.today() |> Timex.beginning_of_week()}
@@ -24,14 +69,24 @@ defmodule MoonWeb.Pages.Test.LivePage do
       />
       <.moon
         module={SidebarLink}
-        __context__={%{active_page: __MODULE__, global_params: %{
-                        direction: @direction,
-                        theme_name: @theme_name
-                    }}}
+        __context__={%{
+          active_page: __MODULE__,
+          direction: @direction,
+          theme_name: @theme_name
+        }}
         route={MoonWeb.Pages.VisionPage}
       >
         Vision
       </.moon>
+      <.moon module={ContextInside} texter="texter from attribute"/>
+      <.moon module={ContextInside} __context__={%{texter: "texter from context attribute"}}/>
+      <.context_only/>
+      <.moon
+        module={Context}
+        put={[nil: [texter: "texter from context component"]]}
+      >
+        <.moon module={ContextInside}/>
+      </.moon>
       <pre><%= inspect assigns, pretty: true, structs: false %></pre>
     </.moon>
     """