Can we use interpolation, pluralization and formatters with SvelteKit and inlang-sdk yet?

[aakash14goplani]

Hello @ivanhofer @samuelstroschein @NilsJacobsen

Can we implement interpolation, pluralization and formatters with SvelteKit and inlang-sdk yet?

I am experimenting with inlang-sdk and SvelteKit and encountered few setbacks for which I was not able to find relevant information on internet.

1. I was not able to integrate typesafe-i18n into SDK, error encountered:

   H [Error]: The inlang.config.js is invalid.
   # The following errors occurred during the setup of plugins:
   None ✅
   # The following errors occurred during the validation of the config:
   Unexpected token (14:2)
   ---
   If plugins return errors, chances are high that the plugin errors are the root cause for the config errors. Try to fix the plugin errors first.
      at Sr (file:///home/projects/sveltekit-i18n-inlang-sdk/node_modules/@inlang/sdk-js/dist/adapter-sveltekit/index.js:81:470)
      at async eval (file:///home/projects/sveltekit-i18n-inlang-sdk/node_modules/@inlang/sdk-js/dist/adapter-sveltekit/index.js:83:1729)
   

2. Since typesafe-i18n integration was not possible, is there any alternative to implement pluralization, interpolation and formatting (date / time / currency ) within inlang-sdk?

Minimal reproducible example: https://stackblitz.com/edit/sveltekit-i18n-inlang-sdk?file=inlang.config.js

[samuelstroschein]

Hi @aakash14goplani 👋,

Can we implement interpolation, pluralization and formatters with SvelteKit and inlang-sdk yet?

interpolation = yes, pluralization = no, formatters = no.

The SDK is in alpha (@inlang/website can someone mention that on the website?). Pluralization and formatters are coming soonish. If you need them now, you should stick with typesafe-i18n.

I was not able to integrate typesafe-i18n into SDK, error encountered:

No need to integrate typesafe-i18n 'into the SDK'. The SDK is an alternative to typesafe-i18n but inlang can work with either typesafe-i18n, the inlang SDK, or many other i18n libraries.

@ivanhofer, I forked the reproduction with a minimal typesafe-i18n plugin. The error stays identical. Seems like a bug in the typesafe-i18n plugin? See https://stackblitz.com/edit/sveltekit-i18n-inlang-sdk-snn8ys?file=src%2Flib%2Fi18n%2Fhi%2Findex.ts

[ivanhofer]

I'll take a look at the plugin in the coming days.

[aakash14goplani]

Hello @samuelstroschein

Thanks for super-quick reply. Can you please explain me how would I implement interpolation by considering below example:

en.json

{
   "hi": "Hello Mr. You're visitor number {n}"
}

+page.svelte

<p>{i('hi', { n: 4 })}</p> <!-- This does not works for me -->

[ivanhofer]

@aakash14goplani here is an example with interpolation.
I'm assuming you use the @inlang/plugin-json and still need to configure the variableReferencePattern.

[ivanhofer]

@inlang/plugins this is now the second issue with the variables.. do we still don't want to set this as a default option?

[samuelstroschein]

@ivanhofer the sdk-js should work without the plugin-json, that's the root of a lot of evil :)

[ivanhofer]

It does! variableReferencePattern is a config option for the json-plugin and I would set it as a default there.

[samuelstroschein]

It does! variableReferencePattern is a config option for the json-plugin and I would set it as a default there.

I see. We can't set a default though. {} is not universally the standard for variable references. i18next uses {{}} for example. The bottom line is: Don't use the json plugin if another library focused plugin exist.

[aakash14goplani]

Also @samuelstroschein , one last query, why are we not supporting node versions below 18?
My computer has v16.x installed and I was not able to configure inlang via CLI and had to do manual configuration on stackblitz!

[samuelstroschein]

Inlang needs to run in the browser. Node 18 introduced lots of browser compatible APIs. Supporting Node 16 lead to several bugs that lead to the decision that we only support Node 18 and above

[felixhaeberle]

@aakash14goplani What holds you back on installing node v18?
The current LTS is also v18.17.0.

There is n for example, a super convenient & fast way to switch between node version on your OS. Link: https://github.com/tj/n

[aakash14goplani]

Hey @felixhaeberle my enterprise architecture is at v16, but that's less of a concern, we can easily upgrade it. Anyways, reading comments above, it is evident that, I should take a brief pause until the SDK is stable enough for production use.

[aakash14goplani]

@ivanhofer - I was able to complete the implementation post adding variableReferencePattern. Thanks for suggestion.

Just one feedback from my end, I came to know about this SDK after reading your Reddit post. In that post, you have mentioned to follow example which personally I didn't found helpful as compared with the latest one that you shared today!

Taking this learning, I'll write a blogpost soon mentioning step-by-step approach required in setting SDK with SvelteKit and its limitations (for now)

[ivanhofer]

Which reddit post are you talking about? The link seems wrong.
The first link shows an i18n setup with typesafe-i18n and the second one a setup with the inlang SDK. Those are two completely different projects and examples.

[aakash14goplani]

https://www.reddit.com/r/sveltejs/comments/11ydtui/sveltekit_and_i18n_lets_finally_solve_this_never/?utm_source=share&utm_medium=web2x&context=3

[ivanhofer]

You are able to make it work right now, but the experience is far from ideal. You need to deeply know about the i18n library and SvelteKit to not introduce bugs.

I just mentioned that it is possible to use i18n at the moment as there exist some libraries out there.
But we want to make the whole process simpler and that's why we create the inlang SDK.

And you saying that you find the second example (the one with the inlang SDK) more useful, means that we are probably going in the right direction.

[aakash14goplani]

Exactly. Over the past 2 weeks I've been rigorously experimenting with "svelte-i18n", "sveltekit-i18n", "typesafe-i18n", "i18nnext" and "inlang". This is how I rank them based on my personal view and learnings: "inlang" (just needs more polishing to support features that are in typesafe) -> typesafe-i18n -> sveltekit-i18n -> i18nnext -> svelte-i18n

[ivanhofer]

If you want a flexible, fully featured solution NOW, choose typesafe-i18n. If it is a not so critical application and you want to give feedback, choose inlang :)