[Sage 10] Import manifest.json content in javascript files?

sage
,
1

Hello,

I need to get the path of some fonts to load them in JS before the browser / CSS do it (for a use with a canvas in particular).
The webpack build adds a hash at the end of the name of these files : to get this name, the only solution seems to import the manifest.json file in JS

However, importing this file creates an infinite “live-reload” : this is excepted because this file is updated at each new build (which modifies the import, which regenerates a build, which modifies the import, etc etc)

What solution is possible to get this file path with hash directly in javascript? The only solution I see is to get this file in PHP and then send its content via bundle()->localize, but it clearly doesn’t seem to me the best solution

Thank you!

1 Like
2

I don’t understand what you’re trying to do but it sounds like maybe you’re doing too much?

import font from '@fonts/dankmono.otf';
console.log(font); // => 'fonts/dankmono.aceaa6.otf'

But, like I said, I don’t really understand what you’re trying to do at all (or why it can’t be done in css).

load them in JS before the browser

JS runs in the browser.

1 Like
3

If you want to beat the browser, then you’ll probably need to make the JS blocking + add a <link rel="preload" href="path/to/font.otf" as="font"> tag to the <head>. Making the JS blocking is a bad idea in my opinion. Instead, load the font with CSS and maybe consider just using the <link rel="preload"> tag for the font, but only if you really need it.

If you need to ensure the font is available for use in the canvas you can check if the fonts are loaded:

document.fonts.ready.then(() => /* The fonts are loaded. Do something with canvas. */);

I’ve used the canvas to measure text with a Google Font and this worked pretty well. There’s also a loadingdone event for document.fonts, except I found it didn’t work at all in Safari.

1 Like
4

import font from '@fonts/dankmono.otf';=> It seems to work with livereload, but during a build I get this error:
Uncaught Error: Automatic publicPath is not supported in this browser.

For your information kellymears I need to make sure that my fonts (loaded from CSS) are available before loading my canvas, loading them via a FontFace object is a solution for that. But for that, I need to get his “hashed” name.

knowler use document.fonts.ready seems to be a good solution, I will try it asap, thanks !

5

you will need to set the dynamic public path:

As of 5.4.0 you can also declare the public path as part of the app.entry call:

app.entry({
  app: {
    import: ['@scripts/app'],
    publicPath: '/app/themes/sage/public/'
  },
})

If you don’t have luck with this the webpack docs above have more information on using __webpack_public_path__