@tolgee/svelte 6.2.4 → 6.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -38
- package/README.njk.md +95 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<!-- This file was generated using pnpm generate-readmes script
|
|
2
|
-
|
|
1
|
+
<!-- This file was generated using pnpm generate-readmes script
|
|
2
|
+
|
|
3
3
|
Don't edit this file. Edit the README.md.njk. Macros can be found in readmeMacros/macros.njk
|
|
4
|
-
|
|
4
|
+
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
7
|
<h1 align="center" style="border-bottom: none">
|
|
@@ -16,49 +16,47 @@
|
|
|
16
16
|
|
|
17
17
|
[](https://tolgee.io)
|
|
18
18
|
|
|
19
|
-
Tolgee is an open-source alternative to Crowdin, Phrase, or Lokalise
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
Tolgee is an open-source alternative to Crowdin, Phrase, or Lokalise
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
 
|
|
26
22
|
|
|
27
|
-
|
|
24
|
+
|
|
25
|
+
[](https://github.com/tolgee/tolgee-js)
|
|
26
|
+
|
|
27
|
+
[](https://github.com/tolgee/tolgee-platform)
|
|
28
|
+
[](https://github.com/tolgee/tolgee-platform/discussions)
|
|
29
|
+
[](https://hub.docker.com/repository/docker/tolgee/tolgee)
|
|
30
|
+
[](https://docs.tolgee.io/)
|
|
31
|
+
[](https://join.slack.com/t/tolgeecommunity/shared_invite/zt-2zp55d175-_agXTfKKVbf1BYXlKlmwbA)
|
|
32
|
+
[](https://dev.to/tolgee_i18n)
|
|
33
|
+
[](https://www.youtube.com/@tolgee)
|
|
34
|
+
[](https://www.linkedin.com/company/tolgee/)
|
|
35
|
+
[](https://x.com/Tolgee_i18n)
|
|
31
36
|
|
|
32
37
|
</div>
|
|
33
38
|
|
|
34
|
-
<div align="center">
|
|
35
39
|
|
|
36
|
-
[<img src="https://img.shields.io/badge/-Facebook-424549?style=social&logo=facebook" height=25 />](https://www.facebook.com/Tolgee.i18n)
|
|
37
|
-
[<img src="https://img.shields.io/badge/-Twitter-424549?style=social&logo=twitter" height=25 />](https://twitter.com/Tolgee_i18n)
|
|
38
|
-
[<img src="https://img.shields.io/badge/-Linkedin-424549?style=social&logo=linkedin" height=25 />](https://www.linkedin.com/company/tolgee)
|
|
39
|
-
|
|
40
|
-
**Become part of the family. Join [slack channel <img src="https://img.shields.io/badge/-Tolgee Comunity-424549?style=social&logo=slack" height=25 />](https://join.slack.com/t/tolgeecommunity/shared_invite/zt-195isb5u8-_RcSRgVJfvgsPpOBIok~IQ)**
|
|
41
|
-
|
|
42
|
-
</div>
|
|
43
40
|
|
|
44
41
|
# What is Tolgee for Svelte?
|
|
45
|
-
|
|
46
42
|
Svelte integration library of Tolgee. With this package, it's super simple to add i18n to your Svelte app!
|
|
47
43
|
For more information about using Tolgee with Svelte, visit the [docs 📖](https://tolgee.io/integrations/svelte).
|
|
48
44
|
|
|
49
45
|
Localize (translate) your Svelte or SvelteKit projects to multiple languages with Tolgee.
|
|
50
46
|
Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧
|
|
51
47
|
|
|
52
|
-
## Quick links
|
|
53
48
|
|
|
54
|
-
|
|
49
|
+
## Quick links
|
|
50
|
+
- [Tolgee for Angular docs](https://tolgee.io/js-sdk/5.0.0-alpha.1/integrations/svelte/installation)
|
|
55
51
|
- [Tolgee JS SDK docs](https://tolgee.io/js-sdk)
|
|
56
52
|
- [Tolgee Website](https://tolgee.io)
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
- Product (Learn more about the great features)
|
|
54
|
+
- [Dev tools](https://tolgee.io/features/dev-tools)
|
|
55
|
+
- [Translation assistance](https://tolgee.io/features/translation-assistance)
|
|
56
|
+
- [Collaboration](https://tolgee.io/features/collaboration)
|
|
61
57
|
- [Tolgee platform docs](https://tolgee.io/platform)
|
|
58
|
+
|
|
59
|
+
|
|
62
60
|
|
|
63
61
|
## Installation
|
|
64
62
|
|
|
@@ -66,6 +64,7 @@ Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳
|
|
|
66
64
|
npm install @tolgee/svelte
|
|
67
65
|
```
|
|
68
66
|
|
|
67
|
+
|
|
69
68
|
Then use the library in your app:
|
|
70
69
|
|
|
71
70
|
```svelte
|
|
@@ -134,13 +133,15 @@ To change the current language, use `getTolgee` method. For example, you can bin
|
|
|
134
133
|
<select value={$tolgee.getLanguage()} on:change={handleLanguageChange}> ... </select>
|
|
135
134
|
```
|
|
136
135
|
|
|
136
|
+
|
|
137
137
|
## Prerequisites
|
|
138
138
|
|
|
139
139
|
1. You have some Svelte-based project
|
|
140
140
|
2. You have generated an API key from [Tolgee Cloud](https://app.tolgee.io) or a self-hosted Tolgee instance.
|
|
141
|
+
|
|
141
142
|
|
|
142
|
-
## Why use Tolgee?
|
|
143
143
|
|
|
144
|
+
## Why to use Tolgee?
|
|
144
145
|
Tolgee saves a lot of time you would spend on localization tasks otherwise. It enables you to provide perfectly translated software.
|
|
145
146
|
|
|
146
147
|
### Features
|
|
@@ -154,54 +155,56 @@ Tolgee saves a lot of time you would spend on localization tasks otherwise. It e
|
|
|
154
155
|
|
|
155
156
|
Read more on the [Tolgee website](https://tolgee.io)
|
|
156
157
|
|
|
158
|
+
|
|
157
159
|
## Development
|
|
158
160
|
|
|
159
161
|
We welcome your PRs.
|
|
160
162
|
|
|
161
163
|
To develop the package locally:
|
|
162
|
-
|
|
163
164
|
1. Clone [the repository](https://github.com/tolgee/tolgee-js)
|
|
164
165
|
1. Install the packages in the repository root
|
|
165
|
-
|
|
166
166
|
```
|
|
167
167
|
pnpm install
|
|
168
168
|
```
|
|
169
169
|
|
|
170
|
-
1. Run the development script
|
|
171
170
|
|
|
171
|
+
1. Run the development script
|
|
172
172
|
```
|
|
173
173
|
pnpm develop:svelte
|
|
174
174
|
```
|
|
175
|
-
|
|
176
175
|
This runs the development suite of this monorepo for the `svelte` integration. The changes in each dependency package are
|
|
177
176
|
automatically built and propagated to the test application, which you can open and play within the browser.
|
|
178
177
|
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
179
181
|
### Testing
|
|
180
182
|
|
|
181
183
|
To run Jest tests of this package, execute
|
|
182
|
-
|
|
183
184
|
```
|
|
184
185
|
npm run test
|
|
185
186
|
```
|
|
186
|
-
|
|
187
187
|
In the `/packages/svelte` directory.
|
|
188
188
|
|
|
189
|
-
### End-to-end (e2e) testing
|
|
190
189
|
|
|
191
|
-
To run the e2e tests, simply execute
|
|
192
190
|
|
|
191
|
+
|
|
192
|
+
### End-to-end (e2e) testing
|
|
193
|
+
To run the e2e tests, simply execute
|
|
193
194
|
```
|
|
194
195
|
pnpm run e2e run svelte
|
|
195
196
|
```
|
|
196
197
|
|
|
197
198
|
To open and play with e2e tests, run:
|
|
198
|
-
|
|
199
199
|
```
|
|
200
200
|
pnpm run e2e open svelte
|
|
201
201
|
```
|
|
202
202
|
|
|
203
|
+
|
|
204
|
+
|
|
203
205
|
## Contributors
|
|
204
206
|
|
|
205
207
|
<a href="https://github.com/tolgee/tolgee-platform/graphs/contributors">
|
|
206
208
|
<img alt="contributors" src="https://contrib.rocks/image?repo=tolgee/tolgee-js"/>
|
|
207
209
|
</a>
|
|
210
|
+
|
package/README.njk.md
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{% import "../../readmeMacros/macros.njk.md" as macros %}
|
|
2
|
+
{{ macros.header('Tolgee for Svelte', 'The Tolgee i18n SDK for Svelte', packageName) }}
|
|
3
|
+
|
|
4
|
+
# What is Tolgee for Svelte?
|
|
5
|
+
Svelte integration library of Tolgee. With this package, it's super simple to add i18n to your Svelte app!
|
|
6
|
+
For more information about using Tolgee with Svelte, visit the [docs 📖](https://tolgee.io/integrations/svelte).
|
|
7
|
+
|
|
8
|
+
Localize (translate) your Svelte or SvelteKit projects to multiple languages with Tolgee.
|
|
9
|
+
Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧
|
|
10
|
+
|
|
11
|
+
{{ macros.integrationLinks('Tolgee for Angular docs', macros.v5link('integrations/svelte/installation')) }}
|
|
12
|
+
|
|
13
|
+
{{ macros.installation('svelte') }}
|
|
14
|
+
|
|
15
|
+
Then use the library in your app:
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<script lang="ts">
|
|
19
|
+
import { TolgeeProvider, Tolgee, SveltePlugin, FormatSimple } from '@tolgee/svelte';
|
|
20
|
+
|
|
21
|
+
const tolgee = Tolgee()
|
|
22
|
+
.use(SveltePlugin())
|
|
23
|
+
.use(FormatSimple())
|
|
24
|
+
.init({
|
|
25
|
+
apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
|
|
26
|
+
apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
|
|
27
|
+
language: 'en'
|
|
28
|
+
});
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<TolgeeProvider {tolgee}>
|
|
32
|
+
<div slot="fallback">Loading...</div>
|
|
33
|
+
<slot />
|
|
34
|
+
</TolgeeProvider>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Usage
|
|
38
|
+
|
|
39
|
+
To translate texts using Tolgee Svelte integration, you can use `T` component or `getTranslate` function.
|
|
40
|
+
|
|
41
|
+
### T component
|
|
42
|
+
|
|
43
|
+
```svelte
|
|
44
|
+
<script>
|
|
45
|
+
import { T } from '@tolgee/svelte';
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<T keyName="key" defaultValue="This is default" />
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### getTranslate function
|
|
52
|
+
|
|
53
|
+
The `getTranslate` function returns a store containing the function, which translates your key.
|
|
54
|
+
|
|
55
|
+
```svelte
|
|
56
|
+
<script>
|
|
57
|
+
import { getTranslate } from '@tolgee/svelte';
|
|
58
|
+
|
|
59
|
+
const { t } = getTranslate();
|
|
60
|
+
</script>
|
|
61
|
+
|
|
62
|
+
{$t('this_is_a_key', { key: 'value', key2: 'value2' })}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Changing the language
|
|
66
|
+
|
|
67
|
+
To change the current language, use `getTolgee` method. For example, you can bind it to a select value.
|
|
68
|
+
|
|
69
|
+
```svelte
|
|
70
|
+
<script lang="ts">
|
|
71
|
+
import { getTolgee } from '@tolgee/svelte';
|
|
72
|
+
|
|
73
|
+
const tolgee = getTolgee(['language']);
|
|
74
|
+
|
|
75
|
+
function handleLanguageChange(e) {
|
|
76
|
+
$tolgee.changeLanguage(e.currentTarget.value);
|
|
77
|
+
}
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
<select value={$tolgee.getLanguage()} on:change={handleLanguageChange}> ... </select>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
{{ macros.prereq('Svelte') }}
|
|
84
|
+
|
|
85
|
+
{{ macros.why() }}
|
|
86
|
+
|
|
87
|
+
## Development
|
|
88
|
+
{{ macros.developmentInstallation() }}
|
|
89
|
+
{{ macros.development('svelte') }}
|
|
90
|
+
|
|
91
|
+
{{ macros.developmentTesting('/packages/svelte') }}
|
|
92
|
+
|
|
93
|
+
{{ macros.e2eTesting('svelte') }}
|
|
94
|
+
|
|
95
|
+
{{ macros.contributors() }}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tolgee/svelte",
|
|
3
|
-
"version": "6.2.
|
|
3
|
+
"version": "6.2.5",
|
|
4
4
|
"description": "Svelte implementation for Tolgee localization framework",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"svelte": "^4.0.0 || ^5.0.0"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@tolgee/web": "6.2.
|
|
55
|
+
"@tolgee/web": "6.2.5"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@sveltejs/adapter-auto": "^3.0.0",
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
|
62
62
|
"@testing-library/jest-dom": "^6.5.0",
|
|
63
63
|
"@testing-library/svelte": "^5.2.3",
|
|
64
|
-
"@tolgee/format-icu": "6.2.
|
|
65
|
-
"@tolgee/testing": "6.2.
|
|
64
|
+
"@tolgee/format-icu": "6.2.5",
|
|
65
|
+
"@tolgee/testing": "6.2.5",
|
|
66
66
|
"@types/eslint": "^9.6.0",
|
|
67
67
|
"eslint": "^9.0.0",
|
|
68
68
|
"eslint-config-prettier": "^9.1.0",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"access": "public"
|
|
85
85
|
},
|
|
86
86
|
"sideEffects": false,
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "f5d8db7aa7963c5ea641be8664d081a9ca2566e2"
|
|
88
88
|
}
|