{"id":15064347,"url":"https://github.com/enoy19/svelte-lang","last_synced_at":"2026-02-22T09:39:55.099Z","repository":{"id":257476465,"uuid":"858395024","full_name":"enoy19/svelte-lang","owner":"enoy19","description":"svelte-lang is an i18n library for Svelte that simplifies multilingual support. It offers a straightforward API for managing translations, supports parameterized strings, autocompletion, and integrates with Svelte stores for reactive language handling. Features include automatic language detection, making it easy to build global applications.","archived":false,"fork":false,"pushed_at":"2024-09-16T21:06:03.000Z","size":20,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-29T00:46:52.669Z","etag":null,"topics":["i18n","internationalization","l10n","localization","multilingual","svelte","svelte-library","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enoy19.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-16T20:21:47.000Z","updated_at":"2024-10-19T21:39:52.000Z","dependencies_parsed_at":"2024-09-17T01:44:08.895Z","dependency_job_id":"c274327c-f6af-44b7-ba71-6781e0e89e54","html_url":"https://github.com/enoy19/svelte-lang","commit_stats":null,"previous_names":["enoy19/svelte-lang"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/enoy19/svelte-lang","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enoy19%2Fsvelte-lang","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enoy19%2Fsvelte-lang/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enoy19%2Fsvelte-lang/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enoy19%2Fsvelte-lang/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enoy19","download_url":"https://codeload.github.com/enoy19/svelte-lang/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enoy19%2Fsvelte-lang/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29708363,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T05:59:28.568Z","status":"ssl_error","status_checked_at":"2026-02-22T05:58:46.208Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["i18n","internationalization","l10n","localization","multilingual","svelte","svelte-library","sveltekit"],"created_at":"2024-09-25T00:15:54.762Z","updated_at":"2026-02-22T09:39:55.079Z","avatar_url":"https://github.com/enoy19.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-lang\n\nAn internationalization (i18n) library for Svelte applications, designed to make multilingual support simple and efficient.\n\n## Features\n\n- **Simple Setup**: Easily integrate with Svelte applications.\n- **Template Literal Translations**: Use template literals for translations, keeping code clean and readable.\n- **Parameterized Translations**: Support dynamic parameters within translation strings.\n- **Language Persistence**: Optionally persist the selected language in [localstorage](https://github.com/joshnuss/svelte-persisted-store).\n- **Automatic Language Detection**: Detect user language preferences from the browser.\n- **Inline Parameters**: Support inline parameters in translation keys.\n- **Svelte Stores Integration**: Uses Svelte stores for reactive language and translation handling.\n\n## Installation\n\n```bash\nnpm install svelte-lang\n```\n\n## How to Use\n\n### Setup Translations\n\nCreate translation files for each language in your project.\n\n**Example: English Translations (`en.ts`)**\n\n```typescript\n// src/lib/i18n/translations/en.ts\nimport { t, p } from 'svelte-lang';\n\nexport const en = {\n  app: t`svelte-lang`,\n  'Something went wrong': t`Something went wrong`,\n  'Welcome $name': t`Welcome ${p('name')}`\n} as const;\n```\n\n**Example: German Translations (`de.ts`)**\n\n```typescript\n// src/lib/i18n/translations/de.ts\nimport { t, p } from 'svelte-lang';\n\nexport const de = {\n  app: t`svelte-lang`,\n  'Something went wrong': t`Etwas ist schief gelaufen`,\n  'Welcome $name': t`Willkommen ${p('name')}`\n} as const;\n```\n\n### Initialize i18n\n\nSet up the i18n configuration in your project.\n\n```typescript\n// src/lib/i18n/index.ts\nimport { setupI18n } from 'svelte-lang';\nimport { en } from './translations/en';\nimport { de } from './translations/de';\n\nexport const translations = {\n  en,\n  de\n} as const;\n\nexport const { t, language, supportedLanguages, tUnsafe, initLanguage } = setupI18n(\n  translations,\n  'en', // Default language\n  { languagePersisted: true } // Persist language selection in localstorage\n);\n```\n\n### Update `app.d.ts`\n\nEnsure that the `language` property is available in the `App.Locals` interface.\n\n```typescript\n// src/app.d.ts\ndeclare global {\n  namespace App {\n    interface Locals {\n      language: string;\n    }\n  }\n}\n\nexport {};\n```\n\n### Implement Language Detection Hook\n\nUse a server hook to detect and set the user's preferred language.\n\n```typescript\n// src/hooks.server.ts\nimport { translations } from '$lib/i18n';\nimport { i18nHook } from 'svelte-lang';\n\nexport const handle = i18nHook(translations, 'en');\n```\n\n#### Add to existing Hook\n\n```typescript\n// src/hooks.server.ts\nimport { translations } from '$lib/i18n';\nimport { i18nHook } from 'svelte-lang';\nimport { sequence } from '@sveltejs/kit/hooks';\nimport { anotherHook } from './anotherHook';\n\n// Combine multiple hooks\nexport const handle = sequence(\n  i18nHook(translations, 'en'),\n  anotherHook\n  // Add more hooks as needed\n);\n```\n\n### Initialize Language in Layout\n\nSet the initial language in your root layout.\n\n```svelte\n\u003c!-- src/routes/+layout.svelte --\u003e\n\u003cscript lang=\"ts\"\u003e\n  import { initLanguage } from '$lib/i18n';\n  import type { LayoutData } from './$types';\n\n  export let data: LayoutData;\n\n  initLanguage(data.language);\n\u003c/script\u003e\n\n\u003cslot /\u003e\n```\n\n```typescript\n// src/routes/+layout.server.ts\nimport type { LayoutServerLoad } from './$types';\n\nexport const load: LayoutServerLoad = async ({ locals }) =\u003e {\n  return { language: locals.language };\n};\n```\n\n### Use Translations in Components\n\nUse the `t` function to retrieve translations in your Svelte components.\n\n```svelte\n\u003c!-- src/routes/+page.svelte --\u003e\n\u003cscript lang=\"ts\"\u003e\n  import { language, supportedLanguages, t, tUnsafe } from '$lib/i18n';\n\n  let name = 'John';\n  let dynamicKey = 'app';\n  let inlineParamsKey = 'Welcome $name({\"name\": \"John\"})';\n\u003c/script\u003e\n\n\u003cmain\u003e\n  \u003ch1\u003e{$t('app')}\u003c/h1\u003e\n\n  \u003cdiv\u003e\n    \u003clabel for=\"language\"\u003eSelect Language:\u003c/label\u003e\n    \u003cselect id=\"language\" bind:value={$language}\u003e\n      {#each supportedLanguages as lang}\n        \u003coption value={lang}\u003e{lang}\u003c/option\u003e\n      {/each}\n    \u003c/select\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003clabel for=\"name\"\u003eName:\u003c/label\u003e\n    \u003cinput id=\"name\" type=\"text\" bind:value={name} /\u003e\n    \u003cp\u003e{$t('Welcome $name', { name })}\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003ch2\u003eDynamic Key Translation:\u003c/h2\u003e\n    \u003clabel for=\"dynamic-key\"\u003eKey:\u003c/label\u003e\n    \u003cinput id=\"dynamic-key\" type=\"text\" bind:value={dynamicKey} /\u003e\n    \u003cp\u003e{$tUnsafe(dynamicKey)}\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003ch2\u003eInline Parameters:\u003c/h2\u003e\n    \u003clabel for=\"inline-params-key\"\u003eKey:\u003c/label\u003e\n    \u003cinput id=\"inline-params-key\" type=\"text\" bind:value={inlineParamsKey} /\u003e\n    \u003cp\u003e{$tUnsafe(inlineParamsKey)}\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/main\u003e\n```\n\n### Accessing Translations with Parameters\n\nTo include dynamic parameters in your translations, use the `p` function when defining translations and pass the parameters when retrieving them.\n\n**Defining a Translation with Parameters**\n\n```typescript\n// In your translation file\n'Welcome $name': t`Welcome ${p('name')}`,\n```\n\n**Retrieving a Translation with Parameters**\n\n```svelte\n\u003cp\u003e{$t('Welcome $name', { name: 'Alice' })}\u003c/p\u003e\n```\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request for any bugs or feature requests.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenoy19%2Fsvelte-lang","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenoy19%2Fsvelte-lang","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenoy19%2Fsvelte-lang/lists"}