feat: Support live story book 0.4.0.

gsmlg-dev · Nov 15, 2022 · 0c5ff02 · 0c5ff02
1 parent bdbbd3d
commit 0c5ff02
Show file tree

Hide file tree

Showing 25 changed files with 136 additions and 502 deletions.
diff --git a/apps/phoenix_webcomponent/assets/js/phoenix_webcomponent.js b/apps/phoenix_webcomponent/assets/js/phoenix_webcomponent.js
@@ -1,6 +1,6 @@
 import '@gsmlg/lit';
 
-const PhxWCHook = {
+export const PhxWCHook = {
     mounted() {
         const attrs = this.el.attributes;
         const phxTarget = attrs["phx-target"].value;
@@ -40,4 +40,6 @@ const PhxWCHook = {
     },
 };
 
-window.__PhxWCHook__ = PhxWCHook;
+if (window) {
+    window.__PhxWCHook__ = PhxWCHook;
+}
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent.ex
@@ -27,15 +27,20 @@ defmodule Phoenix.WebComponent do
     quote do
       use Phoenix.LiveComponent
 
-      unquote(view_helpers())
+      unquote(html_helpers())
     end
   end
 
-  def component do
+  def html do
     quote do
       use Phoenix.Component
 
-      unquote(view_helpers())
+      # Import convenience functions from controllers
+      import Phoenix.Controller,
+        only: [get_csrf_token: 0, view_module: 1, view_template: 1]
+
+      # Include general helpers for rendering HTML
+      unquote(html_helpers())
     end
   end
 
@@ -51,16 +56,13 @@ defmodule Phoenix.WebComponent do
     end
   end
 
-  defp view_helpers do
+  defp html_helpers do
     quote do
-      # Use all HTML functionality (forms, tags, etc)
-      use Phoenix.HTML
-
-      # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
-      import Phoenix.LiveView.Helpers
+      # HTML escaping functionality
+      import Phoenix.HTML
 
-      # Import basic rendering functionality (render, render_layout, etc)
-      import Phoenix.View
+      # Shortcut for generating JS commands
+      alias Phoenix.LiveView.JS
     end
   end
 

diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex
@@ -2,7 +2,7 @@ defmodule Phoenix.WebComponent.Actionbar do
   @moduledoc """
   Render actionbar.
   """
-  use Phoenix.WebComponent, :component
+  use Phoenix.WebComponent, :html
 
   @doc """
   Generates a actionbar.

diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex
@@ -3,9 +3,7 @@ defmodule Phoenix.WebComponent.Appbar do
   render appbar
 
   """
-  use Phoenix.WebComponent, :component
-
-  import Phoenix.WebComponent.Helpers.Link
+  use Phoenix.WebComponent, :html
 
   @doc """
   Generates a html customElement appbar.
@@ -15,7 +13,7 @@ defmodule Phoenix.WebComponent.Appbar do
   - `title` binary
   example: "App Title"
   - `menus` List
-  example: [ %{ label: "Menu Name", to: Routes.index_path(@conn, :index) } ]
+  example: [ %{ label: "Menu Name", to: ~p"/menu-url" } ]
 
   ## Slots
 
@@ -35,15 +33,20 @@ defmodule Phoenix.WebComponent.Appbar do
 
     ~H"""
     <app-bar id={@id} class={@class} app-name={@title}>
-        <nav slot="logo" class="flex justify-center">
+      <nav slot="logo" class="flex justify-center">
         <%= render_slot(@logo) %>
-        </nav>
-        <%= for menu <- @menus do %>
-        <%= wc_link menu.label, to: menu.to, slot: "nav" %>
-        <% end %>
-        <span slot="user">
+      </nav>
+      <%= for menu <- @menus do %>
+        <.link
+          navigate={menu.to}
+          slot="nav"
+        >
+          <%= menu.label %>
+        </.link>
+      <% end %>
+      <span slot="user">
         <%= render_slot(@user_profile) %>
-        </span>
+      </span>
     </app-bar>
     """
   end

diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex
@@ -2,7 +2,7 @@ defmodule Phoenix.WebComponent.Card do
   @moduledoc """
   Render card.
   """
-  use Phoenix.WebComponent, :component
+  use Phoenix.WebComponent, :html
 
   # alias Phoenix.LiveView.JS