Repository navigation
fix(docs): render all code example languages at build time - #192
Merged
Merged
Conversation
The non-React language panes are Nuxt server components mounted lazily on tab click. On the statically deployed site there is no server to answer the runtime island request, so the Vue/Solid/Native/Marko tabs rendered empty (#174). All panes now render during prerender and toggle with v-show — the highlighted HTML ships in the static page, so the client-perf benefit of server components is preserved. Prerendering all panes also surfaced a build-breaking error the lazy islands had been hiding: docs/examples/config/config.ts mirrors ParentConfig and still used the unparameterized event handler types (TS2314 after the #186 fix) — twoslash rejected the sample and the island 500'd. Updated to SortEvent<T> et al. Verified: nuxt generate succeeds (71 island routes prerendered, zero errors) and the generated index.html contains raw-code containers for all five languages. Fixes #174.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
justin-schroeder
left a comment
justin-schroeder
left a comment
Member
Author
There was a problem hiding this comment.
Review notes: payload size is the main tradeoff — five static panes per example instead of one. That's inert HTML (no extra JS), and it's what made the build catch the broken Native sample, which I consider the stronger argument: lazy islands turned doc-sample type errors into invisible runtime 500s. The loadedLangs machinery and its watch hook are gone; collectRawCode's retry loop is kept (it still guards slow hydration) but now finds every container on the first pass.
This was referenced Jun 11, 2026
Merged
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #174 (only the React tab renders on drag-and-drop.formkit.com).
Root cause — two layers
v-ifon first tab click). On the statically deployed site, that mount issues a runtime/__nuxt_island/...request with no server to answer it → empty pane.docs/examples/config/config.tsmirrorsParentConfigand still used the unparameterized handler types — after fix(types): parameterize event handler types with the config generic #186 that's TS2314, twoslash rejects the sample, and the Native island 500s even with a server. This is consistent with the issue reporting all non-React tabs blank.Fix
v-show. The highlighted HTML ships in the static page; the client-perf win of server components (no shiki/twoslash on the client) is preserved — the cost moves to build time.config.tsexample updated toSortEvent<T>et al.Verification
nuxt generatecompletes with zero prerender errors (71 island routes), where it previously failed.index.htmlcontains the raw-code containers and shiki output for all five languages (774 highlighted blocks).