@brightspace-ui/intl 3.9.0 → 3.11.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.
Files changed (7) hide show
  1. package/README.md +38 -14
  2. package/lib/common.js +3 -2
  3. package/lib/dateTime.js +4 -4
  4. package/lib/fileSize.js +1 -1
  5. package/lib/list.js +22 -0
  6. package/lib/number.js +3 -3
  7. package/package.json +8 -5
package/README.md CHANGED
@@ -22,8 +22,8 @@ npm install @brightspace-ui/intl
22
22
  Then `import` only the functionality you need:
23
23
 
24
24
  ```javascript
25
- import {formatDate, formatTime} from '@brightspace-ui/intl/lib/dateTime.js';
26
- import {formatNumber, formatPercent} from '@brightspace-ui/intl/lib/number.js';
25
+ import { formatDate, formatTime } from '@brightspace-ui/intl/lib/dateTime.js';
26
+ import { formatNumber, formatPercent } from '@brightspace-ui/intl/lib/number.js';
27
27
  ```
28
28
 
29
29
  All of the APIs will automatically detect the document's language via the `lang` attribute on the `<html>` element. They'll also look for various `data-` attributes that will be present in Brightspace pages to access override and timezone information.
@@ -33,7 +33,7 @@ All of the APIs will automatically detect the document's language via the `lang`
33
33
  Integer and decimal numbers can be formatted in the user's locale using `formatNumber`. Percentages can be formatted using `formatPercent`. Use the optional `options` parameter for rounding.
34
34
 
35
35
  ```javascript
36
- import {formatNumber, formatPercent} from '@brightspace-ui/intl/lib/number.js';
36
+ import { formatNumber, formatPercent } from '@brightspace-ui/intl/lib/number.js';
37
37
 
38
38
  const number = formatNumber(8902.72, [options]); // -> '8,902.72' in en-US
39
39
  const percent = formatPercent(0.333, [options]); // -> '33.3 %' in en-US
@@ -47,7 +47,7 @@ Options:
47
47
  Formatting as an integer (rounded to 0 decimal places):
48
48
 
49
49
  ```javascript
50
- import {formatNumber} from '@brightspace-ui/intl/lib/number.js';
50
+ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
51
51
 
