Refer asset path inside of javascript file

[rafaeldev]

I have a servicer worker where I have a list of files to be cached. Previous, I ran using .erb extension to get that, like this:

const CACHE_VERSION = 'v2';
const CACHE_NAME = CACHE_VERSION + ':sw-cache-';

function onInstall(event) {
  console.log('[Serviceworker]', "Installing!", event);

  event.waitUntil(
    caches.open(CACHE_NAME).then(function prefill(cache) {
      return cache.addAll([
        '<%= asset_path "application.js" %>',

        '<%= asset_path "application.css" %>',

        '/offline.html',
      ]);
    })
  );
}

Now I decided to move sw.js to esbuild build flow but I don't know how can I asset application.js file link there.

Thanks!

[risen]

I also would like a way to get the asset_path in javascript.

For example, when I want to use customize the icon library for shoelace.style, I can do this:

registerIconLibrary("default", { resolver: (name) => `https://cdn.jsdelivr.net/npm/[email protected]/icons/${name}.svg` })

… but I can't refer to local assets and do something like:

registerIconLibrary("default", { resolver: (name) => asset_path(`icons/${name}.svg`) })

[seanharmer]

I've just managed to get something like this working. You can use the new RAILS_ASSET_URL helper from propshaft. To use it do something like this:

const particleTexturePath = RAILS_ASSET_URL("/particles/9.png")
console.log(particleTexturePath)

which outputs the full finger-printed path: /assets/particles/9-61a18f3e.png

If the path fails to resolve, there will be a log message in the rails server logs.

[risen]

Perfect, thanks for the heads up!