@murky-web/oxlint-plugin-solid 0.0.1

package/src/rules/prefer_arrow_components.mjs

@@ -0,0 +1,411 @@
+const FALSE_SENTINEL = false;
+const FIRST_INDEX = 0;
+const LAST_INDEX = -1;
+const FILE_START_RANGE = [FIRST_INDEX, FIRST_INDEX];
+const NO_PARAMETERS = 0;
+const ONE_PARAMETER = 1;
+const PASCAL_CASE_COMPONENT_NAME = /^[A-Z][A-Za-z0-9]*$/;
+const SOLID_IMPORT_SOURCE = "solid-js";
+
+function isAstNode(value) {
+    return (
+        typeof value === "object" &&
+        value !== null &&
+        typeof value.type === "string"
+    );
+}
+
+function isExportedFunctionComponent(node) {
+    return (
+        node.type === "FunctionDeclaration" &&
+        node.id?.type === "Identifier" &&
+        isPascalCaseComponentName(node.id.name) &&
+        node.parent?.type === "ExportNamedDeclaration" &&
+        node.async !== true &&
+        node.generator !== true &&
+        !node.typeParameters
+    );
+}
+
+function isJsxLikeNode(node) {
+    return node?.type === "JSXElement" || node?.type === "JSXFragment";
+}
+
+function isPascalCaseComponentName(name) {
+    return PASCAL_CASE_COMPONENT_NAME.test(name);
+}
+
+function isPropsChildrenMember(node, propsIdentifierName) {
+    return (
+        node.type === "MemberExpression" &&
+        node.object?.type === "Identifier" &&
+        node.object.name === propsIdentifierName &&
+        node.property?.type === "Identifier" &&
+        node.property.name === "children" &&
+        node.computed === false
+    );
+}
+
+function isSolidImportDeclaration(statement) {
+    return (
+        statement.type === "ImportDeclaration" &&
+        statement.source?.value === SOLID_IMPORT_SOURCE
+    );
+}
+
+function getDesiredSolidTypeName(usesChildren) {
+    if (usesChildren) {
+        return "ParentComponent";
+    }
+
+    return "Component";
+}
+
+function getImportedName(specifier) {
+    if (specifier.imported.type === "Identifier") {
+        return specifier.imported.name;
+    }
+
+    return specifier.imported.value;
+}
+
+function getPropsParam(functionNode) {
+    if (functionNode.params.length === NO_PARAMETERS) {
+        return {
+            name: "",
+            text: "",
+        };
+    }
+
+    if (functionNode.params.length !== ONE_PARAMETER) {
+        return FALSE_SENTINEL;
+    }
+
+    const [param] = functionNode.params;
+    if (param.type !== "Identifier") {
+        return FALSE_SENTINEL;
+    }
+
+    return {
+        name: param.name,
+        text: param.name,
+    };
+}
+
+function getPropsSuffix(typeReference) {
+    if (typeReference === "") {
+        return "";
+    }
+
+    return `<${typeReference}>`;
+}
+
+function getSolidImportDeclarations(programNode) {
+    return programNode.body.filter((statement) => {
+        return isSolidImportDeclaration(statement);
+    });
+}
+
+function getTypeReferenceForProps(functionNode, sourceCode) {
+    if (functionNode.params.length === NO_PARAMETERS) {
+        return "";
+    }
+
+    if (functionNode.params.length !== ONE_PARAMETER) {
+        return FALSE_SENTINEL;
+    }
+
+    const [param] = functionNode.params;
+    if (param.type !== "Identifier" || !param.typeAnnotation) {
+        return FALSE_SENTINEL;
+    }
+
+    return sourceCode.getText(param.typeAnnotation.typeAnnotation);
+}
+
+function findLocalTypeName(importDeclarations, desiredTypeName) {
+    for (const statement of importDeclarations) {
+        for (const specifier of statement.specifiers) {
+            if (specifier.type !== "ImportSpecifier") {
+                continue;
+            }
+
+            if (getImportedName(specifier) === desiredTypeName) {
+                return specifier.local.name;
+            }
+        }
+    }
+
+    return "";
+}
+
+function hasJsxReturn(body) {
+    if (body?.type !== "BlockStatement") {
+        return false;
+    }
+
+    for (const statement of body.body) {
+        if (
+            statement.type === "ReturnStatement" &&
+            isJsxLikeNode(statement.argument)
+        ) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function visitAstNode(node, visitor) {
+    if (!isAstNode(node)) {
+        return;
+    }
+
+    visitor(node);
+
+    for (const [key, value] of Object.entries(node)) {
+        if (key === "parent") {
+            continue;
+        }
+
+        if (Array.isArray(value)) {
+            for (const child of value) {
+                if (isAstNode(child)) {
+                    visitAstNode(child, visitor);
+                }
+            }
+            continue;
+        }
+
+        if (isAstNode(value)) {
+            visitAstNode(value, visitor);
+        }
+    }
+}
+
+function usesPropsChildren(functionNode, propsIdentifierName) {
+    let found = false;
+
+    visitAstNode(functionNode.body, (node) => {
+        if (found || !isPropsChildrenMember(node, propsIdentifierName)) {
+            return;
+        }
+
+        found = true;
+    });
+
+    return found;
+}
+
+function getSolidTypeImportInfo(programNode, desiredTypeName) {
+    const importDeclarations = getSolidImportDeclarations(programNode);
+
+    return {
+        importDeclaration: importDeclarations.at(FIRST_INDEX),
+        localTypeName: findLocalTypeName(importDeclarations, desiredTypeName),
+    };
+}
+
+function getNamedImportSpecifiers(importDeclaration) {
+    return importDeclaration.specifiers.filter((specifier) => {
+        return specifier.type === "ImportSpecifier";
+    });
+}
+
+function getValueImportSpecifiers(importDeclaration) {
+    return importDeclaration.specifiers.filter((specifier) => {
+        return (
+            specifier.type === "ImportDefaultSpecifier" ||
+            specifier.type === "ImportNamespaceSpecifier"
+        );
+    });
+}
+
+function getTypeKeyword(importDeclaration, sourceCode) {
+    if (sourceCode.getText(importDeclaration).startsWith("import type")) {
+        return "";
+    }
+
+    return "type ";
+}
+
+function insertSolidTypeIntoExistingImport({
+    desiredTypeName,
+    fixer,
+    importDeclaration,
+    sourceCode,
+}) {
+    const namedSpecifiers = getNamedImportSpecifiers(importDeclaration);
+    if (namedSpecifiers.length > NO_PARAMETERS) {
+        const lastNamedSpecifier = namedSpecifiers.at(LAST_INDEX);
+        const typeKeyword = getTypeKeyword(importDeclaration, sourceCode);
+        return fixer.insertTextAfter(
+            lastNamedSpecifier,
+            `, ${typeKeyword}${desiredTypeName}`,
+        );
+    }
+
+    const valueSpecifiers = getValueImportSpecifiers(importDeclaration);
+    if (valueSpecifiers.length > NO_PARAMETERS) {
+        const lastValueSpecifier = valueSpecifiers.at(LAST_INDEX);
+        return fixer.insertTextAfter(
+            lastValueSpecifier,
+            `, { type ${desiredTypeName} }`,
+        );
+    }
+
+    return fixer.insertTextBefore(
+        importDeclaration,
+        `import type { ${desiredTypeName} } from "solid-js";\n`,
+    );
+}
+
+function createImportFix({ desiredTypeName, fixer, programNode, sourceCode }) {
+    const { importDeclaration, localTypeName } = getSolidTypeImportInfo(
+        programNode,
+        desiredTypeName,
+    );
+
+    if (localTypeName !== "") {
+        return {
+            localTypeName,
+            operation: null,
+        };
+    }
+
+    if (importDeclaration) {
+        return {
+            localTypeName: desiredTypeName,
+            operation: insertSolidTypeIntoExistingImport({
+                desiredTypeName,
+                fixer,
+                importDeclaration,
+                sourceCode,
+            }),
+        };
+    }
+
+    return {
+        localTypeName: desiredTypeName,
+        operation: fixer.insertTextBeforeRange(
+            FILE_START_RANGE,
+            `import type { ${desiredTypeName} } from "solid-js";\n`,
+        ),
+    };
+}
+
+function buildReplacementText({
+    componentName,
+    localTypeName,
+    propsParam,
+    sourceCode,
+    typeReference,
+    usesChildren,
+    functionNode,
+}) {
+    const asyncPrefix = "";
+    const childrenComment = usesChildren ? "" : "";
+    const propsSuffix = getPropsSuffix(typeReference);
+    const paramsText = propsParam.text;
+    const bodyText = sourceCode.getText(functionNode.body);
+
+    return `export const ${componentName}: ${localTypeName}${propsSuffix} = (${paramsText}) => ${bodyText}${asyncPrefix}${childrenComment}`;
+}
+
+function createRuleFix({
+    fixer,
+    functionNode,
+    localTypeName,
+    propsParam,
+    sourceCode,
+    typeReference,
+    usesChildren,
+}) {
+    const componentName = functionNode.id.name;
+    const replacementText = buildReplacementText({
+        componentName,
+        functionNode,
+        localTypeName,
+        propsParam,
+        sourceCode,
+        typeReference,
+        usesChildren,
+    });
+
+    return fixer.replaceText(functionNode.parent, replacementText);
+}
+
+export const preferArrowComponentsRule = {
+    meta: {
+        docs: {
+            description:
+                "Prefer Solid components written as arrow consts typed with Component or ParentComponent.",
+            recommended: false,
+        },
+        fixable: "code",
+        schema: [],
+        type: "suggestion",
+    },
+    create(context) {
+        const sourceCode = context.sourceCode;
+        const programNode = sourceCode.ast;
+
+        return {
+            FunctionDeclaration(node) {
+                if (
+                    !isExportedFunctionComponent(node) ||
+                    !hasJsxReturn(node.body)
+                ) {
+                    return;
+                }
+
+                const propsParam = getPropsParam(node);
+                const typeReference = getTypeReferenceForProps(
+                    node,
+                    sourceCode,
+                );
+                if (
+                    propsParam === FALSE_SENTINEL ||
+                    typeReference === FALSE_SENTINEL
+                ) {
+                    return;
+                }
+
+                const usesChildren =
+                    propsParam.name !== "" &&
+                    usesPropsChildren(node, propsParam.name);
+                const desiredTypeName = getDesiredSolidTypeName(usesChildren);
+
+                context.report({
+                    fix(fixer) {
+                        const importFix = createImportFix({
+                            desiredTypeName,
+                            fixer,
+                            programNode,
+                            sourceCode,
+                        });
+                        const replacementFix = createRuleFix({
+                            fixer,
+                            functionNode: node,
+                            localTypeName: importFix.localTypeName,
+                            propsParam,
+                            sourceCode,
+                            typeReference,
+                            usesChildren,
+                        });
+
+                        return [
+                            ...(importFix.operation
+                                ? [importFix.operation]
+                                : []),
+                            replacementFix,
+                        ];
+                    },
+                    message:
+                        "Prefer export const components typed as Component<Props> or ParentComponent<Props>.",
+                    node,
+                });
+            },
+        };
+    },
+};

package/src/rules/prefer_classlist.mjs

@@ -0,0 +1,89 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { jsxHasProp, jsxPropName } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Enforce using the classlist prop over importing a classnames helper. The classlist prop accepts an object `{ [class: string]: boolean }` just like classnames.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-classlist.md",
+        },
+        fixable: "code",
+        deprecated: true,
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    classnames: {
+                        type: "array",
+                        description:
+                            "An array of names to treat as `classnames` functions",
+                        default: ["cn", "clsx", "classnames"],
+                        items: {
+                            type: "string",
+                        },
+                        minItems: 1,
+                        uniqueItems: true,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            preferClasslist:
+                "The classlist prop should be used instead of {{ classnames }} to efficiently set classes based on an object.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const classnames = context.options[0]?.classnames ?? [
+            "cn",
+            "clsx",
+            "classnames",
+        ];
+        return {
+            JSXAttribute(node) {
+                if (
+                    ["class", "className"].indexOf(jsxPropName(node)) === -1 ||
+                    jsxHasProp(node.parent?.attributes ?? [], "classlist")
+                ) {
+                    return;
+                }
+                if (node.value?.type === "JSXExpressionContainer") {
+                    const expr = node.value.expression;
+                    if (
+                        expr.type === "CallExpression" &&
+                        expr.callee.type === "Identifier" &&
+                        classnames.indexOf(expr.callee.name) !== -1 &&
+                        expr.arguments.length === 1 &&
+                        expr.arguments[0].type === "ObjectExpression"
+                    ) {
+                        context.report({
+                            node,
+                            messageId: "preferClasslist",
+                            data: {
+                                classnames: expr.callee.name,
+                            },
+                            fix: (fixer) => {
+                                const attrRange = node.range;
+                                const objectRange = expr.arguments[0].range;
+                                return [
+                                    fixer.replaceTextRange(
+                                        [attrRange[0], objectRange[0]],
+                                        "classlist={",
+                                    ),
+                                    fixer.replaceTextRange(
+                                        [objectRange[1], attrRange[1]],
+                                        "}",
+                                    ),
+                                ];
+                            },
+                        });
+                    }
+                }
+            },
+        };
+    },
+});

