From 32f2b67cef5c5d3fdcc9a2968c6c7b8a09e680b0 Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Wed, 24 Sep 2025 15:26:07 -0400 Subject: [PATCH 1/3] Add ViewTransition on config editor open/close --- compiler/apps/playground/components/Editor/EditorImpl.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx index 9f000f85564..e7068534cd0 100644 --- a/compiler/apps/playground/components/Editor/EditorImpl.tsx +++ b/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'; From 277cf6c5613fb5a40e03616e7117f153a291c29a Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Wed, 24 Sep 2025 15:37:56 -0400 Subject: [PATCH 2/3] Add tab switching animation in default view --- .../playground/components/TabbedWindow.tsx | 71 +++++++++++++------ compiler/apps/playground/styles/globals.css | 8 +++ 2 files changed, 56 insertions(+), 23 deletions(-) diff --git a/compiler/apps/playground/components/TabbedWindow.tsx b/compiler/apps/playground/components/TabbedWindow.tsx index 1fd5f188c7d..d30d3e381f6 100644 --- a/compiler/apps/playground/components/TabbedWindow.tsx +++ b/compiler/apps/playground/components/TabbedWindow.tsx @@ -4,7 +4,12 @@ * 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'; export default function TabbedWindow({ @@ -16,30 +21,50 @@ 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('tab'); + onTabChange(tab); + }); + }; + return ( -
-
-
- {Array.from(tabs.keys()).map(tab => { - const isActive = activeTab === tab; - return ( - - ); - })} -
-
- {tabs.get(activeTab)} -
+
+ +
+
+ {Array.from(tabs.keys()).map(tab => { + const isActive = activeTab === tab; + return ( + + ); + })}
+
+ {tabs.get(activeTab)} +
+
); } diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css index e8b92e6c7be..c85951ea152 100644 --- a/compiler/apps/playground/styles/globals.css +++ b/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; +} From 2c51347b86946a91ebc9ac9c7b5ebe918bf375df Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Mon, 29 Sep 2025 14:33:01 -0400 Subject: [PATCH 3/3] Add transition type const --- .../playground/components/TabbedWindow.tsx | 69 ++++++++++--------- .../apps/playground/lib/transitionTypes.ts | 1 + 2 files changed, 39 insertions(+), 31 deletions(-) diff --git a/compiler/apps/playground/components/TabbedWindow.tsx b/compiler/apps/playground/components/TabbedWindow.tsx index d30d3e381f6..c324e3ce450 100644 --- a/compiler/apps/playground/components/TabbedWindow.tsx +++ b/compiler/apps/playground/components/TabbedWindow.tsx @@ -11,6 +11,7 @@ import React, { unstable_addTransitionType as addTransitionType, } from 'react'; import clsx from 'clsx'; +import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes'; export default function TabbedWindow({ tabs, @@ -26,45 +27,51 @@ export default function TabbedWindow({ const handleTabChange = (tab: string): void => { startTransition(() => { - addTransitionType('tab'); + addTransitionType(TOGGLE_TAB_TRANSITION); onTabChange(tab); }); }; return ( -
- -
-
- {Array.from(tabs.keys()).map(tab => { - const isActive = activeTab === tab; - return ( - - ); - })} -
-
- {tabs.get(activeTab)} + + ); + })} +
+
+ {tabs.get(activeTab)} +
-
); } diff --git a/compiler/apps/playground/lib/transitionTypes.ts b/compiler/apps/playground/lib/transitionTypes.ts index 0c39e586fed..0233a7a4923 100644 --- a/compiler/apps/playground/lib/transitionTypes.ts +++ b/compiler/apps/playground/lib/transitionTypes.ts @@ -6,3 +6,4 @@ */ export const CONFIG_PANEL_TRANSITION = 'config-panel'; +export const TOGGLE_TAB_TRANSITION = 'toggle-tab';