rw-jsx-control v1.0.12

rw-jsx-control

function App() {
    const listRef = ref([1, 2, 3, 4]);
    const countRef = ref(0);
    setInterval(() => {
        listRef.value.unshift(listRef.value.length + 1);
        countRef.value++;
    }, 1000);
    return () => (
        <>
            <h1>Rw App Control</h1>
            <For each={listRef.value}>
                {/** main */}
                {(item) => <li key={item}>{item}</li>}
                {/** fallback */}
                <p>fallback</p>
            </For>

            {/** Show */}
            <Show when={countRef.value % 2 === 0} fallback={() => <h3>false fallback</h3>}>
                {() => <h2>true Content fn h2</h2>}
                <h2>true Content h2</h2>
                <p>true Content p</p>
            </Show>

            {/** Switch */}
            <Switch fallback={<h3>false fallback</h3>}>
                <Match when={countRef.value > 0 && countRef.value < 5}>
                    <h2>Match Content 1</h2>
                    <h2>Match Content h2</h2>
                    {() => <h2>Match Content fn h2</h2>}
                </Match>
                <Match when={countRef.value > 5 && countRef.value < 10}>
                    <h2>Match Content 2</h2>
                </Match>
                <Match when={countRef.value > 10 && countRef.value < 15}>
                    <h2>Match Content 3</h2>
                </Match>
            </Switch>
        </>
    );
}