@relax.js/core 1.0.3 → 1.0.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 +194 -188
- package/dist/DependencyInjection.d.ts +45 -27
- package/dist/collections/LinkedList.d.ts +9 -8
- package/dist/collections/index.js +1 -1
- package/dist/collections/index.js.map +3 -3
- package/dist/collections/index.mjs +1 -1
- package/dist/collections/index.mjs.map +3 -3
- package/dist/di/index.js +1 -1
- package/dist/di/index.js.map +3 -3
- package/dist/di/index.mjs +1 -1
- package/dist/di/index.mjs.map +3 -3
- package/dist/elements/index.js +1 -1
- package/dist/elements/index.js.map +1 -1
- package/dist/errors.d.ts +20 -0
- package/dist/forms/FormValidator.d.ts +3 -22
- package/dist/forms/ValidationRules.d.ts +4 -6
- package/dist/forms/index.js +1 -1
- package/dist/forms/index.js.map +4 -4
- package/dist/forms/index.mjs +1 -1
- package/dist/forms/index.mjs.map +4 -4
- package/dist/forms/setFormData.d.ts +39 -1
- package/dist/html/TableRenderer.d.ts +1 -0
- package/dist/html/index.js +1 -1
- package/dist/html/index.js.map +3 -3
- package/dist/html/index.mjs +1 -1
- package/dist/html/index.mjs.map +3 -3
- package/dist/html/template.d.ts +4 -0
- package/dist/http/ServerSentEvents.d.ts +1 -1
- package/dist/http/SimpleWebSocket.d.ts +1 -1
- package/dist/http/http.d.ts +1 -0
- package/dist/http/index.js +1 -1
- package/dist/http/index.js.map +3 -3
- package/dist/http/index.mjs +1 -1
- package/dist/http/index.mjs.map +3 -3
- package/dist/i18n/icu.d.ts +1 -1
- package/dist/i18n/index.js +1 -1
- package/dist/i18n/index.js.map +2 -2
- package/dist/i18n/index.mjs +1 -1
- package/dist/i18n/index.mjs.map +2 -2
- package/dist/index.js +3 -3
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +3 -3
- package/dist/index.mjs.map +3 -3
- package/dist/routing/NavigateRouteEvent.d.ts +4 -4
- package/dist/routing/index.js +3 -3
- package/dist/routing/index.js.map +3 -3
- package/dist/routing/index.mjs +3 -3
- package/dist/routing/index.mjs.map +3 -3
- package/dist/routing/navigation.d.ts +1 -1
- package/dist/routing/routeTargetRegistry.d.ts +1 -0
- package/dist/routing/types.d.ts +2 -1
- package/dist/templates/NodeTemplate.d.ts +3 -1
- package/dist/utils/index.d.ts +1 -1
- package/dist/utils/index.js +1 -1
- package/dist/utils/index.js.map +3 -3
- package/dist/utils/index.mjs +1 -1
- package/dist/utils/index.mjs.map +3 -3
- package/docs/Architecture.md +333 -333
- package/docs/DependencyInjection.md +277 -237
- package/docs/Errors.md +87 -87
- package/docs/GettingStarted.md +238 -231
- package/docs/Pipes.md +5 -5
- package/docs/Translations.md +167 -312
- package/docs/WhyRelaxjs.md +336 -336
- package/docs/api.json +93193 -0
- package/docs/elements/dom.md +102 -102
- package/docs/forms/creating-form-components.md +924 -924
- package/docs/forms/form-api.md +94 -94
- package/docs/forms/forms.md +99 -99
- package/docs/forms/patterns.md +311 -311
- package/docs/forms/reading-writing.md +465 -365
- package/docs/forms/validation.md +351 -351
- package/docs/html/TableRenderer.md +291 -291
- package/docs/html/html.md +175 -175
- package/docs/html/index.md +54 -54
- package/docs/html/template.md +422 -422
- package/docs/http/HttpClient.md +459 -459
- package/docs/http/ServerSentEvents.md +184 -184
- package/docs/http/index.md +109 -109
- package/docs/i18n/i18n.md +49 -4
- package/docs/i18n/intl-standard.md +178 -178
- package/docs/routing/RouteLink.md +98 -98
- package/docs/routing/Routing.md +332 -332
- package/docs/routing/layouts.md +207 -207
- package/docs/setup/bootstrapping.md +154 -0
- package/docs/setup/build-and-deploy.md +183 -0
- package/docs/setup/project-structure.md +170 -0
- package/docs/setup/vite.md +175 -0
- package/docs/utilities.md +143 -143
- package/package.json +4 -2
|
@@ -1,178 +1,178 @@
|
|
|
1
|
-
# The Modern Intl Standard
|
|
2
|
-
|
|
3
|
-
The browser's built-in [`Intl`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) object provides locale-aware formatting for numbers, dates, strings, and more. It is supported in all modern browsers and Node.js, so no polyfills or libraries are needed.
|
|
4
|
-
|
|
5
|
-
Relaxjs uses `Intl` internally (e.g. `Intl.PluralRules` for ICU pluralization) and exposes the current locale via `getCurrentLocale()` so pipes and components can pass it directly to `Intl` APIs.
|
|
6
|
-
|
|
7
|
-
## Intl.PluralRules
|
|
8
|
-
|
|
9
|
-
Determines the plural category (`zero`, `one`, `two`, `few`, `many`, `other`) for a number in a given locale. Different languages have different rules. English has two categories (`one` / `other`), Arabic has six.
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
const en = new Intl.PluralRules('en');
|
|
13
|
-
en.select(1); // 'one'
|
|
14
|
-
en.select(0); // 'other'
|
|
15
|
-
en.select(5); // 'other'
|
|
16
|
-
|
|
17
|
-
const sv = new Intl.PluralRules('sv');
|
|
18
|
-
sv.select(1); // 'one' → en
|
|
19
|
-
sv.select(0); // 'other' → flera
|
|
20
|
-
sv.select(5); // 'other' → flera
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
The returned strings (`one`, `other`, `few`, etc.) are category identifiers, not localized text. The locale determines *which numbers* map to *which categories*. English and Swedish both use `one`/`other`, while languages like Arabic use all six categories (`zero`, `one`, `two`, `few`, `many`, `other`).
|
|
24
|
-
|
|
25
|
-
This is the engine behind ICU `{count, plural, ...}` messages. The Relaxjs ICU formatter delegates to `Intl.PluralRules` for category selection.
|
|
26
|
-
|
|
27
|
-
[MDN: Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules)
|
|
28
|
-
|
|
29
|
-
## Intl.NumberFormat
|
|
30
|
-
|
|
31
|
-
Formats numbers according to locale conventions: thousands separators, decimal marks, currency, percentages, units, and compact notation.
|
|
32
|
-
|
|
33
|
-
```typescript
|
|
34
|
-
new Intl.NumberFormat('en').format(1234.5); // '1,234.5'
|
|
35
|
-
new Intl.NumberFormat('sv').format(1234.5); // '1 234,5'
|
|
36
|
-
|
|
37
|
-
new Intl.NumberFormat('en', {
|
|
38
|
-
style: 'currency', currency: 'USD'
|
|
39
|
-
}).format(42); // '$42.00'
|
|
40
|
-
|
|
41
|
-
new Intl.NumberFormat('sv', {
|
|
42
|
-
style: 'currency', currency: 'SEK'
|
|
43
|
-
}).format(42); // '42,00 kr'
|
|
44
|
-
|
|
45
|
-
new Intl.NumberFormat('en', {
|
|
46
|
-
notation: 'compact'
|
|
47
|
-
}).format(1_500_000); // '1.5M'
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
The Relaxjs `currency` pipe uses `Intl.NumberFormat` with `getCurrentLocale()`.
|
|
51
|
-
|
|
52
|
-
[MDN: Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)
|
|
53
|
-
|
|
54
|
-
## Intl.DateTimeFormat
|
|
55
|
-
|
|
56
|
-
Formats dates and times according to locale conventions and configurable options.
|
|
57
|
-
|
|
58
|
-
```typescript
|
|
59
|
-
const date = new Date('2025-06-15T14:30:00');
|
|
60
|
-
|
|
61
|
-
new Intl.DateTimeFormat('en').format(date); // '6/15/2025'
|
|
62
|
-
new Intl.DateTimeFormat('sv').format(date); // '2025-06-15'
|
|
63
|
-
|
|
64
|
-
new Intl.DateTimeFormat('en', {
|
|
65
|
-
dateStyle: 'long', timeStyle: 'short'
|
|
66
|
-
}).format(date); // 'June 15, 2025 at 2:30 PM'
|
|
67
|
-
|
|
68
|
-
new Intl.DateTimeFormat('sv', {
|
|
69
|
-
weekday: 'long', month: 'long', day: 'numeric'
|
|
70
|
-
}).format(date); // 'söndag 15 juni'
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
The Relaxjs `date` pipe uses `Intl.DateTimeFormat` with `getCurrentLocale()`.
|
|
74
|
-
|
|
75
|
-
[MDN: Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
|
|
76
|
-
|
|
77
|
-
## Intl.RelativeTimeFormat
|
|
78
|
-
|
|
79
|
-
Formats relative time descriptions ("3 days ago", "in 2 hours") with locale-aware phrasing.
|
|
80
|
-
|
|
81
|
-
```typescript
|
|
82
|
-
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
|
|
83
|
-
rtf.format(-1, 'day'); // 'yesterday'
|
|
84
|
-
rtf.format(0, 'day'); // 'today'
|
|
85
|
-
rtf.format(3, 'day'); // 'in 3 days'
|
|
86
|
-
|
|
87
|
-
const svRtf = new Intl.RelativeTimeFormat('sv', { numeric: 'auto' });
|
|
88
|
-
svRtf.format(-1, 'day'); // 'igår'
|
|
89
|
-
svRtf.format(-3, 'day'); // 'för 3 dagar sedan'
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
[MDN: Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)
|
|
93
|
-
|
|
94
|
-
## Intl.Collator
|
|
95
|
-
|
|
96
|
-
Provides locale-sensitive string comparison for sorting. Handles accents, case, and locale-specific sort orders (e.g. Swedish å/ä/ö sort after z).
|
|
97
|
-
|
|
98
|
-
```typescript
|
|
99
|
-
const col = new Intl.Collator('sv');
|
|
100
|
-
['ö', 'a', 'å', 'ä'].sort(col.compare); // ['a', 'å', 'ä', 'ö']
|
|
101
|
-
|
|
102
|
-
const enCol = new Intl.Collator('en', { sensitivity: 'base' });
|
|
103
|
-
enCol.compare('café', 'cafe'); // 0 (equal, ignoring accent)
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
[MDN: Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator)
|
|
107
|
-
|
|
108
|
-
## Intl.Segmenter
|
|
109
|
-
|
|
110
|
-
Splits text into meaningful segments (graphemes, words, or sentences) while respecting locale rules. Essential for languages without spaces between words (Chinese, Japanese, Thai).
|
|
111
|
-
|
|
112
|
-
```typescript
|
|
113
|
-
const seg = new Intl.Segmenter('en', { granularity: 'word' });
|
|
114
|
-
const words = [...seg.segment('Hello world!')].filter(s => s.isWordLike);
|
|
115
|
-
// [{segment: 'Hello'}, {segment: 'world'}]
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
[MDN: Intl.Segmenter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter)
|
|
119
|
-
|
|
120
|
-
## Intl.ListFormat
|
|
121
|
-
|
|
122
|
-
Formats lists with locale-appropriate conjunctions and punctuation.
|
|
123
|
-
|
|
124
|
-
```typescript
|
|
125
|
-
new Intl.ListFormat('en', { type: 'conjunction' })
|
|
126
|
-
.format(['Alice', 'Bob', 'Charlie']); // 'Alice, Bob, and Charlie'
|
|
127
|
-
|
|
128
|
-
new Intl.ListFormat('sv', { type: 'conjunction' })
|
|
129
|
-
.format(['Alice', 'Bob', 'Charlie']); // 'Alice, Bob och Charlie'
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
[MDN: Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat)
|
|
133
|
-
|
|
134
|
-
## Intl.DisplayNames
|
|
135
|
-
|
|
136
|
-
Translates language, region, currency, and script codes into human-readable names.
|
|
137
|
-
|
|
138
|
-
```typescript
|
|
139
|
-
new Intl.DisplayNames('en', { type: 'language' }).of('sv'); // 'Swedish'
|
|
140
|
-
new Intl.DisplayNames('sv', { type: 'language' }).of('en'); // 'engelska'
|
|
141
|
-
new Intl.DisplayNames('en', { type: 'currency' }).of('SEK'); // 'Swedish Krona'
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
[MDN: Intl.DisplayNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)
|
|
145
|
-
|
|
146
|
-
## ICU Message Format
|
|
147
|
-
|
|
148
|
-
ICU (International Components for Unicode) defines a message syntax used across platforms. The three core patterns:
|
|
149
|
-
|
|
150
|
-
### Simple Interpolation
|
|
151
|
-
|
|
152
|
-
```
|
|
153
|
-
Hello, {name}!
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### Plural
|
|
157
|
-
|
|
158
|
-
Selects a branch based on `Intl.PluralRules`. The `#` token inserts the numeric value. Exact matches (`=0`, `=1`) take priority over category matches.
|
|
159
|
-
|
|
160
|
-
```
|
|
161
|
-
{count, plural, =0 {No items} one {# item} other {# items}}
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
### Select
|
|
165
|
-
|
|
166
|
-
Selects a branch based on an exact string match. Always include an `other` fallback.
|
|
167
|
-
|
|
168
|
-
```
|
|
169
|
-
{gender, select, male {He} female {She} other {They}} liked your post.
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
[ICU User Guide: Formatting Messages](https://unicode-org.github.io/icu/userguide/format_parse/messages/)
|
|
173
|
-
|
|
174
|
-
## Further Reading
|
|
175
|
-
|
|
176
|
-
- [MDN: Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl), full API reference
|
|
177
|
-
- [ICU Message Format](https://unicode-org.github.io/icu/userguide/format_parse/messages/), the message syntax standard
|
|
178
|
-
- [Can I Use: Intl](https://caniuse.com/?search=Intl), browser support tables
|
|
1
|
+
# The Modern Intl Standard
|
|
2
|
+
|
|
3
|
+
The browser's built-in [`Intl`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) object provides locale-aware formatting for numbers, dates, strings, and more. It is supported in all modern browsers and Node.js, so no polyfills or libraries are needed.
|
|
4
|
+
|
|
5
|
+
Relaxjs uses `Intl` internally (e.g. `Intl.PluralRules` for ICU pluralization) and exposes the current locale via `getCurrentLocale()` so pipes and components can pass it directly to `Intl` APIs.
|
|
6
|
+
|
|
7
|
+
## Intl.PluralRules
|
|
8
|
+
|
|
9
|
+
Determines the plural category (`zero`, `one`, `two`, `few`, `many`, `other`) for a number in a given locale. Different languages have different rules. English has two categories (`one` / `other`), Arabic has six.
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
const en = new Intl.PluralRules('en');
|
|
13
|
+
en.select(1); // 'one'
|
|
14
|
+
en.select(0); // 'other'
|
|
15
|
+
en.select(5); // 'other'
|
|
16
|
+
|
|
17
|
+
const sv = new Intl.PluralRules('sv');
|
|
18
|
+
sv.select(1); // 'one' → en
|
|
19
|
+
sv.select(0); // 'other' → flera
|
|
20
|
+
sv.select(5); // 'other' → flera
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
The returned strings (`one`, `other`, `few`, etc.) are category identifiers, not localized text. The locale determines *which numbers* map to *which categories*. English and Swedish both use `one`/`other`, while languages like Arabic use all six categories (`zero`, `one`, `two`, `few`, `many`, `other`).
|
|
24
|
+
|
|
25
|
+
This is the engine behind ICU `{count, plural, ...}` messages. The Relaxjs ICU formatter delegates to `Intl.PluralRules` for category selection.
|
|
26
|
+
|
|
27
|
+
[MDN: Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules)
|
|
28
|
+
|
|
29
|
+
## Intl.NumberFormat
|
|
30
|
+
|
|
31
|
+
Formats numbers according to locale conventions: thousands separators, decimal marks, currency, percentages, units, and compact notation.
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
new Intl.NumberFormat('en').format(1234.5); // '1,234.5'
|
|
35
|
+
new Intl.NumberFormat('sv').format(1234.5); // '1 234,5'
|
|
36
|
+
|
|
37
|
+
new Intl.NumberFormat('en', {
|
|
38
|
+
style: 'currency', currency: 'USD'
|
|
39
|
+
}).format(42); // '$42.00'
|
|
40
|
+
|
|
41
|
+
new Intl.NumberFormat('sv', {
|
|
42
|
+
style: 'currency', currency: 'SEK'
|
|
43
|
+
}).format(42); // '42,00 kr'
|
|
44
|
+
|
|
45
|
+
new Intl.NumberFormat('en', {
|
|
46
|
+
notation: 'compact'
|
|
47
|
+
}).format(1_500_000); // '1.5M'
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
The Relaxjs `currency` pipe uses `Intl.NumberFormat` with `getCurrentLocale()`.
|
|
51
|
+
|
|
52
|
+
[MDN: Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)
|
|
53
|
+
|
|
54
|
+
## Intl.DateTimeFormat
|
|
55
|
+
|
|
56
|
+
Formats dates and times according to locale conventions and configurable options.
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
const date = new Date('2025-06-15T14:30:00');
|
|
60
|
+
|
|
61
|
+
new Intl.DateTimeFormat('en').format(date); // '6/15/2025'
|
|
62
|
+
new Intl.DateTimeFormat('sv').format(date); // '2025-06-15'
|
|
63
|
+
|
|
64
|
+
new Intl.DateTimeFormat('en', {
|
|
65
|
+
dateStyle: 'long', timeStyle: 'short'
|
|
66
|
+
}).format(date); // 'June 15, 2025 at 2:30 PM'
|
|
67
|
+
|
|
68
|
+
new Intl.DateTimeFormat('sv', {
|
|
69
|
+
weekday: 'long', month: 'long', day: 'numeric'
|
|
70
|
+
}).format(date); // 'söndag 15 juni'
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
The Relaxjs `date` pipe uses `Intl.DateTimeFormat` with `getCurrentLocale()`.
|
|
74
|
+
|
|
75
|
+
[MDN: Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
|
|
76
|
+
|
|
77
|
+
## Intl.RelativeTimeFormat
|
|
78
|
+
|
|
79
|
+
Formats relative time descriptions ("3 days ago", "in 2 hours") with locale-aware phrasing.
|
|
80
|
+
|
|
81
|
+
```typescript
|
|
82
|
+
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
|
|
83
|
+
rtf.format(-1, 'day'); // 'yesterday'
|
|
84
|
+
rtf.format(0, 'day'); // 'today'
|
|
85
|
+
rtf.format(3, 'day'); // 'in 3 days'
|
|
86
|
+
|
|
87
|
+
const svRtf = new Intl.RelativeTimeFormat('sv', { numeric: 'auto' });
|
|
88
|
+
svRtf.format(-1, 'day'); // 'igår'
|
|
89
|
+
svRtf.format(-3, 'day'); // 'för 3 dagar sedan'
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
[MDN: Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)
|
|
93
|
+
|
|
94
|
+
## Intl.Collator
|
|
95
|
+
|
|
96
|
+
Provides locale-sensitive string comparison for sorting. Handles accents, case, and locale-specific sort orders (e.g. Swedish å/ä/ö sort after z).
|
|
97
|
+
|
|
98
|
+
```typescript
|
|
99
|
+
const col = new Intl.Collator('sv');
|
|
100
|
+
['ö', 'a', 'å', 'ä'].sort(col.compare); // ['a', 'å', 'ä', 'ö']
|
|
101
|
+
|
|
102
|
+
const enCol = new Intl.Collator('en', { sensitivity: 'base' });
|
|
103
|
+
enCol.compare('café', 'cafe'); // 0 (equal, ignoring accent)
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
[MDN: Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator)
|
|
107
|
+
|
|
108
|
+
## Intl.Segmenter
|
|
109
|
+
|
|
110
|
+
Splits text into meaningful segments (graphemes, words, or sentences) while respecting locale rules. Essential for languages without spaces between words (Chinese, Japanese, Thai).
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
const seg = new Intl.Segmenter('en', { granularity: 'word' });
|
|
114
|
+
const words = [...seg.segment('Hello world!')].filter(s => s.isWordLike);
|
|
115
|
+
// [{segment: 'Hello'}, {segment: 'world'}]
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
[MDN: Intl.Segmenter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter)
|
|
119
|
+
|
|
120
|
+
## Intl.ListFormat
|
|
121
|
+
|
|
122
|
+
Formats lists with locale-appropriate conjunctions and punctuation.
|
|
123
|
+
|
|
124
|
+
```typescript
|
|
125
|
+
new Intl.ListFormat('en', { type: 'conjunction' })
|
|
126
|
+
.format(['Alice', 'Bob', 'Charlie']); // 'Alice, Bob, and Charlie'
|
|
127
|
+
|
|
128
|
+
new Intl.ListFormat('sv', { type: 'conjunction' })
|
|
129
|
+
.format(['Alice', 'Bob', 'Charlie']); // 'Alice, Bob och Charlie'
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
[MDN: Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat)
|
|
133
|
+
|
|
134
|
+
## Intl.DisplayNames
|
|
135
|
+
|
|
136
|
+
Translates language, region, currency, and script codes into human-readable names.
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
new Intl.DisplayNames('en', { type: 'language' }).of('sv'); // 'Swedish'
|
|
140
|
+
new Intl.DisplayNames('sv', { type: 'language' }).of('en'); // 'engelska'
|
|
141
|
+
new Intl.DisplayNames('en', { type: 'currency' }).of('SEK'); // 'Swedish Krona'
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
[MDN: Intl.DisplayNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)
|
|
145
|
+
|
|
146
|
+
## ICU Message Format
|
|
147
|
+
|
|
148
|
+
ICU (International Components for Unicode) defines a message syntax used across platforms. The three core patterns:
|
|
149
|
+
|
|
150
|
+
### Simple Interpolation
|
|
151
|
+
|
|
152
|
+
```
|
|
153
|
+
Hello, {name}!
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Plural
|
|
157
|
+
|
|
158
|
+
Selects a branch based on `Intl.PluralRules`. The `#` token inserts the numeric value. Exact matches (`=0`, `=1`) take priority over category matches.
|
|
159
|
+
|
|
160
|
+
```
|
|
161
|
+
{count, plural, =0 {No items} one {# item} other {# items}}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### Select
|
|
165
|
+
|
|
166
|
+
Selects a branch based on an exact string match. Always include an `other` fallback.
|
|
167
|
+
|
|
168
|
+
```
|
|
169
|
+
{gender, select, male {He} female {She} other {They}} liked your post.
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
[ICU User Guide: Formatting Messages](https://unicode-org.github.io/icu/userguide/format_parse/messages/)
|
|
173
|
+
|
|
174
|
+
## Further Reading
|
|
175
|
+
|
|
176
|
+
- [MDN: Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl), full API reference
|
|
177
|
+
- [ICU Message Format](https://unicode-org.github.io/icu/userguide/format_parse/messages/), the message syntax standard
|
|
178
|
+
- [Can I Use: Intl](https://caniuse.com/?search=Intl), browser support tables
|
|
@@ -1,98 +1,98 @@
|
|
|
1
|
-
# RouteLink
|
|
2
|
-
|
|
3
|
-
A clickable element that triggers client-side navigation to a named route.
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
### Basic Navigation
|
|
8
|
-
|
|
9
|
-
```html
|
|
10
|
-
<r-link name="home">Home</r-link>
|
|
11
|
-
<r-link name="about">About Us</r-link>
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
### With Route Parameters
|
|
15
|
-
|
|
16
|
-
```html
|
|
17
|
-
<r-link name="user" param-id="123">View User</r-link>
|
|
18
|
-
<r-link name="product" param-id="456" param-tab="details">Product Details</r-link>
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### With Target
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
<r-link name="settings" target="sidebar">Settings</r-link>
|
|
25
|
-
<r-link name="preview" target="modal">Preview</r-link>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### Complex Parameters via JSON
|
|
29
|
-
|
|
30
|
-
```html
|
|
31
|
-
<r-link name="search" params='{"query":"typescript","page":1}'>
|
|
32
|
-
Search Results
|
|
33
|
-
</r-link>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## Attributes
|
|
37
|
-
|
|
38
|
-
| Attribute | Type | Description |
|
|
39
|
-
|-----------|------|-------------|
|
|
40
|
-
| `name` | `string` | Route name to navigate to (required) |
|
|
41
|
-
| `target` | `string` | Target `r-route-target` name |
|
|
42
|
-
| `params` | `string` | JSON object with additional route data |
|
|
43
|
-
| `param-*` | `string` | Individual route parameters (e.g., `param-id="123"`) |
|
|
44
|
-
|
|
45
|
-
## Behavior
|
|
46
|
-
|
|
47
|
-
1. Renders as an inline element with `cursor: pointer`
|
|
48
|
-
2. Sets `role="link"` and `tabindex="0"` for accessibility
|
|
49
|
-
3. On click, calls `navigate()` with the route name and collected parameters
|
|
50
|
-
4. Prevents default click behavior
|
|
51
|
-
|
|
52
|
-
## Combining Parameters
|
|
53
|
-
|
|
54
|
-
Both `param-*` attributes and `params` JSON can be used together:
|
|
55
|
-
|
|
56
|
-
```html
|
|
57
|
-
<r-link name="product"
|
|
58
|
-
param-id="789"
|
|
59
|
-
params='{"source":"email","campaign":"summer"}'>
|
|
60
|
-
View Product
|
|
61
|
-
</r-link>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
All parameters are merged into a single flat object:
|
|
65
|
-
```typescript
|
|
66
|
-
{ id: '789', source: 'email', campaign: 'summer' }
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
## Styling
|
|
70
|
-
|
|
71
|
-
Style as any inline element:
|
|
72
|
-
|
|
73
|
-
```css
|
|
74
|
-
r-link {
|
|
75
|
-
color: var(--accent-primary);
|
|
76
|
-
text-decoration: underline;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
r-link:hover {
|
|
80
|
-
color: var(--accent-hover);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
r-link:focus {
|
|
84
|
-
outline: 2px solid var(--accent-primary);
|
|
85
|
-
outline-offset: 2px;
|
|
86
|
-
}
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
## Comparison with Native Links
|
|
90
|
-
|
|
91
|
-
| Feature | `<a href>` | `<r-link>` |
|
|
92
|
-
|---------|------------|---------|
|
|
93
|
-
| Navigation | Full page reload | Client-side routing |
|
|
94
|
-
| Parameters | Query string | Route params + data |
|
|
95
|
-
| Target | Window/frame | Route target |
|
|
96
|
-
| SEO | Crawlable | Requires SSR |
|
|
97
|
-
|
|
98
|
-
Use `<r-link>` for SPA navigation within the app. Use native `<a>` for external links or when SEO is critical.
|
|
1
|
+
# RouteLink
|
|
2
|
+
|
|
3
|
+
A clickable element that triggers client-side navigation to a named route.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
### Basic Navigation
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<r-link name="home">Home</r-link>
|
|
11
|
+
<r-link name="about">About Us</r-link>
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### With Route Parameters
|
|
15
|
+
|
|
16
|
+
```html
|
|
17
|
+
<r-link name="user" param-id="123">View User</r-link>
|
|
18
|
+
<r-link name="product" param-id="456" param-tab="details">Product Details</r-link>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### With Target
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<r-link name="settings" target="sidebar">Settings</r-link>
|
|
25
|
+
<r-link name="preview" target="modal">Preview</r-link>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Complex Parameters via JSON
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<r-link name="search" params='{"query":"typescript","page":1}'>
|
|
32
|
+
Search Results
|
|
33
|
+
</r-link>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Attributes
|
|
37
|
+
|
|
38
|
+
| Attribute | Type | Description |
|
|
39
|
+
|-----------|------|-------------|
|
|
40
|
+
| `name` | `string` | Route name to navigate to (required) |
|
|
41
|
+
| `target` | `string` | Target `r-route-target` name |
|
|
42
|
+
| `params` | `string` | JSON object with additional route data |
|
|
43
|
+
| `param-*` | `string` | Individual route parameters (e.g., `param-id="123"`) |
|
|
44
|
+
|
|
45
|
+
## Behavior
|
|
46
|
+
|
|
47
|
+
1. Renders as an inline element with `cursor: pointer`
|
|
48
|
+
2. Sets `role="link"` and `tabindex="0"` for accessibility
|
|
49
|
+
3. On click, calls `navigate()` with the route name and collected parameters
|
|
50
|
+
4. Prevents default click behavior
|
|
51
|
+
|
|
52
|
+
## Combining Parameters
|
|
53
|
+
|
|
54
|
+
Both `param-*` attributes and `params` JSON can be used together:
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<r-link name="product"
|
|
58
|
+
param-id="789"
|
|
59
|
+
params='{"source":"email","campaign":"summer"}'>
|
|
60
|
+
View Product
|
|
61
|
+
</r-link>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
All parameters are merged into a single flat object:
|
|
65
|
+
```typescript
|
|
66
|
+
{ id: '789', source: 'email', campaign: 'summer' }
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Styling
|
|
70
|
+
|
|
71
|
+
Style as any inline element:
|
|
72
|
+
|
|
73
|
+
```css
|
|
74
|
+
r-link {
|
|
75
|
+
color: var(--accent-primary);
|
|
76
|
+
text-decoration: underline;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
r-link:hover {
|
|
80
|
+
color: var(--accent-hover);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
r-link:focus {
|
|
84
|
+
outline: 2px solid var(--accent-primary);
|
|
85
|
+
outline-offset: 2px;
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Comparison with Native Links
|
|
90
|
+
|
|
91
|
+
| Feature | `<a href>` | `<r-link>` |
|
|
92
|
+
|---------|------------|---------|
|
|
93
|
+
| Navigation | Full page reload | Client-side routing |
|
|
94
|
+
| Parameters | Query string | Route params + data |
|
|
95
|
+
| Target | Window/frame | Route target |
|
|
96
|
+
| SEO | Crawlable | Requires SSR |
|
|
97
|
+
|
|
98
|
+
Use `<r-link>` for SPA navigation within the app. Use native `<a>` for external links or when SEO is critical.
|