# PhxFrontend

Helpers for rendering components from typical single-page-app frameworks from Phoenix LiveView.

Works with adapters for different frameworks, e.g.

- [Svelte adapter](https://github.com/hungry-egg/phx-frontend-svelte)
- [React adapter](https://github.com/hungry-egg/phx-frontend-react)
- [Vue adapter](https://github.com/hungry-egg/phx-frontend-vue)

![Demo](images/multi-app.gif)

## Installation

This package is [on Hex](https://hexdocs.pm/phx_frontend), so you can add`phx_frontend` to your list of dependencies in `mix.exs`:

```elixir
def deps do
  [
    {:phx_frontend, "~> 0.1.0"}
  ]
end
```

and run `mix deps.get`.

Add the javascript library to your assets `package.json`:

```js
"dependencies": {
  // ...
  "phx-frontend": "file:../deps/phx_frontend/js"
}
```

and install - `npm install --prefix assets`.

NOTE: following convention, the hex library `phx_frontend` has an underscore, whereas the npm library `phx-frontend` is specified here with a dash.

## Setup

Given a Phoenix app `MyApp`:

1. Import the provided components for use in heex templates

In `my_app_web.ex`:

```diff
defmodule MyAppWeb do

  # ...

  def html_helpers do
    # ...
+    import PhxFrontend.Components
    # ...
  end

  # ...
end
```

2. Add the provided hook to the LiveSocket

In `app.js`:

```diff
// ...
+ import { createJsAppsHook } from "phx-frontend";

// ...

let liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: {
+    jsApp: createJsAppsHook({
+      apps: {
+        // individual JS components will go here
+      }
+    })
  }
});

// ...
```

## Rendering a component from LiveView

See documentation for the particular adapter you're using, e.g. one of

- [Svelte adapter](https://github.com/hungry-egg/phx-frontend-svelte)
- [React adapter](https://github.com/hungry-egg/phx-frontend-react)
- [Vue adapter](https://github.com/hungry-egg/phx-frontend-vue)

## Custom Adapters

Adapters for each framework are small and easy to write for new libraries.
TODO: doc here.