@murky-web/oxlint-plugin-solid 0.0.1

package/src/rules/event_handlers.mjs

@@ -0,0 +1,298 @@
+import { ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
+
+import { getScope, getSourceCode } from "../compat.mjs";
+import { isDOMElementName } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getStaticValue } = ASTUtils;
+const COMMON_EVENTS = [
+    "onAnimationEnd",
+    "onAnimationIteration",
+    "onAnimationStart",
+    "onBeforeInput",
+    "onBlur",
+    "onChange",
+    "onClick",
+    "onContextMenu",
+    "onCopy",
+    "onCut",
+    "onDblClick",
+    "onDrag",
+    "onDragEnd",
+    "onDragEnter",
+    "onDragExit",
+    "onDragLeave",
+    "onDragOver",
+    "onDragStart",
+    "onDrop",
+    "onError",
+    "onFocus",
+    "onFocusIn",
+    "onFocusOut",
+    "onGotPointerCapture",
+    "onInput",
+    "onInvalid",
+    "onKeyDown",
+    "onKeyPress",
+    "onKeyUp",
+    "onLoad",
+    "onLostPointerCapture",
+    "onMouseDown",
+    "onMouseEnter",
+    "onMouseLeave",
+    "onMouseMove",
+    "onMouseOut",
+    "onMouseOver",
+    "onMouseUp",
+    "onPaste",
+    "onPointerCancel",
+    "onPointerDown",
+    "onPointerEnter",
+    "onPointerLeave",
+    "onPointerMove",
+    "onPointerOut",
+    "onPointerOver",
+    "onPointerUp",
+    "onReset",
+    "onScroll",
+    "onSelect",
+    "onSubmit",
+    "onToggle",
+    "onTouchCancel",
+    "onTouchEnd",
+    "onTouchMove",
+    "onTouchStart",
+    "onTransitionEnd",
+    "onWheel",
+];
+const COMMON_EVENTS_MAP = new Map(
+    (function* () {
+        for (const event of COMMON_EVENTS) {
+            yield [event.toLowerCase(), event];
+        }
+    })(),
+);
+const NONSTANDARD_EVENTS_MAP = {
+    ondoubleclick: "onDblClick",
+};
+const isCommonHandlerName = (lowercaseHandlerName) =>
+    COMMON_EVENTS_MAP.has(lowercaseHandlerName);
+const getCommonEventHandlerName = (lowercaseHandlerName) =>
+    COMMON_EVENTS_MAP.get(lowercaseHandlerName);
+const isNonstandardEventName = (lowercaseEventName) =>
+    Boolean(NONSTANDARD_EVENTS_MAP[lowercaseEventName]);
+const getStandardEventHandlerName = (lowercaseEventName) =>
+    NONSTANDARD_EVENTS_MAP[lowercaseEventName];
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Enforce naming DOM element event handlers consistently and prevent Solid's analysis from misunderstanding whether a prop should be an event handler.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/event-handlers.md",
+        },
+        fixable: "code",
+        hasSuggestions: true,
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    ignoreCase: {
+                        type: "boolean",
+                        description:
+                            "if true, don't warn on ambiguously named event handlers like `onclick` or `onchange`",
+                        default: false,
+                    },
+                    warnOnSpread: {
+                        type: "boolean",
+                        description:
+                            "if true, warn when spreading event handlers onto JSX. Enable for Solid < v1.6.",
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            "detected-attr":
+                'The {{name}} prop is named as an event handler (starts with "on"), but Solid knows its value ({{staticValue}}) is a string or number, so it will be treated as an attribute. If this is intentional, name this prop attr:{{name}}.',
+            naming: "The {{name}} prop is ambiguous. If it is an event handler, change it to {{handlerName}}. If it is an attribute, change it to {{attrName}}.",
+            capitalization:
+                "The {{name}} prop should be renamed to {{fixedName}} for readability.",
+            nonstandard:
+                "The {{name}} prop should be renamed to {{fixedName}}, because it's not a standard event handler.",
+            "make-handler": "Change the {{name}} prop to {{handlerName}}.",
+            "make-attr": "Change the {{name}} prop to {{attrName}}.",
+            "spread-handler":
+                "The {{name}} prop should be added as a JSX attribute, not spread in. Solid doesn't add listeners when spreading into JSX.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const sourceCode = getSourceCode(context);
+        return {
+            JSXAttribute(node) {
+                const openingElement = node.parent;
+                if (
+                    openingElement.name.type !== "JSXIdentifier" ||
+                    !isDOMElementName(openingElement.name.name)
+                ) {
+                    return; // bail if this is not a DOM/SVG element or web component
+                }
+                if (node.name.type === "JSXNamespacedName") {
+                    return; // bail early on attr:, on:, oncapture:, etc. props
+                }
+                // string name of the name node
+                const { name } = node.name;
+                if (!/^on[a-zA-Z]/.test(name)) {
+                    return; // bail if Solid doesn't consider the prop name an event handler
+                }
+                let staticValue = null;
+                if (
+                    node.value?.type === "JSXExpressionContainer" &&
+                    node.value.expression.type !== "JSXEmptyExpression" &&
+                    node.value.expression.type !== "ArrayExpression" && // array syntax prevents inlining
+                    (staticValue = getStaticValue(
+                        node.value.expression,
+                        getScope(context, node),
+                    )) !== null &&
+                    (typeof staticValue.value === "string" ||
+                        typeof staticValue.value === "number")
+                ) {
+                    // One of the first things Solid (actually babel-plugin-dom-expressions) does with an
+                    // attribute is determine if it can be inlined into a template string instead of
+                    // injected programmatically. It runs
+                    // `attribute.get("value").get("expression").evaluate().value` on attributes with
+                    // JSXExpressionContainers, and if the statically evaluated value is a string or number,
+                    // it inlines it. This runs even for attributes that follow the naming convention for
+                    // event handlers. By starting an attribute name with "on", the user has signalled that
+                    // they intend the attribute to be an event handler. If the attribute value would be
+                    // inlined, report that.
+                    // https://github.com/ryansolid/dom-expressions/blob/cb3be7558c731e2a442e9c7e07d25373c40cf2be/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js#L347
+                    context.report({
+                        node,
+                        messageId: "detected-attr",
+                        data: {
+                            name,
+                            staticValue: staticValue.value,
+                        },
+                    });
+                } else if (
+                    node.value === null ||
+                    node.value?.type === "Literal"
+                ) {
+                    // Check for same as above for literal values
+                    context.report({
+                        node,
+                        messageId: "detected-attr",
+                        data: {
+                            name,
+                            staticValue:
+                                node.value !== null ? node.value.value : true,
+                        },
+                    });
+                } else if (!context.options[0]?.ignoreCase) {
+                    const lowercaseHandlerName = name.toLowerCase();
+                    if (isNonstandardEventName(lowercaseHandlerName)) {
+                        const fixedName =
+                            getStandardEventHandlerName(lowercaseHandlerName);
+                        context.report({
+                            node: node.name,
+                            messageId: "nonstandard",
+                            data: { name, fixedName },
+                            fix: (fixer) =>
+                                fixer.replaceText(node.name, fixedName),
+                        });
+                    } else if (isCommonHandlerName(lowercaseHandlerName)) {
+                        const fixedName =
+                            getCommonEventHandlerName(lowercaseHandlerName);
+                        if (fixedName !== name) {
+                            // For common DOM event names, we know the user intended the prop to be an event handler.
+                            // Fix it to have an uppercase third letter and be properly camel-cased.
+                            context.report({
+                                node: node.name,
+                                messageId: "capitalization",
+                                data: { name, fixedName },
+                                fix: (fixer) =>
+                                    fixer.replaceText(node.name, fixedName),
+                            });
+                        }
+                    } else if (name[2] === name[2].toLowerCase()) {
+                        // this includes words like `only` and `ongoing` as well as unknown handlers like `onfoobar`.
+                        // Enforce using either /^on[A-Z]/ (event handler) or /^attr:on[a-z]/ (forced regular attribute)
+                        // to make user intent clear and code maximally readable
+                        const handlerName = `on${name[2].toUpperCase()}${name.slice(3)}`;
+                        const attrName = `attr:${name}`;
+                        context.report({
+                            node: node.name,
+                            messageId: "naming",
+                            data: { name, attrName, handlerName },
+                            suggest: [
+                                {
+                                    messageId: "make-handler",
+                                    data: { name, handlerName },
+                                    fix: (fixer) =>
+                                        fixer.replaceText(
+                                            node.name,
+                                            handlerName,
+                                        ),
+                                },
+                                {
+                                    messageId: "make-attr",
+                                    data: { name, attrName },
+                                    fix: (fixer) =>
+                                        fixer.replaceText(node.name, attrName),
+                                },
+                            ],
+                        });
+                    }
+                }
+            },
+            Property(node) {
+                if (
+                    context.options[0]?.warnOnSpread &&
+                    node.parent?.type === "ObjectExpression" &&
+                    node.parent.parent?.type === "JSXSpreadAttribute" &&
+                    node.parent.parent.parent?.type === "JSXOpeningElement"
+                ) {
+                    const openingElement = node.parent.parent.parent;
+                    if (
+                        openingElement.name.type === "JSXIdentifier" &&
+                        isDOMElementName(openingElement.name.name)
+                    ) {
+                        if (
+                            node.key.type === "Identifier" &&
+                            node.key.name.startsWith("on")
+                        ) {
+                            const handlerName = node.key.name;
+                            // An event handler is being spread in (ex. <button {...{ onClick }} />), which doesn't
+                            // actually add an event listener, just a plain attribute.
+                            context.report({
+                                node,
+                                messageId: "spread-handler",
+                                data: {
+                                    name: node.key.name,
+                                },
+                                *fix(fixer) {
+                                    const commaAfter =
+                                        sourceCode.getTokenAfter(node);
+                                    yield fixer.remove(
+                                        node.parent.properties.length === 1
+                                            ? node.parent.parent
+                                            : node,
+                                    );
+                                    if (commaAfter?.value === ",") {
+                                        yield fixer.remove(commaAfter);
+                                    }
+                                    yield fixer.insertTextAfter(
+                                        node.parent.parent,
+                                        ` ${handlerName}={${sourceCode.getText(node.value)}}`,
+                                    );
+                                },
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+});

package/src/rules/imports.mjs

@@ -0,0 +1,205 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { getSourceCode } from "../compat.mjs";
+import { appendImports, insertImports, removeSpecifier } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+// Set up map of imports to module
+const primitiveMap = new Map();
+for (const primitive of [
+    "createSignal",
+    "createEffect",
+    "createMemo",
+    "createResource",
+    "onMount",
+    "onCleanup",
+    "onError",
+    "untrack",
+    "batch",
+    "on",
+    "createRoot",
+    "getOwner",
+    "runWithOwner",
+    "mergeProps",
+    "splitProps",
+    "useTransition",
+    "observable",
+    "from",
+    "mapArray",
+    "indexArray",
+    "createContext",
+    "useContext",
+    "children",
+    "lazy",
+    "createUniqueId",
+    "createDeferred",
+    "createRenderEffect",
+    "createComputed",
+    "createReaction",
+    "createSelector",
+    "DEV",
+    "For",
+    "Show",
+    "Switch",
+    "Match",
+    "Index",
+    "ErrorBoundary",
+    "Suspense",
+    "SuspenseList",
+]) {
+    primitiveMap.set(primitive, "solid-js");
+}
+for (const primitive of [
+    "Portal",
+    "render",
+    "hydrate",
+    "renderToString",
+    "renderToStream",
+    "isServer",
+    "renderToStringAsync",
+    "generateHydrationScript",
+    "HydrationScript",
+    "Dynamic",
+]) {
+    primitiveMap.set(primitive, "solid-js/web");
+}
+for (const primitive of [
+    "createStore",
+    "produce",
+    "reconcile",
+    "unwrap",
+    "createMutable",
+    "modifyMutable",
+]) {
+    primitiveMap.set(primitive, "solid-js/store");
+}
+// Set up map of type imports to module
+const typeMap = new Map();
+for (const type of [
+    "Signal",
+    "Accessor",
+    "Setter",
+    "Resource",
+    "ResourceActions",
+    "ResourceOptions",
+    "ResourceReturn",
+    "ResourceFetcher",
+    "InitializedResourceReturn",
+    "Component",
+    "VoidProps",
+    "VoidComponent",
+    "ParentProps",
+    "ParentComponent",
+    "FlowProps",
+    "FlowComponent",
+    "ValidComponent",
+    "ComponentProps",
+    "Ref",
+    "MergeProps",
+    "SplitPrips",
+    "Context",
+    "JSX",
+    "ResolvedChildren",
+    "MatchProps",
+]) {
+    typeMap.set(type, "solid-js");
+}
+for (const type of [/* "JSX", */ "MountableElement"]) {
+    typeMap.set(type, "solid-js/web");
+}
+for (const type of ["StoreNode", "Store", "SetStoreFunction"]) {
+    typeMap.set(type, "solid-js/store");
+}
+const sourceRegex = /^solid-js(?:\/web|\/store)?$/;
+const isSource = (source) => sourceRegex.test(source);
+export default createRule({
+    meta: {
+        type: "suggestion",
+        docs: {
+            description:
+                'Enforce consistent imports from "solid-js", "solid-js/web", and "solid-js/store".',
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/imports.md",
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            "prefer-source": 'Prefer importing {{name}} from "{{source}}".',
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        return {
+            ImportDeclaration(node) {
+                const source = node.source.value;
+                if (!isSource(source)) return;
+                for (const specifier of node.specifiers) {
+                    if (specifier.type === "ImportSpecifier") {
+                        const isType =
+                            specifier.importKind === "type" ||
+                            node.importKind === "type";
+                        const map = isType ? typeMap : primitiveMap;
+                        const correctSource = map.get(specifier.imported.name);
+                        if (correctSource != null && correctSource !== source) {
+                            context.report({
+                                node: specifier,
+                                messageId: "prefer-source",
+                                data: {
+                                    name: specifier.imported.name,
+                                    source: correctSource,
+                                },
+                                fix(fixer) {
+                                    const sourceCode = getSourceCode(context);
+                                    const program = sourceCode.ast;
+                                    const correctDeclaration =
+                                        program.body.find(
+                                            (node) =>
+                                                node.type ===
+                                                    "ImportDeclaration" &&
+                                                node.source.value ===
+                                                    correctSource,
+                                        );
+                                    if (correctDeclaration) {
+                                        return [
+                                            removeSpecifier(
+                                                fixer,
+                                                sourceCode,
+                                                specifier,
+                                            ),
+                                            appendImports(
+                                                fixer,
+                                                sourceCode,
+                                                correctDeclaration,
+                                                [sourceCode.getText(specifier)],
+                                            ),
+                                        ].filter(Boolean);
+                                    }
+                                    const firstSolidDeclaration =
+                                        program.body.find(
+                                            (node) =>
+                                                node.type ===
+                                                    "ImportDeclaration" &&
+                                                isSource(node.source.value),
+                                        );
+                                    return [
+                                        removeSpecifier(
+                                            fixer,
+                                            sourceCode,
+                                            specifier,
+                                        ),
+                                        insertImports(
+                                            fixer,
+                                            sourceCode,
+                                            correctSource,
+                                            [sourceCode.getText(specifier)],
+                                            firstSolidDeclaration,
+                                            isType,
+                                        ),
+                                    ];
+                                },
+                            });
+                        }
+                    }
+                }
+            },
+        };
+    },
+});

package/src/rules/jsx_no_duplicate_props.mjs

@@ -0,0 +1,87 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { jsxGetAllProps } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description: "Disallow passing the same prop twice in JSX.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/jsx-no-duplicate-props.md",
+        },
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    ignoreCase: {
+                        type: "boolean",
+                        description:
+                            "Consider two prop names differing only by case to be the same.",
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            noDuplicateProps: "Duplicate props are not allowed.",
+            noDuplicateClass:
+                "Duplicate `class` props are not allowed; while it might seem to work, it can break unexpectedly. Use `classList` instead.",
+            noDuplicateChildren:
+                "Using {{used}} at the same time is not allowed.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        return {
+            JSXOpeningElement(node) {
+                const ignoreCase = context.options[0]?.ignoreCase ?? false;
+                const props = new Set();
+                const checkPropName = (name, node) => {
+                    if (ignoreCase || name.startsWith("on")) {
+                        name = name
+                            .toLowerCase()
+                            .replace(/^on(?:capture)?:/, "on")
+                            .replace(/^(?:attr|prop):/, "");
+                    }
+                    if (props.has(name)) {
+                        context.report({
+                            node,
+                            messageId:
+                                name === "class"
+                                    ? "noDuplicateClass"
+                                    : "noDuplicateProps",
+                        });
+                    }
+                    props.add(name);
+                };
+                for (const [name, propNode] of jsxGetAllProps(
+                    node.attributes,
+                )) {
+                    checkPropName(name, propNode);
+                }
+                const hasChildrenProp = props.has("children");
+                const hasChildren = node.parent.children.length > 0;
+                const hasInnerHTML =
+                    props.has("innerHTML") || props.has("innerhtml");
+                const hasTextContent =
+                    props.has("textContent") || props.has("textContent");
+                const used = [
+                    hasChildrenProp && "`props.children`",
+                    hasChildren && "JSX children",
+                    hasInnerHTML && "`props.innerHTML`",
+                    hasTextContent && "`props.textContent`",
+                ].filter(Boolean);
+                if (used.length > 1) {
+                    context.report({
+                        node,
+                        messageId: "noDuplicateChildren",
+                        data: {
+                            used: used.join(", "),
+                        },
+                    });
+                }
+            },
+        };
+    },
+});

package/src/rules/jsx_no_script_url.mjs

@@ -0,0 +1,54 @@
+import { ASTUtils, ESLintUtils } from "@typescript-eslint/utils";
+
+import { getScope } from "../compat.mjs";
+
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getStaticValue } = ASTUtils;
+const JAVASCRIPT_PROTOCOL_PATTERN =
+    "^[\\\\u0000-\\\\u001F ]*j[\\\\r\\\\n\\\\t]*a[\\\\r\\\\n\\\\t]*v[\\\\r\\\\n\\\\t]*a[\\\\r\\\\n\\\\t]*s[\\\\r\\\\n\\\\t]*c[\\\\r\\\\n\\\\t]*r[\\\\r\\\\n\\\\t]*i[\\\\r\\\\n\\\\t]*p[\\\\r\\\\n\\\\t]*t[\\\\r\\\\n\\\\t]*:";
+const JAVASCRIPT_PROTOCOL_REGEX = new RegExp(JAVASCRIPT_PROTOCOL_PATTERN, "i");
+
+export const jsxNoScriptUrlRule = createRule({
+    meta: {
+        docs: {
+            description: "Disallow javascript: URLs.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/jsx-no-script-url.md",
+        },
+        messages: {
+            noJSURL:
+                "For security, don't use javascript: URLs. Use event handlers instead if you can.",
+        },
+        schema: [],
+        type: "problem",
+    },
+    defaultOptions: [],
+    create(context) {
+        return {
+            JSXAttribute(node) {
+                if (node.name.type !== "JSXIdentifier" || !node.value) {
+                    return;
+                }
+
+                const expression =
+                    node.value.type === "JSXExpressionContainer"
+                        ? node.value.expression
+                        : node.value;
+                const staticValue = getStaticValue(
+                    expression,
+                    getScope(context, node),
+                );
+
+                if (
+                    staticValue &&
+                    typeof staticValue.value === "string" &&
+                    JAVASCRIPT_PROTOCOL_REGEX.test(staticValue.value)
+                ) {
+                    context.report({
+                        messageId: "noJSURL",
+                        node: node.value,
+                    });
+                }
+            },
+        };
+    },
+});