Force React Component Naming With Typescript
Solution 1:
I can offer you only solution for typescript.
I believe this cannot be achieved with TSLint/ESLint alone.
There is a so-called rule class-name that can solve your issue partially but seems you need to write custom rule for such case.
So let's try writing such custom tslint rule. For that we need to use rulesDirectory option in tslint config to specify path to custom rules
"rulesDirectory":["./tools/tslint-rules/"],Since I'm going to write custom rule in typescript I will be using one feature that was added in tslint@5.7.0
[enhancement] custom lint rules will be resolved using node's path resolution to allow for loaders like ts-node (#3108)
We need to install ts-node package
npm i -D ts-node
Then add fake rule in tslint.json
"ts-loader":true,and create file tsLoaderRule.js in our rulesDirectory:
const path = require('path');
constLint = require('tslint');
// Custom rule that registers all of the custom rules, written in TypeScript, with ts-node.// This is necessary, because `tslint` and IDEs won't execute any rules that aren't in a .js file.require('ts-node').register({
project: path.join(__dirname, '../tsconfig.json')
});
// Add a noop rule so tslint doesn't complain.exports.Rule = classRuleextendsLint.Rules.AbstractRule {
apply() {}
};
This is basically approach which is widely used in angular packages like angular material, universal etc
Now we can create our custom rule(expanded version of class-name rule) that will be written in typescript.
myReactComponentRule.ts
import * as ts from'typescript';
import * asLintfrom'tslint';
exportclassRuleextendsLint.Rules.AbstractRule {
/* tslint:disable:object-literal-sort-keys */staticmetadata: Lint.IRuleMetadata = {
ruleName: 'my-react-component',
description: 'Enforces PascalCased React component class.',
rationale: 'Makes it easy to differentiate classes from regular variables at a glance.',
optionsDescription: 'Not configurable.',
options: null,
optionExamples: [true],
type: 'style',
typescriptOnly: false,
};
/* tslint:enable:object-literal-sort-keys */staticFAILURE_STRING = (className: string) =>`React component ${className} must be PascalCased and prefixed by Component`;
staticvalidate(name: string): boolean {
returnisUpperCase(name[0]) && !name.includes('_') && name.endsWith('Component');
}
apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
returnthis.applyWithFunction(sourceFile, walk);
}
}
functionwalk(ctx: Lint.WalkContext<void>) {
return ts.forEachChild(ctx.sourceFile, functioncb(node: ts.Node): void {
if (isClassLikeDeclaration(node) && node.name !== undefined && isReactComponent(node)) {
if (!Rule.validate(node.name!.text)) {
ctx.addFailureAtNode(node.name!, Rule.FAILURE_STRING(node.name!.text));
}
}
return ts.forEachChild(node, cb);
});
}
functionisClassLikeDeclaration(node: ts.Node): node is ts.ClassLikeDeclaration {
return node.kind === ts.SyntaxKind.ClassDeclaration ||
node.kind === ts.SyntaxKind.ClassExpression;
}
functionisReactComponent(node: ts.Node): boolean {
let result = false;
const classDeclaration = <ts.ClassDeclaration> node;
if (classDeclaration.heritageClauses) {
classDeclaration.heritageClauses.forEach((hc) => {
if (hc.token === ts.SyntaxKind.ExtendsKeyword && hc.types) {
hc.types.forEach(type => {
if (type.getText() === 'React.Component') {
result = true;
}
});
}
});
}
return result;
}
functionisUpperCase(str: string): boolean {
return str === str.toUpperCase();
}
and finally we should put our new rule to tsling.json:
// Custom rules"ts-loader":true,"my-react-component":trueSo such code as
App extendsReact.Component
will result in:
I also created ejected react-ts application where you can try it.
Update
I guess tracking class names in grandparents won't be a trivial task
Indeed we can handle inheritance. To do that we will need create rule extended from class Lint.Rules.TypedRule to have access to TypeChecker:
myReactComponentRule.ts
import * as ts from'typescript';
import * asLintfrom'tslint';
exportclassRuleextendsLint.Rules.TypedRule {
/* tslint:disable:object-literal-sort-keys */staticmetadata: Lint.IRuleMetadata = {
ruleName: 'my-react-component',
description: 'Enforces PascalCased React component class.',
rationale: 'Makes it easy to differentiate classes from regular variables at a glance.',
optionsDescription: 'Not configurable.',
options: null,
optionExamples: [true],
type: 'style',
typescriptOnly: false,
};
/* tslint:enable:object-literal-sort-keys */staticFAILURE_STRING = (className: string) =>`React component ${className} must be PascalCased and prefixed by Component`;
staticvalidate(name: string): boolean {
returnisUpperCase(name[0]) && !name.includes('_') && name.endsWith('Component');
}
applyWithProgram(sourceFile: ts.SourceFile, program: ts.Program): Lint.RuleFailure[] {
returnthis.applyWithFunction(sourceFile, walk, undefined, program.getTypeChecker());
}
}
functionwalk(ctx: Lint.WalkContext<void>, tc: ts.TypeChecker) {
return ts.forEachChild(ctx.sourceFile, functioncb(node: ts.Node): void {
if (
isClassLikeDeclaration(node) && node.name !== undefined &&
containsType(tc.getTypeAtLocation(node), isReactComponentType) &&
!Rule.validate(node.name!.text)) {
ctx.addFailureAtNode(node.name!, Rule.FAILURE_STRING(node.name!.text));
}
return ts.forEachChild(node, cb);
});
}
/* tslint:disable:no-any */functioncontainsType(type: ts.Type, predicate: (symbol: any) => boolean): boolean {
if (type.symbol !== undefined && predicate(type.symbol)) {
returntrue;
}
const bases = type.getBaseTypes();
return bases && bases.some((t) =>containsType(t, predicate));
}
functionisReactComponentType(symbol: any) {
return symbol.name === 'Component' && symbol.parent && symbol.parent.name === 'React';
}
/* tslint:enable:no-any */functionisClassLikeDeclaration(node: ts.Node): node is ts.ClassLikeDeclaration {
return node.kind === ts.SyntaxKind.ClassDeclaration ||
node.kind === ts.SyntaxKind.ClassExpression;
}
functionisUpperCase(str: string): boolean {
return str === str.toUpperCase();
}
See also commit:
Solution 2:
This is lot easier to do in eslint. The custom plugin is a lot less complex. So I created a plugin showcasing the same. To test the plugin I created the below file
import React from "react"classABCComponentextendsReact.Component {
}
classABC2componentextendsReact.Component {
}
classTestComponent {
}
classFooBarComponentextendsReact.Component {
}
classfooBazComponentextendsReact.Component {
}
classFooBazingextendsReact.Component {
}
And then ran the plugin on the same
I followed the below guides while writing the plugin
https://flexport.engineering/writing-custom-lint-rules-for-your-picky-developers-67732afa1803
https://www.kenneth-truyers.net/2016/05/27/writing-custom-eslint-rules/
https://eslint.org/docs/developer-guide/working-with-rules
The final code I come up with was below for the rules
/**
* @fileoverview Check that proper naming convention is followed for React components
* @author Tarun Lalwani
*/"use strict";
//------------------------------------------------------------------------------// Rule Definition//------------------------------------------------------------------------------var toPascalCase = require('to-pascal-case');
module.exports = {
meta: {
docs: {
description: "Check that proper naming convention is followed for React components",
category: "Fill me in",
recommended: false
},
fixable: "code", // or "code" or "whitespace"schema: [
// fill in your schema
]
},
create: function(context) {
// variables should be defined here//----------------------------------------------------------------------// Helpers//----------------------------------------------------------------------// any helper functions should go here or else delete this section//----------------------------------------------------------------------// Public//----------------------------------------------------------------------return {
ClassDeclaration: function(node) {
var isReactComponent = false;
if (node.superClass && node.superClass && node.superClass)
{
if (node.superClass.object && node.superClass.object.name == 'React' && node.superClass.property.name === 'Component')
{
isReactComponent = true;
}
elseif (node.superClass && node.superClass.name === 'Component') {
// if you want to suppot extends Component instead of just React.Component
isReactComponent = true;
}
}
if (isReactComponent) {
var className = node.id.name;
if (className[0] !== className[0].toUpperCase() || !className.endsWith("Component"))
context.report({
node: node,
message: "Please use Proper case for the React Component class - {{identifier}}",
data: {
identifier: className
}, fix: (fixer) => {
var newClassName = className.toLowerCase().replace('component', '') + 'Component';
newClassName = toPascalCase(newClassName);
return fixer.replaceTextRange(node.id.range, newClassName)
}
});
}
}
};
}
};
The key is to understand the AST Tree, which I did using astexplorer. Rest code is quite self explanatory.
I have hosted the plugin on below repo in case you want to give it a short directly
https://github.com/tarunlalwani/eslint-plugin-react-class-naming
Install the plugin using below command
npm i tarunlalwani/eslint-plugin-react-class-naming#masterThen add it to your .eslintrc
{"plugins":["react-class-naming"]}Then add the rules in .eslintrc
"rules": {
"react-class-naming/react-classnaming-convention": ["error"],
....
}
Post a Comment for "Force React Component Naming With Typescript"