Skip to content

Commit e69a0c7

Browse files
MrFlashAccountMrFlashAccount
committed
React 19, react-aria-components 1.7, framer-motion 12, tanstack query 5.72
1 parent 381e91c commit e69a0c7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+2464
-2566
lines changed

‎MODULE.bazel.lock

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/common/package.json

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,25 @@
2222
"lint": "eslint ./src --cache --max-warnings=0"
2323
},
2424
"peerDependencies": {
25-
"@tanstack/query-core": "5.59.20",
26-
"@tanstack/vue-query": "5.59.20",
27-
"zod": "^3.23.0"
25+
"@tanstack/query-core": "5.72.2",
26+
"@tanstack/vue-query": "5.73.0",
27+
"zod": "^3.24.1",
28+
"react": "^19.1.0",
29+
"react-dom": "^19.1.0",
30+
"@internationalized/date": ">=3.8.0"
2831
},
2932
"dependencies": {
30-
"@internationalized/date": "3.7.0",
31-
"@tanstack/query-persist-client-core": "5.59.20",
32-
"@tanstack/vue-query": "5.59.20",
33+
"@tanstack/query-persist-client-core": "5.73.1",
3334
"@types/node": "^20.11.21",
3435
"lib0": "^0.2.99",
35-
"react": "^18.3.1",
3636
"vitest": "3.0.5"
37+
},
38+
"devDependencies": {
39+
"@internationalized/date": "^3.8.0",
40+
"@types/react": "^19.1.1",
41+
"@types/react-dom": "^19.1.2",
42+
"@tanstack/vue-query": "5.73.0",
43+
"react": "^19.1.0",
44+
"react-dom": "^19.1.0"
3745
}
3846
}

