Values not working with Routify

[Reikooters]

Hi there, just trying out your library but I'm a bit confused as to what I've missed.

The problem I'm having is that the value placeholders aren't being populated. i.e. the text shown is the literal "Welcome back, {name}" rather than replacing {name} with the value I passed in.

I'm actually using Routify v2, not SvelteKit - does that matter? Note that svelte-i18n works fine. Testing with just an empty Routify project to try it out, not trying to add this to an existing application. I've never used SvelteKit before.

Here are the steps I followed to reproduce it.

Made a new routify project and installed this dependency

mkdir myapp
cd myapp
npx @roxi/routify init

npm install svelte-intl-precompile

Version of svelte-intl-precompile installed is 0.9.2.

As per the documentation ( https://svelte-intl-precompile.com/en/docs/getting-started ), in my vite.config.js I've added precompileIntl as below:

/vite.config.js

import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';
import precompileIntl from "svelte-intl-precompile/sveltekit-plugin";

export default defineConfig({
  server: {
    port: 5000,
  },

  plugins: [
    svelte(),
    precompileIntl("locales"),
  ],
});

/src/App.svelte:

<script>
  import { Router } from "@roxi/routify";
  import { routes } from "../.routify/routes";
  import {
    register,
    init,
    getLocaleFromNavigator,
    isLoading
  } from "svelte-intl-precompile";

  register("en", () => import("./locales/en.json"));
  register("es", () => import("./locales/es.json"));

  init({
    fallbackLocale: "en",
    initialLocale: getLocaleFromNavigator()
  });
</script>

{#if $isLoading}
  <p>Please wait...</p>
{:else}
  <Router {routes} />
{/if}

/src/locales/en.json (copied content from the docs)

{
  "page.title": "Svelte Intl Precompile Docs",
  "login-success-msg": "Welcome back, {name}",
  "transfer-received": "You received {amount, number, currency} at {wireDate, time, short} on {wireDate, date, long}"
}

/src/locales/es.json (same content)

{
  "page.title": "Svelte Intl Precompile Docs",
  "login-success-msg": "Welcome back, {name}",
  "transfer-received": "You received {amount, number, currency} at {wireDate, time, short} on {wireDate, date, long}"
}

/src/pages/index.svelte

<script>
  import { t } from "svelte-intl-precompile";
</script>

<h1>{$t('login-success-msg', { values: { name: 'friend' } })}</h1>
<h1>{$t('page.title')}</h1>

Then run and access localhost:5000

npm run dev

The text for "page.title" appears fine as it doesn't need any values. However "login-success-msg" outputs the literal "Welcome back, {name}" without replacing {name} with "friend".

Not sure if it's some incompatibility with Routify or I've missed something. Let me know if there's a way I can give any additional information to troubleshoot.

This is a new project I'm working on and it's my first time using svelte-i18n as well - I came across svelte-intl-precompile via the issues in that repository. For now I'll use svelte-i18n to get started, but this project looks promising so hope to switch over later.

[cibernox]

Can you change your

  register("en", () => import("./locales/en.json"));
  register("es", () => import("./locales/es.json"));

to

  register("en", () => import("$locales/en"));
  register("es", () => import("$locales/es"));

? Since you are using vite, the info in https://svelte-intl-precompile.com/en/docs/configuration should work for you. In fact calling registerAll is what I recommend unless you have a reason not to.

[cibernox]

Closing this due to inactivity. Feel free to reopen if still relevant.