Issue with Drupal.t() in js

I don't know if it's your problem but Vite may uglify Drupal variable in your function, so you get a.t() in your uglified JS.

And Drupal.t() needs to remain Drupal.t() even uglified
https://drupal.stackexchange.com/a/284198/106294

This issue doesn't appear to be caused by the Drupal module or Vite independently but rather seems to be a "side-effect" of using the two together. Specifically, as @daymoz pointed out, the problem seems related to how Vite performs JavaScript uglification and thus not respecting Drupal.t as a reserved function name. I was under the impression that Vite could be configured (using mangleProps etc in esbuild configurations) to exclude certain expressions or patterns from uglification, but any attempts to achieve this have not been successful so far.

With this plugin, there’s no need to extract locale variables into a standalone library excluded from Vite. Instead, you can continue to use Drupal.t() as you would in any other scenario. While the plugin hasn’t been extensively tested yet, it is functioning as expected in several local setups where we’ve integrated the Drupal Vite module. Feel free to check it out, and let me know if any changes need to be made.

Example usage and installation process:
https://www.npmjs.com/package/vite-plugin-preserve-drupal-t

As mentioned above, the problem with Drupal translations in js built by Vite is not really an issue with the module, but rather an incompatibility of Vite js minification and the way in JS translations are handled by Drupal. This will probably apply also for other modern js minification tools.

To support translations in javascript Drupal in js_alter hook scans js files from all attached asset libraries using regex looking for Drupal.t(...) and Drupal.formatPlural(...), from them extracts strings that should be translated and attaches dynamically generated script that puts available translations for found strings in the window.drupalTranslations object that is later used by translation functions.

When Vite minifies js script that is wrapped in IIFE (which is a standard Drupal practice), eg.

(function (Drupal) {
  console.log(Drupal.t("test"))
})(Drupal);

then it minifies internal function parameter names since in normal circumstances it doesn't matter what names they will have, so the script becomes something like:

(function(i){console.log(i.t("test"))})(Drupal);

which functions the same but is smaller.
The problem is that Drupal to attach needed translations looks for Drupal.t which it doesn't find there so the translation for in this case 'test' isn't attached to the page.

One workaround could be to use global Drupal object directly instead of passing it as a function argument.

(function () {
  console.log(Drupal.t("test"))
})();
// will be minified to
(function(){console.log(Drupal.t("test"))})();

@axioteo The plugin looks good, although it would be nice to include support for Drupal.formatPlural and make the regex a bit more elastic to catch all translation functions instances, the best would be probably to just take the beginning part of the regex Drupal uses, so something like:

[^\w]Drupal\s*\.\s*t\s*\(
// and
[^\w]Drupal\s*\.\s*formatPlural\s*\(

When it comes to this issue, the best way to resolve it would be to add a section to the README that would explain the problem and suggest using the vite plugin axioteo created.

@axioteo, feel free to update README.md with the correct details on how to fix this issue, either using your plugin either without it (if possible).

After this is resolved, we might open another issue to suggest the change of the description of the module if required by @wotnak.

Thank you @wotnak for pointing out ```formatPlural```, this completely slipped my attention. I've extended the vite plugin based on your recent suggestions, and actually tried to make it even more abstract by accepting optional params in the plugin setup. This way, theoretically we can cover any other case that we may need in the future.

As for the documentation update, I've practically added your great explanation on the issue, and also a brief "workarounds" chapter that suggest possible solutions, along with an explanation on the plugin usage and implementation.

@wotnak, if you don't have any further issues with the MR, you might also consider mentioning either the vite plugin or just this issue in the module's project page description. I see you already have a link to the README.md file; it might just be a bit more fancy - maybe adding another "note-tip" CSS class. Whatever you decide though.

Looks good.

Merged and added a direct link to the section about using Drupal translations in js on the module's project page.

Automatically closed - issue fixed for 2 weeks with no activity.