@svelte-dev/i18n

npm add @svelte-dev/i18n

import { browser } from '$app/environment';
import { navigating } from '$app/stores';
import { addMessages, locale } from '@svelte-dev/i18n';
 
const translations = import.meta.glob(`../i18n/*.ts`, { eager: true });
 
export const supportedLanguages = [];
export const fallbackLng = 'zh';
 
Object.entries(translations).forEach(([name, mod]) => {
  const lang = name.replace(/.+\/(.+)\.ts/, '$1');
  addMessages(lang, mod.dict);
  supportedLanguages.push(lang);
});
 
if (browser) {
  const path = new URL(location.href).pathname.split('/');
  const lang = supportedLanguages.includes(path?.[1]) ? path?.[1] : fallbackLng;
  locale.set(lang);
 
  navigating.subscribe((params) => {
    if (params?.to?.params?.lang) {
      locale.set(params.to?.params?.lang);
    }
  });
}

// src/i18n/en.ts
import type { I18nDict } from '@svelte-dev/i18n';
 
export const dict: I18nDict = {
  __name: 'English',
  __flag: '🇺🇸',
  __unicode: '1f1fa-1f1f8',
  __code: 'EN',
  __direction: 'ltr',
  __status: 'beta',
  site: {
    title: 'Hello World'
  },
  common: {
    get_started: 'Get Started',
    npm_downloads: 'NPM Downloads'
  }
};

import type { ParamMatcher } from '@sveltejs/kit';
import { getLocales } from '@svelte-dev/i18n';
 
export const match: ParamMatcher = (param) => {
  return getLocales().includes(param);
};

import '$lib/i18n':

<script>
  import { t } from '@svelte-dev/i18n';
</script>
 
{$t('message')}