Localization Question

[jboileau99]

Hey there,

I'm working on localizing a web component built with Lit, and have run into an issue. Here is a simplified version of what I'm trying to do:

render() {

    const actions = {
      ACCESS: 'ACCESS',
      DELETE: 'DELETE',
      MODIFY: 'MODIFY',
    }

    return html`
      <div class="prompt-heading">${this.prompt}</div>
      <div class="actions-container">
        ${Object.values(actions).map(
          a =>
            html`<action-item
              action-name=${msg(a)}
              action-description=""
              ?disabled=${true}
            ></action-item>`
        )}
      </div>
    `;
  }

Basically I want to localize the value of each action type. This results in the following error when running lit-localize extract:

error TS2324: Expected first argument to msg() to be a string or Lit template.

I'm confused by this error message because the type of a is string. Changing to a || '' or a ?? '' doesn't help. I can get past this error by changing action-name=${msg(a)} to action-name=${msg(str`${a}`)}, but then the generated tag in my fr.xlf is:

<trans-unit id="saf63d34c8601dd41">
  <source><x id="0" equiv-text="${a}"/></source>
</trans-unit>

Which will not let me translate the actual action value (ACCESS, DELETE, or MODIFY). Any advice on how to proceed? I feel that this kind of thing can be done somehow, but haven't been able to find anything.

Cheers

[jboileau99]

One way I can achieve what I want is by changing the code to:

render() {

    const actions = {
      ACCESS: () => msg('ACCESS'),
      DELETE: () => msg('DELETE'),
      MODIFY: () => msg('MODIFY'),
    }

    return html`
      <div class="prompt-heading">${this.prompt}</div>
      <div class="actions-container">
        ${Object.values(actions).map(
          a =>
            html`<action-item
              action-name=${a()}
              action-description=""
              ?disabled=${true}
            ></action-item>`
        )}
      </div>
    `;
  }

Is this the right solution, or is there some other way that I'm missing?

[aomarks]

Yes, I think this comment has the ideal solution!

The error message should be a little more clear. The first value of a msg call has to be a string literal. A variable whose value is a string doesn't count. The reason for this is that Lit localize does static analysis of your source code to extract messages, so it needs to see the actual translation string inside the msg call (it's not able to follow references, since that would add a lot of complexity).