feat: add support for vue-i18n custom blocks by default

Author: JessicaSachs

e2e/__projects__/basic/__snapshots__/test.js.snap

@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`I18n Processor merges data blocks 1`] = `
+VueWrapper {
+  "_emitted": Object {},
+  "_emittedByOrder": Array [],
+  "isFunctionalComponent": undefined,
+}
+`;
+
+exports[`I18n Processor processes SFC with i18n JSON in external src attribute 1`] = `
+VueWrapper {
+  "_emitted": Object {},
+  "_emittedByOrder": Array [],
+  "isFunctionalComponent": undefined,
+}
+`;
+
+exports[`I18n Processor processes SFC with i18n JSON inline custom block 1`] = `
+VueWrapper {
+  "_emitted": Object {},
+  "_emittedByOrder": Array [],
+  "isFunctionalComponent": undefined,
+}
+`;
+
+exports[`I18n Processor processes SFC with i18n Yaml Inline 1`] = `
+VueWrapper {
+  "_emitted": Object {},
+  "_emittedByOrder": Array [],
+  "isFunctionalComponent": undefined,
+}
+`;
+
 exports[`generates source maps for .vue files 1`] = `
 "\\"use strict\\";
 

e2e/__projects__/basic/components/I18nJSONFromSrc.vue

@@ -0,0 +1,11 @@
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'I18nJSONFromSrc'
+}
+</script>
+
+<i18n src="./locales.json" />

e2e/__projects__/basic/components/I18nJSONInline.vue

@@ -0,0 +1,17 @@
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'I18nJSONInline'
+}
+</script>
+
+<i18n>
+  {
+    "en": {
+      "hello": "Hello i18n in SFC!"
+    }
+  }
+</i18n>

e2e/__projects__/basic/components/I18nMergingMultipleBlocks.vue

@@ -0,0 +1,24 @@
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'I18nMergingMultipleBlocks'
+}
+</script>
+
+<i18n src="./locales.json" />
+<i18n>
+  {
+    "en": {
+      "hello": "Hello i18n in SFC!"
+    }
+  }
+</i18n>
+<i18n>
+  en:
+    hello: "hello world!"
+  ja:
+    hello: "こんにちは、世界！"
+</i18n>

e2e/__projects__/basic/components/I18nYamlInline.vue

@@ -0,0 +1,16 @@
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'I18nYamlInline'
+}
+</script>
+
+<i18n>
+  en:
+    hello: "hello world!"
+  ja:
+    hello: "こんにちは、世界！"
+</i18n>

e2e/__projects__/basic/components/locales.json

@@ -0,0 +1,7 @@
+{
+  "en": {
+    "hello": "Hello i18n in SFC!",
+    "helloMultipleBlocks": "hello",
+    "additionalKey": "This is an additional key"
+  }
+}

e2e/__projects__/basic/test.js

@@ -1,7 +1,8 @@
-import { mount } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import TypeScript from './components/TypeScript.vue'
 import { resolve } from 'path'
 import { readFileSync } from 'fs'
+import VueI18n from 'vue-i18n'
 import jestVue from 'vue-jest'
 import RenderFunction from './components/RenderFunction.vue'
 import Jade from './components/Jade.vue'
@@ -12,6 +13,10 @@ import { randomExport } from './components/NamedExport.vue'
 import Coffee from './components/Coffee.vue'
 import CoffeeScript from './components/CoffeeScript.vue'
 import FunctionalSFCParent from './components/FunctionalSFCParent.vue'
+import I18nJSONInline from './components/I18nJSONInline.vue'
+import I18nJSONFromSrc from './components/I18nJSONFromSrc.vue'
+import I18nYamlInline from './components/I18nYamlInline.vue'
+import I18nMergingMultipleBlocks from './components/I18nMergingMultipleBlocks.vue'
 import NoScript from './components/NoScript.vue'
 import Pug from './components/Pug.vue'
 import PugRelative from './components/PugRelativeExtends.vue'
@@ -125,3 +130,42 @@ test('processes SFC with no template', () => {
   const wrapper = mount(RenderFunction)
   expect(wrapper.is('section')).toBe(true)
 })
+
+describe('I18n Processor', () => {
+  const setup = (opts = { locale: 'en' }) => {
+    const localVue = createLocalVue()
+    localVue.use(VueI18n)
+    const i18n = new VueI18n(opts)
+    return { i18n, localVue }
+  }
+
+  test('processes SFC with i18n JSON inline custom block', () => {
+    const { i18n, localVue } = setup()
+    const wrapper = mount(I18nJSONInline, { i18n, localVue })
+    expect(wrapper.text()).toBe('Hello i18n in SFC!')
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('processes SFC with i18n JSON in external src attribute', () => {
+    const { i18n, localVue } = setup()
+    const wrapper = mount(I18nJSONFromSrc, { i18n, localVue })
+    expect(wrapper.text()).toBe('Hello i18n in SFC!')
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('processes SFC with i18n Yaml Inline', () => {
+    const { i18n, localVue } = setup()
+    const wrapper = mount(I18nYamlInline, { i18n, localVue })
+    expect(wrapper.text()).toBe('hello world!')
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('merges data blocks', () => {
+    const { i18n, localVue } = setup()
+    const wrapper = mount(I18nMergingMultipleBlocks, { i18n, localVue })
+    expect(wrapper.text()).toBe('hello world!')
+    expect(typeof wrapper.vm.$t('additionalKey')).toEqual('string')
+
+    expect(wrapper).toMatchSnapshot()
+  })
+})

lib/generate-code.js

@@ -4,6 +4,7 @@ module.exports = function generateCode(
   scriptResult,
   templateResult,
   stylesResult,
+  i18nResult,
   isFunctional
 ) {
   let output = ''
@@ -75,6 +76,10 @@ module.exports = function generateCode(
         `})()\n`
     }
   }
+
+  if (i18nResult) {
+    output += `;\n ${i18nResult}`
+  }
   return {
     code: output,
     renderFnStartLine,

lib/process-i18n.js

@@ -0,0 +1,60 @@
+const JSON5 = require('json5')
+const yaml = require('js-yaml')
+const fs = require('fs')
+const path = require('path')
+
+const VUE_OPTIONS = '__options__'
+const VUE_I18N_OPTION = '__i18n'
+
+function convert(source, lang) {
+  switch (lang) {
+    case 'yaml':
+    case 'yml':
+      return JSON.stringify(yaml.safeLoad(source), undefined, '\t')
+    case 'json5':
+      return JSON.stringify(JSON5.parse(source))
+    default:
+      return source
+  }
+}
+
+// Because the vue-i18n docs do not require a language
+// we have to try to parse the content as json first, then fall back to yaml
+function parseLanguageAndContent(block, filename) {
+  const langKnown = block.attrs && block.attrs.lang
+  let content = block.content
+
+  if (block.attrs && block.attrs.src) {
+    content = fs.readFileSync(path.resolve(filename, '../', block.attrs.src))
+  }
+
+  if (langKnown) {
+    return JSON.stringify(JSON.parse(convert(content, langKnown)))
+  }
+
+  try {
+    return JSON.stringify(JSON.parse(convert(content, 'json')))
+  } catch (_) {
+    return JSON.stringify(JSON.parse(convert(content, 'yaml')))
+  }
+}
+
+module.exports = function(blocks, filename) {
+  const base = `${VUE_OPTIONS}.${VUE_I18N_OPTION} = []`
+  const codes = blocks.map(block => {
+    if (block.type === 'i18n') {
+      const value = parseLanguageAndContent(block, filename)
+        .replace(/\u2028/g, '\\u2028')
+        .replace(/\u2029/g, '\\u2029')
+        .replace(/\\/g, '\\\\')
+      return `${VUE_OPTIONS}.${VUE_I18N_OPTION}.push('${value.replace(
+        /\u0027/g,
+        '\\u0027'
+      )}')`
+    } else {
+      return ''
+    }
+  })
+
+  return codes.length ? [base].concat(codes).join('\n') : ''
+}

