@verbaly/svelte 0.7.0 → 0.8.0
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 +69 -69
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<img src="https://raw.githubusercontent.com/AronSoto/verbaly/develop/assets/logo-light.png" alt="Verbaly" width="300" />
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
<p align="center"><em>Svelte bindings for Verbaly — stores over the reactive core.</em></p>
|
|
6
|
-
|
|
7
|
-
<p align="center">
|
|
8
|
-
<a href="https://www.npmjs.com/package/@verbaly/svelte"><img src="https://img.shields.io/npm/v/@verbaly/svelte?logo=npm&color=cb3837" alt="npm version" /></a>
|
|
9
|
-
<a href="https://github.com/AronSoto/verbaly/blob/develop/LICENSE"><img src="https://img.shields.io/npm/l/@verbaly/svelte?color=blue" alt="Apache-2.0" /></a>
|
|
10
|
-
</p>
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
Idiomatic Svelte stores (4 and 5) over the [Verbaly](https://github.com/AronSoto/verbaly) core — the `$` auto-subscription just works, re-rendering on every locale switch.
|
|
15
|
-
|
|
16
|
-
## Install
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
pnpm add @verbaly/svelte
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## Usage
|
|
23
|
-
|
|
24
|
-
```svelte
|
|
25
|
-
<!-- +layout.svelte -->
|
|
26
|
-
<script>
|
|
27
|
-
import { provideVerbaly } from '@verbaly/svelte';
|
|
28
|
-
import { verbaly } from 'virtual:verbaly';
|
|
29
|
-
|
|
30
|
-
provideVerbaly(verbaly);
|
|
31
|
-
</script>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
```svelte
|
|
35
|
-
<!-- Inbox.svelte -->
|
|
36
|
-
<script>
|
|
37
|
-
import { useT, useLocale } from '@verbaly/svelte';
|
|
38
|
-
|
|
39
|
-
const t = useT();
|
|
40
|
-
const locale = useLocale(); // writable — bind it to a select
|
|
41
|
-
</script>
|
|
42
|
-
|
|
43
|
-
<p>{$t('inbox', { count: 3 })}</p>
|
|
44
|
-
<select bind:value={$locale}>
|
|
45
|
-
<option value="es">Español</option>
|
|
46
|
-
<option value="en">English</option>
|
|
47
|
-
</select>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
No component tree? The store factories work with any instance:
|
|
51
|
-
|
|
52
|
-
```ts
|
|
53
|
-
import { createVerbaly } from 'verbaly';
|
|
54
|
-
import { localeStore, tStore } from '@verbaly/svelte';
|
|
55
|
-
|
|
56
|
-
export const verbaly = createVerbaly({/* … */});
|
|
57
|
-
export const t = tStore(verbaly);
|
|
58
|
-
export const locale = localeStore(verbaly);
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
Rich text: the core's DOM interpreter works in any Svelte app — mark elements with `data-verbaly`/`data-verbaly-rich` and call `bindDom` (whitelist-based, XSS-safe).
|
|
62
|
-
|
|
63
|
-
📖 Docs: **https://verbaly-web.vercel.app/docs/frameworks**
|
|
64
|
-
|
|
65
|
-
> ⚠️ Early development (`0.x`) — API not stable yet.
|
|
66
|
-
|
|
67
|
-
## License
|
|
68
|
-
|
|
69
|
-
[Apache-2.0](https://github.com/AronSoto/verbaly/blob/develop/LICENSE) © Aron Soto
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/AronSoto/verbaly/develop/assets/logo-light.png" alt="Verbaly" width="300" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<p align="center"><em>Svelte bindings for Verbaly — stores over the reactive core.</em></p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://www.npmjs.com/package/@verbaly/svelte"><img src="https://img.shields.io/npm/v/@verbaly/svelte?logo=npm&color=cb3837" alt="npm version" /></a>
|
|
9
|
+
<a href="https://github.com/AronSoto/verbaly/blob/develop/LICENSE"><img src="https://img.shields.io/npm/l/@verbaly/svelte?color=blue" alt="Apache-2.0" /></a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
Idiomatic Svelte stores (4 and 5) over the [Verbaly](https://github.com/AronSoto/verbaly) core — the `$` auto-subscription just works, re-rendering on every locale switch.
|
|
15
|
+
|
|
16
|
+
## Install
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @verbaly/svelte
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
```svelte
|
|
25
|
+
<!-- +layout.svelte -->
|
|
26
|
+
<script>
|
|
27
|
+
import { provideVerbaly } from '@verbaly/svelte';
|
|
28
|
+
import { verbaly } from 'virtual:verbaly';
|
|
29
|
+
|
|
30
|
+
provideVerbaly(verbaly);
|
|
31
|
+
</script>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
```svelte
|
|
35
|
+
<!-- Inbox.svelte -->
|
|
36
|
+
<script>
|
|
37
|
+
import { useT, useLocale } from '@verbaly/svelte';
|
|
38
|
+
|
|
39
|
+
const t = useT();
|
|
40
|
+
const locale = useLocale(); // writable — bind it to a select
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<p>{$t('inbox', { count: 3 })}</p>
|
|
44
|
+
<select bind:value={$locale}>
|
|
45
|
+
<option value="es">Español</option>
|
|
46
|
+
<option value="en">English</option>
|
|
47
|
+
</select>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
No component tree? The store factories work with any instance:
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { createVerbaly } from 'verbaly';
|
|
54
|
+
import { localeStore, tStore } from '@verbaly/svelte';
|
|
55
|
+
|
|
56
|
+
export const verbaly = createVerbaly({/* … */});
|
|
57
|
+
export const t = tStore(verbaly);
|
|
58
|
+
export const locale = localeStore(verbaly);
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Rich text: the core's DOM interpreter works in any Svelte app — mark elements with `data-verbaly`/`data-verbaly-rich` and call `bindDom` (whitelist-based, XSS-safe).
|
|
62
|
+
|
|
63
|
+
📖 Docs: **https://verbaly-web.vercel.app/docs/frameworks**
|
|
64
|
+
|
|
65
|
+
> ⚠️ Early development (`0.x`) — API not stable yet.
|
|
66
|
+
|
|
67
|
+
## License
|
|
68
|
+
|
|
69
|
+
[Apache-2.0](https://github.com/AronSoto/verbaly/blob/develop/LICENSE) © Aron Soto
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { getContext, setContext } from 'svelte';\nimport type { Readable, Writable } from 'svelte/store';\nimport type { DictionaryInput, Params, TFunction, Verbaly } from 'verbaly';\n\nconst KEY = {};\n\nexport function provideVerbaly<D extends DictionaryInput>(instance: Verbaly<D>): Verbaly<D> {\n setContext(KEY, instance);\n return instance;\n}\n\nexport function useVerbaly<D extends DictionaryInput = DictionaryInput>(): Verbaly<D> {\n const instance = getContext<Verbaly<D> | undefined>(KEY);\n if (!instance) {\n throw new Error('[verbaly] useVerbaly requires provideVerbaly(...) in a parent component');\n }\n return instance;\n}\n\n// store factories — also usable without context (app-level singleton)\nexport function tStore<D extends DictionaryInput>(instance: Verbaly<D>): Readable<TFunction<D>> {\n return {\n subscribe(run) {\n run(instance.t);\n return instance.subscribe(() => run(instance.t));\n },\n };\n}\n\nexport function localeStore(instance: Verbaly): Writable<string> {\n return {\n subscribe(run) {\n run(instance.locale);\n return instance.subscribe(() => run(instance.locale));\n },\n set: (locale) => instance.setLocale(locale),\n update: (fn) => instance.setLocale(fn(instance.locale)),\n };\n}\n\nexport function useT<D extends DictionaryInput = DictionaryInput>(): Readable<TFunction<D>> {\n return tStore(useVerbaly<D>());\n}\n\nexport function useLocale(): Writable<string> {\n return localeStore(useVerbaly());\n}\n\nexport type { Params, TFunction, Verbaly };\n"],"mappings":";AAAA,SAAS,YAAY,kBAAkB;AAIvC,IAAM,MAAM,CAAC;AAEN,SAAS,eAA0C,UAAkC;AAC1F,aAAW,KAAK,QAAQ;AACxB,SAAO;AACT;AAEO,SAAS,aAAsE;AACpF,QAAM,WAAW,WAAmC,GAAG;AACvD,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,yEAAyE;AAAA,EAC3F;AACA,SAAO;AACT;AAGO,SAAS,OAAkC,UAA8C;AAC9F,SAAO;AAAA,IACL,UAAU,KAAK;AACb,UAAI,SAAS,CAAC;AACd,aAAO,SAAS,UAAU,MAAM,IAAI,SAAS,CAAC,CAAC;AAAA,IACjD;AAAA,EACF;AACF;AAEO,SAAS,YAAY,UAAqC;AAC/D,SAAO;AAAA,IACL,UAAU,KAAK;AACb,UAAI,SAAS,MAAM;AACnB,aAAO,SAAS,UAAU,MAAM,IAAI,SAAS,MAAM,CAAC;AAAA,IACtD;AAAA,IACA,KAAK,CAAC,WAAW,SAAS,UAAU,MAAM;AAAA,IAC1C,QAAQ,CAAC,OAAO,SAAS,UAAU,GAAG,SAAS,MAAM,CAAC;AAAA,EACxD;AACF;AAEO,SAAS,OAA4E;AAC1F,SAAO,OAAO,WAAc,CAAC;AAC/B;AAEO,SAAS,YAA8B;AAC5C,SAAO,YAAY,WAAW,CAAC;AACjC;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { getContext, setContext } from 'svelte';\r\nimport type { Readable, Writable } from 'svelte/store';\r\nimport type { DictionaryInput, Params, TFunction, Verbaly } from 'verbaly';\r\n\r\nconst KEY = {};\r\n\r\nexport function provideVerbaly<D extends DictionaryInput>(instance: Verbaly<D>): Verbaly<D> {\r\n setContext(KEY, instance);\r\n return instance;\r\n}\r\n\r\nexport function useVerbaly<D extends DictionaryInput = DictionaryInput>(): Verbaly<D> {\r\n const instance = getContext<Verbaly<D> | undefined>(KEY);\r\n if (!instance) {\r\n throw new Error('[verbaly] useVerbaly requires provideVerbaly(...) in a parent component');\r\n }\r\n return instance;\r\n}\r\n\r\n// store factories — also usable without context (app-level singleton)\r\nexport function tStore<D extends DictionaryInput>(instance: Verbaly<D>): Readable<TFunction<D>> {\r\n return {\r\n subscribe(run) {\r\n run(instance.t);\r\n return instance.subscribe(() => run(instance.t));\r\n },\r\n };\r\n}\r\n\r\nexport function localeStore(instance: Verbaly): Writable<string> {\r\n return {\r\n subscribe(run) {\r\n run(instance.locale);\r\n return instance.subscribe(() => run(instance.locale));\r\n },\r\n set: (locale) => instance.setLocale(locale),\r\n update: (fn) => instance.setLocale(fn(instance.locale)),\r\n };\r\n}\r\n\r\nexport function useT<D extends DictionaryInput = DictionaryInput>(): Readable<TFunction<D>> {\r\n return tStore(useVerbaly<D>());\r\n}\r\n\r\nexport function useLocale(): Writable<string> {\r\n return localeStore(useVerbaly());\r\n}\r\n\r\nexport type { Params, TFunction, Verbaly };\r\n"],"mappings":";AAAA,SAAS,YAAY,kBAAkB;AAIvC,IAAM,MAAM,CAAC;AAEN,SAAS,eAA0C,UAAkC;AAC1F,aAAW,KAAK,QAAQ;AACxB,SAAO;AACT;AAEO,SAAS,aAAsE;AACpF,QAAM,WAAW,WAAmC,GAAG;AACvD,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,yEAAyE;AAAA,EAC3F;AACA,SAAO;AACT;AAGO,SAAS,OAAkC,UAA8C;AAC9F,SAAO;AAAA,IACL,UAAU,KAAK;AACb,UAAI,SAAS,CAAC;AACd,aAAO,SAAS,UAAU,MAAM,IAAI,SAAS,CAAC,CAAC;AAAA,IACjD;AAAA,EACF;AACF;AAEO,SAAS,YAAY,UAAqC;AAC/D,SAAO;AAAA,IACL,UAAU,KAAK;AACb,UAAI,SAAS,MAAM;AACnB,aAAO,SAAS,UAAU,MAAM,IAAI,SAAS,MAAM,CAAC;AAAA,IACtD;AAAA,IACA,KAAK,CAAC,WAAW,SAAS,UAAU,MAAM;AAAA,IAC1C,QAAQ,CAAC,OAAO,SAAS,UAAU,GAAG,SAAS,MAAM,CAAC;AAAA,EACxD;AACF;AAEO,SAAS,OAA4E;AAC1F,SAAO,OAAO,WAAc,CAAC;AAC/B;AAEO,SAAS,YAA8B;AAC5C,SAAO,YAAY,WAAW,CAAC;AACjC;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@verbaly/svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Svelte bindings for Verbaly — stores over the reactive core.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"i18n",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"url": "git+https://github.com/AronSoto/verbaly.git",
|
|
16
16
|
"directory": "packages/svelte"
|
|
17
17
|
},
|
|
18
|
-
"homepage": "https://
|
|
18
|
+
"homepage": "https://verbaly-web.vercel.app/docs/frameworks",
|
|
19
19
|
"bugs": {
|
|
20
20
|
"url": "https://github.com/AronSoto/verbaly/issues"
|
|
21
21
|
},
|
|
@@ -40,11 +40,11 @@
|
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"svelte": "^4.0.0 || ^5.0.0",
|
|
43
|
-
"verbaly": "^0.
|
|
43
|
+
"verbaly": "^0.8.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"svelte": "^5.56.4",
|
|
47
|
-
"verbaly": "0.
|
|
47
|
+
"verbaly": "0.8.0"
|
|
48
48
|
},
|
|
49
49
|
"scripts": {
|
|
50
50
|
"build": "tsup",
|