sindresorhus/eslint-plugin-unicorn

`prefer-dom-node-append`: Property 'append' does not exist on type 'ChildNode'.

Open

#2,474 opened on Oct 8, 2024

View on GitHub
 (2 comments) (3 reactions) (0 assignees)JavaScript (5,022 stars) (468 forks)user submission
docshelp wantedtypes

Description

Description

Code using appendChild on a Node should not be autofixed to use append. I think this can be improved by using type information and only raising an issue when (or at the very least not autofixing unless) it is known to be an Element.

This relates to https://github.com/sindresorhus/eslint-plugin-unicorn/issues/347

Fail

These are currently working fine and should still work

const foo = (element: Element, htmlElement: HTMLElement) => {
  element.appendChild(node)
  htmlElement.appendChild(node)
}

document.getElementsByName("name")[0]?.appendChild(document.createTextNode("foo"))

Pass

const foo = (node: Node, childNode: ChildNode, untyped,  element: Element) => {
  node.appendChild(node) // Current false positive
  childNode.appendChild(node) // Current false positive
  childNode.appendChild(node) // Current false positive
  element.append(node)
}

document.body.childNodes[0]?.appendChild(document.createTextNode("foo")) // Current false positive

Additional Info

These examples are oversimplified just to get the right type.

Contributor guide

Tech stack
typescriptjavascript
Domain
tooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Understanding of TypeScript typesESLint rule development
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
This bug is in the `prefer dom node append` rule. The rule currently autofixes `appendChild` to `append` on any Node, but `append` is only available on Element. The fix involves adding type checking using TypeScript's type information (e.g., via `@typescript eslint`). The goal is to only report and autofix when the target is known to be an Element. Review the rule implementation at `rules/prefer dom node append.js` and consider the approach discussed in related issue #347.