opral / inlang-paraglide-js

Tree-shakable i18n library build on the inlang ecosystem.
https://inlang.com/m/gerre34r/library-inlang-paraglideJs
54 stars 1 forks source link

storing raw JSON values #248

Open TheRealSeber opened 1 month ago

TheRealSeber commented 1 month ago

Hey,

I am just curious if such functionalty as this exists in the paraglide-js

I would be interested in storing JSON structures which change dependingly on the language of course. Example use case:

{#each features as feature}
    <div class="relative px-6">
        <h1
            class="flex flex-col items-center text-center text-xl font-semibold leading-7 text-neutral-700"
        >
            <Svg name={feature.iconName} />
            {feature.title}
        </h1>
        <dd class="m-2 text-center text-lg leading-7 text-neutral-600">
            {feature.description}
        </dd>
    </div>
{/each}

Assuming I have 10 or more features seems to be pointless for me to store every feature as standalone string

samuelstroschein commented 1 month ago

No, such functionality doesn't exist in Paraglide JS but isn't the $json function just JSON.parse()?

  1. Store the JSON as a string in a message
  2. Call JSON.parse(message)

Example message that stores a JSON as string

blue_moon = '[{ iconName, title, description }]'

Calling the message and parse it as json

const features = JSON.parse(m.blue_moon())

for (const feature of features) {
  feature.iconName
  feature.title
  // ...
}
TheRealSeber commented 1 month ago

Oh well, if that's just gonna work, then that's fair enough. However I think that it would be nice to have thing as storing json values as strings is not pretty. Idk tho how everything works under the hood, so can't tell if it's even possible for you to add it.

samuelstroschein commented 1 month ago

A utility function could surely be added, but I am wary of implications in an end-to-end localization process.

If the workaround works, can you close the issue for now?

TheRealSeber commented 1 month ago

Reopening the issue as the workaround doesn't work @samuelstroschein

e.g. message snippet I used: "landing_page_features": "[{\"title\":\"Reliability and Security\",\"iconName\":\"shieldIcon\",\"description\":\"We prioritize (...)

Output function of paraglide js after compilation: image

It makes sence as paraglide expects for the data in {} to be a parameter

samuelstroschein commented 1 month ago

Yep certainly so. Good catch.

Small clarification: Paraglide JS compiles what a plugin imported. Hence, it's the message format plugin which interprets {} as variable expressions. Expressions that Paraglide compiles.

I recommend to split the json properties into messages e.g. landing_page_feature_title, landing_page_feature_icon_name, etc.

Updating the message format plugin or Paraglide JS does not make sense atm as both are on a new major version in the dev branch waiting for lix 1.0 to be released.