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

Đã đóng
  • Có gì không ổn?
#4,593 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
15/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
36.2k
Fork
1.1k
Merge trung bình
10 giờ 39 phút
Pull request đã merge (30 ngày)
500

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của solidjs/solid

Tất cả issue của solidjs/solid

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.