52
52
  const value = formatNumber(89.72, {
53
53
  maximumFractionDigits: 0
@@ -57,7 +57,7 @@ const value = formatNumber(89.72, {
57
57
  Formatting as a percentage (rounded to 2 decimal places, but always showing at least 2 decimals):
58
58
 
59
59
  ```javascript
60
- import {formatPercent} from '@brightspace-ui/intl/lib/number.js';
60
+ import { formatPercent } from '@brightspace-ui/intl/lib/number.js';
61
61
 
62
62
  const value = formatPercent(0.333, {
63
63
  minimumFractionDigits: 2,
@@ -70,7 +70,7 @@ const value = formatPercent(0.333, {
70
70
  The `parseNumber` method can be used to parse an integer or decimal number written in the user's locale.
71
71
 
72
72
  ```javascript
73
- import {parseNumber} from '@brightspace-ui/intl/lib/number.js';
73
+ import { parseNumber } from '@brightspace-ui/intl/lib/number.js';
74
74
 
75
75
  const value = parseNumber('-8 942,39'); // -> -8942.39 in fr-CA
76
76
  ```
@@ -84,7 +84,7 @@ Timestamps (milliseconds since the epoch) can be formatted in the user's locale
84
84
  Combined dates and times are formatted using `formatDateTime`:
85
85
 
86
86
  ```javascript
87
- import {formatDateTime} from '@brightspace-ui/intl/lib/dateTime.js';
87
+ import { formatDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
88
88
 
89
89
  const date = formatDateTime(
90
90
  new Date(2015, 8, 23, 14, 5),
@@ -137,7 +137,7 @@ configured time zone, then returns the results of passing this date to `formatTi
137
137
  To format a **date only** (without the time portion), use `formatDate`:
138
138
 
139
139
  ```javascript
140
- import {formatDate} from '@brightspace-ui/intl/lib/dateTime.js';
140
+ import { formatDate } from '@brightspace-ui/intl/lib/dateTime.js';
141
141
 
142
142
  const value = formatDate(
143
143
  new Date(2015, 8, 23),
@@ -161,7 +161,7 @@ Options:
161
161
  To format a **time only** (without the date portion), use `formatTime`:
162
162
 
163
163
  ```javascript
164
- import {formatTime} from '@brightspace-ui/intl/lib/dateTime.js';
164
+ import { formatTime } from '@brightspace-ui/intl/lib/dateTime.js';
165
165
 
166
166
  const time = formatTime(
167
167
  new Date(2015, 8, 23, 14, 5)
@@ -178,7 +178,7 @@ Options:
178
178
  To parse a date written in the user's locale, use `parseDate`:
179
179
 
180
180
  ```javascript
181
- import {parseDate} from '@brightspace-ui/intl/lib/dateTime.js';
181
+ import { parseDate } from '@brightspace-ui/intl/lib/dateTime.js';
182
182
 
183
183
  const date = parseDate('2015-09-23'); // in fr-CA
184
184
  date.getFullYear(); // -> 2015
@@ -191,7 +191,7 @@ date.getDate(); // -> 23
191
191
  To parse a time written in the user's locale, use `parseTime`:
192
192
 
193
193
  ```javascript
194
- import {parseTime} from '@brightspace-ui/intl/lib/dateTime.js';
194
+ import { parseTime } from '@brightspace-ui/intl/lib/dateTime.js';
195
195
 
196
196
  const date = parseTime('14 h 05'); // in fr-CA
197
197
  date.getHours(); // -> 14
@@ -202,7 +202,7 @@ date.getMinutes(); // -> 5
202
202
 
203
203
  To convert an object containing a UTC date to an object containing a local date corresponding to the `data-timezone` attribute:
204
204
  ```javascript
205
- import {convertUTCToLocalDateTime} from '@brightspace-ui/intl/lib/dateTime.js';
205
+ import { convertUTCToLocalDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
206
206
 
207
207
  const UTCDateTime = {
208
208
  month: 12,
@@ -219,7 +219,7 @@ const localDateTime = convertUTCToLocalDateTime(
219
219
 
220
220
  To convert an object containing a local date corresponding to the `data-timezone` attribute to an object containing a UTC date:
221
221
  ```javascript
222
- import {convertLocalToUTCDateTime} from '@brightspace-ui/intl/lib/dateTime.js';
222
+ import { convertLocalToUTCDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
223
223
 
224
224
  const localDateTime = {
225
225
  month: 12,
@@ -239,11 +239,35 @@ const UTCDateTime = convertLocalToUTCDateTime(
239
239
  Use `formatFileSize` to format a file size appropriately for the user's locale.
240
240
 
241
241
  ```javascript
242
- import {formatFileSize} from '@brightspace-ui/intl/lib/fileSize.js';
242
+ import { formatFileSize } from '@brightspace-ui/intl/lib/fileSize.js';
243
243
 
244
244
  const fileSize = formatFileSize(100); // -> '100 bytes' in en-US
245
245
  ```
246
246
 
247
+ ## List Formatting
248
+
249
+ Use `getSeparator` to get the appropriate list separator for the current locale. This is a separator that would be used in spoken language; note that the separator includes a space, for locales where it is appropriate.
250
+
251
+ ```javascript
252
+ import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
253
+
254
+ const separator = getSeparator(); // -> ', ' in en-US
255
+ const separator = getSeparator({ nonBreaking: true }); // -> ',\xa0' in en-US
256
+ ```
257
+
258
+ Options:
259
+ - **nonBreaking**: a Boolean flag, whether to use non-breaking spaces instead of standard spaces; default is `false`
260
+
261
+ ## Running the test harness
262
+
263
+ Start a [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) that hosts the test harness:
264
+
265
+ ```shell
266
+ npm start
267
+ ```
268
+
269
+ This will let you test the intl library in a browser, and will update live with any changes.
270
+
247
271
  ## Contributing
248
272
 
249
273
  Contributions are welcome, please submit a pull request!
package/lib/common.js CHANGED
@@ -59,7 +59,7 @@ export function merge(obj1, obj2) {
59
59
  if (obj2 === undefined || obj2 === null || typeof(obj2) !== 'object') {
60
60
  return;
61
61
  }
62
- for (var i in obj2) {
62
+ for (const i in obj2) {
63
63
  // eslint-disable-next-line no-prototype-builtins
64
64
  if (obj1.hasOwnProperty(i)) {
65
65
  if (typeof(obj2[i]) === 'object' && typeof(obj1[i]) === 'object') {
@@ -93,6 +93,7 @@ class DocumentLocaleSettings {
93
93
  this._observer = new MutationObserver(this._handleObserverChange.bind(this));
94
94
  this._observer.observe(this._htmlElem, { attributes: true });
95
95
  this.sync();
96
+ this._languageInitial = this._language;
96
97
  }
97
98
 
98
99
  get fallbackLanguage() { return this._fallbackLanguage; }
@@ -136,7 +137,7 @@ class DocumentLocaleSettings {
136
137
  }
137
138
 
138
139
  reset() {
139
- this._language = null;
140
+ this._language = this._languageInitial;
140
141
  this._fallbackLanguage = null;
141
142
  this.overrides = {};
142
143
  this.timezone = { name: '', identifier: '' };
package/lib/dateTime.js CHANGED
@@ -354,8 +354,8 @@ function getParts() {
354
354
  const separator = getSeparator();
355
355
  const parts = descriptor.formats.dateFormats.short.split(separator);
356
356
 
357
- for (var i = 0; i < parts.length; i++) {
358
- var part = parts[i].trim();
357
+ for (let i = 0; i < parts.length; i++) {
358
+ const part = parts[i].trim();
359
359
  switch (part) {
360
360
  case 'dd':
361
361
  case 'd':
@@ -605,13 +605,13 @@ function prePadByZero(input, maxNum) {
605
605
  function processPattern(pattern, replacements) {
606
606
 
607
607
  let reStr = '';
608
- Object.keys(replacements).forEach(function(key) {
608
+ Object.keys(replacements).forEach((key) => {
609
609
  reStr += ((reStr === '') ? '' : '|') + key;
610
610
  });
611
611
  const re = new RegExp(reStr, 'g');
612
612
 
613
613
  const doReplacements = function(buf) {
614
- return buf.replace(re, function(m) {
614
+ return buf.replace(re, (m) => {
615
615
  return replacements[m];
616
616
  });
617
617
  };
package/lib/fileSize.js CHANGED
@@ -1,5 +1,5 @@
1
- import { formatNumber } from './number.js';
2
1
  import { getLanguage, validateFormatValue } from './common.js';
2
+ import { formatNumber } from './number.js';
3
3
 
4
4
  export function getFileSizeDescriptor() {
5
5
 
package/lib/list.js ADDED
@@ -0,0 +1,22 @@
1
+ import { getLanguage } from './common.js';
2
+
3
+ const nbsp = '\xa0';
4
+
5
+ /**
6
+ * Returns a region-specific list separator for the current language.
7
+ * @param { Boolean } nonBreaking Whether to replace spaces with non-breaking spaces.
8
+ */
9
+ export function getSeparator({ nonBreaking } = {}) {
10
+ const langTag = getLanguage();
11
+ const baseLanguage = langTag.split('-')[0];
12
+ const space = nonBreaking ? nbsp : ' ';
13
+
14
+ // In this function, most languages return the separator used by the Intl.ListFormat() API with options:
15
+ // { style: 'short', type: 'conjunction' }
16
+ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
17
+ // Arabic, due to some inconsistencies, returns the separator used by Google Translate.
18
+
19
+ if (baseLanguage === 'ar') return `${space}،${space}`;
20
+ if (['ja', 'zh'].includes(baseLanguage)) return '、';
21
+ return `,${space}`;
22
+ }
package/lib/number.js CHANGED
@@ -12,7 +12,7 @@ function formatPositiveInteger(value, descriptor, useGrouping) {
12
12
  return value.toString();
13
13
  }
14
14
 
15
- const valueStr = '' + value;
15
+ const valueStr = `${value}`;
16
16
  let ret = '';
17
17
 
18
18
  const groupSizes = Array.isArray(descriptor.groupSize) ? descriptor.groupSize : [descriptor.groupSize];
@@ -87,7 +87,7 @@ function validateInteger(name, value, defaultValue, min, max) {
87
87
  value = parseInt(value);
88
88
  }
89
89
  if (isNaN(value) || typeof value !== 'number' || (min !== undefined && value < min) || (max !== undefined && value > max)) {
90
- throw new RangeError(name + ' value is out of range.');
90
+ throw new RangeError(`${name} value is out of range.`);
91
91
  }
92
92
 
93
93
  return value;
@@ -253,7 +253,7 @@ export function parseNumber(value) {
253
253
  const descriptor = getNumberDescriptor();
254
254
 
255
255
  value = value.replace(
256
- new RegExp('\\s|[' + descriptor.symbols.group + ']', 'g'),
256
+ new RegExp(`\\s|[${descriptor.symbols.group}]`, 'g'),
257
257
  ''
258
258
  );
259
259
  if (value === '') {
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@brightspace-ui/intl",
3
- "version": "3.9.0",
3
+ "version": "3.11.0",
4
4
  "description": "Internationalization APIs for number, date, time and file size formatting and parsing in D2L Brightspace.",
5
5
  "main": "lib/number.js",
6
6
  "scripts": {
7
- "lint": "eslint lib test --ext .js",
7
+ "lint": "eslint . --ext .js",
8
+ "start": "web-dev-server --node-resolve --watch --open /demo/",
8
9
  "test:unit": "concurrently -p name -n serve,test -s first -k \"http-server -p 8080 . -s\" \"mocha-headless-chrome -f http://localhost:8080/test/index.html -a no-sandbox -a disable-setuid-sandbox\"",
9
10
  "test": "npm run lint -s && npm run test:unit -s"
10
11
  },
@@ -37,14 +38,16 @@
37
38
  "devDependencies": {
38
39
  "@babel/core": "^7",
39
40
  "@babel/eslint-parser": "^7",
41
+ "@web/dev-server": "^0.1.33",
40
42
  "chai": "^4",
41
43
  "concurrently": "^7",
42
44
  "eslint": "^8",
43
- "eslint-config-brightspace": "^0.16",
44
- "eslint-plugin-html": "^6",
45
+ "eslint-config-brightspace": "^0.18",
46
+ "eslint-plugin-html": "^7",
47
+ "eslint-plugin-import": "^2",
45
48
  "eslint-plugin-sort-class-members": "^1",
46
49
  "http-server": "^14.0",
47
- "mocha": "^9",
50
+ "mocha": "^10",
48
51
  "mocha-headless-chrome": "^4"
49
52
  }
50
53
  }