Swap Child

<div class="flow">
    <div id="wrapper" class="box"></div>

    <button id="swapper">Swap!</button>
</div>

<template id="a-template">
    <div class="p:airy bg:rgb(255,100,0) center font-size:3xl">
        <span>A</span>
    </div>
</template>

<template id="b-template">
    <div class="p:airy bg:rgb(0,255,100) center font-size:3xl">
        <span>B</span>
    </div>
</template>

<script>
    import { swapChild } from "@dynamic-type/ddi/client";

    const wrapper = document.getElementById("wrapper")!;

    const aTemplate = document.getElementById(
        "a-template",
    ) as HTMLTemplateElement;

    const bTemplate = document.getElementById(
        "b-template",
    ) as HTMLTemplateElement;

    console.log({
        wrapper,
        aTemplate: aTemplate.content.cloneNode(true),
        bTemplate,
    });

    wrapper.appendChild(aTemplate.content.cloneNode(true));

    let current: "a" | "b" = "a";
    document.getElementById("swapper")?.addEventListener("click", () => {
        if (current === "a") {
            current = "b";
            swapChild(
                wrapper,
                bTemplate.content.cloneNode(true) as DocumentFragment,
            );
        } else {
            current = "a";
            swapChild(
                wrapper,
                aTemplate.content.cloneNode(true) as DocumentFragment,
            );
        }
    });
</script>