Is it possible to have page-specific javascript with LiveView?

Phoenix Forum Questions / Help
, ,
1

One of my LiveView view’s has a very heavy javascript dependency so I want to avoid loading it for every page on the site, while still using live_redirect or similar between the two (avoiding a full-page load). However, I’m running into


This means that any <script> tag that I put into the page will not be executed. Of course there are a plethora of work-arounds: https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml But I figured that someone else has probably tried to solve this before so I am curious what other people have tried or are using.
2 Likes
2

Any chance you might be able to load it with a hook?

3

I was able to do it via a LiveView hook and webpack’s dynamic imports.

Now, if you figure out <head> tags please let me know. I want LiveView-enabled pages but with opengraph+friends tags based on a resource loaded on mount. I don’t think I can use hooks/JS for that.

1 Like
4

I kind of can but it feels overly hacky. The approach that I’ve come to that partially works is to have a LiveComponent that receives the src href as an assign. Then it creates a <script src="<%= @src %>" onload="onloadfunc()"></script> where onloadfunc is window.loadedScripts = window.loadedScripts || {}; window.loadedScripts['<%= @src %>'] = true. Then in the hook it checks if the script with the current src has been loaded, and if not it uses document.createElement('script') along with appendChild to load the script. I’m not yet sure about pushing it to production.

Hmm, I’m just using separate bundles but not dynamic imports. Do you have an example you could share about how that worked for you? And are you actually using webpack 5.0 (that’s the version of the docs you linked to)?

5

I’m using Webpack 4.43.0. I didn’t notice the docs are for v5, but the dynamic imports are certainly working for me.

I’m going to open-source YouMeet when it launches, so I don’t have the full repo open to browse yet, but here are some snippets that I think covers it.

Here’s an example hook to load a fancy WYSIWYG editor that’s using Vue:

hooks.Editor = {
  mounted() {
    const phoenix = this;
    const target = this.el.getAttribute('phx-target');
    const Editor = () => import(/* webpackChunkName: "editor" */ "./components/Editor.vue");
    () => import(/* webpackChunkName: "highlight" */ "./syntax-highlighter");

    new Vue({
      el: this.el,
      provide: function() {
        return {
          publish: this.publish
        };
      },
      methods: {
        publish: payload => phoenix.pushEventTo(target, "editor-update", payload)
      },
      render: createElement =>
        createElement(Editor, {
          props: {
            initialValue: phoenix.el.dataset.initialValue,
            placeholder: phoenix.el.dataset.placeholder,
          }
        })
    });
  }
};

On the LiveView EEX to load it (actually a LiveComponent but should be about the same)

<div phx-update="ignore" id="Editor-<%= @id %>">
  <div data-placeholder="<%= html_escape(@description_placeholder) %>" 
       data-initial-value="<%= html_escape(input_value(f, :description)) %>" 
       phx-target="<%= @myself %>" 
       phx-hook="Editor" 
       class="container flex h-screen m-4">
  </div>
</div>

and in my Webpack config:

// all the configs plus this:
  output: {
    filename: "[name].js",
    chunkFilename: "[name].bundle.js",  // <-- this line
    path: path.resolve(__dirname, "../priv/static/js"),
    publicPath: "/js/"
  },
// ... no optimizations key
// this may imply that you need to split code yourself.

EDIT: There should be a GIF right here, but it doesn’t seem to load? Sorry, it’s just illustrating how navigating from one LiveView without the script, and then clicking a link to another liveview does trigger the JS fetch and import.
dynamic-import-via-hook

Hopefully I didn’t miss anything!

7 Likes
6

What I’ve learned is that if you are using webpack you should be able to dynamically load bundles per hook.
This is how I’m currently doing it.

By using this style in importing.

let Hooks = {
  PageIndex: {
    mounted() {
      import('@mojs/core').then(mojs => {})
...

It only works if you import this way.

5 Likes
7

Not sure if it’s relevant, but: Has anyone used lazy loading in a phoenix live view project?

And the example repo: https://github.com/syfgkjasdkn/lazy-live-view

3 Likes
8

Thanks for all the examples. I should be able to get something working with them.

1 Like
9

Here’s the gif I tried to post earlier: https://imgur.com/a/izmruiM

10

That’s a cool way of using async function for hooks.
Thanks for sharing that exmaple.