Contents of app.js generated with `--no-liveview`

Hello :slight_smile:

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.


(() => {
  // ../../../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"; = 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; = "none";
      if (target) = target;
      else if (targetModifierKey) = "_blank";
      submit.type = "submit";
    window.addEventListener("click", function(e) {
      var element =;
      if (e.defaultPrevented)
      while (element && element.getAttribute) {
        var phoenixLinkEvent = new PolyfillEvent("", {
          "bubbles": true,
          "cancelable": true
        if (!element.dispatchEvent(phoenixLinkEvent)) {
          return false;
        if (element.getAttribute("data-method") && element.getAttribute("data-to")) {
          handleClick(element, e.metaKey || e.shiftKey);
          return false;
        } else {
          element = element.parentNode;
    }, false);
    window.addEventListener("", function(e) {
      var message ="data-confirm");
      if (message && !window.confirm(message)) {
    }, 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:

  1. What are the contents of app.js in an app generated with --no-liveview?

  2. (Can LiveView conflict with WebAssembly or APIs like Web Worker, Service Worker etc.?)


That JS looks like it’s to support features in phoenix_html like data-confirm attributes.