Skip to content

feat: Support useI18n for Legacy API mode #940

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 4, 2022
Merged

feat: Support useI18n for Legacy API mode #940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
821d559
feat: Support useI18n for Legacy API mode
kazupon Mar 2, 2022
a08ccba
remove comments
kazupon Mar 2, 2022
50ab768
fix: reduce build size with feature flag
kazupon Mar 3, 2022
65a97ff
fix: add e2e tests
kazupon Mar 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions e2e/composition.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
;['legacy'].forEach(pattern => {
describe(`${pattern}`, () => {
beforeAll(async () => {
await page.goto(
`http://localhost:8080/examples/${pattern}/composition.html`
)
})

test('initial rendering', async () => {
await expect(page).toMatchElement('#app p', {
text: 'こんにちは、世界！'
})
await expect(page).toMatchElement('#app div.child p', {
text: 'やあ！'
})
})

test('change locale', async () => {
// root
await expect(page).toSelect('#app select', 'en')
await expect(page).toMatchElement('#app p', { text: 'hello world!' })
await expect(page).toMatchElement('#app div.child p', {
text: 'Hi there!'
})

// Child
await expect(page).toSelect('#app div.child select', 'ja')
await expect(page).toMatchElement('#app p', { text: 'hello world!' })
await expect(page).toMatchElement('#app div.child p', {
text: 'やあ！'
})
})
})
})
96 changes: 96 additions & 0 deletions examples/legacy/composition.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Allow Composition API on legacy example</title>
<script src="../../node_modules/vue/dist/vue.global.js"></script>
<script src="../../packages/vue-i18n/dist/vue-i18n.global.js"></script>
</head>
<body>
<div id="app">
<h1>Root</h1>
<form>
<label for="locale-select">{{ $t('message.language') }}</label>
<select id="locale-select" v-model="$i18n.locale">
<option value="en">en</option>
<option value="ja">ja</option>
</select>
</form>
<p>{{ $t("message.hello") }}</p>
<Child />
</div>
<script>
const { createApp } = Vue
const { createI18n, useI18n } = VueI18n

const Child = {
template: `
<div class="child">
<h1>Child</h1>
<form>
<label>{{ t('message.language') }}</label>
<select v-model="locale">
<option value="en">en</option>
<option value="ja">ja</option>
</select>
</form>
<p>{{ t('message.hi') }}</p>
</div>
`,
setup() {
const { t, locale } = useI18n({
useScope: 'local',
locale: 'en',
messages: {
en: {
message: {
language: 'Language',
hello: 'hello earth!',
hi: 'Hi there!'
}
},
ja: {
message: {
language: '言語',
hello: 'こんにちは、地球！',
hi: 'やあ！'
}
}
}
})

return { t, locale }
},
// you need to define `i18n` option with `setup`
i18n: {}
}

const i18n = createI18n({
allowComposition: true,
locale: 'ja',
messages: {
en: {
message: {
language: 'Language',
hello: 'hello world!',
hi: 'Hi !'
}
},
ja: {
message: {
language: '言語',
hello: 'こんにちは、世界！',
hi: 'こんにちは！'
}
}
}
})

const app = createApp({
components: { Child }
})
app.use(i18n)
app.mount('#app')
</script>
</body>
</html>
2 changes: 2 additions & 0 deletions packages/vue-i18n-core/src/composer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@ import type {
import type { VueDevToolsEmitter } from '@intlify/vue-devtools'
import { isLegacyVueI18n } from './utils'

export { DEFAULT_LOCALE } from '@intlify/core-base'

// extend VNode interface
export const DEVTOOLS_META = '__INTLIFY_META__'

Expand Down
6 changes: 5 additions & 1 deletion packages/vue-i18n-core/src/errors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ export const I18nErrorCodes = {
NOT_COMPATIBLE_LEGACY_VUE_I18N: inc(), // 25
// bridge support vue 2.x only
BRIDGE_SUPPORT_VUE_2_ONLY: inc(), // 26
// need to define `i18n` option in `allowComposition: true` and `useScope: 'local' at `useI18n``
MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION: inc(), // 27
// for enhancement
__EXTEND_POINT__: inc() // 27
} as const
Expand Down Expand Up @@ -65,5 +67,7 @@ export const errorMessages: { [code: number]: string } = {
[I18nErrorCodes.NOT_COMPATIBLE_LEGACY_VUE_I18N]:
'Not compatible legacy VueI18n.',
[I18nErrorCodes.BRIDGE_SUPPORT_VUE_2_ONLY]:
'vue-i18n-bridge support Vue 2.x only'
'vue-i18n-bridge support Vue 2.x only',
[I18nErrorCodes.MUST_DEFINE_I18N_OPTION_IN_ALLOW_COMPOSITION]:
'Must define ‘i18n’ option in Composition API with using local scope in Legacy API mode'
}
Loading