@tolgee/svelte 5.29.1 → 5.29.3

package/README.md

@@ -1,7 +1,7 @@
-<!-- This file was generated using pnpm generate-readmes script 
-        
+<!-- This file was generated using pnpm generate-readmes script
+
         Don't edit this file. Edit the README.md.njk. Macros can be found in readmeMacros/macros.njk
-        
+
         -->
 
 <h1 align="center" style="border-bottom: none">
@@ -28,6 +28,7 @@ Tolgee is an open-source alternative to Crowdin, Phrase, or Lokalise with its ve
 [![github stars](https://img.shields.io/github/stars/tolgee/tolgee-js?style=social&label=Tolgee%20JS)](https://github.com/tolgee/tolgee-js)
 [![github stars](https://img.shields.io/github/stars/tolgee/server?style=social&label=Tolgee%20Server)](https://github.com/tolgee/server)
 [![Github discussions](https://img.shields.io/github/discussions/tolgee/tolgee-platform)](https://github.com/tolgee/tolgee-platform/discussions)
+
 </div>
 
 <div align="center">
@@ -40,27 +41,24 @@ Tolgee is an open-source alternative to Crowdin, Phrase, or Lokalise with its ve
 
 </div>
 
-
-
 # What is Tolgee for Svelte?
+
 Svelte integration library of Tolgee. With this package, it's super simple to add i18n to your Svelte app!
 For more information about using Tolgee with Svelte, visit the [docs 📖](https://tolgee.io/integrations/svelte).
 
 Localize (translate) your Svelte or SvelteKit projects to multiple languages with Tolgee.
 Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧
 
-
 ## Quick links
+
 - [Tolgee for Svelte docs](https://tolgee.io/js-sdk/integrations/svelte/overview)
 - [Tolgee JS SDK docs](https://tolgee.io/js-sdk)
 - [Tolgee Website](https://tolgee.io)
-    - Product (Learn more about the great features)
-        - [Dev tools](https://tolgee.io/features/dev-tools)
-        - [Translation assistance](https://tolgee.io/features/translation-assistance)
-        - [Collaboration](https://tolgee.io/features/collaboration)
+  - Product (Learn more about the great features)
+    - [Dev tools](https://tolgee.io/features/dev-tools)
+    - [Translation assistance](https://tolgee.io/features/translation-assistance)
+    - [Collaboration](https://tolgee.io/features/collaboration)
 - [Tolgee platform docs](https://tolgee.io/platform)
-  
-
 
 ## Installation
 
@@ -68,31 +66,25 @@ Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳
 npm install @tolgee/svelte
 ```
 
-
 Then use the library in your app:
 
 ```svelte
 <script lang="ts">
-  import {
-    TolgeeProvider,
-    Tolgee,
-    SveltePlugin,
-    FormatSimple,
-  } from '@tolgee/svelte';
-
-  const tolgee = Tolgee()
-    .use(SveltePlugin())
-    .use(FormatSimple())
-    .init({
-      apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
-      apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
-      language: 'en',
-    });
+	import { TolgeeProvider, Tolgee, SveltePlugin, FormatSimple } from '@tolgee/svelte';
+
+	const tolgee = Tolgee()
+		.use(SveltePlugin())
+		.use(FormatSimple())
+		.init({
+			apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
+			apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
+			language: 'en'
+		});
 </script>
 
 <TolgeeProvider {tolgee}>
-  <div slot="fallback">Loading...</div>
-  <slot />
+	<div slot="fallback">Loading...</div>
+	<slot />
 </TolgeeProvider>
 ```
 
@@ -104,7 +96,7 @@ To translate texts using Tolgee Svelte integration, you can use `T` component or
 
 ```svelte
 <script>
-  import { T } from '@tolgee/svelte';
+	import { T } from '@tolgee/svelte';
 </script>
 
 <T keyName="key" defaultValue="This is default" />
@@ -116,9 +108,9 @@ The `getTranslate` function returns a store containing the function, which trans
 
 ```svelte
 <script>
-  import { getTranslate } from '@tolgee/svelte';
+	import { getTranslate } from '@tolgee/svelte';
 
-  const { t } = getTranslate();
+	const { t } = getTranslate();
 </script>
 
 {$t('this_is_a_key', { key: 'value', key2: 'value2' })}
@@ -130,29 +122,25 @@ To change the current language, use `getTolgee` method. For example, you can bin
 
 ```svelte
 <script lang="ts">
-  import { getTolgee } from '@tolgee/svelte';
+	import { getTolgee } from '@tolgee/svelte';
 
-  const tolgee = getTolgee(['language']);
+	const tolgee = getTolgee(['language']);
 
-  function handleLanguageChange(e) {
-    $tolgee.changeLanguage(e.currentTarget.value);
-  }
+	function handleLanguageChange(e) {
+		$tolgee.changeLanguage(e.currentTarget.value);
+	}
 </script>
 
-<select value={$tolgee.getLanguage()} on:change={handleLanguageChange}>
-  ...
-</select>
+<select value={$tolgee.getLanguage()} on:change={handleLanguageChange}> ... </select>
 ```
 
-
 ## Prerequisites
 
 1. You have some Svelte-based project
 2. You have generated an API key from [Tolgee Cloud](https://app.tolgee.io) or a self-hosted Tolgee instance.
-   
-
 
 ## Why use Tolgee?
+
 Tolgee saves a lot of time you would spend on localization tasks otherwise. It enables you to provide perfectly translated software.
 
 ### Features
@@ -166,56 +154,54 @@ Tolgee saves a lot of time you would spend on localization tasks otherwise. It e
 ![Frame 47](https://user-images.githubusercontent.com/18496315/188637819-ac4eb02d-7859-4ca8-9807-27818a52782d.png)
 Read more on the [Tolgee website](https://tolgee.io)
 
-
 ## Development
 
 We welcome your PRs.
 
 To develop the package locally:
+
 1. Clone [the repository](https://github.com/tolgee/tolgee-js)
 1. Install the packages in the repository root
+
 ```
 pnpm install
 ```
 
-
 1. Run the development script
+
 ```
 pnpm develop:svelte
 ```
+
 This runs the development suite of this monorepo for the `svelte` integration. The changes in each dependency package are
 automatically built and propagated to the test application, which you can open and play within the browser.
 
-
-
-
 ### Testing
 
 To run Jest tests of this package, execute
+
 ```
 npm run test
 ```
-In the `/packages/svelte` directory.
-
-
 
+In the `/packages/svelte` directory.
 
 ### End-to-end (e2e) testing
+
 To run the e2e tests, simply execute
+
 ```
 pnpm run e2e run svelte
 ```
 
 To open and play with e2e tests, run:
+
 ```
 pnpm run e2e open svelte
 ```
 
-
-
 ## Contributors
 
 <a href="https://github.com/tolgee/tolgee-platform/graphs/contributors">
   <img alt="contributors" src="https://contrib.rocks/image?repo=tolgee/tolgee-js"/>
 </a>
-

package/{GlobalContextPlugin.d.ts → dist/GlobalContextPlugin.d.ts}

@@ -1,4 +1,4 @@
 import type { TolgeePlugin } from '@tolgee/web';
 import type { TolgeeSvelteContext } from './types';
 export declare const GlobalContextPlugin: () => TolgeePlugin;
-export declare function getGlobalContext(): TolgeeSvelteContext;
+export declare function getGlobalContext(): TolgeeSvelteContext | undefined;

package/dist/T.svelte

@@ -0,0 +1,21 @@
+<script>import getTranslateInternal from "./getTranslateInternal";
+export let keyName;
+export let params = void 0;
+export let noWrap = false;
+export let defaultValue = void 0;
+export let ns = void 0;
+export let language = void 0;
+if (!keyName) {
+  console.error("Missing keyName prop!");
+}
+const { t } = getTranslateInternal();
+</script>
+
+{$t({
+  key: keyName,
+  params: params,
+  noWrap: noWrap,
+  defaultValue: defaultValue,
+  ns,
+  language,
+})}

package/dist/T.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { TranslationKey } from '@tolgee/web';
+declare const __propDef: {
+    props: {
+        keyName: TranslationKey;
+        params?: Record<string, unknown> | undefined;
+        noWrap?: boolean | undefined;
+        defaultValue?: undefined;
+        ns?: string | undefined;
+        language?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TProps = typeof __propDef.props;
+export type TEvents = typeof __propDef.events;
+export type TSlots = typeof __propDef.slots;
+export default class T extends SvelteComponent<TProps, TEvents, TSlots> {
+}
+export {};

package/{TolgeeProvider.svelte → dist/TolgeeProvider.svelte}

@@ -1,14 +1,14 @@
-<script>import { onDestroy, onMount, setContext } from 'svelte';
+<script>import { onDestroy, onMount, setContext } from "svelte";
 export let tolgee;
-export let fallback = undefined;
+export let fallback = void 0;
 let isLoading = !tolgee.isLoaded();
-setContext('tolgeeContext', {
-    tolgee,
+setContext("tolgeeContext", {
+  tolgee
 });
 onMount(() => {
-    tolgee.run().finally(() => {
-        isLoading = false;
-    });
+  tolgee.run().finally(() => {
+    isLoading = false;
+  });
 });
 onDestroy(tolgee.stop);
 </script>

package/{TolgeeProvider.svelte.d.ts → dist/TolgeeProvider.svelte.d.ts}

@@ -1,9 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { TolgeeInstance } from '@tolgee/web';
 declare const __propDef: {
     props: {
         tolgee: TolgeeInstance;
-        fallback?: any;
+        fallback?: undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -12,10 +12,12 @@ declare const __propDef: {
         default: {};
         fallback: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TolgeeProviderProps = typeof __propDef.props;
 export type TolgeeProviderEvents = typeof __propDef.events;
 export type TolgeeProviderSlots = typeof __propDef.slots;
-export default class TolgeeProvider extends SvelteComponentTyped<TolgeeProviderProps, TolgeeProviderEvents, TolgeeProviderSlots> {
+export default class TolgeeProvider extends SvelteComponent<TolgeeProviderProps, TolgeeProviderEvents, TolgeeProviderSlots> {
 }
 export {};

package/dist/__integration/components/Namespaces.svelte

@@ -0,0 +1,19 @@
+<script>import { getTranslate } from "../../index";
+const { isLoading, t } = getTranslate("test");
+</script>
+
+<div>
+  {#if $isLoading}
+    <div data-testid="loading">Loading...</div>
+  {/if}
+  <div data-testid="test">{$t('test')}</div>
+  <div data-testid="test_english_fallback">
+    {$t('test_english_fallback')}
+  </div>
+  <div data-testid="non_existant">
+    {$t('non_existant', 'Non existant')}
+  </div>
+  <div data-testid="ns_fallback">
+    {$t('fallback', { ns: 'invalid' })}
+  </div>
+</div>

package/dist/__integration/components/Namespaces.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type NamespacesProps = typeof __propDef.props;
+export type NamespacesEvents = typeof __propDef.events;
+export type NamespacesSlots = typeof __propDef.slots;
+export default class Namespaces extends SvelteComponent<NamespacesProps, NamespacesEvents, NamespacesSlots> {
+}
+export {};

package/dist/__integration/components/TestGetTolgee.svelte

@@ -0,0 +1,14 @@
+<script>import { getTolgee } from "../../getTolgee";
+export let events = [];
+const tolgee = getTolgee(events);
+</script>
+
+<div>
+  <div data-testid="language">{String($tolgee.getLanguage())}</div>
+  <div data-testid="pendingLanguage">{String($tolgee.getPendingLanguage())}</div>
+  <div data-testid="fetching">{String($tolgee.isFetching())}</div>
+  <div data-testid="loading">{String($tolgee.isLoading())}</div>
+  <div data-testid="initialLoad">{String($tolgee.isInitialLoading())}</div>
+  <div data-testid="running">{String($tolgee.isRunning())}</div>
+</div>
+

package/dist/__integration/components/TestGetTolgee.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { TolgeeEvent } from "@tolgee/web";
+declare const __propDef: {
+    props: {
+        events?: TolgeeEvent[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TestGetTolgeeProps = typeof __propDef.props;
+export type TestGetTolgeeEvents = typeof __propDef.events;
+export type TestGetTolgeeSlots = typeof __propDef.slots;
+export default class TestGetTolgee extends SvelteComponent<TestGetTolgeeProps, TestGetTolgeeEvents, TestGetTolgeeSlots> {
+}
+export {};

package/dist/__integration/components/TestProviderComponent.svelte

@@ -0,0 +1,18 @@
+<script>import { TolgeeProvider, T } from "../..";
+export let tolgee;
+</script>
+
+<TolgeeProvider {tolgee}>
+  <div>
+    <div data-testid="hello_world">
+      <T keyName="hello_world" />
+    </div>
+    <div data-testid="english_fallback">
+      <T keyName="english_fallback" />
+    </div>
+    <div data-testid="non_existant">
+      <T keyName="non_existant" defaultValue="Default value" />
+    </div>
+  </div>
+  <span slot="fallback">Loading...</span>
+</TolgeeProvider>

package/dist/__integration/components/TestProviderComponent.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { TolgeeInstance } from '@tolgee/web';
+declare const __propDef: {
+    props: {
+        tolgee: TolgeeInstance;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TestProviderComponentProps = typeof __propDef.props;
+export type TestProviderComponentEvents = typeof __propDef.events;
+export type TestProviderComponentSlots = typeof __propDef.slots;
+export default class TestProviderComponent extends SvelteComponent<TestProviderComponentProps, TestProviderComponentEvents, TestProviderComponentSlots> {
+}
+export {};

package/dist/__integration/components/TestTComponent.svelte

@@ -0,0 +1,24 @@
+<script>import { T, TolgeeProvider } from "../..";
+export let tolgee;
+</script>
+
+<TolgeeProvider {tolgee}>
+  <div>
+    <div data-testid="peter_dogs">
+      <T keyName="peter_dogs" params={{ dogsCount: 5 }} />
+    </div>
+    <div data-testid="hello_world">
+      <T keyName="hello_world" />
+    </div>
+    <div data-testid="hello_world_no_wrap">
+      <T keyName="hello_world" noWrap />
+    </div>
+    <div data-testid="non_existant">
+      <T keyName="non_existant" defaultValue="Non existant" />
+    </div>
+    <div data-testid="with_language_prop">
+      <T keyName="hello_world" language="en" />
+    </div>
+  </div>
+  <span slot="fallback">Loading...</span>
+</TolgeeProvider>

package/dist/__integration/components/TestTComponent.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { TolgeeInstance } from '@tolgee/web';
+declare const __propDef: {
+    props: {
+        tolgee: TolgeeInstance;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TestTComponentProps = typeof __propDef.props;
+export type TestTComponentEvents = typeof __propDef.events;
+export type TestTComponentSlots = typeof __propDef.slots;
+export default class TestTComponent extends SvelteComponent<TestTComponentProps, TestTComponentEvents, TestTComponentSlots> {
+}
+export {};

package/dist/__integration/components/TestTranslateComponent.svelte

@@ -0,0 +1,9 @@
+<script>import { TolgeeProvider } from "../..";
+import TestTranslateComponentInside from "./TestTranslateComponentInside.svelte";
+export let tolgee;
+</script>
+
+<TolgeeProvider tolgee={tolgee}>
+  <TestTranslateComponentInside />
+  <span slot="fallback">Loading...</span>
+</TolgeeProvider>

package/dist/__integration/components/TestTranslateComponent.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { TolgeeInstance } from '@tolgee/web';
+declare const __propDef: {
+    props: {
+        tolgee: TolgeeInstance;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TestTranslateComponentProps = typeof __propDef.props;
+export type TestTranslateComponentEvents = typeof __propDef.events;
+export type TestTranslateComponentSlots = typeof __propDef.slots;
+export default class TestTranslateComponent extends SvelteComponent<TestTranslateComponentProps, TestTranslateComponentEvents, TestTranslateComponentSlots> {
+}
+export {};

package/dist/__integration/components/TestTranslateComponentInside.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { getTranslate } from '../..';
+  const { t } = getTranslate();
+</script>
+
+<div>
+  <div data-testid="peter_dogs">
+    {$t('peter_dogs', { dogsCount: 5 })}
+  </div>
+  <div data-testid="hello_world">
+    {$t('hello_world')}
+  </div>
+  <div data-testid="hello_world_no_wrap">
+    {$t({ key: 'hello_world', noWrap: true })}
+  </div>
+  <div data-testid="non_existant">
+    {$t('non_existant', 'Non existant')}
+  </div>
+</div>

package/dist/__integration/components/TestTranslateComponentInside.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  TestTranslateComponentInsideProps */
+/** @typedef {typeof __propDef.events}  TestTranslateComponentInsideEvents */
+/** @typedef {typeof __propDef.slots}  TestTranslateComponentInsideSlots */
+export default class TestTranslateComponentInside extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TestTranslateComponentInsideProps = typeof __propDef.props;
+export type TestTranslateComponentInsideEvents = typeof __propDef.events;
+export type TestTranslateComponentInsideSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/__integration/mockCoreFetch.d.ts

@@ -0,0 +1,25 @@
+import 'node-fetch';
+export declare const mockCoreFetch: () => {
+    fetch: import("vitest-fetch-mock").FetchMock;
+    resolveAll: () => void;
+    currentApiKey: {
+        promise: Promise<string>;
+        resolve: () => void;
+    };
+    csTranslations: {
+        promise: Promise<string>;
+        resolve: () => void;
+    };
+    enTranslations: {
+        promise: Promise<string>;
+        resolve: () => void;
+    };
+    enTestTranslations: {
+        promise: Promise<string>;
+        resolve: () => void;
+    };
+    csTestTranslations: {
+        promise: Promise<string>;
+        resolve: () => void;
+    };
+};

package/dist/__integration/mockCoreFetch.js

@@ -0,0 +1,12 @@
+import 'node-fetch';
+import { getMocker } from '@tolgee/testing/mockData.js';
+import createFetchMock from 'vitest-fetch-mock';
+import { vi } from 'vitest';
+const fetchMocker = createFetchMock(vi);
+export const mockCoreFetch = () => {
+    const mocker = getMocker();
+    const fetch = fetchMocker.mockResponse((req) => {
+        return mocker.getDataForUrl(req.url);
+    });
+    return { ...mocker.mockData, fetch, resolveAll: mocker.resolveAll };
+};

package/dist/__testUtil/TolgeeProviderFallback.svelte

@@ -0,0 +1,7 @@
+<script>import { TolgeeProvider } from "..";
+export let tolgee;
+</script>
+
+<TolgeeProvider {tolgee} fallback="loading">
+	<div>It's rendered!</div>
+</TolgeeProvider>

package/dist/__testUtil/TolgeeProviderFallback.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { TolgeeInstance } from '@tolgee/web';
+declare const __propDef: {
+    props: {
+        tolgee: TolgeeInstance;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TolgeeProviderFallbackProps = typeof __propDef.props;
+export type TolgeeProviderFallbackEvents = typeof __propDef.events;
+export type TolgeeProviderFallbackSlots = typeof __propDef.slots;
+export default class TolgeeProviderFallback extends SvelteComponent<TolgeeProviderFallbackProps, TolgeeProviderFallbackEvents, TolgeeProviderFallbackSlots> {
+}
+export {};

package/dist/__testUtil/TolgeeProviderSlotTest.svelte

@@ -0,0 +1,10 @@
+<script>import { TolgeeProvider } from "..";
+export let tolgee;
+</script>
+
+<TolgeeProvider tolgee={tolgee}>
+  <div slot="fallback">loading</div>
+  <div slot="default">
+    It's rendered!
+  </div>
+</TolgeeProvider>

package/dist/__testUtil/TolgeeProviderSlotTest.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { TolgeeInstance } from "@tolgee/web";
+declare const __propDef: {
+    props: {
+        tolgee: TolgeeInstance;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TolgeeProviderSlotTestProps = typeof __propDef.props;
+export type TolgeeProviderSlotTestEvents = typeof __propDef.events;
+export type TolgeeProviderSlotTestSlots = typeof __propDef.slots;
+export default class TolgeeProviderSlotTest extends SvelteComponent<TolgeeProviderSlotTestProps, TolgeeProviderSlotTestEvents, TolgeeProviderSlotTestSlots> {
+}
+export {};