improve directive compilation (#59)

* improve directive compilation

* fix lint errors

Author: kazupon

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
   },
   rules: {
     'object-curly-spacing': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/member-delimiter-style': 'off',
     '@typescript-eslint/no-use-before-define': 'off'

package.json

@@ -25,23 +25,22 @@
   },
   "dependencies": {
     "@babel/parser": "^7.9.6",
-    "@vue/compiler-dom": "^3.0.0-beta.15",
-    "@vue/shared": "^3.0.0-beta.15",
-    "vue-i18n": "^9.0.0-alpha.11"
+    "@vue/compiler-dom": "^3.0.0-rc.5",
+    "@vue/shared": "^3.0.0-rc.5",
+    "vue-i18n": "^9.0.0-alpha.12"
   },
   "devDependencies": {
     "@types/jest": "^26.0.0",
     "@types/node": "^13.1.4",
     "@types/webpack": "^4.41.1",
     "@types/webpack-merge": "^4.1.5",
-    "@typescript-eslint/eslint-plugin": "^3.0.0",
-    "@typescript-eslint/parser": "^3.0.0",
-    "@typescript-eslint/typescript-estree": "^3.0.0",
-    "@vue/compiler-sfc": "^3.0.0-beta.15",
-    "@vue/runtime-dom": "^3.0.0-beta.15",
-    "@vue/server-renderer": "^3.0.0-beta.15",
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
+    "@vue/compiler-sfc": "^3.0.0-rc.5",
+    "@vue/runtime-dom": "^3.0.0-rc.5",
+    "@vue/server-renderer": "^3.0.0-rc.5",
     "babel-loader": "^8.1.0",
-    "eslint": "^7.1.0",
+    "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-vue-libs": "^4.0.0",
@@ -54,10 +53,10 @@
     "puppeteer": "^2.1.1",
     "shipjs": "^0.20.0",
     "ts-jest": "^26.0.0",
-    "typescript": "^3.9.5",
+    "typescript": "^3.9.7",
     "typescript-eslint-language-service": "^3.0.0",
-    "vue": "^3.0.0-beta.15",
-    "vue-loader": "^16.0.0-beta.3",
+    "vue": "^3.0.0-rc.5",
+    "vue-loader": "^16.0.0-beta.4",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
@@ -81,7 +80,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "peerDependencies": {
-    "vue": "^3.0.0-beta.5"
+    "vue": "^3.0.0-rc.5"
   },
   "repository": {
     "type": "git",

src/index.ts

@@ -4,9 +4,10 @@ import {
   createSimpleExpression,
   SimpleExpressionNode
 } from '@vue/compiler-dom'
-import { isPlainObject, isString, toDisplayString } from '@vue/shared'
+import { isObject, isString, toDisplayString } from '@vue/shared'
 import { I18n, Locale } from 'vue-i18n'
-import { evaluateValue } from './utils'
+import { evaluateValue } from './transpiler'
+import { report, ReportCodes } from './report'
 
 // TODO: should be imported from vue-i18n
 type VTDirectiveValue = {
@@ -16,58 +17,94 @@ type VTDirectiveValue = {
   choice?: number
 }
 
+// TODO: should be used from shared libs
 export const isNumber = (val: unknown): val is number =>
   typeof val === 'number' && isFinite(val)
 
 export function defineTransformVT(i18n: I18n): DirectiveTransform {
-  return (dir, node, context) => {
+  return (dir, node /*, context*/) => {
     const { exp, loc } = dir
-    // console.log('v-t trans', dir)
-    // console.log('v-t trans node', node)
     if (!exp) {
-      // TODO: throw error
+      // TODO: throw error with context.OnError
+      // NOTE: We need to support from @vue/compiler-core
+      // https://github.com/vuejs/vue-next/issues/1147
+      report(ReportCodes.UNEXPECTED_DIRECTIVE_EXPRESSION, {
+        mode: 'error',
+        args: [node.loc.source || ''],
+        loc: node.loc
+      })
     }
-    if (node.children.length) {
-      // TODO: throw error
+    if (node.children.length > 0) {
+      // TODO: throw error with context.OnError
+      // NOTE: We need to support from @vue/compiler-core
+      // https://github.com/vuejs/vue-next/issues/1147
+      report(ReportCodes.ORVERRIDE_ELEMENT_CHILDREN, {
+        mode: 'error',
+        args: [node.loc.source || ''],
+        loc: node.loc
+      })
+      node.children.length = 0
     }
 
-    const { status, value } = evaluateValue(
-      (exp as SimpleExpressionNode).content
-    )
-    if (status === 'ng') {
-      // TODO: throw error
-    }
+    const simpleExp = exp as SimpleExpressionNode
+    if (simpleExp.isConstant) {
+      if (dir.modifiers.includes('preserve')) {
+        report(ReportCodes.NOT_SUPPORTED_PRESERVE, {
+          args: [node.loc.source || ''],
+          loc: node.loc
+        })
+      }
 
-    const parsedValue = parseValue(value)
-    const translated = i18n.global.t(...makeParams(parsedValue))
-    if (translated) {
-      ;(exp as SimpleExpressionNode).content = toDisplayString(
-        `${JSON.stringify(translated)}`
-      )
-    }
+      const { status, value } = evaluateValue(simpleExp.content)
+      if (status === 'ng') {
+        report(ReportCodes.FAILED_VALUE_EVALUATION, {
+          args: [node.loc.source || ''],
+          loc: node.loc
+        })
+        return { props: [] }
+      }
+
+      const [parsedValue, parseStatus] = parseValue(value)
+      if (parseStatus !== ReportCodes.SUCCESS) {
+        report(parseStatus, { args: [node.loc.source || ''], loc: node.loc })
+        return { props: [] }
+      }
+
+      const translated = i18n.global.t(...makeParams(parsedValue!))
+      if (translated) {
+        simpleExp.content = toDisplayString(`${JSON.stringify(translated)}`)
+      }
 
-    return {
-      props: [
-        createObjectProperty(
-          createSimpleExpression(`textContent`, true, loc),
-          exp || createSimpleExpression('', true)
-        )
-      ]
+      // success!
+      return {
+        props: [
+          createObjectProperty(
+            createSimpleExpression(`textContent`, true, loc),
+            exp || createSimpleExpression('', true)
+          )
+        ]
+      }
+    } else {
+      report(ReportCodes.NOT_SUPPORTED_BINDING_PRE_TRANSLATION, {
+        args: [node.loc.source || ''],
+        loc: node.loc
+      })
+      return { props: [] }
     }
   }
 }
 
 // TODO: should be defined typing ...
-function parseValue(value: unknown): VTDirectiveValue {
+function parseValue(value: unknown): [VTDirectiveValue | null, ReportCodes] {
   if (isString(value)) {
-    return { path: value }
-  } else if (isPlainObject(value)) {
+    return [{ path: value }, ReportCodes.SUCCESS]
+  } else if (isObject(value)) {
     if (!('path' in value)) {
-      throw new Error('TODO')
+      return [null, ReportCodes.REQUIRED_PARAMETER]
     }
-    return value as VTDirectiveValue
+    return [value as VTDirectiveValue, ReportCodes.SUCCESS]
   } else {
-    throw new Error('TODO')
+    return [null, ReportCodes.INVALID_PARAMETER_TYPE]
   }
 }
 

src/report.ts

@@ -0,0 +1,80 @@
+import { format } from './utils'
+import { SourceLocation } from '@vue/compiler-core'
+import { isString } from '@vue/shared'
+
+export interface ExtensionsError extends SyntaxError {
+  code: number
+  loc?: SourceLocation
+}
+
+export interface ReportOptions {
+  mode?: 'error' | 'warn'
+  loc?: SourceLocation
+  args?: unknown[]
+}
+
+export const enum ReportCodes {
+  // Special value for higher-order compilers to pick up the last code
+  // to avoid collision of error codes. This should always be kept as the last
+  // item.
+  SUCCESS,
+  UNEXPECTED_DIRECTIVE_EXPRESSION,
+  NOT_SUPPORTED_BINDING_PRE_TRANSLATION,
+  FAILED_VALUE_EVALUATION,
+  REQUIRED_PARAMETER,
+  INVALID_PARAMETER_TYPE,
+  NOT_SUPPORTED_PRESERVE,
+  ORVERRIDE_ELEMENT_CHILDREN,
+  __EXTEND_POINT__
+}
+
+// TODO: should be extracted as i18n resources (intlify project self hosting!)
+const ReportMessages: { [code: number]: string } = {
+  [ReportCodes.UNEXPECTED_DIRECTIVE_EXPRESSION]: `Unexpected directive expression: {0}`,
+  [ReportCodes.NOT_SUPPORTED_BINDING_PRE_TRANSLATION]: `Not support binding in pre-localization: {0}`,
+  [ReportCodes.FAILED_VALUE_EVALUATION]: `Failed valu evaluation: {0}`,
+  [ReportCodes.REQUIRED_PARAMETER]: `Required parameter: {0}`,
+  [ReportCodes.INVALID_PARAMETER_TYPE]: `Required parameter: {0}`,
+  [ReportCodes.NOT_SUPPORTED_PRESERVE]: `Not supportted 'preserve': {0}`,
+  [ReportCodes.ORVERRIDE_ELEMENT_CHILDREN]: `v-t will override element children: {0}`
+}
+
+export function getReportMessage(
+  code: ReportCodes,
+  ...args: unknown[]
+): string {
+  return format(ReportMessages[code], ...args)
+}
+
+function createExtensionsError(
+  code: ReportCodes,
+  msg: string,
+  loc?: SourceLocation
+): ExtensionsError {
+  const error = new SyntaxError(msg) as ExtensionsError
+  error.code = code
+  if (loc) {
+    error.loc = loc
+  }
+  return error
+}
+
+export function report(
+  code: ReportCodes,
+  optinos: ReportOptions = {}
+): void | ExtensionsError {
+  const mode =
+    optinos.mode &&
+    isString(optinos.mode) &&
+    ['warn', 'error'].includes(optinos.mode)
+      ? optinos.mode
+      : 'warn'
+
+  const msg = getReportMessage(code, optinos.args)
+  if (mode === 'warn') {
+    console.warn('[vue-i18n-extensions] ' + msg)
+  } else {
+    // error
+    throw createExtensionsError(code, msg, optinos.loc)
+  }
+}

src/transpiler.ts

@@ -0,0 +1,23 @@
+import { parse } from '@babel/parser'
+
+interface EvaluateReturn {
+  status: 'ok' | 'ng'
+  value?: unknown
+}
+
+export function evaluateValue(expression: string): EvaluateReturn {
+  const ret = { status: 'ng', value: undefined } as EvaluateReturn
+
+  try {
+    const ast = parse(`const a = ${expression.trim()}`)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const node = (ast.program.body[0] as any).declarations[0].init
+    if (node.type === 'StringLiteral' || node.type === 'ObjectExpression') {
+      const val = new Function(`return ${expression.trim()}`)()
+      ret.status = 'ok'
+      ret.value = val
+    }
+  } catch (e) {}
+
+  return ret
+}

src/utils.ts

@@ -1,23 +1,19 @@
-import { parse } from '@babel/parser'
+import { isObject } from '@vue/shared'
 
-interface EvaluateReturn {
-  status: 'ok' | 'ng'
-  value?: unknown
-}
-
-export function evaluateValue(expression: string): EvaluateReturn {
-  const ret = { status: 'ng', value: undefined } as EvaluateReturn
+const RE_ARGS = /\{([0-9a-zA-Z]+)\}/g
 
-  try {
-    const ast = parse(`const a = ${expression.trim()}`)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const node = (ast.program.body[0] as any).declarations[0].init
-    if (node.type === 'StringLiteral' || node.type === 'ObjectExpression') {
-      const val = new Function(`return ${expression.trim()}`)()
-      ret.status = 'ok'
-      ret.value = val
+// eslint-disable-next-line
+export function format(message: string, ...args: any): string {
+  if (args.length === 1 && isObject(args[0])) {
+    args = args[0]
+  }
+  if (!args || !args.hasOwnProperty) {
+    args = {}
+  }
+  return message.replace(
+    RE_ARGS,
+    (match: string, identifier: string): string => {
+      return args.hasOwnProperty(identifier) ? args[identifier] : ''
     }
-  } catch (e) {}
-
-  return ret
+  )
 }