fix: typescript errors with vue-tsc on vue-i18n-bridge (#799)

closes #788

Author: kazupon

docs/guide/migration/ways.md

@@ -128,7 +128,8 @@ import { createI18n, useI18n, castToVueI18n } from 'vue-i18n-bridge'
 Vue.use(VueCompositionAPI)
 Vue.use(VueI18n, { bridge: true })
 
-const i18n = createI18n({
+// you need to cast `i18n` instance
+const i18n = castToVueI18n(createI18n({
   locale: 'ja',
   messages: {
     en: {
@@ -142,11 +143,11 @@ const i18n = createI18n({
       }
     }
   }
-}, VueI18n)
+}, VueI18n))
 
 Vue.use(i18n)
 
-const app = new Vue({ i18n: castToVueI18n(i18n) }) // you need to cast `i18n` instance
+const app = new Vue({ i18n })
 app.$mount('#app')
 ```
 

package.json

@@ -22,7 +22,7 @@
     "build:size-petite-vue-i18n": "cd packages/size-check-petite-vue-i18n && npm run build",
     "build:size-vue-i18n": "cd packages/size-check-vue-i18n && npm run build",
     "build:sourcemap": "npm run build -- --sourcemap",
-    "build:type": "npm run build -- --types && tail -n +32 ./packages/vue-i18n/src/vue.d.ts >> ./packages/vue-i18n/dist/vue-i18n.d.ts && tail -n +32 ./packages/petite-vue-i18n/src/vue.d.ts >> ./packages/petite-vue-i18n/dist/petite-vue-i18n.d.ts && tail -n +32 ./packages/vue-i18n-bridge/src/vue.d.ts >> ./packages/vue-i18n-bridge/dist/vue-i18n-bridge.d.ts",
+    "build:type": "./scripts/build.sh",
     "build:typed": "npm run build -- core-base vue-i18n-core --types",
     "clean": "run-p clean:*",
     "clean:cache": "npm run clean:cache:jest",

packages/vue-i18n-core/src/i18n.ts

@@ -784,11 +784,15 @@ export function useI18n<
  *
  * @VueI18nGeneral
  */
-export const castToVueI18n = /* #__PURE__*/ (i18n: I18n): VueI18n => {
+export const castToVueI18n = /* #__PURE__*/ (
+  i18n: I18n
+): VueI18n & { install: (Vue: any, options?: any) => void } => {
   if (!(__VUE_I18N_BRIDGE__ in i18n)) {
     throw createI18nError(I18nErrorCodes.NOT_COMPATIBLE_LEGACY_VUE_I18N)
   }
-  return i18n as unknown as VueI18n
+  return i18n as unknown as VueI18n & {
+    install: (Vue: any, options?: any) => void
+  }
 }
 
 function createGlobal(

scripts/build.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+set -xe
+
+
+npm run build -- --types
+
+tail -n +32 ./packages/vue-i18n/src/vue.d.ts >> ./packages/vue-i18n/dist/vue-i18n.d.ts
+tail -n +32 ./packages/petite-vue-i18n/src/vue.d.ts >> ./packages/petite-vue-i18n/dist/petite-vue-i18n.d.ts
+tail -n +32 ./packages/vue-i18n-bridge/src/vue.d.ts >> ./packages/vue-i18n-bridge/dist/vue-i18n-bridge.d.ts
+
+node -r esbuild-register scripts/postprocess.ts

scripts/postprocess.ts

@@ -0,0 +1,43 @@
+import path from 'pathe'
+import { promises as fs } from 'fs'
+
+function replaceWithCompositionApi(source: string, target: string) {
+  return source.replace(
+    `{ ${target} } from 'vue';`,
+    `{ ${target} } from '@vue/composition-api';`
+  )
+}
+
+async function main() {
+  let source = await fs.readFile(
+    path.resolve(
+      __dirname,
+      '../packages/vue-i18n-bridge/dist/vue-i18n-bridge.d.ts'
+    ),
+    'utf8'
+  )
+
+  source = [
+    'App',
+    'ComponentInternalInstance',
+    'ComputedRef',
+    'InjectionKey',
+    'WritableComputedRef'
+  ].reduce(
+    (source, target) => replaceWithCompositionApi(source, target),
+    source
+  )
+
+  await fs.writeFile(
+    path.resolve(
+      __dirname,
+      '../packages/vue-i18n-bridge/dist/vue-i18n-bridge.d.ts'
+    ),
+    source
+  )
+}
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})