chore(#3844): Add runtime V1/V2 token toggle to PR playgrounds#3845
chore(#3844): Add runtime V1/V2 token toggle to PR playgrounds#3845
Conversation
❌ Deploy Preview for benji-docs-previews failed.
|
twjeffery
changed the title
willcodeforcoffee
left a comment
willcodeforcoffee
left a comment
There was a problem hiding this comment.
@twjeffery it doesn't seem to be working in Angular for me! 😭
twjeffery
force-pushed
the
tom/playground-token-toggle
branch
from
daaffb4 to
9efc03e
Compare
@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
force-pushed
the
tom/playground-token-toggle
branch
from
9efc03e to
1fe604a
Compare
willcodeforcoffee
left a comment
willcodeforcoffee
left a comment
There was a problem hiding this comment.
This works great now!
|
@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. |
| @@ -1,6 +1,18 @@ | |||
| import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; | |||
| import { AppModule } from "./app/app.module"; | |||
| // Apply the selected token version (default V2) to <head> before Angular | |||
There was a problem hiding this comment.
Can you update this comment into something like this: "This import has a side effect: it initialize the V2 stylesheet link in as the module loads." When I first read it I was confused until I check the token-version.ts and I see thje function applyTokenVersion(resolveTokenVersion()); was called when this is import, so update the comment to make it clearer.
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
force-pushed
the
tom/playground-token-toggle
branch
from
1fe604a to
0049200
Compare
|
Preview links
Built from commit 0049200. Previews are removed automatically when this PR closes. |
|
@twjeffery bug3625.tsx still loads a constant v2 token, so it would overwrite it if v1 tokens were selected. |
4 participants
Before (the change)
Testing a PR in both V1 and V2 tokens meant commenting out the V2 import in
app.tsxor dropping auseEffectinjection 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=v1in the URL overrides if you want a specific mode by link. Default is V2, unchanged from the current global default ondev.Also cleaned up the per-page
useEffect/ngOnInittoken injections (6 React pages, 3 Angular) since the toggle makes them redundant. The:rootstylesheet-rule-removal hack onfeat3229is 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
npm run serve:prs:react. Side menu shows "Switch to V1 tokens" as a secondary item (V2 is the default)./features/3344. Click the toggle. Styles flip to V1 immediately, no refresh needed. Click again to return to V2./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.sessionStoragekeeps your choice. Open a second tab to confirm it defaults to V2 independently.?tokens=v1to any URL. Page loads in V1 regardless of sessionStorage.npm run serve:prs:angular).