Phoenix.WebComponent

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

Install

Add deps in mix.exs

    {:phoenix_webcomponent, "~> 3.0"},

Include in phoenix view helpers

 defp html_helpers do
    quote do
        # import all helper functions
        use Phoenix.WebComponent

        # or 
        use Phoenix.WebComponent, :alias
        ...
    end
end

Include javascript

import 'phoenix_webcomponent';

Web Componet library is now external

npm install @gsmlg/lit

Import css

@import 'phoenix_webcomponent/priv/static/phoenix_webcomponent.css';

Use custom hook

import "phoenix_webcomponent";
const PhxWCHook = window.__PhxWCHook__;
const liveSocket = new LiveSocket("/live", Socket, {hooks: { PhxWCHook }});

Send custom events to live view:

<Element phx-wc-send-sync-content="load_content" phx-hook="PhxWCHook" />
<Element phx-wc-send-sync-content="load_content;loadAccepted" phx-hook="PhxWCHook" />

• In the first element, when element trigger customEvents sync-content, also use pushEvent send load_content to live view.
• Second element are same as first, but will call loadAccepted on element when receive server send feedback.

Receive live view event:

<Element phx-wc-receive-update_content="updateContent" phx-hook="PhxWCHook" />
<!-- equal  -->
<Element phx-wc-receive="update_content;updateContent" phx-hook="PhxWCHook" />

• In this case, when live view fire update_content event, also trigger updateContent method on elmenet.
• If value(updateContent) is empty, trigger a same event update_content on element.

Import CSS

import "phoenix_webcomponent/priv/static/phoenix_webcomponent.css"

Live Storybook

Live Storybook