Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(eslint-rules): refactor use-method-usage to reflect current qwik… #5344

Merged
merged 5 commits into from
Oct 31, 2023
Merged

docs(eslint-rules): refactor use-method-usage to reflect current qwik… #5344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
653fdbc
docs(eslint-rules): refactor use-method-usage to reflect current qwik…
maiieul Oct 22, 2023
2ce6115
refactored unit tests
maiieul Oct 22, 2023
196eafe
re-add TSAsExpression
maiieul Oct 24, 2023
1c7ec86
word change: just -> only, to reflect latest PR
maiieul Oct 24, 2023
93c7310
Merge remote-tracking branch 'upstream/main' into eslint-use-method
mhevery Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 65 additions & 61 deletions packages/docs/src/routes/docs/(qwik)/advanced/eslint/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,18 @@ import './styles.css';
<h2>Possible Problems</h2>
<p>These rules are available.</p>
<div class="my-6">

<a href="#use-method-usage" class="p-4 flex panel">
<div class="flex-1">
<code>use-method-usage</code>
<span class="rule-description">Object destructuring is not recommended for component$</span>
<span class="rule-description">Detect invalid use of use hooks.</span>
</div>
<div class="flex gap-2 items-center">
<span
class={{
'icon': false,
'icon icon-inactive': false,
}}
}}
>
✅
</span>
Expand All @@ -62,7 +62,7 @@ import './styles.css';
</div>
</a>


<a href="#valid-lexical-scope" class="p-4 flex panel">
<div class="flex-1">
<code>valid-lexical-scope</code>
Expand All @@ -73,7 +73,7 @@ import './styles.css';
class={{
'icon': false,
'icon icon-inactive': false,
}}
}}
>
✅
</span>
Expand All @@ -88,18 +88,18 @@ import './styles.css';
</div>
</a>


<a href="#loader-location" class="p-4 flex panel">
<div class="flex-1">
<code>loader-location</code>
<span class="rule-description">Detect declaration location of loader$</span>
<span class="rule-description">Detect declaration location of loader$.</span>
</div>
<div class="flex gap-2 items-center">
<span
class={{
'icon': false,
'icon icon-inactive': true,
}}
}}
>
✅
</span>
Expand All @@ -114,7 +114,7 @@ import './styles.css';
</div>
</a>


<a href="#no-react-props" class="p-4 flex panel">
<div class="flex-1">
<code>no-react-props</code>
Expand All @@ -125,7 +125,7 @@ import './styles.css';
class={{
'icon': false,
'icon icon-inactive': false,
}}
}}
>
✅
</span>
Expand All @@ -140,7 +140,7 @@ import './styles.css';
</div>
</a>


<a href="#prefer-classlist" class="p-4 flex panel">
<div class="flex-1">
<code>prefer-classlist</code>
Expand All @@ -151,7 +151,7 @@ import './styles.css';
class={{
'icon': false,
'icon icon-inactive': true,
}}
}}
>
✅
</span>
Expand All @@ -166,7 +166,7 @@ import './styles.css';
</div>
</a>


<a href="#jsx-no-script-url" class="p-4 flex panel">
<div class="flex-1">
<code>jsx-no-script-url</code>
Expand All @@ -177,7 +177,7 @@ import './styles.css';
class={{
'icon': false,
'icon icon-inactive': true,
}}
}}
>
✅
</span>
Expand All @@ -192,7 +192,7 @@ import './styles.css';
</div>
</a>


<a href="#jsx-key" class="p-4 flex panel">
<div class="flex-1">
<code>jsx-key</code>
Expand All @@ -203,7 +203,7 @@ import './styles.css';
class={{
'icon': false,
'icon icon-inactive': true,
}}
}}
>
✅
</span>
Expand All @@ -218,18 +218,18 @@ import './styles.css';
</div>
</a>


<a href="#unused-server" class="p-4 flex panel">
<div class="flex-1">
<code>unused-server</code>
<span class="rule-description">Detect unused server$() functions</span>
<span class="rule-description">Detect unused server$() functions.</span>
</div>
<div class="flex gap-2 items-center">
<span
class={{
'icon': false,
'icon icon-inactive': false,
}}
}}
>
✅
</span>
Expand All @@ -244,7 +244,7 @@ import './styles.css';
</div>
</a>


<a href="#jsx-img" class="p-4 flex panel">
<div class="flex-1">
<code>jsx-img</code>
Expand All @@ -255,7 +255,33 @@ import './styles.css';
class={{
'icon': false,
'icon icon-inactive': true,
}}
}}
>
✅
</span>
<span
class={{
'icon': false,
'icon icon-inactive': false,
}}
>
🔔
</span>
</div>
</a>


