@murky-web/oxlint-plugin-solid 0.0.1

package/src/rules/jsx_no_undef.mjs

@@ -0,0 +1,217 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { getScope, getSourceCode } from "../compat.mjs";
+import {
+    isDOMElementName,
+    formatList,
+    appendImports,
+    insertImports,
+} from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+// Currently all of the control flow components are from 'solid-js'.
+const AUTO_COMPONENTS = ["Show", "For", "Index", "Switch", "Match"];
+const SOURCE_MODULE = "solid-js";
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Disallow references to undefined variables in JSX. Handles custom directives.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/jsx-no-undef.md",
+        },
+        fixable: "code",
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    allowGlobals: {
+                        type: "boolean",
+                        description:
+                            "When true, the rule will consider the global scope when checking for defined components.",
+                        default: false,
+                    },
+                    autoImport: {
+                        type: "boolean",
+                        description:
+                            'Automatically import certain components from `"solid-js"` if they are undefined.',
+                        default: true,
+                    },
+                    typescriptEnabled: {
+                        type: "boolean",
+                        description:
+                            "Adjusts behavior not to conflict with TypeScript's type checking.",
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            undefined: "'{{identifier}}' is not defined.",
+            customDirectiveUndefined:
+                "Custom directive '{{identifier}}' is not defined.",
+            autoImport: "{{imports}} should be imported from '{{source}}'.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const allowGlobals = context.options[0]?.allowGlobals ?? false;
+        const autoImport = context.options[0]?.autoImport !== false;
+        const isTypeScriptEnabled =
+            context.options[0]?.typescriptEnabled ?? false;
+        const missingComponentsSet = new Set();
+        /**
+         * Compare an identifier with the variables declared in the scope
+         * @param {ASTNode} node - Identifier or JSXIdentifier node
+         * @returns {void}
+         */
+        function checkIdentifierInJSX(
+            node,
+            { isComponent, isCustomDirective } = {},
+        ) {
+            let scope = getScope(context, node);
+            const sourceCode = getSourceCode(context);
+            const sourceType = sourceCode.ast.sourceType;
+            const scopeUpperBound =
+                !allowGlobals && sourceType === "module" ? "module" : "global";
+            const variables = [...scope.variables];
+            // Ignore 'this' keyword (also maked as JSXIdentifier when used in JSX)
+            if (node.name === "this") {
+                return;
+            }
+            while (
+                scope.type !== scopeUpperBound &&
+                scope.type !== "global" &&
+                scope.upper
+            ) {
+                scope = scope.upper;
+                variables.push(...scope.variables);
+            }
+            if (scope.childScopes.length) {
+                variables.push(...scope.childScopes[0].variables);
+                // Temporary fix for babel-eslint
+                if (scope.childScopes[0].childScopes.length) {
+                    variables.push(
+                        ...scope.childScopes[0].childScopes[0].variables,
+                    );
+                }
+            }
+            if (variables.find((variable) => variable.name === node.name)) {
+                return;
+            }
+            if (
+                isComponent &&
+                autoImport &&
+                AUTO_COMPONENTS.includes(node.name) &&
+                !missingComponentsSet.has(node.name)
+            ) {
+                // track which names are undefined
+                missingComponentsSet.add(node.name);
+            } else if (isCustomDirective) {
+                context.report({
+                    node,
+                    messageId: "customDirectiveUndefined",
+                    data: {
+                        identifier: node.name,
+                    },
+                });
+            } else if (!isTypeScriptEnabled) {
+                context.report({
+                    node,
+                    messageId: "undefined",
+                    data: {
+                        identifier: node.name,
+                    },
+                });
+            }
+        }
+        return {
+            JSXOpeningElement(node) {
+                let n;
+                switch (node.name.type) {
+                    case "JSXIdentifier":
+                        if (!isDOMElementName(node.name.name)) {
+                            checkIdentifierInJSX(node.name, {
+                                isComponent: true,
+                            });
+                        }
+                        break;
+                    case "JSXMemberExpression":
+                        n = node.name;
+                        do {
+                            n = n.object;
+                        } while (n && n.type !== "JSXIdentifier");
+                        if (n) {
+                            checkIdentifierInJSX(n);
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            },
+            "JSXAttribute > JSXNamespacedName": (node) => {
+                // <Element use:X /> applies the `X` custom directive to the element, where `X` must be an identifier in scope.
+                if (
+                    node.namespace?.type === "JSXIdentifier" &&
+                    node.namespace.name === "use" &&
+                    node.name?.type === "JSXIdentifier"
+                ) {
+                    checkIdentifierInJSX(node.name, {
+                        isCustomDirective: true,
+                    });
+                }
+            },
+            "Program:exit": (programNode) => {
+                // add in any auto import components used in the program
+                const missingComponents = Array.from(
+                    missingComponentsSet.values(),
+                );
+                if (autoImport && missingComponents.length) {
+                    const importNode = programNode.body.find(
+                        (n) =>
+                            n.type === "ImportDeclaration" &&
+                            n.importKind !== "type" &&
+                            n.source.type === "Literal" &&
+                            n.source.value === SOURCE_MODULE,
+                    );
+                    if (importNode) {
+                        context.report({
+                            node: importNode,
+                            messageId: "autoImport",
+                            data: {
+                                imports: formatList(missingComponents), // "Show, For, and Switch"
+                                source: SOURCE_MODULE,
+                            },
+                            fix: (fixer) => {
+                                return appendImports(
+                                    fixer,
+                                    getSourceCode(context),
+                                    importNode,
+                                    missingComponents,
+                                );
+                            },
+                        });
+                    } else {
+                        context.report({
+                            node: programNode,
+                            messageId: "autoImport",
+                            data: {
+                                imports: formatList(missingComponents),
+                                source: SOURCE_MODULE,
+                            },
+                            fix: (fixer) => {
+                                // insert `import { missing, identifiers } from "solid-js"` at top of module
+                                return insertImports(
+                                    fixer,
+                                    getSourceCode(context),
+                                    "solid-js",
+                                    missingComponents,
+                                );
+                            },
+                        });
+                    }
+                }
+            },
+        };
+    },
+});

