`isEmpty()` Fails to Check if `HTMLElement` is Empty

[narukeu]

Today while working on a Vue project, I tried to use isEmpty() to determine whether an HTMLElement is empty. However, it returned true even when the element was clearly not empty. I then created a new test project and confirmed that this issue indeed exists.

Below is my test code:

<template>
  <div ref="testRef">111</div>
  <div id="testId">aaa</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { isEmpty } from "radash";

const testRef = ref<HTMLElement | null>(null);

onMounted(() => {
  console.log("testRef", testRef.value);
  console.log("testRefIsEmpty", isEmpty(testRef.value));
  console.log(
    "testRef.value instanceof HTMLElement",
    testRef.value instanceof HTMLElement
  );
  const testIdEl = document.getElementById("testId");
  console.log("testId", testIdEl);
  console.log("testIdIsEmpty", isEmpty(testIdEl));
    console.log(
    "testId instanceof HTMLElement",
    testIdEl instanceof HTMLElement
  );
});
</script>

The browser output was as follows:

After analyzing the implementation of isEmpty(), I found that it checks emptiness using:

const keys = Object.keys(value).length;
return keys === 0;

This is the root of the issue — this method is not suitable for checking HTMLElement objects.

[narukeu]

@sodiray
I think this bug is quite important. Although the need to check if an HTMLElement is empty is relatively rare, this requirement does exist. I hope this bug can be fixed. Thank you.