add SSR tests (#84)

Author: kazupon

package.json

@@ -34,6 +34,7 @@
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
     "@typescript-eslint/typescript-estree": "^3.7.0",
+    "@vue/server-renderer": "^3.0.0-rc.5",
     "brotli": "^1.3.2",
     "chalk": "^4.0.0",
     "convert-hrtime": "^3.0.0",

src/directive.ts

@@ -17,6 +17,7 @@ type VTDirectiveValue = {
   locale?: Locale
   args?: NamedValue
   choice?: number
+  plural?: number
 }
 
 function getComposer<Messages, DateTimeFormats, NumberFormats>(
@@ -97,7 +98,7 @@ function parseValue(value: unknown): VTDirectiveValue {
 }
 
 function makeParams(value: VTDirectiveValue): unknown[] {
-  const { path, locale, args, choice } = value
+  const { path, locale, args, choice, plural } = value
   const options = {} as TranslateOptions
   const named: NamedValue = args || {}
 
@@ -109,5 +110,9 @@ function makeParams(value: VTDirectiveValue): unknown[] {
     options.plural = choice
   }
 
+  if (isNumber(plural)) {
+    options.plural = plural
+  }
+
   return [path, named, options]
 }

test/diretive.test.ts

@@ -56,7 +56,7 @@ describe('basic', () => {
     const App = defineComponent({
       setup() {
         // <p v-t="msg"></p>
-        const msg = ref('binding')
+        const msg = ref('hello')
         const t = resolveDirective('t')
         return () => {
           return withDirectives(h('p'), [[t, msg.value]])

test/ssr.test.ts

@@ -0,0 +1,72 @@
+import { defineComponent, createSSRApp } from 'vue'
+import { renderToString } from '@vue/server-renderer'
+import { createI18n, useI18n } from '../src/index'
+
+test('composable mode', async () => {
+  const i18n = createI18n({
+    locale: 'en',
+    messages: {}
+  })
+
+  const App = defineComponent({
+    template: `<p>{{ t('hello') }}</p>`,
+    setup() {
+      return useI18n({
+        locale: 'ja',
+        inheritLocale: false,
+        messages: {
+          ja: { hello: 'こんにちは！' },
+          en: { hello: 'hello!' }
+        }
+      })
+    }
+  })
+  const app = createSSRApp(App)
+  app.use(i18n)
+
+  expect(await renderToString(app)).toMatch(`<p>こんにちは！</p>`)
+})
+
+test('legacy mode', async () => {
+  const i18n = createI18n({
+    legacy: true,
+    locale: 'ja',
+    messages: {
+      ja: { hello: 'こんにちは！' },
+      en: { hello: 'hello!' }
+    }
+  })
+
+  const App = defineComponent({
+    template: `<p>{{ $t('hello') }}</p>`
+  })
+  const app = createSSRApp(App)
+  app.use(i18n)
+
+  expect(await renderToString(app)).toMatch(`<p>こんにちは！</p>`)
+})
+
+test('component: i18n-t', async () => {
+  const i18n = createI18n({
+    locale: 'en',
+    messages: {}
+  })
+
+  const App = defineComponent({
+    template: `<i18n-t tag="p" keypath="hello"/>`,
+    setup() {
+      return useI18n({
+        locale: 'ja',
+        inheritLocale: false,
+        messages: {
+          ja: { hello: 'こんにちは！' },
+          en: { hello: 'hello!' }
+        }
+      })
+    }
+  })
+  const app = createSSRApp(App)
+  app.use(i18n)
+
+  expect(await renderToString(app)).toMatch(`<p>こんにちは！</p>`)
+})

yarn.lock

@@ -1023,6 +1023,14 @@
     "@vue/compiler-core" "3.0.0-rc.5"
     "@vue/shared" "3.0.0-rc.5"
 
+"@vue/[email protected]":
+  version "3.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.5.tgz#878406c59daff362ecdcb199fb9467a769ca8de5"
+  integrity sha512-OU5Vl2+bCDMImS9OeCVnl4lfxZ3/sopdwX2SrUWVKQvCxmmmlyWvoVkC6nNGCs/MrOmIMhKmL6etgzLTWyCkUg==
+  dependencies:
+    "@vue/compiler-dom" "3.0.0-rc.5"
+    "@vue/shared" "3.0.0-rc.5"
+
 "@vue/[email protected]":
   version "3.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.0-rc.5.tgz#45cff8d839d7ad130b1e499239090050fdecff13"
@@ -1047,6 +1055,14 @@
     "@vue/shared" "3.0.0-rc.5"
     csstype "^2.6.8"
 
+"@vue/server-renderer@^3.0.0-rc.5":
+  version "3.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.0.0-rc.5.tgz#524d3827c1352f7b6dbe178bd36902a26a0316cb"
+  integrity sha512-lWxs6uSvpw3UsqVxatdtEQBUTEdPTsM5JTqM1haAhaIWI2dhWEhmF3Z3iXnO12e8KUUp7Q4SjriEarzEa6YXtg==
+  dependencies:
+    "@vue/compiler-ssr" "3.0.0-rc.5"
+    "@vue/shared" "3.0.0-rc.5"
+
 "@vue/[email protected]":
   version "3.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0-rc.5.tgz#cea2378e3e37363ddc1f5dd158edc9c9b5b3fff0"