From 922abf933e3f0b8e033bec10df19a7df4250aac5 Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Wed, 24 Sep 2025 16:17:57 -0400 Subject: [PATCH 1/3] Add view transitions for show internals toggle & tab expanding --- .../playground/components/AccordionWindow.tsx | 88 ++++++++++++------- .../apps/playground/components/Header.tsx | 13 ++- compiler/apps/playground/styles/globals.css | 8 ++ 3 files changed, 73 insertions(+), 36 deletions(-) diff --git a/compiler/apps/playground/components/AccordionWindow.tsx b/compiler/apps/playground/components/AccordionWindow.tsx index 197f543b4ab..7d229ee6ca9 100644 --- a/compiler/apps/playground/components/AccordionWindow.tsx +++ b/compiler/apps/playground/components/AccordionWindow.tsx @@ -6,7 +6,13 @@ */ import {Resizable} from 're-resizable'; -import React, {useCallback} from 'react'; +import React, { + useCallback, + useId, + unstable_ViewTransition as ViewTransition, + unstable_addTransitionType as addTransitionType, + startTransition, +} from 'react'; type TabsRecord = Map; @@ -50,17 +56,23 @@ function AccordionWindowItem({ setTabsOpen: (newTab: Set) => void; hasChanged: boolean; }): React.ReactElement { + const id = useId(); const isShow = tabsOpen.has(name); - const toggleTabs = useCallback(() => { - const nextState = new Set(tabsOpen); - if (nextState.has(name)) { - nextState.delete(name); - } else { - nextState.add(name); - } - setTabsOpen(nextState); - }, [tabsOpen, name, setTabsOpen]); + const transitionName = `accordion-window-item-${id}`; + + const toggleTabs = () => { + startTransition(() => { + addTransitionType('accordion-window'); + const nextState = new Set(tabsOpen); + if (nextState.has(name)) { + nextState.delete(name); + } else { + nextState.add(name); + } + setTabsOpen(nextState); + }); + }; // Replace spaces with non-breaking spaces const displayName = name.replace(/ /g, '\u00A0'); @@ -68,31 +80,39 @@ function AccordionWindowItem({ return (
{isShow ? ( - -

- - {displayName} -

- {tabs.get(name) ??
No output for {name}
} - + + +

+ - {displayName} +

+ {tabs.get(name) ??
No output for {name}
} + + ) : ( -
- -
+ +
+ +
+ )}
); diff --git a/compiler/apps/playground/components/Header.tsx b/compiler/apps/playground/components/Header.tsx index a5d8d17e242..cf9036b069c 100644 --- a/compiler/apps/playground/components/Header.tsx +++ b/compiler/apps/playground/components/Header.tsx @@ -10,7 +10,11 @@ import {CheckIcon} from '@heroicons/react/solid'; import clsx from 'clsx'; import Link from 'next/link'; import {useSnackbar} from 'notistack'; -import {useState} from 'react'; +import { + useState, + startTransition, + unstable_addTransitionType as addTransitionType, +} from 'react'; import {defaultStore} from '../lib/defaultStore'; import {IconGitHub} from './Icons/IconGitHub'; import Logo from './Logo'; @@ -62,7 +66,12 @@ export default function Header(): JSX.Element { dispatchStore({type: 'toggleInternals'})} + onChange={() => + startTransition(() => { + addTransitionType('show-internals'); + dispatchStore({type: 'toggleInternals'}); + }) + } className="absolute opacity-0 cursor-pointer h-full w-full m-0" /> Date: Wed, 24 Sep 2025 16:29:06 -0400 Subject: [PATCH 2/3] Remove height property on transition: --- compiler/apps/playground/styles/globals.css | 1 - 1 file changed, 1 deletion(-) diff --git a/compiler/apps/playground/styles/globals.css b/compiler/apps/playground/styles/globals.css index d670e3ba65a..408fc05fc9e 100644 --- a/compiler/apps/playground/styles/globals.css +++ b/compiler/apps/playground/styles/globals.css @@ -118,7 +118,6 @@ } ::view-transition-old(.expand-accordion), ::view-transition-new(.expand-accordion) { - height: 100%; width: auto; } ::view-transition-group(.expand-accordion) { From 9cd1146d634723cb24c2aa3fcca1b13d210fd2fa Mon Sep 17 00:00:00 2001 From: Eugene Choi <4eugenechoi@gmail.com> Date: Mon, 29 Sep 2025 15:57:23 -0400 Subject: [PATCH 3/3] Add transition type --- .../apps/playground/components/AccordionWindow.tsx | 13 ++++++++++--- .../apps/playground/components/Editor/Output.tsx | 7 ++++++- compiler/apps/playground/components/Header.tsx | 3 ++- compiler/apps/playground/lib/transitionTypes.ts | 2 ++ compiler/apps/playground/styles/globals.css | 1 + 5 files changed, 21 insertions(+), 5 deletions(-) diff --git a/compiler/apps/playground/components/AccordionWindow.tsx b/compiler/apps/playground/components/AccordionWindow.tsx index 7d229ee6ca9..db12e76670a 100644 --- a/compiler/apps/playground/components/AccordionWindow.tsx +++ b/compiler/apps/playground/components/AccordionWindow.tsx @@ -13,6 +13,7 @@ import React, { unstable_addTransitionType as addTransitionType, startTransition, } from 'react'; +import {EXPAND_ACCORDION_TRANSITION} from '../lib/transitionTypes'; type TabsRecord = Map; @@ -63,7 +64,7 @@ function AccordionWindowItem({ const toggleTabs = () => { startTransition(() => { - addTransitionType('accordion-window'); + addTransitionType(EXPAND_ACCORDION_TRANSITION); const nextState = new Set(tabsOpen); if (nextState.has(name)) { nextState.delete(name); @@ -82,7 +83,10 @@ function AccordionWindowItem({ {isShow ? ( + update={{ + [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion', + default: 'none', + }}>

+ update={{ + [EXPAND_ACCORDION_TRANSITION]: 'expand-accordion', + default: 'none', + }}>