@havelaer/msgs 0.0.7 → 0.0.8
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 +70 -8
- package/package.json +6 -1
package/README.md
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
# Msgs
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
Msgs is a library for internationalization of TypeScript/JavaScript applications. It is built on top of [MessageFormat 2 (MF2)](https://messageformat.unicode.org) and provides a set of functions to format numbers, date and time, and other types.
|
|
3
|
+
Msgs is a library for internationalization of TypeScript/JavaScript applications. It is built on top of [MessageFormat 2 (MF2)](https://messageformat.unicode.org) and provides a set of functions to format numbers (currency, percentage, unit, etc.), date and time, and other types.
|
|
6
4
|
|
|
7
5
|
- Uses [MessageFormat 2 (MF2)](https://messageformat.unicode.org) for message formatting.
|
|
8
6
|
- TypeScript support.
|
|
9
|
-
- Formatting functions for [numbers
|
|
7
|
+
- Formatting functions for [numbers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), [date and time](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), [relative time](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat), [list](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat), and more.
|
|
10
8
|
- Optional React hook for React applications.
|
|
11
9
|
|
|
12
|
-
## Example
|
|
10
|
+
## React Example
|
|
13
11
|
|
|
14
12
|
```ts
|
|
15
13
|
// formatter.ts
|
|
@@ -31,7 +29,7 @@ export default createFormatter({
|
|
|
31
29
|
|
|
32
30
|
```ts
|
|
33
31
|
// Greeting.msgs.ts
|
|
34
|
-
import formatter from "
|
|
32
|
+
import formatter from "~/formatter";
|
|
35
33
|
|
|
36
34
|
export default formatter.parse({
|
|
37
35
|
hello: {
|
|
@@ -57,8 +55,8 @@ export function Greeting() {
|
|
|
57
55
|
```tsx
|
|
58
56
|
// App.tsx
|
|
59
57
|
import { MsgsProvider } from "@havelaer/msgs/react";
|
|
60
|
-
import formatter from "
|
|
61
|
-
import { Greeting } from "
|
|
58
|
+
import formatter from "~/formatter";
|
|
59
|
+
import { Greeting } from "~/components/Greeting";
|
|
62
60
|
|
|
63
61
|
export default function App() {
|
|
64
62
|
const locale = formatter.resolveLocale(navigator.languages);
|
|
@@ -69,3 +67,67 @@ export default function App() {
|
|
|
69
67
|
</MsgsProvider>
|
|
70
68
|
);
|
|
71
69
|
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Formatters
|
|
73
|
+
|
|
74
|
+
### `:number`
|
|
75
|
+
|
|
76
|
+
See [NumberFormat documentation (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for more details.
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
import formatter from "~/formatter";
|
|
80
|
+
|
|
81
|
+
export default formatter.parse({
|
|
82
|
+
decimalExample: {
|
|
83
|
+
"en-US": "Decimal: {$amount :number style=decimal}", // decimal is the default
|
|
84
|
+
// Example output: "Decimal: 1,234.56"
|
|
85
|
+
},
|
|
86
|
+
currencyExample: {
|
|
87
|
+
"en-US": "Currency: {$amount :number style=currency currency=USD}",
|
|
88
|
+
// Example output: "Currency: $1,234.56"
|
|
89
|
+
},
|
|
90
|
+
percentExample: {
|
|
91
|
+
"en-US": "Percentage: {$amount :number style=percent}",
|
|
92
|
+
// Example output: "Percentage: 12%"
|
|
93
|
+
},
|
|
94
|
+
unitExample: {
|
|
95
|
+
"en-US": "Unit: {$amount :number style=unit unit=liter}",
|
|
96
|
+
// Example output: "Unit: 1.2L"
|
|
97
|
+
},
|
|
98
|
+
});
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### `:datetime`
|
|
102
|
+
|
|
103
|
+
See [DateTimeFormat documentation (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) for more details.
|
|
104
|
+
|
|
105
|
+
```ts
|
|
106
|
+
import formatter from "~/formatter";
|
|
107
|
+
|
|
108
|
+
export default formatter.parse({
|
|
109
|
+
dateExample: {
|
|
110
|
+
"en-US": "Date: {$eventDate :datetime dateStyle=long}",
|
|
111
|
+
// Example output: "Date: January 15, 2024"
|
|
112
|
+
},
|
|
113
|
+
timeExample: {
|
|
114
|
+
"en-US": "Date: {$eventDate :datetime timeStyle=long}",
|
|
115
|
+
// Example output: "Date: 2:30:00 PM"
|
|
116
|
+
},
|
|
117
|
+
});
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### `:relativeTime`
|
|
121
|
+
|
|
122
|
+
See [RelativeTimeFormat documentation (MDN)](https://developer.mozilla.org/en-US/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) for more details.
|
|
123
|
+
|
|
124
|
+
```ts
|
|
125
|
+
import formatter from "~/formatter";
|
|
126
|
+
|
|
127
|
+
export default formatter.parse({
|
|
128
|
+
relativeTimeExample: {
|
|
129
|
+
"en-US": "Relative Time: {$days :relativeTime unit=day}",
|
|
130
|
+
// Example output: "Relative Time: 1 day ago"
|
|
131
|
+
},
|
|
132
|
+
});
|
|
133
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@havelaer/msgs",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -19,6 +19,10 @@
|
|
|
19
19
|
"publishConfig": {
|
|
20
20
|
"access": "public"
|
|
21
21
|
},
|
|
22
|
+
"repository": {
|
|
23
|
+
"type": "git",
|
|
24
|
+
"url": "https://github.com/havelaer/msgs.git"
|
|
25
|
+
},
|
|
22
26
|
"keywords": [
|
|
23
27
|
"messageformat",
|
|
24
28
|
"MessageFormat2",
|
|
@@ -53,6 +57,7 @@
|
|
|
53
57
|
"happy-dom": "^18.0.1",
|
|
54
58
|
"react": "^19.0.0",
|
|
55
59
|
"react-dom": "^19.0.0",
|
|
60
|
+
"tsdown": "^0.15.0",
|
|
56
61
|
"typescript": "~5.7.2",
|
|
57
62
|
"vitest": "^3.2.4"
|
|
58
63
|
},
|