From d062d9059070a3057d2aab98b188250372dbec49 Mon Sep 17 00:00:00 2001 From: Avinash Dwarapu Date: Wed, 26 Jul 2023 14:19:13 +0200 Subject: [PATCH] Move dynamic function to top-level path --- build-tools/tasks/generate-i18n-messages.js | 53 ++++++++++----------- build-tools/tasks/package-json.js | 9 ++-- pages/alert/simple.page.tsx | 2 +- pages/i18n/dynamic.page.tsx | 5 +- pages/property-filter/hooks.page.tsx | 2 +- pages/webpack.config.base.js | 3 +- src/i18n/dynamic.d.ts | 4 ++ src/i18n/index.ts | 1 + 8 files changed, 40 insertions(+), 39 deletions(-) create mode 100644 src/i18n/dynamic.d.ts diff --git a/build-tools/tasks/generate-i18n-messages.js b/build-tools/tasks/generate-i18n-messages.js index a112c7a474..d04f46498c 100644 --- a/build-tools/tasks/generate-i18n-messages.js +++ b/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>; -`; - 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,7 +40,7 @@ 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)}`); @@ -50,32 +48,33 @@ module.exports = function generateI18nMessages() { } // 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(); }; diff --git a/build-tools/tasks/package-json.js b/build-tools/tasks/package-json.js index 0c92ddae46..dd5acb92bd 100644 --- a/build-tools/tasks/package-json.js +++ b/build-tools/tasks/package-json.js @@ -39,13 +39,12 @@ 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) { - result[`./i18n/messages/${subset}.${locale}`] = `./i18n/messages/${subset}.${locale}.js`; - result[`./i18n/messages/${subset}.${locale}.json`] = `./i18n/messages/${subset}.${locale}.json`; - } + result[`./i18n/messages/${subset}.${locale}`] = `./i18n/messages/${subset}.${locale}.js`; + result[`./i18n/messages/${subset}.${locale}.json`] = `./i18n/messages/${subset}.${locale}.json`; } // i18n beta specific imports (delete after people switch over) diff --git a/pages/alert/simple.page.tsx b/pages/alert/simple.page.tsx index b5a609b4b9..4c00b38fa7 100644 --- a/pages/alert/simple.page.tsx +++ b/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); diff --git a/pages/i18n/dynamic.page.tsx b/pages/i18n/dynamic.page.tsx index ae2616977d..18471ba152 100644 --- a/pages/i18n/dynamic.page.tsx +++ b/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 | null>(null); - useEffect(() => { importMessages(LOCALE).then(setMessages); }, []); diff --git a/pages/property-filter/hooks.page.tsx b/pages/property-filter/hooks.page.tsx index 3e967896ba..7eb380e5c7 100644 --- a/pages/property-filter/hooks.page.tsx +++ b/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'); diff --git a/pages/webpack.config.base.js b/pages/webpack.config.base.js index b8c7d32182..7569165f61 100644 --- a/pages/webpack.config.base.js +++ b/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', }, diff --git a/src/i18n/dynamic.d.ts b/src/i18n/dynamic.d.ts new file mode 100644 index 0000000000..ff0372bf62 --- /dev/null +++ b/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>; diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 43fa1befb5..ac37d3347f 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -2,3 +2,4 @@ // SPDX-License-Identifier: Apache-2.0 export { I18nProvider, I18nProviderProps } from './provider'; +export { importMessages } from './dynamic';