package/src/rules/jsx_uses_vars.mjs

@@ -0,0 +1,55 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { markVariableAsUsed } from "../compat.mjs";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+export const jsxUsesVarsRule = createRule({
+    meta: {
+        docs: {
+            description:
+                "Prevent variables used in JSX from being marked as unused.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/jsx-uses-vars.md",
+        },
+        messages: {},
+        schema: [],
+        type: "problem",
+    },
+    defaultOptions: [],
+    create(context) {
+        return {
+            JSXOpeningElement(node) {
+                let parent = null;
+
+                switch (node.name.type) {
+                    case "JSXNamespacedName":
+                        return;
+                    case "JSXIdentifier":
+                        markVariableAsUsed(context, node.name.name, node.name);
+                        return;
+                    case "JSXMemberExpression":
+                        parent = node.name.object;
+                        while (parent?.type === "JSXMemberExpression") {
+                            parent = parent.object;
+                        }
+
+                        if (parent?.type === "JSXIdentifier") {
+                            markVariableAsUsed(context, parent.name, parent);
+                        }
+                        return;
+                    default:
+                        return;
+                }
+            },
+            "JSXAttribute > JSXNamespacedName"(node) {
+                if (
+                    node.namespace?.type === "JSXIdentifier" &&
+                    node.namespace.name === "use" &&
+                    node.name?.type === "JSXIdentifier"
+                ) {
+                    markVariableAsUsed(context, node.name.name, node.name);
+                }
+            },
+        };
+    },
+});

package/src/rules/no_array_handlers.mjs

