Skip to content

Commit

Permalink
feat(gatsby-cli): Fancier Slices Tree (#36905)
Browse files Browse the repository at this point in the history
  • Loading branch information
@LekoArts
LekoArts committed Oct 27, 2022
1 parent a20f7f5 commit c6bfa80
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 98 deletions.
8 changes: 4 additions & 4 deletions packages/gatsby-cli/src/reporter/loggers/ink/cli.tsx
View file
Expand Up @@ -7,7 +7,7 @@ import { ProgressBar } from "./components/progress-bar"
import { Message, IMessageProps } from "./components/messages"
import { Error as ErrorComponent } from "./components/error"
import Develop from "./components/develop"
import PageTree from "./components/pageTree"
import Trees from "./components/trees"
import { IGatsbyCLIState, IActivity, ILog } from "../../redux/types"
import { ActivityLogLevels } from "../../constants"
import { IStructuredError } from "../../../structured-errors/types"
Expand All @@ -18,7 +18,7 @@ interface ICLIProps {
logs: IGatsbyCLIState
messages: Array<ILog>
showStatusBar: boolean
showPageTree: boolean
showTrees: boolean
}

interface ICLIState {
Expand Down Expand Up @@ -52,7 +52,7 @@ class CLI extends React.Component<ICLIProps, ICLIState> {
logs: { activities },
messages,
showStatusBar,
showPageTree,
showTrees,
} = this.props

const { hasError, error } = this.state
Expand Down Expand Up @@ -104,7 +104,7 @@ class CLI extends React.Component<ICLIProps, ICLIState> {
)
}
</Static>
{showPageTree && <PageTree />}
{showTrees && <Trees />}

{spinners.map(activity => (
<Spinner key={activity.id} {...activity} />
Expand Down
122 changes: 72 additions & 50 deletions ...orter/loggers/ink/components/pageTree.tsx → ...reporter/loggers/ink/components/trees.tsx
View file
Expand Up @@ -6,47 +6,47 @@ import { getPathToLayoutComponent } from "gatsby-core-utils/parse-component-path
import StoreStateContext from "../context"
import {
generatePageTree,
IPageTreeLine,
generateSliceTree,
ITreeLine,
IComponentWithPageModes,
} from "../../../../util/generate-page-tree"
} from "../../../../util/generate-trees"

interface IPageTreeProps {
interface IPageAndSliceTreesProps {
components: Map<string, IComponentWithPageModes>
root: string
slices: Set<string>
slices: Map<string, Set<string>>
}

const Description: React.FC<BoxProps> = function Description(props) {
return (
<Box>
<Box
{...props}
flexDirection="column"
borderStyle="round"
padding={1}
marginLeft={2}
marginRight={2}
>
<Box paddingLeft={2}>
<Text>(SSG) Generated at build time</Text>
</Box>
<Text>
D (DSG) Deferred static generation - page generated at runtime
</Text>
<Text>∞ (SSR) Server-side renders at runtime (uses getServerData)</Text>
<Text>λ (Function) Gatsby function</Text>
const Description: React.FC<BoxProps> = props => (
<Box>
<Box
{...props}
flexDirection="column"
borderStyle="round"
padding={1}
marginLeft={2}
marginRight={2}
>
<Box paddingLeft={2}>
<Text>(SSG) Generated at build time</Text>
</Box>
<Spacer />
<Text>
D (DSG) Deferred static generation - page generated at runtime
</Text>
<Text>∞ (SSR) Server-side renders at runtime (uses getServerData)</Text>
<Text>λ (Function) Gatsby function</Text>
</Box>
)
}
<Spacer />
</Box>
)

const ComponentTree: React.FC<{
const TreeGenerator: React.FC<{
file: string
isFirst: boolean
isLast: boolean
pages: IComponentWithPageModes
}> = function ComponentTree({ file, isFirst, isLast, pages }) {
pages?: IComponentWithPageModes
slices?: Set<string>
}> = ({ file, isFirst, isLast, pages, slices }) => {
let topLevelIcon = `├`
if (isFirst) {
topLevelIcon = `┌`
Expand All @@ -55,7 +55,13 @@ const ComponentTree: React.FC<{
topLevelIcon = `└`
}

const sortedPages: Array<IPageTreeLine> = generatePageTree(pages)
let items: Array<ITreeLine> = []

if (pages) {
items = generatePageTree(pages)
} else if (slices) {
items = generateSliceTree(slices)
}

return (
<Box flexDirection="column">
Expand All @@ -65,15 +71,15 @@ const ComponentTree: React.FC<{
</Box>
<Text wrap="truncate-middle">{file}</Text>
</Box>
{sortedPages.map((page, index) => (
<Box key={page.text}>
{items.map((item, index) => (
<Box key={item.text}>
<Text>{isLast ? ` ` : `│`}</Text>
<Box paddingLeft={1} paddingRight={1}>
<Text>{index === sortedPages.length - 1 ? `└` : `├`}</Text>
<Text>{index === items.length - 1 ? `└` : `├`}</Text>
</Box>
<Box>
<Text>
{page.symbol} {page.text}
{item.symbol} {item.text}
</Text>
</Box>
</Box>
Expand All @@ -82,16 +88,19 @@ const ComponentTree: React.FC<{
)
}

const PageTree: React.FC<IPageTreeProps> = function PageTree({
const PageAndSliceTrees: React.FC<IPageAndSliceTreesProps> = ({
components,
root,
slices,
}) {
}) => {
const componentList: Array<ReactElement> = []
const sliceList: Array<ReactElement> = []
let i = 0
let j = 0

for (const [componentPath, pages] of components) {
componentList.push(
<ComponentTree
<TreeGenerator
isFirst={i === 0}
isLast={i === components.size - 1}
key={componentPath}
Expand All @@ -103,6 +112,20 @@ const PageTree: React.FC<IPageTreeProps> = function PageTree({
i++
}

for (const [componentPath, sliceNames] of slices) {
sliceList.push(
<TreeGenerator
isFirst={j === 0}
isLast={j === slices.size - 1}
key={componentPath}
file={path.posix.relative(root, componentPath)}
slices={sliceNames}
/>
)

j++
}

return (
<Box flexDirection="column" marginTop={2}>
<Box paddingBottom={1}>
Expand All @@ -114,25 +137,19 @@ const PageTree: React.FC<IPageTreeProps> = function PageTree({
<Box paddingTop={1} paddingBottom={1}>
<Text underline>Slices</Text>
</Box>
{Array.from(slices).map(slice => (
<Box key={slice}>
<Text>
<Text bold>·</Text> {path.posix.relative(root, slice)}
</Text>
</Box>
))}
{sliceList}
</>
)}
<Description marginTop={1} marginBottom={1} />
</Box>
)
}

const ConnectedPageTree: React.FC = function ConnectedPageTree() {
const Trees: React.FC = () => {
const state = useContext(StoreStateContext)

const componentWithPages = new Map<string, IComponentWithPageModes>()
const slices = new Set<string>()
const sliceWithComponents = new Map<string, Set<string>>()

for (const {
componentPath,
Expand All @@ -146,9 +163,14 @@ const ConnectedPageTree: React.FC = function ConnectedPageTree() {
SSR: new Set<string>(),
FN: new Set<string>(),
}
const sliceByComponent =
sliceWithComponents.get(layoutComponent) || new Set<string>()

if (isSlice) {
slices.add(componentPath)
pages.forEach(sliceName => {
sliceByComponent.add(sliceName)
})
sliceWithComponents.set(layoutComponent, sliceByComponent)
} else {
pages.forEach(pagePath => {
const gatsbyPage = state.pageTree!.pages.get(pagePath)
Expand All @@ -172,12 +194,12 @@ const ConnectedPageTree: React.FC = function ConnectedPageTree() {
}

return (
<PageTree
<PageAndSliceTrees
components={componentWithPages}
slices={slices}
slices={sliceWithComponents}
root={state.pageTree!.root}
/>
)
}

export default ConnectedPageTree
export default Trees
4 changes: 2 additions & 2 deletions packages/gatsby-cli/src/reporter/loggers/ink/index.tsx
View file
Expand Up @@ -10,12 +10,12 @@ const ConnectedCLI: React.FC = (): React.ReactElement => {
state.program?._?.[0] === `develop` &&
// @ts-ignore - program exists on state but we should refactor this
state.program?.status === `BOOTSTRAP_FINISHED`
const showPageTree = !!state.pageTree
const showTrees = !!state.pageTree

return (
<CLI
showStatusBar={Boolean(showStatusBar)}
showPageTree={Boolean(showPageTree)}
showTrees={Boolean(showTrees)}
logs={state.logs}
messages={state.messages}
/>
Expand Down

0 comments on commit c6bfa80

Please sign in to comment.