Comments (13)
@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 [email protected]
. 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.
![](https://private-user-images.githubusercontent.com/16869656/307258632-58be0a16-18e3-4187-94da-f4b2360077b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk4Mjg0ODQsIm5iZiI6MTcxOTgyODE4NCwicGF0aCI6Ii8xNjg2OTY1Ni8zMDcyNTg2MzItNThiZTBhMTYtMThlMy00MTg3LTk0ZGEtZjRiMjM2MDA3N2IxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAxVDEwMDMwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdlYWU0NmI3OTc0MDJjMGM3Yzc5N2E1ZmJmZjZmZjA3NzcyYzg1YTM0M2Y4MWJlNDIyNzA1MjIyMmU1MDJiOGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.N9eLtYSBISUqLzJFyYyzVKaSBI4NIl1wBiKb7t7sQBY)
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);
}
}
![](https://private-user-images.githubusercontent.com/16869656/307258638-5e78bd07-d916-4026-8288-f3fb9385d5f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk4Mjg0ODQsIm5iZiI6MTcxOTgyODE4NCwicGF0aCI6Ii8xNjg2OTY1Ni8zMDcyNTg2MzgtNWU3OGJkMDctZDkxNi00MDI2LTgyODgtZjNmYjkzODVkNWY1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAxVDEwMDMwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA5NWMzOWJhODY1MmYyZGU0Mzg5NDI5MjAxZWQyY2JkNzdlOTZlMTNmOTk0M2IzMzdhNTVhNzc4ZmQxOGIyZTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.MUR2Z5me3KJARTSA1xTIkPbnEm59GIRCx5vT5fhzuuk)
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. 🙂
from ember-intl.
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.
from ember-intl.
Here is a reproduction app
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.
from ember-intl.
@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 withpublicOnly: 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).
from ember-intl.
There's some more context in this thread
Compatibility with broccoli-asset-rev functionality (asset fingerprinting, assetMap.json manifest
from ember-intl.
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
from ember-intl.
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.
from ember-intl.
@amk221 yes, that is my problem as well.
from ember-intl.
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!
from ember-intl.
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.
from ember-intl.
Hi, just checking in, does this make sense?
from ember-intl.
@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
from ember-intl.
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
from ember-intl.
Related Issues (20)
- A simple, autogenerated integration test fails for a component using a translation in ember-intl 6.1.2 HOT 6
- Bundle size regression in v6.2.0 HOT 3
- Merge this into formatjs HOT 3
- Incompatible with native `ember-source` types HOT 5
- `allowEmpty` class property not respected in v6.3.1 HOT 1
- Extending helpers like FormatDate has braking changes between v6.2.2 and v6.3.0+ HOT 5
- Basic usage results in: You attempted to update `_locale` [...] infinite revalidation bugs, and performance issues, and is not supported. HOT 4
- v6 - Error on valid use of `many`: message cannot be parsed: Unknown plural category: many HOT 1
- Deleted
- Plans for v7 release
- Memory leak regression after upgrading to `>= 6.3.0` HOT 3
- Do not blow up the whole page if a variable is missing ? HOT 2
- Vulnerability in dependency `glob-parent` via `broccoli-merge-files` HOT 10
- Create a docs-app that checks `wrapTranslationsWithNamespace: true`
- Create a docs-app that checks fetching translations HOT 1
- Create a docs-app that checks `publicOnly: true`
- Could not find module `eventemitter3` HOT 3
- [Feature Request] Add strict mode for setupIntl test hook HOT 1
- Cannot silence missing translations output on build HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-intl.