oxlint-plugin-vue-sfc 0.1.0

package/rules/no-v-text-v-html-on-component.mjs

@@ -0,0 +1,69 @@
+import {
+    ELEMENT_COMPONENT,
+    NODE_ELEMENT,
+    findDirective,
+    parseSfc,
+    reportAtFileOffset,
+    walkTemplate,
+} from "../utils/vue-sfc.mjs";
+
+/**
+ * Replacement for `vue/no-v-text-v-html-on-component` (no native oxlint equivalent — oxc#15761).
+ *
+ * `v-text` / `v-html` set the host element's textContent/innerHTML. On a COMPONENT that means
+ * Vue passes the value as the default slot and the component's own rendered output is thrown
+ * away — or, worse, the component renders normally and the directive appears to do nothing.
+ * Either way the intent (put this text inside the component) is not what happens; a prop or an
+ * explicit slot is.
+ *
+ * `v-html` on a component carries the additional XSS surface of `v-html` generally, with the
+ * component boundary making it easier to miss in review — hence keeping this rule rather than
+ * treating it as style.
+ *
+ * Component detection uses the parser's own `tagType` (`ElementTypes.COMPONENT`), not a
+ * casing heuristic: `@vue/compiler-sfc` already resolves `<MyThing>`, `<my-thing>` and
+ * `<component>` correctly, and re-deriving it from the tag name would misjudge kebab-case
+ * components and custom elements.
+ */
+
+export default {
+    meta: {
+        type: "suggestion",
+        docs: {
+            description: "disallow `v-text` / `v-html` on component",
+            recommended: false,
+        },
+        schema: [],
+        messages: { m: "" },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".vue")) {
+            return {};
+        }
+        return {
+            Program() {
+                const entry = parseSfc(context.filename);
+                const ast = entry.descriptor.template?.ast;
+                if (!ast) {
+                    return;
+                }
+                walkTemplate(ast, (node) => {
+                    if (node.type !== NODE_ELEMENT || node.tagType !== ELEMENT_COMPONENT) {
+                        return;
+                    }
+                    const directive = findDirective(node, "text") ?? findDirective(node, "html");
+                    if (!directive) {
+                        return;
+                    }
+                    reportAtFileOffset(
+                        context,
+                        entry,
+                        directive.loc.start.offset,
+                        directive.loc.end.offset,
+                        `\`v-${directive.name}\` on the component <${node.tag}> discards its own rendered output instead of putting content inside it. Pass a prop or use an explicit slot.`,
+                    );
+                });
+            },
+        };
+    },
+};

package/rules/require-component-is.mjs

