Skip to content

Commit

Permalink
Docs updates.
Browse files Browse the repository at this point in the history
  • Loading branch information
joshwilsonvu committed Jun 14, 2022
1 parent 111c850 commit 1f11a20
Show file tree
Hide file tree
Showing 6 changed files with 140 additions and 12 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ would like to use.
|| 🔧 | [solid/prefer-for](docs/prefer-for.md) | Enforce using Solid's `<For />` component for mapping an array to JSX elements. |
|| 🔧 | [solid/prefer-show](docs/prefer-show.md) | Enforce using Solid's `<Show />` component for conditionally showing content. |
|| | [solid/reactivity](docs/reactivity.md) | Enforce that reactive expressions (props, signals, memos, etc.) are only used in tracked scopes; otherwise, they won't update the view as expected. |
|| 🔧 | [solid/self-closing-comp](docs/self-closing-comp.md) | Disallow extra closing tags for components without children. |
|| 🔧 | [solid/style-prop](docs/style-prop.md) | Require CSS properties in the `style` prop to be valid and kebab-cased (ex. 'font-size'), not camel-cased (ex. 'fontSize') like in React, and that property values with dimensions are strings, not numbers with implicit 'px' units. |
<!-- AUTO-GENERATED-CONTENT:END -->

Expand Down
8 changes: 0 additions & 8 deletions docs/jsx-no-script-url.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,7 @@ This rule is **an error** by default.
See [this issue](https://github.com/joshwilsonvu/eslint-plugin-solid/issues/24) for rationale.

<!-- AUTO-GENERATED-CONTENT:START (OPTIONS) -->
## Rule Options

```
"event-handlers": ["error", { "<key>": "<value>" }]
```

Key | Type | Description
:--- | :---: | :---
ignoreCase | `boolean` | if true, don't warn on ambiguously named event handlers like `onclick` or `onchange`
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- AUTO-GENERATED-CONTENT:START (CASES) -->
Expand Down
131 changes: 131 additions & 0 deletions docs/self-closing-comp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!-- AUTO-GENERATED-CONTENT:START (HEADER) -->
# solid/self-closing-comp
Disallow extra closing tags for components without children.
This rule is **a warning** by default.

[View source](../src/rules/self-closing-comp.ts) · [View tests](../test/rules/self-closing-comp.test.ts)

<!-- AUTO-GENERATED-CONTENT:END -->

<!-- AUTO-GENERATED-CONTENT:START (OPTIONS) -->
## Rule Options

```
"self-closing-comp": ["error", { "<key>": "<value>" }]
```

Key | Type | Description
:--- | :---: | :---
component | `"all" | "none"` | *Default `"all"`*.
html | `"all" | "void" | "none"` | *Default `"all"`*.
<!-- AUTO-GENERATED-CONTENT:END -->

<!-- AUTO-GENERATED-CONTENT:START (CASES) -->
### Invalid Examples

These snippets cause lint errors, and some can be auto-fixed.

```js
let el = <div></div>;
// after eslint --fix:
let el = <div />;

let el = <img></img>;
// after eslint --fix:
let el = <img />;

/* eslint solid/self-closing-comp: ["error", { "html": "void" }] */
let el = <div />;
// after eslint --fix:
let el = <div></div>;

/* eslint solid/self-closing-comp: ["error", { "html": "void" }] */
let el = <div />;
// after eslint --fix:
let el = <div></div>;

/* eslint solid/self-closing-comp: ["error", { "html": "none" }] */
let el = <img />;
// after eslint --fix:
let el = <img></img>;

/* eslint solid/self-closing-comp: ["error", { "html": "none" }] */
let el = <img />;
// after eslint --fix:
let el = <img></img>;

let el = <div></div>;
// after eslint --fix:
let el = <div />;

let el = <Component></Component>;
// after eslint --fix:
let el = <Component />;

/* eslint solid/self-closing-comp: ["error", { "component": "none" }] */
let el = <Component />;
// after eslint --fix:
let el = <Component></Component>;

```

### Valid Examples

These snippets don't cause lint errors.

```js
let el = <Component name="Foo" />;

let el = <Compound.Component name="Foo" />;

let el = (
<Component>
<img src="picture.png" />
</Component>
);

let el = (
<Compound.Component>
<img src="picture.png" />
</Compound.Component>
);

let el = (
<Component>
<Component name="Foo" />
</Component>
);

let el = (
<Compound.Component>
<Compound.Component />
</Compound.Component>
);

let el = <Component name="Foo"> </Component>;

let el = <Compound.Component name="Foo"> </Compound.Component>;

let el = <Component name="Foo"> </Component>;

let el = <div>&nbsp;</div>;

let el = <div> </div>;

/* eslint solid/self-closing-comp: ["error", { "html": "none" }] */
let el = <div></div>;

/* eslint solid/self-closing-comp: ["error", { "html": "none" }] */
let el = <img></img>;

/* eslint solid/self-closing-comp: ["error", { "html": "void" }] */
let el = <div></div>;

/* eslint solid/self-closing-comp: ["error", { "html": "none" }] */
let el = <div></div>;

/* eslint solid/self-closing-comp: ["error", { "component": "none" }] */
let el = <Component></Component>;

```
<!-- AUTO-GENERATED-CONTENT:END -->
7 changes: 6 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ import preferClasslist from "./rules/prefer-classlist";
import preferFor from "./rules/prefer-for";
import preferShow from "./rules/prefer-show";
import reactivity from "./rules/reactivity";
import selfClosingComp from "./rules/self-closing-comp";
import styleProp from "./rules/style-prop";
// import validateJsxNesting from "./rules/validate-jsx-nesting";

const allRules = {
"components-return-once": componentsReturnOnce,
Expand All @@ -25,12 +27,13 @@ const allRules = {
"no-innerhtml": noInnerHTML,
"no-react-specific-props": noReactSpecificProps,
"no-unknown-namespaces": noUnknownNamespaces,
// noUselessKeys,
"prefer-classlist": preferClasslist,
"prefer-for": preferFor,
"prefer-show": preferShow,
reactivity,
"self-closing-comp": selfClosingComp,
"style-prop": styleProp,
// "validate-jsx-nesting": validateJsxNesting
};

// Must be module.exports for eslint to load everything
Expand Down Expand Up @@ -69,6 +72,7 @@ module.exports = {
"solid/style-prop": 1,
"solid/no-react-specific-props": 1,
"solid/prefer-classlist": 1,
"solid/self-closing-comp": 1,
// handled by Solid compiler, opt-in style suggestion
"solid/prefer-show": 0,
},
Expand Down Expand Up @@ -97,6 +101,7 @@ module.exports = {
"solid/style-prop": 1,
"solid/no-react-specific-props": 1,
"solid/prefer-classlist": 1,
"solid/self-closing-comp": 1,
// namespaces taken care of by TS
"solid/no-unknown-namespaces": 0,
// handled by Solid compiler, opt-in style suggestion
Expand Down
2 changes: 1 addition & 1 deletion src/rules/jsx-no-script-url.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TSESTree as T, TSESLint, ASTUtils } from "@typescript-eslint/utils";
import { TSESLint, ASTUtils } from "@typescript-eslint/utils";
const { getStaticValue } = ASTUtils;

// A javascript: URL can contain leading C0 control or \u0020 SPACE,
Expand Down
3 changes: 1 addition & 2 deletions src/rules/self-closing-comp.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { TSESTree as T, TSESLint } from "@typescript-eslint/utils";
import { isDoStatement } from "typescript";
import { isDOMElementName } from "../utils";

function isComponent(node: T.JSXOpeningElement) {
Expand Down Expand Up @@ -41,7 +40,7 @@ const rule: TSESLint.RuleModule<
meta: {
type: "layout",
docs: {
description: "Disallow extra closing tags for components without children",
description: "Disallow extra closing tags for components without children.",
recommended: "warn",
url: "https://github.com/joshwilsonvu/eslint-plugin-solid/blob/main/docs/self-closing-comp.md",
},
Expand Down

0 comments on commit 1f11a20

Please sign in to comment.