[feat] implement dynamic imports for locale code splitting #6076
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,146 @@ | ||
| // Import only English locale eagerly as the default/fallback | ||
| // ESLint cannot statically resolve dynamic imports with path aliases (@frontend-locales/*), | ||
| // but these are properly configured in tsconfig.json and resolved by Vite at build time. | ||
| // eslint-disable-next-line import-x/no-unresolved | ||
| import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' } | ||
| // eslint-disable-next-line import-x/no-unresolved | ||
| import en from '@frontend-locales/en/main.json' with { type: 'json' } | ||
| // eslint-disable-next-line import-x/no-unresolved | ||
| import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' } | ||
| // eslint-disable-next-line import-x/no-unresolved | ||
| import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' } | ||
| import { createI18n } from 'vue-i18n' | ||
|
|
||
| function buildLocale< | ||
| M extends Record<string, unknown>, | ||
| N extends Record<string, unknown>, | ||
| C extends Record<string, unknown>, | ||
| S extends Record<string, unknown> | ||
| >(main: M, nodes: N, commands: C, settings: S) { | ||
| return { | ||
| ...main, | ||
| nodeDefs: nodes, | ||
| commands: commands, | ||
| settings: settings | ||
| } as M & { nodeDefs: N; commands: C; settings: S } | ||
| } | ||
|
|
||
| // Locale loader map - dynamically import locales only when needed | ||
| // ESLint cannot statically resolve these dynamic imports, but they are valid at build time | ||
| /* eslint-disable import-x/no-unresolved */ | ||
| const localeLoaders: Record< | ||
| string, | ||
| () => Promise<{ default: Record<string, unknown> }> | ||
| > = { | ||
| ar: () => import('@frontend-locales/ar/main.json'), | ||
| es: () => import('@frontend-locales/es/main.json'), | ||
| fr: () => import('@frontend-locales/fr/main.json'), | ||
| ja: () => import('@frontend-locales/ja/main.json'), | ||
| ko: () => import('@frontend-locales/ko/main.json'), | ||
| ru: () => import('@frontend-locales/ru/main.json'), | ||
| tr: () => import('@frontend-locales/tr/main.json'), | ||
| zh: () => import('@frontend-locales/zh/main.json'), | ||
| 'zh-TW': () => import('@frontend-locales/zh-TW/main.json') | ||
| } | ||
|
|
||
| const nodeDefsLoaders: Record< | ||
| string, | ||
| () => Promise<{ default: Record<string, unknown> }> | ||
| > = { | ||
| ar: () => import('@frontend-locales/ar/nodeDefs.json'), | ||
| es: () => import('@frontend-locales/es/nodeDefs.json'), | ||
| fr: () => import('@frontend-locales/fr/nodeDefs.json'), | ||
| ja: () => import('@frontend-locales/ja/nodeDefs.json'), | ||
| ko: () => import('@frontend-locales/ko/nodeDefs.json'), | ||
| ru: () => import('@frontend-locales/ru/nodeDefs.json'), | ||
| tr: () => import('@frontend-locales/tr/nodeDefs.json'), | ||
| zh: () => import('@frontend-locales/zh/nodeDefs.json'), | ||
| 'zh-TW': () => import('@frontend-locales/zh-TW/nodeDefs.json') | ||
| } | ||
|
|
||
| const commandsLoaders: Record< | ||
| string, | ||
| () => Promise<{ default: Record<string, unknown> }> | ||
| > = { | ||
| ar: () => import('@frontend-locales/ar/commands.json'), | ||
| es: () => import('@frontend-locales/es/commands.json'), | ||
| fr: () => import('@frontend-locales/fr/commands.json'), | ||
| ja: () => import('@frontend-locales/ja/commands.json'), | ||
| ko: () => import('@frontend-locales/ko/commands.json'), | ||
| ru: () => import('@frontend-locales/ru/commands.json'), | ||
| tr: () => import('@frontend-locales/tr/commands.json'), | ||
| zh: () => import('@frontend-locales/zh/commands.json'), | ||
| 'zh-TW': () => import('@frontend-locales/zh-TW/commands.json') | ||
| } | ||
|
|
||
| const settingsLoaders: Record< | ||
| string, | ||
| () => Promise<{ default: Record<string, unknown> }> | ||
| > = { | ||
| ar: () => import('@frontend-locales/ar/settings.json'), | ||
| es: () => import('@frontend-locales/es/settings.json'), | ||
| fr: () => import('@frontend-locales/fr/settings.json'), | ||
| ja: () => import('@frontend-locales/ja/settings.json'), | ||
| ko: () => import('@frontend-locales/ko/settings.json'), | ||
| ru: () => import('@frontend-locales/ru/settings.json'), | ||
| tr: () => import('@frontend-locales/tr/settings.json'), | ||
| zh: () => import('@frontend-locales/zh/settings.json'), | ||
| 'zh-TW': () => import('@frontend-locales/zh-TW/settings.json') | ||
| } | ||
| /* eslint-enable import-x/no-unresolved */ | ||
snomiao marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| // Track which locales have been loaded | ||
| const loadedLocales = new Set<string>(['en']) | ||
|
|
||
| /** | ||
| * Dynamically load a locale and its associated files (nodeDefs, commands, settings) | ||
| */ | ||
| async function loadLocale(locale: string): Promise<void> { | ||
|
||
| if (loadedLocales.has(locale)) { | ||
| return | ||
| } | ||
|
|
||
| const loader = localeLoaders[locale] | ||
| const nodeDefsLoader = nodeDefsLoaders[locale] | ||
| const commandsLoader = commandsLoaders[locale] | ||
| const settingsLoader = settingsLoaders[locale] | ||
|
|
||
| if (!loader || !nodeDefsLoader || !commandsLoader || !settingsLoader) { | ||
| console.warn(`Locale "${locale}" is not supported`) | ||
| return | ||
| } | ||
|
|
||
| try { | ||
| const [main, nodes, commands, settings] = await Promise.all([ | ||
| loader(), | ||
| nodeDefsLoader(), | ||
| commandsLoader(), | ||
| settingsLoader() | ||
| ]) | ||
|
|
||
| const messages = buildLocale( | ||
| main.default, | ||
| nodes.default, | ||
| commands.default, | ||
| settings.default | ||
| ) | ||
|
|
||
| i18n.global.setLocaleMessage(locale, messages as LocaleMessages) | ||
| loadedLocales.add(locale) | ||
| } catch (error) { | ||
| console.error(`Failed to load locale "${locale}":`, error) | ||
| throw error | ||
| } | ||
| } | ||
|
|
||
| // Only include English in the initial bundle | ||
| const messages = { | ||
| en: buildLocale(en, enNodes, enCommands, enSettings) | ||
| } | ||
|
|
||
| // Type for locale messages - inferred from the English locale structure | ||
| type LocaleMessages = typeof messages.en | ||
|
|
||
| export const i18n = createI18n({ | ||
| // Must set `false`, as Vue I18n Legacy API is for Vue 2 | ||
| legacy: false, | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.