Skip to content

Commit 52c891c

Browse files
akabarki76akabarki76
authored
Merge branch 'vercel:canary' into canary
2 parents 4de8f78 + 43c094c commit 52c891c

File tree

17 files changed

+267
-130
lines changed

17 files changed

+267
-130
lines changed

‎packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-footer.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,19 @@ import { css } from '../../utils/css'
77

88
export function DevToolsPanelFooter({
99
versionInfo,
10+
isDraggable,
1011
}: {
1112
versionInfo: OverlayState['versionInfo']
13+
isDraggable: boolean
1214
}) {
1315
const bundlerName = (
1416
process.env.__NEXT_BUNDLER || 'WEBPACK'
1517
).toUpperCase() as 'WEBPACK' | 'TURBOPACK' | 'RSPACK'
1618
return (
17-
<div data-nextjs-devtools-panel-footer>
19+
<div
20+
data-nextjs-devtools-panel-footer
21+
data-nextjs-devtools-panel-draggable={isDraggable}
22+
>
1823
<div data-nextjs-devtools-panel-footer-tab-group>
1924
<DevToolsPanelVersionInfo versionInfo={versionInfo} />
2025
<div data-nextjs-devtools-panel-footer-tab>
@@ -51,15 +56,6 @@ export const DEVTOOLS_PANEL_FOOTER_STYLES = css`
5156
align-items: center;
5257
border-top: 1px solid var(--color-gray-400);
5358
border-radius: 0 0 var(--rounded-xl) var(--rounded-xl);
54-
55-
/* For draggable */
56-
cursor: move;
57-
user-select: none;
58-
& > * {
59-
cursor: auto;
60-
/* user-select: auto; follows the parent (parent none -> child none), so reset the direct child to text */
61-
user-select: text;
62-
}
6359
}
6460
6561
[data-nextjs-devtools-panel-footer-tab-group] {

‎packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export function DevToolsPanel({
110110
})
111111
}}
112112
dragHandleSelector="[data-nextjs-devtools-panel-header], [data-nextjs-devtools-panel-footer]"
113+
disableDrag={isFullscreen}
113114
>
114115
<>
115116
<Dialog
@@ -120,7 +121,10 @@ export function DevToolsPanel({
120121
>
121122
<DialogContent data-nextjs-devtools-panel-dialog-content>
122123
<DialogHeader data-nextjs-devtools-panel-dialog-header>
123-
<div data-nextjs-devtools-panel-header>
124+
<div
125+
data-nextjs-devtools-panel-header
126+
data-nextjs-devtools-panel-draggable={!isFullscreen}
127+
>
124128
<div data-nextjs-devtools-panel-header-tab-group>
125129
<button
126130
data-nextjs-devtools-panel-header-tab={
@@ -187,7 +191,10 @@ export function DevToolsPanel({
187191
/>
188192
</DialogBody>
189193
</DialogContent>
190-
<DevToolsPanelFooter versionInfo={state.versionInfo} />
194+
<DevToolsPanelFooter
195+
versionInfo={state.versionInfo}
196+
isDraggable={!isFullscreen}
197+
/>
191198
</Dialog>
192199
</>
193200
</Draggable>
@@ -273,15 +280,6 @@ export const DEVTOOLS_PANEL_STYLES = css`
273280
justify-content: space-between;
274281
align-items: center;
275282
border-bottom: 1px solid var(--color-gray-400);
276-
277-
/* For draggable */
278-
cursor: move;
279-
user-select: none;
280-
& > * {
281-
cursor: auto;
282-
/* user-select: auto; follows the parent (parent none -> child none), so reset the direct child to text */
283-
user-select: text;
284-
}
285283
}
286284
287285
[data-nextjs-devtools-panel-header-tab-group] {
@@ -357,4 +355,14 @@ export const DEVTOOLS_PANEL_STYLES = css`
357355
background-color: var(--color-gray-300);
358356
}
359357
}
358+
359+
[data-nextjs-devtools-panel-draggable='true'] {
360+
cursor: move;
361+
user-select: none;
362+
& > * {
363+
cursor: auto;
364+
/* user-select: auto; follows the parent (parent none -> child none), so reset the direct child to text */
365+
user-select: text;
366+
}
367+
}
360368
`

‎packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx‎

Lines changed: 58 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Corners } from '../../../shared'
2-
import { useRef } from 'react'
2+
import { useCallback, useLayoutEffect, useRef } from 'react'
33

44
interface Point {
55
x: number
@@ -18,6 +18,7 @@ export function Draggable({
1818
setPosition: setCurrentCorner,
1919
onDragStart,
2020
dragHandleSelector,
21+
disableDrag = false,
2122
...props
2223
}: {
2324
children: React.ReactElement
@@ -26,8 +27,10 @@ export function Draggable({
2627
setPosition: (position: Corners) => void
2728
onDragStart?: () => void
2829
dragHandleSelector?: string
30+
disableDrag?: boolean
2931
}) {
3032
const { ref, animate, ...drag } = useDrag({
33+
disabled: disableDrag,
3134
threshold: 5,
3235
onDragStart,
3336
onDragEnd,
@@ -132,6 +135,7 @@ export function Draggable({
132135
}
133136

134137
interface UseDragOptions {
138+
disabled: boolean
135139
onDragStart?: () => void
136140
onDrag?: (translation: Point) => void
137141
onDragEnd?: (translation: Point, velocity: Point) => void
@@ -147,13 +151,45 @@ interface Velocity {
147151

148152
export function useDrag(options: UseDragOptions) {
149153
const ref = useRef<HTMLDivElement>(null)
150-
const state = useRef<'idle' | 'press' | 'drag' | 'drag-end'>('idle')
154+
const machine = useRef<
155+
| { state: 'idle' | 'press' | 'drag-end' }
156+
| { state: 'drag'; pointerId: number }
157+
>({
158+
state: 'idle',
159+
})
160+
const cleanup = useRef<() => void>(null)
151161

152162
const origin = useRef<Point>({ x: 0, y: 0 })
153163
const translation = useRef<Point>({ x: 0, y: 0 })
154164
const lastTimestamp = useRef(0)
155165
const velocities = useRef<Velocity[]>([])
156166

167+
const cancel = useCallback(() => {
168+
if (machine.current.state === 'drag') {
169+
ref.current?.releasePointerCapture(machine.current.pointerId)
170+
}
171+
172+
machine.current =
173+
machine.current.state === 'drag'
174+
? { state: 'drag-end' }
175+
: { state: 'idle' }
176+
177+
if (cleanup.current !== null) {
178+
cleanup.current()
179+
cleanup.current = null
180+
}
181+
182+
velocities.current = []
183+
184+
ref.current?.classList.remove('dev-tools-grabbing')
185+
}, [])
186+
187+
useLayoutEffect(() => {
188+
if (options.disabled) {
189+
cancel()
190+
}
191+
}, [cancel, options.disabled])
192+
157193
function set(position: Point) {
158194
if (ref.current) {
159195
translation.current = position
@@ -181,10 +217,10 @@ export function useDrag(options: UseDragOptions) {
181217
}
182218

183219
function onClick(e: MouseEvent) {
184-
if (state.current === 'drag-end') {
220+
if (machine.current.state === 'drag-end') {
185221
e.preventDefault()
186222
e.stopPropagation()
187-
state.current = 'idle'
223+
machine.current = { state: 'idle' }
188224
ref.current?.removeEventListener('click', onClick)
189225
}
190226
}
@@ -215,27 +251,37 @@ export function useDrag(options: UseDragOptions) {
215251
}
216252

217253
origin.current = { x: e.clientX, y: e.clientY }
218-
state.current = 'press'
254+
machine.current = { state: 'press' }
219255
window.addEventListener('pointermove', onPointerMove)
220256
window.addEventListener('pointerup', onPointerUp)
257+
258+
if (cleanup.current !== null) {
259+
cleanup.current()
260+
cleanup.current = null
261+
}
262+
cleanup.current = () => {
263+
window.removeEventListener('pointermove', onPointerMove)
264+
window.removeEventListener('pointerup', onPointerUp)
265+
}
266+
221267
ref.current?.addEventListener('click', onClick)
222268
}
223269

224270
function onPointerMove(e: PointerEvent) {
225-
if (state.current === 'press') {
271+
if (machine.current.state === 'press') {
226272
const dx = e.clientX - origin.current.x
227273
const dy = e.clientY - origin.current.y
228274
const distance = Math.sqrt(dx * dx + dy * dy)
229275

230276
if (distance >= options.threshold) {
231-
state.current = 'drag'
277+
machine.current = { state: 'drag', pointerId: e.pointerId }
232278
ref.current?.setPointerCapture(e.pointerId)
233279
ref.current?.classList.add('dev-tools-grabbing')
234280
options.onDragStart?.()
235281
}
236282
}
237283

238-
if (state.current !== 'drag') return
284+
if (machine.current.state !== 'drag') return
239285

240286
const currentPosition = { x: e.clientX, y: e.clientY }
241287

@@ -265,17 +311,12 @@ export function useDrag(options: UseDragOptions) {
265311
options.onDrag?.(translation.current)
266312
}
267313

268-
function onPointerUp(e: PointerEvent) {
269-
state.current = state.current === 'drag' ? 'drag-end' : 'idle'
270-
271-
window.removeEventListener('pointermove', onPointerMove)
272-
window.removeEventListener('pointerup', onPointerUp)
273-
314+
function onPointerUp() {
274315
const velocity = calculateVelocity(velocities.current)
275-
velocities.current = []
276316

277-
ref.current?.classList.remove('dev-tools-grabbing')
278-
ref.current?.releasePointerCapture(e.pointerId)
317+
cancel()
318+
319+
// TODO: This is the onDragEnd when the pointerdown event was fired not the onDragEnd when the pointerup event was fired
279320
options.onDragEnd?.(translation.current, velocity)
280321
}
281322

‎turbopack/crates/turbo-tasks-backend/src/backend/mod.rs‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ use smallvec::{SmallVec, smallvec};
2525
use tokio::time::{Duration, Instant};
2626
use turbo_tasks::{
2727
CellId, FxDashMap, KeyValuePair, RawVc, ReadCellOptions, ReadConsistency, SessionId,
28-
TRANSIENT_TASK_BIT, TaskId, TraitTypeId, TurboTasksBackendApi, ValueTypeId,
28+
TRANSIENT_TASK_BIT, TaskExecutionReason, TaskId, TraitTypeId, TurboTasksBackendApi,
29+
ValueTypeId,
2930
backend::{
3031
Backend, BackendJobId, CachedTaskType, CellContent, TaskExecutionSpec, TransientTaskRoot,
3132
TransientTaskType, TurboTasksExecutionError, TypedCellContent,
@@ -617,8 +618,11 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
617618
};
618619

619620
// Output doesn't exist. We need to schedule the task to compute it.
620-
let (item, listener) =
621-
CachedDataItem::new_scheduled_with_listener(self.get_task_desc_fn(task_id), note);
621+
let (item, listener) = CachedDataItem::new_scheduled_with_listener(
622+
TaskExecutionReason::OutputNotAvailable,
623+
self.get_task_desc_fn(task_id),
624+
note,
625+
);
622626
// It's not possible that the task is InProgress at this point. If it is InProgress {
623627
// done: true } it must have Output and would early return.
624628
task.add_new(item);
@@ -749,6 +753,7 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
749753
bail!("{} was canceled", ctx.get_task_description(task_id));
750754
} else if !is_scheduled
751755
&& task.add(CachedDataItem::new_scheduled(
756+
TaskExecutionReason::CellNotAvailable,
752757
self.get_task_desc_fn(task_id),
753758
))
754759
{
@@ -1400,7 +1405,10 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
14001405
let mut task = ctx.task(task_id, TaskDataCategory::Data);
14011406
if let Some(in_progress) = remove!(task, InProgress) {
14021407
match in_progress {
1403-
InProgressState::Scheduled { done_event } => done_event.notify(usize::MAX),
1408+
InProgressState::Scheduled {
1409+
done_event,
1410+
reason: _,
1411+
} => done_event.notify(usize::MAX),
14041412
InProgressState::InProgress(box InProgressStateInner { done_event, .. }) => {
14051413
done_event.notify(usize::MAX)
14061414
}
@@ -1431,14 +1439,16 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
14311439
} else {
14321440
return None;
14331441
};
1442+
let execution_reason;
14341443
{
14351444
let mut ctx = self.execute_context(turbo_tasks);
14361445
let mut task = ctx.task(task_id, TaskDataCategory::All);
14371446
let in_progress = remove!(task, InProgress)?;
1438-
let InProgressState::Scheduled { done_event } = in_progress else {
1447+
let InProgressState::Scheduled { done_event, reason } = in_progress else {
14391448
task.add_new(CachedDataItem::InProgress { value: in_progress });
14401449
return None;
14411450
};
1451+
execution_reason = reason;
14421452
task.add_new(CachedDataItem::InProgress {
14431453
value: InProgressState::InProgress(Box::new(InProgressStateInner {
14441454
stale: false,
@@ -1533,7 +1543,7 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
15331543
arg,
15341544
} = &*task_type;
15351545
(
1536-
native_fn.span(task_id.persistence()),
1546+
native_fn.span(task_id.persistence(), execution_reason),
15371547
native_fn.execute(*this, &**arg),
15381548
)
15391549
}
@@ -1613,7 +1623,10 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
16131623
unreachable!();
16141624
};
16151625
task.add_new(CachedDataItem::InProgress {
1616-
value: InProgressState::Scheduled { done_event },
1626+
value: InProgressState::Scheduled {
1627+
done_event,
1628+
reason: TaskExecutionReason::Stale,
1629+
},
16171630
});
16181631
// Remove old children from new_children to leave only the children that had their
16191632
// active count increased
@@ -1781,7 +1794,10 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
17811794
unreachable!();
17821795
};
17831796
task.add_new(CachedDataItem::InProgress {
1784-
value: InProgressState::Scheduled { done_event },
1797+
value: InProgressState::Scheduled {
1798+
done_event,
1799+
reason: TaskExecutionReason::Stale,
1800+
},
17851801
});
17861802
drop(task);
17871803

@@ -1842,7 +1858,10 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
18421858
// If the task is stale, reschedule it
18431859
if stale {
18441860
task.add_new(CachedDataItem::InProgress {
1845-
value: InProgressState::Scheduled { done_event },
1861+
value: InProgressState::Scheduled {
1862+
done_event,
1863+
reason: TaskExecutionReason::Stale,
1864+
},
18461865
});
18471866
return true;
18481867
}
@@ -2300,10 +2319,13 @@ impl<B: BackingStorage> TurboTasksBackendInner<B> {
23002319
value: ActivenessState::new_root(root_type, task_id),
23012320
});
23022321
}
2303-
task.add(CachedDataItem::new_scheduled(move || match root_type {
2304-
RootType::RootTask => "Root Task".to_string(),
2305-
RootType::OnceTask => "Once Task".to_string(),
2306-
}));
2322+
task.add(CachedDataItem::new_scheduled(
2323+
TaskExecutionReason::Initial,
2324+
move || match root_type {
2325+
RootType::RootTask => "Root Task".to_string(),
2326+
RootType::OnceTask => "Once Task".to_string(),
2327+
},
2328+
));
23072329
}
23082330
#[cfg(feature = "verify_aggregation_graph")]
23092331
self.root_tasks.lock().insert(task_id);

0 commit comments

Comments
 (0)