Skip to content

Commit 6f8e9b8

Browse files
sidoshigaearon
sidoshi
authored and
gaearon
committed
Add restricted globals package (#2286)
* Add restricted globals package * Use new package in eslint-config * Add eslint-restricted-globals dependency * Fixes * Update dependencies * Update test and README * Use jest * tweaks * Add lint/test to CI * Fix lint
1 parent 844e9dc commit 6f8e9b8

File tree

7 files changed

+169
-62
lines changed

7 files changed

+169
-62
lines changed

‎packages/confusing-browser-globals/README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# confusing-browser-globals
2+
3+
A curated list of browser globals that commonly cause confusion and are not recommended to use without an explicit `window.` qualifier.
4+
5+
## Motivation
6+
7+
Some global variables in browser are likely to be used by people without the intent of using them as globals, such as `status`, `name`, `event`, etc.
8+
9+
For example:
10+
11+
```js
12+
handleClick() { // missing `event` argument
13+
this.setState({
14+
text: event.target.value // uses the `event` global: oops!
15+
});
16+
}
17+
```
18+
19+
This package exports a list of globals that are often used by mistake. You can feed this list to a static analysis tool like ESLint to prevent their usage without an explicit `window.` qualifier.
20+
21+
22+
## Installation
23+
24+
```
25+
npm install --save confusing-browser-globals
26+
```
27+
28+
29+
## Usage
30+
31+
If you use Create React App, you don't need to configure anything, as this rule is already included in the default `eslint-config-react-app` preset.
32+
33+
If you maintain your own ESLint configuration, you can do this:
34+
35+
```js
36+
var restrictedGlobals = require('confusing-browser-globals');
37+
38+
module.exports = {
39+
rules: {
40+
'no-restricted-globals': ['error'].concat(restrictedGlobals),
41+
}
42+
};
43+
```
44+
45+
46+
## License
47+
48+
MIT

‎packages/confusing-browser-globals/index.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
module.exports = [
11+
'addEventListener',
12+
'blur',
13+
'close',
14+
'closed',
15+
'confirm',
16+
'defaultStatus',
17+
'defaultstatus',
18+
'event',
19+
'external',
20+
'find',
21+
'focus',
22+
'frameElement',
23+
'frames',
24+
'history',
25+
'innerHeight',
26+
'innerWidth',
27+
'length',
28+
'location',
29+
'locationbar',
30+
'menubar',
31+
'moveBy',
32+
'moveTo',
33+
'name',
34+
'onblur',
35+
'onerror',
36+
'onfocus',
37+
'onload',
38+
'onresize',
39+
'onunload',
40+
'open',
41+
'opener',
42+
'opera',
43+
'outerHeight',
44+
'outerWidth',
45+
'pageXOffset',
46+
'pageYOffset',
47+
'parent',
48+
'print',
49+
'removeEventListener',
50+
'resizeBy',
51+
'resizeTo',
52+
'screen',
53+
'screenLeft',
54+
'screenTop',
55+
'screenX',
56+
'screenY',
57+
'scroll',
58+
'scrollbars',
59+
'scrollBy',
60+
'scrollTo',
61+
'scrollX',
62+
'scrollY',
63+
'self',
64+
'status',
65+
'statusbar',
66+
'stop',
67+
'toolbar',
68+
'top',
69+
];

‎packages/confusing-browser-globals/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "confusing-browser-globals",
3+
"version": "1.0.0",
4+
"description": "A list of browser globals that are often used by mistake instead of local variables",
5+
"license": "MIT",
6+
"main": "index.js",
7+
"scripts": {
8+
"test": "jest"
9+
},
10+
"repository": "facebookincubator/create-react-app",
11+
"keywords": [
12+
"eslint",
13+
"globals"
14+
],
15+
"files": [
16+
"index.js"
17+
],
18+
"devDependencies": {
19+
"jest": "22.0.6"
20+
}
21+
}