lib/process.js

@@ -5,6 +5,7 @@ const generateSourceMap = require('./generate-source-map')
 const typescriptTransformer = require('./typescript-transformer')
 const coffeescriptTransformer = require('./coffee-transformer')
 const _processStyle = require('./process-style')
+const processI18n = require('./process-i18n')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const logResultErrors = require('./utils').logResultErrors
 const stripInlineSourceMap = require('./utils').stripInlineSourceMap
@@ -99,6 +100,7 @@ module.exports = function(src, filename, config) {
   const templateResult = processTemplate(descriptor.template, filename, config)
   const scriptResult = processScript(descriptor.script, filename, config)
   const stylesResult = processStyle(descriptor.styles, filename, config)
+  const i18nResult = processI18n(descriptor.customBlocks, filename, config)
 
   const isFunctional =
     descriptor.template &&
@@ -112,6 +114,7 @@ module.exports = function(src, filename, config) {
     scriptResult,
     templateResult,
     stylesResult,
+    i18nResult,
     isFunctional
   )
 

package.json

@@ -58,6 +58,7 @@
     "stylus": "^0.54.5",
     "typescript": "^3.2.2",
     "vue": "^2.4.2",
+    "vue-i18n": "^8.15.5",
     "vue-template-compiler": "^2.4.2"
   },
   "peerDependencies": {
@@ -72,7 +73,8 @@
     "chalk": "^2.1.0",
     "convert-source-map": "^1.6.0",
     "extract-from-css": "^0.4.4",
-    "source-map": "^0.5.6",
+    "js-yaml": "^3.13.1",
+    "json5": "^2.1.1",
     "ts-jest": "^24.0.0"
   },
   "repository": {