add getter helper

Author: huozhi

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

@@ -11,8 +11,8 @@ import {
 import { Tooltip } from '../../../components/tooltip'
 import { useRef, useState } from 'react'
 import {
-  BOUNDARY_PREFIX,
   BUILTIN_PREFIX,
+  getBoundaryOriginFileType,
   isBoundaryFile,
   normalizeBoundaryFilename,
 } from '../../../../server/app-render/segment-explorer-path'
@@ -147,7 +147,7 @@ function PageSegmentTreeLayerPresentation({
     const childNode = node.children[childKey]
     if (!childNode || !childNode.value) return
     if (isBoundaryFile(childNode.value.type)) {
-      const boundaryType = childNode.value.type.replace(BOUNDARY_PREFIX, '')
+      const boundaryType = getBoundaryOriginFileType(childNode.value.type)
 
       if (boundaryType in boundaries) {
         boundaries[boundaryType as keyof typeof boundaries] =

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

@@ -26,7 +26,10 @@ import type {
   UseCachePageComponentProps,
 } from '../use-cache/use-cache-wrapper'
 import { DEFAULT_SEGMENT_KEY } from '../../shared/lib/segment'
-import { getConventionPathByType } from './segment-explorer-path'
+import {
+  BOUNDARY_PREFIX,
+  getConventionPathByType,
+} from './segment-explorer-path'
 
 /**
  * Use the provided loader tree to create the React Component tree.
@@ -567,19 +570,19 @@ async function createComponentTreeInternal({
           <>
             {notFoundFilePath && (
               <SegmentViewNode
-                type={'boundary:not-found'}
+                type={`${BOUNDARY_PREFIX}not-found`}
                 pagePath={notFoundFilePath + fileNameSuffix}
               />
             )}
             {loadingFilePath && (
               <SegmentViewNode
-                type={'boundary:loading'}
+                type={`${BOUNDARY_PREFIX}loading`}
                 pagePath={loadingFilePath + fileNameSuffix}
               />
             )}
             {errorFilePath && (
               <SegmentViewNode
-                type={'boundary:error'}
+                type={`${BOUNDARY_PREFIX}error`}
                 pagePath={errorFilePath + fileNameSuffix}
               />
             )}

packages/next/src/server/app-render/segment-explorer-path.ts

@@ -42,6 +42,10 @@ export function isBoundaryFile(fileType: string) {
   return fileType.startsWith(BOUNDARY_PREFIX)
 }
 
+export function getBoundaryOriginFileType(fileType: string) {
+  return fileType.replace(BOUNDARY_PREFIX, '')
+}
+
 export function getConventionPathByType(
   tree: LoaderTree,
   dir: string,