‎packages/confusing-browser-globals/test.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
/* eslint-env jest */
9+
10+
'use strict';
11+
12+
let globals = require('./index');
13+
14+
it('should return an Array of globals', () => {
15+
expect(Array.isArray(globals)).toBe(true);
16+
});
17+
18+
it('should contain "event" variable', () => {
19+
expect(globals).toContain('event');
20+
});

‎packages/eslint-config-react-app/index.js

+1-60
Original file line numberDiff line numberDiff line change
@@ -21,66 +21,7 @@
2121
// This is dangerous as it hides accidentally undefined variables.
2222
// We blacklist the globals that we deem potentially confusing.
2323
// To use them, explicitly reference them, e.g. `window.name` or `window.status`.
24-
var restrictedGlobals = [
25-
'addEventListener',
26-
'blur',
27-
'close',
28-
'closed',
29-
'confirm',
30-
'defaultStatus',
31-
'defaultstatus',
32-
'event',
33-
'external',
34-
'find',
35-
'focus',
36-
'frameElement',
37-
'frames',
38-
'history',
39-
'innerHeight',
40-
'innerWidth',
41-
'length',
42-
'location',
43-
'locationbar',
44-
'menubar',
45-
'moveBy',
46-
'moveTo',
47-
'name',
48-
'onblur',
49-
'onerror',
50-
'onfocus',
51-
'onload',
52-
'onresize',
53-
'onunload',
54-
'open',
55-
'opener',
56-
'opera',
57-
'outerHeight',
58-
'outerWidth',
59-
'pageXOffset',
60-
'pageYOffset',
61-
'parent',
62-
'print',
63-
'removeEventListener',
64-
'resizeBy',
65-
'resizeTo',
66-
'screen',
67-
'screenLeft',
68-
'screenTop',
69-
'screenX',
70-
'screenY',
71-
'scroll',
72-
'scrollbars',
73-
'scrollBy',
74-
'scrollTo',
75-
'scrollX',
76-
'scrollY',
77-
'self',
78-
'status',
79-
'statusbar',
80-
'stop',
81-
'toolbar',
82-
'top',
83-
];
24+
var restrictedGlobals = require('confusing-browser-globals');
8425

8526
module.exports = {
8627
root: true,

‎packages/eslint-config-react-app/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,8 @@
1717
"eslint-plugin-import": "^2.6.0",
1818
"eslint-plugin-jsx-a11y": "^6.0.2",
1919
"eslint-plugin-react": "^7.1.0"
20+
},
21+
"dependencies": {
22+
"confusing-browser-globals": "^1.0.0"
2023
}
2124
}

‎tasks/e2e-simple.sh

+7-2
Original file line numberDiff line numberDiff line change
@@ -100,24 +100,29 @@ npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_reg
100100

101101
# Lint own code
102102
./node_modules/.bin/eslint --max-warnings 0 packages/babel-preset-react-app/
103+
./node_modules/.bin/eslint --max-warnings 0 packages/confusing-browser-globals/
103104
./node_modules/.bin/eslint --max-warnings 0 packages/create-react-app/
104105
./node_modules/.bin/eslint --max-warnings 0 packages/eslint-config-react-app/
105106
./node_modules/.bin/eslint --max-warnings 0 packages/react-dev-utils/
106107
./node_modules/.bin/eslint --max-warnings 0 packages/react-scripts/
108+
107109
cd packages/react-error-overlay/
108110
./node_modules/.bin/eslint --max-warnings 0 src/
109111
yarn test
110-
111112
if [ $APPVEYOR != 'True' ]; then
112113
# Flow started hanging on AppVeyor after we moved to Yarn Workspaces :-(
113114
yarn flow
114115
fi
115-
116116
cd ../..
117+
117118
cd packages/react-dev-utils/
118119
yarn test
119120
cd ../..
120121

122+
cd packages/confusing-browser-globals/
123+
yarn test
124+
cd ../..
125+
121126
# ******************************************************************************
122127
# First, test the create-react-app development environment.
123128
# This does not affect our users but makes sure we can develop it.

0 commit comments

Comments
 (0)