feat: i18n custom block pre-compilation bundling (#93)

* feat: i18n custom block pre-compilation bundling

* fix: add node v14

Author: kazupon

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [10, 12]
+        node: [10, 12, 14]
     steps:
       - name: Checkout
         uses: actions/checkout@v2

example/webpack.config.js

@@ -38,7 +38,14 @@ module.exports = {
       {
         resourceQuery: /blockType=i18n/,
         type: 'javascript/auto',
-        use: [path.resolve(__dirname, '../lib/index.js')]
+        use: [
+          {
+            loader: path.resolve(__dirname, '../lib/index.js'),
+            options: {
+              preCompile: true
+            }
+          }
+        ]
       }
     ]
   },

package.json

@@ -24,22 +24,28 @@
     }
   },
   "dependencies": {
+    "flat": "^5.0.0",
     "js-yaml": "^3.13.1",
-    "json5": "^2.1.1"
+    "json5": "^2.1.1",
+    "loader-utils": "^2.0.0",
+    "vue-i18n": "^9.0.0-alpha.7"
   },
   "devDependencies": {
+    "@types/flat": "^5.0.0",
     "@types/jest": "^25.0.0",
     "@types/js-yaml": "^3.12.1",
     "@types/jsdom": "^16.0.0",
     "@types/json5": "^0.0.30",
+    "@types/loader-utils": "^1.1.3",
     "@types/memory-fs": "^0.3.2",
     "@types/node": "^13.1.4",
+    "@types/prettier": "^2.0.0",
     "@types/webpack": "^4.41.1",
     "@types/webpack-merge": "^4.1.5",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "@typescript-eslint/typescript-estree": "^2.26.0",
-    "@vue/compiler-sfc": "^3.0.0-alpha.11",
+    "@vue/compiler-sfc": "^3.0.0-beta.4",
     "babel-loader": "^8.1.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.1",
@@ -52,14 +58,13 @@
     "lerna-changelog": "^1.0.0",
     "memory-fs": "^0.5.0",
     "opener": "^1.5.1",
-    "prettier": "^2.0.4",
+    "prettier": "^2.0.5",
     "puppeteer": "^2.1.1",
     "shipjs": "^0.18.0",
     "ts-jest": "^25.3.0",
     "typescript": "^3.8.3",
     "typescript-eslint-language-service": "^2.0.3",
-    "vue": "^3.0.0-alpha.11",
-    "vue-i18n": "^9.0.0-alpha.2",
+    "vue": "^3.0.0-beta.6",
     "vue-loader": "^16.0.0-alpha.3",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
@@ -81,6 +86,9 @@
   ],
   "license": "MIT",
   "main": "lib/index.js",
