@italia/i18n 0.1.0-alpha.1 → 0.1.0-alpha.2
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.
|
@@ -0,0 +1,407 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/index.ts",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "js",
|
|
12
|
+
"name": "Translation",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "Translation",
|
|
15
|
+
"module": "./controllers/localize.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "js",
|
|
20
|
+
"name": "DefaultTranslation",
|
|
21
|
+
"declaration": {
|
|
22
|
+
"name": "DefaultTranslation",
|
|
23
|
+
"module": "./controllers/localize.js"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"kind": "js",
|
|
28
|
+
"name": "registerTranslation",
|
|
29
|
+
"declaration": {
|
|
30
|
+
"name": "registerTranslation",
|
|
31
|
+
"module": "./controllers/localize.js"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"kind": "js",
|
|
36
|
+
"name": "LocalizeController",
|
|
37
|
+
"declaration": {
|
|
38
|
+
"name": "LocalizeController",
|
|
39
|
+
"module": "./controllers/localize.js"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"kind": "js",
|
|
44
|
+
"name": "LocalizeMixin",
|
|
45
|
+
"declaration": {
|
|
46
|
+
"name": "LocalizeMixin",
|
|
47
|
+
"module": "src/index.ts"
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"kind": "javascript-module",
|
|
54
|
+
"path": "src/controllers/localize.ts",
|
|
55
|
+
"declarations": [
|
|
56
|
+
{
|
|
57
|
+
"kind": "function",
|
|
58
|
+
"name": "update",
|
|
59
|
+
"description": "Updates all localized elements that are currently connected"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"kind": "function",
|
|
63
|
+
"name": "registerTranslation",
|
|
64
|
+
"parameters": [
|
|
65
|
+
{
|
|
66
|
+
"name": "translation",
|
|
67
|
+
"type": {
|
|
68
|
+
"text": "Translation[]"
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
"description": "Registers one or more translations"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"kind": "class",
|
|
76
|
+
"description": "Localize Reactive Controller for components built with Lit\n\nTo use this controller, import the class and instantiate it in a custom element constructor:\n\nprivate localize = new LocalizeController(this);\n\nThis will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it\nrespond to changes to its own dir|lang properties, make it a property:",
|
|
77
|
+
"name": "LocalizeController",
|
|
78
|
+
"members": [
|
|
79
|
+
{
|
|
80
|
+
"kind": "field",
|
|
81
|
+
"name": "host",
|
|
82
|
+
"type": {
|
|
83
|
+
"text": "ReactiveControllerHost & HTMLElement"
|
|
84
|
+
},
|
|
85
|
+
"default": "host"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"kind": "method",
|
|
89
|
+
"name": "hostConnected"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"kind": "method",
|
|
93
|
+
"name": "hostDisconnected"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"kind": "method",
|
|
97
|
+
"name": "dir",
|
|
98
|
+
"description": "Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to\nlowercase."
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"kind": "method",
|
|
102
|
+
"name": "lang",
|
|
103
|
+
"description": "Gets the host element's language as determined by the `lang` attribute. The return value is transformed to\nlowercase."
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"kind": "method",
|
|
107
|
+
"name": "getTranslationData",
|
|
108
|
+
"privacy": "private",
|
|
109
|
+
"parameters": [
|
|
110
|
+
{
|
|
111
|
+
"name": "lang",
|
|
112
|
+
"type": {
|
|
113
|
+
"text": "string"
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"kind": "method",
|
|
120
|
+
"name": "exists",
|
|
121
|
+
"return": {
|
|
122
|
+
"type": {
|
|
123
|
+
"text": "boolean"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
"parameters": [
|
|
127
|
+
{
|
|
128
|
+
"name": "key",
|
|
129
|
+
"type": {
|
|
130
|
+
"text": "K"
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"name": "options",
|
|
135
|
+
"type": {
|
|
136
|
+
"text": "Partial<ExistsOptions>"
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
],
|
|
140
|
+
"description": "Determines if the specified term exists, optionally checking the fallback translation."
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "method",
|
|
144
|
+
"name": "term",
|
|
145
|
+
"return": {
|
|
146
|
+
"type": {
|
|
147
|
+
"text": "string"
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
"parameters": [
|
|
151
|
+
{
|
|
152
|
+
"name": "key",
|
|
153
|
+
"type": {
|
|
154
|
+
"text": "K"
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"name": "args",
|
|
159
|
+
"type": {
|
|
160
|
+
"text": "FunctionParams<UserTranslation[K]>"
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
],
|
|
164
|
+
"description": "Outputs a translated term."
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"kind": "method",
|
|
168
|
+
"name": "date",
|
|
169
|
+
"return": {
|
|
170
|
+
"type": {
|
|
171
|
+
"text": "string"
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
"parameters": [
|
|
175
|
+
{
|
|
176
|
+
"name": "dateToFormat",
|
|
177
|
+
"type": {
|
|
178
|
+
"text": "Date | string"
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "options",
|
|
183
|
+
"optional": true,
|
|
184
|
+
"type": {
|
|
185
|
+
"text": "Intl.DateTimeFormatOptions"
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
],
|
|
189
|
+
"description": "Outputs a localized date in the specified format."
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"kind": "method",
|
|
193
|
+
"name": "number",
|
|
194
|
+
"return": {
|
|
195
|
+
"type": {
|
|
196
|
+
"text": "string"
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
"parameters": [
|
|
200
|
+
{
|
|
201
|
+
"name": "numberToFormat",
|
|
202
|
+
"type": {
|
|
203
|
+
"text": "number | string"
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"name": "options",
|
|
208
|
+
"optional": true,
|
|
209
|
+
"type": {
|
|
210
|
+
"text": "Intl.NumberFormatOptions"
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
],
|
|
214
|
+
"description": "Outputs a localized number in the specified format."
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"kind": "method",
|
|
218
|
+
"name": "relativeTime",
|
|
219
|
+
"return": {
|
|
220
|
+
"type": {
|
|
221
|
+
"text": "string"
|
|
222
|
+
}
|
|
223
|
+
},
|
|
224
|
+
"parameters": [
|
|
225
|
+
{
|
|
226
|
+
"name": "value",
|
|
227
|
+
"type": {
|
|
228
|
+
"text": "number"
|
|
229
|
+
}
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"name": "unit",
|
|
233
|
+
"type": {
|
|
234
|
+
"text": "Intl.RelativeTimeFormatUnit"
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"name": "options",
|
|
239
|
+
"optional": true,
|
|
240
|
+
"type": {
|
|
241
|
+
"text": "Intl.RelativeTimeFormatOptions"
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
],
|
|
245
|
+
"description": "Outputs a localized time in relative format."
|
|
246
|
+
}
|
|
247
|
+
]
|
|
248
|
+
}
|
|
249
|
+
],
|
|
250
|
+
"exports": [
|
|
251
|
+
{
|
|
252
|
+
"kind": "js",
|
|
253
|
+
"name": "update",
|
|
254
|
+
"declaration": {
|
|
255
|
+
"name": "update",
|
|
256
|
+
"module": "src/controllers/localize.ts"
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"kind": "js",
|
|
261
|
+
"name": "registerTranslation",
|
|
262
|
+
"declaration": {
|
|
263
|
+
"name": "registerTranslation",
|
|
264
|
+
"module": "src/controllers/localize.ts"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"kind": "js",
|
|
269
|
+
"name": "LocalizeController",
|
|
270
|
+
"declaration": {
|
|
271
|
+
"name": "LocalizeController",
|
|
272
|
+
"module": "src/controllers/localize.ts"
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
]
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"kind": "javascript-module",
|
|
279
|
+
"path": "src/mixins/localization.ts",
|
|
280
|
+
"declarations": [
|
|
281
|
+
{
|
|
282
|
+
"kind": "mixin",
|
|
283
|
+
"description": "",
|
|
284
|
+
"name": "LocalizeMixin",
|
|
285
|
+
"members": [
|
|
286
|
+
{
|
|
287
|
+
"kind": "field",
|
|
288
|
+
"name": "localize",
|
|
289
|
+
"type": {
|
|
290
|
+
"text": "LocalizeController"
|
|
291
|
+
},
|
|
292
|
+
"privacy": "public",
|
|
293
|
+
"default": "new LocalizeController(this)"
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
"kind": "field",
|
|
297
|
+
"name": "$localize",
|
|
298
|
+
"description": "Restituisce tutta l'utility di traduzione",
|
|
299
|
+
"return": {
|
|
300
|
+
"type": {
|
|
301
|
+
"text": ""
|
|
302
|
+
}
|
|
303
|
+
},
|
|
304
|
+
"readonly": true
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"kind": "method",
|
|
308
|
+
"name": "$t",
|
|
309
|
+
"privacy": "public",
|
|
310
|
+
"parameters": [
|
|
311
|
+
{
|
|
312
|
+
"name": "t",
|
|
313
|
+
"type": {
|
|
314
|
+
"text": "string"
|
|
315
|
+
},
|
|
316
|
+
"description": "La chiave del termine da localizzare (es. 'hello', 'submit', ecc.)."
|
|
317
|
+
}
|
|
318
|
+
],
|
|
319
|
+
"description": "Restituisce una stringa localizzata a partire da una chiave di termine.\n\nUtilizza il `LocalizeController` per accedere al dizionario corrente e\ntradurre la chiave fornita secondo la lingua attiva.",
|
|
320
|
+
"return": {
|
|
321
|
+
"type": {
|
|
322
|
+
"text": ""
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
"kind": "method",
|
|
328
|
+
"name": "$d",
|
|
329
|
+
"privacy": "public",
|
|
330
|
+
"parameters": [
|
|
331
|
+
{
|
|
332
|
+
"name": "d",
|
|
333
|
+
"type": {
|
|
334
|
+
"text": "Date | string"
|
|
335
|
+
}
|
|
336
|
+
},
|
|
337
|
+
{
|
|
338
|
+
"name": "p",
|
|
339
|
+
"type": {
|
|
340
|
+
"text": "Intl.DateTimeFormatOptions"
|
|
341
|
+
},
|
|
342
|
+
"description": "Le opzioni di formattazione per `Intl.DateTimeFormat` (es. { year: 'numeric', month: 'long', day: 'numeric' })."
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"description": "La data da formattare come stringa compatibile (es. ISO o con timezone, es. '2021-09-15 14:00:00 ET').",
|
|
346
|
+
"name": "n"
|
|
347
|
+
}
|
|
348
|
+
],
|
|
349
|
+
"description": "Formatta una data in base alla localizzazione attiva.\n\nUtilizza il `LocalizeController` per restituire una stringa localizzata\nsecondo le opzioni fornite (es. mese esteso, anno, ecc.).",
|
|
350
|
+
"return": {
|
|
351
|
+
"type": {
|
|
352
|
+
"text": ""
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
{
|
|
357
|
+
"kind": "method",
|
|
358
|
+
"name": "$n",
|
|
359
|
+
"privacy": "public",
|
|
360
|
+
"parameters": [
|
|
361
|
+
{
|
|
362
|
+
"name": "d",
|
|
363
|
+
"type": {
|
|
364
|
+
"text": "number"
|
|
365
|
+
},
|
|
366
|
+
"description": "Il numero da formattare."
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "p",
|
|
370
|
+
"type": {
|
|
371
|
+
"text": "Intl.NumberFormatOptions"
|
|
372
|
+
},
|
|
373
|
+
"description": "Le opzioni di formattazione (es. { style: 'currency', currency: 'EUR' })."
|
|
374
|
+
}
|
|
375
|
+
],
|
|
376
|
+
"description": "Formatta un numero secondo le impostazioni locali dell'utente corrente.\n\nUtilizza il `LocalizeController` per applicare formattazione numerica,\nincluse opzioni come separatori, decimali, valute, ecc.",
|
|
377
|
+
"return": {
|
|
378
|
+
"type": {
|
|
379
|
+
"text": ""
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
],
|
|
384
|
+
"parameters": [
|
|
385
|
+
{
|
|
386
|
+
"name": "Base",
|
|
387
|
+
"type": {
|
|
388
|
+
"text": "T"
|
|
389
|
+
},
|
|
390
|
+
"description": "The base class."
|
|
391
|
+
}
|
|
392
|
+
]
|
|
393
|
+
}
|
|
394
|
+
],
|
|
395
|
+
"exports": [
|
|
396
|
+
{
|
|
397
|
+
"kind": "js",
|
|
398
|
+
"name": "default",
|
|
399
|
+
"declaration": {
|
|
400
|
+
"name": "LocalizeMixin",
|
|
401
|
+
"module": "src/mixins/localization.ts"
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
]
|
|
405
|
+
}
|
|
406
|
+
]
|
|
407
|
+
}
|
package/dist/src/index.js
CHANGED
|
@@ -207,10 +207,11 @@ const LocalizeMixin = (Base) => class extends Base {
|
|
|
207
207
|
constructor() {
|
|
208
208
|
super(...arguments);
|
|
209
209
|
this.localize = new LocalizeController(this);
|
|
210
|
-
// Provide default values to avoid definite assignment errors and avoid decorators
|
|
211
|
-
this.dir = '';
|
|
212
|
-
this.lang = '';
|
|
213
210
|
}
|
|
211
|
+
// Provide default values to avoid definite assignment errors and avoid decorators
|
|
212
|
+
// commentati perchè danno problemi su React.js. Sono attributi nativi, e assegnare un valore di default a react da fastidio
|
|
213
|
+
// dir: string = '';
|
|
214
|
+
// lang: string = '';
|
|
214
215
|
/**
|
|
215
216
|
* Restituisce tutta l'utility di traduzione
|
|
216
217
|
*
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/controllers/localize.ts","../../../src/mixins/localization.ts"],"sourcesContent":["import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];\n\nexport interface Translation {\n $code: string; // e.g. en, en-GB\n $name: string; // e.g. English, Español\n $dir: 'ltr' | 'rtl';\n}\n\nexport interface DefaultTranslation extends Translation {\n [key: string]: any;\n}\n\nexport interface ExistsOptions {\n lang: string;\n includeFallback: boolean;\n}\n\nconst connectedElements = new Set<HTMLElement>();\n\ndeclare global {\n interface Window {\n translations?: Map<string, Translation>;\n }\n}\n\nif (window && !window.translations) {\n window.translations = new Map<string, Translation>();\n}\n\nconst { translations }: { translations: Map<string, Translation> } = window as Window & {\n translations: Map<string, Translation>;\n};\n\nlet fallback: Translation;\n\n// TODO: We need some way for users to be able to set these on the server.\nlet documentDirection = 'ltr';\n\n// Fallback for server.\nlet documentLanguage = 'en';\n\nconst isClient =\n typeof MutationObserver !== 'undefined' &&\n typeof document !== 'undefined' &&\n typeof document.documentElement !== 'undefined';\n\n/** Updates all localized elements that are currently connected */\nexport function update() {\n if (isClient) {\n documentDirection = document.documentElement.dir || 'ltr';\n documentLanguage = document.documentElement.lang || navigator.language;\n }\n\n [...connectedElements.keys()].forEach((el) => {\n const litEl = el as unknown as LitElement;\n if (typeof litEl.requestUpdate === 'function') {\n litEl.requestUpdate();\n }\n });\n}\n\nif (isClient) {\n const documentElementObserver = new MutationObserver(update);\n documentDirection = document.documentElement.dir || 'ltr';\n documentLanguage = document.documentElement.lang || navigator.language;\n\n // Watch for changes on <html lang>\n documentElementObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['dir', 'lang'],\n });\n}\n\n/** Registers one or more translations */\nexport function registerTranslation(...translation: Translation[]) {\n translation.forEach((t) => {\n const code = t.$code.toLowerCase();\n\n if (translations.has(code)) {\n // Merge translations that share the same language code\n translations.set(code, { ...translations.get(code), ...t });\n } else {\n translations.set(code, t);\n }\n\n // The first translation that's registered is the fallback\n if (!fallback) {\n fallback = t;\n }\n });\n\n update();\n}\ndeclare global {\n interface Window {\n registerTranslation: typeof registerTranslation;\n }\n}\n\nwindow.registerTranslation = registerTranslation;\n\n/**\n * Localize Reactive Controller for components built with Lit\n *\n * To use this controller, import the class and instantiate it in a custom element constructor:\n *\n * private localize = new LocalizeController(this);\n *\n * This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it\n * respond to changes to its own dir|lang properties, make it a property:\n *\n * @property() dir: string;\n * @property() lang: string;\n *\n * To use a translation method, call it like this:\n *\n * ${this.localize.term('term_key_here')}\n * ${this.localize.date('2021-12-03')}\n * ${this.localize.number(1000000)}\n */\nexport class LocalizeController<UserTranslation extends Translation = DefaultTranslation>\n implements ReactiveController\n{\n host: ReactiveControllerHost & HTMLElement;\n\n constructor(host: ReactiveControllerHost & HTMLElement) {\n this.host = host;\n this.host.addController(this);\n }\n\n hostConnected() {\n connectedElements.add(this.host);\n }\n\n hostDisconnected() {\n connectedElements.delete(this.host);\n }\n\n /**\n * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to\n * lowercase.\n */\n dir() {\n return `${this.host.dir || documentDirection}`.toLowerCase();\n }\n\n /**\n * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to\n * lowercase.\n */\n lang() {\n return `${this.host.lang || documentLanguage}`.toLowerCase();\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getTranslationData(lang: string) {\n // Convert \"en_US\" to \"en-US\". Note that both underscores and dashes are allowed per spec, but underscores result in\n // a RangeError by the call to `new Intl.Locale()`. See: https://unicode.org/reports/tr35/#unicode-locale-identifier\n const locale = new Intl.Locale(lang.replace(/_/g, '-'));\n const language = locale?.language.toLowerCase();\n const region = locale?.region?.toLowerCase() ?? '';\n const primary = <UserTranslation>translations.get(`${language}-${region}`);\n const secondary = <UserTranslation>translations.get(language);\n\n return { locale, language, region, primary, secondary };\n }\n\n /** Determines if the specified term exists, optionally checking the fallback translation. */\n exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean {\n const { primary, secondary } = this.getTranslationData(options.lang ?? this.lang());\n\n const mergedOptions = {\n includeFallback: false,\n ...options,\n };\n\n if (\n (primary && primary[key]) ||\n (secondary && secondary[key]) ||\n (mergedOptions.includeFallback && fallback && fallback[key as keyof Translation])\n ) {\n return true;\n }\n\n return false;\n }\n\n /** Outputs a translated term. */\n term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string {\n const { primary, secondary } = this.getTranslationData(this.lang());\n let term: any;\n\n // Look for a matching term using regionCode, code, then the fallback\n if (primary && primary[key]) {\n term = primary[key];\n } else if (secondary && secondary[key]) {\n term = secondary[key];\n } else if (fallback && fallback[key as keyof Translation]) {\n term = fallback[key as keyof Translation];\n } else {\n // eslint-disable-next-line no-console\n console.error(`No translation found for: ${String(key)}`);\n return String(key);\n }\n\n if (typeof term === 'function') {\n return term(...args) as string;\n }\n\n return term;\n }\n\n /** Outputs a localized date in the specified format. */\n date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {\n const date = new Date(dateToFormat);\n return new Intl.DateTimeFormat(this.lang(), options).format(date);\n }\n\n /** Outputs a localized number in the specified format. */\n number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string {\n const num = Number(numberToFormat);\n return Number.isNaN(num) ? '' : new Intl.NumberFormat(this.lang(), options).format(num);\n }\n\n /** Outputs a localized time in relative format. */\n relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string {\n return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);\n }\n}\n","import { ReactiveControllerHost } from 'lit';\nimport { LocalizeController } from '../controllers/localize.js';\nimport { Constructor } from '../index.js';\n\n/**\n * @param Base The base class.\n * @returns A mix-in implementing `localizations` method.\n *\n *@example\n * <!-- Terms -->\n ${this.$localize.term('hello')}\n or\n ${this.$t('hello')}\n\n <!-- Dates -->\n ${this.$localize.date('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}\n or\n ${this.$d('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}\n\n <!-- Numbers/currency -->\n ${this.$localize.number(1000, { style: 'currency', currency: 'USD'})}\n or\n ${this.$n(1000,{ style: 'currency', currency: 'USD'})}\n\n <!-- Determining language -->\n ${this.$localize.lang()}\n\n <!-- Determining directionality, e.g. 'ltr' or 'rtl' -->\n ${this.$localize.dir()}\n\n\n *** HOW TO DEFINE TRANSLATIONS: ***\n // Simple terms\n upload: 'Upload',\n\n // Terms with placeholders\n greetUser: (name: string) => `Hello, ${name}!`,\n\n // Plurals\n numFilesSelected: (count: number) => {\n if (count === 0) return 'No files selected';\n if (count === 1) return '1 file selected';\n return `${count} files selected`;\n }\n */\n\nconst LocalizeMixin = <T extends Constructor<ReactiveControllerHost & HTMLElement>>(Base: T) =>\n class extends Base {\n public localize: LocalizeController = new LocalizeController(this);\n\n // Provide default values to avoid definite assignment errors and avoid decorators\n dir: string = '';\n\n lang: string = '';\n\n /**\n * Restituisce tutta l'utility di traduzione\n *\n\n *\n * @returns tutta l'utility di traduzione\n *\n * @example\n * this.$localize.lang() -> ritorna la lingua corrente\n * this.$localize.dir() -> ritorna la direzione della lingua corrente\n */\n get $localize() {\n return this.localize;\n }\n\n /**\n * Restituisce una stringa localizzata a partire da una chiave di termine.\n *\n * Utilizza il `LocalizeController` per accedere al dizionario corrente e\n * tradurre la chiave fornita secondo la lingua attiva.\n *\n * @param t - La chiave del termine da localizzare (es. 'hello', 'submit', ecc.).\n * @returns La stringa tradotta in base alla lingua attiva. Se la chiave non è trovata, restituisce la chiave stessa.\n *\n * @example\n * this.$t('hello'); // → \"Ciao\" (in locale it-IT)\n */\n public $t(t: string) {\n // format term\n return this.localize.term(t);\n }\n\n /**\n * Formatta una data in base alla localizzazione attiva.\n *\n * Utilizza il `LocalizeController` per restituire una stringa localizzata\n * secondo le opzioni fornite (es. mese esteso, anno, ecc.).\n *\n * @param n - La data da formattare come stringa compatibile (es. ISO o con timezone, es. '2021-09-15 14:00:00 ET').\n * @param p - Le opzioni di formattazione per `Intl.DateTimeFormat` (es. { year: 'numeric', month: 'long', day: 'numeric' }).\n * @returns Una stringa rappresentante la data formattata secondo la localizzazione attiva.\n *\n * @example\n * this.$d('2021-09-15 14:00:00 ET', { year: 'numeric', month: 'long', day: 'numeric' });\n * // → \"15 settembre 2021\" (in locale it-IT)\n */\n public $d(d: Date | string, p: Intl.DateTimeFormatOptions) {\n // format date\n return this.localize.date(d, p);\n }\n\n /**\n * Formatta un numero secondo le impostazioni locali dell'utente corrente.\n *\n * Utilizza il `LocalizeController` per applicare formattazione numerica,\n * incluse opzioni come separatori, decimali, valute, ecc.\n *\n * @param d - Il numero da formattare.\n * @param p - Le opzioni di formattazione (es. { style: 'currency', currency: 'EUR' }).\n * @returns Una stringa rappresentante il numero formattato secondo la localizzazione attiva.\n *\n * @example\n * this.$n(1234.56, { style: 'currency', currency: 'USD' }); // → \"$1,234.56\" (in locale en-US)\n */\n public $n(d: number, p: Intl.NumberFormatOptions) {\n return this.localize.number(d, p);\n }\n };\n\nexport default LocalizeMixin;\n\n// export interface LocalizedComponent {\n// $t(t: string): string;\n// $d(d: Date | string, p?: Intl.DateTimeFormatOptions): string;\n// $n(n: number, p?: Intl.NumberFormatOptions): string;\n// $localize: LocalizeController;\n// }\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/controllers/localize.ts","../../../src/mixins/localization.ts"],"sourcesContent":["import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];\n\nexport interface Translation {\n $code: string; // e.g. en, en-GB\n $name: string; // e.g. English, Español\n $dir: 'ltr' | 'rtl';\n}\n\nexport interface DefaultTranslation extends Translation {\n [key: string]: any;\n}\n\nexport interface ExistsOptions {\n lang: string;\n includeFallback: boolean;\n}\n\nconst connectedElements = new Set<HTMLElement>();\n\ndeclare global {\n interface Window {\n translations?: Map<string, Translation>;\n }\n}\n\nif (window && !window.translations) {\n window.translations = new Map<string, Translation>();\n}\n\nconst { translations }: { translations: Map<string, Translation> } = window as Window & {\n translations: Map<string, Translation>;\n};\n\nlet fallback: Translation;\n\n// TODO: We need some way for users to be able to set these on the server.\nlet documentDirection = 'ltr';\n\n// Fallback for server.\nlet documentLanguage = 'en';\n\nconst isClient =\n typeof MutationObserver !== 'undefined' &&\n typeof document !== 'undefined' &&\n typeof document.documentElement !== 'undefined';\n\n/** Updates all localized elements that are currently connected */\nexport function update() {\n if (isClient) {\n documentDirection = document.documentElement.dir || 'ltr';\n documentLanguage = document.documentElement.lang || navigator.language;\n }\n\n [...connectedElements.keys()].forEach((el) => {\n const litEl = el as unknown as LitElement;\n if (typeof litEl.requestUpdate === 'function') {\n litEl.requestUpdate();\n }\n });\n}\n\nif (isClient) {\n const documentElementObserver = new MutationObserver(update);\n documentDirection = document.documentElement.dir || 'ltr';\n documentLanguage = document.documentElement.lang || navigator.language;\n\n // Watch for changes on <html lang>\n documentElementObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['dir', 'lang'],\n });\n}\n\n/** Registers one or more translations */\nexport function registerTranslation(...translation: Translation[]) {\n translation.forEach((t) => {\n const code = t.$code.toLowerCase();\n\n if (translations.has(code)) {\n // Merge translations that share the same language code\n translations.set(code, { ...translations.get(code), ...t });\n } else {\n translations.set(code, t);\n }\n\n // The first translation that's registered is the fallback\n if (!fallback) {\n fallback = t;\n }\n });\n\n update();\n}\ndeclare global {\n interface Window {\n registerTranslation: typeof registerTranslation;\n }\n}\n\nwindow.registerTranslation = registerTranslation;\n\n/**\n * Localize Reactive Controller for components built with Lit\n *\n * To use this controller, import the class and instantiate it in a custom element constructor:\n *\n * private localize = new LocalizeController(this);\n *\n * This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it\n * respond to changes to its own dir|lang properties, make it a property:\n *\n * @property() dir: string;\n * @property() lang: string;\n *\n * To use a translation method, call it like this:\n *\n * ${this.localize.term('term_key_here')}\n * ${this.localize.date('2021-12-03')}\n * ${this.localize.number(1000000)}\n */\nexport class LocalizeController<UserTranslation extends Translation = DefaultTranslation>\n implements ReactiveController\n{\n host: ReactiveControllerHost & HTMLElement;\n\n constructor(host: ReactiveControllerHost & HTMLElement) {\n this.host = host;\n this.host.addController(this);\n }\n\n hostConnected() {\n connectedElements.add(this.host);\n }\n\n hostDisconnected() {\n connectedElements.delete(this.host);\n }\n\n /**\n * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to\n * lowercase.\n */\n dir() {\n return `${this.host.dir || documentDirection}`.toLowerCase();\n }\n\n /**\n * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to\n * lowercase.\n */\n lang() {\n return `${this.host.lang || documentLanguage}`.toLowerCase();\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getTranslationData(lang: string) {\n // Convert \"en_US\" to \"en-US\". Note that both underscores and dashes are allowed per spec, but underscores result in\n // a RangeError by the call to `new Intl.Locale()`. See: https://unicode.org/reports/tr35/#unicode-locale-identifier\n const locale = new Intl.Locale(lang.replace(/_/g, '-'));\n const language = locale?.language.toLowerCase();\n const region = locale?.region?.toLowerCase() ?? '';\n const primary = <UserTranslation>translations.get(`${language}-${region}`);\n const secondary = <UserTranslation>translations.get(language);\n\n return { locale, language, region, primary, secondary };\n }\n\n /** Determines if the specified term exists, optionally checking the fallback translation. */\n exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean {\n const { primary, secondary } = this.getTranslationData(options.lang ?? this.lang());\n\n const mergedOptions = {\n includeFallback: false,\n ...options,\n };\n\n if (\n (primary && primary[key]) ||\n (secondary && secondary[key]) ||\n (mergedOptions.includeFallback && fallback && fallback[key as keyof Translation])\n ) {\n return true;\n }\n\n return false;\n }\n\n /** Outputs a translated term. */\n term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string {\n const { primary, secondary } = this.getTranslationData(this.lang());\n let term: any;\n\n // Look for a matching term using regionCode, code, then the fallback\n if (primary && primary[key]) {\n term = primary[key];\n } else if (secondary && secondary[key]) {\n term = secondary[key];\n } else if (fallback && fallback[key as keyof Translation]) {\n term = fallback[key as keyof Translation];\n } else {\n // eslint-disable-next-line no-console\n console.error(`No translation found for: ${String(key)}`);\n return String(key);\n }\n\n if (typeof term === 'function') {\n return term(...args) as string;\n }\n\n return term;\n }\n\n /** Outputs a localized date in the specified format. */\n date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {\n const date = new Date(dateToFormat);\n return new Intl.DateTimeFormat(this.lang(), options).format(date);\n }\n\n /** Outputs a localized number in the specified format. */\n number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string {\n const num = Number(numberToFormat);\n return Number.isNaN(num) ? '' : new Intl.NumberFormat(this.lang(), options).format(num);\n }\n\n /** Outputs a localized time in relative format. */\n relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string {\n return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);\n }\n}\n","import { ReactiveControllerHost } from 'lit';\nimport { LocalizeController } from '../controllers/localize.js';\nimport { Constructor } from '../index.js';\n\n/**\n * @param Base The base class.\n * @returns A mix-in implementing `localizations` method.\n *\n *@example\n * <!-- Terms -->\n ${this.$localize.term('hello')}\n or\n ${this.$t('hello')}\n\n <!-- Dates -->\n ${this.$localize.date('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}\n or\n ${this.$d('2021-09-15 14:00:00 ET', { month: 'long', day: 'numeric', year: 'numeric' })}\n\n <!-- Numbers/currency -->\n ${this.$localize.number(1000, { style: 'currency', currency: 'USD'})}\n or\n ${this.$n(1000,{ style: 'currency', currency: 'USD'})}\n\n <!-- Determining language -->\n ${this.$localize.lang()}\n\n <!-- Determining directionality, e.g. 'ltr' or 'rtl' -->\n ${this.$localize.dir()}\n\n\n *** HOW TO DEFINE TRANSLATIONS: ***\n // Simple terms\n upload: 'Upload',\n\n // Terms with placeholders\n greetUser: (name: string) => `Hello, ${name}!`,\n\n // Plurals\n numFilesSelected: (count: number) => {\n if (count === 0) return 'No files selected';\n if (count === 1) return '1 file selected';\n return `${count} files selected`;\n }\n */\n\nconst LocalizeMixin = <T extends Constructor<ReactiveControllerHost & HTMLElement>>(Base: T) =>\n class extends Base {\n public localize: LocalizeController = new LocalizeController(this);\n\n // Provide default values to avoid definite assignment errors and avoid decorators\n // commentati perchè danno problemi su React.js. Sono attributi nativi, e assegnare un valore di default a react da fastidio\n // dir: string = '';\n // lang: string = '';\n\n /**\n * Restituisce tutta l'utility di traduzione\n *\n\n *\n * @returns tutta l'utility di traduzione\n *\n * @example\n * this.$localize.lang() -> ritorna la lingua corrente\n * this.$localize.dir() -> ritorna la direzione della lingua corrente\n */\n get $localize() {\n return this.localize;\n }\n\n /**\n * Restituisce una stringa localizzata a partire da una chiave di termine.\n *\n * Utilizza il `LocalizeController` per accedere al dizionario corrente e\n * tradurre la chiave fornita secondo la lingua attiva.\n *\n * @param t - La chiave del termine da localizzare (es. 'hello', 'submit', ecc.).\n * @returns La stringa tradotta in base alla lingua attiva. Se la chiave non è trovata, restituisce la chiave stessa.\n *\n * @example\n * this.$t('hello'); // → \"Ciao\" (in locale it-IT)\n */\n public $t(t: string) {\n // format term\n return this.localize.term(t);\n }\n\n /**\n * Formatta una data in base alla localizzazione attiva.\n *\n * Utilizza il `LocalizeController` per restituire una stringa localizzata\n * secondo le opzioni fornite (es. mese esteso, anno, ecc.).\n *\n * @param n - La data da formattare come stringa compatibile (es. ISO o con timezone, es. '2021-09-15 14:00:00 ET').\n * @param p - Le opzioni di formattazione per `Intl.DateTimeFormat` (es. { year: 'numeric', month: 'long', day: 'numeric' }).\n * @returns Una stringa rappresentante la data formattata secondo la localizzazione attiva.\n *\n * @example\n * this.$d('2021-09-15 14:00:00 ET', { year: 'numeric', month: 'long', day: 'numeric' });\n * // → \"15 settembre 2021\" (in locale it-IT)\n */\n public $d(d: Date | string, p: Intl.DateTimeFormatOptions) {\n // format date\n return this.localize.date(d, p);\n }\n\n /**\n * Formatta un numero secondo le impostazioni locali dell'utente corrente.\n *\n * Utilizza il `LocalizeController` per applicare formattazione numerica,\n * incluse opzioni come separatori, decimali, valute, ecc.\n *\n * @param d - Il numero da formattare.\n * @param p - Le opzioni di formattazione (es. { style: 'currency', currency: 'EUR' }).\n * @returns Una stringa rappresentante il numero formattato secondo la localizzazione attiva.\n *\n * @example\n * this.$n(1234.56, { style: 'currency', currency: 'USD' }); // → \"$1,234.56\" (in locale en-US)\n */\n public $n(d: number, p: Intl.NumberFormatOptions) {\n return this.localize.number(d, p);\n }\n };\n\nexport default LocalizeMixin;\n\n// export interface LocalizedComponent {\n// $t(t: string): string;\n// $d(d: Date | string, p?: Intl.DateTimeFormatOptions): string;\n// $n(n: number, p?: Intl.NumberFormatOptions): string;\n// $localize: LocalizeController;\n// }\n"],"names":[],"mappings":"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"}
|
|
@@ -45,8 +45,6 @@ import { Constructor } from '../index.js';
|
|
|
45
45
|
declare const LocalizeMixin: <T extends Constructor<ReactiveControllerHost & HTMLElement>>(Base: T) => {
|
|
46
46
|
new (...args: any[]): {
|
|
47
47
|
localize: LocalizeController;
|
|
48
|
-
dir: string;
|
|
49
|
-
lang: string;
|
|
50
48
|
/**
|
|
51
49
|
* Restituisce tutta l'utility di traduzione
|
|
52
50
|
*
|
|
@@ -108,10 +106,12 @@ declare const LocalizeMixin: <T extends Constructor<ReactiveControllerHost & HTM
|
|
|
108
106
|
accessKey: string;
|
|
109
107
|
readonly accessKeyLabel: string;
|
|
110
108
|
autocapitalize: string;
|
|
109
|
+
dir: string;
|
|
111
110
|
draggable: boolean;
|
|
112
111
|
hidden: boolean;
|
|
113
112
|
inert: boolean;
|
|
114
113
|
innerText: string;
|
|
114
|
+
lang: string;
|
|
115
115
|
readonly offsetHeight: number;
|
|
116
116
|
readonly offsetLeft: number;
|
|
117
117
|
readonly offsetParent: Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localization.d.ts","sourceRoot":"","sources":["../../../src/mixins/localization.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,CAAC,sBAAsB,GAAG,WAAW,CAAC,EAAE,MAAM,CAAC;;kBAEtE,kBAAkB;
|
|
1
|
+
{"version":3,"file":"localization.d.ts","sourceRoot":"","sources":["../../../src/mixins/localization.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,CAAC,sBAAsB,GAAG,WAAW,CAAC,EAAE,MAAM,CAAC;;kBAEtE,kBAAkB;QAOnC;;;;;;;;;;WAUG;;QAKH;;;;;;;;;;;WAWG;cACU,MAAM;QAKnB;;;;;;;;;;;;;WAaG;cACU,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC,qBAAqB;QAKzD;;;;;;;;;;;;WAYG;cACU,MAAM,KAAK,IAAI,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAGjD,CAAC;AAEJ,eAAe,aAAa,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@italia/i18n",
|
|
3
3
|
"description": "Translations utility del Design system .italia",
|
|
4
|
-
"version": "0.1.0-alpha.
|
|
4
|
+
"version": "0.1.0-alpha.2",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
8
|
"license": "BSD-3-Clause",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "https://github.com/italia/
|
|
11
|
+
"url": "https://github.com/italia/dev-kit-italia.git",
|
|
12
12
|
"directory": "packages/i18n"
|
|
13
13
|
},
|
|
14
14
|
"author": "Presidenza del Consiglio dei Ministri",
|
|
15
|
-
"homepage": "https://italia.github.io/
|
|
15
|
+
"homepage": "https://italia.github.io/dev-kit-italia",
|
|
16
16
|
"bugs": {
|
|
17
|
-
"url": "https://github.com/italia/
|
|
17
|
+
"url": "https://github.com/italia/dev-kit-italia/issues"
|
|
18
18
|
},
|
|
19
19
|
"type": "module",
|
|
20
20
|
"main": "./dist/src/index.js",
|
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
"dist/src",
|
|
29
29
|
"README.md",
|
|
30
30
|
"AUTHORS",
|
|
31
|
-
"LICENSE"
|
|
31
|
+
"LICENSE",
|
|
32
|
+
"custom-elements.json"
|
|
32
33
|
],
|
|
33
34
|
"dependencies": {
|
|
34
35
|
"lit": "^3.3.0"
|
|
@@ -40,18 +41,22 @@
|
|
|
40
41
|
"@rollup/plugin-typescript": "^12.1.2",
|
|
41
42
|
"@types/mocha": "^10.0.10",
|
|
42
43
|
"@web/test-runner": "^0.18.2",
|
|
44
|
+
"rimraf": "^6.0.1",
|
|
43
45
|
"rollup": "^4.42.0",
|
|
44
46
|
"tslib": "^2.6.3",
|
|
45
47
|
"typescript": "^5.5.3",
|
|
46
|
-
"@italia/
|
|
47
|
-
"@italia/
|
|
48
|
+
"@italia/test-config": "^0.0.0",
|
|
49
|
+
"@italia/typescript-config": "^0.0.0"
|
|
48
50
|
},
|
|
51
|
+
"customElements": "custom-elements.json",
|
|
49
52
|
"scripts": {
|
|
50
53
|
"analyze": "cem analyze --litelement --exclude dist",
|
|
51
54
|
"build": "rollup --config rollup.config.js",
|
|
52
55
|
"clean": "rimraf node_modules .turbo .rollup.cache dist coverage",
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
+
"prepublish": "pnpm build",
|
|
57
|
+
"lint": "eslint --ext .ts \"src/**/*.ts\" \"test/**/*.ts\" && prettier \"src/**/*.ts\" \"test/**/*.ts\" --check",
|
|
58
|
+
"format": "eslint --ext .ts \"src/**/*.ts\" \"test/**/*.ts\" --fix && prettier \"src/**/*.ts\" \"test/**/*.ts\" --write",
|
|
59
|
+
"test": "wtr --coverage --node-resolve --config web-test-runner.config.js",
|
|
60
|
+
"test:watch": "wtr --coverage --node-resolve --config web-test-runner.config.js --watch"
|
|
56
61
|
}
|
|
57
62
|
}
|