feat: Provide loader function for dynamically imported i18n messages

[avinashbot]

This PR adds an importMessages export to /i18n. All users have to do (on setups that work with dynamic imports) is:

import { I18nProvider, I18nProviderProps, importMessages } from "@cloudscape-design/components/i18n";

const locale: string = getLocaleSomehow();
const messages: ReadonlyArray<I18nProviderProps.Messages> = await importMessages(locale);

ReactDOM.createRoot(rootElement).render(
  <I18nProvider locale={locale} messages={messages}>
    <App />
  </I18nProvider>
);

importMessages returns an array if we ever need to give it additional functionality in the future, but I'm not super sure about it. But you can pass this array directly into the component (which expects an array anyway). The alternate option of statically importing strings as JS/JSON still exists for people who only need one locale or don't, uh, particularly care about bundle size.

Description

Bundlers are fun. Dynamic imports are much better supported than they were, say, a year ago, but they're still janky, especially across node_modules. So while we recommend import(`.../i18n/messages/all.${locale}.js`) in our docs, bundlers sometimes still freak out over it. That leaves the only option being constructing a big painful switch-case statement with non-interpolated dynamic imports (e.g. case "en": import(`.../i18n/messages/all.en.js`)). Instead, we can just absorb that complexity and provide the function built-in.

Of course, we don't want webpack creating a dozen locale chunks unnecessarily. Thankfully, bundlers won't create language chunks until the importMessages is actually imported. Tested with this with our internal webpack setup, but it works on the same principle as our root index.ts file by simply being a "re-export" file that's easy to tree shake.

Related links, issue #, if available: AWSUI-21586

How has this been tested?

Created an integration test for the dynamic loading story. No unit tests because Jest doesn't do dynamic imports 😅

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (7a9c0b7) 93.48% compared to head (1dac34a) 93.48%.
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1369   +/-   ##
=======================================
  Coverage   93.48%   93.48%           
=======================================
  Files         624      625    +1     
  Lines       16796    16796           
  Branches     5558     5558           
=======================================
  Hits        15701    15701           
  Misses       1022     1022           
  Partials       73       73           

Files Changed	Coverage Δ
src/i18n/provider.tsx	100.00% <ø> (ø)
src/i18n/get-matchable-locales.ts	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.