@murky-web/oxlint-plugin-solid 0.0.1

package/README.md

@@ -0,0 +1,62 @@
+# @murky-web/oxlint-plugin-solid
+
+Workspace-Paket fuer den lokalen Oxlint-JS-Plugin-Port der Solid-Regeln.
+
+Es enthaelt die Solid-Regeln lokal im Paket und erweitert den Upstream-Satz um
+projektspezifische Regeln wie `solid/prefer-arrow-components`.
+
+Die Regelmodule unter `src/rules/` sind aus dem Upstream-Quellstand abgeleitet
+und laufen ohne `eslint-plugin-solid` als Zielprojekt-Dependency.
+
+Aktuell sind enthalten:
+
+- die komplette von `eslint-plugin-solid` exportierte Regelmenge
+- die zusaetzliche Projektregel `solid/prefer-arrow-components`
+- ein Test-Harness, der die exportierte Rule-Surface und echte Diagnostik
+  gegen Temp-Projekte prueft
+
+Aktuell wird das Paket nicht direkt im Zielprojekt installiert. Stattdessen
+kopiert `@murky-web/config` die Rule-Runtime in `./oxc/jsplugins/solid/`, damit
+Oxlint sie ueber einen lokalen `jsPlugins`-Pfad laden kann.
+
+Wichtig dabei:
+
+- `@murky-web/config` loest dieses Paket als normale Workspace-Dependency auf
+- der Installer kopiert den lokalen Plugin-Src-Ordner aus der installierten
+  Paketauflösung
+- Zielprojekte brauchen dadurch weiter nur die kopierte Runtime unter
+  `./oxc/jsplugins/solid/`, nicht dieses Paket als direkte Dependency
+
+## Nutzung ueber @murky-web/config
+
+Im Zielprojekt:
+
+```bash
+web-dev-config init --oxc --typescript --frontend-solid
+```
+
+Danach:
+
+- liegt die lokale Rule-Runtime unter `./oxc/jsplugins/solid/`
+- wird `./linting/solid.jsonc` in die Oxc-Konfiguration eingehängt
+- zeigt `jsPlugins` auf `./jsplugins/solid/index.mjs`
+- feuern sowohl die portierten Solid-Regeln als auch
+  `solid/prefer-arrow-components`
+
+Ein typischer Fix-Fall:
+
+```tsx
+export function Card(props: Props) {
+    return <section>{props.children}</section>;
+}
+```
+
+wird mit `oxlint --fix` zu:
+
+```tsx
+import type { ParentComponent } from "solid-js";
+
+export const Card: ParentComponent<Props> = (props) => {
+    return <section>{props.children}</section>;
+};
+```

package/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@murky-web/oxlint-plugin-solid",
+    "version": "0.0.1",
+    "description": "Local Oxlint JS plugin port for Solid rules plus Murky-specific Solid conventions.",
+    "license": "MIT",
+    "private": false,
+    "type": "module",
+    "exports": {
+        ".": "./src/index.mjs"
+    },
+    "files": [
+        "README.md",
+        "src"
+    ],
+    "scripts": {
+        "test": "bun test ./tests"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/MurkyTheMurloc/web_dev_tools.git",
+        "directory": "packages/oxlint-plugin-solid"
+    },
+    "homepage": "https://github.com/MurkyTheMurloc/web_dev_tools/tree/main/packages/oxlint-plugin-solid",
+    "bugs": {
+        "url": "https://github.com/MurkyTheMurloc/web_dev_tools/issues"
+    },
+    "sideEffects": false,
+    "dependencies": {
+        "@typescript-eslint/utils": "^8.57.1",
+        "eslint": "^9.38.0",
+        "estraverse": "^5.3.0",
+        "is-html": "^2.0.0",
+        "kebab-case": "^1.0.2",
+        "known-css-properties": "^0.30.0",
+        "style-to-object": "^1.0.8"
+    },
+    "devDependencies": {
+        "solid-js": "^1.9.11"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    }
+}

