@murky-web/oxlint-plugin-solid 0.0.1

package/src/rules/self_closing_comp.mjs

@@ -0,0 +1,153 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { getSourceCode } from "../compat.mjs";
+import { isDOMElementName } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+function isComponent(node) {
+    return (
+        (node.name.type === "JSXIdentifier" &&
+            !isDOMElementName(node.name.name)) ||
+        node.name.type === "JSXMemberExpression"
+    );
+}
+const voidDOMElementRegex =
+    /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
+function isVoidDOMElementName(name) {
+    return voidDOMElementRegex.test(name);
+}
+function childrenIsEmpty(node) {
+    return node.parent.children.length === 0;
+}
+function childrenIsMultilineSpaces(node) {
+    const childrens = node.parent.children;
+    return (
+        childrens.length === 1 &&
+        childrens[0].type === "JSXText" &&
+        childrens[0].value.indexOf("\n") !== -1 &&
+        childrens[0].value.replace(/(?!\xA0)\s/g, "") === ""
+    );
+}
+/**
+ * This rule is adapted from eslint-plugin-react's self-closing-comp rule under the MIT license,
+ * with some enhancements. Thank you for your work!
+ */
+export default createRule({
+    meta: {
+        type: "layout",
+        docs: {
+            description:
+                "Disallow extra closing tags for components without children.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/self-closing-comp.md",
+        },
+        fixable: "code",
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    component: {
+                        type: "string",
+                        description:
+                            "which Solid components should be self-closing when possible",
+                        enum: ["all", "none"],
+                        default: "all",
+                    },
+                    html: {
+                        type: "string",
+                        description:
+                            "which native elements should be self-closing when possible",
+                        enum: ["all", "void", "none"],
+                        default: "all",
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            selfClose: "Empty components are self-closing.",
+            dontSelfClose: "This element should not be self-closing.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        function shouldBeSelfClosedWhenPossible(node) {
+            if (isComponent(node)) {
+                const whichComponents = context.options[0]?.component ?? "all";
+                return whichComponents === "all";
+            } else if (
+                node.name.type === "JSXIdentifier" &&
+                isDOMElementName(node.name.name)
+            ) {
+                const whichComponents = context.options[0]?.html ?? "all";
+                switch (whichComponents) {
+                    case "all":
+                        return true;
+                    case "void":
+                        return isVoidDOMElementName(node.name.name);
+                    case "none":
+                        return false;
+                }
+            }
+            return true; // shouldn't encounter
+        }
+        return {
+            JSXOpeningElement(node) {
+                const canSelfClose =
+                    childrenIsEmpty(node) || childrenIsMultilineSpaces(node);
+                if (canSelfClose) {
+                    const shouldSelfClose =
+                        shouldBeSelfClosedWhenPossible(node);
+                    if (shouldSelfClose && !node.selfClosing) {
+                        context.report({
+                            node,
+                            messageId: "selfClose",
+                            fix(fixer) {
+                                // Represents the last character of the JSXOpeningElement, the '>' character
+                                const openingElementEnding = node.range[1] - 1;
+                                // Represents the last character of the JSXClosingElement, the '>' character
+                                const closingElementEnding =
+                                    node.parent.closingElement.range[1];
+                                // Replace />.*<\/.*>/ with '/>'
+                                const range = [
+                                    openingElementEnding,
+                                    closingElementEnding,
+                                ];
+                                return fixer.replaceTextRange(range, " />");
+                            },
+                        });
+                    } else if (!shouldSelfClose && node.selfClosing) {
+                        context.report({
+                            node,
+                            messageId: "dontSelfClose",
+                            fix(fixer) {
+                                const sourceCode = getSourceCode(context);
+                                const tagName = sourceCode.getText(node.name);
+                                // Represents the last character of the JSXOpeningElement, the '>' character
+                                const selfCloseEnding = node.range[1];
+                                // Replace ' />' or '/>' with '></${tagName}>'
+                                const lastTokens = sourceCode.getLastTokens(
+                                    node,
+                                    { count: 3 },
+                                ); // JSXIdentifier, '/', '>'
+                                const isSpaceBeforeSelfClose =
+                                    sourceCode.isSpaceBetween?.(
+                                        lastTokens[0],
+                                        lastTokens[1],
+                                    );
+                                const range = [
+                                    isSpaceBeforeSelfClose
+                                        ? selfCloseEnding - 3
+                                        : selfCloseEnding - 2,
+                                    selfCloseEnding,
+                                ];
+                                return fixer.replaceTextRange(
+                                    range,
+                                    `></${tagName}>`,
+                                );
+                            },
+                        });
+                    }
+                }
+            },
+        };
+    },
+});

package/src/rules/style_prop.mjs

