improvement: infuse formatting with vue template compiler v2 (#194)

* feat: infuse formatting with @intlify/cli formatter

* improvement: infuse formatting with vue template compiler

Author: kazupon

package.json

@@ -25,7 +25,7 @@
     }
   },
   "dependencies": {
-    "@intlify/cli": "^0.10.0",
+    "@intlify/cli": "^0.11.0",
     "@vue/component-compiler-utils": "^3.0.0",
     "cosmiconfig": "^7.0.1",
     "debug": "^4.1.1",

src/commands/infuse.ts

@@ -38,6 +38,7 @@ type InfuseOptions = {
   unbundleMatch?: string
   namespace?: string
   prettier?: string
+  vue?: number
   dryRun: boolean
   ignoreFileName?: string
 }
@@ -96,9 +97,15 @@ export const builder = (args: Argv): Argv<InfuseOptions> => {
       alias: 'p',
       describe: 'the config file path of prettier'
     })
+    .option('vue', {
+      type: 'number',
+      alias: 'v',
+      describe: 'the vue template compiler version'
+    })
 }
 
 export const handler = async (args: Arguments<InfuseOptions>) => {
+  const vue = args.vue || 2
   const targetPath = resolve(args.target)
   const messagesPath = resolve(args.locales)
   const ig = ignore()
@@ -135,7 +142,7 @@ export const handler = async (args: Arguments<InfuseOptions>) => {
   const newSources = infuse(targetPath, sources, meta)
 
   if (!args.dryRun) {
-    writeSFC(newSources, format, prettierConfig)
+    writeSFC(newSources, format, prettierConfig, vue)
   }
 
   if (!args.dryRun && external) {
@@ -262,14 +269,15 @@ function getTargetLocaleMessages (messages: LocaleMessages, hierarchy: string[])
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-async function writeSFC (sources: SFCFileInfo[], format?: any, prettier?: any) {
-  // TODO: async implementation
-  sources.forEach(({ path, content }) => {
+async function writeSFC (sources: SFCFileInfo[], format: any, prettier: any, vue: number) {
+  for (const { path, content } of sources) {
+    let _content = content
     if (format && prettier) {
-      content = format(content, path, { prettier })
+      _content = await format(content, path, { prettier, vue })
     }
-    fs.writeFileSync(path, content)
-  })
+    // TODO: async implementation
+    fs.writeFileSync(path, _content)
+  }
 }
 
 function writeExternalLocaleMessages (meta: MetaExternalLocaleMessages[]) {

test/commands/infuse.test.ts

@@ -63,13 +63,6 @@ jest.mock('path', () => ({
 }))
 import path from 'path'
 
-// mock: `@intlify/cli
-// jest.mock('@intlify/cli', () => ({
-//   __esModule: true,
-//   ...jest.requireActual('@intlify/cli')
-// }))
-// import '@intlify/cli'
-
 // -------------------
 // setup/teadown hooks
 
@@ -305,7 +298,7 @@ test('ignore option', async () => {
   mockFS.writeFileSync.mockImplementation((path, data) => {
     writeFiles[path as string] = data.toString()
   })
-  mockFS.readFileSync.mockImplementationOnce(path => MOCK_IGNORE_FILES);
+  mockFS.readFileSync.mockImplementationOnce(path => MOCK_IGNORE_FILES)
   const mockGlob = glob as jest.Mocked<typeof glob>
   mockGlob.sync.mockImplementationOnce(p => [`${TARGET_PATH}/src/App.vue`])
   const mockPath = path as jest.Mocked<typeof path>

yarn.lock

@@ -340,16 +340,16 @@
     source-map "^0.6.1"
     yaml-eslint-parser "^0.3.2"
 
-"@intlify/cli@^0.10.0":
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@intlify/cli/-/cli-0.10.0.tgz#586ae6505b27a536096e08658482a6fbeb87a826"
-  integrity sha512-mQ9y4+09y/JZPgGNkHvnbxIfWuiVn0YS3VHEOiS9b1QHSYSyDiD9eExMLaUkalmFbcM3ZMQIHhapIed14edY1A==
+"@intlify/cli@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@intlify/cli/-/cli-0.11.0.tgz#c346b36d3ce9eec7a5507ec3030de66e0d5f6054"
+  integrity sha512-Z/F2Ml5khyTpU4QzvNqixPftQQvDKb21N9lYULBLzXerceDGenDZWIkX6jfjhKtYGQ7yQl8cN4mR4hLzYQ0FyA==
   dependencies:
     "@intlify/bundle-utils" next
     "@intlify/core" beta
     "@intlify/shared" beta
-    "@vue/compiler-sfc" "^3.2.20"
-    chalk "^4.1.0"
+    "@vue/compiler-sfc" latest
+    colorette "^2.0.16"
     cosmiconfig "^7.0.1"
     debug "^4.3.2"
     diff-match-patch "^1.0.5"
@@ -359,6 +359,7 @@
     pathe "^0.2.0"
     prettier "^2.4.1"
     prettier-plugin-sort-json "^0.0.2"
+    vue-template-compiler latest
     yaml-eslint-parser "^0.4.1"
     yargs "^17.2.0"
 
@@ -1086,7 +1087,7 @@
     "@vue/compiler-core" "3.2.21"
     "@vue/shared" "3.2.21"
 
-"@vue/compiler-sfc@^3.2.20":
+"@vue/compiler-sfc@latest":
   version "3.2.21"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.21.tgz#42639ee49e725afb7d8f1d1940e75dc17a56002c"
   integrity sha512-+yDlUSebKpz/ovxM2vLRRx7w/gVfY767pOfYTgbIhAs+ogvIV2BsIt4fpxlThnlCNChJ+yE0ERUNoROv2kEGEQ==
@@ -1930,6 +1931,11 @@ colorette@^1.2.2:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
+colorette@^2.0.16:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
+  integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -6889,7 +6895,7 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
-vue-template-compiler@^2.6.10:
+vue-template-compiler@^2.6.10, vue-template-compiler@latest:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
   integrity sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==