package/src/compat.mjs

@@ -0,0 +1,53 @@
+import { ASTUtils } from "@typescript-eslint/utils";
+
+export function getSourceCode(context) {
+    if (typeof context.getSourceCode === "function") {
+        return context.getSourceCode();
+    }
+
+    return context.sourceCode;
+}
+
+export function getScope(context, node) {
+    const sourceCode = getSourceCode(context);
+
+    if (typeof sourceCode.getScope === "function") {
+        return sourceCode.getScope(node);
+    }
+
+    if (typeof context.getScope === "function") {
+        return context.getScope();
+    }
+
+    return context.sourceCode.getScope(node);
+}
+
+export function findVariable(context, node) {
+    return ASTUtils.findVariable(getScope(context, node), node);
+}
+
+export function markVariableAsUsed(context, name, node) {
+    if (typeof context.markVariableAsUsed === "function") {
+        context.markVariableAsUsed(name);
+        return;
+    }
+
+    const sourceCode = getSourceCode(context);
+    if (typeof sourceCode.markVariableAsUsed !== "function") {
+        return;
+    }
+
+    try {
+        sourceCode.markVariableAsUsed(name, node);
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            error.message.includes("markVariableAsUsed") &&
+            error.message.includes("not implemented")
+        ) {
+            return;
+        }
+
+        throw error;
+    }
+}

package/src/index.mjs

@@ -0,0 +1,56 @@
+import componentsReturnOnceRule from "./rules/components_return_once.mjs";
+import eventHandlersRule from "./rules/event_handlers.mjs";
+import importsRule from "./rules/imports.mjs";
+import jsxNoDuplicatePropsRule from "./rules/jsx_no_duplicate_props.mjs";
+import { jsxNoScriptUrlRule } from "./rules/jsx_no_script_url.mjs";
+import jsxNoUndefRule from "./rules/jsx_no_undef.mjs";
+import { jsxUsesVarsRule } from "./rules/jsx_uses_vars.mjs";
+import { noArrayHandlersRule } from "./rules/no_array_handlers.mjs";
+import noDestructureRule from "./rules/no_destructure.mjs";
+import noInnerhtmlRule from "./rules/no_innerhtml.mjs";
+import noProxyApisRule from "./rules/no_proxy_apis.mjs";
+import noReactDepsRule from "./rules/no_react_deps.mjs";
+import { noReactSpecificPropsRule } from "./rules/no_react_specific_props.mjs";
+import noUnknownNamespacesRule from "./rules/no_unknown_namespaces.mjs";
+import { preferArrowComponentsRule } from "./rules/prefer_arrow_components.mjs";
+import preferClasslistRule from "./rules/prefer_classlist.mjs";
+import preferForRule from "./rules/prefer_for.mjs";
+import preferShowRule from "./rules/prefer_show.mjs";
+import reactivityRule from "./rules/reactivity.mjs";
+import selfClosingCompRule from "./rules/self_closing_comp.mjs";
+import stylePropRule from "./rules/style_prop.mjs";
+import validateJsxNestingRule from "./rules/validate_jsx_nesting.mjs";
+
+const extendedPlugin = {
+    meta: {
+        name: "solid",
+        version: "0.14.5",
+    },
+    rules: {
+        "components-return-once": componentsReturnOnceRule,
+        "event-handlers": eventHandlersRule,
+        imports: importsRule,
+        "jsx-no-duplicate-props": jsxNoDuplicatePropsRule,
+        "jsx-no-script-url": jsxNoScriptUrlRule,
+        "jsx-no-undef": jsxNoUndefRule,
+        "jsx-uses-vars": jsxUsesVarsRule,
+        "no-array-handlers": noArrayHandlersRule,
+        "no-destructure": noDestructureRule,
+        "no-innerhtml": noInnerhtmlRule,
+        "no-proxy-apis": noProxyApisRule,
+        "no-react-deps": noReactDepsRule,
+        "no-react-specific-props": noReactSpecificPropsRule,
+        "no-unknown-namespaces": noUnknownNamespacesRule,
+        "prefer-arrow-components": preferArrowComponentsRule,
+        "prefer-classlist": preferClasslistRule,
+        "prefer-for": preferForRule,
+        "prefer-show": preferShowRule,
+        reactivity: reactivityRule,
+        "self-closing-comp": selfClosingCompRule,
+        "style-prop": stylePropRule,
+        "validate-jsx-nesting": validateJsxNestingRule,
+    },
+};
+
+// oxlint-disable-next-line import/no-default-export -- Oxlint JS plugins require a default export surface.
+export default extendedPlugin;

