lazy(): remounting an already-loaded component renders empty (or the Suspense fallback) since 1.9.14 #4118

import { createRoot, lazy, Suspense } from "solid-js";
import { render } from "solid-js/web";
import { createSignal } from "solid-js";

const flush = () => new Promise<void>((r) => setTimeout(r, 0));

function App() {
  const [lines, setLines] = createSignal<{ text: string; pass: boolean }[]>([]);

  async function runTest() {
    const out: { text: string; pass: boolean }[] = [];
    const check = (label: string, actual: unknown) => {
      const pass = actual === "loaded";
      out.push({ text: `${label}: ${JSON.stringify(actual)}`, pass });
    };

    // ── Case 1: without Suspense ──────────────────────────────
    const Lazy1 = lazy(() => Promise.resolve({ default: () => "loaded" }));
    let first1 = createRoot((d) => ({ d, v: Lazy1({}) }));
    await flush();
    first1.d();
    let second1 = createRoot((d) => ({ d, v: Lazy1({}) }));
    const r1 =
      typeof second1.v === "function" ? (second1.v as any)() : second1.v;
    check("without Suspense – remount", r1);
    second1.d();

    // ── Case 2: with Suspense ─────────────────────────────────
    const Lazy2 = lazy(() => Promise.resolve({ default: () => "loaded" }));
    const mkView = () =>
      Suspense({
        fallback: "fallback",
        get children() {
          return Lazy2({});
        },
      });
    let first2 = createRoot((d) => ({ d, v: mkView() }));
    await flush();
    first2.d();
    let second2 = createRoot((d) => ({ d, v: mkView() }));
    const r2 =
      typeof second2.v === "function" ? (second2.v as any)() : second2.v;
    check("with Suspense    – remount", r2);
    second2.d();

    setLines(out);
  }

  return (
    <div style="font-family:monospace;padding:1rem">
      <h2>lazy() remount regression · solid-js 1.9.14–1.9.17</h2>
      <p>
        Expected: <code>"loaded"</code> both times (solid-js 1.9.13 ✅)
      </p>
      <button onClick={runTest}>▶ Run test</button>
      <ul>
        {lines().map((l) => (
          <li style={`color:${l.pass ? "green" : "red"}`}>
            {l.pass ? "✅" : "❌"} {l.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

render(() => <App />, document.getElementById("app")!);