Vue 3 support (#140)

* Update packages

* Migrate to vue compiler sfc

* Update parse types

* Fix locale type

* Update demo

* Upgrade dependecies

Author: ardier16

demo/package.json

@@ -9,20 +9,20 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "core-js": "^3.0.0",
-    "vue": "^2.6.10",
-    "vue-i18n": "^8.14.0"
+    "core-js": "^3.6.5",
+    "vue": "^3.0.11",
+    "vue-i18n": "^9.1.4"
   },
   "devDependencies": {
-    "@kazupon/vue-i18n-loader": "^0.5.0",
-    "@vue/cli-plugin-babel": "^4.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-service": "^4.0.0",
+    "@intlify/vue-i18n-loader": "^2.1.0",
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
+    "@vue/compiler-sfc": "^3.0.11",
     "babel-eslint": "^10.0.1",
     "eslint": "^6.0.0",
     "eslint-plugin-vue": "^6.0.0",
-    "vue-cli-plugin-i18n": "^1.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-cli-plugin-i18n": "^2.1.1"
   },
   "eslintConfig": {
     "root": true,

demo/src/App.vue

@@ -3,7 +3,7 @@
     <h1>{{ $t("title") }}</h1>
     <form>
       <label for="locale">{{ $t('lang') }}:</label>
-      <select v-model="$parent.$i18n.locale">
+      <select v-model="$i18n.locale">
         <option value="en">en</option>
         <option value="ja">ja</option>
       </select>

demo/src/i18n.js

@@ -1,7 +1,4 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-
-Vue.use(VueI18n)
+import { createI18n } from 'vue-i18n'
 
 function loadLocaleMessages () {
   const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
@@ -16,7 +13,7 @@ function loadLocaleMessages () {
   return messages
 }
 
-export default new VueI18n({
+export default createI18n({
   locale: process.env.VUE_APP_I18N_LOCALE || 'en',
   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'ja',
   silentFallbackWarn: true,

demo/src/main.js

@@ -1,10 +1,8 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import i18n from './i18n'
 
-Vue.config.productionTip = false
+const app = createApp(App)
 
-new Vue({
-  i18n,
-  render: h => h(App)
-}).$mount('#app')
+app.use(i18n)
+app.mount('#app')

demo/yarn.lock

@@ -25,7 +25,6 @@
     }
   },
   "dependencies": {
-    "@vue/component-compiler-utils": "^3.0.0",
     "debug": "^4.1.1",
     "deep-diff": "^1.0.2",
     "deepmerge": "^4.2.2",
@@ -34,7 +33,6 @@
     "js-yaml": "^3.13.1",
     "json-diff": "^0.5.4",
     "json5": "^2.1.0",
-    "vue-template-compiler": "^2.6.10",
     "yargs": "^15.1.0"
   },
   "devDependencies": {
@@ -52,6 +50,7 @@
     "@sucrase/jest-plugin": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^3.0.0",
     "@typescript-eslint/parser": "^3.0.0",
+    "@vue/compiler-sfc": "^3.0.11",
     "eslint": "^7.4.0",
     "eslint-plugin-vue-libs": "^4.0.0",
     "jest": "^26.0.0",
@@ -63,8 +62,7 @@
     "tsd": "^0.13.0",
     "typescript": "^3.9.5",
     "typescript-eslint-language-service": "^3.0.0",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+    "vue": "^3.0.11"
   },
   "engines": {
     "node": ">= 12"
@@ -84,8 +82,8 @@
   "license": "MIT",
   "main": "lib/index.js",
   "peerDependencies": {
-    "vue": "^2.6",
-    "vue-template-compiler": "^2.6"
+    "@vue/compiler-sfc": "^3.0.11",
+    "vue": "^3.0.11"
   },
   "repository": {
     "type": "git",

package.json

@@ -1,6 +1,6 @@
 /* eslint-disable-next-line */
-/// <reference path="../types/shims-vue-template-compiler.d.ts"/>
-import { SFCBlock, SFCDescriptor } from 'vue-template-compiler'
+/// <reference path="../types/shims-vue-compiler-sfc.d.ts"/>
+import { SFCBlock, SFCDescriptor } from '@vue/compiler-sfc'
 import { Locale, MetaLocaleMessage, SFCI18nBlock, SFCFileInfo, FormatOptions } from '../types'
 
 import { escape, reflectSFCDescriptor, parseContent, stringifyContent } from './utils'
@@ -24,7 +24,7 @@ function generate (meta: MetaLocaleMessage, descriptor: SFCDescriptor, options?:
   debug('target i18n blocks\n', i18nBlocks)
 
   const blocks: SFCBlock[] = getBlocks(descriptor)
-  blocks.forEach(b => debug(`block: type=${b.type}, start=${b.start}, end=${b.end}`))
+  blocks.forEach(b => debug(`block: type=${b.type}, start=${b.loc.start.offset}, end=${b.loc.end.offset}`))
 
   const { raw } = descriptor
   const content = buildContent(i18nBlocks, raw, blocks, options)
@@ -39,7 +39,9 @@ function getBlocks (descriptor: SFCDescriptor): SFCBlock[] {
   const blocks: SFCBlock[] = [...styles, ...customBlocks]
   template && blocks.push(template as SFCBlock)
   script && blocks.push(script as SFCBlock)
-  blocks.sort((a, b) => { return (a.start as number) - (b.start as number) })
+  blocks.sort((a, b) => {
+    return a.loc.start.offset - b.loc.start.offset
+  })
   return blocks
 }
 
@@ -52,7 +54,7 @@ function buildContent (i18nBlocks: SFCI18nBlock[], raw: string, blocks: SFCBlock
     if (block.type === 'i18n') {
       let lang = block.attrs.lang
       lang = (!lang || typeof lang !== 'string') ? 'json' : lang
-      const locale: Locale | undefined = block.attrs.locale
+      const locale: Locale | true = block.attrs.locale
       const i18nBlock = i18nBlocks[i18nBlockCounter]
       debug(`meta.lang = ${i18nBlock.lang}, block.lang = ${lang}, meta.locale = ${i18nBlock.locale}, block.locale = ${locale}`)
 
@@ -68,14 +70,14 @@ function buildContent (i18nBlocks: SFCI18nBlock[], raw: string, blocks: SFCBlock
         messages = parseContent(block.content, lang)
       }
 
-      contents = contents.concat(raw.slice(offset, block.start))
+      contents = contents.concat(raw.slice(offset, block.loc.start.offset))
       const serialized = `\n${stringifyContent(messages, lang, options)}`
       contents = contents.concat(serialized)
-      offset = block.end as number
+      offset = block.loc.end.offset
       i18nBlockCounter++
     } else {
-      contents = contents.concat(raw.slice(offset, block.end))
-      offset = block.end as number
+      contents = contents.concat(raw.slice(offset, block.loc.end.offset))
+      offset = block.loc.end.offset
     }
     return contents
   }, contents)

src/infuser.ts

@@ -1,4 +1,4 @@
-import { SFCBlock } from 'vue-template-compiler'
+import { SFCBlock } from '@vue/compiler-sfc'
 import { MetaLocaleMessage, I18nLang, SFCFileInfo, SFCI18nBlock } from '../types'
 
 import { reflectSFCDescriptor, parseContent } from './utils'
@@ -9,7 +9,9 @@ const debug = Debug('vue-i18n-locale-message:squeezer')
 export default function squeeze (basePath: string, files: SFCFileInfo[]): MetaLocaleMessage {
   const descriptors = reflectSFCDescriptor(basePath, files)
   return descriptors.reduce((meta, descriptor) => {
-    descriptor.customBlocks.sort((a, b) => { return (a.start as number) - (b.start as number) })
+    descriptor.customBlocks.sort((a, b) => {
+      return a.loc.start.offset - b.loc.start.offset
+    })
     const i18nBlocks = squeezeFromCustomBlocks(descriptor.customBlocks)
     debug('squeezeFromCustomBlocks: i18nBlocks', JSON.stringify(i18nBlocks, null, 2))
     meta.components[descriptor.contentPath] = i18nBlocks

src/squeezer.ts

@@ -1,7 +1,6 @@
 // import types
 import { Arguments } from 'yargs'
-import { SFCDescriptor } from 'vue-template-compiler'
-import { VueTemplateCompiler } from '@vue/component-compiler-utils/dist/types'
+import { SFCDescriptor } from '@vue/compiler-sfc'
 import {
   SFCFileInfo,
   Locale,
@@ -19,8 +18,7 @@ import {
 } from '../types'
 
 // import modules
-import { parse } from '@vue/component-compiler-utils'
-import * as compiler from 'vue-template-compiler'
+import { parse } from '@vue/compiler-sfc'
 import fs from 'fs'
 import glob from 'glob'
 import path from 'path'
@@ -68,18 +66,13 @@ export function isLocaleMessageDictionary (message: LocaleMessage): message is L
 
 export function reflectSFCDescriptor (basePath: string, components: SFCFileInfo[]): SFCDescriptor[] {
   return components.map(target => {
-    const { template, script, styles, customBlocks } = parse({
-      source: target.content,
-      filename: target.path,
-      compiler: compiler as VueTemplateCompiler
-    }) as SFCDescriptor
+    const descriptor = parse(target.content, {
+      filename: target.path
+    }).descriptor as SFCDescriptor
     return {
       ...parsePath(basePath, target.path),
-      raw: target.content,
-      customBlocks,
-      template,
-      script,
-      styles
+      ...descriptor,
+      raw: target.content
     }
   })
 }

src/utils.ts

@@ -1,7 +1,7 @@
-import { SFCDescriptor } from 'vue-template-compiler'
+import { SFCDescriptor } from '@vue/compiler-sfc'
 
 // extend for vue-i18n-locale-message
-declare module 'vue-template-compiler/types/index' {
+declare module '@vue/compiler-sfc' {
   export interface SFCDescriptor {
     raw: string
     contentPath: string