Allow client-side values to be sent to a LiveView

[alexgaribay]

As discussed with @chrismccord in Slack, we need a way to pass client-side values to a LiveView. An example use-case is being able to send in timezone information coming from the browser on socket connect.

[hubertlepicki]

Is this the same as sending custom events from users' javascript?

I am using something like this, although pretty sure I'm abusing private API and it's not entirely nice:

const target = document.querySelector("[data-phx-view]")
const phxEvent = {"my": "event", "payload": "here"}
liveSocket.owner(target, view => view.pushEvent("customevent", target, phxEvent))

which then triggers appropriate clause in handle_info in LiveView.

Are we talking here about wrapping this up in a nicer public interface?

[alexgaribay]

That would be one aspect of it. Another aspect is sending connection params to the socket like we already can with a normal channels socket but for a LiveSocket. Some values are only available from the browser like locale and timezone information so we need some way of passing it down to a LiveView.

let socket = new LiveSocket("/live", {params: {timezone: Intl.DateTimeFormat().resolvedOptions().timeZone}})

[ashton314]

I'm running into this need too. Maybe another thing to consider: do we open up things like browser local storage to LiveView?

[chrismccord]

Closed via #239

You can now do:

let liveSocket = new LiveSocket("/live", {logger: logger, params: {foo: "bar"}})

and then they will be available during connected mount via get_connect_params/1. See LiveView.get_connect_params/1 docs for more details. Thanks!