@@ -0,0 +1,82 @@
+import {
+    NODE_ELEMENT,
+    PROP_ATTRIBUTE,
+    PROP_DIRECTIVE,
+    parseSfc,
+    reportAtFileOffset,
+    walkTemplate,
+} from "../utils/vue-sfc.mjs";
+
+/**
+ * Replacement for `vue/require-component-is` (no native oxlint equivalent — oxc#15761).
+ *
+ * `<component>` renders whatever `is` names. Without `is` it renders nothing at all —
+ * silently, with no warning — so the subtree just disappears. Almost always a rename or
+ * a bad merge that dropped the binding.
+ *
+ * What counts as satisfying the rule:
+ * - `:is` / `v-bind:is` — the normal dynamic form.
+ * - a static `is="MyComponent"` — unusual but valid and does render, so not flagged.
+ * - `v-bind="obj"` (argument-less spread) — `is` may well come from the object. We cannot
+ *   see inside it, so we treat a spread as satisfying the rule rather than emit a report
+ *   we cannot substantiate; a false positive here would be on working code.
+ */
+
+function hasIs(node) {
+    for (const prop of node.props ?? []) {
+        if (prop.type === PROP_ATTRIBUTE && prop.name === "is") {
+            return true;
+        }
+        if (prop.type === PROP_DIRECTIVE && prop.name === "bind") {
+            // Argument-less `v-bind="obj"` spread: `is` might be in there.
+            if (!prop.arg) {
+                return true;
+            }
+            if (prop.arg.type === 4 /* SIMPLE_EXPRESSION */ && prop.arg.content === "is") {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+export default {
+    meta: {
+        type: "problem",
+        docs: {
+            description: "require `v-bind:is` of `<component>` elements",
+            recommended: true,
+        },
+        schema: [],
+        messages: { m: "" },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".vue")) {
+            return {};
+        }
+        return {
+            Program() {
+                const entry = parseSfc(context.filename);
+                const ast = entry.descriptor.template?.ast;
+                if (!ast) {
+                    return;
+                }
+                walkTemplate(ast, (node) => {
+                    if (node.type !== NODE_ELEMENT || node.tag !== "component") {
+                        return;
+                    }
+                    if (hasIs(node)) {
+                        return;
+                    }
+                    reportAtFileOffset(
+                        context,
+                        entry,
+                        node.loc.start.offset,
+                        node.loc.end.offset,
+                        "`<component>` without `is` renders nothing, silently. Add `:is` naming the component to render.",
+                    );
+                });
+            },
+        };
+    },
+};

package/rules/require-explicit-emits.mjs

@@ -0,0 +1,365 @@
+import {
+    NODE_ELEMENT,
+    NODE_INTERPOLATION,
+    PROP_DIRECTIVE,
+    parseSfc,
+    reportAtFileOffset,
+    walkTemplate,
+} from "../utils/vue-sfc.mjs";
+
+/**
+ * Replacement for `vue/require-explicit-emits` (no native oxlint equivalent — oxc#15761).
+ *
+ * An event emitted but not declared in `defineEmits` still fires, so nothing breaks loudly — but
+ * the component's contract is now a lie. Consumers reading `defineEmits` do not know the event
+ * exists, TypeScript cannot check the payload, and Vue falls back to treating the listener as a
+ * native attribute, which can double-fire it on the root element.
+ *
+ * A CORRELATION rule: declared events come from the script AST (`Program(node)`), emit calls from
+ * both the script and the template.
+ *
+ * Declaration forms handled:
+ * - Type, property form: `defineEmits<{ save: []; close: [] }>()`.
+ * - Type, CALL-SIGNATURE form: `defineEmits<{ (e: "save"): void }>()`. This is the dominant style
+ *   in this repo (122+ SFCs) and omitting it made the declared set EMPTY, which turned every emit
+ *   in those files into a false positive — 219 of them. Handled by reading the string-literal type
+ *   of a call signature's FIRST parameter.
+ * - Runtime array: `defineEmits(["save", "close"])`.
+ * - Runtime object: `defineEmits({ save: null })`.
+ * - Options API `emits: [...]` / `emits: {...}`.
+ * - A NAMED type reference — `defineEmits<CopyInputEmits>()` — resolved against `interface` /
+ *   `type` declarations in the SAME script. All 15 such references in this repo are local, so no
+ *   cross-file resolution is needed; an unresolvable reference makes the declared set unknown and
+ *   the rule stays silent rather than reporting every emit.
+ *
+ * Emit sites handled: `$emit("x")` and `<emitVar>("x")` in template expressions, and
+ * `<emitVar>("x")` in the script.
+ *
+ * Deliberately conservative — it only reports when BOTH halves are statically known:
+ * - If no declaration is found at all, the rule stays silent. A component with no `defineEmits`
+ *   is a different finding, and guessing would report every emit in the file.
+ * - Only literal event names are checked. `emit(dynamicName)` is skipped.
+ * The template side is a lexical scan for `$emit(` / `emit(` followed by a quoted literal rather
+ * than a parse of each expression; a name built at runtime is therefore invisible, which is a
+ * false negative and never a false positive.
+ */
+
+/** Event names declared by a `defineEmits` call or an `emits:` option. */
+function declaredFrom(node) {
+    const names = new Set();
+    const fromTypeLiteral = (typeNode) => {
+        const walk = (current) => {
+            if (!current || typeof current !== "object") {
+                return;
+            }
+            if (Array.isArray(current)) {
+                for (const item of current) {
+                    walk(item);
+                }
+                return;
+            }
+            if (
+                (current.type === "TSPropertySignature" ||
+                    current.type === "TSMethodSignature") &&
+                current.key
+            ) {
+                const name = current.key.name ?? current.key.value;
+                if (typeof name === "string") {
+                    names.add(name);
+                }
+            }
+            // `(event: "edit", payload: string): void` — the event name is the FIRST parameter's
+            // string-literal type, not a property key.
+            if (
+                current.type === "TSCallSignatureDeclaration" ||
+                current.type === "TSFunctionType"
+            ) {
+                const first = current.params?.[0] ?? current.parameters?.[0];
+                const annotation = first?.typeAnnotation?.typeAnnotation ?? first?.typeAnnotation;
+                if (annotation?.type === "TSLiteralType") {
+                    const value = annotation.literal?.value;
+                    if (typeof value === "string") {
+                        names.add(value);
+                    }
+                }
+            }
+            for (const key of Object.keys(current)) {
+                if (key === "parent" || key === "loc" || key === "range") {
+                    continue;
+                }
+                walk(current[key]);
+            }
+        };
+        walk(typeNode);
+    };
+
+    const fromValue = (value) => {
+        if (value?.type === "ArrayExpression") {
+            for (const element of value.elements ?? []) {
+                if (typeof element?.value === "string") {
+                    names.add(element.value);
+                }
+            }
+        } else if (value?.type === "ObjectExpression") {
+            for (const property of value.properties ?? []) {
+                const name = property.key?.name ?? property.key?.value;
+                if (typeof name === "string") {
+                    names.add(name);
+                }
+            }
+        }
+    };
+
+    if (node.type === "CallExpression") {
+        fromValue(node.arguments?.[0]);
+        // Type argument key differs across parser versions; scan the node for TS signatures.
+        for (const key of Object.keys(node)) {
+            if (key.startsWith("type")) {
+                fromTypeLiteral(node[key]);
+            }
+        }
+    } else if (node.type?.startsWith("TS")) {
+        // A resolved type body: `TSInterfaceBody`, `TSTypeLiteral`, … — scan it for signatures
+        // rather than treating it as a runtime value.
+        fromTypeLiteral(node);
+    } else {
+        fromValue(node);
+    }
+    return names;
+}
+
+/** The name of a single `TSTypeReference` type argument on a call, or null. */
+function referencedTypeName(call) {
+    for (const key of Object.keys(call)) {
+        if (!key.startsWith("type")) {
+            continue;
+        }
+        const container = call[key];
+        const params = container?.params ?? container?.parameters;
+        const first = Array.isArray(params) ? params[0] : null;
+        if (first?.type === "TSTypeReference" && first.typeName?.type === "Identifier") {
+            return first.typeName.name;
+        }
+    }
+    return null;
+}
+
+/** Map of locally declared type/interface name -> its body node. */
+function localTypeDeclarations(program) {
+    const map = new Map();
+    const walk = (node) => {
+        if (!node || typeof node !== "object") {
+            return;
+        }
+        if (Array.isArray(node)) {
+            for (const item of node) {
+                walk(item);
+            }
+            return;
+        }
+        if (typeof node.type !== "string") {
+            return;
+        }
+        if (node.type === "TSInterfaceDeclaration" && node.id?.name) {
+            map.set(node.id.name, node.body);
+        }
+        if (node.type === "TSTypeAliasDeclaration" && node.id?.name) {
+            map.set(node.id.name, node.typeAnnotation);
+        }
+        for (const key of Object.keys(node)) {
+            if (key === "parent" || key === "loc" || key === "range") {
+                continue;
+            }
+            walk(node[key]);
+        }
+    };
+    walk(program);
+    return map;
+}
+
+/** Walk the program collecting the declared event set and the emit variable name. */
+function analyzeScript(program) {
+    const localTypes = localTypeDeclarations(program);
+    let declared = null;
+    let emitVar = null;
+    const walk = (node, parent) => {
+        if (!node || typeof node !== "object") {
+            return;
+        }
+        if (Array.isArray(node)) {
+            for (const item of node) {
+                walk(item, parent);
+            }
+            return;
+        }
+        if (typeof node.type !== "string") {
+            return;
+        }
+        if (
+            node.type === "CallExpression" &&
+            node.callee?.type === "Identifier" &&
+            node.callee.name === "defineEmits"
+        ) {
+            declared = declaredFrom(node);
+            // `defineEmits<NamedEmits>()`: resolve the reference against local declarations.
+            // If it cannot be resolved, leave `declared` null so the rule stays silent rather
+            // than treating an empty set as "nothing is declared" and flagging every emit.
+            if (declared.size === 0) {
+                const referenced = referencedTypeName(node);
+                const body = referenced ? localTypes.get(referenced) : null;
+                declared = body ? declaredFrom(body) : null;
+                if (declared && declared.size === 0) {
+                    declared = null;
+                }
+            }
+            if (parent?.type === "VariableDeclarator" && parent.id?.type === "Identifier") {
+                emitVar = parent.id.name;
+            }
+        }
+        if (
+            node.type === "Property" &&
+            (node.key?.name ?? node.key?.value) === "emits" &&
+            node.value
+        ) {
+            declared = declaredFrom(node.value);
+        }
+        for (const key of Object.keys(node)) {
+            if (key === "parent" || key === "loc" || key === "range") {
+                continue;
+            }
+            walk(node[key], node);
+        }
+    };
+    walk(program, null);
+    return { declared, emitVar };
+}
+
+/** Literal event names emitted in `text`, with the offset of each name's opening quote. */
+function emitSites(text, emitVar) {
+    // NOTE: no `\b` before `$emit`. `$` is not a word character, so a word boundary can never
+    // match at the start of an expression like `$emit('x')` — that mistake silently disabled the
+    // whole template side of this rule. `$emit` is distinctive enough not to need a guard (and
+    // `this.$emit(...)` should match too); the script variable does get a `\b`.
+    const escaped = emitVar ? emitVar.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") : null;
+    const callees = ["\\$emit", ...(escaped ? [`\\b${escaped}`] : [])];
+    const pattern = new RegExp(`(?:${callees.join("|")})\\s*\\(\\s*(['"])([^'"]*)\\1`, "g");
+    const sites = [];
+    let match = pattern.exec(text);
+    while (match !== null) {
+        // index of the opening quote inside the whole match
+        const quoteOffset = match[0].lastIndexOf(match[1], match[0].length - match[2].length - 1);
+        sites.push({ name: match[2], offset: match.index + quoteOffset });
+        match = pattern.exec(text);
+    }
+    return sites;
+}
+
+export default {
+    meta: {
+        type: "problem",
+        docs: {
+            description: "require `emits` option with name triggered by `$emit()`",
+            recommended: true,
+        },
+        schema: [],
+        messages: {
+            undeclared:
+                'The "{{name}}" event is emitted but not declared in `defineEmits`, so the component\'s contract does not mention it and its payload is unchecked.',
+        },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".vue")) {
+            return {};
+        }
+        return {
+            Program(program) {
+                const { declared, emitVar } = analyzeScript(program);
+                // No declaration at all: reporting every emit would be a different rule.
+                if (!declared) {
+                    return;
+                }
+
+                // --- script side: emitVar("name") -------------------------------------------
+                if (emitVar) {
+                    const walk = (node) => {
+                        if (!node || typeof node !== "object") {
+                            return;
+                        }
+                        if (Array.isArray(node)) {
+                            for (const item of node) {
+                                walk(item);
+                            }
+                            return;
+                        }
+                        if (typeof node.type !== "string") {
+                            return;
+                        }
+                        if (
+                            node.type === "CallExpression" &&
+                            node.callee?.type === "Identifier" &&
+                            node.callee.name === emitVar
+                        ) {
+                            const first = node.arguments?.[0];
+                            if (
+                                typeof first?.value === "string" &&
+                                !declared.has(first.value)
+                            ) {
+                                context.report({
+                                    node: first,
+                                    messageId: "undeclared",
+                                    data: { name: first.value },
+                                });
+                            }
+                        }
+                        for (const key of Object.keys(node)) {
+                            if (key === "parent" || key === "loc" || key === "range") {
+                                continue;
+                            }
+                            walk(node[key]);
+                        }
+                    };
+                    walk(program);
+                }
+
+                // --- template side: $emit("name") / emitVar("name") -------------------------
+                const entry = parseSfc(context.filename);
+                const ast = entry.descriptor.template?.ast;
+                if (!ast) {
+                    return;
+                }
+                const check = (expression) => {
+                    if (!expression?.content) {
+                        return;
+                    }
+                    for (const site of emitSites(expression.content, emitVar)) {
+                        if (declared.has(site.name)) {
+                            continue;
+                        }
+                        const start = expression.loc.start.offset + site.offset;
+                        reportAtFileOffset(
+                            context,
+                            entry,
+                            start,
+                            start + site.name.length + 2,
+                            `The "${site.name}" event is emitted but not declared in \`defineEmits\`, so the component's contract does not mention it and its payload is unchecked.`,
+                        );
+                    }
+                };
+                walkTemplate(ast, (node) => {
+                    if (node.type === NODE_INTERPOLATION) {
+                        check(node.content);
+                        return;
+                    }
+                    if (node.type !== NODE_ELEMENT) {
+                        return;
+                    }
+                    for (const prop of node.props ?? []) {
+                        if (prop.type === PROP_DIRECTIVE) {
+                            check(prop.exp);
+                        }
+                    }
+                });
+            },
+        };
+    },
+};