<a href="#jsx-a" class="p-4 flex panel">
<div class="flex-1">
<code>jsx-a</code>
<span class="rule-description">For a perfect SEO score, always provide href attribute for &lt;a&gt; elements.</span>
</div>
<div class="flex gap-2 items-center">
<span
class={{
'icon': false,
'icon icon-inactive': true,
}}
>
✅
</span>
Expand All @@ -276,11 +302,9 @@ import './styles.css';

<div class="rule-wrapper">
<h3 id="use-method-usage">use-method-usage</h3>
<span>Object destructuring is not recommended for component$</span>
<span>Detect invalid use of use hooks.</span>

<h4>use-after-await</h4>
<div class="edit-examples-wrapper"><a href="https://github.com/BuilderIO/qwik/edit/main/packages/eslint-plugin-qwik/src/useMethodUsage.ts" target="_blank" class="edit-btn">Edit examples</a></div>
<h4>use-wrong-function</h4>
<h4>useWrongFunction</h4>
<p>Examples of <b>correct</b> code for this rule:</p>
<div class="code-wrapper">
<span class="badge good">✓</span>
Expand All @@ -290,34 +314,13 @@ export const Counter = component$(() => {
});
```
</div>
<p>Examples of <b>incorrect</b> code for this rule:</p>
<div class="code-wrapper">
<span class="badge bad">✕</span>
```tsx {2} /component$/#a
export const Counter = (() => {
const count = useSignal(0);
});
```
<p class="code-description">`use*` methods can just be used in `component$` functions.</p>
</div>
<div class="code-wrapper">
<span class="badge bad">✕</span>
```tsx {2} /component$/#a
export const Counter = (() => {
const count = useSignal(0);
});
```
<p class="code-description">`use*` methods can just be used in `component$` functions.</p>
</div>
<div class="edit-examples-wrapper"><a href="https://github.com/BuilderIO/qwik/edit/main/packages/eslint-plugin-qwik/src/useMethodUsage.ts" target="_blank" class="edit-btn">Edit examples</a></div>
<h4>use-not-root</h4>
<p>Examples of <b>correct</b> code for this rule:</p>
<div class="code-wrapper">
<span class="badge good">✓</span>
```tsx {2} /component$/#a
export const Counter = component$(() => {
export const useCounter = () => {
const count = useSignal(0);
});
return count;
};
```
</div>
<p>Examples of <b>incorrect</b> code for this rule:</p>
Expand All @@ -328,16 +331,7 @@ export const Counter = (() => {
const count = useSignal(0);
});
```
<p class="code-description">`use*` methods can just be used in `component$` functions.</p>
</div>
<div class="code-wrapper">
<span class="badge bad">✕</span>
```tsx {2} /component$/#a
export const Counter = (() => {
const count = useSignal(0);
});
```
<p class="code-description">`use*` methods can just be used in `component$` functions.</p>
<p class="code-description">`use*` methods can just be used in `component$` functions or inside `use*` hooks (e.g. `useCounter`).</p>
</div>
<div class="edit-examples-wrapper"><a href="https://github.com/BuilderIO/qwik/edit/main/packages/eslint-plugin-qwik/src/useMethodUsage.ts" target="_blank" class="edit-btn">Edit examples</a></div>

Expand Down Expand Up @@ -467,7 +461,7 @@ export const HelloWorld = component$(() => {

<div class="rule-wrapper">
<h3 id="loader-location">loader-location</h3>
<span>Detect declaration location of loader$</span>
<span>Detect declaration location of loader$.</span>

<h4>invalidLoaderLocation</h4>
<p>Examples of <b>correct</b> code for this rule:</p>
Expand Down Expand Up @@ -935,7 +929,7 @@ export const ColorList = component$(() => {

<div class="rule-wrapper">
<h3 id="unused-server">unused-server</h3>
<span>Detect unused server$() functions</span>
<span>Detect unused server$() functions.</span>

<h4>unusedServer</h4>
<p>Examples of <b>correct</b> code for this rule:</p>
Expand Down Expand Up @@ -1036,5 +1030,15 @@ import Image from '~/media/image.png';

</div>


<div class="rule-wrapper">
<h3 id="jsx-a">jsx-a</h3>
<span>For a perfect SEO score, always provide href attribute for &lt;a&gt; elements.</span>

<h4>noHref</h4>
<div class="edit-examples-wrapper"><a href="https://github.com/BuilderIO/qwik/edit/main/packages/eslint-plugin-qwik/src/jsxA.ts" target="_blank" class="edit-btn">Edit examples</a></div>

</div>

</div>
</div>
Loading
Loading