[pull] main from facebook:main

compiler/apps/playground/components/Editor/EditorImpl.tsx

@@ -24,7 +24,11 @@ import BabelPluginReactCompiler, {
   printFunctionWithOutlined,
   type LoggerEvent,
 } from 'babel-plugin-react-compiler';
-import {useDeferredValue, useMemo} from 'react';
+import {
+  useDeferredValue,
+  useMemo,
+  unstable_ViewTransition as ViewTransition,
+} from 'react';
 import {useStore} from '../StoreContext';
 import ConfigEditor from './ConfigEditor';
 import Input from './Input';

compiler/apps/playground/components/TabbedWindow.tsx

@@ -4,8 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, {
+  startTransition,
+  useId,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+} from 'react';
 import clsx from 'clsx';
+import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes';
 
 export default function TabbedWindow({
   tabs,
@@ -16,6 +22,16 @@ export default function TabbedWindow({
   activeTab: string;
   onTabChange: (tab: string) => void;
 }): React.ReactElement {
+  const id = useId();
+  const transitionName = `tab-highlight-${id}`;
+
+  const handleTabChange = (tab: string): void => {
+    startTransition(() => {
+      addTransitionType(TOGGLE_TAB_TRANSITION);
+      onTabChange(tab);
+    });
+  };
+
   return (
     <div className="flex-1 min-w-[550px] sm:min-w-0">
       <div className="flex flex-col h-full max-w-full">
@@ -25,13 +41,29 @@ export default function TabbedWindow({
             return (
               <button
                 key={tab}
-                onClick={() => onTabChange(tab)}
+                onClick={() => handleTabChange(tab)}
                 className={clsx(
-                  'active:scale-95 transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm',
-                  !isActive && 'hover:bg-primary/5',
-                  isActive && 'bg-highlight text-link',
+                  'transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm relative',
+                  isActive ? 'text-link' : 'hover:bg-primary/5',
                 )}>
-                {tab}
+                {isActive && (
+                  <ViewTransition
+                    name={transitionName}
+                    share={{
+                      [TOGGLE_TAB_TRANSITION]: 'tab-highlight',
+                      default: 'none',
+                    }}
+                    update={{default: 'none'}}>
+                    <div className="absolute inset-0 bg-highlight rounded-full" />
+                  </ViewTransition>
+                )}
+                <ViewTransition
+                  update={{
+                    [TOGGLE_TAB_TRANSITION]: 'tab-text',
+                    default: 'none',
+                  }}>
+                  <span className="relative z-1">{tab}</span>
+                </ViewTransition>
               </button>
             );
           })}

compiler/apps/playground/lib/transitionTypes.ts

@@ -6,3 +6,4 @@
  */
 
 export const CONFIG_PANEL_TRANSITION = 'config-panel';
+export const TOGGLE_TAB_TRANSITION = 'toggle-tab';

compiler/apps/playground/styles/globals.css

@@ -108,3 +108,11 @@
   object-fit: none;
   object-position: left;
 }
+
+::view-transition-old(.tab-highlight),
+::view-transition-new(.tab-highlight) {
+  height: 100%;
+}
+::view-transition-group(.tab-text) {
+	z-index: 1;
+}

packages/shared/ReactIODescription.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-export function getIODescription(value: any): string {
+export function getIODescription(value: mixed): string {
   if (!__DEV__) {
     return '';
   }
@@ -34,11 +34,13 @@ export function getIODescription(value: any): string {
           return value.command;
         } else if (
           typeof value.request === 'object' &&
+          value.request !== null &&
           typeof value.request.url === 'string'
         ) {
           return value.request.url;
         } else if (
           typeof value.response === 'object' &&
+          value.response !== null &&
           typeof value.response.url === 'string'
         ) {
           return value.response.url;
@@ -53,7 +55,11 @@ export function getIODescription(value: any): string {
           return value.name;
         } else {
           const str = value.toString();
-          if (str.startWith('[object ') || str.length < 5 || str.length > 500) {
+          if (
+            str.startsWith('[object ') ||
+            str.length < 5 ||
+            str.length > 500
+          ) {
             // This is probably not a useful description.
             return '';
           }