[segment explorer] capture defined boundaries

Author: huozhi

packages/next/src/client/components/layout-router.tsx

@@ -507,6 +507,7 @@ export default function OuterLayoutRouter({
   forbidden,
   unauthorized,
   gracefullyDegrade,
+  segmentViewBoundaries,
 }: {
   parallelRouterKey: string
   error: ErrorComponent | undefined
@@ -519,6 +520,7 @@ export default function OuterLayoutRouter({
   forbidden: React.ReactNode | undefined
   unauthorized: React.ReactNode | undefined
   gracefullyDegrade?: boolean
+  segmentViewBoundaries?: React.ReactNode
 }) {
   const context = useContext(LayoutRouterContext)
   if (!context) {
@@ -659,13 +661,14 @@ export default function OuterLayoutRouter({
     )
 
     if (process.env.NODE_ENV !== 'production') {
-      const SegmentStateProvider = (
+      const { SegmentStateProvider } =
         require('../../next-devtools/userspace/app/segment-explorer-node') as typeof import('../../next-devtools/userspace/app/segment-explorer-node')
-      )
-        .SegmentStateProvider as typeof import('../../next-devtools/userspace/app/segment-explorer-node').SegmentStateProvider as typeof import('../../next-devtools/userspace/app/segment-explorer-node').SegmentStateProvider
 
       child = (
-        <SegmentStateProvider key={stateKey}>{child}</SegmentStateProvider>
+        <SegmentStateProvider key={stateKey}>
+          {child}
+          {segmentViewBoundaries}
+        </SegmentStateProvider>
       )
     }
 

packages/next/src/next-devtools/dev-overlay/components/overview/segment-boundary-trigger.tsx

@@ -5,9 +5,11 @@ import type { SegmentNodeState } from '../../../userspace/app/segment-explorer-n
 export function SegmentBoundaryTrigger({
   onSelectBoundary,
   offset,
+  boundaries,
 }: {
   onSelectBoundary: SegmentNodeState['setBoundaryType']
   offset: number
+  boundaries: Record<'not-found' | 'loading' | 'error', string | null>
 }) {
   const [shadowRoot] = useState<ShadowRoot>(() => {
     const ownerDocument = document
@@ -17,9 +19,24 @@ export function SegmentBoundaryTrigger({
   const shadowRootRef = useRef<ShadowRoot>(shadowRoot)
 
   const triggerOptions = [
-    { label: 'Trigger Loading', value: 'loading', icon: <LoadingIcon /> },
-    { label: 'Trigger Error', value: 'error', icon: <ErrorIcon /> },
-    { label: 'Trigger Not Found', value: 'not-found', icon: <NotFoundIcon /> },
+    {
+      label: 'Trigger Loading',
+      value: 'loading',
+      icon: <LoadingIcon />,
+      disabled: !boundaries.loading,
+    },
+    {
+      label: 'Trigger Error',
+      value: 'error',
+      icon: <ErrorIcon />,
+      disabled: !boundaries.error,
+    },
+    {
+      label: 'Trigger Not Found',
+      value: 'not-found',
+      icon: <NotFoundIcon />,
+      disabled: !boundaries['not-found'],
+    },
   ]
 
   const resetOption = {
@@ -74,6 +91,7 @@ export function SegmentBoundaryTrigger({
                   key={option.value}
                   className="segment-boundary-dropdown-item"
                   onClick={() => handleSelect(option.value)}
+                  disabled={option.disabled}
                 >
                   {option.icon}
                   {option.label}
@@ -274,9 +292,14 @@ export const styles = `
     width: 100%;
   }
 
+  .segment-boundary-dropdown-item[data-disabled] {
+    color: var(--color-gray-400);
+    cursor: not-allowed;
+  }
+
   .segment-boundary-dropdown-item svg {
     margin-right: 12px;
-    color: var(--color-gray-900);
+    color: currentColor;
   }
 
   .segment-boundary-dropdown-item:hover {

packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx

@@ -133,6 +133,23 @@ function PageSegmentTreeLayerPresentation({
   }
 
   const hasFilesChildren = filesChildrenKeys.length > 0
+  const boundaries: Record<'not-found' | 'loading' | 'error', string | null> = {
+    'not-found': null,
+    loading: null,
+    error: null,
+  }
+
+  filesChildrenKeys.forEach((childKey) => {
+    const childNode = node.children[childKey]
+    if (!childNode || !childNode.value) return
+    if (childNode.value.type.startsWith('boundary:')) {
+      const boundaryType = childNode.value.type.split(':')[1] as
+        | 'not-found'
+        | 'loading'
+        | 'error'
+      boundaries[boundaryType] = childNode.value.pagePath || null
+    }
+  })
 
   return (
     <>
@@ -165,6 +182,11 @@ function PageSegmentTreeLayerPresentation({
                     if (!childNode || !childNode.value) {
                       return null
                     }
+                    // If it's boundary node, which marks the existence of the boundary not the rendered status,
+                    // we don't need to present in the rendered files.
+                    if (childNode.value.type.startsWith('boundary:')) {
+                      return null
+                    }
                     const filePath = childNode.value.pagePath
                     const lastSegment = filePath.split('/').pop() || ''
                     const isBuiltin = filePath.startsWith(BUILTIN_PREFIX)
@@ -208,6 +230,7 @@ function PageSegmentTreeLayerPresentation({
                 <SegmentBoundaryTrigger
                   offset={6}
                   onSelectBoundary={pageChild.value.setBoundaryType}
+                  boundaries={boundaries}
                 />
               )}
             </div>

packages/next/src/next-devtools/dev-overlay/segment-explorer-trie.ts

@@ -97,6 +97,7 @@ function createTrie<Value = string>({
   function remove(value: Value) {
     let currentNode = root
     const segments = getCharacters(value)
+
     const stack: TrieNode<Value>[] = []
     let found = true
     for (const segment of segments) {

packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx

@@ -31,15 +31,14 @@ function SegmentTrieNode({
   pagePath: string
 }): React.ReactNode {
   const { boundaryType, setBoundaryType } = useSegmentState()
-  const nodeState: SegmentNodeState = useMemo(
-    () => ({
+  const nodeState: SegmentNodeState = useMemo(() => {
+    return {
       type,
       pagePath,
       boundaryType,
       setBoundaryType,
-    }),
-    [type, pagePath, boundaryType, setBoundaryType]
-  )
+    }
+  }, [type, pagePath, boundaryType, setBoundaryType])
 
   // Use `useLayoutEffect` to ensure the state is updated during suspense.
   // `useEffect` won't work as the state is preserved during suspense.
@@ -143,7 +142,10 @@ export function SegmentStateProvider({ children }: { children: ReactNode }) {
   return (
     <SegmentStateContext.Provider
       key={errorBoundaryKey}
-      value={{ boundaryType, setBoundaryType: setBoundaryTypeAndReload }}
+      value={{
+        boundaryType,
+        setBoundaryType: setBoundaryTypeAndReload,
+      }}
     >
       {children}
     </SegmentStateContext.Provider>

packages/next/src/server/app-render/create-component-tree.tsx

@@ -410,23 +410,24 @@ async function createComponentTreeInternal({
     <MetadataOutlet ready={getMetadataReady} />
   )
 
-  const notFoundElement = await createBoundaryConventionElement({
-    ctx,
-    conventionName: 'not-found',
-    Component: NotFound,
-    styles: notFoundStyles,
-    tree,
-  })
-
-  const forbiddenElement = await createBoundaryConventionElement({
+  const [notFoundElement, notFoundFilePath] =
+    await createBoundaryConventionElement({
+      ctx,
+      conventionName: 'not-found',
+      Component: NotFound,
+      styles: notFoundStyles,
+      tree,
+    })
+
+  const [forbiddenElement] = await createBoundaryConventionElement({
     ctx,
     conventionName: 'forbidden',
     Component: Forbidden,
     styles: forbiddenStyles,
     tree,
   })
 
-  const unauthorizedElement = await createBoundaryConventionElement({
+  const [unauthorizedElement] = await createBoundaryConventionElement({
     ctx,
     conventionName: 'unauthorized',
     Component: Unauthorized,
@@ -546,8 +547,8 @@ async function createComponentTreeInternal({
         )
 
         const templateFilePath = getConventionPathByType(tree, dir, 'template')
-
         const errorFilePath = getConventionPathByType(tree, dir, 'error')
+        const loadingFilePath = getConventionPathByType(tree, dir, 'loading')
 
         const wrappedErrorStyles =
           isSegmentViewEnabled && errorFilePath ? (
@@ -558,6 +559,34 @@ async function createComponentTreeInternal({
             errorStyles
           )
 
+        // Add a suffix to avoid conflict with the segment view node representing rendered file.
+        // existence: not-found.tsx@boundary
+        // rendered: not-found.tsx
+        const fileNameSuffix = '@boundary'
+        const segmentViewBoundaries = isSegmentViewEnabled ? (
+          <>
+            {notFoundFilePath && (
+              <SegmentViewNode
+                type={'boundary:not-found'}
+                pagePath={notFoundFilePath + fileNameSuffix}
+              />
+            )}
+            {loadingFilePath && (
+              <SegmentViewNode
+                type={'boundary:loading'}
+                pagePath={loadingFilePath + fileNameSuffix}
+              />
+            )}
+            {errorFilePath && (
+              <SegmentViewNode
+                type={'boundary:error'}
+                pagePath={errorFilePath + fileNameSuffix}
+              />
+            )}
+            {/* do not surface forbidden and unauthorized boundaries yet as they're unstable */}
+          </>
+        ) : null
+
         return [
           parallelRouteKey,
           <LayoutRouter
@@ -581,6 +610,7 @@ async function createComponentTreeInternal({
             notFound={notFoundComponent}
             forbidden={forbiddenComponent}
             unauthorized={unauthorizedComponent}
+            {...(isSegmentViewEnabled && { segmentViewBoundaries })}
             // Since gracefullyDegrade only applies to bots, only
             // pass it when we're in a bot context to avoid extra bytes.
             {...(gracefullyDegrade && { gracefullyDegrade })}
@@ -603,8 +633,8 @@ async function createComponentTreeInternal({
   }
 
   let loadingElement = Loading ? <Loading key="l" /> : null
+  const loadingFilePath = getConventionPathByType(tree, dir, 'loading')
   if (isSegmentViewEnabled && loadingElement) {
-    const loadingFilePath = getConventionPathByType(tree, dir, 'loading')
     if (loadingFilePath) {
       loadingElement = (
         <SegmentViewNode
@@ -1098,18 +1128,20 @@ async function createBoundaryConventionElement({
     </>
   ) : undefined
 
+  const pagePath = getConventionPathByType(tree, dir, conventionName)
+
   const wrappedElement =
     isSegmentViewEnabled && element ? (
       <SegmentViewNode
         key={cacheNodeKey + '-' + conventionName}
         type={conventionName}
-        pagePath={getConventionPathByType(tree, dir, conventionName)!}
+        pagePath={pagePath!}
       >
         {element}
       </SegmentViewNode>
     ) : (
       element
     )
 
-  return wrappedElement
+  return [wrappedElement, pagePath] as const
 }

test/development/app-dir/segment-explorer/app/parallel-routes/@foo/not-found.tsx

@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <div>Not Found @foo</div>
+}