+  "peerDependencies": {
+    "vue": "^3.0.0-beta.6"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/intlify/vue-i18n-loader.git"
@@ -91,11 +99,11 @@
     "clean": "rm -rf ./coverage && rm -rf ./lib/*.js*",
     "coverage": "opener coverage/lcov-report/index.html",
     "example": "yarn build && webpack-dev-server --config example/webpack.config.js --inline --hot",
+    "fix": "yarn lint:fix && yarn format:fix",
     "format": "prettier --config .prettierrc --ignore-path .prettierignore '**/*.{js,json,html}'",
     "format:fix": "yarn format --write",
     "lint": "eslint ./src ./test --ext .ts",
     "lint:fix": "yarn lint --fix",
-    "fix": "yarn lint:fix && yarn format:fix",
     "release:prepare": "shipjs prepare",
     "release:trigger": "shipjs trigger",
     "test": "yarn lint && yarn test:cover && yarn test:e2e",

src/gen.ts

@@ -0,0 +1,108 @@
+import { ParsedUrlQuery } from 'querystring'
+import JSON5 from 'json5'
+import yaml from 'js-yaml'
+import { flatten } from 'flat'
+import prettier from 'prettier'
+import {
+  baseCompile,
+  LocaleMessages,
+  Locale,
+  CompileOptions,
+  generateFormatCacheKey,
+  friendlyJSONstringify
+} from 'vue-i18n'
+
+export type VueI18nLoaderOptions = {
+  preCompile?: boolean
+}
+
+export function generateCode(
+  source: string | Buffer,
+  query: ParsedUrlQuery,
+  options: VueI18nLoaderOptions
+): string {
+  const data = convert(source, query.lang as string)
+  let value = JSON.parse(data)
+
+  if (query.locale && typeof query.locale === 'string') {
+    value = Object.assign({}, { [query.locale]: value })
+  }
+
+  let code = ''
+  const preCompile = !!options.preCompile
+
+  if (preCompile) {
+    code += generateCompiledCode(value as LocaleMessages)
+    code += `export default function (Component) {
+  Component.__i18n = Component.__i18n || _getResource
+}\n`
+  } else {
+    value = friendlyJSONstringify(value)
+    code += `export default function (Component) {
+  Component.__i18n = Component.__i18n || []
+  Component.__i18n.push('${value}')
+}\n`
+  }
+
+  return prettier.format(code, { parser: 'babel' })
+}
+
+function convert(source: string | Buffer, lang: string): string {
+  const value = Buffer.isBuffer(source) ? source.toString() : source
+
+  switch (lang) {
+    case 'yaml':
+    case 'yml':
+      const data = yaml.safeLoad(value)
+      return JSON.stringify(data, undefined, '\t')
+    case 'json5':
+      return JSON.stringify(JSON5.parse(value))
+    default:
+      return value
+  }
+}
+
+function generateCompiledCode(messages: LocaleMessages): string {
+  let code = ''
+  code += `function _register(functions, pathkey, msg) {
+  const path = JSON.stringify(pathkey)
+  functions[path] = msg
+}
+`
+  code += `const _getResource = () => {
+  const functions = Object.create(null)
+`
+
+  const locales = Object.keys(messages) as Locale[]
+  locales.forEach(locale => {
+    const message = flatten(messages[locale]) as { [key: string]: string }
+    const keys = Object.keys(message)
+    keys.forEach(key => {
+      const format = message[key]
+      let occured = false
+      const options = {
+        mode: 'arrow',
+        // TODO: source mapping !
+        onError(err) {
+          console.error(err)
+          occured = true
+        }
+      } as CompileOptions
+      const result = baseCompile(format, options)
+      if (!occured) {
+        code += `  _register(functions, ${generateFormatCacheKey(
+          locale,
+          key,
+          format
+        )}, ${result.code})\n`
+      }
+    })
+  })
+
+  code += `
+  return { functions }
+}
+`
+
+  return code
+}

src/index.ts

@@ -1,21 +1,25 @@
 import webpack from 'webpack'
-import { ParsedUrlQuery, parse } from 'querystring'
+import loaderUtils from 'loader-utils'
+import { parse } from 'querystring'
 import { RawSourceMap } from 'source-map'
-import JSON5 from 'json5'
-import yaml from 'js-yaml'
+import { generateCode, VueI18nLoaderOptions } from './gen'
 
 const loader: webpack.loader.Loader = function (
   source: string | Buffer,
   sourceMap: RawSourceMap | undefined
 ): void {
+  const loaderContext = this // eslint-disable-line @typescript-eslint/no-this-alias
+  const options = loaderUtils.getOptions(loaderContext) || {}
+
   if (this.version && Number(this.version) >= 2) {
     try {
       this.cacheable && this.cacheable()
-      this.callback(
-        null,
-        `export default ${generateCode(source, parse(this.resourceQuery))}`,
-        sourceMap
-      )
+      const code = `${generateCode(
+        source,
+        parse(this.resourceQuery),
+        options as VueI18nLoaderOptions
+      )}`
+      this.callback(null, code, sourceMap)
     } catch (err) {
       this.emitError(err.message)
       this.callback(err)
@@ -27,40 +31,4 @@ const loader: webpack.loader.Loader = function (
   }
 }
 
-function generateCode(source: string | Buffer, query: ParsedUrlQuery): string {
-  const data = convert(source, query.lang as string)
-  let value = JSON.parse(data)
-
-  if (query.locale && typeof query.locale === 'string') {
-    value = Object.assign({}, { [query.locale]: value })
-  }
-
-  value = JSON.stringify(value)
-    .replace(/\u2028/g, '\\u2028')
-    .replace(/\u2029/g, '\\u2029')
-    .replace(/\\/g, '\\\\')
-
-  let code = ''
-  code += `function (Component) {
-  Component.__i18n = Component.__i18n || []
-  Component.__i18n.push('${value.replace(/\u0027/g, '\\u0027')}')
-}\n`
-  return code
-}
-
-function convert(source: string | Buffer, lang: string): string {
-  const value = Buffer.isBuffer(source) ? source.toString() : source
-
-  switch (lang) {
-    case 'yaml':
-    case 'yml':
-      const data = yaml.safeLoad(value)
-      return JSON.stringify(data, undefined, '\t')
-    case 'json5':
-      return JSON.stringify(JSON5.parse(value))
-    default:
-      return value
-  }
-}
-
 export default loader

test/__snapshots__/index.test.ts.snap

@@ -46,7 +46,8 @@ Array [
 
 exports[`special characters 1`] = `
 Array [
-  "{\\"en\\":{\\"hello\\":\\"hello\\\\ngreat\\\\t\\\\\\"world\\\\\\"\\"}}",
+  "{\\"en\\":{\\"hello\\":\\"hello
+great	\\"world\\"\\"}}",
 ]
 `;
 

test/fixtures/compile.vue

@@ -0,0 +1,26 @@
+<i18n>
+{
+  "en": {
+    "hello": "hello world!",
+    "named": "hi, {name} !",
+    "list": "hi, {0} !",
+    "literal": "hi, {  'kazupon'  } !",
+    "linked": "hi, @:name !",
+    "plural": "@.caml:{'no apples'} | {0} apple | {n} apples",
+    "nest": {
+      "lieteral": "hi, kazupon !"
+    },
+    "hi, {name} !": "hi hi!",
+    "こんにちは": "こんにちは！",
+    "single-quote": "I don't know!",
+    "emoji": "😺",
+    "unicode": "\u0041",
+    "unicode-escape": "\\u0041",
+    "backslash-single-quote": "\\'",
+    "backslash-backslash": "\\\\"
+  },
+  "ja": {
+    "hello": "こんにちは！"
+  }
+}
+</i18n>

test/index.test.ts

@@ -1,4 +1,6 @@
 import { bundleAndRun } from './utils'
+import { MessageFunction, baseCompile } from 'vue-i18n'
+import prettier from 'prettier'
 
 test('basic', async () => {
   const { module } = await bundleAndRun('basic.vue')
@@ -44,3 +46,19 @@ test('json5', async () => {
   const { module } = await bundleAndRun('json5.vue')
   expect(module.__i18n).toMatchSnapshot()
 })
+
+test('pre compile', async () => {
+  const options: prettier.Options = { parser: 'babel' }
+  const { module } = await bundleAndRun('compile.vue', {
+    preCompile: true
+  })
+  const { functions } = module.__i18n()
+  for (const [key, value] of Object.entries(functions)) {
+    const msg = value as MessageFunction
+    const data = JSON.parse(key)
+    const result = baseCompile(data.s, { mode: 'arrow' })
+    expect(prettier.format(msg.toString(), options)).toMatch(
+      prettier.format(result.code, options)
+    )
+  }
+})

test/utils.ts

@@ -41,14 +41,19 @@ export function bundle(fixture: string, options = {}): Promise<BundleResolve> {
         {
           resourceQuery: /blockType=i18n/,
           type: 'javascript/auto',
-          use: [path.resolve(__dirname, '../src/index.ts')]
+          use: [
+            {
+              loader: path.resolve(__dirname, '../src/index.ts'),
+              options
+            }
+          ]
         }
       ]
     },
     plugins: [new VueLoaderPlugin()]
   }
 
-  const config = merge({}, baseConfig, options)
+  const config = merge({}, baseConfig)
   const compiler = webpack(config)
 
   const mfs = new memoryfs() // eslint-disable-line

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
@@ -39,15 +39,16 @@
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    //"typeRoots": [
-    //  "./@types",
-    //  "./node_modules/@types"
-    //],
+    "typeRoots": [
+      "./@types",
+      "./node_modules/vue-i18n/dist",
+      "./node_modules/@types"
+    ],
     // "types": [],                           /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */