How to develop and publish library that combines JavaScript and Elixir code?

mickel8 · July 23, 2021, 10:03am

Hi,
we have a library that includes server code written in Elixir and client code written in TypeScript - something similar to Phoenix.

We noticed that Phoenix pushes to its repository on GitHub both JS source code in assets/ directory and bundled JS code in priv directory.
The same regarding publishing package on Hex.pm - there are both JS source code and bundled JS code.

Let’s assume I want to debug Pheonix so I clone it and include it in my app in mix.exs using path. Then I change something in Pheonix source code and I want to check if my change make any sense in my application. To do this I have to first compile assets in Phoenix by npm install and then in my app I have to do mix compile. If I forgot to compile JS code in Phoenix I wouldn’t see any changes in my application.

My question is how do you develop Phoenix on the daily baisis and why do you include bundled JS code in priv directory on github instead of e.g. augmenting mix compile task to compile also this JS code.

LostKobrakai · July 23, 2021, 10:21am

This is so people, who do not actively develop the phoenix, don’t need all the required toolchain for building it. The second reason is that phoenix also publishes to npm and the compiled asset is one of its assets. It also gives people a way to just download the compiled file and load it in a website again without needing the toolchain.

It’s far simpler to supply people with the source files and compiled assets – which allows them to either use their own toolchain or non – compared to making people deal with phoenix toolchain and potentially their own as well.

mickel8 · July 23, 2021, 10:32am

This sounds resonable but in such a setup you probably have to have some scripts that will automatically compile Phoenix JS source code while compiling your app or you have to do this on your own each time you make any changes to the Pheonix source code.

LostKobrakai · July 23, 2021, 10:34am

There is a watcher in phoenix, it just isn’t coupled to compiling the elixir part.

github.com

phoenixframework/phoenix/blob/master/assets/package.json#L40

    
      
              "mock-socket": "^9.0.0",
              "sinon": "^9.0.1",
              "webpack": "5.37.1",
              "webpack-cli": "^4.7.0"
            },
            "sideEffects": false,
            "scripts": {
              "test": "mocha ./test/**/*.js --exit -r @babel/register -r jsdom-global/register",
              "docs": "documentation build js/index.js -f html -o ../doc/js",
              "build": "webpack --mode production",
              "watch": "webpack --mode development --watch"
            }
          }

derek-zhou · July 23, 2021, 1:52pm

I always use the version under assets/. If phoenix’s client side was written in typescript or purescript, your arguments would make more sense, but it is written in browser safe plain javascript, already usable as it is.

LostKobrakai · July 23, 2021, 1:56pm

That’s no longer the case since about a month or so. It’s now written in modern modular javascript.