Duskmoon UI for Phoenix Framework
Collection of helpers to generate and manipulate Web Component.
Although this project was originally extracted from Phoenix, it does not depend on Phoenix and can be used with any Plug application (or even without Plug).
See the docs for more information.
About at Web Component
Add deps in mix.exs
{:phoenix_duskmoon, "~> 4.0"},
Include in phoenix view helpers
defp html_helpers do
quote do
# import all helper functions
use PhoenixDuskmoon
# or
use PhoenixDuskmoon, :alias
...
end
end
Include javascript
import 'phoenix_duskmoon';
Web Componet library is now external
npm install @gsmlg/lit
Import css
@import 'phoenix_duskmoon/priv/static/phoenix_duskmoon.css';
Use custom hook
import "phoenix_duskmoon";
const WebComponentHook = window.__WebComponentHook__;
const liveSocket = new LiveSocket("/live", Socket, {hooks: { WebComponentHook }});
Send custom events to live view:
<Element darkmoon-send-sync-content="load_content" phx-hook="WebComponentHook" />
<Element darkmoon-send-sync-content="load_content;loadAccepted" phx-hook="WebComponentHook" />
sync-content
, also use pushEvent
send load_content
to live view.loadAccepted
on element when receive server send feedback.Receive live view event:
<Element darkmoon-receive-update_content="updateContent" phx-hook="WebComponentHook" />
<!-- equal -->
<Element darkmoon-receive="update_content;updateContent" phx-hook="WebComponentHook" />
update_content
event, also trigger updateContent
method on elmenet.updateContent
) is empty, trigger a same event update_content
on element.Import CSS
import "phoenix_duskmoon/priv/static/phoenix_duskmoon.css"