feat: allow for tree-shaking unused langauges translations in custom apps #19799

Platonn · 2024-12-20T17:08:23Z

add a lot of missing index.ts files to re-export JSON translations in TS for new langauges
update translations.ts barrel files, to export each langauge in a separate public API members (to allow for treeshaking unused langauges). Note: it preservers the old feature prefix (e.g. asmTranslations -> asmTranslationsEn, asmTranslationsDe, ...)
deprecate the the old wrapper consts e.g. asmTranslations (and moved those deprecated tokens to public_api.ts files from translations.ts files)
remove from the old wrapper consts e.g. asmTranslations langauges other than en (in other words: revert the change made previously on the branch epic/tew-translation which added 3 other langauges into those wrapper objects)
add a new function extractTranslationChunksConfig() in @spartacus/core and use it in every library for creating chunks config in their translation.ts files. It extracts the chunks config from the translations assets automatically. So no more need to type chunks config manually.
fix our installation schematics, to use the new recommended syntax in the scaffolded features e.g.:
```
- resources: asmTranslations,
+ resources: { en: asmTranslationsEn }
```

By the way:

noticed a broken chunks mapping for the cpqQuote feature. now should be fixed since using function extractTranslationChunksConfig()
noticed a typo in the existing old chunk name myAccountV2NotifiationPerference, HOWEVER I didn't fix it in this PR - it should be done in a separate PR
noticed yet another typo in existing file name my-account-v2-notification-perference.json (btw. it's a different typo than the above chunk name), HOWEVER I didnt fix it in this PR
noticed some i18n JSON files don't use camelCase, but kebab-case, HOWEVER I didn't fix it in this PR - it should be done in a separate PR

The reason I didn't want to fix those things by the way is:

it might affect the workflow of the TEW team, and I'd need to first double check with them
it's not related to this PR's main purpose (three-shaking)

TODO

fix unit tests and Jest snapshots in schematics
use it this way also in our storefrontapp
write doc input for the migration docs (to use specific langauges)

related to https://jira.tools.sap/browse/CXSPA-9131

QA steps

checkout to this branch
build libs
publish to verdaccio
create a new app npx @angular/cli@17 new test-app --standalone=false --ssr=false
in the new app, install sparatcus from verdaccio ng add @spartacus/[email protected]. 0-1 --baseUrl="https://40.76.109. 9:9002" --ssr AND PLEASE SELECT ALL possible features and integrations in the interactive prompt
In VsCode search everywhere (Cmd+Shift+F) for the phrase resources: and verify that everywhere in every feature module we use the new approach with explicit EN translations
In some of those modules try to change the approach to old translations wrapper object and verify it's @deprecated (crossed out in VSCode)
in spartacus-configuration.module.ts add also German translations for the main translations:
```
i18n: {
     resources: { en: translationsEn, de: translationsDe },
```
in spartacus-configuration.module.ts add this config (it's needed for later to run http-server)

provideConfig(<SiteContextConfig>{
   context: {
     baseSite: ['electronics-spa', 'apparel-uk-spa'],
     currency: ['USD', 'GBP'],
     language: ['en', 'de'],
   },
 }),

ng build (or for interactive mode run npm run watch). Don't try ng serve --configuration=production - it doesn't have so well tree shaking as ng build
npx http-server dist/test-app/browser (or for interactive mode run in another terminal npx nodemon --watch "./dist/test-app/browser" --exec "npx http-server './dist/$test-app/browser'" --ext "*"
In Chrome open http://127.0.0.1:8080/ (8080! not 4200 port!)
In devtools Sources tab do the search (Cmd+F)
paste this search phrase ariaLabelSuggestions and verify that in the loaded main.js file there are only 2 langauges (EN and DE which you have enabled in steps above) with translations for this key

…- to relative public_api.ts

…ame (chunk name) is in kebab-case, then convert the chunk name to camelCase (without changing the original JSON file)

…nch with latest translations

…ix>TranslationsEn` instead of the deprecated `<prefix>Translations` wrapper object

…slations-ts-barrels.config'

pawelfras · 2024-12-23T15:00:03Z

I encountered two issues when tried to build libs for QA purposes:

Error: Cannot find module '@spartacus/core'
This PR inroduces to @spartacus/assets a new dependency to the @spartacus/core library in file projects/assets/src/translations/translations.ts:

This cause the mentioned error. Do we want to add this new dependency or rather handle
extractTranslationChunksConfig in a different way, e.g. copy-paste similar logic to assets library?

after moving deprecated translations to public_api file, generate-translations-ts-2-json.ts is refering to missing object.

generate-translations-ts-2-json.ts:8:10 - error TS2724: '"./src/translations/translations"' has no exported member named 'translations'. Did you mean 'translationsCs'?

8 import { translations } from './src/translations/translations';

could be handled by adding the following line to the script:

+ const translations: any = { <--- typed as `any` to satisfy TS. Otherwise we would have to copy the `TranslationResources` type (to not import it from `@spartacus/core`. 
+   en: translationsEn,
+ };

pawelfras · 2024-12-23T15:06:17Z

projects/assets/src/translations/translations.ts

-import { ja } from './ja/index';
-import { de } from './de/index';
-import { zh } from './zh/index';
+import { extractTranslationChunksConfig } from '@spartacus/core';


major: this line causes the build error described here: #19799 (comment)

fixed the this problem with the commit 058ce32

pawelfras · 2024-12-24T07:36:25Z

After tweaking mentioned issues locally I went through the QA steps and everything works as expected 🔥
I didn't provide any fixes in commits/PRs as they need additional discussion.

…ons object, to prevent dependency on @spartacus/core

… point to public_api in the dev tsconfig. But use /dist in tsconfig.lib.prod.json

…s being imported) in feature modules

…/core to point to public_api in the dev tsconfig. But use /dist in tsconfig.lib.prod.json" This reverts commit d4f9aff. WHY REVERTING: it was incorrect decision to do it

…tacus into epic/tew-translation--script-v2

…rces: { en: xxxTranslationsEn } }`

…epic/tew-translation--script-v2

pawelfras · 2025-01-08T14:14:14Z

...ss/cypress/e2e/regression/product_configurator/product-configurator-vc-interactive.e2e.cy.ts

query: is this file related to PR's subject?

nope.
After resolving conflicts in the license header (2024 vs 2025) in many files, those files got saved in my IDE and 2 things we applied:

prettier

removal of unused imports
The second is the case in this file.

pawelfras · 2025-01-08T14:18:54Z

projects/storefrontapp-e2e-cypress/cypress/e2e/regression/asm/customer-list.e2e.cy.ts

query: is this file related to PR's subject?

see answer in this comment https://github.com/SAP/spartacus/pull/19799/files/35fa2dc8ed3f6bf8e309bff8ff48629277026ac0?w=1#r1907413277

pawelfras

QA done, LGTM

Platonn added 12 commits December 20, 2024 16:26

add a script for generating translations.ts, and configs

f50b551

modify script, and generate the files

d3f7ddd

refactor: move all exports of @deprecated const <prefix>Translations …

7b75621

…- to relative public_api.ts

fix: add peer-dependency on @spartacus/core in @spartacus/assets

98259c3

in the script, in function generateLanguageIndex, if the JSON filen…

c4b6665

…ame (chunk name) is in kebab-case, then convert the chunk name to camelCase (without changing the original JSON file)

generate missing index.ts - after merging (and rebasing) the main bra…

71d682b

…nch with latest translations

fix(schematics): in fresh app use directly the EN translations `<pref…

6dc3188

…ix>TranslationsEn` instead of the deprecated `<prefix>Translations` wrapper object

doc: use word 'please' in the @deprecated notice

86958a6

rename and move the script

f3b1a21

rename all 'translations-ts-generator.config' files to 'generate-tran…

cbce210

…slations-ts-barrels.config'

prettier: run prettier on the modified generated files

ad66885

delete script and its configs

33d8319

Platonn closed this Dec 20, 2024

Platonn mentioned this pull request Dec 20, 2024

(closed in favor of #19799) feat: allow for tree-shaking unused langauges translations in custom apps #19795

Closed

Add license header

4441800

Platonn reopened this Dec 20, 2024

pawelfras reviewed Dec 23, 2024

View reviewed changes

Platonn added 2 commits January 7, 2025 16:57

fix(generate-translations-ts-2-json): workaround to not use translati…

058ce32

…ons object, to prevent dependency on @spartacus/core

fix(assets): in tsconfig.lib.json update paths for @spartacus/core to…

d4f9aff

… point to public_api in the dev tsconfig. But use /dist in tsconfig.lib.prod.json

Platonn had a problem deploying to dev January 7, 2025 15:58 — with GitHub Actions Error

Add license header

05f7d76

spartacus-serviceuser had a problem deploying to dev January 7, 2025 15:59 — with GitHub Actions Failure

Platonn added 3 commits January 7, 2025 17:43

refactor(storefrontapp): use the new approach (with explicit langauge…

606905e

…s being imported) in feature modules

Revert "fix(assets): in tsconfig.lib.json update paths for @spartacus…

d6f8c02

…/core to point to public_api in the dev tsconfig. But use /dist in tsconfig.lib.prod.json" This reverts commit d4f9aff. WHY REVERTING: it was incorrect decision to do it

Merge branch 'epic/tew-translation--script-v2' of github.com:SAP/spar…

9de3c36

…tacus into epic/tew-translation--script-v2

Platonn had a problem deploying to dev January 7, 2025 16:44 — with GitHub Actions Failure

test(schematics): update snapshots to use new approach `i18n: { resou…

9a13012

…rces: { en: xxxTranslationsEn } }`

Platonn had a problem deploying to dev January 8, 2025 09:52 — with GitHub Actions Failure

Merge branch 'epic/tew-translation' of github.com:SAP/spartacus into …

35fa2dc

…epic/tew-translation--script-v2

Platonn temporarily deployed to dev January 8, 2025 11:40 — with GitHub Actions Inactive

Platonn marked this pull request as ready for review January 8, 2025 11:41

Platonn requested review from a team as code owners January 8, 2025 11:41

pawelfras reviewed Jan 8, 2025

View reviewed changes

pawelfras approved these changes Jan 9, 2025

View reviewed changes

Platonn merged commit 21f21c4 into epic/tew-translation Jan 9, 2025
12 of 14 checks passed

Platonn deleted the epic/tew-translation--script-v2 branch January 9, 2025 09:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: allow for tree-shaking unused langauges translations in custom apps #19799

feat: allow for tree-shaking unused langauges translations in custom apps #19799

Platonn commented Dec 20, 2024 •

edited

Loading

pawelfras commented Dec 23, 2024 •

edited

Loading

pawelfras Dec 23, 2024

Platonn Jan 7, 2025

pawelfras commented Dec 24, 2024 •

edited

Loading

pawelfras Jan 8, 2025

Platonn Jan 8, 2025

pawelfras Jan 8, 2025

Platonn Jan 8, 2025

pawelfras left a comment

feat: allow for tree-shaking unused langauges translations in custom apps #19799

feat: allow for tree-shaking unused langauges translations in custom apps #19799

Conversation

Platonn commented Dec 20, 2024 • edited Loading

pawelfras commented Dec 23, 2024 • edited Loading

pawelfras Dec 23, 2024

Choose a reason for hiding this comment

Platonn Jan 7, 2025

Choose a reason for hiding this comment

pawelfras commented Dec 24, 2024 • edited Loading

pawelfras Jan 8, 2025

Choose a reason for hiding this comment

Platonn Jan 8, 2025

Choose a reason for hiding this comment

pawelfras Jan 8, 2025

Choose a reason for hiding this comment

Platonn Jan 8, 2025

Choose a reason for hiding this comment

pawelfras left a comment

Choose a reason for hiding this comment

Platonn commented Dec 20, 2024 •

edited

Loading

pawelfras commented Dec 23, 2024 •

edited

Loading

pawelfras commented Dec 24, 2024 •

edited

Loading