Skip to content

feat(website): live cross-page MPA previews for the Vue Router example [stack 5/6] - #12

Open
Huxpro wants to merge 1 commit into
stack/4-example-vue-router-mpafrom
stack/5-website-mpa-previews
Open

feat(website): live cross-page MPA previews for the Vue Router example [stack 5/6]#12
Huxpro wants to merge 1 commit into
stack/4-example-vue-router-mpafrom
stack/5-website-mpa-previews

Conversation

@Huxpro

@Huxpro Huxpro commented Jul 13, 2026

Copy link
Copy Markdown
Owner

Stacked PR 5/6 — base: stack/4-example-vue-router-mpa (#11). Wires the example (#11) + web shell (#10) into the docs site.

Summary

Docs integration that makes the Vue Router example live on the website: source browsing + single-bundle preview via <Go>, and the full cross-page MPA flow via a new <MpaPreview> component.

Related issues

Docs surface for #11.

Changes

  • New global <MpaPreview> component: opens the Sparkling web shell in a new tab (built into public/mpa-preview/ by scripts/build-mpa-preview.mjs), so the browser's own back/forward drive the container stack — the full MPA flow runs live in the browser.
  • Examples page (en/zh) + sidebar wire in the Vue Router (MPA) entry; the page scopes precisely what the <Go> web preview shows (in-heap nav) vs. device/harness (cross-page).
  • build-mpa-preview folded into the site's dev/build (prepare-previews); public/mpa-preview/ gitignored (generated).

How to test

pnpm --filter sparkling-website dev
# open /guide/examples/vue-router, click "Open the live MPA demo", tap push('/users'), use the browser back button

Checklist

  • I read CONTRIBUTING.md.
  • I linked a related issue (or explained why this is standalone).
  • I ran relevant checks (rspress build; loaded the page + drove the live demo in a browser).
  • I updated docs/examples.
  • Tests: verified the live preview end-to-end (Playwright).

🤖 Generated with Claude Code

https://claude.ai/code/session_01ARyWgB3243gQx1exWK61Qb


Generated by Claude Code

Docs integration for examples/vue-router-mpa:
- <Go> embeds (from PR #5) show source browsing + single-bundle web preview +
  QR; in-heap navigation runs live there
- new global <MpaPreview> component links to the Sparkling web shell in a new
  tab (built into public/mpa-preview/ by scripts/build-mpa-preview.mjs), where
  the FULL cross-page MPA flow runs live — a new tab so the browser's own
  back/forward drive the container stack
- Examples page (en/zh) + sidebar wire in the Vue Router (MPA) entry and
  scope precisely what the web preview shows vs. device/harness

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ARyWgB3243gQx1exWK61Qb
@vercel

vercel Bot commented Jul 13, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
sparkling Ready Ready Preview, Comment Jul 13, 2026 1:19pm

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