From f9c964371ccac83536d024b8f72a0489a53affec Mon Sep 17 00:00:00 2001 From: Robin Fidder Date: Fri, 15 May 2020 21:31:02 +0200 Subject: [PATCH] Bump version, update readme --- CHANGELOG.md | 18 +++++++++++++++++ README.md | 55 ++++++++++++++++++++++++++++++++-------------------- mix.exs | 2 +- mix.lock | 20 +++++++++---------- package.json | 2 +- 5 files changed, 64 insertions(+), 33 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..2d6305d --- /dev/null +++ b/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 diff --git a/README.md b/README.md index ec0ab65..c85558f 100644 --- a/README.md +++ b/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,18 +33,6 @@ 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 @@ -52,8 +40,7 @@ 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 diff --git a/mix.exs b/mix.exs index 3c77378..4e3d854 100644 --- a/mix.exs +++ b/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(), diff --git a/mix.lock b/mix.lock index 249a63a..7ca4b59 100644 --- a/mix.lock +++ b/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"}, } diff --git a/package.json b/package.json index 7a88630..e4b94ed 100644 --- a/package.json +++ b/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",