docs: optimize i18n docs #2483
docs: optimize i18n docs #2483
Conversation
WalkthroughThe changes introduce a revised internationalization (i18n) setup for both Vue 3.0 and Vue 2.0. The Changes
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
examples/sites/demos/pc/webdoc/i18n.md (3)
Line range hint
21-35: Consider adding TypeScript type definitions.The i18n initialization code looks good and provides a cleaner API. To further enhance developer experience, consider adding TypeScript types:
+interface I18nOptions { + locale: string; +} +interface Messages { + zhCN: Record<string, string>; + enUS: Record<string, string>; +} -const initI18n = (i18n) => +const initI18n = (i18n: I18nOptions) => locale.initI18n({ i18n, createI18n, messages: { zhCN: { test: '中文' }, enUS: { test: 'English' } } as Messages })
Line range hint
72-86: Add explanation for vue-i18n version pinning.The code changes look good, maintaining consistency with the Vue 3.0 setup. However, it would be helpful to explain why version 8.15.0 is specifically recommended. Consider adding a note about compatibility or known issues with other versions.
173-181: Enhance JavaScript usage section with Vue 2.0 example and error handling.The new section is a valuable addition. Consider these improvements:
- Label the current example as Vue 3.0 specific
- Add Vue 2.0 equivalent example
- Show error handling for missing translations
Add the following examples:
// Vue 2.0 import { i18n } from './i18n' const test = i18n.t('test') // Note: no .global in Vue 2.0 // Error handling (both versions) const fallbackText = 'Default Text' const test = i18n.global?.t('missing.key') ?? fallbackText
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
examples/sites/demos/pc/webdoc/i18n.md (3)
Line range hint
21-35: LGTM! Consider adding type information.The refactored initialization pattern improves code clarity and follows modern ES6+ practices.
Consider adding TypeScript type information to help users understand the expected shape of the
i18nparameter:interface I18nConfig { locale: string; // other possible config options } const initI18n = (i18n: I18nConfig) => // ...
Line range hint
72-86: LGTM! Consider documenting version compatibility.The initialization pattern is consistent with the Vue 3 example, making it easier to understand and maintain.
Consider adding a note about version compatibility:
Vue.use(VueI18n) + +// Note: This setup is specifically for vue-i18n@8.15.0 +// For other versions, please check the vue-i18n documentation
172-181: LGTM! Consider adding more comprehensive examples.The new section is a valuable addition for using i18n in JavaScript files.
Consider adding these additional examples:
// Error handling try { const test = i18n.global.t('missing.key') } catch (error) { console.warn('Translation key not found:', error) } // Using with parameters const welcome = i18n.global.t('welcome', { name: 'John' }) // Using with pluralization const items = i18n.global.t('items', { count: 2 })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
examples/sites/demos/pc/webdoc/i18n.md(5 hunks)
🔇 Additional comments (2)
examples/sites/demos/pc/webdoc/i18n.md (2)
43-48: LGTM! Clean and idiomatic Vue 3 integration.
The integration code is concise and follows Vue 3 best practices.
94-101: LGTM! Clean and idiomatic Vue 2 integration.
The integration code is concise and follows Vue 2 best practices.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Improvements