Replacing with TypeScript (#97)

* Replacing with TypeScript

* Fix docs build

Author: ota-meshi

.eslintrc.js

@@ -12,11 +12,27 @@ module.exports = {
     'prettier',
     'prettier/vue'
   ],
-  plugins: [],
+  plugins: ['@typescript-eslint'],
   parserOptions: {
     ecmaVersion: 2015
   },
   rules: {
     'object-shorthand': 'error'
-  }
+  },
+  overrides: [
+    {
+      files: ['*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'prettier/@typescript-eslint'
+      ],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      },
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off'
+      }
+    }
+  ]
 }

.github/workflows/test.yml

@@ -31,4 +31,6 @@ jobs:
       - name: Test
         run: yarn test
       - name: Integration Test
-        run: yarn test:integrations
+        run: |
+          yarn build
+          yarn test:integrations

.gitignore

@@ -6,3 +6,4 @@ coverage
 *.log
 *.swp
 *~
+/dist

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
     "eslint.options": { "configFile": ".eslintrc.js" },
     "eslint.validate": [
-        "javascript"
+        "javascript",
+        "typescript"
     ],
     "eslint.alwaysShowStatus": true,
     "eslint.packageManager": "yarn",

docs/.vuepress/config.js

@@ -4,6 +4,7 @@
  */
 'use strict'
 
+require('ts-node').register()
 const { withCategories } = require('../../scripts/lib/rules')
 require('../../scripts/update-docs-headers')
 require('../../scripts/update-docs-index')

lib/configs.js

@@ -0,0 +1,8 @@
+/** DON'T EDIT THIS FILE; was created by scripts. */
+import base from './configs/base'
+import recommended from './configs/recommended'
+
+export = {
+  base,
+  recommended
+}

lib/configs.ts

