-
+
- + + {heading.textContent} + + + }} +
as HTMLHRElement, ...alsoAvailable] + else + return [...matches, ...alsoAvailable] + }) + + const select = + + + return select +} + +type BruhLanguagePickerAttributes = { + "languages": ReadonlyArray
+ {div}
as HTMLDivElement
+ const c2 = {text}
as HTMLDivElement
+ const c3 = {comment}
as HTMLDivElement
+ expect(c1.firstChild).toBe(div)
+ expect(c2.firstChild).toBe(text)
+ expect(c3.firstChild).toBe(comment)
+ })
+
+ test("null becomes Comment node", () => {
+ const container = {null}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Comment)
+ expect((container.firstChild as Comment).data).toBe("null")
+ })
+
+ test("undefined becomes Comment node", () => {
+ const container = {undefined}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Comment)
+ expect((container.firstChild as Comment).data).toBe("undefined")
+ })
+
+ test("true becomes Comment node", () => {
+ const container = {true}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Comment)
+ expect((container.firstChild as Comment).data).toBe("true")
+ })
+
+ test("false becomes Comment node", () => {
+ const container = {false}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Comment)
+ expect((container.firstChild as Comment).data).toBe("false")
+ })
+
+ test("string becomes Text node", () => {
+ const container = hello
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Text)
+ expect(container.firstChild!.textContent).toBe("hello")
+ })
+
+ test("empty string becomes Text node", () => {
+ const container = {""}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Text)
+ expect(container.firstChild!.textContent).toBe("")
+ })
+
+ test("number becomes Text node", () => {
+ const container = {42}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Text)
+ expect(container.firstChild!.textContent).toBe("42")
+ })
+
+ test("0 becomes Text node", () => {
+ const container = {0}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Text)
+ expect(container.firstChild!.textContent).toBe("0")
+ })
+
+ test("NaN becomes Text node", () => {
+ const container = {NaN}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Text)
+ expect(container.firstChild!.textContent).toBe("NaN")
+ })
+
+ test("Infinity becomes Text node", () => {
+ const container = {Infinity}
as HTMLDivElement
+ expect(container.firstChild).toBeInstanceOf(Text)
+ expect(container.firstChild!.textContent).toBe("Infinity")
+ })
+})
+
+describe("Children Flattening & Ordering", () => {
+ test("single string child", () => {
+ const container = hello
as HTMLDivElement
+ expect(container.childNodes.length).toBe(1)
+ expect(container.textContent).toBe("hello")
+ })
+
+ test("multiple children in order", () => {
+ const container = {"a"}{"b"}{"c"}
as HTMLDivElement
+ expect(container.childNodes.length).toBe(3)
+ expect(container.textContent).toBe("abc")
+ })
+
+ test("nested arrays are flattened", () => {
+ const container = {["a", ["b", ["c"]]]}
as HTMLDivElement
+ expect(container.childNodes.length).toBe(3)
+ expect(container.textContent).toBe("abc")
+ })
+
+ test("mixed children types", () => {
+ const span = x
+ const container = {span}{"text"}{null}{42}
as HTMLDivElement
+ expect(container.childNodes.length).toBe(4)
+ expect(container.childNodes[0]).toBe(span)
+ expect(container.childNodes[1]).toBeInstanceOf(Text)
+ expect(container.childNodes[2]).toBeInstanceOf(Comment)
+ expect(container.childNodes[3]).toBeInstanceOf(Text)
+ })
+
+ test("Set iterable", () => {
+ const container = {new Set(["a", "b"])}
as HTMLDivElement
+ expect(container.childNodes.length).toBe(2)
+ expect(container.textContent).toBe("ab")
+ })
+
+ test("generator function", () => {
+ function* gen() {
+ yield "a"
+ yield "b"
+ yield "c"
+ }
+ const container = {gen()}
as HTMLDivElement
+ expect(container.childNodes.length).toBe(3)
+ expect(container.textContent).toBe("abc")
+ })
+
+ test("DOM order matches depth-first left-to-right", () => {
+ const container = {[["a", "b"], [["c"], "d"], "e"]}
as HTMLDivElement
+ expect(container.textContent).toBe("abcde")
+ })
+})
+
+describe("Reactive Terminal Child Swapping", () => {
+ test("initial node reflects peek value", async () => {
+ const content = r("initial")
+ const container = {content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.textContent).toBe("initial")
+
+ document.body.removeChild(container)
+ })
+
+ test("update swaps node in-place", async () => {
+ const content = r("a")
+ const container = {content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ content.value = "b"
+ flush()
+
+ expect(container.textContent).toBe("b")
+ expect(container.childNodes.length).toBe(1)
+
+ document.body.removeChild(container)
+ })
+
+ test("swap across types: string to null", async () => {
+ const content = r{content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.firstChild).toBeInstanceOf(Text)
+
+ content.value = null
+ flush()
+
+ expect(container.firstChild).toBeInstanceOf(Comment)
+ expect((container.firstChild as Comment).data).toBe("null")
+
+ document.body.removeChild(container)
+ })
+
+ test("swap across types: null to Node", async () => {
+ const span = hello
+ const content = r{content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.firstChild).toBeInstanceOf(Comment)
+
+ content.value = span
+ flush()
+
+ expect(container.firstChild).toBe(span)
+
+ document.body.removeChild(container)
+ })
+
+ test("ownedReactivesSymbol tracks reactive on initial node", async () => {
+ const content = r("a")
+ const container = {content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ const node = container.firstChild as Text
+ expect(node[ownedReactivesSymbol]).toBeDefined()
+ expect(node[ownedReactivesSymbol]?.size).toBe(1)
+
+ document.body.removeChild(container)
+ })
+
+ test("swap to iterable upgrades to iterable swapper", async () => {
+ const content = r{content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.childNodes.length).toBe(1)
+
+ content.value = ["a", "b", "c"]
+ flush()
+
+ expect(container.textContent).toBe("abc")
+
+ document.body.removeChild(container)
+ })
+
+ test("warns when swapping without parent", async () => {
+ const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+ const content = r("a")
+ const container = {content}
as HTMLDivElement
+ flush()
+
+ const node = container.firstChild as Text
+ node.remove()
+
+ content.value = "b"
+ flush()
+
+ expect(warnSpy).toHaveBeenCalled()
+ warnSpy.mockRestore()
+ })
+})
+
+describe("Terminal ↔ Iterable Transitions", () => {
+ test("terminal to iterable transition", async () => {
+ const content = r{content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.textContent).toBe("single")
+ expect(container.childNodes.length).toBe(1)
+
+ content.value = ["a", "b", "c"]
+ flush()
+
+ expect(container.textContent).toBe("abc")
+ const nodes = [...container.childNodes]
+ expect(nodes[0]).toBeInstanceOf(Comment)
+ expect((nodes[0] as Comment).data).toBe("[")
+ expect(nodes[nodes.length - 1]).toBeInstanceOf(Comment)
+ expect((nodes[nodes.length - 1] as Comment).data).toBe("]")
+ })
+
+ test("iterable to terminal transition", async () => {
+ const content = r{content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.textContent).toBe("ab")
+ expect(container.firstChild).toBeInstanceOf(Comment)
+
+ content.value = "single"
+ flush()
+
+ expect(container.textContent).toBe("single")
+ expect(container.childNodes.length).toBe(1)
+ expect(container.firstChild).toBeInstanceOf(Text)
+ })
+
+ test("terminal → iterable → terminal round trip", async () => {
+ const content = r{content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ content.value = ["a", "b"]
+ flush()
+ expect(container.textContent).toBe("ab")
+
+ content.value = "end"
+ flush()
+ expect(container.textContent).toBe("end")
+ expect(container.childNodes.length).toBe(1)
+ })
+
+ test("reactive iterable updates after mount", async () => {
+ const items = r(["a", "b"])
+ const container = {items}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.textContent).toBe("ab")
+
+ items.value = ["x", "y", "z"]
+ flush()
+ expect(container.textContent).toBe("xyz")
+
+ items.value = []
+ flush()
+ expect(container.childNodes.length).toBe(2)
+ expect(container.textContent).toBe("")
+ })
+})
+
+describe("ownedReactivesSymbol bookkeeping", () => {
+ test("reactive child node has ownedReactives set", async () => {
+ const content = r("test")
+ const container = {content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ const node = container.firstChild!
+ expect(node[ownedReactivesSymbol]).toBeDefined()
+ expect(node[ownedReactivesSymbol]!.size).toBe(1)
+ })
+
+ test("ownership transfers on swap", async () => {
+ const content = r("first")
+ const container = {content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ const oldNode = container.firstChild!
+ expect(oldNode[ownedReactivesSymbol]!.size).toBe(1)
+
+ content.value = "second"
+ flush()
+
+ const newNode = container.firstChild!
+ expect(newNode).not.toBe(oldNode)
+ expect(newNode[ownedReactivesSymbol]!.size).toBe(1)
+ expect(oldNode[ownedReactivesSymbol]!.size).toBe(0)
+ })
+})
+
+describe("unmounted node behavior", () => {
+ test("updating reactive after node removed from parent warns but doesn't throw", async () => {
+ const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+ const content = r("initial")
+ const container = {content}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ const node = container.firstChild!
+ container.removeChild(node)
+
+ content.value = "updated"
+ flush()
+
+ expect(warnSpy).toHaveBeenCalled()
+ warnSpy.mockRestore()
+ })
+})
+
+describe("nested reactive children", () => {
+ test("nested reactive resolves correctly", async () => {
+ const inner = r("hello")
+ const outer = r(inner)
+ const container = {outer}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.textContent).toBe("hello")
+
+ inner.value = "world"
+ flush()
+ expect(container.textContent).toBe("world")
+ })
+
+ test("switching nested reactive", async () => {
+ const a = r("A")
+ const b = r("B")
+ const outer = r{outer}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.textContent).toBe("A")
+
+ outer.value = b
+ flush()
+ expect(container.textContent).toBe("B")
+
+ a.value = "A2"
+ flush()
+ expect(container.textContent).toBe("B")
+ })
+})
+
+describe("Reactive Iterable Swapping", () => {
+ test("initial render has markers and content", () => {
+ const items = r(["a", "b"])
+ const container = {items}
as HTMLDivElement
+ document.body.appendChild(container)
+
+ expect(container.textContent).toBe("ab")
+
+ document.body.removeChild(container)
+ })
+
+ test("update replaces only interior content", async () => {
+ const before = before
+ const after = after
+ const items = r{before}{items}{after}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.textContent).toBe("beforeabafter")
+
+ items.value = ["x", "y", "z"]
+ flush()
+
+ expect(container.firstChild).toBe(before)
+ expect(container.lastChild).toBe(after)
+ expect(container.textContent).toBe("beforexyzafter")
+
+ document.body.removeChild(container)
+ })
+
+ test("update with different length", async () => {
+ const items = r{items}
as HTMLDivElement
+ document.body.appendChild(container)
+ flush()
+
+ expect(container.textContent).toBe("abc")
+
+ items.value = ["x"]
+ flush()
+
+ expect(container.textContent).toBe("x")
+
+ items.value = ["1", "2", "3", "4", "5"]
+ flush()
+
+ expect(container.textContent).toBe("12345")
+
+ document.body.removeChild(container)
+ })
+})
+
+describe("applyStyles", () => {
+ test("sets style property", () => {
+ const div = document.createElement("div")
+ applyStyles(div, { color: "red" })
+ expect(div.style.color).toBe("red")
+ })
+
+ test("removes style when null", () => {
+ const div = document.createElement("div")
+ div.style.color = "red"
+ applyStyles(div, { color: null })
+ expect(div.style.color).toBe("")
+ })
+
+ test("removes style when undefined", () => {
+ const div = document.createElement("div")
+ div.style.color = "red"
+ applyStyles(div, { color: undefined })
+ expect(div.style.color).toBe("")
+ })
+
+ test("reactive style updates", async () => {
+ const color = r("red")
+ const div = document.createElement("div")
+ applyStyles(div, { color })
+ flush()
+
+ expect(div.style.color).toBe("red")
+
+ color.value = "blue"
+ flush()
+
+ expect(div.style.color).toBe("blue")
+ })
+
+ test("reactive tracks ownership", () => {
+ const color = r("red")
+ const div = document.createElement("div")
+ applyStyles(div, { color })
+
+ expect(div[ownedReactivesSymbol]?.has(color)).toBe(true)
+ })
+
+ test("reactive style removal", async () => {
+ const color = r