eslint-plugin-smarthr 0.2.13 → 0.2.15

package/CHANGELOG.md

@@ -2,12 +2,30 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.15](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.12...v0.2.15) (2022-12-15)
+
+
+### Features
+
+* add prohibit-path-within-template-literal rule. ([#46](https://github.com/kufu/eslint-plugin-smarthr/issues/46)) ([1ea51a9](https://github.com/kufu/eslint-plugin-smarthr/commit/1ea51a95f0720e34729959dbc27b33a91ec2d73e))
+* ignores option for no-import-other-domain and require-barrel-import ([#45](https://github.com/kufu/eslint-plugin-smarthr/issues/45)) ([559fdcf](https://github.com/kufu/eslint-plugin-smarthr/commit/559fdcf9d075e5fe29a48ab2f2d4f1e5d1a33201))
+
+
+### Bug Fixes
+
+* redundant-nameのarrowedNameなどで利用するファイルパスが削られすぎていたため、指定が行いにくい問題を修正する ([#43](https://github.com/kufu/eslint-plugin-smarthr/issues/43)) ([6de9618](https://github.com/kufu/eslint-plugin-smarthr/commit/6de961831a9f9e0e93eeeebb80e56ecb60d9a2ff))
+
+### [0.2.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.13...v0.2.14) (2022-12-13)
+
+### Features
+* trim-propsルールを追加 ([#44](https://github.com/kufu/eslint-plugin-smarthr/pull/44)) 
+
 ### [0.2.13](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.12...v0.2.13) (2022-12-07)
 
 
 ### Bug Fixes
 
-* redundant-nameのarrowedNameなどで利用するファイルパスが削られすぎていたため、指定が行いにくい問題を修正する ([4d45281](https://github.com/kufu/eslint-plugin-smarthr/commit/4d45281c383a9996437f3603dd954548f428cd19))
+* redundant-nameのarrowedNameなどで利用するファイルパスが削られすぎていたため、指定が行いにくい問題を修正する ([#43](https://github.com/kufu/eslint-plugin-smarthr/issues/43)) ([6de9618](https://github.com/kufu/eslint-plugin-smarthr/commit/6de961831a9f9e0e93eeeebb80e56ecb60d9a2ff))
 
 ### [0.2.12](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.11...v0.2.12) (2022-12-07)
 

package/README.md

@@ -12,8 +12,10 @@
 - [prohibit-export-array-type](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-export-array-type)
 - [prohibit-file-name](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-file-name)
 - [prohibit-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-import)
+- [prohibit-path-within-template-literal](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-path-within-template-literal)
 - [redundant-name](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/redundant-name)
 - [require-barrel-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-barrel-import)
 - [require-declaration](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-declaration)
 - [require-export](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-export)
 - [require-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-import)
+- [trim-props](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/trim-props)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/no-import-other-domain/README.md

@@ -56,6 +56,13 @@ const DOMAIN_RULE_ARGS = {
       'error', // 'warn', 'off'
       {
         ...DOMAIN_RULE_ARGS,
+        // ignores: ['\\/test\\/'], // 除外したいファイルの正規表現
+        // allowedImports: {
+        //   '/any/path/': { // 正規表現でチェックするファイルを指定
+        //     // import制御するファイル (相対パスを指定する場合、.eslintrc.js を基準とする)
+        //     '@/hoge/fuga': true // ['abc', 'def'] と指定すると個別に指定
+        //   }
+        // },
         // analyticsMode: 'all', // 'same-domain', 'another-domain'
       }
     ]

package/rules/no-import-other-domain/index.js

@@ -8,6 +8,25 @@ const SCHEMA = [
     type: 'object',
     properties: {
       ...BASE_SCHEMA_PROPERTIES,
+      allowedImports: {
+        type: 'object',
+        patternProperties: {
+          '.+': {
+            type: 'object',
+            patternProperties: {
+              '.+': {
+                type: ['boolean', 'array' ],
+                items: {
+                  type: 'string',
+                },
+                additionalProperties: false
+              }
+            }
+          },
+        },
+        additionalProperties: true,
+      },
+      ignores: { type: 'array', items: { type: 'string' }, default: [] },
       analyticsMode: { type: 'string', default: 'none' }, // 'none' | 'all' | 'same-domain' | 'another-domain'
     },
     additionalProperties: false,
@@ -27,7 +46,7 @@ module.exports = {
     const calcContext = calculateDomainContext(context)
 
     // 対象外ファイル
-    if (!calcContext.isTarget) {
+    if (!calcContext.isTarget || calcContext.option.ignores && calcContext.option.ignores.some((i) => !!calcContext.filename.match(new RegExp(i)))) {
       return {}
     }
 
@@ -36,8 +55,49 @@ module.exports = {
       humanizeParentDir,
     } = calcContext
 
+    const targetPathRegexs = Object.keys(option?.allowedImports || {})
+    const targetAllowedImports = targetPathRegexs.filter((regex) => !!calcContext.filename.match(new RegExp(regex)))
+
     return {
       ImportDeclaration: (node) => {
+        let isDenyPath = false
+        let deniedModules = []
+
+        targetAllowedImports.forEach((allowedKey) => {
+          const allowedOption = option.allowedImports[allowedKey]
+          const targetModules = Object.keys(allowedOption)
+
+          targetModules.forEach((targetModule) => {
+            const allowedModules = allowedOption[targetModule] || true
+            const actualTarget = targetModule[0] !== '.' ? targetModule : path.resolve(`${process.cwd()}/${targetModule}`)
+            let sourceValue = node.source.value
+
+            if (actualTarget[0] === '/') {
+              sourceValue = path.resolve(`${calcContext.parentDir}/${sourceValue}`)
+            }
+
+            if (actualTarget !== sourceValue) {
+              return
+            }
+
+
+            if (!Array.isArray(allowedModules)) {
+              isDenyPath = true
+              deniedModules.push(true)
+            } else {
+              deniedModules.push(node.specifiers.map((s) => s.imported?.name).filter(i => allowedModules.indexOf(i) == -1))
+            }
+          })
+        })
+
+        if (isDenyPath && deniedModules[0] === true) {
+          return
+        }
+
+        if (!isDenyPath && deniedModules.length === 1 && deniedModules[0].length === 0) {
+          return
+        }
+
         const { importPath, dirs, paths, humanizeImportPath, isGlobalModuleImport, isModuleImport, isDomainImport } = calculateDomainNode(calcContext, node)
         const hit = !isGlobalModuleImport && !isModuleImport && !isDomainImport
 
@@ -58,14 +118,16 @@ module.exports = {
         }
 
         if (hit) {
+          deniedModules = [...new Set(deniedModules.flat())]
+
           context.report({
             node,
             messageId: 'no-import-other-domain',
             data: {
-              message: `別ドメインから ${importPath} がimportされています。`,
+              message: `別ドメインから ${importPath}${deniedModules.length ? ` の ${deniedModules.join(', ')}` : ''} がimportされています。`,
             },
           })
-        } 
+        }
       },
     }
   },

package/rules/prohibit-path-within-template-literal/README.md

@@ -0,0 +1,42 @@
+# smarthr/prohibit-path-within-template-literal
+
+- URIを管理するオブジェクト(path, localPath, GlobalPath, PATH, etc...)をtemplate-literalで囲むことを禁止するルールです
+- query-stringの生成やパスの一部などをtemplate-literalで結合することは責務を拡散させることになります
+- それらの責務を指定したオブジェクトに集中させたい場合などに利用出来ます
+  - 例
+    - NG: `\`${path.xxx}?${queryString}\``
+      - pathオブジェクト外でqueryStringが生成されてしまっており、どのようなqueryStringが設定される可能性があるか？という情報が拡散してしまう
+    - OK: `path.xxx({ xxxx: 'yyyyy' })`
+      - path内でqueryStringを生成するため、URL生成の情報が集約される
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/prohibit-path-within-template-literal': [
+      'error', // 'warn', 'off'
+      // {
+      //   pathRegex: '((p|P)ath|PATH)$', // URIを管理するオブジェクトの名称を判定する正規表現
+      // },
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+\`${path.any.hoge}\?${queryString}`
+```
+```jsx
+\`${path.any.hoge(ANY)}\${HOGE}`
+```
+```jsx
+\`${path.any.fuga}\`
+```
+
+## ✅ Correct
+```jsx
+path.any.hoge(queryString)
+```

package/rules/prohibit-path-within-template-literal/index.js

@@ -0,0 +1,60 @@
+const recursiveFetchName = (obj, chained = '') => {
+  const o = obj.callee || obj
+  const name = o.name || o.property.name || ''
+  const nextChained = chained ? `${name}.${chained}` : name
+
+  if (o.property && o.object) {
+    return recursiveFetchName(o.object, nextChained)
+  }
+
+  return [name, nextChained]
+}
+
+const recursiveFetchRootNameIsPath = (obj, regex) => {
+  const [name, chained] = recursiveFetchName(obj, '')
+
+  return name.match(regex) ? chained : null
+}
+
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      pathRegex: { type: 'string', default: '((p|P)ath|PATH)$' },
+    },
+    additionalProperties: false,
+  },
+]
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'prohibit-path-within-template-literal': '{{ message }}',
+    },
+    schema: SCHEMA,
+  },
+  create(context) {
+    const option = context.options[0]
+    const nameRegex = new RegExp(option?.pathRegex || SCHEMA[0].properties.pathRegex.default)
+
+    return {
+      TemplateLiteral: (node) => {
+        node.expressions.forEach((exp) => {
+          const name = recursiveFetchRootNameIsPath(exp, nameRegex)
+
+          if (name) {
+            context.report({
+              node: exp,
+              messageId: 'prohibit-path-within-template-literal',
+              data: {
+                message: `${name}は \`\` で囲まないでください。queryStringを結合するなどのURL生成は ${name} 内で行います。 (例: ${name}({ query: { hoge: 'abc' } })`,
+              },
+            });
+          }
+        })
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/require-barrel-import/README.md

@@ -10,7 +10,16 @@
 ```js
 {
   rules: {
-    'smarthr/require-barrel-import': 'error',
+    'smarthr/require-barrel-import': [
+      'error',
+      // ignores: ['\\/test\\/'], // 除外したいファイルの正規表現
+      // allowedImports: {
+      //   '/any/path/': { // 正規表現でチェックするファイルを指定
+      //     // import制御するファイル (相対パスを指定する場合、.eslintrc.js を基準とする)
+      //     '@/hoge/fuga': true // ['abc', 'def'] と指定すると個別に指定
+      //   }
+      // },
+    ],
   },
 }
 ```

package/rules/require-barrel-import/index.js

@@ -44,6 +44,33 @@ const calculateReplacedImportPath = (source) => {
   }, source)
 }
 const TARGET_EXTS = ['ts', 'tsx', 'js', 'jsx']
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      allowedImports: {
+        type: 'object',
+        patternProperties: {
+          '.+': {
+            type: 'object',
+            patternProperties: {
+              '.+': {
+                type: ['boolean', 'array' ],
+                items: {
+                  type: 'string',
+                },
+                additionalProperties: false
+              }
+            }
+          },
+        },
+        additionalProperties: true,
+      },
+      ignores: { type: 'array', items: { type: 'string' }, default: [] },
+    },
+    additionalProperties: false,
+  }
+]
 
 module.exports = {
   meta: {
@@ -51,20 +78,65 @@ module.exports = {
     messages: {
       'require-barrel-import': '{{ message }}',
     },
-    schema: [],
+    schema: SCHEMA,
   },
   create(context) {
+    const option = context.options[0] || {}
     const filename = context.getFilename()
 
+    if ((option.ignores || []).some((i) => !!filename.match(new RegExp(i)))) {
+      return {}
+    }
+
     const dir = (() => {
       const d = filename.split('/')
       d.pop()
 
       return d.join('/')
     })()
+    const targetPathRegexs = Object.keys(option?.allowedImports || {})
+    const targetAllowedImports = targetPathRegexs.filter((regex) => !!filename.match(new RegExp(regex)))
 
     return {
       ImportDeclaration: (node) => {
+        let isDenyPath = false
+        let deniedModules = []
+
+        targetAllowedImports.forEach((allowedKey) => {
+          const allowedOption = option.allowedImports[allowedKey]
+          const targetModules = Object.keys(allowedOption)
+
+          targetModules.forEach((targetModule) => {
+            const allowedModules = allowedOption[targetModule] || true
+            const actualTarget = targetModule[0] !== '.' ? targetModule : path.resolve(`${process.cwd()}/${targetModule}`)
+            let sourceValue = node.source.value
+
+            if (actualTarget[0] === '/') {
+              sourceValue = path.resolve(`${dir}/${sourceValue}`)
+            }
+
+            if (actualTarget !== sourceValue) {
+              return
+            }
+
+
+            if (!Array.isArray(allowedModules)) {
+              isDenyPath = true
+              deniedModules.push(true)
+            } else {
+              deniedModules.push(node.specifiers.map((s) => s.imported?.name).filter(i => allowedModules.indexOf(i) == -1))
+            }
+          })
+        })
+
+        if (isDenyPath && deniedModules[0] === true) {
+          return
+        }
+
+        if (!isDenyPath && deniedModules.length === 1 && deniedModules[0].length === 0) {
+          return
+        }
+
         let sourceValue = node.source.value
 
         if (sourceValue[0] === '.') {
@@ -106,12 +178,14 @@ module.exports = {
 
         if (barrel && !barrel.match(new RegExp(`^${rootPath}/index\.`))) {
           barrel = calculateReplacedImportPath(barrel)
+          const noExt = barrel.replace(/\/index\.(ts|js)x?$/, '')
+          deniedModules = [...new Set(deniedModules.flat())]
 
           context.report({
             node,
             messageId: 'require-barrel-import',
             data: {
-              message: `${barrel.replace(/\/index\.(ts|js)x?$/, '')} からimportするか、${barrel} を削除してください`,
+              message: deniedModules.length ? `${deniedModules.join(', ')} は ${noExt} からimportしてください` :  `${noExt} からimportするか、${barrel} のbarrelファイルを削除して直接import可能にしてください`,
             },
           });
         }
@@ -119,4 +193,4 @@ module.exports = {
     }
   },
 }
-module.exports.schema = []
+module.exports.schema = SCHEMA

package/rules/trim-props/README.md

@@ -0,0 +1,30 @@
+# smarthr/trim-props
+
+- このルールはCLIオプションの`--fix`で自動的に修正可能です
+- 文字列型のpropsについて、先頭末尾に空白文字を含む文字列の設定を禁止させたい場合に利用します
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/trim-props': 'error', // 'warn', 'off',
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<a href=" https://www.google.com">google</a>
+<img src={"/sample.jpg "} alt={" sample "} />
+<div data-spec=" info-area ">....</div>
+```
+
+## ✅ Correct
+
+```jsx
+<a href="https://www.google.com">google</a>
+<img src={"/sample.jpg"} alt={"sample"} />
+<div data-spec="info-area">....</div>
+```

package/rules/trim-props/index.js

@@ -0,0 +1,37 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'trim-props': '{{ message }}',
+    },
+    schema: [],
+    fixable: 'whitespace',
+  },
+  create(context) {
+    return {
+      JSXOpeningElement: (node) =>
+        node.attributes.reduce((prev, current) => {
+          const attribute = current.value?.type === 'JSXExpressionContainer' ? current.value.expression : current.value
+          const props = attribute?.value
+
+          if (typeof props !== 'string') return prev
+
+          if (props.match(/(^\s+|\s+$)/)) {
+            return context.report({
+              node,
+              loc: current.loc,
+              messageId: 'trim-props',
+              data: {
+                message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
+              },
+              fix(fixer) {
+                return fixer.replaceTextRange([attribute.range[0] + 1, attribute.range[1] - 1], props.trim())
+              },
+            })
+          }
+          return prev
+        }, []),
+    }
+  },
+}
+module.exports.schema = []

package/test/prohibit-path-within-template-literal.js

@@ -0,0 +1,30 @@
+const rule = require('../rules/prohibit-path-within-template-literal')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2015
+  },
+})
+
+ruleTester.run('prohibit-path-within-template-literal', rule, {
+  valid: [
+    { code: 'path.hoge', },
+    { code: 'path.fuga()', },
+    { code: 'localPath.any.aaa("hoge")', },
+    { code: 'PATH.some({ x })', },
+    { code: 'hoge.some({ x })', options: [{ pathRegex: '^hoge$' }] },
+  ],
+  invalid: [
+    {
+      code: '`${path.hoge}`',
+      errors: [{ message: 'path.hogeは `` で囲まないでください。queryStringを結合するなどのURL生成は path.hoge 内で行います。 (例: path.hoge({ query: { hoge: \'abc\' } })' }]
+    },
+    {
+      code: '`${ABC.hoge()}${hogehoge}`',
+      options: [{ pathRegex: '^ABC$' }],
+      errors: [{ message: 'ABC.hogeは `` で囲まないでください。queryStringを結合するなどのURL生成は ABC.hoge 内で行います。 (例: ABC.hoge({ query: { hoge: \'abc\' } })' }]
+    },
+  ]
+})

package/test/trim-props.js

@@ -0,0 +1,78 @@
+const rule = require('../rules/trim-props')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('trim-props', rule, {
+  valid: [
+    { code: '<a href="https://www.google.com">google</a>' },
+    { code: '<a href={"https://www.google.com"}>google</a>' },
+    { code: '<img src="/sample.jpg" alt="sample" />' },
+    { code: '<img src={"/sample.jpg"} alt={"sample"} />' },
+    { code: '<div data-spec="info-area">....</div>' },
+  ],
+  invalid: [
+    {
+      code: '<a href=" https://www.google.com">google</a>',
+      output: '<a href="https://www.google.com">google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href="https://www.google.com ">google</a>',
+      output: '<a href="https://www.google.com">google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href=" https://www.google.com ">google</a>',
+      output: '<a href="https://www.google.com">google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href={" https://www.google.com"}>google</a>',
+      output: '<a href={"https://www.google.com"}>google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href={"https://www.google.com "}>google</a>',
+      output: '<a href={"https://www.google.com"}>google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href={" https://www.google.com "}>google</a>',
+      output: '<a href={"https://www.google.com"}>google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<img src=" /sample.jpg" alt="sample " />',
+      output: '<img src="/sample.jpg" alt="sample" />',
+      errors: [
+        { message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' },
+        { message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' },
+      ],
+    },
+    {
+      code: '<img src={" /sample.jpg"} alt={"sample "} />',
+      output: '<img src={"/sample.jpg"} alt={"sample"} />',
+      errors: [
+        { message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' },
+        { message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' },
+      ],
+    },
+    {
+      code: '<div data-spec=" info-area ">....</div>',
+      output: '<div data-spec="info-area">....</div>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<div data-spec={" info-area "}>....</div>',
+      output: '<div data-spec={"info-area"}>....</div>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+  ],
+})