package/src/rules/components_return_once.mjs

@@ -0,0 +1,202 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+import { getSourceCode } from "../compat.mjs";
+import { getFunctionName } from "../utils.mjs";
+const createRule = ESLintUtils.RuleCreator.withoutDocs;
+const isNothing = (node) => {
+    if (!node) {
+        return true;
+    }
+    switch (node.type) {
+        case "Literal":
+            return [null, undefined, false, ""].includes(node.value);
+        case "JSXFragment":
+            return !node.children || node.children.every(isNothing);
+        default:
+            return false;
+    }
+};
+const getLineLength = (loc) => loc.end.line - loc.start.line + 1;
+export default createRule({
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Disallow early returns in components. Solid components only run once, and so conditionals should be inside JSX.",
+            url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/packages/eslint-plugin-solid/docs/components-return-once.md",
+        },
+        fixable: "code",
+        schema: [],
+        messages: {
+            noEarlyReturn:
+                "Solid components run once, so an early return breaks reactivity. Move the condition inside a JSX element, such as a fragment or <Show />.",
+            noConditionalReturn:
+                "Solid components run once, so a conditional return breaks reactivity. Move the condition inside a JSX element, such as a fragment or <Show />.",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        const functionStack = [];
+        const putIntoJSX = (node) => {
+            const text = getSourceCode(context).getText(node);
+            return node.type === "JSXElement" || node.type === "JSXFragment"
+                ? text
+                : `{${text}}`;
+        };
+        const currentFunction = () => functionStack[functionStack.length - 1];
+        const onFunctionEnter = (node) => {
+            let lastReturn;
+            if (node.body.type === "BlockStatement") {
+                // find last statement, ignoring function/class/variable declarations (hoisting)
+                const last = node.body.body.findLast(
+                    (node) => !node.type.endsWith("Declaration"),
+                );
+                // if it's a return, store it
+                if (last && last.type === "ReturnStatement") {
+                    lastReturn = last;
+                }
+            }
+            functionStack.push({
+                isComponent: false,
+                lastReturn,
+                earlyReturns: [],
+            });
+        };
+        const onFunctionExit = (node) => {
+            if (
+                // "render props" aren't components
+                getFunctionName(node)?.match(/^[a-z]/) ||
+                node.parent?.type === "JSXExpressionContainer" ||
+                // ignore createMemo(() => conditional JSX), report HOC(() => conditional JSX)
+                (node.parent?.type === "CallExpression" &&
+                    node.parent.arguments.some((n) => n === node) &&
+                    !node.parent.callee.name?.match(/^[A-Z]/))
+            ) {
+                currentFunction().isComponent = false;
+            }
+            if (currentFunction().isComponent) {
+                // Warn on each early return
+                currentFunction().earlyReturns.forEach((earlyReturn) => {
+                    context.report({
+                        node: earlyReturn,
+                        messageId: "noEarlyReturn",
+                    });
+                });
+                const argument = currentFunction().lastReturn?.argument;
+                if (argument?.type === "ConditionalExpression") {
+                    const sourceCode = getSourceCode(context);
+                    context.report({
+                        node: argument.parent,
+                        messageId: "noConditionalReturn",
+                        fix: (fixer) => {
+                            const { test, consequent, alternate } = argument;
+                            const conditions = [{ test, consequent }];
+                            let fallback = alternate;
+                            while (fallback.type === "ConditionalExpression") {
+                                conditions.push({
+                                    test: fallback.test,
+                                    consequent: fallback.consequent,
+                                });
+                                fallback = fallback.alternate;
+                            }
+                            if (conditions.length >= 2) {
+                                // we have a nested ternary, use <Switch><Match /></Switch>
+                                const fallbackStr = !isNothing(fallback)
+                                    ? ` fallback={${sourceCode.getText(fallback)}}`
+                                    : "";
+                                return fixer.replaceText(
+                                    argument,
+                                    `<Switch${fallbackStr}>\n${conditions
+                                        .map(
+                                            ({ test, consequent }) =>
+                                                `<Match when={${sourceCode.getText(test)}}>${putIntoJSX(consequent)}</Match>`,
+                                        )
+                                        .join("\n")}\n</Switch>`,
+                                );
+                            }
+                            if (isNothing(consequent)) {
+                                // we have a single ternary and the consequent is nothing. Negate the condition and use a <Show>.
+                                return fixer.replaceText(
+                                    argument,
+                                    `<Show when={!(${sourceCode.getText(test)})}>${putIntoJSX(alternate)}</Show>`,
+                                );
+                            }
+                            if (
+                                isNothing(fallback) ||
+                                getLineLength(consequent.loc) >=
+                                    getLineLength(alternate.loc) * 1.5
+                            ) {
+                                // we have a standard ternary, and the alternate is a bit shorter in LOC than the consequent, which
+                                // should be enough to tell that it's logically a fallback instead of an equal branch.
+                                const fallbackStr = !isNothing(fallback)
+                                    ? ` fallback={${sourceCode.getText(fallback)}}`
+                                    : "";
+                                return fixer.replaceText(
+                                    argument,
+                                    `<Show when={${sourceCode.getText(test)}}${fallbackStr}>${putIntoJSX(consequent)}</Show>`,
+                                );
+                            }
+                            // we have a standard ternary, but no signal from the user as to which branch is the "fallback" and
+                            // which is the children. Move the whole conditional inside a JSX fragment.
+                            return fixer.replaceText(
+                                argument,
+                                `<>${putIntoJSX(argument)}</>`,
+                            );
+                        },
+                    });
+                } else if (argument?.type === "LogicalExpression") {
+                    if (argument.operator === "&&") {
+                        const sourceCode = getSourceCode(context);
+                        // we have a `return condition && expression`--put that in a <Show />
+                        context.report({
+                            node: argument,
+                            messageId: "noConditionalReturn",
+                            fix: (fixer) => {
+                                const { left: test, right: consequent } =
+                                    argument;
+                                return fixer.replaceText(
+                                    argument,
+                                    `<Show when={${sourceCode.getText(test)}}>${putIntoJSX(consequent)}</Show>`,
+                                );
+                            },
+                        });
+                    } else {
+                        // we have some other kind of conditional, warn
+                        context.report({
+                            node: argument,
+                            messageId: "noConditionalReturn",
+                        });
+                    }
+                }
+            }
+            // Pop on exit
+            functionStack.pop();
+        };
+        return {
+            FunctionDeclaration: onFunctionEnter,
+            FunctionExpression: onFunctionEnter,
+            ArrowFunctionExpression: onFunctionEnter,
+            "FunctionDeclaration:exit": onFunctionExit,
+            "FunctionExpression:exit": onFunctionExit,
+            "ArrowFunctionExpression:exit": onFunctionExit,
+            JSXElement() {
+                if (functionStack.length) {
+                    currentFunction().isComponent = true;
+                }
+            },
+            JSXFragment() {
+                if (functionStack.length) {
+                    currentFunction().isComponent = true;
+                }
+            },
+            ReturnStatement(node) {
+                if (
+                    functionStack.length &&
+                    node !== currentFunction().lastReturn
+                ) {
+                    currentFunction().earlyReturns.push(node);
+                }
+            },
+        };
+    },
+});