Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Pages: loader props lose `Date` (and other non-JSON types) and their types don't say so

Đang mở
  • Có gì không ổn?
#606 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
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
full-stack

Hướng nghiên cứu

Start by reading pages/client.mjs and the server serialization entry points named in the issue: serializePageData, streamDeferredResponse, and the page-object responses. Trace how initial page data, deferred chunks, navigation, and action responses are serialized and parsed, then compare the behavior with the existing Serialize<T> fetch-client types. Done means the selected transport and InferProps types agree for supported values, with coverage for server rendering, hydration, and later navigations.

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

Mô tả

Pages: loader props lose Date (and other non-JSON types) and their types don't say so

What happens

Page data is sent as plain JSON, but InferProps types the props as the loader's raw return type. A loader that returns a Drizzle row with a timestamp_ms column (every Void auth table has these) gives the page a prop typed Date, which is only a Date during the server render:

Where createdAt is
InferProps<typeof loader> Date
Server render Date (raw loader output)
Browser, hydration and later navigations/actions string (ISO, from JSON.parse)

Code that type-checks then crashes in the browser. For example, Intl.DateTimeFormat#format(note.createdAt) renders on the server, then throws RangeError: Invalid time value during hydration.

// pages/notes.server.ts
export type Props = InferProps<typeof loader>;
export const loader = defineHandler(async () => ({
  notes: await db.select().from(noteTable), // createdAt: Date
}));

// pages/notes.tsx
const fmt = new Intl.DateTimeFormat('en', { dateStyle: 'medium' });

export default function Notes({ notes }: Props) {
  return notes.map((n) => <p key={n.id}>{fmt.format(n.createdAt)}</p>);
  // server: renders. browser: RangeError: Invalid time value
}

The same happens with Map/Set (they become {}), undefined fields (dropped), and bigint (throws).

Today the workaround is to convert every timestamp at the loader (createdAt: row.createdAt.getTime()).

The typed fetch client avoids the type problem by wrapping responses in Serialize<T> (Date → string), as described in the type-safety guide. Page props, which travel through the same JSON, don't get that treatment. Every meta-framework Void integrates with keeps Date in page data: SvelteKit and Nuxt (devalue), React Router (turbo-stream), TanStack Start (seroval). So this only affects native Void pages.

Proposal: serialize page data with devalue

devalue.stringify / devalue.parse preserve Date, Map, Set, bigint, undefined, RegExp, URL and repeated or cyclic references. The output is still JSON text, so it fits the existing <script type="application/json"> payload and escapeScriptJson. parse never evaluates code. SvelteKit and Nuxt use it for exactly this job.

The JSON calls that would need to switch (from the built [email protected] dist):

  • Server:
    • serializePageData and the frontmatter script (serialize-*.mjs)
    • the page-object and deferred-chunk JSON.stringify calls in streamDeferredResponse (protocol-*.mjs)
    • the JSON page-object response for client navigations and actions
  • Client (pages/client.mjs):
    • readInitialPageData
    • parsePageDataFromHtml
    • the navigation and action response.json() reads
    • clonePageData (could become structuredClone, which also keeps Date)

After the change:

  • The server render and the browser see the same values.
  • InferProps stays the raw return type, which is then accurate for everything devalue supports.
  • Loaders can return Drizzle rows directly.

Values devalue can't handle (functions, class instances) could be stripped from InferProps with a small mapped type, the way Serialize<T> already strips functions.

Alternatives
  • Minimal fix, no format change: apply Serialize<T> to InferProps, and render the server page from JSON.parse(JSON.stringify(props)). Types and runtime would then agree, but dates stay strings.
  • seroval: covers more types and can also stream Promises, so it could replace the custom defer() streaming. It's a bigger change, and some of its output modes are JavaScript that the browser evaluates.
Related
  • #478: InferProps reads __output directly, while routes wrap it in Serialize<…>.
  • #443: RSC for pages would change the transport for the React adapter. Page data is JSON (NDJSON for deferred props) today.
Ngôn ngữ chính
TypeScript
Star
580
Fork
56
Merge trung bình
11 giờ 23 phút
Pull request đã merge (30 ngày)
153

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

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

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 voidzero-dev/void

Tất cả issue của voidzero-dev/void

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.