feat(marko-virtual): post-release follow-ups: full option parity, streaming SSR Support with Resume, typed handles, e2e coverage, examples#1219
Conversation
|
Important Review skippedToo many files! This PR contains 191 files, which is 41 over the limit of 150. To get a review, narrow the scope: Upgrade to a paid plan to raise the limit. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (191)
You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
defunkt-dev
changed the title
defunkt-dev
changed the title
defunkt-dev
changed the title
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
|
@coderabbitai help |
ChatThere are 3 ways to chat with CodeRabbit:
CodeRabbit commands
Other keywords and placeholders
CodeRabbit configuration file (
|
|
@coderabbitai summary |
✅ Action performedSummary regeneration triggered. |
defunkt-dev
changed the title
… type-strict examples
To buildpnpm install
pnpm --filter @tanstack/virtual-core build
pnpm --filter @tanstack/marko-virtual build
pnpm --filter @tanstack/marko-virtual test:types To Test## runs unit tests
pnpm --filter @tanstack/marko-virtual exec vitest run --reporter=verbose
## runs e2e
pnpm -r --workspace-concurrency=1 --filter "./examples/marko/*" run test:e2eTo run examplespnpm --filter tanstack-marko-virtual-example-fixed dev
pnpm --filter tanstack-marko-virtual-example-variable dev
pnpm --filter tanstack-marko-virtual-example-dynamic dev
pnpm --filter tanstack-marko-virtual-example-grid dev
pnpm --filter tanstack-marko-virtual-example-smooth-scroll dev
pnpm --filter tanstack-marko-virtual-example-infinite-scroll dev
pnpm --filter tanstack-marko-virtual-example-window dev
pnpm --filter tanstack-marko-virtual-example-ssr dev
pnpm --filter tanstack-marko-virtual-example-ssr-fetch dev
pnpm --filter tanstack-marko-virtual-example-ssr-slice dev
pnpm --filter tanstack-marko-virtual-example-ssr-restore dev
pnpm --filter tanstack-marko-virtual-example-window-ssr-slice dev
pnpm --filter tanstack-marko-virtual-example-chat dev
pnpm --filter tanstack-marko-virtual-example-scroll-padding dev
pnpm --filter tanstack-marko-virtual-example-padding dev
pnpm --filter tanstack-marko-virtual-example-pretext dev
pnpm --filter tanstack-marko-virtual-example-sticky dev
pnpm --filter tanstack-marko-virtual-example-table dev
pnpm --filter tanstack-marko-virtual-example-chat-pretext dev |
1 participant
marko-virtual:
Follow-up to the initial
@tanstack/marko-virtualPR#1156, covering the review follow-upsand everything found while hardening.
packages/virtual-coreis untouched — thisPR is Marko-adapter-only. The file count (~190) is dominated by per-example
scaffolding (test suites, tsconfigs, generated route typings) across 19 examples; the
source-logic changes are concentrated in the two tags and the example pages.
1. SSR support (new architecture in the tags)
The tags are now SSR-safe by construction. On the server, a tag renders either an
empty container with the correct total height, or — when given
initialRect— theactual initial rows into the HTML, computed by a lightweight
renderSlicepass(no live virtualizer instance ever runs on the server). The live, observing instance
is built client-only on mount and takes over on resume (MarkoJS v6 does not replay).
Consumer-facing consequence, visible in the 7 pre-existing examples' diffs: the
<let/mounted>+<lifecycle onMount>+<if=mounted>guard scaffolding isdeleted — nobody needs to hide the virtualizer from the server anymore. Those
pages also migrate to the tag-variable API (
<virtualizer/v .../>, self-closing),the documented shape.
2. Full option parity
Both tags accept the remaining core options:
scrollMargin,enabled,isRtl,isScrollingResetDelay,useScrollendEvent,useAnimationFrameWithResizeObserver,laneAssignmentMode,useCachedMeasurements,debug, custommeasureElement; thewindow tag adds
horizontalandinitialOffset. Each option is proven by areal-Chromium behavioral test in
packages/marko-virtual/e2e/option-gates(a testrig, excluded from publish via the
filesfield).3. Typed tag variables + type verification in CI
The tag variables (
/v) are typed by exported interfaces —VirtualizerHandle/WindowVirtualizerHandle. Each tag ships a committedindex.d.marko(a types-onlytwin, like
.d.tsfor a template).pnpm test:typesnow runsmarko-type-check
over the whole package — CI verifies the committed declarations, never generates;
regeneration is manual (
pnpm types:generate, script included).4. Twelve new examples (7 → 19)
padding,scroll-padding,sticky,table,pretext— one per corefeature area (padding offsets, scroll padding, sticky headers, table semantics,
calculated text heights via
@chenglou/pretext).chat— bottom-anchored messaging:anchorTo="end",followOnAppend,history prepends that keep the visible message anchored, near-top auto-load with
a load-ahead trigger, and a real streamed reply over the network (marko-run
+handlerreturning a chunkedReadableStream).chat-pretext— chat rebuilt on calculated heights: prepends land withzero scroll correction at any width, and the streamed reply pushes its
growing height through
v.resizeItemper chunk (that API's first real consumer).behavior and raw view-source HTML in its suite:
ssr(no fetch, empty container, rows on client),ssr-fetch(server fetch,client rows),
ssr-slice(server fetch, rows in the server HTML viainitialRect),ssr-restore(server rows at a scroll offset),window-ssr-slice(server rows for the window tag).5. Tests
tags.test.tsexpanded; newoptions.test.ts(option plumbing)and
render-slice.test.ts(SSR seed math); fixtures updated + a new surfacefixture.
share port 4173, so they run sequentially (command below).
6. Fixes
keyed loop lose their subscription to a page-level signal — which broke the chat
example's streamed reply in prod builds (text arrived and was stored, but never
painted). Reproduced in a 25-line page with no TanStack code, bisected to the fix
in marko 6.1.10, verified end-to-end here.
of the top (prepends land above the viewport; no hard-stop jolt), and
overflow-anchor: noneon the scroller (the virtualizer owns prependcompensation; native browser anchoring could double-compensate).
symlink formed a directory cycle that crashed
marko-run build(ENAMETOOLONG)via
@marko/vite's production template scan.tag-variable inference cycles,
String(item.key)for<for by>, thesecond-parameter event-handler idiom instead of
currentTarget, which Marko'sdelegated events reject at runtime).
7. Toolchain & workspace modernization
@marko/run^0.7 → ^0.10,marko→ ^6.2.2; package devDeps to@marko/vite^6.1.0.workspace:*→^3.14.0) soany example folder works when copied out of the monorepo.
@playwright/testaligned to the root's^1.53.1everywhere;sherifpasses.pnpm-workspace.yaml: single@marko/compiler(5.40.0) enforced via override(two compiler instances in the graph break taglib discovery — comment inline),
plus the option-gates workspace entry.
.marko-run/routes.d.ts(marko-run's generated routetypings) — same convention as marko-run's own examples: typed routes on a fresh
clone, and route-surface changes show up in review.
.gitignore:**/*.tsbuildinfo(incremental-build cache from the newper-example tsconfigs).
8. Docs
docs/framework/marko/marko-virtual.mdsubstantially expanded (full inputreference for both tags, SSR guide including the no-JS caveat for streamed
<await>content, TypeScript guide);docs/installation.mdgains the Markosection;
docs/config.jsonlists all 19 examples.How to verify
✅ Checklist
pnpm run test:pr.🚀 Release Impact