|
| 1 | +<!-- AUTO-GENERATED-CONTENT:START (HEADER) --> |
| 2 | +# solid/components-return-once |
| 3 | +Disallow early returns in components. Solid components only run once, and so conditionals should be inside JSX. |
| 4 | +This rule is **a warning** by default. |
| 5 | + |
| 6 | +[View source](../src/rules/components-return-once.ts) · [View tests](../test/rules/components-return-once.test.ts) |
| 7 | + |
| 8 | +<!-- AUTO-GENERATED-CONTENT:END --> |
| 9 | + |
| 10 | +See [this issue](https://github.com/joshwilsonvu/eslint-plugin-solid/issues/24) for rationale. |
| 11 | + |
| 12 | +<!-- AUTO-GENERATED-CONTENT:START (OPTIONS) --> |
| 13 | +## Rule Options |
| 14 | + |
| 15 | +``` |
| 16 | + "event-handlers": ["error", { "<key>": "<value>" }] |
| 17 | +``` |
| 18 | + |
| 19 | +Key | Type | Description |
| 20 | +:--- | :---: | :--- |
| 21 | +ignoreCase | `boolean` | if true, don't warn on ambiguously named event handlers like `onclick` or `onchange` |
| 22 | +<!-- AUTO-GENERATED-CONTENT:END --> |
| 23 | + |
| 24 | +<!-- AUTO-GENERATED-CONTENT:START (CASES) --> |
| 25 | +### Invalid Examples |
| 26 | + |
| 27 | +These snippets cause lint errors, and some can be auto-fixed. |
| 28 | + |
| 29 | +```js |
| 30 | +function Component() { |
| 31 | + if (condition) { |
| 32 | + return <div />; |
| 33 | + } |
| 34 | + return <span />; |
| 35 | +} |
| 36 | + |
| 37 | +const Component = () => { |
| 38 | + if (condition) { |
| 39 | + return <div />; |
| 40 | + } |
| 41 | + return <span />; |
| 42 | +}; |
| 43 | + |
| 44 | +function Component() { |
| 45 | + return Math.random() > 0.5 ? <div>Big!</div> : <div>Small!</div>; |
| 46 | +} |
| 47 | +// after eslint --fix: |
| 48 | +function Component() { |
| 49 | + return <>{Math.random() > 0.5 ? <div>Big!</div> : <div>Small!</div>}</>; |
| 50 | +} |
| 51 | + |
| 52 | +function Component() { |
| 53 | + return Math.random() > 0.5 ? <div>Big!</div> : "Small!"; |
| 54 | +} |
| 55 | +// after eslint --fix: |
| 56 | +function Component() { |
| 57 | + return <>{Math.random() > 0.5 ? <div>Big!</div> : "Small!"}</>; |
| 58 | +} |
| 59 | + |
| 60 | +function Component() { |
| 61 | + return Math.random() > 0.5 ? ( |
| 62 | + <div>Big! No, really big!</div> |
| 63 | + ) : ( |
| 64 | + <div>Small!</div> |
| 65 | + ); |
| 66 | +} |
| 67 | +// after eslint --fix: |
| 68 | +function Component() { |
| 69 | + return ( |
| 70 | + <Show when={Math.random() > 0.5} fallback={<div>Small!</div>}> |
| 71 | + <div>Big! No, really big!</div> |
| 72 | + </Show> |
| 73 | + ); |
| 74 | +} |
| 75 | + |
| 76 | +function Component(props) { |
| 77 | + return props.cond1 ? ( |
| 78 | + <div>Condition 1</div> |
| 79 | + ) : Boolean(props.cond2) ? ( |
| 80 | + <div>Not condition 1, but condition 2</div> |
| 81 | + ) : ( |
| 82 | + <div>Neither condition 1 or 2</div> |
| 83 | + ); |
| 84 | +} |
| 85 | +// after eslint --fix: |
| 86 | +function Component(props) { |
| 87 | + return ( |
| 88 | + <Switch fallback={<div>Neither condition 1 or 2</div>}> |
| 89 | + <Match when={props.cond1}> |
| 90 | + <div>Condition 1</div> |
| 91 | + </Match> |
| 92 | + <Match when={Boolean(props.cond2)}> |
| 93 | + <div>Not condition 1, but condition 2</div> |
| 94 | + </Match> |
| 95 | + </Switch> |
| 96 | + ); |
| 97 | +} |
| 98 | + |
| 99 | +``` |
| 100 | + |
| 101 | +### Valid Examples |
| 102 | + |
| 103 | +These snippets don't cause lint errors. |
| 104 | + |
| 105 | +```js |
| 106 | +function Component() { |
| 107 | + return <div />; |
| 108 | +} |
| 109 | + |
| 110 | +function someFunc() { |
| 111 | + if (condition) { |
| 112 | + return 5; |
| 113 | + } |
| 114 | + return 10; |
| 115 | +} |
| 116 | + |
| 117 | +function notAComponent() { |
| 118 | + if (condition) { |
| 119 | + return <div />; |
| 120 | + } |
| 121 | + return <div />; |
| 122 | +} |
| 123 | + |
| 124 | +``` |
| 125 | +<!-- AUTO-GENERATED-CONTENT:END --> |
0 commit comments