package/rules/require-toggle-inside-transition.mjs

@@ -0,0 +1,133 @@
+import {
+    NODE_ELEMENT,
+    PROP_ATTRIBUTE,
+    PROP_DIRECTIVE,
+    parseSfc,
+    reportAtFileOffset,
+    walkTemplate,
+} from "../utils/vue-sfc.mjs";
+
+/**
+ * Replacement for `vue/require-toggle-inside-transition` (no native oxlint equivalent — oxc#15761).
+ *
+ * `<Transition>` animates an element ENTERING or LEAVING. If its content is never toggled,
+ * nothing ever enters or leaves, so the transition is inert — the CSS is written, reviewed and
+ * shipped, and simply never runs. Usually the toggle was removed, or was put on the
+ * `<Transition>` itself instead of on the child.
+ *
+ * Scope was derived EMPIRICALLY from eslint-plugin-vue rather than from its docs, after a first
+ * implementation produced 10 corpus false positives. Probed behaviour, all confirmed against
+ * ESLint on the same fixtures:
+ * - Only a direct child that is a PLAIN HTML element can trigger the report. Components,
+ *   `<slot>`, `<template>`, and text/interpolation children are all exempt — their rendered
+ *   content is not statically knowable, so the rule cannot conclude nothing toggles.
+ * - Nesting is NOT descended: `<Transition><div><span v-if>` IS reported, because the direct
+ *   child `<div>` is what would have to enter or leave.
+ * - A toggle on the `<Transition>` ITSELF does not satisfy it (confirmed: ESLint still reports).
+ * - `appear` exempts the whole Transition — it animates on initial render, so static content
+ *   is legitimate. This alone accounted for 5 of the 10 false positives.
+ * - The report is anchored on the CHILD element, not on the `<Transition>` (column parity).
+ * - A toggle on any qualifying child satisfies it; not all children need one.
+ */
+
+// `<TransitionGroup>` is deliberately OUT of scope. It animates list MEMBERSHIP changes, so
+// its children need no toggle at all — confirmed against eslint-plugin-vue, which flags no
+// TransitionGroup case, not even one with a fully static child. Including it produced a false
+// positive on a real v-for list here.
+const TRANSITION_TAGS = new Set(["transition", "Transition"]);
+const TOGGLE_DIRECTIVES = new Set(["if", "else-if", "else", "show"]);
+/** ElementTypes.ELEMENT — a plain HTML element, as opposed to COMPONENT / SLOT / TEMPLATE. */
+const ELEMENT_PLAIN = 0;
+
+/**
+ * `appear` makes the Transition animate on INITIAL render, so it has a reason to exist even
+ * with static content and no toggle. Verified against eslint-plugin-vue: it reports a plain
+ * `<Transition>` but not `<Transition appear>`. Without this exemption the rule produced 10
+ * false positives on this repo, every one of them a legitimate appear-animation.
+ */
+function hasAppear(node) {
+    return (node.props ?? []).some((prop) => {
+        if (prop.type === PROP_ATTRIBUTE) {
+            return prop.name === "appear";
+        }
+        return (
+            prop.type === PROP_DIRECTIVE &&
+            prop.name === "bind" &&
+            prop.arg?.type === 4 /* SIMPLE_EXPRESSION */ &&
+            prop.arg.content === "appear"
+        );
+    });
+}
+
+function hasToggle(node) {
+    for (const prop of node.props ?? []) {
+        if (prop.type !== PROP_DIRECTIVE) {
+            continue;
+        }
+        if (TOGGLE_DIRECTIVES.has(prop.name)) {
+            return true;
+        }
+        // Dynamic `<component :is>`: swapping the resolved component is the enter/leave.
+        if (
+            prop.name === "bind" &&
+            prop.arg?.type === 4 /* SIMPLE_EXPRESSION */ &&
+            prop.arg.content === "is"
+        ) {
+            return true;
+        }
+    }
+    return false;
+}
+
+export default {
+    meta: {
+        type: "problem",
+        docs: {
+            description: "require control the display of the content inside `<transition>`",
+            recommended: true,
+        },
+        schema: [],
+        messages: { m: "" },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".vue")) {
+            return {};
+        }
+        return {
+            Program() {
+                const entry = parseSfc(context.filename);
+                const ast = entry.descriptor.template?.ast;
+                if (!ast) {
+                    return;
+                }
+                walkTemplate(ast, (node) => {
+                    if (node.type !== NODE_ELEMENT || !TRANSITION_TAGS.has(node.tag)) {
+                        return;
+                    }
+                    if (hasAppear(node)) {
+                        return;
+                    }
+                    // Only plain HTML element children are judgeable; see the header note.
+                    const elements = (node.children ?? []).filter(
+                        (child) =>
+                            child.type === NODE_ELEMENT && child.tagType === ELEMENT_PLAIN,
+                    );
+                    if (!elements.length) {
+                        return;
+                    }
+                    if (elements.some(hasToggle)) {
+                        return;
+                    }
+                    const child = elements[0];
+                    reportAtFileOffset(
+                        context,
+                        entry,
+                        child.loc.start.offset,
+                        child.loc.end.offset,
+                        `Nothing inside this <${node.tag}> is ever toggled, so the transition never runs. Add \`v-if\` / \`v-show\` to the child (not to the <${node.tag}> itself), or use a dynamic \`<component :is>\`.`,
+                    );
+                });
+            },
+        };
+    },
+};