diff --git a/README.md b/README.md index b742de7..ba82e4c 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,10 @@ This is an ESLint Plugin to help provide best practices for writing Custom Elements aka Web Components. It provides a set of custom rules which can be enforced for files that declare classes that extend from HTMLElement. +## Requirements + +Node 14.x + ## Installation ```sh @@ -10,13 +14,12 @@ $ npm install --save-dev eslint eslint-plugin-custom-elements ## Setup -Add `custom-elements` to your list of plugins in your ESLint config, and `plugin:custom-elements/recommended` to the `extends` array. +Add `custom-elements` to your list of plugins in your ESLint config, and enable the rules you want or just add `plugin:custom-elements/recommended` to the `extends` array. JSON ESLint config example: ```json { - "plugins": ["custom-elements"], "extends": ["plugin:custom-elements/recommended"] } ``` diff --git a/lib/configs/minimal.js b/lib/configs/minimal.js index 758d1a6..05be309 100644 --- a/lib/configs/minimal.js +++ b/lib/configs/minimal.js @@ -6,6 +6,7 @@ module.exports = { env: { es2021: true }, + plugins: ['custom-elements'], rules: Object.fromEntries( Object.keys(rules) .filter(r => rules[r].meta.type === 'problem') diff --git a/lib/configs/recommended.js b/lib/configs/recommended.js index 316b146..29bfa90 100644 --- a/lib/configs/recommended.js +++ b/lib/configs/recommended.js @@ -6,5 +6,6 @@ module.exports = { env: { es2021: true }, + plugins: ['custom-elements'], rules: Object.fromEntries(Object.keys(rules).map(r => [`custom-elements/${r}`, 'error'])) } diff --git a/lib/rules/valid-tag-name.js b/lib/rules/valid-tag-name.js index 77370db..b19a48f 100644 --- a/lib/rules/valid-tag-name.js +++ b/lib/rules/valid-tag-name.js @@ -25,6 +25,10 @@ module.exports = { [s.customElements.define](node) { const nameArg = node.arguments[0] let name = nameArg.value + if (!['Literal', 'TemplateLiteral'].includes(nameArg.type)) { + context.report(nameArg, 'Expected custom element name to be a string literal') + return + } if (nameArg.type === 'TemplateLiteral') { // Give up on TemplateLiteral expressions if (nameArg.expressions.length) return diff --git a/package-lock.json b/package-lock.json index b966006..e347e62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { "name": "eslint-plugin-custom-elements", - "version": "0.0.2", + "version": "0.0.3", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "0.0.2", + "version": "0.0.3", "license": "MIT", "dependencies": { "eslint-rule-documentation": ">=1.0.0" diff --git a/package.json b/package.json index e8b39aa..a29d1af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "eslint-plugin-custom-elements", - "version": "0.0.2", + "version": "0.0.3", "description": "A collection of eslint rules for custom-elements", "homepage": "https://github.com/github/eslint-plugin-custom-elements#readme", "bugs": { diff --git a/test/valid-tag-name.js b/test/valid-tag-name.js index c4fdb9b..fc7f751 100644 --- a/test/valid-tag-name.js +++ b/test/valid-tag-name.js @@ -18,6 +18,15 @@ ruleTester.run('valid-tag-name', rule, { {code: 'customElements.define("ng-bar")', options: [{disallowNamespaces: true, prefix: 'ng'}]} ], invalid: [ + { + code: 'const tagName = "foo-bar"; customElements.define(tagName)', + errors: [ + { + message: 'Expected custom element name to be a string literal', + type: 'Identifier' + } + ] + }, { code: 'customElements.define("foo")', errors: [