@@ -0,0 +1,53 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { isDOMElementName, trace } from "../utils.mjs";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+
+export const noArrayHandlersRule = createRule({
+    meta: {
+        docs: {
+            description: "Disallow usage of type-unsafe event handlers.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-array-handlers.md",
+        },
+        messages: {
+            noArrayHandlers:
+                "Passing an array as an event handler is potentially type-unsafe.",
+        },
+        schema: [],
+        type: "problem",
+    },
+    defaultOptions: [],
+    create(context) {
+        return {
+            JSXAttribute(node) {
+                const openingElement = node.parent;
+                if (
+                    openingElement.name.type !== "JSXIdentifier" ||
+                    !isDOMElementName(openingElement.name.name)
+                ) {
+                    return;
+                }
+
+                const isNamespacedHandler =
+                    node.name.type === "JSXNamespacedName" &&
+                    node.name.namespace.name === "on";
+                const isNormalEventHandler =
+                    node.name.type === "JSXIdentifier" &&
+                    /^on[a-zA-Z]/.test(node.name.name);
+
+                if (
+                    (isNamespacedHandler || isNormalEventHandler) &&
+                    node.value?.type === "JSXExpressionContainer" &&
+                    trace(node.value.expression, context).type ===
+                        "ArrayExpression"
+                ) {
+                    context.report({
+                        messageId: "noArrayHandlers",
+                        node,
+                    });
+                }
+            },
+        };
+    },
+});

package/src/rules/no_destructure.mjs