@@ -1,6 +1,4 @@
-'use strict'
-
-module.exports = {
+export = {
   parser: require.resolve('vue-eslint-parser'),
   plugins: ['@intlify/vue-i18n'],
   overrides: [

lib/configs/base.js renamed to lib/configs/base.ts

@@ -1,7 +1,5 @@
 /** DON'T EDIT THIS FILE; was created by scripts. */
-'use strict'
-
-module.exports = {
+export = {
   extends: [require.resolve('./base')],
   parserOptions: {
     ecmaVersion: 2018,

lib/configs/recommended.js renamed to lib/configs/recommended.ts

@@ -2,9 +2,10 @@
  * @fileoverview ESLint plugin for vue-i18n
  * @author kazuya kawaguchi (a.k.a. kazupon)
  */
-'use strict'
+import configs from './configs'
+import rules from './rules'
 
-module.exports = {
-  configs: require('./configs'),
-  rules: require('./rules')
+export = {
+  configs,
+  rules
 }

lib/index.js renamed to lib/index.ts

@@ -0,0 +1,16 @@
+/** DON'T EDIT THIS FILE; was created by scripts. */
+import noDynamicKeys from './rules/no-dynamic-keys'
+import noHtmlMessages from './rules/no-html-messages'
+import noMissingKeys from './rules/no-missing-keys'
+import noRawText from './rules/no-raw-text'
+import noUnusedKeys from './rules/no-unused-keys'
+import noVHtml from './rules/no-v-html'
+
+export = {
+  'no-dynamic-keys': noDynamicKeys,
+  'no-html-messages': noHtmlMessages,
+  'no-missing-keys': noMissingKeys,
+  'no-raw-text': noRawText,
+  'no-unused-keys': noUnusedKeys,
+  'no-v-html': noVHtml
+}

lib/rules.js

@@ -1,11 +1,11 @@
 /**
  * @author kazuya kawaguchi (a.k.a. kazupon)
  */
-'use strict'
+import { defineTemplateBodyVisitor } from '../utils/index'
+import type { RuleContext, RuleListener } from '../types'
+import type { AST as VAST } from 'vue-eslint-parser'
 
-const { defineTemplateBodyVisitor } = require('../utils/index')
-
-function checkDirective(context, node) {
+function checkDirective(context: RuleContext, node: VAST.VDirective) {
   if (
     node.value &&
     node.value.type === 'VExpressionContainer' &&
@@ -20,29 +20,37 @@ function checkDirective(context, node) {
   }
 }
 
-function checkComponent(context, node) {
+function checkComponent(context: RuleContext, node: VAST.VDirectiveKey) {
+  const parent: VAST.VDirective = node.parent as never // typebug?
   if (
     node.name.type === 'VIdentifier' &&
     node.name.name === 'bind' &&
+    node.argument &&
     node.argument.type === 'VIdentifier' &&
     node.argument.name === 'path' &&
-    node.parent.value &&
-    node.parent.value.type === 'VExpressionContainer' &&
-    node.parent.value.expression &&
-    node.parent.value.expression.type === 'Identifier'
+    parent.value &&
+    parent.value.type === 'VExpressionContainer' &&
+    parent.value.expression &&
+    parent.value.expression.type === 'Identifier'
   ) {
-    const name = node.parent.value.expression.name
+    const name = parent.value.expression.name
     context.report({
       node,
       message: `'${name}' dynamic key is used'`
     })
   }
 }
 
-function checkCallExpression(context, node) {
+function checkCallExpression(
+  context: RuleContext,
+  node: VAST.ESLintCallExpression
+) {
   const funcName =
-    (node.callee.type === 'MemberExpression' && node.callee.property.name) ||
-    node.callee.name
+    (node.callee.type === 'MemberExpression' &&
+      node.callee.property.type === 'Identifier' &&
+      node.callee.property.name) ||
+    (node.callee.type === 'Identifier' && node.callee.name) ||
+    ''
 
   if (
     !/^(\$t|t|\$tc|tc)$/.test(funcName) ||
@@ -62,37 +70,37 @@ function checkCallExpression(context, node) {
   }
 }
 
-function create(context) {
+function create(context: RuleContext): RuleListener {
   return defineTemplateBodyVisitor(
     context,
     {
-      "VAttribute[directive=true][key.name='t']"(node) {
+      "VAttribute[directive=true][key.name='t']"(node: VAST.VDirective) {
         checkDirective(context, node)
       },
 
-      "VAttribute[directive=true][key.name.name='t']"(node) {
+      "VAttribute[directive=true][key.name.name='t']"(node: VAST.VDirective) {
         checkDirective(context, node)
       },
 
       'VElement:matches([name=i18n], [name=i18n-t]) > VStartTag > VAttribute[directive=true] > VDirectiveKey'(
-        node
+        node: VAST.VDirectiveKey
       ) {
         checkComponent(context, node)
       },
 
-      CallExpression(node) {
+      CallExpression(node: VAST.ESLintCallExpression) {
         checkCallExpression(context, node)
       }
     },
     {
-      CallExpression(node) {
+      CallExpression(node: VAST.ESLintCallExpression) {
         checkCallExpression(context, node)
       }
     }
   )
 }
 
-module.exports = {
+export = {
   meta: {
     type: 'suggestion',
     docs: {

lib/rules.ts

@@ -1,40 +1,45 @@
 /**
  * @author kazuya kawaguchi (a.k.a. kazupon)
  */
-'use strict'
+import { extname } from 'path'
+import parse5 from 'parse5'
+import { getLocaleMessages } from '../utils/index'
+import debugBuilder from 'debug'
+import type { AST as VAST } from 'vue-eslint-parser'
+import type { AST as JSONAST } from 'eslint-plugin-jsonc'
+import type { AST as YAMLAST } from 'yaml-eslint-parser'
+import type { RuleContext, RuleListener } from '../types'
 
-const { extname } = require('path')
-const parse5 = require('parse5')
-const { getLocaleMessages } = require('../utils/index')
-const debug = require('debug')('eslint-plugin-vue-i18n:no-html-messages')
+const debug = debugBuilder('eslint-plugin-vue-i18n:no-html-messages')
 
-/**
- * @typedef {import('eslint-plugin-jsonc').AST.JSONLiteral} JSONLiteral
- * @typedef {import('yaml-eslint-parser').AST.YAMLScalar} YAMLScalar
- */
-
-function findHTMLNode(node) {
-  return node.childNodes.find(child => {
-    if (child.nodeName !== '#text' && child.tagName) {
+function findHTMLNode(
+  node: parse5.DefaultTreeDocumentFragment
+): parse5.DefaultTreeElement | undefined {
+  return node.childNodes.find((child): child is parse5.DefaultTreeElement => {
+    if (
+      child.nodeName !== '#text' &&
+      (child as parse5.DefaultTreeElement).tagName
+    ) {
       return true
     }
+    return false
   })
 }
 
-function create(context) {
+function create(context: RuleContext): RuleListener {
   const filename = context.getFilename()
 
   /**
    * @param {JSONLiteral} node
    */
-  function verifyJSONLiteral(node) {
-    const parent = node.parent
+  function verifyJSONLiteral(node: JSONAST.JSONLiteral) {
+    const parent = node.parent!
     if (parent.type === 'JSONProperty' && parent.key === node) {
       return
     }
     const htmlNode = parse5.parseFragment(`${node.value}`, {
       sourceCodeLocationInfo: true
-    })
+    }) as parse5.DefaultTreeDocumentFragment
     const foundNode = findHTMLNode(htmlNode)
     if (!foundNode) {
       return
@@ -44,7 +49,7 @@ function create(context) {
       column:
         node.loc.start.column +
         1 /* quote */ +
-        foundNode.sourceCodeLocation.startOffset
+        foundNode.sourceCodeLocation!.startOffset
     }
     context.report({
       message: `used HTML localization message`,
@@ -55,14 +60,14 @@ function create(context) {
   /**
    * @param {YAMLScalar} node
    */
-  function verifyYAMLScalar(node) {
+  function verifyYAMLScalar(node: YAMLAST.YAMLScalar) {
     const parent = node.parent
     if (parent.type === 'YAMLPair' && parent.key === node) {
       return
     }
     const htmlNode = parse5.parseFragment(`${node.value}`, {
       sourceCodeLocationInfo: true
-    })
+    }) as parse5.DefaultTreeDocumentFragment
     const foundNode = findHTMLNode(htmlNode)
     if (!foundNode) {
       return
@@ -72,7 +77,7 @@ function create(context) {
       column:
         node.loc.start.column +
         1 /* quote */ +
-        foundNode.sourceCodeLocation.startOffset
+        foundNode.sourceCodeLocation!.startOffset
     }
     context.report({
       message: `used HTML localization message`,
@@ -82,15 +87,16 @@ function create(context) {
 
   if (extname(filename) === '.vue') {
     return {
-      Program(node) {
+      Program() {
         const documentFragment =
           context.parserServices.getDocumentFragment &&
           context.parserServices.getDocumentFragment()
         /** @type {VElement[]} */
         const i18nBlocks =
           (documentFragment &&
             documentFragment.children.filter(
-              node => node.type === 'VElement' && node.name === 'i18n'
+              (node): node is VAST.VElement =>
+                node.type === 'VElement' && node.name === 'i18n'
             )) ||
           []
         if (!i18nBlocks.length) {
@@ -121,7 +127,9 @@ function create(context) {
                 verifyYAMLScalar(node)
               }
             },
-            leaveNode() {}
+            leaveNode() {
+              // noop
+            }
           })
         }
       }
@@ -146,7 +154,7 @@ function create(context) {
   }
 }
 
-module.exports = {
+export = {
   meta: {
     type: 'problem',
     docs: {