Conditional Rendering with Run Fails When Returning Components

[erwinheldy]

For example:

import { Run, useSignal } from 'solid-react';

export default function App() {
  const [count, setCount] = useSignal(0);
  const inc = () => setCount((count) => count + 1);
  const dec = () => setCount((count) => count - 1);

  return (
    <>
      <button onClick={dec}>-</button>
      {count()}
      <button onClick={inc}>+</button>

      <hr />
      {/* This works */}
      {Run(() => (count() > 10 ? 'High' : 'Low'))}

      <hr />
      {/* This works */}
      {Run(() => (count() > 10 ? <High /> : 'Low'))}

      <hr />
      {/* This doesn't work */}
      {Run(() => (count() > 10 ? <High /> : <Low />))}
    </>
  );
}

function High() {
  return <h1>High</h1>;
}

function Low() {
  return <h1>Low</h1>;
}

Demo: https://stackblitz.com/edit/vitejs-vite-nzvjm9ji?file=src%2FApp.tsx