@@ -0,0 +1,155 @@
+import { ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
+import kebabCase from "kebab-case";
+import { all as allCssProperties } from "known-css-properties";
+import parse from "style-to-object";
+
+import { getScope } from "../compat.mjs";
+import { jsxPropName } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const { getPropertyName, getStaticValue } = ASTUtils;
+const lengthPercentageRegex =
+    /\b(?:width|height|margin|padding|border-width|font-size)\b/i;
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "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.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/style-prop.md",
+        },
+        fixable: "code",
+        schema: [
+            {
+                type: "object",
+                properties: {
+                    styleProps: {
+                        description:
+                            "an array of prop names to treat as a CSS style object",
+                        default: ["style"],
+                        type: "array",
+                        items: {
+                            type: "string",
+                        },
+                        minItems: 1,
+                        uniqueItems: true,
+                    },
+                    allowString: {
+                        description:
+                            "if allowString is set to true, this rule will not convert a style string literal into a style object (not recommended for performance)",
+                        type: "boolean",
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            kebabStyleProp: "Use {{ kebabName }} instead of {{ name }}.",
+            invalidStyleProp: "{{ name }} is not a valid CSS property.",
+            numericStyleValue:
+                'This CSS property value should be a string with a unit; Solid does not automatically append a "px" unit.',
+            stringStyle:
+                "Use an object for the style prop instead of a string.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const allCssPropertiesSet = new Set(allCssProperties);
+        const allowString = Boolean(context.options[0]?.allowString);
+        const styleProps = context.options[0]?.styleProps || ["style"];
+        return {
+            JSXAttribute(node) {
+                if (styleProps.indexOf(jsxPropName(node)) === -1) {
+                    return;
+                }
+                const style =
+                    node.value?.type === "JSXExpressionContainer"
+                        ? node.value.expression
+                        : node.value;
+                if (!style) {
+                    return;
+                } else if (
+                    style.type === "Literal" &&
+                    typeof style.value === "string" &&
+                    !allowString
+                ) {
+                    // Convert style="font-size: 10px" to style={{ "font-size": "10px" }}
+                    let objectStyles;
+                    try {
+                        objectStyles = parse(style.value) ?? undefined;
+                    } catch {
+                        // no-op
+                    }
+                    context.report({
+                        node: style,
+                        messageId: "stringStyle",
+                        // replace full prop value, wrap in JSXExpressionContainer, more fixes may be applied below
+                        fix:
+                            objectStyles &&
+                            ((fixer) =>
+                                fixer.replaceText(
+                                    node.value,
+                                    `{${JSON.stringify(objectStyles)}}`,
+                                )),
+                    });
+                } else if (style.type === "TemplateLiteral" && !allowString) {
+                    context.report({
+                        node: style,
+                        messageId: "stringStyle",
+                    });
+                } else if (style.type === "ObjectExpression") {
+                    const properties = style.properties.filter(
+                        (prop) => prop.type === "Property",
+                    );
+                    properties.forEach((prop) => {
+                        const name = getPropertyName(
+                            prop,
+                            getScope(context, prop),
+                        );
+                        if (
+                            name &&
+                            !name.startsWith("--") &&
+                            !allCssPropertiesSet.has(name)
+                        ) {
+                            const kebabName = kebabCase(name);
+                            if (allCssPropertiesSet.has(kebabName)) {
+                                // if it's not valid simply because it's camelCased instead of kebab-cased, provide a fix
+                                context.report({
+                                    node: prop.key,
+                                    messageId: "kebabStyleProp",
+                                    data: { name, kebabName },
+                                    fix: (fixer) =>
+                                        fixer.replaceText(
+                                            prop.key,
+                                            `"${kebabName}"`,
+                                        ), // wrap kebab name in quotes to be a valid object key
+                                });
+                            } else {
+                                context.report({
+                                    node: prop.key,
+                                    messageId: "invalidStyleProp",
+                                    data: { name },
+                                });
+                            }
+                        } else if (
+                            !name ||
+                            (!name.startsWith("--") &&
+                                lengthPercentageRegex.test(name))
+                        ) {
+                            // catches numeric values (ex. { "font-size": 12 }) for common <length-percentage> peroperties
+                            // and suggests quoting or appending 'px'
+                            const value = getStaticValue(prop.value)?.value;
+                            if (typeof value === "number" && value !== 0) {
+                                context.report({
+                                    node: prop.value,
+                                    messageId: "numericStyleValue",
+                                });
+                            }
+                        }
+                    });
+                }
+            },
+        };
+    },
+});

package/src/rules/validate_jsx_nesting.mjs

@@ -0,0 +1,16 @@
+export default {
+    defaultOptions: [],
+    meta: {
+        docs: {
+            description:
+                "Placeholder for the upstream validate-jsx-nesting rule, which currently has no implementation in eslint-plugin-solid.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/src/rules/validate-jsx-nesting.ts",
+        },
+        messages: {},
+        schema: [],
+        type: "problem",
+    },
+    create() {
+        return {};
+    },
+};

package/src/utils.mjs

@@ -0,0 +1,337 @@
+import { findVariable } from "./compat.mjs";
+
+const DOM_ELEMENT_REGEX = /^[a-z]/;
+const PROPS_REGEX = /[pP]rops/;
+const FUNCTION_TYPES = [
+    "FunctionExpression",
+    "ArrowFunctionExpression",
+    "FunctionDeclaration",
+];
+const PROGRAM_OR_FUNCTION_TYPES = ["Program", ...FUNCTION_TYPES];
+
+export function isDOMElementName(name) {
+    return DOM_ELEMENT_REGEX.test(name);
+}
+
+export function isPropsByName(name) {
+    return PROPS_REGEX.test(name);
+}
+
+export function formatList(strings) {
+    if (strings.length === 0) {
+        return "";
+    }
+
+    if (strings.length === 1) {
+        return `'${strings[0]}'`;
+    }
+
+    if (strings.length === 2) {
+        return `'${strings[0]}' and '${strings[1]}'`;
+    }
+
+    const last = strings.length - 1;
+    return `${strings
+        .slice(0, last)
+        .map((stringValue) => {
+            return `'${stringValue}'`;
+        })
+        .join(", ")}, and '${strings[last]}'`;
+}
+
+export function find(node, predicate) {
+    let currentNode = node;
+
+    while (currentNode) {
+        if (predicate(currentNode)) {
+            return currentNode;
+        }
+
+        currentNode = currentNode.parent;
+    }
+
+    return null;
+}
+
+export function findParent(node, predicate) {
+    return node.parent ? find(node.parent, predicate) : null;
+}
+
+export function trace(node, context) {
+    if (node.type !== "Identifier") {
+        return node;
+    }
+
+    const variable = findVariable(context, node);
+    if (!variable) {
+        return node;
+    }
+
+    const definition = variable.defs[0];
+    switch (definition?.type) {
+        case "FunctionName":
+        case "ClassName":
+        case "ImportBinding":
+            return definition.node;
+        case "Variable":
+            if (
+                (definition.node.parent.kind === "const" ||
+                    variable.references.every((reference) => {
+                        return reference.init || reference.isReadOnly();
+                    })) &&
+                definition.node.id.type === "Identifier" &&
+                definition.node.init
+            ) {
+                return trace(definition.node.init, context);
+            }
+            break;
+        default:
+            break;
+    }
+
+    return node;
+}
+
+export function ignoreTransparentWrappers(node, up = false) {
+    if (
+        node.type === "TSAsExpression" ||
+        node.type === "TSNonNullExpression" ||
+        node.type === "TSSatisfiesExpression"
+    ) {
+        const nextNode = up ? node.parent : node.expression;
+        if (nextNode) {
+            return ignoreTransparentWrappers(nextNode, up);
+        }
+    }
+
+    return node;
+}
+
+export function isFunctionNode(node) {
+    return Boolean(node) && FUNCTION_TYPES.includes(node.type);
+}
+
+export function isProgramOrFunctionNode(node) {
+    return Boolean(node) && PROGRAM_OR_FUNCTION_TYPES.includes(node.type);
+}
+
+export function isJSXElementOrFragment(node) {
+    return node?.type === "JSXElement" || node?.type === "JSXFragment";
+}
+
+export function getFunctionName(node) {
+    if (
+        (node.type === "FunctionDeclaration" ||
+            node.type === "FunctionExpression") &&
+        node.id != null
+    ) {
+        return node.id.name;
+    }
+
+    if (
+        node.parent?.type === "VariableDeclarator" &&
+        node.parent.id.type === "Identifier"
+    ) {
+        return node.parent.id.name;
+    }
+
+    return null;
+}
+
+export function findInScope(node, scope, predicate) {
+    const foundNode = find(node, (innerNode) => {
+        return innerNode === scope || predicate(innerNode);
+    });
+
+    return foundNode === scope && !predicate(node) ? null : foundNode;
+}
+
+export function getCommentBefore(node, sourceCode) {
+    return sourceCode.getCommentsBefore(node).find((comment) => {
+        return comment.loc.end.line >= node.loc.start.line - 1;
+    });
+}
+
+export function getCommentAfter(node, sourceCode) {
+    return sourceCode.getCommentsAfter(node).find((comment) => {
+        return comment.loc.start.line === node.loc.end.line;
+    });
+}
+
+export function trackImports(fromModule = /^solid-js(?:\/?|\b)/) {
+    const importMap = new Map();
+
+    function handleImportDeclaration(node) {
+        if (!fromModule.test(node.source.value)) {
+            return;
+        }
+
+        for (const specifier of node.specifiers) {
+            if (specifier.type === "ImportSpecifier") {
+                importMap.set(specifier.imported.name, specifier.local.name);
+            }
+        }
+    }
+
+    function matchImport(imports, value) {
+        const importList = Array.isArray(imports) ? imports : [imports];
+        return importList.find((importName) => {
+            return importMap.get(importName) === value;
+        });
+    }
+
+    return {
+        handleImportDeclaration,
+        matchImport,
+    };
+}
+
+export function appendImports(fixer, sourceCode, importNode, identifiers) {
+    const identifiersString = identifiers.join(", ");
+    const namedSpecifier = importNode.specifiers
+        .slice()
+        .reverse()
+        .find((specifier) => {
+            return specifier.type === "ImportSpecifier";
+        });
+
+    if (namedSpecifier) {
+        return fixer.insertTextAfter(namedSpecifier, `, ${identifiersString}`);
+    }
+
+    const otherSpecifier = importNode.specifiers.find((specifier) => {
+        return (
+            specifier.type === "ImportDefaultSpecifier" ||
+            specifier.type === "ImportNamespaceSpecifier"
+        );
+    });
+
+    if (otherSpecifier) {
+        return fixer.insertTextAfter(
+            otherSpecifier,
+            `, { ${identifiersString} }`,
+        );
+    }
+
+    if (importNode.specifiers.length === 0) {
+        const [importToken, maybeBrace] = sourceCode.getFirstTokens(
+            importNode,
+            {
+                count: 2,
+            },
+        );
+
+        if (maybeBrace?.value === "{") {
+            return fixer.insertTextAfter(maybeBrace, ` ${identifiersString} `);
+        }
+
+        return importToken
+            ? fixer.insertTextAfter(
+                  importToken,
+                  ` { ${identifiersString} } from`,
+              )
+            : null;
+    }
+
+    return null;
+}
+
+export function insertImports(
+    fixer,
+    sourceCode,
+    source,
+    identifiers,
+    aboveImport,
+    isType = false,
+) {
+    const identifiersString = identifiers.join(", ");
+    const programNode = sourceCode.ast;
+    const firstImport =
+        aboveImport ||
+        programNode.body.find((node) => {
+            return node.type === "ImportDeclaration";
+        });
+
+    if (firstImport) {
+        return fixer.insertTextBeforeRange(
+            (getCommentBefore(firstImport, sourceCode) ?? firstImport).range,
+            `import ${isType ? "type " : ""}{ ${identifiersString} } from "${source}";\n`,
+        );
+    }
+
+    return fixer.insertTextBeforeRange(
+        [0, 0],
+        `import ${isType ? "type " : ""}{ ${identifiersString} } from "${source}";\n`,
+    );
+}
+
+export function removeSpecifier(fixer, sourceCode, specifier, pure = true) {
+    const declaration = specifier.parent;
+    if (declaration.specifiers.length === 1 && pure) {
+        return fixer.remove(declaration);
+    }
+
+    const maybeComma = sourceCode.getTokenAfter(specifier);
+    if (maybeComma?.value === ",") {
+        return fixer.removeRange([specifier.range[0], maybeComma.range[1]]);
+    }
+
+    return fixer.remove(specifier);
+}
+
+export function jsxPropName(prop) {
+    if (prop.name.type === "JSXNamespacedName") {
+        return `${prop.name.namespace.name}:${prop.name.name.name}`;
+    }
+
+    return prop.name.name;
+}
+
+export function* jsxGetAllProps(props) {
+    for (const attribute of props) {
+        if (
+            attribute.type === "JSXSpreadAttribute" &&
+            attribute.argument.type === "ObjectExpression"
+        ) {
+            for (const property of attribute.argument.properties) {
+                if (property.type !== "Property") {
+                    continue;
+                }
+
+                if (property.key.type === "Identifier") {
+                    yield [property.key.name, property.key];
+                    continue;
+                }
+
+                if (property.key.type === "Literal") {
+                    yield [String(property.key.value), property.key];
+                }
+            }
+
+            continue;
+        }
+
+        if (attribute.type === "JSXAttribute") {
+            yield [jsxPropName(attribute), attribute.name];
+        }
+    }
+}
+
+export function jsxHasProp(props, prop) {
+    for (const [propName] of jsxGetAllProps(props)) {
+        if (propName === prop) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+export function jsxGetProp(props, prop) {
+    return props.find((attribute) => {
+        return (
+            attribute.type !== "JSXSpreadAttribute" &&
+            prop === jsxPropName(attribute)
+        );
+    });
+}