Support module translations in Javascript files

Created on 10 July 2024, 3 days ago


  • Drupal.t works in the past for modules to translate strings in their javascripts.
  • Right now, there is no documented way for module developers to do so.
  • Using Drupal.t depends on a translation string depends on the loaded javascript file be scanned and recognized ahead of time.
  • Since Drupal locale do not know module's has javascript files that uses translation, this is not possible

Dig a bit deep

  • The function _locale_parse_js_file() is supposed to parse Javascripts that need translations
  • The function is called only by locale_js_alter(), which is run when cache is rebuilt.
  • locale_js_alter() would check if the js directive in any *.libraries.yml that has a placeholder file "core/modules/locale/locale.translation.js" key. Since the keys in these *.libraries.yml for modules are rewritten to prepend the module path, no module can add "core/modules/locale/locale.translation.js" directly to their *.libraries.yml
  • Adding "locale/translations" into dependencies does NOT change the $javascript array received by locale_js_alter. So even when that has the placeholder file "core/modules/locale/locale.translation.js", it doesn't help locale module to recognize the module's javascript file needs to be scan.
  • The only feasible way is to call the supposedly private function _locale_parse_js_file() on the module javascript path

Steps to reproduce

  1. Create a new module
  2. The module can simply load translation string with Drupal.t():
    console.debug(Drupal.t('Hello string', {}, {context: 'test'}));
  3. Declare the asset in MODULENAME.library.yml and it should depends on "drupal/core" (and even "locale/translations").
  4. In MODIULENAME.module, use hook_preprocess_page() to attach the asset.
  5. Make sure to enable locale and setup site to have more than 1 language
  6. Install the module

Expected Result

  • After loading a page with the Javascript asset loaded, the Translate Interface UI should be able to find the newly added "Hello string" string in the "text" context / domain.
  • Once translated in the UI, the translation of the string should be showing in the console log interface.

Actual Result

  • The string is not found in backend.

Proposed resolution

Drupal should provide and document the standard way for modules to use Drupal.t in their own javascripts.

Remaining tasks

  1. Determine if this is indeed a feature missing or just a documentation issue
  2. If this is a documentation issue, update the Module development guide β†’ to properly document this (probably under Adding assets (CSS, JS) to a Drupal module via *.libraries.yml β†’ ).
  3. If this is a feature missing, figure out the correct API for module to register their script file.

User interface changes


API changes

Probably. TBD.

Data model changes


Release notes snippet

✨ Feature request

Needs work


10.3 ✨

Language systemΒ  β†’

Last updated 3 days ago

  • Maintained by
  • πŸ‡©πŸ‡ͺGermany @sun
Created by

πŸ‡­πŸ‡°Hong Kong yookoala

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024