feat(jsx-one-expression-per-line): allow non-jsx (#393)

eslint-stylistic · May 18, 2024 · 431d564 · 431d564
1 parent 1d3d47c
commit 431d564
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 3 deletions.
diff --git a/packages/eslint-plugin-jsx/rules/jsx-one-expression-per-line/README.md b/packages/eslint-plugin-jsx/rules/jsx-one-expression-per-line/README.md
@@ -112,7 +112,7 @@ Examples of **correct** code for this rule:
 
 ```js
 ...
-"@stylistic/jsx/jsx-one-expression-per-line": [<enabled>, { "allow": "none"|"literal"|"single-child" }]
+"@stylistic/jsx/jsx-one-expression-per-line": [<enabled>, { "allow": "none"|"literal"|"single-child"|"non-jsx" }]
 ...
 ```
 
@@ -147,3 +147,17 @@ Examples of **correct** code for this rule, when configured as `"single-line"`:
   <Hello /> <ESLint />
 </App>
 ```
+
+Examples of **correct** code for this rule, when configured as `"non-jsx"`:
+
+```jsx
+<App>Hello {someVariable}</App>
+
+<App>Hello {<Hello />} there!</App>
+
+<App>
+  Hello
+  <Hello />
+  there!
+</App>
+```
diff --git a/...s/eslint-plugin-jsx/rules/jsx-one-expression-per-line/jsx-one-expression-per-line.test.ts b/...s/eslint-plugin-jsx/rules/jsx-one-expression-per-line/jsx-one-expression-per-line.test.ts
@@ -143,6 +143,22 @@ run({
       code: '<App>{"foo"}</App>',
       options: [{ allow: 'single-child' }],
     },
+    {
+      code: '<App>123</App>',
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: '<App>foo</App>',
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: '<App>{"foo"}</App>',
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: '<App>{<Bar />}</App>',
+      options: [{ allow: 'non-jsx' }],
+    },
     {
       code: '<App>{foo && <Bar />}</App>',
       options: [{ allow: 'single-child' }],
@@ -172,6 +188,56 @@ run({
       `,
       features: ['fragment', 'no-ts-old'], // TODO: FIXME: remove no-ts-old and fix
     },
+    {
+      code: '<App>Hello {name}</App>',
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: `
+        <App>
+          Hello {name} there!
+        </App>`,
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: `
+        <App>
+          Hello {<Bar />} there!
+        </App>`,
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: `
+        <App>
+          Hello {(<Bar />)} there!
+        </App>`,
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: `
+        <App>
+          Hello {(() => <Bar />)()} there!
+        </App>`,
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: `<>
+               123
+               <Foo/>
+             </>`,
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: `
+        <>
+          <Foo/>
+            Bar
+            <Baz>
+          </Baz>
+        </>
+      `,
+      options: [{ allow: 'non-jsx' }],
+    },
     {
       code: '<App>{"foo"}</App>',
       options: [{ allow: 'single-line' }],
@@ -531,6 +597,27 @@ foo
         },
       ],
     },
+    {
+      code: `
+        <Text style={styles.foo}>
+          <Bar /> <Baz />
+        </Text>
+      `,
+      output: `
+        <Text style={styles.foo}>
+          <Bar />${' '/* intentional trailing space */}
+{' '}
+<Baz />
+        </Text>
+      `,
+      errors: [
+        {
+          messageId: 'moveToNewLine',
+          data: { descriptor: 'Baz' },
+        },
+      ],
+      options: [{ allow: 'non-jsx' }],
+    },
     {
       code: `
         <Text style={styles.foo}>
@@ -1245,6 +1332,23 @@ foo
         },
       ],
     },
+    {
+      code: `
+        <App><Foo /></App>
+      `,
+      output: `
+        <App>
+<Foo />
+</App>
+      `,
+      options: [{ allow: 'non-jsx' }],
+      errors: [
+        {
+          messageId: 'moveToNewLine',
+          data: { descriptor: 'Foo' },
+        },
+      ],
+    },
     {
       code: `
         <App
@@ -1555,6 +1659,34 @@ Go to page 2
 </Layout>
       `,
       output: `
+<Layout>
+  <div style={{ maxWidth: \`300px\`, marginBottom: \`1.45rem\` }}>
+<Image />
+</div>
+{'Bar'}
+  <Link to="/page-2/">Go to page 2</Link>
+</Layout>
+      `,
+      errors: [
+        {
+          messageId: 'moveToNewLine',
+          data: { descriptor: 'Image' },
+        },
+        {
+          messageId: 'moveToNewLine',
+          data: { descriptor: '{\'Bar\'}' },
+        },
+      ],
+      options: [{ allow: 'non-jsx' }],
+    },
+    {
+      code: `
+<Layout>
+  <div style={{ maxWidth: \`300px\`, marginBottom: \`1.45rem\` }}><Image /></div>{'Bar'}
+  <Link to="/page-2/">Go to page 2</Link>
+</Layout>
+      `,
+      output: `
 <Layout>
   <div style={{ maxWidth: \`300px\`, marginBottom: \`1.45rem\` }}><Image /></div>
 {'Bar'}

diff --git a/packages/eslint-plugin-jsx/rules/jsx-one-expression-per-line/jsx-one-expression-per-line.ts b/packages/eslint-plugin-jsx/rules/jsx-one-expression-per-line/jsx-one-expression-per-line.ts
@@ -38,7 +38,7 @@ export default createRule<MessageIds, RuleOptions>({
         properties: {
           allow: {
             type: 'string',
-            enum: ['none', 'literal', 'single-child', 'single-line'],
+            enum: ['none', 'literal', 'single-child', 'single-line', 'non-jsx'],
           },
         },
         default: optionDefaults,
@@ -66,6 +66,12 @@ export default createRule<MessageIds, RuleOptions>({
       if (!children || !children.length)
         return
 
+      if (
+        options.allow === 'non-jsx'
+        && !children.find(child => (child.type === 'JSXFragment' || child.type === 'JSXElement'))
+      )
+        return
+
       const openingElement = (<Tree.JSXElement>node).openingElement || (<Tree.JSXFragment>node).openingFragment
       const closingElement = (<Tree.JSXElement>node).closingElement || (<Tree.JSXFragment>node).closingFragment
       const openingElementStartLine = openingElement.loc.start.line

diff --git a/packages/eslint-plugin-jsx/rules/jsx-one-expression-per-line/types.d.ts b/packages/eslint-plugin-jsx/rules/jsx-one-expression-per-line/types.d.ts
@@ -1,7 +1,7 @@
 /* GENERATED, DO NOT EDIT DIRECTLY */
 
 export interface Schema0 {
-  allow?: 'none' | 'literal' | 'single-child' | 'single-line'
+  allow?: 'none' | 'literal' | 'single-child' | 'single-line' | 'non-jsx'
 }
 
 export type RuleOptions = [Schema0?]