cibernox / svelte-intl-precompile

I18n library for Svelte.js that analyzes your keys at build time for max performance and minimal footprint
https://svelte-intl-precompile.com
ISC License
274 stars 13 forks source link

Parameters are not considered #26

Closed Civile closed 2 years ago

Civile commented 2 years ago

I'm having a problem passing parameters. Despite having followed the guide, the parameters of the translation are not taken into consideration. This is the svelte code $t( 'PRIVACY_POLICY', { values: { link: 'abc' } } ) And this is the translation "PRIVACY_POLICY": "Privacy <a href=\"{ link }\">policy</a>"

cibernox commented 2 years ago

Can you provide a reproduction? I have tons of translations like those and I know for a fact that they do work. I copied that one on an app of mine to check. Also note that if your translations contain HTML, svelte is going to escape it unless you use the @html keyword in front. E.g. {@html $t( 'PRIVACY_POLICY', { values: { link: 'abc' } } )}

Civile commented 2 years ago

I tried again many times, unable to get it to work. So I went to take a look at the precompile-intl-runtime code and noticed that the formatMessage function interprets the "message" variable as being of type "string" and doesn't seem to perform variable substitution, as you can see on line 19. It depends on it?

Below I have linked the condition that turns out to be true.

https://github.com/cibernox/precompile-intl-runtime/blob/c14b6376295848d4fb5bd4fb53b83e183b4e244a/dist/modules/stores/formatters.js#L16

cibernox commented 2 years ago

That almost certainly means you haven't hooked up the compiler part of the library properly and because of that strings haven't been transformed into functions. Is this a sveltekit project? Take a look at this file on a sample app for reference: https://github.com/cibernox/sample-app-svelte-intl-precompile/blob/main/svelte.config.js

Civile commented 2 years ago

Yes, it's a svelteKit project. Actually I just took a look at my svelte.config.js and this is what I have at the moment. It's similar to what you showed me.

Screenshot 2021-11-18 at 23 29 43
cibernox commented 2 years ago

I suspect the alias '$locales': path.resolve('./src/locales') is the one messing thing. Also per your configuration svelte-intl-precompile expects your locales to be in /locales, not /src/locales

cibernox commented 2 years ago

If that's the case you've proven that I should add some console warning if the specified locales folder doesn't exist instead of silently doing nothing.

Civile commented 2 years ago

Yes, a console warning would be ideal.

Ok, I think the problem was solved with the instructions you gave me, but in part. Because now I'm getting the error already reported below. So parameter substitution still doesn't work.

I am on a Macbook. Issue: https://github.com/cibernox/svelte-intl-precompile/issues/10

cibernox commented 2 years ago

I checked and under normal circumstances the app already complaints if there aren't any translation in the specified folder as soon as you try to import them.

Your scenario was rather unusual because the fact that you had already defined an alias for src/locales (I've just learned that user-defined aliases take precedence, although makes sense) means you never actually imported the locales so the library never kicked in and it didn't have a chance to warn you.

I'm going to close this issue and continue on #10