Merge pull request #387 from macovedj/no-children-prop

WIP: No children prop

packages/@romejs/diagnostics/categories.ts

@@ -104,6 +104,7 @@ type LintDiagnosticCategory =
   | 'lint/noArguments'
   | 'lint/noAsyncPromiseExecutor'
   | 'lint/noCatchAssign'
+  | 'lint/noChildrenProp'
   | 'lint/noCompareNegZero'
   | 'lint/noCondAssign'
   | 'lint/noDebugger'

packages/@romejs/diagnostics/descriptions.ts

@@ -342,6 +342,10 @@ export const descriptions = createMessages({
         },
       ],
     }),
+    NO_CHILDREN_PROP: {
+      category: 'lint/noChildrenProp',
+      message: 'children should not be passed as a prop',
+    },
     PREFER_BLOCK_STATEMENT: {
       category: 'lint/preferBlockStatements',
       message: 'Block statements are preferred in this position',

packages/@romejs/js-compiler/lint/rules/index.ts

@@ -20,6 +20,7 @@ import jsxNoCommentText from './react/jsxNoCommentText';
 import noArguments from './regular/noArguments';
 import noAsyncPromiseExecutor from './regular/noAsyncPromiseExecutor';
 import noCatchAssign from './regular/noCatchAssign';
+import noChildrenProp from './react/noChildrenProp';
 import noCompareNegZero from './regular/noCompareNegZero';
 import noCondAssign from './regular/noCondAssign';
 import noDebugger from './regular/noDebugger';
@@ -70,6 +71,7 @@ export const lintTransforms = [
   noArguments,
   noAsyncPromiseExecutor,
   noCatchAssign,
+  noChildrenProp,
   noCompareNegZero,
   noCondAssign,
   noDebugger,

packages/@romejs/js-compiler/lint/rules/react/noChildrenProp.test.md

@@ -0,0 +1,95 @@
+# `noChildrenProp.test.ts`
+
+**DO NOT MODIFY**. This file has been autogenerated. Run `rome test packages/@romejs/js-compiler/lint/rules/react/noChildrenProp.test.ts --update-snapshots` to update.
+
+## `no children props`
+
+### `0`
+
+```
+
+ unknown:1 lint/noChildrenProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ✖ children should not be passed as a prop
+
+    <MyComponent children={'foo'}></MyComponent>
+    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✖ Found 1 problem
+
+```
+
+### `0: formatted`
+
+```
+<MyComponent children={'foo'}></MyComponent>;
+
+```
+
+### `1`
+
+```
+
+ unknown:1 lint/noChildrenProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ✖ children should not be passed as a prop
+
+    React.createElement('div', {children: 'foo'})
+    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✖ Found 1 problem
+
+```
+
+### `1: formatted`
+
+```
+React.createElement('div', {children: 'foo'});
+
+```
+
+### `2`
+
+```
+✔ No known problems!
+
+```
+
+### `2: formatted`
+
+```
+<MyComponent><AnotherComponent /></MyComponent>;
+
+```
+
+### `3`
+
+```
+✔ No known problems!
+
+```
+
+### `3: formatted`
+
+```
+React.createElement('div', {}, 'children');
+
+```
+
+### `4`
+
+```
+✔ No known problems!
+
+```
+
+### `4: formatted`
+
+```
+React.createElement('div', child1, 'child2');
+
+```

packages/@romejs/js-compiler/lint/rules/react/noChildrenProp.test.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 {testLintMultiple} from '../testHelpers';
+
+test(
+  'no children props',
+  async (t) => {
+    await testLintMultiple(
+      t,
+      [
+        // INVALID
+        `<MyComponent children={'foo'}></MyComponent>`,
+        `React.createElement('div', {children: 'foo'})`,
+        // VALID
+        `<MyComponent><AnotherComponent /></MyComponent  >`,
+        `React.createElement('div', {}, 'children')`,
+        `React.createElement('div', child1, 'child2')`,
+      ],
+      {category: 'lint/noChildrenProp'},
+    );
+  },
+);

packages/@romejs/js-compiler/lint/rules/react/noChildrenProp.ts

@@ -0,0 +1,47 @@
+/**
+ * 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 {Path} from '@romejs/js-compiler';
+import {AnyNode, JSXAttribute, JSXSpreadAttribute, ObjectProperty, ObjectMethod, SpreadProperty} from '@romejs/js-ast';
+import {doesNodeMatchPattern} from '@romejs/js-ast-utils';
+import {descriptions} from '@romejs/diagnostics';
+
+const isAttributePassingChildrenProp = (attribute: JSXAttribute|JSXSpreadAttribute): boolean => (
+  attribute.type === 'JSXAttribute' && 
+  attribute.name.name === 'children'
+)
+
+const isCreateElementPassingChildrenProp = (property: ObjectProperty|ObjectMethod|SpreadProperty): boolean => (
+  property.type === 'ObjectProperty' &&
+  property.key.value.type === 'Identifier' &&
+  property.key.value.name === 'children'
+)
+
+export default {
+  name: 'noChildrenProp',
+  enter(path: Path): AnyNode {
+    const {node} = path;
+    if (
+      (
+        node.type === 'JSXElement' &&
+        node.attributes.find(isAttributePassingChildrenProp)
+      ) || (
+        node.type === 'CallExpression' &&
+        doesNodeMatchPattern(node.callee, 'React.createElement') &&
+        node.arguments[1].type === 'ObjectExpression' &&
+        node.arguments[1].properties.find(isCreateElementPassingChildrenProp)
+      )
+    ) {
+      path.context.addNodeDiagnostic(
+        node,
+        descriptions.LINT.NO_CHILDREN_PROP,
+      );
+    }
+
+    return node;
+  },
+};

packages/@romejs/js-formatter/builders/jsx/JSXReferenceIdentifier.ts

@@ -6,7 +6,12 @@
  */
 
 import {Token} from '../../tokens';
+import Builder from '../../Builder';
+import {JSXReferenceIdentifier} from '@romejs/js-ast';
 
-export default function JSXReferenceIdentifier(): Token {
-  throw new Error('unimplemented');
+export default function JSXReferenceIdentifier(
+  builder: Builder,
+  node: JSXReferenceIdentifier,
+): Token {
+  return node.name;
 }