Skip to content

Commit 1258f32

Browse files
yannickcryannickcr
committed
Merge pull request #176 from CalebMorris/newRule/no-raw-text
Add jsx-no-literals rule
2 parents 491f67f + 324c620 commit 1258f32

File tree

5 files changed

+268
-2
lines changed

5 files changed

+268
-2
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ Finally, enable all of the rules that you would like to use.
7575
* [jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes
7676
* [jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md): Limit maximum of props on a single line in JSX
7777
* [jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md): Prevent duplicate props in JSX
78+
* [jsx-no-literals](docs/rules/jsx-no-literals.md): Prevent usage of unwrapped JSX strings
7879
* [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
7980
* [jsx-quotes](docs/rules/jsx-quotes.md): Enforce quote style for JSX attributes
8081
* [jsx-sort-prop-types](docs/rules/jsx-sort-prop-types.md): Enforce propTypes declarations alphabetical sorting

‎docs/rules/jsx-no-literals.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Prevent usage of unwrapped JSX strings (jsx-no-literals)
2+
3+
In JSX when using a literal string you can wrap it in a JXS container `{'TEXT'}`.
4+
This rules requies that you wrap all literal strings.
5+
Prevents any odd artifacts of highlighters if you unwrapped string contains a enclsoing character like `'` in contractions and enforces consistency.
6+
7+
## Rule Details
8+
9+
The following patterns are considered warnings:
10+
11+
```javascript
12+
var Hello = <div>test</div>;
13+
```
14+
15+
The following patterns are not considered:
16+
17+
```javascript
18+
var Hello = <div>{'test'}</div>;
19+
```
20+
21+
## When Not To Use It
22+
23+
If you do not want to enforce any style JSX literals, then you can disable this rule.

‎index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ module.exports = {
2323
'sort-comp': require('./lib/rules/sort-comp'),
2424
'require-extension': require('./lib/rules/require-extension'),
2525
'jsx-no-duplicate-props': require('./lib/rules/jsx-no-duplicate-props'),
26-
'jsx-max-props-per-line': require('./lib/rules/jsx-max-props-per-line')
26+
'jsx-max-props-per-line': require('./lib/rules/jsx-max-props-per-line'),
27+
'jsx-no-literals': require('./lib/rules/jsx-no-literals')
2728
},
2829
rulesConfig: {
2930
'jsx-uses-react': 0,
@@ -47,6 +48,7 @@ module.exports = {
4748
'sort-comp': 0,
4849
'require-extension': 0,
4950
'jsx-no-duplicate-props': 0,
50-
'jsx-max-props-per-line': 0
51+
'jsx-max-props-per-line': 0,
52+
'jsx-no-literals': 0
5153
}
5254
};

‎lib/rules/jsx-no-literals.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
* @fileoverview Prevent using string literals in React component definition
3+
* @author Caleb Morris
4+
*/
5+
'use strict';
6+
7+
// ------------------------------------------------------------------------------
8+
// Rule Definition
9+
// ------------------------------------------------------------------------------
10+
11+
module.exports = function(context) {
12+
13+
function reportLiteralNode(node) {
14+
context.report(node, 'Missing JSX expression container around literal string');
15+
}
16+
17+
// --------------------------------------------------------------------------
18+
// Public
19+
// --------------------------------------------------------------------------
20+
21+
return {
22+
23+
Literal: function(node) {
24+
if (
25+
!/^[\s]+$/.test(node.value) &&
26+
node.parent &&
27+
node.parent.type !== 'JSXExpressionContainer'
28+
) {
29+
reportLiteralNode(node);
30+
}
31+
}
32+
33+
};
34+
35+
};
36+
37+
module.exports.schema = [{
38+
type: 'object',
39+
properties: {},
40+
additionalProperties: false
41+
}];

‎tests/lib/rules/jsx-no-literals.js

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
/**
2+
* @fileoverview Prevent using unwrapped literals in a React component definition
3+
* @author Caleb morris
4+
*/
5+
'use strict';
6+
7+
// ------------------------------------------------------------------------------
8+
// Requirements
9+
// ------------------------------------------------------------------------------
10+
11+
var eslint = require('eslint').linter;
12+
var ESLintTester = require('eslint').ESLintTester;
13+
14+
// ------------------------------------------------------------------------------
15+
// Tests
16+
// ------------------------------------------------------------------------------
17+
18+
var eslintTester = new ESLintTester(eslint);
19+
eslintTester.addRuleTest('lib/rules/jsx-no-literals', {
20+
21+
valid: [
22+
{
23+
code: [
24+
'class Comp1 extends Component {',
25+
' render() {',
26+
' return (',
27+
' <div>',
28+
' {\'asdjfl\'}',
29+
' </div>',
30+
' );',
31+
' }',
32+
'}'
33+
].join('\n'),
34+
args: [1],
35+
parser: 'babel-eslint'
36+
}, {
37+
code: [
38+
'class Comp1 extends Component {',
39+
' render() {',
40+
' return (<div>{\'test\'}</div>);',
41+
' }',
42+
'}'
43+
].join('\n'),
44+
args: [1],
45+
parser: 'babel-eslint'
46+
}, {
47+
code: [
48+
'class Comp1 extends Component {',
49+
' render() {',
50+
' const bar = (<div>{\'hello\'}</div>);',
51+
' return bar;',
52+
' }',
53+
'}'
54+
].join('\n'),
55+
args: [1],
56+
parser: 'babel-eslint'
57+
}, {
58+
code: [
59+
'var Hello = React.createClass({',
60+
' foo: (<div>{\'hello\'}</div>),',
61+
' render() {',
62+
' return this.foo;',
63+
' },',
64+
'});'
65+
].join('\n'),
66+
args: [1],
67+
parser: 'babel-eslint'
68+
}, {
69+
code: [
70+
'class Comp1 extends Component {',
71+
' render() {',
72+
' return (',
73+
' <div>',
74+
' {\'asdjfl\'}',
75+
' {\'test\'}',
76+
' {\'foo\'}',
77+
' </div>',
78+
' );',
79+
' }',
80+
'}'
81+
].join('\n'),
82+
args: [1],
83+
parser: 'babel-eslint'
84+
}, {
85+
code: [
86+
'class Comp1 extends Component {',
87+
' render() {',
88+
' return (',
89+
' <div>',
90+
' </div>',
91+
' );',
92+
' }',
93+
'}'
94+
].join('\n'),
95+
args: [1],
96+
parser: 'babel-eslint'
97+
}
98+
],
99+
100+
invalid: [
101+
{
102+
code: [
103+
'class Comp1 extends Component {',
104+
' render() {',
105+
' return (<div>test</div>);',
106+
' }',
107+
'}'
108+
].join('\n'),
109+
args: [1],
110+
parser: 'babel-eslint',
111+
errors: [{message: 'Missing JSX expression container around literal string'}]
112+
}, {
113+
code: [
114+
'class Comp1 extends Component {',
115+
' render() {',
116+
' const foo = (<div>test</div>);',
117+
' return foo;',
118+
' }',
119+
'}'
120+
].join('\n'),
121+
args: [1],
122+
parser: 'babel-eslint',
123+
errors: [{message: 'Missing JSX expression container around literal string'}]
124+
}, {
125+
code: [
126+
'class Comp1 extends Component {',
127+
' render() {',
128+
' const varObjectTest = { testKey : (<div>test</div>) };',
129+
' return varObjectTest.testKey;',
130+
' }',
131+
'}'
132+
].join('\n'),
133+
args: [1],
134+
parser: 'babel-eslint',
135+
errors: [{message: 'Missing JSX expression container around literal string'}]
136+
}, {
137+
code: [
138+
'var Hello = React.createClass({',
139+
' foo: (<div>hello</div>),',
140+
' render() {',
141+
' return this.foo;',
142+
' },',
143+
'});'
144+
].join('\n'),
145+
args: [1],
146+
parser: 'babel-eslint',
147+
errors: [{message: 'Missing JSX expression container around literal string'}]
148+
}, {
149+
code: [
150+
'class Comp1 extends Component {',
151+
' render() {',
152+
' return (',
153+
' <div>',
154+
' asdjfl',
155+
' </div>',
156+
' );',
157+
' }',
158+
'}'
159+
].join('\n'),
160+
args: [1],
161+
parser: 'babel-eslint',
162+
errors: [{message: 'Missing JSX expression container around literal string'}]
163+
}, {
164+
code: [
165+
'class Comp1 extends Component {',
166+
' render() {',
167+
' return (',
168+
' <div>',
169+
' asdjfl',
170+
' test',
171+
' foo',
172+
' </div>',
173+
' );',
174+
' }',
175+
'}'
176+
].join('\n'),
177+
args: [1],
178+
parser: 'babel-eslint',
179+
errors: [{message: 'Missing JSX expression container around literal string'}]
180+
}, {
181+
code: [
182+
'class Comp1 extends Component {',
183+
' render() {',
184+
' return (',
185+
' <div>',
186+
' {\'asdjfl\'}',
187+
' test',
188+
' {\'foo\'}',
189+
' </div>',
190+
' );',
191+
' }',
192+
'}'
193+
].join('\n'),
194+
args: [1],
195+
parser: 'babel-eslint',
196+
errors: [{message: 'Missing JSX expression container around literal string'}]
197+
}
198+
]
199+
});

0 commit comments

Comments
 (0)