Bump version, update readme

CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog for PhoenixLiveReact
+
+## v0.3.0
+
+  * Add support for live components (pushEventTo)
+  * Support keyword list props in `live_react_component`
+
+## v0.2.1
+
+  * Add option to override the default LiveView binding prefix
+
+## v0.2.0
+
+  * Add option to also render the components on page load
+
+## v0.1.0
+
+Initial version

README.md

@@ -9,7 +9,7 @@ Add to your `mix.exs` and run `mix deps.get`:
 ```elixir
 def deps do
   [
-    {:phoenix_live_react, "~> 0.2"}
+    {:phoenix_live_react, "~> 0.3"}
   ]
 end
 ```
@@ -24,7 +24,7 @@ Then add to your `assets/package.json` and run `npm i` or `yarn`:
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
-    "phoenix_live_react": "file:../deps/phoenix_live_react", <-- ADD THIS!
+    "phoenix_live_react": "file:../deps/phoenix_live_react", # <-- ADD THIS!
     ...
   },
   ...
@@ -33,27 +33,14 @@ Then add to your `assets/package.json` and run `npm i` or `yarn`:
 
 Note for umbrella projects the relative file paths should look like `"file:../../../deps/phoenix_live_react"`
 
-## Usage
-
-Add your react components to the window scope (`app.js`):
-
-```javascript
-import { MyComponent } from "./components/my_components"
-
-window.Components = {
-  MyComponent
-}
-```
-
 Connect the hooks to your liveview (`app.js`):
 
 ```javascript
 import LiveReact, { initLiveReact } from "phoenix_live_react"
 
 let hooks = { LiveReact }
 
-let liveSocket = new LiveSocket("/live", Socket, { hooks })
-liveSocket.connect()
+let liveSocket = new LiveSocket("/live", Socket, { hooks, params: { _csrf_token: csrfToken } })
 
 // Optionally render the React components on page load as
 // well to speed up the initial time to render.
@@ -63,29 +50,55 @@ document.addEventListener("DOMContentLoaded", e => {
 })
 ```
 
+## Usage
+
+Add your react components to the window scope (`app.js`):
+
+```javascript
+import { MyComponent } from "./components/my_components"
+
+window.Components = {
+  MyComponent
+}
+```
+
 Use in your live view:
 
 ```elixir
-import PhoenixLiveReact, only: [live_react_component: 2]
+import PhoenixLiveReact
 
 def render(assigns) do
   ~L"""
-  <%= live_react_component("Components.MyComponent", %{name: @name}) %>
+  <%= live_react_component("Components.MyComponent", name: @name) %>
   """
 end
 ```
 
+Instead of importing it in each view, you can also add it to your web module:
+
+```elixir
+defp view_helpers do
+  quote do
+    # ...
+    import PhoenixLiveReact
+    # ...
+  end
+end
+```
+
 ### Events
 
-To push events back to the liveview the `pushEvent` function from Phoenix LiveView is passed as a prop
-the the component.
+To push events back to the liveview the `pushEvent` and `pushEventTo` functions from
+Phoenix LiveView are passed as props to the component.
 
-* pushEvent(event, payload) - method to push an event from the client to the LiveView server
+* pushEvent(event, payload) - push an event from the client to the LiveView
+* pushEventTo(selector, event, payload) - push an event from the client to a specific LiveView component
 
 ```javascript
 const { pushEvent } = this.props;
 pushEvent("button_click");
 pushEvent("myevent", {"var": "value"});
+pushEventTo("#component-1", "do_something")
 ```
 
 ## How to add react to your phoenix app

mix.exs

