How to import non-minified liveview client?

In my app.js generated by the default mix phx.new --live I have:

import "phoenix_html"
import {Socket} from "phoenix"
import topbar from "topbar"
import {LiveSocket} from "phoenix_live_view"

And in the phoenix js package, there is:

  "main": "./priv/static/phoenix.js",

However, I don’t want to import this minified version, I want to use the non-minified:

"assets/js/phoenix.js"

for better visibility into what is going on under the hood. How do I do that? I know I can fork the packages to change the package.json, but seems like too much for such a simple thing?

Doesn’t Webpack generate maps to be able to provide non-minified view in the DevTools?

I am not using webpack, which I hate with a passion. Judging by the many webpack related questions recently, I think I am not alone.

Any way, I solved my problem by brute force: I copied the few js files I need out of the deps dir and just import them directly. I also have to npm install morphdom; I hope the live view team is not forking morphdom to be incompatible with the upstream :slight_smile: Everything seems to work fine for now.

1 Like

If no one have a better idea, this is the solution.

  1. npm install --save-dev morphdom
  2. make hard links from the 3 js files (phoenix.js, phoenix_html.js, phoenix_live_view.js) to the assets/js dir
  3. import them instead of the packages, ie:
-import "phoenix_html"
-import {Socket} from "phoenix"
+import "./phoenix_html.js"
+import {Socket} from "./phoenix.js"
 import topbar from "topbar"
-import {LiveSocket} from "phoenix_live_view"
+import {LiveSocket} from "./phoenix_live_view.js"

I think this is cleaner:

  • the 3rd party npm module morphdom is installed the right way
  • the minified version of the js files are built artifacts, not source. Right now they are checked in, and it feels wrong
  • everything is just built once and minified once now

The downside is the resulting bundle is somewhat bigger. But what do I care. Liveview already cuts down javascript a lot.