Feat: add displayName Intl function

docs/translate.md

@@ -155,7 +155,7 @@ It uses the currency code set in `currency` property of the `SpeakLocale`.
 ### Unit
 To format as unit, you have to set the `style` and `unit` properties of the second param:
 ```jsx
-const units = useSpeakLocale().units!;
+const units = useSpeakLocale().units!
 
 formatNumber(1, { style: 'unit', unit: units['length'] })
 ```
@@ -167,7 +167,16 @@ It uses the unit set in `units` property of the `SpeakLocale`:
 units: { 'length': 'mile' }
 ```
 
-> The locale used by `formatDate`, `relativeTime` and `formatNumber`  is primarily the `extension` property of the `SpeakLocale` if provided, otherwise the `lang` property. `extension` is the language with Intl extensions, in the format `language[-script][-region][-extensions]` like `en-US-u-ca-gregory-nu-latn`
+## displayName
+The `displayName` function uses the [Intl.DisplayNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) API:
+```jsx
+displayName('en-US', { type: 'language' })
+```
+```text
+American English
+```
+
+> The locale used by `formatDate`, `relativeTime`, `formatNumber` and `displayName` is primarily the `extension` property of the `SpeakLocale` if provided, otherwise the `lang` property. `extension` is the language with Intl extensions, in the format `language[-script][-region][-extensions]` like `en-US-u-ca-gregory-nu-latn`
 
 
 ## Multilingual

packages/qwik-speak/src/display-name.ts

@@ -0,0 +1,23 @@
+import type { SpeakLocale } from './types';
+import { useSpeakLocale } from './use-functions';
+
+/**
+ * Return the translation of language, region, script or currency display names
+ * @param code ISO code of language, region, script or currency
+ * @param options Intl DisplayNamesOptions object
+ * @param locale Optional Speak locale to be provided outside the component$
+ * @param lang Optional language if different from the current one
+ * @returns The translated code
+ */
+export const displayName = (
+  code: string,
+  options: Intl.DisplayNamesOptions,
+  locale?: SpeakLocale,
+  lang?: string
+): string => {
+  locale = locale ?? useSpeakLocale();
+
+  lang = lang ?? locale.extension ?? locale.lang;
+
+  return new Intl.DisplayNames(lang, options).of(code) || code;
+};

packages/qwik-speak/src/index.ts

@@ -18,6 +18,7 @@ export { $plural } from './plural';
 export { formatNumber } from './format-number';
 export { formatDate } from './format-date';
 export { relativeTime } from './relative-time';
+export { displayName } from './display-name';
 // Use functions
 export {
   useSpeakContext,

packages/qwik-speak/src/tests/display-name.test.ts

@@ -0,0 +1,12 @@
+import { test, describe, expect } from 'vitest';
+
+import { displayName as dn } from '../display-name';
+import { ctx } from './config';
+
+describe('displayName function', () => {
+  test('display', () => {
+    const locale = ctx.locale;
+    expect(dn('en-US', { type: 'language' }, locale)).toBe('American English');
+    expect(dn('USD', { type: 'currency' }, locale)).toBe('US Dollar');
+  });
+});

src/components/change-locale/change-locale.tsx

@@ -0,0 +1,43 @@
+import { $, component$, useStyles$ } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+import type { SpeakLocale } from 'qwik-speak';
+import { $translate as t, useSpeakLocale, useSpeakConfig } from 'qwik-speak';
+
+import styles from './change-locale.css?inline';
+
+export const ChangeLocale = component$(() => {
+  useStyles$(styles);
+
+  const loc = useLocation();
+
+  const locale = useSpeakLocale();
+  const config = useSpeakConfig();
+
+  // Replace the locale and navigate to the new URL
+  const navigateByLocale$ = $((newLocale: SpeakLocale) => {
+    const url = new URL(location.href);
+    if (loc.params.lang) {
+      if (newLocale.lang !== config.defaultLocale.lang) {
+        url.pathname = url.pathname.replace(loc.params.lang, newLocale.lang);
+      } else {
+        url.pathname = url.pathname.replace(new RegExp(`(/${loc.params.lang}/)|(/${loc.params.lang}$)`), '/');
+      }
+    } else if (newLocale.lang !== config.defaultLocale.lang) {
+      url.pathname = `/${newLocale.lang}${url.pathname}`;
+    }
+
+    location.href = url.toString();
+  });
+
+  return (
+    <div class="change-locale">
+      <h2>{t('app.changeLocale')}</h2>
+      {config.supportedLocales.map(value => (
+        <div class={{ active: value.lang == locale.lang, button: true }}
+          onClick$={async () => await navigateByLocale$(value)}>
+          {value.lang}
+        </div>
+      ))}
+    </div>
+  );
+});