@@ -0,0 +1,210 @@
+import { ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
+
+import { getSourceCode } from "../compat.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getStringIfConstant } = ASTUtils;
+const getName = (node) => {
+    switch (node.type) {
+        case "Literal":
+            return typeof node.value === "string" ? node.value : null;
+        case "Identifier":
+            return node.name;
+        case "AssignmentPattern":
+            return getName(node.left);
+        default:
+            return getStringIfConstant(node);
+    }
+};
+// Given ({ 'hello-world': helloWorld = 5 }), returns { real: Literal('hello-world'), var: 'helloWorld', computed: false, init: Literal(5) }
+const getPropertyInfo = (prop) => {
+    const valueName = getName(prop.value);
+    if (valueName !== null) {
+        return {
+            real: prop.key,
+            var: valueName,
+            computed: prop.computed,
+            init:
+                prop.value.type === "AssignmentPattern"
+                    ? prop.value.right
+                    : undefined,
+        };
+    } else {
+        return null;
+    }
+};
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Disallow destructuring props. In Solid, props must be used with property accesses (`props.foo`) to preserve reactivity. This rule only tracks destructuring in the parameter list.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-destructure.md",
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            noDestructure:
+                "Destructuring component props breaks Solid's reactivity; use property access instead.",
+            // noWriteToProps: "Component props are readonly, writing to props is not supported.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const functionStack = [];
+        const currentFunction = () => functionStack[functionStack.length - 1];
+        const onFunctionEnter = () => {
+            functionStack.push({ hasJSX: false });
+        };
+        const onFunctionExit = (node) => {
+            if (node.params.length === 1) {
+                const props = node.params[0];
+                if (
+                    props.type === "ObjectPattern" &&
+                    currentFunction().hasJSX &&
+                    node.parent?.type !== "JSXExpressionContainer" // "render props" aren't components
+                ) {
+                    // Props are destructured in the function params, not the body. We actually don't
+                    // need to handle the case where props are destructured in the body, because that
+                    // will be a violation of "solid/reactivity".
+                    context.report({
+                        node: props,
+                        messageId: "noDestructure",
+                        fix: (fixer) => fixDestructure(node, props, fixer),
+                    });
+                }
+            }
+            // Pop on exit
+            functionStack.pop();
+        };
+        function* fixDestructure(func, props, fixer) {
+            const propsName = "props";
+            const properties = props.properties;
+            const propertyInfo = [];
+            let rest = null;
+            for (const property of properties) {
+                if (property.type === "RestElement") {
+                    rest = property;
+                } else {
+                    const info = getPropertyInfo(property);
+                    if (info === null) {
+                        continue;
+                    }
+                    propertyInfo.push(info);
+                }
+            }
+            const hasDefaults = propertyInfo.some((info) => info.init);
+            // Replace destructured props with a `props` identifier (`_props` in case of rest params/defaults)
+            const origProps = !(hasDefaults || rest)
+                ? propsName
+                : "_" + propsName;
+            if (props.typeAnnotation) {
+                // in `{ prop1, prop2 }: Props`, leave `: Props` alone
+                const range = [props.range[0], props.typeAnnotation.range[0]];
+                yield fixer.replaceTextRange(range, origProps);
+            } else {
+                yield fixer.replaceText(props, origProps);
+            }
+            const sourceCode = getSourceCode(context);
+            const defaultsObjectString = () =>
+                propertyInfo
+                    .filter((info) => info.init)
+                    .map(
+                        (info) =>
+                            `${info.computed ? "[" : ""}${sourceCode.getText(info.real)}${info.computed ? "]" : ""}: ${sourceCode.getText(info.init)}`,
+                    )
+                    .join(", ");
+            const splitPropsArray = () =>
+                `[${propertyInfo
+                    .map((info) =>
+                        info.real.type === "Identifier"
+                            ? JSON.stringify(info.real.name)
+                            : sourceCode.getText(info.real),
+                    )
+                    .join(", ")}]`;
+            let lineToInsert = "";
+            if (hasDefaults && rest) {
+                // Insert a line that assigns _props
+                lineToInsert = `  const [${propsName}, ${(rest.argument.type === "Identifier" && rest.argument.name) || "rest"}] = splitProps(mergeProps({ ${defaultsObjectString()} }, ${origProps}), ${splitPropsArray()});`;
+            } else if (hasDefaults) {
+                // Insert a line that assigns _props merged with defaults to props
+                lineToInsert = `  const ${propsName} = mergeProps({ ${defaultsObjectString()} }, ${origProps});\n`;
+            } else if (rest) {
+                // Insert a line that keeps named props and extracts the rest into a new reactive rest object
+                lineToInsert = `  const [${propsName}, ${(rest.argument.type === "Identifier" && rest.argument.name) || "rest"}] = splitProps(${origProps}, ${splitPropsArray()});\n`;
+            }
+            if (lineToInsert) {
+                const body = func.body;
+                if (body.type === "BlockStatement") {
+                    if (body.body.length > 0) {
+                        // Inject lines handling defaults/rest params before the first statement in the block.
+                        yield fixer.insertTextBefore(
+                            body.body[0],
+                            lineToInsert,
+                        );
+                    }
+                    // with an empty block statement body, no need to inject code
+                } else {
+                    // The function is an arrow function that implicitly returns an expression, possibly with wrapping parentheses.
+                    // These must be removed to convert the function body to a block statement for code injection.
+                    const maybeOpenParen = sourceCode.getTokenBefore(body);
+                    if (maybeOpenParen?.value === "(") {
+                        yield fixer.remove(maybeOpenParen);
+                    }
+                    const maybeCloseParen = sourceCode.getTokenAfter(body);
+                    if (maybeCloseParen?.value === ")") {
+                        yield fixer.remove(maybeCloseParen);
+                    }
+                    // Inject lines handling defaults/rest params
+                    yield fixer.insertTextBefore(
+                        body,
+                        `{\n${lineToInsert}  return (`,
+                    );
+                    yield fixer.insertTextAfter(body, `);\n}`);
+                }
+            }
+            const scope = sourceCode.scopeManager?.acquire(func);
+            if (scope) {
+                // iterate through destructured variables, associated with real node
+                for (const [info, variable] of propertyInfo.map((info) => [
+                    info,
+                    scope.set.get(info.var),
+                ])) {
+                    if (variable) {
+                        // replace all usages of the variable with props accesses
+                        for (const reference of variable.references) {
+                            if (reference.isReadOnly()) {
+                                const access =
+                                    info.real.type === "Identifier" &&
+                                    !info.computed
+                                        ? `.${info.real.name}`
+                                        : `[${sourceCode.getText(info.real)}]`;
+                                yield fixer.replaceText(
+                                    reference.identifier,
+                                    `${propsName}${access}`,
+                                );
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return {
+            FunctionDeclaration: onFunctionEnter,
+            FunctionExpression: onFunctionEnter,
+            ArrowFunctionExpression: onFunctionEnter,
+            "FunctionDeclaration:exit": onFunctionExit,
+            "FunctionExpression:exit": onFunctionExit,
+            "ArrowFunctionExpression:exit": onFunctionExit,
+            JSXElement() {
+                if (functionStack.length) {
+                    currentFunction().hasJSX = true;
+                }
+            },
+            JSXFragment() {
+                if (functionStack.length) {
+                    currentFunction().hasJSX = true;
+                }
+            },
+        };
+    },
+});

package/src/rules/no_innerhtml.mjs

@@ -0,0 +1,145 @@
+import { ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
+import isHtml from "is-html";
+
+import { jsxPropName } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getStringIfConstant } = ASTUtils;
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Disallow usage of the innerHTML attribute, which can often lead to security vulnerabilities.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/no-innerhtml.md",
+        },
+        fixable: "code",
+        hasSuggestions: true,
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    allowStatic: {
+                        description:
+                            "if the innerHTML value is guaranteed to be a static HTML string (i.e. no user input), allow it",
+                        type: "boolean",
+                        default: true,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            dangerous:
+                "The innerHTML attribute is dangerous; passing unsanitized input can lead to security vulnerabilities.",
+            conflict:
+                "The innerHTML attribute should not be used on an element with child elements; they will be overwritten.",
+            notHtml:
+                "The string passed to innerHTML does not appear to be valid HTML.",
+            useInnerText:
+                "For text content, using innerText is clearer and safer.",
+            dangerouslySetInnerHTML:
+                "The dangerouslySetInnerHTML prop is not supported; use innerHTML instead.",
+        },
+    },
+    defaultOptions: [{ allowStatic: true }],
+    create(context) {
+        const allowStatic = Boolean(context.options[0]?.allowStatic ?? true);
+        return {
+            JSXAttribute(node) {
+                if (jsxPropName(node) === "dangerouslySetInnerHTML") {
+                    if (
+                        node.value?.type === "JSXExpressionContainer" &&
+                        node.value.expression.type === "ObjectExpression" &&
+                        node.value.expression.properties.length === 1
+                    ) {
+                        const htmlProp = node.value.expression.properties[0];
+                        if (
+                            htmlProp.type === "Property" &&
+                            htmlProp.key.type === "Identifier" &&
+                            htmlProp.key.name === "__html"
+                        ) {
+                            context.report({
+                                node,
+                                messageId: "dangerouslySetInnerHTML",
+                                fix: (fixer) => {
+                                    const propRange = node.range;
+                                    const valueRange = htmlProp.value.range;
+                                    return [
+                                        fixer.replaceTextRange(
+                                            [propRange[0], valueRange[0]],
+                                            "innerHTML={",
+                                        ),
+                                        fixer.replaceTextRange(
+                                            [valueRange[1], propRange[1]],
+                                            "}",
+                                        ),
+                                    ];
+                                },
+                            });
+                        } else {
+                            context.report({
+                                node,
+                                messageId: "dangerouslySetInnerHTML",
+                            });
+                        }
+                    } else {
+                        context.report({
+                            node,
+                            messageId: "dangerouslySetInnerHTML",
+                        });
+                    }
+                    return;
+                } else if (jsxPropName(node) !== "innerHTML") {
+                    return;
+                }
+                if (allowStatic) {
+                    const innerHtmlNode =
+                        node.value?.type === "JSXExpressionContainer"
+                            ? node.value.expression
+                            : node.value;
+                    const innerHtml =
+                        innerHtmlNode && getStringIfConstant(innerHtmlNode);
+                    if (typeof innerHtml === "string") {
+                        if (isHtml(innerHtml)) {
+                            // go up to enclosing JSXElement and check if it has children
+                            if (
+                                node.parent?.parent?.type === "JSXElement" &&
+                                node.parent.parent.children?.length
+                            ) {
+                                context.report({
+                                    node: node.parent.parent, // report error on JSXElement instead of JSXAttribute
+                                    messageId: "conflict",
+                                });
+                            }
+                        } else {
+                            context.report({
+                                node,
+                                messageId: "notHtml",
+                                suggest: [
+                                    {
+                                        fix: (fixer) =>
+                                            fixer.replaceText(
+                                                node.name,
+                                                "innerText",
+                                            ),
+                                        messageId: "useInnerText",
+                                    },
+                                ],
+                            });
+                        }
+                    } else {
+                        context.report({
+                            node,
+                            messageId: "dangerous",
+                        });
+                    }
+                } else {
+                    context.report({
+                        node,
+                        messageId: "dangerous",
+                    });
+                }
+            },
+        };
+    },
+});