Skip to content

Commit ba52fbb

Browse files
pull[bot]pull[bot]
committed
[playground] bug fixes & UX improvements (facebook#34499)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary Made many small changes to the compiler playground to improve user experience. Removed any "Loading" indicators that would flash in before a component would finish loading in. Additionally, before users would see the "Show Internals" button toggling from false to true if they had set it at true previously. I was able to refactor the URL/local storage loading so that the `Store` would be fully initialized before the components would load in. Attempted to integrate `<Activity>` into showing/hiding these different editors, but the current state of [monaco editors](https://github.com/suren-atoyan/monaco-react) does not allow for this. I created an issue for them to address: suren-atoyan/monaco-react#753 Added a debounce to the config editor so every key type wouldn't cause the output panel to respond instantly. Users can type for 500 ms before an error is thrown at them. <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> ## How did you test this change? Here is what loading the page would look like before (not sure why its so blurry): https://github.com/user-attachments/assets/58f4281a-cc02-4141-b9b5-f70d6ace12a2 Here is how it looks now: https://github.com/user-attachments/assets/40535165-fc7c-44fb-9282-9c7fa76e7d53 Here is the debouncing: https://github.com/user-attachments/assets/e4ab29e4-1afd-4249-beca-671fb6542f5e <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. --> DiffTrain build for [6eda534](facebook@6eda534)
1 parent d5ed77b commit ba52fbb

34 files changed

+1658
-1076
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
03a96c75db12eeac36b4d5d88c13e3a12d46efe1
1+
6eda534718d09a26d58d65c0a376e05d7e2a3358

‎compiled/facebook-www/REVISION_TRANSFORMS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
03a96c75db12eeac36b4d5d88c13e3a12d46efe1
1+
6eda534718d09a26d58d65c0a376e05d7e2a3358

‎compiled/facebook-www/React-dev.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1419,7 +1419,7 @@ __DEV__ &&
14191419
exports.useTransition = function () {
14201420
return resolveDispatcher().useTransition();
14211421
};
1422-
exports.version = "19.2.0-www-classic-03a96c75-20250918";
1422+
exports.version = "19.2.0-www-classic-6eda5347-20250918";
14231423
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
14241424
"function" ===
14251425
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-dev.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1419,7 +1419,7 @@ __DEV__ &&
14191419
exports.useTransition = function () {
14201420
return resolveDispatcher().useTransition();
14211421
};
1422-
exports.version = "19.2.0-www-modern-03a96c75-20250918";
1422+
exports.version = "19.2.0-www-modern-6eda5347-20250918";
14231423
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
14241424
"function" ===
14251425
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-prod.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -602,4 +602,4 @@ exports.useSyncExternalStore = function (
602602
exports.useTransition = function () {
603603
return ReactSharedInternals.H.useTransition();
604604
};
605-
exports.version = "19.2.0-www-classic-03a96c75-20250918";
605+
exports.version = "19.2.0-www-classic-6eda5347-20250918";

‎compiled/facebook-www/React-prod.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -602,4 +602,4 @@ exports.useSyncExternalStore = function (
602602
exports.useTransition = function () {
603603
return ReactSharedInternals.H.useTransition();
604604
};
605-
exports.version = "19.2.0-www-modern-03a96c75-20250918";
605+
exports.version = "19.2.0-www-modern-6eda5347-20250918";

‎compiled/facebook-www/React-profiling.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -606,7 +606,7 @@ exports.useSyncExternalStore = function (
606606
exports.useTransition = function () {
607607
return ReactSharedInternals.H.useTransition();
608608
};
609-
exports.version = "19.2.0-www-classic-03a96c75-20250918";
609+
exports.version = "19.2.0-www-classic-6eda5347-20250918";
610610
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
611611
"function" ===
612612
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-profiling.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -606,7 +606,7 @@ exports.useSyncExternalStore = function (
606606
exports.useTransition = function () {
607607
return ReactSharedInternals.H.useTransition();
608608
};
609-
exports.version = "19.2.0-www-modern-03a96c75-20250918";
609+
exports.version = "19.2.0-www-modern-6eda5347-20250918";
610610
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
611611
"function" ===
612612
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/ReactART-dev.classic.js‎

Lines changed: 72 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -16113,6 +16113,7 @@ __DEV__ &&
1611316113
pendingEffectsRenderEndTime = completedRenderEndTime;
1611416114
pendingSuspendedCommitReason = suspendedCommitReason;
1611516115
pendingDelayedCommitReason = IMMEDIATE_COMMIT;
16116+
pendingSuspendedViewTransitionReason = null;
1611616117
enableViewTransition
1611716118
? ((pendingViewTransitionEvents = null),
1611816119
(lanes & 335544064) === lanes
@@ -16211,18 +16212,52 @@ __DEV__ &&
1621116212
function flushLayoutEffects() {
1621216213
if (pendingEffectsStatus === PENDING_LAYOUT_PHASE) {
1621316214
pendingEffectsStatus = NO_PENDING_EFFECTS;
16214-
var root = pendingEffectsRoot,
16215-
finishedWork = pendingFinishedWork,
16216-
lanes = pendingEffectsLanes,
16217-
cleanUpIndicator = root.pendingIndicator;
16218-
if (null !== cleanUpIndicator && 0 === root.indicatorLanes) {
16215+
if (enableComponentPerformanceTrack) {
16216+
var suspendedViewTransitionReason =
16217+
pendingSuspendedViewTransitionReason;
16218+
if (null !== suspendedViewTransitionReason) {
16219+
commitStartTime = now();
16220+
var startTime = commitEndTime,
16221+
endTime = commitStartTime;
16222+
!supportsUserTiming ||
16223+
endTime <= startTime ||
16224+
(workInProgressUpdateTask
16225+
? workInProgressUpdateTask.run(
16226+
console.timeStamp.bind(
16227+
console,
16228+
suspendedViewTransitionReason,
16229+
startTime,
16230+
endTime,
16231+
currentTrack,
16232+
"Scheduler \u269b",
16233+
"secondary-light"
16234+
)
16235+
)
16236+
: console.timeStamp(
16237+
suspendedViewTransitionReason,
16238+
startTime,
16239+
endTime,
16240+
currentTrack,
16241+
"Scheduler \u269b",
16242+
"secondary-light"
16243+
));
16244+
}
16245+
}
16246+
suspendedViewTransitionReason = pendingEffectsRoot;
16247+
startTime = pendingFinishedWork;
16248+
endTime = pendingEffectsLanes;
16249+
var cleanUpIndicator = suspendedViewTransitionReason.pendingIndicator;
16250+
if (
16251+
null !== cleanUpIndicator &&
16252+
0 === suspendedViewTransitionReason.indicatorLanes
16253+
) {
1621916254
var prevTransition = ReactSharedInternals.T;
1622016255
ReactSharedInternals.T = null;
1622116256
var previousPriority = currentUpdatePriority;
1622216257
currentUpdatePriority = DiscreteEventPriority;
1622316258
var prevExecutionContext = executionContext;
1622416259
executionContext |= CommitContext;
16225-
root.pendingIndicator = null;
16260+
suspendedViewTransitionReason.pendingIndicator = null;
1622616261
try {
1622716262
cleanUpIndicator();
1622816263
} catch (x) {
@@ -16233,8 +16268,8 @@ __DEV__ &&
1623316268
(ReactSharedInternals.T = prevTransition);
1623416269
}
1623516270
}
16236-
cleanUpIndicator = 0 !== (finishedWork.flags & 8772);
16237-
if (0 !== (finishedWork.subtreeFlags & 8772) || cleanUpIndicator) {
16271+
cleanUpIndicator = 0 !== (startTime.flags & 8772);
16272+
if (0 !== (startTime.subtreeFlags & 8772) || cleanUpIndicator) {
1623816273
cleanUpIndicator = ReactSharedInternals.T;
1623916274
ReactSharedInternals.T = null;
1624016275
prevTransition = currentUpdatePriority;
@@ -16247,14 +16282,14 @@ __DEV__ &&
1624716282
null !== injectedProfilingHooks &&
1624816283
"function" ===
1624916284
typeof injectedProfilingHooks.markLayoutEffectsStarted &&
16250-
injectedProfilingHooks.markLayoutEffectsStarted(lanes),
16251-
(inProgressLanes = lanes),
16252-
(inProgressRoot = root),
16285+
injectedProfilingHooks.markLayoutEffectsStarted(endTime),
16286+
(inProgressLanes = endTime),
16287+
(inProgressRoot = suspendedViewTransitionReason),
1625316288
resetComponentEffectTimers(),
1625416289
commitLayoutEffectOnFiber(
16255-
root,
16256-
finishedWork.alternate,
16257-
finishedWork
16290+
suspendedViewTransitionReason,
16291+
startTime.alternate,
16292+
startTime
1625816293
),
1625916294
(inProgressRoot = inProgressLanes = null),
1626016295
enableSchedulingProfiler &&
@@ -16269,44 +16304,47 @@ __DEV__ &&
1626916304
(ReactSharedInternals.T = cleanUpIndicator);
1627016305
}
1627116306
}
16272-
root = pendingEffectsRenderEndTime;
16273-
finishedWork = pendingSuspendedCommitReason;
16307+
suspendedViewTransitionReason = pendingEffectsRenderEndTime;
16308+
startTime = pendingSuspendedCommitReason;
1627416309
enableComponentPerformanceTrack &&
1627516310
((commitEndTime = now()),
16276-
(root = finishedWork === IMMEDIATE_COMMIT ? root : commitStartTime),
16277-
(finishedWork = commitEndTime),
16278-
(lanes =
16311+
(suspendedViewTransitionReason =
16312+
startTime === IMMEDIATE_COMMIT
16313+
? suspendedViewTransitionReason
16314+
: commitStartTime),
16315+
(startTime = commitEndTime),
16316+
(endTime =
1627916317
pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT),
1628016318
(cleanUpIndicator = workInProgressUpdateTask),
1628116319
null !== commitErrors
1628216320
? logCommitErrored(
16283-
root,
16284-
finishedWork,
16321+
suspendedViewTransitionReason,
16322+
startTime,
1628516323
commitErrors,
1628616324
!1,
1628716325
cleanUpIndicator
1628816326
)
1628916327
: !supportsUserTiming ||
16290-
finishedWork <= root ||
16328+
startTime <= suspendedViewTransitionReason ||
1629116329
(cleanUpIndicator
1629216330
? cleanUpIndicator.run(
1629316331
console.timeStamp.bind(
1629416332
console,
16295-
lanes ? "Commit Interrupted View Transition" : "Commit",
16296-
root,
16297-
finishedWork,
16333+
endTime ? "Commit Interrupted View Transition" : "Commit",
16334+
suspendedViewTransitionReason,
16335+
startTime,
1629816336
currentTrack,
1629916337
"Scheduler \u269b",
16300-
lanes ? "error" : "secondary-dark"
16338+
endTime ? "error" : "secondary-dark"
1630116339
)
1630216340
)
1630316341
: console.timeStamp(
16304-
lanes ? "Commit Interrupted View Transition" : "Commit",
16305-
root,
16306-
finishedWork,
16342+
endTime ? "Commit Interrupted View Transition" : "Commit",
16343+
suspendedViewTransitionReason,
16344+
startTime,
1630716345
currentTrack,
1630816346
"Scheduler \u269b",
16309-
lanes ? "error" : "secondary-dark"
16347+
endTime ? "error" : "secondary-dark"
1631016348
)));
1631116349
pendingEffectsStatus = PENDING_AFTER_MUTATION_PHASE;
1631216350
}
@@ -19621,6 +19659,7 @@ __DEV__ &&
1962119659
pendingDidIncludeRenderPhaseUpdate = !1,
1962219660
pendingSuspendedCommitReason = IMMEDIATE_COMMIT,
1962319661
pendingDelayedCommitReason = IMMEDIATE_COMMIT,
19662+
pendingSuspendedViewTransitionReason = null,
1962419663
NESTED_UPDATE_LIMIT = 50,
1962519664
nestedUpdateCount = 0,
1962619665
rootWithNestedUpdates = null,
@@ -19860,10 +19899,10 @@ __DEV__ &&
1986019899
(function () {
1986119900
var internals = {
1986219901
bundleType: 1,
19863-
version: "19.2.0-www-classic-03a96c75-20250918",
19902+
version: "19.2.0-www-classic-6eda5347-20250918",
1986419903
rendererPackageName: "react-art",
1986519904
currentDispatcherRef: ReactSharedInternals,
19866-
reconcilerVersion: "19.2.0-www-classic-03a96c75-20250918"
19905+
reconcilerVersion: "19.2.0-www-classic-6eda5347-20250918"
1986719906
};
1986819907
internals.overrideHookState = overrideHookState;
1986919908
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19897,7 +19936,7 @@ __DEV__ &&
1989719936
exports.Shape = Shape;
1989819937
exports.Surface = Surface;
1989919938
exports.Text = Text;
19900-
exports.version = "19.2.0-www-classic-03a96c75-20250918";
19939+
exports.version = "19.2.0-www-classic-6eda5347-20250918";
1990119940
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1990219941
"function" ===
1990319942
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)