I’m posting here since the GitHub repo states that the issues tracker is only for “real” issues right now.
Lately I’ve been toying with live view and found something that I believe will be pretty common if it’s going to be used and that is to allow manipulation of the values that are sent on the client.
I downloaded the source and added this hack (which can be tidied up and be more granular) but just as an example, when instantiating the live view passing an object of options:
#app.js
let liveSocket = new LiveSocket("/live", {
inject: {
"Cocktail.View.Panel": transform_panel,
"Cocktail.View.Element": transform_panel,
"Cocktail.View.Editor": transform_panel
}
})
#phoenix_live_view.js
pushEvent(type, el, phxEvent){
var val = el.getAttribute(this.binding("value")) || el.value || "";
let injects = this.liveSocket.opts.inject;
var payload;
if (injects && injects[this.view]) {
payload = injects[this.view](this, type, el, phxEvent, val);
} else {
payload = {type: type, event: phxEvent, value: val};
}
this.pushWithReply("event", payload);
}
#sample of transform function injected
export function transform_panel(live, type, el, phxEvent, val) {
switch (phxEvent) {
case "select":
let chain = JSON.parse(el.getAttribute("cocktail-chain"));
let id = el.id;
val = chain.concat(id);
break;
case "add_style":
val = window.cocktail.get_style();
break;
case "add_style_children":
val = window.cocktail.get_style();
break;
case "delete_style":
val = JSON.parse(val);
break;
case "add_class":
val = window.cocktail.get_classes();
break;
case "add_class_children":
val = window.cocktail.get_classes();
break;
default:
null;
break;
}
return {
type: type,
event: phxEvent,
value: val
}
}
Basically, it would allow to provide a function that accepted live, type, el, phxEvent, val and returned {type, event, value}. These examples are pretty basic, but I think that more complex cases would benefit from having the ability to do so.
Probably the {inject: ...} object passed as functions could be more granular with the events, like {inject: {"LiveView.ModuleName": {pushEvent: transform_panel}}}, etc?
