How to use publicOnly: true in Embroider apps

[amk221]

In a classic app, it's possible to use the instructions here to produce JSON files in a translations directory. The app knows the name of the fingerprinted file to load, because it can read the assetMap.

But in an Embroider build, the translations/*.json files no longer get processed by broccolli-asset-rev, and as such they are not fingerprinted. And since there is no longer an assetMap, there doesn't seem to be a way to load the translation files into the app. I thought perhaps I could leave publicOnly as false, and somehow use Webpack to produce the json files, but I'm not sure that's possible.

Could the guidance in the asynchronously-loading-translations.md be updated?

• I am on the latest ember-intl version
• I have searched the issues of this repo and believe that this is not a duplicate

Environment

• Ember Version: 5.5.0
• Ember CLI Version: 5.3.0
• Ember Intl Version: 6.4.0
• Browser(s):
• Node Version: 18.19.0

[amk221]

There's some more context in this thread

Compatibility with broccoli-asset-rev functionality (asset fingerprinting, assetMap.json manifest

[veelci]

I've just run into this as well w/ embroider.

Ember Version: 4.12.3
Ember Cli Version: 4.12.1
Ember Intl Version: 6.4.0
Node Version: 18

[ijlee2]

@amk221 I didn't fully understand the problem that you had encountered. Without seeing how your project is set up (conversely, your seeing mine), I think it may be hard to discuss the issue.

What I can show at the moment is, setting publicOnly: true may work in an Embroider app, with all static* flags set to true and route splitting enabled as well.

The screenshots below show an Embroider app with ember-source@5.6.0. To my knowledge, this app is a normal Ember app (no special configurations). When I changed publicOnly from false to true, I saw that translations are missing, as we expect.

Afterward, by calling fetch (I followed the documentation), I saw that the translations are now present.

app/routes/application.ts

import Route from '@ember/routing/route';
import { service } from '@ember/service';
import type { IntlService } from 'ember-intl';

export default class ApplicationRoute extends Route {
  @service declare intl: IntlService;

  async beforeModel() {
+     const response = await fetch('/translations/de-de.json');
+     const translations = await response.json();
+ 
    this.intl.setLocale(['de-de']);
+     this.intl.addTranslations('de-de', translations);
  }
}

I also checked that:

• Existing tests (written under the assumption of publicOnly: false) continue to pass.
• We can mix-and-match *.json and *.yml for translation files.

I agree that ember-intl currently lacks documentation for what to do in an Embroider app and in a v2 addon. It's something for which I'll need to find time and motivation. 🙂

[amk221]

Thanks. The problem (for me, and presumably @veelci) is...

The output of a classic app is:

dist/
├─ assets/
│  ├─ app-123456.js
│  ├─ my-asset-654321.svg
├─ translations/
│  ├─ en-gb-987654.json
│  ├─ es-es-456789.json

...and the JSON can be loaded becuse we can interogate the asset-map to find the URL for translations/en-gb.json

{
  "assets": {
    "assets/app.js": "assets/app-123456.js",
    "assets/my-asset.svg": "assets/my-asset-654321.svg",
    "translations/en-gb.json": "translations/en-gb-987654.json",
    "translations/en-es.json": "translations/es-es-456789.json"
  },
  "prepend": "https://abcdef123456.cloudfront.net"
}

https://abcdef123456.cloudfront.net/translations/es-es-456789.json

But the output of an embroider app is:

dist/
├─ assets/
│  ├─ app-123456.js
│  ├─ my-asset-654321.svg
├─ translations/
│  ├─ en-gb.json
│  ├─ es-es.json

The translation files are not part of the webpack app (so we can't do await import(...)), and they are also not fingerprinted, so we can't await fetch(...) or deploy to production.

[veelci]

@amk221 yes, that is my problem as well.

[amk221]

Hi 👋

Is there anything I can do to help move this along?

Or, even just to get confirmation that my issue is legit?

I'm sure more and more people will hit this as they try to move to Embroider.

Thanks for any info!

[ijlee2]

Hi, @amk221. Can you help with creating an Embroider app (#1868) so that we can start somewhere? If you leave a comment in that issue, I can assign it to you.

I wasn't sure which configuration steps an end-developer usually takes to use publicOnly: true. If the provided 3 steps are missing a critical step, feel free to let me know.

[amk221]

Here is a reproduction app

amk221/-ember-intl-embroider@61bb48f#diff-be9bc2296e644e9cc4c783e51a6a231716c251353aca253effd68264bae589fbR7

Currently, it works, because it's a classic app. Set embroiderBuild to true to build it as an Embroider app (which will fail to translate.)

The gist is, lack of fingerprinting on the translated files, incombination with no way to know how to load them if they were fingerprinted.

[ijlee2]

@amk221 I created 2 apps in the docs folder:

• my-classic-app (Ember app with default configuration)
• my-app-with-lazy-loaded-translations (Embroider app with publicOnly: true)

I looked at the diff that your had provided. Unfortunately, I still don't quite understand how to reproduce the issue that you had described.

Can you fork the repo and create a branch, then update one (or both) of the apps above to recreate the issue? If there are files in dist that I need to observe, please document a list of these files as well (the tree format that you had had in the comment on Feb 23 works great).

[amk221]

I've had a look, but there is nothing for me to do. It's as I mentioned here

The translation files are not part of the webpack app (so we can't do await import(...)), and they are also not fingerprinted, so we can't await fetch(...) or deploy to production.

To clarify, the translations are not in webpacks module graph. Which means there is no embroider equivelant of the classic config to migrate to.

[amk221]

Hi, just checking in, does this make sense?

[ijlee2]

@amk221 Sort of. I haven't had time to look more into using ember-intl in Embroider apps, and don't think I'll get to until July or so. Can you help me by looking into what a migration path could be? (I added a warning to the documentation for fingerprinting so that people are aware that the code may apply to classic apps only.)

Yesterday, someone asked Glime about fingerprinting on Discord. Maybe the answer there could help you get started.

https://discord.com/channels/480462759797063690/1157084708442755102/1242146088023232636

[amk221]

I added a warning to the documentation

Good idea.

Can you help me by looking into what a migration path could be?

I'm not sure how, I would have done a PR if I knew :)

The part that I'm unsure of is: With webpack, ususally you're dealing with assets that exist on disk already (images, css and whatnot)

But, with these translations, the build process has started already, so how does webpack get informed of files that didn't exist when it starting building, but do exist later on in the build phase

Yesterday, someone asked Glime about fingerprinting on Discord. Maybe the answer there could help you get started.

Glime's answer seemed a bit hacky, I would expect fingerprinting to come for free if the tranaslation files were part of the graph. Also, There is no need for the asset map in an embroider world