Skip to content

[segment-explorer] Signal updates to React #80316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eps1lon merged 1 commit into from
Jun 12, 2025
Merged

[segment-explorer] Signal updates to React #80316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions packages/next/src/next-devtools/dev-overlay.browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ import type { DebugInfo } from './shared/types'
import { DevOverlay } from './dev-overlay/dev-overlay'
import type { DevIndicatorServerState } from '../server/dev/dev-indicator-server-state'
import type { VersionInfo } from '../server/dev/parse-version-info'
import {
insertSegmentNode,
removeSegmentNode,
type SegmentNode,
} from './dev-overlay/segment-explorer'

export interface Dispatcher {
onBuildOk(): void
Expand All @@ -46,6 +51,14 @@ export interface Dispatcher {
buildingIndicatorShow(): void
renderingIndicatorHide(): void
renderingIndicatorShow(): void
segmentExplorerNodeAdd(
nodeType: SegmentNode['type'],
pagePath: SegmentNode['pagePath']
): void
segmentExplorerNodeRemove(
nodeType: SegmentNode['type'],
pagePath: SegmentNode['pagePath']
): void
}

type Dispatch = ReturnType<typeof useErrorOverlayReducer>[1]
Expand Down Expand Up @@ -131,6 +144,24 @@ export const dispatcher: Dispatcher = {
renderingIndicatorShow: createQueuable((dispatch: Dispatch) => {
dispatch({ type: ACTION_RENDERING_INDICATOR_SHOW })
}),
segmentExplorerNodeAdd: createQueuable(
(
_: Dispatch,
nodeType: SegmentNode['type'],
pagePath: SegmentNode['pagePath']
) => {
insertSegmentNode({ type: nodeType, pagePath })
}
),
segmentExplorerNodeRemove: createQueuable(
(
_: Dispatch,
nodeType: SegmentNode['type'],
pagePath: SegmentNode['pagePath']
) => {
removeSegmentNode({ type: nodeType, pagePath })
}
),
}

function replayQueuedEvents(dispatch: NonNullable<typeof maybeDispatch>) {
Expand Down
28 changes: 7 additions & 21 deletions packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,16 @@ import type { HTMLProps } from 'react'
import { css } from '../../utils/css'
import type { DevToolsInfoPropsCore } from '../errors/dev-tools-indicator/dev-tools-info/dev-tools-info'
import { DevToolsInfo } from '../errors/dev-tools-indicator/dev-tools-info/dev-tools-info'
import {
type SegmentNode,
useSegmentTreeClientState,
} from '../../../../shared/lib/devtool/app-segment-tree'
import type { Trie, TrieNode } from '../../../../shared/lib/devtool/trie'

function PageSegmentTree({ tree }: { tree: Trie<SegmentNode> | undefined }) {
if (!tree) {
return null
}
import { useSegmentTree, type SegmentTrieNode } from '../../segment-explorer'

function PageSegmentTree({ tree }: { tree: SegmentTrieNode }) {
return (
<div
className="segment-explorer-content"
data-nextjs-devtool-segment-explorer
>
<PageSegmentTreeLayerPresentation
tree={tree}
node={tree.getRoot()}
node={tree}
level={0}
segment=""
parentSegment=""
Expand All @@ -29,16 +21,14 @@ function PageSegmentTree({ tree }: { tree: Trie<SegmentNode> | undefined }) {
}

function PageSegmentTreeLayerPresentation({
tree,
segment,
parentSegment,
node,
level,
}: {
tree: Trie<SegmentNode>
segment: string
parentSegment: string
node: TrieNode<SegmentNode>
node: SegmentTrieNode
level: number
}) {
const pagePath = node.value?.pagePath || ''
Expand Down Expand Up @@ -111,7 +101,6 @@ function PageSegmentTreeLayerPresentation({
key={childSegment}
segment={childSegment}
parentSegment={segment}
tree={tree}
node={child}
level={hasFileChildren ? level + 1 : level}
/>
Expand All @@ -124,14 +113,11 @@ function PageSegmentTreeLayerPresentation({
export function SegmentsExplorer(
props: DevToolsInfoPropsCore & HTMLProps<HTMLDivElement>
) {
const ctx = useSegmentTreeClientState()
if (!ctx) {
return null
}
const tree = useSegmentTree()

return (
<DevToolsInfo title="Segment Explorer" {...props}>
<PageSegmentTree tree={ctx.tree} />
<PageSegmentTree tree={tree} />
</DevToolsInfo>
)
}
Expand Down
204 changes: 204 additions & 0 deletions packages/next/src/next-devtools/dev-overlay/segment-explorer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
/**
* @jest-environment jsdom
*/
/* eslint-disable @next/internal/typechecked-require -- Not a prod file */
/* eslint-disable import/no-extraneous-dependencies -- Not a prod file */

import type * as SegmentExplorer from './segment-explorer'

describe('Segment Explorer', () => {
let cleanup: typeof import('@testing-library/react').cleanup
let renderHook: typeof import('@testing-library/react').renderHook
let useSegmentTree: typeof SegmentExplorer.useSegmentTree
let insertSegmentNode: typeof SegmentExplorer.insertSegmentNode
let removeSegmentNode: typeof SegmentExplorer.removeSegmentNode

beforeEach(() => {
jest.resetModules()
jest.clearAllMocks()

const segmentExplorer = require('./segment-explorer')
useSegmentTree = segmentExplorer.useSegmentTree
insertSegmentNode = segmentExplorer.insertSegmentNode
removeSegmentNode = segmentExplorer.removeSegmentNode
const rtl = require('@testing-library/react/pure')
renderHook = rtl.renderHook
cleanup = rtl.cleanup
})

afterEach(() => {
cleanup()
})

test('add complex structure', () => {
insertSegmentNode({ pagePath: '/a/page.js', type: 'page' })
insertSegmentNode({ pagePath: '/a/layout.js', type: 'layout' })
insertSegmentNode({ pagePath: '/layout.js', type: 'layout' })

const { result } = renderHook(useSegmentTree)

expect(result.current).toEqual({
children: {
'': {
children: {
a: {
children: {
'layout.js': {
children: {},
value: {
pagePath: '/a/layout.js',
type: 'layout',
},
},
'page.js': {
children: {},
value: {
pagePath: '/a/page.js',
type: 'page',
},
},
},
value: undefined,
},
'layout.js': {
children: {},
value: {
pagePath: '/layout.js',
type: 'layout',
},
},
},
value: undefined,
},
},
value: undefined,
})
})

test.failing('remove node in the middle', () => {
insertSegmentNode({ pagePath: '/a/b/@sidebar/page.js', type: 'page' })
insertSegmentNode({ pagePath: '/a/b/page.js', type: 'page' })
insertSegmentNode({ pagePath: '/a/b/layout.js', type: 'layout' })
insertSegmentNode({ pagePath: '/a/layout.js', type: 'layout' })
insertSegmentNode({ pagePath: '/layout.js', type: 'layout' })

const { result } = renderHook(useSegmentTree)

expect(result.current).toEqual({
children: {
'': {
children: {
a: {
children: {
b: {
children: {
'@sidebar': {
children: {
'page.js': {
children: {},
value: {
pagePath: '/a/b/@sidebar/page.js',
type: 'page',
},
},
},
value: undefined,
},
'layout.js': {
children: {},
value: {
pagePath: '/a/b/layout.js',
type: 'layout',
},
},
'page.js': {
children: {},
value: {
pagePath: '/a/b/page.js',
type: 'page',
},
},
},
value: undefined,
},
'layout.js': {
children: {},
value: {
pagePath: '/a/layout.js',
type: 'layout',
},
},
},
value: undefined,
},
'layout.js': {
children: {},
value: {
pagePath: '/layout.js',
type: 'layout',
},
},
},
value: undefined,
},
},
value: undefined,
})

removeSegmentNode({ pagePath: '/a/b/layout.js', type: 'layout' })

expect(result.current).toEqual({
children: {
'': {
children: {
a: {
children: {
b: {
children: {
'@sidebar': {
children: {
'page.js': {
children: {},
value: {
pagePath: '/a/b/@sidebar/page.js',
type: 'page',
},
},
},
value: undefined,
},
'page.js': {
children: {},
value: {
pagePath: '/a/b/page.js',
type: 'page',
},
},
},
value: undefined,
},
'layout.js': {
children: {},
value: {
pagePath: '/a/layout.js',
type: 'layout',
},
},
},
value: undefined,
},
'layout.js': {
children: {},
value: {
pagePath: '/layout.js',
type: 'layout',
},
},
},
value: undefined,
},
},
value: undefined,
})
})
})
Loading