Automatically generate locale ids

[cvan]

It's a bit cumbersome to have to duplicate the string in the default language in the [*] section in the .ini file (or the respective .properties file). Often, with multiple folks editing files, they can forget to adjust the .ini file after editing the string in the HTML/JS.

Either this case isn't supported, I'm doing it wrongly, or there's a more obvious way to automatically generate these strings that I haven't thought of. I had considered a build step to re-generate create human-readable l10n ids. Thoughts?

[Rob--W]

You don't have to duplicate the IDs in locales.ini (which does not even have to be called locales.ini, by the way. You can also use locale.properties, foo.bar, etc, as long as it is linked via <link rel="application/l18n">).

This also works:

[*]
@import url(en.properties);

[nl]
@import url(nl.properties);

[cvan]

Yep, I know that part. I mean more like I don't want to have to do this in locales.ini

[*]
tagline = Welcome to our homepage.

And this in index.html:

<h1 data-l10n-id="tagline">Welcome to our homepage</h1>

---

I want to be able to just do something like

<h1>{{ _('Welcome to our homepage') }}</h1>

or

<h1 data-l10n>Welcome to our homepage</h1>

or

<h1 id="tagline">Welcome to our homepage</h1>

and have that automatically create an l10n identifier in the locales.ini (and/or .properties files, where applicable):

[*]
h1WelcomeToOurHomepage = Welcome to our homepage.

or

[*]
tagline = Welcome to our homepage.

[Rob--W]

<h1>{{ _('Welcome to our homepage') }}</h1>
<h1 data-l10n>Welcome to our homepage</h1>

What if later you change this to "Welcome to our home page"? Then you'd have to change the identifier in every other file.

<h1 id="tagline">Welcome to our homepage</h1>

Personally I would not do this, because it couples the identifiers of your HTML with the identifiers for i18n. E.g. if you want to use the same phrase twice, that's not possible when you use the HTML id attribute, because these must be unique within a document.

If you really want to use id attributes, you could do something like this (which I do not recommend for the previous reason):

document.webL10n.ready(function() {
    var elements = document.querySelector('[id]');
    for (var i = 0; i < elements.length; ++i) {
        elements[i].setAttribute('data-l10n-id', elements[i].id);
    }
    document.webL10n.translate(document.body);
    for (var i = 0; i < elements.length; ++i) {
        elements[i].removeAttribute('data-l10n-id');
    }
});

[OleksandrSemenov]

please remember to remove semicolon in

@import url(en.properties);

Otherwise it will not be parsed
Right version is

@import url(en.properties)