Hello 
Lately I’ve been tinkering with WebAssembly and modern ES APIs and made myself a fun image colorizer with ImageMagick compiled to wasm. So far I’ve been serving my project as static files with Caddy, but I want to play with Elixir.
I like LiveView, but for this particular use case I opted for bare Phoenix.
Since I generated my project with a --no-liveview flag, I didn’t expect the app.js to have any content, but it turns out there is some kind of a polyfill followed by a sourceMappingURL, I was not able to confidently assess their function. Mostly out of curiosity, I would like to know what they do.
app.js
(() => {
// ../../../deps/phoenix_html/priv/static/phoenix_html.js
(function() {
var PolyfillEvent = eventConstructor();
function eventConstructor() {
if (typeof window.CustomEvent === "function")
return window.CustomEvent;
function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: void 0 };
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
return CustomEvent;
}
function buildHiddenInput(name, value) {
var input = document.createElement("input");
input.type = "hidden";
input.name = name;
input.value = value;
return input;
}
function handleClick(element, targetModifierKey) {
var to = element.getAttribute("data-to"), method = buildHiddenInput("_method", element.getAttribute("data-method")), csrf = buildHiddenInput("_csrf_token", element.getAttribute("data-csrf")), form = document.createElement("form"), submit = document.createElement("input"), target = element.getAttribute("target");
form.method = element.getAttribute("data-method") === "get" ? "get" : "post";
form.action = to;
form.style.display = "none";
if (target)
form.target = target;
else if (targetModifierKey)
form.target = "_blank";
form.appendChild(csrf);
form.appendChild(method);
document.body.appendChild(form);
submit.type = "submit";
form.appendChild(submit);
submit.click();
}
window.addEventListener("click", function(e) {
var element = e.target;
if (e.defaultPrevented)
return;
while (element && element.getAttribute) {
var phoenixLinkEvent = new PolyfillEvent("phoenix.link.click", {
"bubbles": true,
"cancelable": true
});
if (!element.dispatchEvent(phoenixLinkEvent)) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
if (element.getAttribute("data-method") && element.getAttribute("data-to")) {
handleClick(element, e.metaKey || e.shiftKey);
e.preventDefault();
return false;
} else {
element = element.parentNode;
}
}
}, false);
window.addEventListener("phoenix.link.click", function(e) {
var message = e.target.getAttribute("data-confirm");
if (message && !window.confirm(message)) {
e.preventDefault();
}
}, false);
})();
})();
Eventually I would like to eventually “upgrade” this project to LiveView, but first I want to get to understand Phoenix thoroughly.
So these are my questions:
-
What are the contents of app.js in an app generated with
--no-liveview? -
(Can LiveView conflict with WebAssembly or APIs like Web Worker, Service Worker etc.?)
Cheers
