Add UI component demos to the docs site#11397
Open
brophdawg11 wants to merge 21 commits into
Open
Conversation
Discover *.demo.tsx files under packages/ui/src/components/*/demos/, parse @name and @description JSDoc metadata via the TypeScript compiler API, pre-compile each demo with esbuild (jsxImportSource: remix/ui) into docs/build/demos/, and render a per-demo page with the live component above a Prettier-formatted, Shiki-highlighted source listing under a shared rounded frame. Source listings rewrite @remix-run/* imports to remix/* so readers see the public package paths. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Covers home, top-level + subpackage overview pages, one of each API type (Type/Interface/Class/Function/Variable/Mixin), the button basic demo (live preview + Prettier-formatted source listing with rewritten imports and stripped JSDoc), and the not-found shell. Skipped at the top-level describe for now because the tests require docs/build/md to exist, which isn't always true in CI. Also wires up a 404 status on the docs route's not-found response. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
walkDemoFiles now recurses through packages/ui/src/components/ and only picks up *.demo.tsx files that are direct children of a demos/ directory, matching the path shape that getDemoPackageName already enforces. Files outside a demos/ folder are silently ignored. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
brophdawg11
commented
May 13, 2026
| @@ -0,0 +1,29 @@ | |||
| import { css } from '@remix-run/ui' | |||
Contributor
Author
There was a problem hiding this comment.
Example demo file copied from the existing ui/demo app
Contributor
Preview Build AvailableA preview build has been created for this PR. You can install it using: pnpm install "remix-run/remix#preview/pr-11397&path:packages/remix"This preview build will be updated automatically as you push new commits. |
- Add client-side hydration for demo components via clientEntry + esbuild browser bundles - Add import map with a single shared remix-ui.js asset for all @remix-run/ui/* and remix/ui/* specifiers, shared across demos and entry.js - Externalize remix/ui from the docs entry.js build (--external flag) - Add `@order` JSDoc tag support to control demo sidebar sort order - Generate markdown alternate response for demo pages (name H1, description, fenced tsx source) - Add nofollow robots meta to demo pages to prevent crawling of example links - Add modulepreload for remix-ui.js and per-demo assets to avoid FOUC on client nav - Key ExampleComponent on demo slug to force full remount between demos Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…emos-implementation
Adopt server styles by refcount instead of resetting the adopted stylesheet on every reload. DOM preserved across a reload (e.g. inside a still-hydrated client-entry boundary) keeps its rules until the new module finishes loading and the virtual root re-renders. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
Author
Replaces the three demos.tsx esbuild steps (per-demo server transform, per-demo browser transform, per-subpath @remix-run/ui bundling) with one asset-server (remix/assets) that resolves bare specifiers via package.json exports and compiles TS/TSX on demand. Splits demo source copy+rewrite into a build step (build:demos), serves docs/build/public via staticFiles middleware, emits transitive <link rel=modulepreload> for the client entry, and post-processes the prerender output to rename .ts/.tsx/.jsx to .js (GitHub Pages will not serve them as JS). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Adds component Examples to the API docs site
Can run locally with
cd docs; pnpm run docs; pnpm run devpackages/ui/**/demos/*.demo.tsxfiles@name/@descriptiontags that will be rendered above the example@remix-run/*packages - no local/relative files@remix-run/*imports →remix/*so readers see the published package path@name/@descriptionJSDoc block (already shown as the page header)printWidth: 70for narrower rendering