vite_legacy_javascript_tag execution order inconsistent with vite_javascript_tag

[elmassimo]

vite_legacy_javascript_tag execution order inconsistent with vite_javascript_tag

[ElMassimo]

Hi @duprasa!

As you mentioned, ideally you would only have one legacy entrypoint per page.

In order to control the order, you could change the helper contract from:

def vite_legacy_javascript_tag(name, asset_type: :javascript)

to

def vite_legacy_javascript_tag(*names, asset_type: :javascript)

and chain System.import promises:

import_tag = content_tag(:script, nomodule: true) {
  <<-JS
    var srcs = #{vite_asset_paths.to_json.html_safe}
    var i = 0
    var promise = Promise.resolve()
    do {
      promise = promise.then(System.import(srcs[i]))
    } while (i++ < srcs.length)
  JS
}

This introduces additional complexity to the helper, so I'd like to hear from other users that share this requirement before updating the gem.

Please do try it out by overriding or creating a new helper based on this and let me know how it goes 😃

[ElMassimo]

After some investigation, it seems that import order does not guarantee execution order (at least when using the module polyfill).

A way to enforce execution order is to leverage the module system.

For example, in your case, create another entrypoint combined_first_and_second.js:

import '~/entrypoints/first_to_run'
import '~/entrypoints/second_to_run'

and then reference this entrypoint in your pages:

<%= vite_javascript_tag "combined_first_and_second" %>
<%= vite_legacy_javascript_tag "combined_first_and_second" %>

If you are rendering the tags in different views or partials, then there's really no guarantee to the execution order given the async nature of ES modules.