@@ -4,7 +4,7 @@ defmodule PhoenixLiveReact.MixProject do
   def project do
     [
       app: :phoenix_live_react,
-      version: "0.2.1",
+      version: "0.3.0",
       elixir: "~> 1.9",
       start_permanent: Mix.env() == :prod,
       package: package(),

mix.lock

@@ -1,12 +1,12 @@
 %{
-  "earmark": {:hex, :earmark, "1.4.0", "397e750b879df18198afc66505ca87ecf6a96645545585899f6185178433cc09", [:mix], [], "hexpm"},
-  "ex_doc": {:hex, :ex_doc, "0.21.2", "caca5bc28ed7b3bdc0b662f8afe2bee1eedb5c3cf7b322feeeb7c6ebbde089d6", [:mix], [{:earmark, "~> 1.3.3 or ~> 1.4", [hex: :earmark, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}], "hexpm"},
-  "jason": {:hex, :jason, "1.1.2", "b03dedea67a99223a2eaf9f1264ce37154564de899fd3d8b9a21b1a6fd64afe7", [:mix], [{:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm"},
-  "makeup": {:hex, :makeup, "1.0.0", "671df94cf5a594b739ce03b0d0316aa64312cee2574b6a44becb83cd90fb05dc", [:mix], [{:nimble_parsec, "~> 0.5.0", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm"},
-  "makeup_elixir": {:hex, :makeup_elixir, "0.14.0", "cf8b7c66ad1cff4c14679698d532f0b5d45a3968ffbcbfd590339cb57742f1ae", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm"},
-  "mime": {:hex, :mime, "1.3.1", "30ce04ab3175b6ad0bdce0035cba77bba68b813d523d1aac73d9781b4d193cf8", [:mix], [], "hexpm"},
-  "nimble_parsec": {:hex, :nimble_parsec, "0.5.1", "c90796ecee0289dbb5ad16d3ad06f957b0cd1199769641c961cfe0b97db190e0", [:mix], [], "hexpm"},
-  "phoenix_html": {:hex, :phoenix_html, "2.13.3", "850e292ff6e204257f5f9c4c54a8cb1f6fbc16ed53d360c2b780a3d0ba333867", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},
-  "plug": {:hex, :plug, "1.8.3", "12d5f9796dc72e8ac9614e94bda5e51c4c028d0d428e9297650d09e15a684478", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm"},
-  "plug_crypto": {:hex, :plug_crypto, "1.0.0", "18e49317d3fa343f24620ed22795ec29d4a5e602d52d1513ccea0b07d8ea7d4d", [:mix], [], "hexpm"},
+  "earmark": {:hex, :earmark, "1.4.4", "4821b8d05cda507189d51f2caeef370cf1e18ca5d7dfb7d31e9cafe6688106a4", [:mix], [], "hexpm", "1f93aba7340574847c0f609da787f0d79efcab51b044bb6e242cae5aca9d264d"},
+  "ex_doc": {:hex, :ex_doc, "0.22.0", "fb0495cd70849bc4d7bc716d4e740aebfaddb77bb1074addf357912468c831d6", [:mix], [{:earmark, "~> 1.4", [hex: :earmark, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}], "hexpm", "f9b36237b220c8262d561489967b6a604832593f0dc1fb1608662909457e91aa"},
+  "jason": {:hex, :jason, "1.2.1", "12b22825e22f468c02eb3e4b9985f3d0cb8dc40b9bd704730efa11abd2708c44", [:mix], [{:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "b659b8571deedf60f79c5a608e15414085fa141344e2716fbd6988a084b5f993"},
+  "makeup": {:hex, :makeup, "1.0.1", "82f332e461dc6c79dbd82fbe2a9c10d48ed07146f0a478286e590c83c52010b5", [:mix], [{:nimble_parsec, "~> 0.5.0", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "49736fe5b66a08d8575bf5321d716bac5da20c8e6b97714fec2bcd6febcfa1f8"},
+  "makeup_elixir": {:hex, :makeup_elixir, "0.14.0", "cf8b7c66ad1cff4c14679698d532f0b5d45a3968ffbcbfd590339cb57742f1ae", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "d4b316c7222a85bbaa2fd7c6e90e37e953257ad196dc229505137c5e505e9eff"},
+  "mime": {:hex, :mime, "1.3.1", "30ce04ab3175b6ad0bdce0035cba77bba68b813d523d1aac73d9781b4d193cf8", [:mix], [], "hexpm", "6cbe761d6a0ca5a31a0931bf4c63204bceb64538e664a8ecf784a9a6f3b875f1"},
+  "nimble_parsec": {:hex, :nimble_parsec, "0.5.3", "def21c10a9ed70ce22754fdeea0810dafd53c2db3219a0cd54cf5526377af1c6", [:mix], [], "hexpm", "589b5af56f4afca65217a1f3eb3fee7e79b09c40c742fddc1c312b3ac0b3399f"},
+  "phoenix_html": {:hex, :phoenix_html, "2.14.2", "b8a3899a72050f3f48a36430da507dd99caf0ac2d06c77529b1646964f3d563e", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "58061c8dfd25da5df1ea0ca47c972f161beb6c875cd293917045b92ffe1bf617"},
+  "plug": {:hex, :plug, "1.10.1", "c56a6d9da7042d581159bcbaef873ba9d87f15dce85420b0d287bca19f40f9bd", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm", "b5cd52259817eb8a31f2454912ba1cff4990bca7811918878091cb2ab9e52cb8"},
+  "plug_crypto": {:hex, :plug_crypto, "1.1.2", "bdd187572cc26dbd95b87136290425f2b580a116d3fb1f564216918c9730d227", [:mix], [], "hexpm", "6b8b608f895b6ffcfad49c37c7883e8df98ae19c6a28113b02aa1e9c5b22d6b5"},
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Hook to render live react components in Phoenix LiveView.",
   "license": "MIT",
   "main": "./priv/static/phoenix_live_react.js",