Skip to content

chore(#3844): Add runtime V1/V2 token toggle to PR playgrounds#3845

Merged
twjeffery merged 1 commit into
devfrom
tom/playground-token-toggle
May 6, 2026
Merged

chore(#3844): Add runtime V1/V2 token toggle to PR playgrounds#3845
twjeffery merged 1 commit into
devfrom
tom/playground-token-toggle

Conversation

@twjeffery
Copy link
Copy Markdown
Collaborator

@twjeffery twjeffery commented Apr 20, 2026

Before (the change)

Testing a PR in both V1 and V2 tokens meant commenting out the V2 import in app.tsx or dropping a useEffect injection on the page you're testing. Easy to forget which mode you were in, and no way to compare side by side without restarting.

After (the change)

A "Switch to V1 tokens" / "Switch to V2 tokens" item in the side menu of the React and Angular playgrounds flips tokens on click. Mode persists per-tab via sessionStorage, and ?tokens=v1 in the URL overrides if you want a specific mode by link. Default is V2, unchanged from the current global default on dev.

Also cleaned up the per-page useEffect / ngOnInit token injections (6 React pages, 3 Angular) since the toggle makes them redundant. The :root stylesheet-rule-removal hack on feat3229 is gone too, replaced by a "V2 link always last in <head>" invariant in the new helper module.

No library code touched. Playground infrastructure only.

Fixes #3844.

Steps needed to test

  1. npm run serve:prs:react. Side menu shows "Switch to V1 tokens" as a secondary item (V2 is the default).
  2. Navigate to /features/3344. Click the toggle. Styles flip to V1 immediately, no refresh needed. Click again to return to V2.
  3. Navigate to /features/3229. Verify MenuButton renders correctly in both V1 and V2. This page used to carry a :root-rule-removal hack that has been removed.
  4. Refresh after toggling. sessionStorage keeps your choice. Open a second tab to confirm it defaults to V2 independently.
  5. Append ?tokens=v1 to any URL. Page loads in V1 regardless of sessionStorage.
  6. Repeat steps 1-5 in Angular (npm run serve:prs:angular).
image image

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 20, 2026

Deploy Preview for benji-docs-previews failed.

Name Link
🔨 Latest commit 1fe604a
🔍 Latest deploy log https://app.netlify.com/projects/benji-docs-previews/deploys/69ea6b14c23a7200083cd302

@twjeffery twjeffery changed the title Add runtime V1/V2 token toggle to PR playgrounds chore(#3844): Add runtime V1/V2 token toggle to PR playgrounds Apr 20, 2026
@twjeffery twjeffery marked this pull request as ready for review April 20, 2026 16:55
Copy link
Copy Markdown
Collaborator

@willcodeforcoffee willcodeforcoffee left a comment

Choose a reason for hiding this comment

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

@twjeffery it doesn't seem to be working in Angular for me! 😭

@twjeffery twjeffery force-pushed the tom/playground-token-toggle branch from daaffb4 to 9efc03e Compare April 22, 2026 22:23
@twjeffery
Copy link
Copy Markdown
Collaborator Author

@twjeffery it doesn't seem to be working in Angular for me! 😭

@willcodeforcoffee Good catch. V2 was loading, but Angular's V1 styles were coming in after and overriding it. Should be fixed now so V2 loads properly. Can you check again?

@twjeffery twjeffery force-pushed the tom/playground-token-toggle branch from 9efc03e to 1fe604a Compare April 23, 2026 18:55
Copy link
Copy Markdown
Collaborator

@willcodeforcoffee willcodeforcoffee left a comment

Choose a reason for hiding this comment

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

This works great now!

@ArakTaiRoth
Copy link
Copy Markdown
Collaborator

@twjeffery Can you rebase this before I test? There's discrepancies around routing that are different here than they are in dev, and I'm not sure how this will work in that code.

Comment thread apps/prs/angular/src/main.ts Outdated
Copy link
Copy Markdown
Collaborator

@vanessatran-ddi vanessatran-ddi left a comment

Choose a reason for hiding this comment

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

Looks good!

@twjeffery twjeffery force-pushed the tom/playground-token-toggle branch from 1fe604a to 0049200 Compare April 28, 2026 03:51
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 28, 2026

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-05-06 14:59 UTC

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 28, 2026

Preview removed

All preview folders cleaned from gh-pages branch.

@ArakTaiRoth
Copy link
Copy Markdown
Collaborator

@twjeffery bug3625.tsx still loads a constant v2 token, so it would overwrite it if v1 tokens were selected.

@twjeffery twjeffery force-pushed the tom/playground-token-toggle branch from 0049200 to 474bbc9 Compare May 4, 2026 15:30
@twjeffery
Copy link
Copy Markdown
Collaborator Author

@ArakTaiRoth I removed the per-page V2 from bug3625.tsx. Should be under the toggle's control now.

@ArakTaiRoth ArakTaiRoth deleted the branch dev May 5, 2026 18:28
@ArakTaiRoth ArakTaiRoth closed this May 5, 2026
@twjeffery twjeffery reopened this May 5, 2026
@twjeffery twjeffery force-pushed the tom/playground-token-toggle branch from 474bbc9 to d655173 Compare May 5, 2026 19:53
Replaces the comment-out-the-import workflow with a "Switch to V1/V2 tokens"
item in the side menu of both the React and Angular playgrounds. Default is
V2. Mode persists per-tab via sessionStorage, and ?tokens=v1 in the URL
overrides by link.

Also removes the per-page useEffect / ngOnInit token injections on the six
React pages and three Angular pages that were using them, along with the
:root stylesheet-rule-removal hack on feat3229. All redundant under the
runtime toggle.

No library code touched. Playground infrastructure only.
@twjeffery twjeffery force-pushed the tom/playground-token-toggle branch from d655173 to c2c76cf Compare May 5, 2026 20:39
@twjeffery twjeffery merged commit a76dbef into dev May 6, 2026
5 checks passed
@twjeffery twjeffery deleted the tom/playground-token-toggle branch May 6, 2026 14:58
@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 2.2.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 7.2.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 5.2.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Easier way to switch between V1 and V2 tokens in the playground

5 participants