Move dynamic function to top-level path

build-tools/tasks/generate-i18n-messages.js

@@ -8,28 +8,26 @@ const { parse } = require('@formatjs/icu-messageformat-parser');
 const { targetPath } = require('../utils/workspace');
 const { writeFile } = require('../utils/files');
 
-const namespace = '@cloudscape-design/components';
-
-const destinationDir = path.join(targetPath, 'components/i18n/messages');
-const internalDestinationDir = path.join(targetPath, 'components/internal/i18n/messages');
+const sourceDir = path.resolve(__dirname, '../../src/i18n');
+const sourceMessagesDir = path.resolve(sourceDir, 'messages');
+const destinationDir = path.resolve(targetPath, 'components/i18n');
+const destinationMessagesDir = path.resolve(destinationDir, 'messages');
+const internalDestinationDir = path.resolve(targetPath, 'components/internal/i18n');
+const internalDestinationMessagesDir = path.resolve(internalDestinationDir, 'messages');
 
+const namespace = '@cloudscape-design/components';
 const messagesDeclarationFile = `import { I18nProviderProps } from "../provider";
 declare const messages: I18nProviderProps.Messages;
 export default messages;
 `;
 
-const indexDeclarationFile = `import { I18nProviderProps } from "../provider";
-export function importMessages(locale: string): Promise<ReadonlyArray<I18nProviderProps.Messages>>;
-`;
-
 module.exports = function generateI18nMessages() {
-  const messagesDir = path.resolve(__dirname, '../../src/i18n/messages');
-  const files = fs.readdirSync(messagesDir);
-
+  const files = fs.readdirSync(sourceMessagesDir);
   const allParsedMessages = {};
 
+  // Generate individual locale messages files.
   for (const fileName of files) {
-    const filePath = path.join(messagesDir, fileName);
+    const filePath = path.join(sourceMessagesDir, fileName);
     const messages = require(filePath);
     const [subset, locale] = fileName.split('.');
 
@@ -42,40 +40,41 @@ module.exports = function generateI18nMessages() {
     allParsedMessages[locale] = { ...(allParsedMessages[locale] ?? {}), ...parsedMessages };
     const resultFormat = { [namespace]: { [locale]: parsedMessages } };
 
-    for (const directory of [destinationDir, internalDestinationDir]) {
+    for (const directory of [destinationMessagesDir, internalDestinationMessagesDir]) {
       writeFile(path.join(directory, `${subset}.${locale}.json`), JSON.stringify(resultFormat));
       writeFile(path.join(directory, `${subset}.${locale}.d.ts`), messagesDeclarationFile);
       writeFile(path.join(directory, `${subset}.${locale}.js`), `export default ${JSON.stringify(resultFormat)}`);
     }
   }
 
   // Generate a ".all" file containing all locales.
-  const resultFormat = { [namespace]: allParsedMessages };
+  const allResultFormat = { [namespace]: allParsedMessages };
+  for (const directory of [destinationMessagesDir, internalDestinationMessagesDir]) {
+    writeFile(path.join(directory, 'all.all.json'), JSON.stringify(allResultFormat));
+    writeFile(path.join(directory, 'all.all.d.ts'), messagesDeclarationFile);
+    writeFile(path.join(directory, 'all.all.js'), `export default ${JSON.stringify(allResultFormat)}`);
+  }
 
   // Generate a dynamic provider function for automatic bundler splitting and imports.
-  const indexFile = [
+  const dynamicFile = [
     `export function importMessages(locale) {`,
-    `  switch (locale) {`,
+    `  switch (locale.toLowerCase()) {`,
     ...files.flatMap(fileName => {
       const [subset, locale] = fileName.split('.');
       if (subset !== 'all') {
-        return [];
+        return []; // For now, this only supports loading all messages for the locale.
       }
-      return [`  case "${locale}":`, `    return import("./${subset}.${locale}.js").then(mod => [mod.default]);`];
+      return [
+        `  case "${locale.toLowerCase()}":`,
+        `    return import("./messages/${subset}.${locale}.js").then(mod => [mod.default]);`,
+      ];
     }),
     `  }`,
     `  return Promise.resolve([]);`,
     `}`,
   ].join('\n');
-
-  for (const directory of [destinationDir, internalDestinationDir]) {
-    writeFile(path.join(directory, 'all.all.json'), JSON.stringify(resultFormat));
-    writeFile(path.join(directory, 'all.all.d.ts'), messagesDeclarationFile);
-    writeFile(path.join(directory, 'all.all.js'), `export default ${JSON.stringify(resultFormat)}`);
-
-    writeFile(path.join(directory, 'index.js'), indexFile);
-    writeFile(path.join(directory, 'index.d.ts'), indexDeclarationFile);
-  }
+  fs.copyFileSync(path.join(sourceDir, 'dynamic.d.ts'), path.join(destinationDir, 'dynamic.d.ts'));
+  writeFile(path.join(destinationDir, 'dynamic.js'), dynamicFile);
 
   return Promise.resolve();
 };

build-tools/tasks/package-json.js

@@ -39,7 +39,8 @@ function getComponentsExports() {
 
   // Internationalization and messages
   result['./i18n'] = './i18n/index.js';
-  result[`./i18n/messages`] = `./i18n/messages/index.js`;
+  result[`./i18n/messages/all.all`] = `./i18n/messages/all.all.js`;
+  result[`./i18n/messages/all.all.json`] = `./i18n/messages/all.all.json`;
   for (const translationFile of fs.readdirSync('src/i18n/messages')) {
     const [subset, locale] = translationFile.split('.');
     if (subset && locale) {

pages/alert/simple.page.tsx

@@ -8,7 +8,7 @@ import SpaceBetween from '~components/space-between';
 import styles from './styles.scss';
 
 import { I18nProvider } from '~components/internal/i18n';
-import messages from '~components/i18n/messages/all.all';
+import messages from '~components/i18n/messages/all.en';
 
 export default function AlertScenario() {
   const [visible, setVisible] = useState(true);

pages/i18n/dynamic.page.tsx

@@ -2,15 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useState } from 'react';
 import { TagEditor } from '~components';
-import { I18nProvider, I18nProviderProps } from '~components/i18n';
-
-import { importMessages } from '~components/i18n/messages';
+import { I18nProvider, I18nProviderProps, importMessages } from '~components/i18n';
 
 const LOCALE = 'ja';
 
 export default function I18nDynamicPage() {
   const [messages, setMessages] = useState<ReadonlyArray<I18nProviderProps.Messages> | null>(null);
-
   useEffect(() => {
     importMessages(LOCALE).then(setMessages);
   }, []);

pages/property-filter/hooks.page.tsx

@@ -12,7 +12,7 @@ import { columnDefinitions, i18nStrings, filteringProperties } from './common-pr
 import { useCollection } from '@cloudscape-design/collection-hooks';
 
 import { I18nProvider } from '~components/internal/i18n';
-import messages from '~components/i18n/messages/all.all';
+import messages from '~components/i18n/messages/all.en';
 
 export default function () {
   const [locale, setLocale] = useState('en');

pages/webpack.config.base.js

@@ -96,7 +96,8 @@ module.exports = ({
           awsui: {
             test: module =>
               module.resource &&
-              (module.resource.includes(componentsPath) || module.resource.includes(designTokensPath)),
+              (module.resource.includes(componentsPath) || module.resource.includes(designTokensPath)) &&
+              !module.resource.includes(path.resolve(componentsPath, 'i18n/messages')),
             name: 'awsui',
             chunks: 'all',
           },

src/i18n/dynamic.d.ts

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { I18nProviderProps } from './provider';
+export function importMessages(locale: string): Promise<ReadonlyArray<I18nProviderProps.Messages>>;

src/i18n/index.ts

@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export { I18nProvider, I18nProviderProps } from './provider';
+export { importMessages } from './dynamic';