fix(component-library): treat slot content that renders only comments as empty

packages/component-library/src/utils/slot.spec.ts

@@ -0,0 +1,62 @@
+import { render } from "@testing-library/vue";
+import { defineComponent } from "vue";
+import { hasSlotContent } from "./slot";
+
+function hasDefaultSlotContent(template: string, items: { id: number; visible: boolean }[] = []) {
+  let result: boolean | undefined;
+
+  const Probe = defineComponent({
+    setup(_, { slots }) {
+      return () => {
+        result = hasSlotContent(slots.default);
+        return null;
+      };
+    },
+  });
+
+  render({
+    components: { Probe },
+    data: () => ({ items }),
+    template: `<Probe>${template}</Probe>`,
+  });
+
+  return result;
+}
+
+const list = `
+  <template v-for="item in items" :key="item.id">
+    <span v-if="item.visible">Item {{ item.id }}</span>
+  </template>
+`;
+
+describe("hasSlotContent", () => {
+  it("treats an element hidden by v-if as empty", () => {
+    // ACT
+    const result = hasDefaultSlotContent(`<span v-if="false">Error</span>`);
+
+    // ASSERT
+    expect(result).toBe(false);
+  });
+
+  it("treats a v-for whose items are all hidden by v-if as empty", () => {
+    // ACT
+    const result = hasDefaultSlotContent(list, [
+      { id: 1, visible: false },
+      { id: 2, visible: false },
+    ]);
+
+    // ASSERT
+    expect(result).toBe(false);
+  });
+
+  it("treats a v-for with one shown item as content", () => {
+    // ACT
+    const result = hasDefaultSlotContent(list, [
+      { id: 1, visible: false },
+      { id: 2, visible: true },
+    ]);
+
+    // ASSERT
+    expect(result).toBe(true);
+  });
+});

packages/component-library/src/utils/slot.ts

@@ -1,25 +1,20 @@
-import { Comment, Text, type Slot, type VNode, Fragment } from "vue";
+import { Comment, Fragment, Text, isVNode, type VNodeChild } from "vue";
 
-export function hasSlotContent(slot: Slot | undefined | null, props: any = {}) {
-  return !isSlotEmpty(slot, props);
-}
+/** A slot function as exposed by `useSlots()` or typed via `defineSlots()`. */
+type SlotLike = (...args: any[]) => unknown;
 
-function isSlotEmpty(slot: Slot | undefined | null, props: any = {}) {
-  return isVNodeEmpty(slot?.(props));
+export function hasSlotContent(slot: SlotLike | undefined | null, props: any = {}) {
+  return !isEmpty(slot?.(props) as VNodeChild);
 }
 
-function isVNodeEmpty(vnode: VNode | VNode[] | undefined | null) {
-  return (
-    !vnode ||
-    asArray(vnode).every(
-      (vnode) =>
-        vnode.type === Comment ||
-        (vnode.type === Text && !vnode.children?.length) ||
-        (vnode.type === Fragment && !vnode.children?.length),
-    )
-  );
-}
+/**
+ * Comments (left by `v-if`), empty text and fragments (rendered by `v-for`) whose children
+ * are all empty render nothing.
+ */
+function isEmpty(node: VNodeChild): boolean {
+  if (Array.isArray(node)) return node.every(isEmpty);
+  if (!isVNode(node)) return node == null || typeof node === "boolean" || node === "";
+  if (node.type === Fragment) return isEmpty(node.children as VNodeChild);
 
-function asArray<T>(arg: T | T[] | null) {
-  return Array.isArray(arg) ? arg : arg !== null ? [arg] : [];
+  return node.type === Comment || (node.type === Text && !node.children?.length);
 }