fix(plugin-preview): support QR code scanning on mobile devices and first screen SSR#3098
Merged
fix(plugin-preview): support QR code scanning on mobile devices and first screen SSR#3098
Conversation
…evice scanning Replace hardcoded localhost with window.location.hostname and set dev server host to true, enabling QR code scanning from mobile devices on the local network. Extract shared getPageUrl utility and use define instead of extendPageData for dev port. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Deploying rspress-v2 with
|
| Latest commit: |
90ddbd1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://03863f03.rspress-v2.pages.dev |
| Branch Preview URL: | https://syt-update-qr-code.rspress-v2.pages.dev |
Contributor
Rsdoctor Bundle Diff AnalysisFound 3 projects in monorepo, 2 projects with changes. 📊 Quick Summary
📋 Detailed Reports (Click to expand)📁 nodePath:
📦 Download Diff Report: node Bundle Diff 📁 webPath:
📦 Download Diff Report: web Bundle Diff Generated by Rsdoctor GitHub Action |
Timeless0911
approved these changes
Feb 2, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the @rspress/plugin-preview behavior so that preview iframes and QR codes work correctly on mobile devices accessing the dev server over the local network, and refactors how the dev port is propagated into the client code.
Changes:
- Added a shared
getPageUrl/getPageFullUrlhelper to centralize preview URL construction, usingwindow.location.hostnameplus an injectedRSPRESS_IFRAME_DEV_PORTin development, andwithBase('/~demo/...')in other cases. - Updated
PreviewandFixedDevicecomponents to use the new helpers and dropped the previousNoSSRwrapper andpage.devPortwiring. - Configured the preview dev server with
host: trueto bind to all interfaces and injectsprocess.env.RSPRESS_IFRAME_DEV_PORTviasource.defineinstead of mutating page data withextendPageData.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
packages/plugin-preview/static/global-components/common/getPageUrl.ts |
New utility that builds relative and full preview URLs for demos in dev and production, using the defined dev port and current hostname. |
packages/plugin-preview/static/global-components/Preview.tsx |
Simplified preview component props and logic to compute iframe/QR URLs via the shared helper and removed the NoSSR wrapper now that URL logic is centrally handled. |
packages/plugin-preview/static/global-components/FixedDevice.tsx |
Reused the shared URL helper for fixed-device previews and QR codes, removing inline URL construction and the NoSSR wrapper. |
packages/plugin-preview/src/index.ts |
Updated preview plugin configuration to run the iframe dev server on all interfaces, inject the iframe dev port via source.define, and remove the extendPageData shim for page.devPort. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
Summary
localhostwithwindow.location.hostnamein iframe URLs, enabling mobile devices to access previews via QR code on the local networkhost: trueto listen on all network interfacesgetPageUrl/getPageFullUrlutility and usesource.defineinstead ofextendPageDatafor passing dev portBefore
QR Code content
/~demo/_components_button
After
QR Code content
https://rspress.rs/~demo/_components_button