[2.0 / next] A first-load <Loading> reveals content for a write still held outside it (F-7)

Abierto
  • ¿Algo no está bien?
#4,593 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
15/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, typescript
Área
frontend

Línea de trabajo

The reproduction is a vitest spec to add under packages/web/test/, and the third frame is where it fails. The question is how a Loading boundary's first-load reveal interacts with a write still held by a memo read outside it, which needs familiarity with the reactive scheduler's hold and flush logic. Done means the spec's frames match the expected array, with the boundary keeping its fallback until the held s = 1 write commits.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Describe the bug

a and b both ask by s. a and s are read outside a <Loading>, and b is read inside it, on its first load. Writing s is held on a:1, so the outside still shows a=10s=0. When b:1 resolves, the boundary reveals b=21, the answer for s = 1, beside s=0. The frame becomes whole only when a:1 lands.

Found by checking every frame of generated ryansolid/reactivescript programs, compiled onto Solid, against F-1.

Your Example Website or App

The vitest spec below (in packages/web/test/), on next @ 77be406ca.

Steps to Reproduce the Bug or Issue
import { render } from "@solidjs/web";
import { createMemo, createSignal, Errored, flush, Loading } from "solid-js";
import { expect, it } from "vitest";

const tick = async () => { for (let i = 0; i < 2; i++) { await new Promise(r => setTimeout(r, 0)); flush(); } };

it("a first-load <Loading> does not reveal content derived from a write still held outside it", async () => {
  const flights = new Map<string, (v: number) => void>();
  const ask = (key: string) => new Promise<number>(resolve => flights.set(key, resolve));
  const [s, setS] = createSignal(0);
  const el = document.createElement("div");
  const frames: string[] = [];
  const dispose = render(() => {
    const a = createMemo(() => ask("a:" + s()));   // read outside the boundary: holds the write
    const b = createMemo(() => ask("b:" + s()));   // read inside the boundary, on its first load
    return (
      <Errored fallback={<p>error</p>}>
        <p>a={a()}</p>
        <p>s={s()}</p>
        <Loading fallback={<p>loading b</p>}><p>b={b()}</p></Loading>
      </Errored>
    );
  }, el);
  await tick();
  flights.get("a:0")!(10); await tick(); frames.push(el.textContent!);
  setS(1); flush(); await tick();        frames.push(el.textContent!);   // a:1 and b:1 asked; the write is held on a:1
  flights.get("b:1")!(21); await tick(); frames.push(el.textContent!);   // b's answer for s = 1
  flights.get("a:1")!(11); await tick(); frames.push(el.textContent!);
  dispose();
  expect(frames).toEqual([
    "a=10s=0loading b",
    "a=10s=0loading b",
    "a=10s=0loading b",   // received "a=10s=0b=21": b for s = 1 beside s = 0
    "a=11s=1b=21",
  ]);
});

npx vitest run in packages/web. The third frame is a=10s=0b=21.

Expected behavior

The boundary keeps its fallback until the held s = 1 write commits, then reveals b=21 together with a=11s=1. Nothing reveals ahead of the hold it belongs to (F-7), and the screen stays whole (F-1).

Platform
  • OS: macOS
  • Browser: n/a (jsdom)
  • Version: solid-js 2.0.0-rc.20, next @ 77be406ca
Lenguaje dominante
TypeScript
Estrellas
36.2k
Forks
1.1k
Merge medio
11 h 5 min
PR fusionados (30 d)
475

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de solidjs/solid

Todos los issues de solidjs/solid

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.