package/src/rules/prefer_for.mjs

@@ -0,0 +1,92 @@
+import { ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
+
+import { isFunctionNode, isJSXElementOrFragment } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getPropertyName } = ASTUtils;
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Enforce using Solid's `<For />` component for mapping an array to JSX elements.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-for.md",
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            preferFor:
+                "Use Solid's `<For />` component for efficiently rendering lists. Array#map causes DOM elements to be recreated.",
+            preferForOrIndex:
+                "Use Solid's `<For />` component or `<Index />` component for rendering lists. Array#map causes DOM elements to be recreated.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const reportPreferFor = (node) => {
+            const jsxExpressionContainerNode = node.parent;
+            const arrayNode = node.callee.object;
+            const mapFnNode = node.arguments[0];
+            context.report({
+                node,
+                messageId: "preferFor",
+                fix: (fixer) => {
+                    const beforeArray = [
+                        jsxExpressionContainerNode.range[0],
+                        arrayNode.range[0],
+                    ];
+                    const betweenArrayAndMapFn = [
+                        arrayNode.range[1],
+                        mapFnNode.range[0],
+                    ];
+                    const afterMapFn = [
+                        mapFnNode.range[1],
+                        jsxExpressionContainerNode.range[1],
+                    ];
+                    // We can insert the <For /> component
+                    return [
+                        fixer.replaceTextRange(beforeArray, "<For each={"),
+                        fixer.replaceTextRange(betweenArrayAndMapFn, "}>{"),
+                        fixer.replaceTextRange(afterMapFn, "}</For>"),
+                    ];
+                },
+            });
+        };
+        return {
+            CallExpression(node) {
+                const callOrChain =
+                    node.parent?.type === "ChainExpression"
+                        ? node.parent
+                        : node;
+                if (
+                    callOrChain.parent?.type === "JSXExpressionContainer" &&
+                    isJSXElementOrFragment(callOrChain.parent.parent)
+                ) {
+                    // check for Array.prototype.map in JSX
+                    if (
+                        node.callee.type === "MemberExpression" &&
+                        getPropertyName(node.callee) === "map" &&
+                        node.arguments.length === 1 && // passing thisArg to Array.prototype.map is rare, deopt in that case
+                        isFunctionNode(node.arguments[0])
+                    ) {
+                        const mapFnNode = node.arguments[0];
+                        if (
+                            mapFnNode.params.length === 1 &&
+                            mapFnNode.params[0].type !== "RestElement"
+                        ) {
+                            // The map fn doesn't take an index param, so it can't possibly be an index-keyed list. Use <For />.
+                            // The returned JSX, if it's coming from React, will have an unnecessary `key` prop to be removed in
+                            // the useless-keys rule.
+                            reportPreferFor(node);
+                        } else {
+                            // Too many possible solutions to make a suggestion or fix
+                            context.report({
+                                node,
+                                messageId: "preferForOrIndex",
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+});

package/src/rules/prefer_show.mjs

@@ -0,0 +1,92 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { getSourceCode } from "../compat.mjs";
+import { isJSXElementOrFragment } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const EXPENSIVE_TYPES = ["JSXElement", "JSXFragment", "Identifier"];
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Enforce using Solid's `<Show />` component for conditionally showing content. Solid's compiler covers this case, so it's a stylistic rule only.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/prefer-show.md",
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            preferShowAnd:
+                "Use Solid's `<Show />` component for conditionally showing content.",
+            preferShowTernary:
+                "Use Solid's `<Show />` component for conditionally showing content with a fallback.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const sourceCode = getSourceCode(context);
+        const putIntoJSX = (node) => {
+            const text = sourceCode.getText(node);
+            return isJSXElementOrFragment(node) ? text : `{${text}}`;
+        };
+        const logicalExpressionHandler = (node) => {
+            if (
+                node.operator === "&&" &&
+                EXPENSIVE_TYPES.includes(node.right.type)
+            ) {
+                context.report({
+                    node,
+                    messageId: "preferShowAnd",
+                    fix: (fixer) =>
+                        fixer.replaceText(
+                            node.parent?.type === "JSXExpressionContainer" &&
+                                isJSXElementOrFragment(node.parent.parent)
+                                ? node.parent
+                                : node,
+                            `<Show when={${sourceCode.getText(node.left)}}>${putIntoJSX(node.right)}</Show>`,
+                        ),
+                });
+            }
+        };
+        const conditionalExpressionHandler = (node) => {
+            if (
+                EXPENSIVE_TYPES.includes(node.consequent.type) ||
+                EXPENSIVE_TYPES.includes(node.alternate.type)
+            ) {
+                context.report({
+                    node,
+                    messageId: "preferShowTernary",
+                    fix: (fixer) =>
+                        fixer.replaceText(
+                            node.parent?.type === "JSXExpressionContainer" &&
+                                isJSXElementOrFragment(node.parent.parent)
+                                ? node.parent
+                                : node,
+                            `<Show when={${sourceCode.getText(node.test)}} fallback={${sourceCode.getText(node.alternate)}}>${putIntoJSX(node.consequent)}</Show>`,
+                        ),
+                });
+            }
+        };
+        return {
+            JSXExpressionContainer(node) {
+                if (!isJSXElementOrFragment(node.parent)) {
+                    return;
+                }
+                if (node.expression.type === "LogicalExpression") {
+                    logicalExpressionHandler(node.expression);
+                } else if (
+                    node.expression.type === "ArrowFunctionExpression" &&
+                    node.expression.body.type === "LogicalExpression"
+                ) {
+                    logicalExpressionHandler(node.expression.body);
+                } else if (node.expression.type === "ConditionalExpression") {
+                    conditionalExpressionHandler(node.expression);
+                } else if (
+                    node.expression.type === "ArrowFunctionExpression" &&
+                    node.expression.body.type === "ConditionalExpression"
+                ) {
+                    conditionalExpressionHandler(node.expression.body);
+                }
+            },
+        };
+    },
+});