feat(react-lint): add react-in-jsx-scope lint rule
when using jsx templating into a React component, a React binding must
be in scope. add a lint rule to check if a "React" binding is defined
when using some JSXElements.
MODIFY
packages/@romejs/diagnostics/categories.ts
packages/@romejs/diagnostics/categories.ts
@@ -138,6 +138,7 @@ type LintDiagnosticCategory =
| 'lint/preferFunctionDeclarations'
| 'lint/preferTemplate'
| 'lint/preferWhile'
+ | 'lint/reactInJsxScope'
| 'lint/restrictedGlobals'
| 'lint/singleVarDeclarator'
| 'lint/sortImportExportSpecifiers'

MODIFY
packages/@romejs/diagnostics/descriptions.ts
packages/@romejs/diagnostics/descriptions.ts
@@ -393,6 +393,10 @@ export const descriptions = createMessages({
category: 'lint/preferWhile',
message: 'A while loop should be used over a for loop',
},
+ REACT_IN_JSX_SCOPE: {
+ category: 'lint/reactInJsxScope',
+ message: markup`<emphasis>"React"</emphasis> must be in scope when using JSX`,
+ },
REACT_JSX_NO_COMMENT_TEXT: {
category: 'lint/jsxNoCommentText',
message: 'Comments inside children should be placed in braces',

MODIFY
packages/@romejs/js-compiler/lint/rules/index.ts
packages/@romejs/js-compiler/lint/rules/index.ts
@@ -52,6 +52,7 @@ import preferBlockStatements from './regular/preferBlockStatements';
import preferFunctionDeclarations from './regular/preferFunctionDeclarations';
import preferTemplate from './regular/preferTemplate';
import preferWhile from './regular/preferWhile';
+import reactInJsxScope from './react/reactInJsxScope';
import restrictedGlobals from './regular/restrictedGlobals';
import singleVarDeclarator from './regular/singleVarDeclarator';
import sortImportExportSpecifiers from './regular/sortImportExportSpecifiers';
@@ -108,6 +109,7 @@ export const lintTransforms = [
preferFunctionDeclarations,
preferTemplate,
preferWhile,
+ reactInJsxScope,
restrictedGlobals,
singleVarDeclarator,
sortImportExportSpecifiers,

ADD
packages/@romejs/js-compiler/lint/rules/react/reactInJsxScope.test.ts
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {test} from 'rome';
+import {testLint} from '../testHelpers';
+
+test(
+ '"React" in scope when using JSX',
+ async (t) => {
+ await testLint(
+ t,
+ `export function HelloWorldComponent() {
+ return <div>
+ Hello World!!!
+ </div>;
+ }`,
+ {
+ category: 'lint/reactInJsxScope',
+ },
+ );
+ },
+);

ADD
packages/@romejs/js-compiler/lint/rules/react/reactInJsxScope.ts
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {AnyNode} from '@romejs/js-ast';
+import {Path} from '@romejs/js-compiler';
+import {descriptions} from '@romejs/diagnostics';
+
+export default {
+ name: 'reactInJsxScope',
+ enter(path: Path): AnyNode {
+ const {node, scope, context} = path;
+
+ if (node.type === 'JSXElement') {
+ const reactIsInScope = scope.getBinding('React') !== undefined;
+
+ if (!reactIsInScope) {
+ context.addNodeDiagnostic(node, descriptions.LINT.REACT_IN_JSX_SCOPE);
+ }
+ }
+
+ return node;
+ },
+};

feat(react-lint): add react-in-jsx-scope lint rule

when using jsx templating into a React component, a React binding must
be in scope. add a lint rule to check if a "React" binding is defined
when using some JSXElements.