This gave me hope and I took half a day aside to work on an integration with Phoenix + Liveview + Vite.js. The result looks quite promising and it is even not so much extra code in the end. instant asset updates in the browser during development.still working automatic refresh on Phoenix template changes.using properly working LiveView components along React.js components.navigation handled by the server, to keep the JS logic focused on isolated areas and not ending up in a full SPA (Single-Page-Application).works with Elixir releases for deploymentįeel free to clone it and play with it locally. ![]() $ yarn create assets_new -template preact-ts # we are going to use Typescript + Preact.js # now lets create a vite.js app as a sibling folder to assets # fresh phx app + liveview (but without ecto to keep things a bit simpler) # - you have a recent version of Elixir + Node.js + NPM installed on your system Phoenix liveview hooks free# $ cd assets_new yarn # start the dev serverĢ:15:49 AM new imports encountered, updating dependencies. If you peek into the sourcecode from vitejs HTML in browser you will see following: # any asset change is instantly reflected in the browser, try it out! => was injected by Vite.js to do some hot-reload magic in the browser.Īlso notice type="module", this tells our (modern) browser to apply ES6 modules handling on such scripts. ![]() > liveSocket.enableLatencySim(1000) // enabled for duration of browser session expose liveSocket on window for web console debug logs and latency simulation: connect if there are any LiveViews on the page If we load src/main.tsx in browser, we see following code: import ) Similarly we request here: a seemigly un-transpiled Typescript JSX file directly, also of type = module, that should raise some brows right there. If we refresh now, we see an empty page in browser. js : 10 Uncaught Synta圎rror : The requested module '/node_modules/.vite/phoenix_html/priv/static/phoenix_html.js?v=7cbaa1e1' does not provide an export named 'default' Looking into dev console shows: client : 196 connecting. I could not figure out a nice way to make it work, so I vendored it in and provided a default export. Vendored from deps/phoenix_html/priv/static/phoenix_html.js + extra default `export` statement. The requested module '/node_modules/.vite/phoenix_html/priv/static/phoenix_html.Posted on Linear Regression with Elixir, Phoenix and LiveView.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |