Skip to content

Load documentation by page and examples near the viewport - #59

Open
Floating-Y wants to merge 2 commits into
deeplethe:devfrom
Floating-Y:fix/route-loading-boundaries
Open

Floating-Y wants to merge 2 commits into
deeplethe:devfrom
Floating-Y:fix/route-loading-boundaries

Conversation

@Floating-Y

@Floating-Y Floating-Y commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

Why

The shared entry loaded home-page charts and every document body on unrelated routes. Standalone Block previews also imported the listing's Code panel and highlighter. Within a document, every ComponentPreview still mounted its example and requested its raw source immediately, including previews far below the viewport and unused source for hideCode previews.

What changes

  • Lazy-load Home and the document renderer; separate the metadata-only catalog, layout and component directory from document bodies.
  • Generate one JSON body per section/slug, load only the selected body with import.meta.glob, clean deleted pages, and assert catalog/body consistency. Preserve loading layout, errors, fast-navigation isolation, anchors and history.
  • Move BlockView into its own entry while preserving theme, image fallback and Toaster behavior.
  • Normalize Windows document input and invoke the installed registry CLI through Node. Registry contents and dependencies remain unchanged.
  • Activate document previews once they enter a 300px viewport margin, reusing React.lazy, import.meta.glob and the existing cache. Keep activated examples mounted so inputs, selections and expanded code survive scrolling.
  • Load ordinary preview source on activation and never request raw source for hideCode previews. Preserve three-line summaries, View Code, full code, copying and installation ComponentSource loading.
  • Reserve loading space while retaining custom/responsive heights. Clean up observers under StrictMode, load immediately without IntersectionObserver, and surface failures through the existing document error boundary. Guard the table-of-contents observer for the same fallback.
  • Add a dependency-free browser behavior check. Keep /dev/examples on its independent full-mount path.

How it was checked

Based on dev b328113; retains upstream fragment-link and malformed-escape fixes.

Current preview implementation:

  • npm run docs, npm run typecheck, npm run build and git diff --check passed. The generated registry has no committed changes.
  • node --test scripts/block-metadata.test.mjs: 8 passed.
  • /scripts/check-component-preview.html, served by npm run dev: 11 behavior assertions passed, covering first activation, non-intersecting callbacks, retained input/DOM/code state, hideCode source suppression, StrictMode cleanup and fallback without IntersectionObserver.
  • /dev/examples: 389/389 mounted, 0 failed.
  • Button, Input, Chart and Calendar checked in light/dark themes, desktop and 390px layouts: expanded code, copying, scroll-away/return, directory links, direct hash URLs and browser back/forward. Input values, Chart selection and Calendar selection remained after scrolling. Custom heights, including Input's 32rem and Calendar's 560px preview, were retained.
  • Installation Manual source loading checked. Both example and raw-source requests were deliberately made to return 500: the document showed a visible error instead of loading indefinitely. Disabling IntersectionObserver still loaded the Button document immediately.
  • Actual development request records: Button's first view requested only button-demo JS and raw source among its 14 previews. button-size made no own JS/raw requests at approximately 350px below the viewport; both appeared at approximately 250px. Chart's chart-demo and chart-tooltip requested JS and no raw source. Direct hash navigation loaded previews near the target. Shared dependencies may already be requested by other visible examples.

Earlier route-split validation, recorded for a264b58:

  • npm ci; 76-document catalog/body consistency, repeated generation and add/delete checks.
  • /dev/examples: 389/389 mounted, 0 failed in both themes.
  • Headless Chrome at 1440x1000, dark/light, with both / and /solid-glass/: search, navigation, invalid URLs, delayed loading, rapid navigation, failed-body recovery, preview and image fallback.
  • Production responses mapped to Vite chunk.modules: Home loaded no document bodies/Markdown; installation loaded only its body and no Recharts; the component directory loaded no bodies; login-03 loaded no bodies, Markdown, Recharts, Code panel or highlighter. Development-only example data was absent from production. The prior response-byte measurements were not repeated after the preview change.

Other browsers and physical devices were not tested. Auto-height placeholders remain estimates (Chart measured 404px before loading and about 431px afterward at a 506px viewport). Existing nativeButton and value/defaultValue development warnings remain outside this change. No speedup percentage is claimed.

Before review

  • Every commit is signed off (DCO)
  • npm run typecheck and npm run build pass
  • /dev/examples reports 0 failed
  • Affected pages checked in both themes, including open code
  • No material, registry, dependency or URL changes

Signed-off-by: danwood <118035379+Floating-Y@users.noreply.github.com>
Signed-off-by: danwood <118035379+Floating-Y@users.noreply.github.com>
@Floating-Y Floating-Y changed the title Load documentation and previews only on their own routes Load documentation by page and examples near the viewport Oct 18, 2026

@WaylandYang WaylandYang left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this — splitting the docs into per-page bodies, lazy-loading Home/DocPage and mounting previews near the viewport is a direction we want, and the write-up of what you checked is very thorough. A few things before we can take it:

  1. Please split out the Windows changes. CRLF normalization in build-docs.mjs and running the registry CLI via node_modules/shadcn/dist/index.js are unrelated to loading boundaries. The latter also depends on a private path inside the shadcn package that can move in any release; if we do this, resolve the package's bin instead. A separate small PR is easier to review and revert.
  2. No per-example special case in ComponentPreview. name === "chart-demo" && "h-[404px]" puts one example's layout into the generic preview. If the chart needs reserved height, give it a minimum height where its preview is declared (its className in the page) or in the example itself.
  3. scripts/check-component-preview.html. The repository deliberately has no unit tests and CI doesn't run this page, so it would go stale. Please drop it from this PR; the behaviours it covers are well described in the PR text.
  4. The read-back in build-docs.mjs. Writing every file and then re-reading and deep-comparing it against what was just written is more machinery than the risk warrants. Keeping the unique-key/slug assertions and the stale-file cleanup is enough.
  5. A failed source fetch takes down the whole page. useSource now throws into DocErrorBoundary, so one failed ?raw request replaces the entire document with "Unable to load this document". Please keep that failure local to the code panel (e.g. an inline message there) and reserve the document boundary for the body itself.
  6. Anchors with placeholders. Placeholders reserve 208px while real previews are often taller, so on a direct #hash link previews just above the target activate and push it down. Browsers without scroll anchoring (Safari in particular) will land in the wrong place. Please check this outside Chrome, or re-scroll to the target once the previews around it have settled.

Happy to look again once these are in. Thanks!

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants