support v12: revert rollup-plugin, vite-plugin and loader

intlify · Feb 21, 2025 · df0d118 · df0d118
1 parent 6ba93af
commit df0d118
Show file tree

Hide file tree

Showing 45 changed files with 609 additions and 16 deletions.
diff --git a/packages/rollup-plugin-vue-i18n/e2e/example.test.js b/packages/rollup-plugin-vue-i18n/e2e/example.test.js
@@ -21,6 +21,31 @@ describe('composition', () => {
   })
 })
 
+describe('legacy', () => {
+  beforeAll(async () => {
+    await page.goto(`http://localhost:8080/legacy/`)
+  })
+
+  test('initial rendering', async () => {
+    await expect(page).toMatch('言語')
+    await expect(page).toMatch('こんにちは、世界！')
+    await expect(page).toMatch('バナナが欲しい？')
+  })
+
+  test('change select', async () => {
+    await page.select('#fruits select', '2')
+    await expect(page).toMatch('バナナ 2 個')
+  })
+
+  test('change locale', async () => {
+    await page.select('#app select', 'en')
+    await expect(page).toMatch('Language')
+    await expect(page).toMatch('hello, world!')
+    await expect(page).toMatch('Do you want banana?')
+    await expect(page).toMatch('2 bananas')
+  })
+})
+
 describe('global', () => {
   beforeAll(async () => {
     await page.goto(`http://localhost:8080/global/`)

diff --git a/packages/rollup-plugin-vue-i18n/examples/composition/main.js b/packages/rollup-plugin-vue-i18n/examples/composition/main.js
@@ -6,6 +6,7 @@ import ja from './locales/ja.json5'
 import en from './locales/en.yaml'
 
 const i18n = createI18n({
+  legacy: false,
   locale: 'ja',
   messages: {
     en,

diff --git a/packages/rollup-plugin-vue-i18n/examples/global/main.js b/packages/rollup-plugin-vue-i18n/examples/global/main.js
@@ -3,6 +3,7 @@ import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 
 const i18n = createI18n({
+  legacy: false,
   locale: 'ja',
   messages: {}
 })

diff --git a/packages/rollup-plugin-vue-i18n/examples/legacy/App.vue b/packages/rollup-plugin-vue-i18n/examples/legacy/App.vue
@@ -0,0 +1,35 @@
+<template>
+  <form>
+    <label>{{ $t('language') }}</label>
+    <select v-model="$i18n.locale">
+      <option value="en">en</option>
+      <option value="ja">ja</option>
+    </select>
+  </form>
+  <p>{{ $t('hello') }}</p>
+  <Banana />
+</template>
+
+<script>
+import Banana from './Banana.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Banana
+  }
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "language": "Language",
+    "hello": "hello, world!"
+  },
+  "ja": {
+    "language": "言語",
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
diff --git a/packages/rollup-plugin-vue-i18n/examples/legacy/Banana.vue b/packages/rollup-plugin-vue-i18n/examples/legacy/Banana.vue
@@ -0,0 +1,19 @@
+<template>
+  <form id="fruits">
+    <label>{{ $t('select') }}</label>
+    <select v-model.number="select">
+      <option value="0">0</option>
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+  </form>
+  <p>{{ $tc('fruits.banana', select, { n: select }) }}</p>
+</template>
+
+<script>
+export default {
+  name: 'Banana',
+  data: () => ({ select: 0 })
+}
+</script>
diff --git a/packages/rollup-plugin-vue-i18n/examples/legacy/index.html b/packages/rollup-plugin-vue-i18n/examples/legacy/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>rollup-plugin-vue-i18n composable example</title>
+  </head>
+  <body>
+    <div id="app">
+      <App />
+    </div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/rollup-plugin-vue-i18n/examples/legacy/locales/en.yaml b/packages/rollup-plugin-vue-i18n/examples/legacy/locales/en.yaml
@@ -0,0 +1,3 @@
+select: Do you want banana?
+fruits:
+  banana: 'no bananas | {n} banana | {n} bananas'
diff --git a/packages/rollup-plugin-vue-i18n/examples/legacy/locales/ja.json b/packages/rollup-plugin-vue-i18n/examples/legacy/locales/ja.json
@@ -0,0 +1,6 @@
+{
+  "select": "バナナが欲しい？",
+  "fruits": {
+    "banana": "バナナがない | バナナ {n} 個"
+  }
+}
diff --git a/packages/rollup-plugin-vue-i18n/examples/legacy/main.js b/packages/rollup-plugin-vue-i18n/examples/legacy/main.js
@@ -0,0 +1,20 @@
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import App from './App.vue'
+
+import ja from './locales/ja.json'
+import en from './locales/en.yaml'
+
+const i18n = createI18n({
+  legacy: true,
+  locale: 'ja',
+  messages: {
+    en,
+    ja
+  }
+})
+
+const app = createApp(App)
+
+app.use(i18n)
+app.mount('#app')
diff --git a/packages/rollup-plugin-vue-i18n/package.json b/packages/rollup-plugin-vue-i18n/package.json
@@ -62,10 +62,12 @@
     "build:example": "yarn build && npm-run-all --parallel \"build:example:*\"",
     "build:example:composition": "rollup -c ./examples/rollup.config.js --environment BUILD:composition",
     "build:example:global": "rollup -c ./examples/rollup.config.js --environment BUILD:global",
+    "build:example:legacy": "rollup -c ./examples/rollup.config.js --environment BUILD:legacy",
     "clean": "npm-run-all \"clean:*\"",
     "clean:example": "npm-run-all \"clean:example:*\"",
     "clean:example:composition": "rm -rf ./examples/composition/index.js",
     "clean:example:global": "rm -rf ./examples/global/index.js",
+    "clean:example:legacy": "rm -rf ./examples/legacy/index.js",
     "clean:lib": "rm -rf ./lib",
     "test": "yarn test:e2e",
     "test:e2e": "yarn build:example && jest --runInBand --config ./jest.e2e.config.js",

diff --git a/packages/vite-plugin-vue-i18n/README.md b/packages/vite-plugin-vue-i18n/README.md
@@ -37,7 +37,9 @@ $ yarn add -D @intlify/vite-plugin-vue-i18n
 
 ## ⚠️ Notice
 
-If you do a production build with vite, Vue I18n will automatically bundle the runtime only module. If you need on-demand compilation with Message compiler, you need to set the `runtimeOnly` option to `false`.
+When this plugin is installed, Vue I18n can only use the Composition API, and if you want to use the Legacy API, you need to set the `compositionOnly` option to `false`.
+
+Also, if you do a production build with vite, Vue I18n will automatically bundle the runtime only module. If you need on-demand compilation with Message compiler, you need to set the `runtimeOnly` option to `false`.
 
 ## 🚀 Usage
 
@@ -62,6 +64,9 @@ export default defineConfig({
   plugins: [
     vue(), // you need to install `@vitejs/plugin-vue`
     vueI18n({
+      // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
+      // compositionOnly: false,
+
       // you need to set i18n resource including paths !
       include: resolve(
         dirname(fileURLToPath(import.meta.url)),
@@ -265,14 +270,23 @@ About details, See the below section
 
   For more details, See [here](#-automatic-bundling)
 
+### `compositionOnly`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Whether to make vue-i18n's API only composition API. **By default the legacy API is tree-shaken.**
+
+  For more details, See [here](https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags)
+
 ### `fullInstall`
 
 - **Type:** `boolean`
 - **Default:** `true`
 
   Whether to install the full set of APIs, components, etc. provided by Vue I18n. By default, all of them will be installed.
 
-  If `false` is specified, **build-in components and directive will not be installed in vue and will be tree-shaken.**
+  If `false` is specified, **buld-in components and directive will not be installed in vue and will be tree-shaken.**
 
   For more details, See [here](https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags)
 
@@ -399,7 +413,7 @@ About details, See the below section
 
   Whether to use the import name of `petite-vue-i18n` with the same import name as vue-i18n (`import { xxx } from 'vue-i18n'`).
 
-  This option allows a smooth migration from `petite-vue-i18n` to `vue-i18n` and allows progressive enhancement.
+  This option allows a smooth migration from `petite-vue-i18n` to `vue-i18n` and allows progressive enhacement.
 
 ## 📜 Changelog
 

diff --git a/packages/vite-plugin-vue-i18n/e2e/legacy.test.js b/packages/vite-plugin-vue-i18n/e2e/legacy.test.js
@@ -0,0 +1,26 @@
+describe('legacy', () => {
+  beforeAll(async () => {
+    await page.goto(`http://localhost:8080/legacy/`)
+  })
+
+  test('initial rendering', async () => {
+    await expect(page).toMatch('言語')
+    await expect(page).toMatch('こんにちは、世界！')
+    await expect(page).toMatch('バナナが欲しい？')
+    await expect(page).toMatch('バナナ 0 個')
+  })
+
+  test('change locale', async () => {
+    await page.select('#app select', 'en')
+    await expect(page).toMatch('Language')
+    await expect(page).toMatch('hello, world!')
+    await expect(page).toMatch('no bananas')
+  })
+
+  test('change banana select', async () => {
+    await page.select('#fruits select', '3')
+    await expect(page).toMatch('3 bananas')
+    await page.select('#app select', 'ja')
+    await expect(page).toMatch('バナナ 3 個')
+  })
+})
diff --git a/packages/vite-plugin-vue-i18n/examples/composition/main.ts b/packages/vite-plugin-vue-i18n/examples/composition/main.ts
@@ -4,6 +4,7 @@ import App from './App.vue'
 import messages from '@intlify/vite-plugin-vue-i18n/messages'
 
 const i18n = createI18n({
+  legacy: false,
   locale: 'ja',
   messages
 })

diff --git a/packages/vite-plugin-vue-i18n/examples/composition/vite.config.ts b/packages/vite-plugin-vue-i18n/examples/composition/vite.config.ts
@@ -7,7 +7,8 @@ export default defineConfig({
   plugins: [
     vue(),
     vueI18n({
-      include: path.resolve(__dirname, './locales/**')
+      include: path.resolve(__dirname, './locales/**'),
+      compositionOnly: true
     })
   ]
 })
diff --git a/packages/vite-plugin-vue-i18n/examples/global/main.ts b/packages/vite-plugin-vue-i18n/examples/global/main.ts
@@ -3,6 +3,7 @@ import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 
 const i18n = createI18n({
+  legacy: false,
   locale: 'ja'
 })
 

diff --git a/packages/vite-plugin-vue-i18n/examples/global/vite.config.ts b/packages/vite-plugin-vue-i18n/examples/global/vite.config.ts
@@ -3,5 +3,10 @@ import vue from '@vitejs/plugin-vue'
 import vueI18n from '../../src/index'
 
 export default defineConfig({
-  plugins: [vue(), vueI18n({})]
+  plugins: [
+    vue(),
+    vueI18n({
+      compositionOnly: true
+    })
+  ]
 })
diff --git a/packages/vite-plugin-vue-i18n/examples/legacy/App.vue b/packages/vite-plugin-vue-i18n/examples/legacy/App.vue
@@ -0,0 +1,35 @@
+<template>
+  <form>
+    <label>{{ $t('language') }}</label>
+    <select v-model="$i18n.locale">
+      <option value="en">en</option>
+      <option value="ja">ja</option>
+    </select>
+  </form>
+  <p>{{ $t('hello') }}</p>
+  <Banana />
+</template>
+
+<script>
+import Banana from './Banana.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Banana
+  }
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "language": "Language",
+    "hello": "hello, world!"
+  },
+  "ja": {
+    "language": "言語",
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
diff --git a/packages/vite-plugin-vue-i18n/examples/legacy/Banana.vue b/packages/vite-plugin-vue-i18n/examples/legacy/Banana.vue
@@ -0,0 +1,19 @@
+<template>
+  <form id="fruits">
+    <label>{{ $t('select') }}</label>
+    <select v-model.number="select">
+      <option value="0">0</option>
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+  </form>
+  <p>{{ $tc('fruits.banana', select, { n: select }) }}</p>
+</template>
+
+<script>
+export default {
+  name: 'Banana',
+  data: () => ({ select: 0 })
+}
+</script>
diff --git a/packages/vite-plugin-vue-i18n/examples/legacy/index.html b/packages/vite-plugin-vue-i18n/examples/legacy/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>vite-plugin-vue-i18n legacy example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/packages/vite-plugin-vue-i18n/examples/legacy/locales/en.yaml b/packages/vite-plugin-vue-i18n/examples/legacy/locales/en.yaml
@@ -0,0 +1,3 @@
+select: Do you want banana?
+fruits:
+  banana: 'no bananas | {n} banana | {n} bananas'
diff --git a/packages/vite-plugin-vue-i18n/examples/legacy/locales/ja.json b/packages/vite-plugin-vue-i18n/examples/legacy/locales/ja.json
@@ -0,0 +1,6 @@
+{
+  "select": "バナナが欲しい？",
+  "fruits": {
+    "banana": "バナナがない | バナナ {n} 個"
+  }
+}
diff --git a/packages/vite-plugin-vue-i18n/examples/legacy/main.ts b/packages/vite-plugin-vue-i18n/examples/legacy/main.ts
@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import App from './App.vue'
+import en from './locales/en.yaml'
+import ja from './locales/ja.json'
+
+const i18n = createI18n({
+  legacy: true,
+  locale: 'ja',
+  messages: {
+    en,
+    ja
+  }
+})
+
+const app = createApp(App)
+
+app.use(i18n)
+app.mount('#app')
diff --git a/packages/vite-plugin-vue-i18n/examples/legacy/vite.config.ts b/packages/vite-plugin-vue-i18n/examples/legacy/vite.config.ts
@@ -0,0 +1,14 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueI18n from '../../src/index'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueI18n({
+      include: path.resolve(__dirname, './locales/**'),
+      compositionOnly: false
+    })
+  ]
+})