‎app/gui/package.json

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -62,40 +62,39 @@
6262
"@fast-check/vitest": "^0.0.8",
6363
"@floating-ui/vue": "^1.1.5",
6464
"@hookform/resolvers": "^3.9.1",
65-
"@internationalized/date": "3.7.0",
65+
"@internationalized/date": "3.8.0",
6666
"@lexical/html": "^0.21.0",
6767
"@lexical/link": "^0.21.0",
6868
"@lexical/markdown": "^0.21.0",
6969
"@lezer/common": "^1.2.3",
7070
"@lezer/highlight": "^1.2.1",
71-
"@monaco-editor/react": "4.6.0",
71+
"@monaco-editor/react": "4.7.0",
7272
"@noble/hashes": "^1.6.1",
73-
"@react-aria/interactions": "3.23.0",
74-
"@react-aria/collections": "3.0.0-alpha.7",
75-
"@sentry/react": "^7.120.2",
76-
"@sentry/vite-plugin": "^2.22.7",
77-
"@stripe/react-stripe-js": "^2.9.0",
78-
"@stripe/stripe-js": "^3.5.0",
79-
"@tanstack/react-query": "5.59.20",
80-
"@tanstack/vue-query": "5.59.20",
73+
"@react-aria/interactions": "3.24.1",
74+
"@react-aria/collections": "3.0.0-beta.1",
75+
"@sentry/react": "9.12.0",
76+
"@sentry/vite-plugin": "3.3.1",
77+
"@stripe/react-stripe-js": "3.6.0",
78+
"@stripe/stripe-js": "7.0.0",
79+
"@tanstack/react-query": "5.72.2",
80+
"@tanstack/vue-query": "5.73.0",
8181
"@vueuse/core": "^10.11.1",
8282
"@vueuse/gesture": "^2.0.0",
8383
"ag-grid-community": "^32.3.3",
8484
"ag-grid-enterprise": "^32.3.3",
8585
"ag-grid-vue3": "^32.3.3",
8686
"ajv": "^8.17.1",
8787
"amazon-cognito-identity-js": "6.3.6",
88-
"babel-plugin-react-compiler": "19.0.0-beta-63e3235-20250105",
89-
"clsx": "^2.1.1",
88+
"babel-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
9089
"codemirror": "^6.0.1",
9190
"culori": "^3.3.0",
9291
"dotenv": "^16.4.7",
9392
"enso-common": "workspace:*",
9493
"events": "^3.3.0",
95-
"framer-motion": "11.3.0",
94+
"framer-motion": "12.6.5",
9695
"hash-sum": "^2.0.0",
9796
"idb-keyval": "^6.2.1",
98-
"input-otp": "1.2.4",
97+
"input-otp": "1.4.2",
9998
"install": "^0.13.0",
10099
"is-network-error": "^1.1.0",
101100
"modern-isomorphic-ws": "^1.0.5",
@@ -107,26 +106,25 @@
107106
"papaparse": "^5.4.1",
108107
"postcss-inline-svg": "^6.0.0",
109108
"postcss-nesting": "^12.1.5",
110-
"qrcode.react": "3.1.0",
111-
"react": "^18.3.1",
112-
"react-aria": "3.37.0",
113-
"react-aria-components": "1.6.0",
114-
"react-compiler-runtime": "19.0.0-beta-decd7b8-20250118",
115-
"react-keyed-flatten-children": "3.0.2",
116-
"react-dom": "^18.3.1",
117-
"react-error-boundary": "4.0.13",
109+
"qrcode.react": "4.2.0",
110+
"react": "^19.1.0",
111+
"react-aria": "3.38.1",
112+
"react-aria-components": "1.7.1",
113+
"react-keyed-flatten-children": "5.0.0",
114+
"react-dom": "^19.1.0",
115+
"react-error-boundary": "5.0.0",
118116
"react-hook-form": "^7.54.2",
119117
"react-router": "^6.28.1",
120118
"react-router-dom": "^6.28.1",
121-
"react-stately": "3.35.0",
119+
"react-stately": "3.36.1",
122120
"react-toastify": "^9.1.3",
123121
"sucrase": "^3.35.0",
124122
"tailwind-merge": "^2.6.0",
125123
"tailwind-variants": "0.2.1",
126124
"tiny-invariant": "^1.3.3",
127125
"ts-results": "^3.3.0",
128126
"validator": "^13.12.0",
129-
"veaury": "=2.4.1",
127+
"veaury": "2.6.2",
130128
"vue": "^3.5.13",
131129
"vue-component-type-helpers": "^2.2.0",
132130
"y-protocols": "^1.0.6",
@@ -135,7 +133,7 @@
135133
"ydoc-shared": "workspace:*",
136134
"yjs": "^13.6.21",
137135
"zod": "^3.24.1",
138-
"zustand": "^4.5.5"
136+
"zustand": "5.0.3"
139137
},
140138
"devDependencies": {
141139
"@babel/plugin-syntax-import-attributes": "^7.26.0",
@@ -145,7 +143,7 @@
145143
"@fast-check/vitest": "^0.0.8",
146144
"@open-rpc/server-js": "^1.9.5",
147145
"@playwright/test": "^1.49.1",
148-
"@react-types/shared": "3.27.0",
146+
"@react-types/shared": "3.29.0",
149147
"@storybook/addon-essentials": "8.5.0",
150148
"@storybook/addon-interactions": "8.5.0",
151149
"@storybook/addon-onboarding": "8.5.0",
@@ -155,11 +153,10 @@
155153
"@storybook/test": "8.5.0",
156154
"@storybook/vue3": "8.5.0",
157155
"@storybook/vue3-vite": "8.5.0",
158-
"@tanstack/react-query-devtools": "5.59.20",
156+
"@tanstack/react-query-devtools": "5.72.2",
159157
"@testing-library/jest-dom": "6.6.3",
160-
"@testing-library/react": "16.0.1",
161-
"@testing-library/react-hooks": "8.0.1",
162-
"@testing-library/user-event": "14.5.2",
158+
"@testing-library/react": "16.3.0",
159+
"@testing-library/user-event": "14.6.1",
163160
"@tsconfig/node20": "^20.1.4",
164161
"@types/css.escape": "^1.5.2",
165162
"@types/culori": "^2.1.1",
@@ -169,8 +166,8 @@
169166
"@types/mapbox-gl": "^3.4.1",
170167
"@types/node": "^22.10.4",
171168
"@types/papaparse": "^5.3.15",
172-
"@types/react": "^18.3.18",
173-
"@types/react-dom": "^18.3.5",
169+
"@types/react": "^19.1.1",
170+
"@types/react-dom": "^19.1.2",
174171
"@types/shuffle-seed": "^1.1.3",
175172
"@types/tar": "^6.1.13",
176173
"@types/validator": "^13.12.2",

‎app/gui/src/App.vue

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script setup lang="ts">
2+
import { createRoot } from 'react-dom/client'
3+
24
import '@/assets/base.css'
35
import { interactionBindings } from '@/bindings'
46
import TooltipDisplayer from '@/components/TooltipDisplayer.vue'
@@ -14,7 +16,7 @@ import { registerAutoBlurHandler, registerGlobalBlurHandler } from '@/util/autoB
1416
import { baseConfig, configValue, mergeConfig, type ApplicationConfigValue } from '@/util/config'
1517
import { urlParams } from '@/util/urlParams'
1618
import { useQueryClient } from '@tanstack/vue-query'
17-
import { applyPureReactInVue } from 'veaury'
19+
import { createElement, startTransition } from 'react'
1820
import { computed, onMounted } from 'vue'
1921
import { ComponentProps } from 'vue-component-type-helpers'
2022
import ReactRoot from './ReactRoot'
@@ -42,7 +44,6 @@ const appConfig = computed(() =>
4244
)
4345
const appConfigValue = computed((): ApplicationConfigValue => configValue(appConfig.value))
4446
45-
const ReactRootWrapper = applyPureReactInVue(ReactRoot)
4647
const queryClient = useQueryClient()
4748
4849
provideKeyboard()
@@ -75,11 +76,24 @@ onMounted(() => {
7576
<template>
7677
<div :class="['App', ...classSet.keys()]">
7778
<ProjectView v-if="projectViewOnly" v-bind="projectViewOnly.options" />
78-
<ReactRootWrapper
79+
<div
7980
v-else
80-
:config="appConfigValue"
81-
:queryClient="queryClient"
82-
@authenticated="onAuthenticated ?? (() => {})"
81+
id="ReactRootWrapper"
82+
:ref="
83+
(el) => {
84+
startTransition(() => {
85+
const root = createRoot(el as HTMLElement)
86+
root.render(
87+
createElement(ReactRoot, {
88+
queryClient,
89+
config: appConfigValue,
90+
onAuthenticated: onAuthenticated ?? (() => {}),
91+
}),
92+
)
93+
})
94+
}
95+
"
96+
style="display: contents"
8397
/>
8498
</div>
8599
<div id="floatingLayer" />

‎app/gui/src/ReactRoot.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import invariant from 'tiny-invariant'
2020
interface ReactRootProps {
2121
config: ApplicationConfigValue
2222
queryClient: QueryClient
23-
classSet: Map<string, number>
2423
onAuthenticated: (accessToken: string | null) => void
24+
classSet?: Map<string, number>
2525
}
2626

2727
function resolveEnvUrl(url: string | undefined) {
@@ -70,8 +70,8 @@ export default function ReactRoot(props: ReactRootProps) {
7070
return (
7171
<StrictMode>
7272
<QueryClientProvider client={queryClient}>
73-
<ErrorBoundary>
74-
<UIProviders locale="en-US" portalRoot={portalRoot} appRoot={appRoot}>
73+
<UIProviders locale="en-US" portalRoot={portalRoot} appRoot={appRoot}>
74+
<ErrorBoundary>
7575
<Suspense fallback={<LoadingScreen />}>
7676
<OfflineNotificationManager>
7777
<LoggerProvider logger={console}>
@@ -91,8 +91,8 @@ export default function ReactRoot(props: ReactRootProps) {
9191
</Suspense>
9292

9393
<ReactQueryDevtools />
94-
</UIProviders>
95-
</ErrorBoundary>
94+
</ErrorBoundary>
95+
</UIProviders>
9696
</QueryClientProvider>
9797
</StrictMode>
9898
)

‎app/gui/src/dashboard/App.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -173,11 +173,11 @@ export default function App(props: AppProps) {
173173
projectManagerInstance: new ProjectManager(props.projectManagerUrl, rootDirectory),
174174
projectManagerRootDirectory: rootDirectory,
175175
}
176-
} else {
177-
return {
178-
projectManagerInstance: null,
179-
projectManagerRootDirectory: null,
180-
}
176+
}
177+
178+
return {
179+
projectManagerInstance: null,
180+
projectManagerRootDirectory: null,
181181
}
182182
},
183183
})

‎app/gui/src/dashboard/components/Activity.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ function ActivityInner(props: ActivityInnerProps) {
9898
* Props for {@link UnhideSuspendedTree}
9999
*/
100100
interface UnhideSuspendedTreeProps {
101-
readonly contentRef: React.RefObject<HTMLDivElement>
101+
readonly contentRef: React.RefObject<HTMLDivElement | null>
102102
}
103103

104104
/**

‎app/gui/src/dashboard/components/AriaComponents/Alert/Alert.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/** @file Alert component. */
2-
import { type ForwardedRef, type HTMLAttributes, type PropsWithChildren } from 'react'
2+
import { type HTMLAttributes, type PropsWithChildren } from 'react'
33

4-
import { forwardRef } from '#/utilities/react'
54
import { tv, type VariantProps } from '#/utilities/tailwindVariants'
65
import { Icon } from '../../Icon'
7-
import type { IconProp } from '../types'
6+
import type { IconProp, PropsWithRef } from '../types'
7+
88
// eslint-disable-next-line react-refresh/only-export-components
99
export const ALERT_STYLES = tv({
1010
base: 'flex items-stretch gap-2',
@@ -51,16 +51,14 @@ export const ALERT_STYLES = tv({
5151
export interface AlertProps<IconType extends string = string>
5252
extends PropsWithChildren,
5353
VariantProps<typeof ALERT_STYLES>,
54+
PropsWithRef<HTMLDivElement>,
5455
HTMLAttributes<HTMLDivElement> {
5556
/** The icon to display in the Alert */
5657
readonly icon?: IconProp<IconType> | null | undefined
5758
}
5859

5960
/** Alert component. */
60-
export const Alert = forwardRef(function Alert<IconType extends string = string>(
61-
props: AlertProps<IconType>,
62-
ref: ForwardedRef<HTMLDivElement>,
63-
) {
61+
export function Alert<IconType extends string = string>(props: AlertProps<IconType>) {
6462
const {
6563
children,
6664
className,
@@ -72,6 +70,7 @@ export const Alert = forwardRef(function Alert<IconType extends string = string>
7270
variants = ALERT_STYLES,
7371
tabIndex: rawTabIndex,
7472
role: rawRole,
73+
ref,
7574
...containerProps
7675
} = props
7776

@@ -98,4 +97,4 @@ export const Alert = forwardRef(function Alert<IconType extends string = string>
9897
<div className={classes.children()}>{children}</div>
9998
</div>
10099
)
101-
})
100+
}

0 commit comments

Comments
 (0)