Using str() to localize expressions

[jeromecambon]

Hello,

I'm trying to localize a property, using the str() function as specified in the doc:

<label>${msg(str`${this.label}`)}</label>

The label property can take many values, but I want to localize the default one ("Default label").

This default label string is made localizable:

  @property({ attribute: 'label', type: String, reflect: true })
  label: string = msg('Default label');

So extracting and building the localization files, I get the the following 'fr.ts' (for the french translation):

    import {str} from '@lit/localize';
    export const templates = {
      'sd17994d58fd80ca0': `Label par défaut`,
      'saf63d34c8601dd41': str`${0}`,
    };

I would expect that my html label is translated when the lang is changed, but it does not work.
Did I miss something here?
Moreover, an example using the str() function with expressions would be very helpful 🙂
Thanks!

[aomarks]

I'm trying to localize a property, using the str() function as specified in the doc:

The str tag is only needed if you need to put expressions inside a plain string. Otherwise you can directly pass a string to msg.

Valid:

msg('Hello world');
msg(str`Hello ${name}`)
msg(html`Hello <b>world</b>`);
msg(html`Hello <b>${name}</b>`);

Invalid:

msg(`Hello ${name}`)

(The str tag is needed when there are expressions because otherwise we receive a string where expressions are already interpolated into a plain string, so it wouldn't be possible to update the template with a translation and substitute a new expression into the placeholder).

I would expect that my html label is translated when the lang is changed, but it does not work.

This is because msg returns a regular template or string in the current locale. The template/string itself doesn't know how to re-render itself when the locale changes, instead we rely on the msg call getting re-invoked each time the locale changes. The @localized decorator will automatically re-run render whenever the locale changes, so the key here is to ensure that any msg calls you have will be invoked whenever render runs.

One quick fix would be to move the default value directly into the render method:

@property({ reflect: true })
label?: string;

render() {
  return html`<label>${this.label ?? msg('Default label')}</label>`
}

Or if you prefer the property to handle the default in a more natural way, you can define your own getter/setter. This way, instead of the default being set once when the element is constructed, it is dynamic based on the current locale:

  private _label?: string;

  @property({ reflect: true })
  get label() {
    return this._label ?? msg('Default label');
  }

  set label(name: string) {
    this._label = name;
  }

  render() {
    return html`<label>${this.label}</label>`;
  }

Moreover, an example using the str() function with expressions would be very helpful

We're currently working on new localize docs on lit.dev -- I'll make sure to clarify when to use str, and also to discuss the issue you ran into with templates not updating. By the way, the README at https://github.com/lit/lit/tree/main/packages/localize#litlocalize currently contains a fair bit more information than lit.dev does, if you haven't found that already! All of this extra information will be moving to lit.dev shortly.

Hope that helps!

[jeromecambon]

Thank you for the quick reply!

I've tried your proposal, but unfortunately it doesn't work for my need:
Initially the label property is null so at the first render() the label is initialized to 'Default label'.
When the locale is set to 'fr', the label is translated to 'Label par défaut'. So far so good.
But when I come back to the default locale ('en'), since the label has already a value, it is not translated back to 'Default label'...

Any idea on how I could make this work?
Thanks!

[aomarks]

But when I come back to the default locale ('en'), since the label has already a value, it is not translated back to 'Default label'...

Odd! Can you share more of your code so I could take a look? Can you put a console.log('render') in your render method to check whether render is getting invoked when you switch back to the default locale?

Here's an example where I modified the localization example from our docs to show how you could fall back to a default that uses msg. Switching away from and back to the default locale is working here.

[jeromecambon]

ok, I've fixed my issue: I was checking 'targetLocales' instead of 'allLocales' for locale update. So I was unable to change back to 'en'.

Thank you very much for your help et responsiveness! 😃