ALT Caterpie capabilities Minimizing work Minimizing work is important to ensure a great developer experience. When iterating locally you don’t want to be hit with large rebuild times. To this end there were a few areas we explored: Building a granular code dependency graph — a lot of the code is generated, meaning it doesn’t exist on the filesystem. When you edit a file it should invalidate the smallest part of that graph as possible to keep HMR fast. Separating data from routes — sometimes routes need to be ordered, if the data for ordering is within the route itself it ends up being an expensive operation when updating it. Instead we move this data out and into optional _meta.json files. Code dependency graph? Imagine a given module that imports other modules. And then those modules import other modules. If we granularly chunk up code across many modules instead of a single module when code changes we only pay for a subset of the graph rebuilding rather than everything.

ALT File system router At its core Caterpie is a file system router built with Parcel plugins and react-resource-router. We source routes from both the routes folder and also from workspace packages. Given a file tree that looks like: /packages/button/docs /examples.mdx /website /routes /foo.mdx We build up a static routes array that lazy loads every route, passing it to react-resource-router. Every file is a route. const FooMdx = lazy(() => import('./websites/routes/foo.mdx')); const ButtonDocsExamplesMdx = lazy(() => import('../packages/button/docs/examples.mdx')); const routes = [ { component: ButtonDocsExamplesMdx, path: "/docs/button/examples", exact: true }, { component: FooMdx, path: "/foo", exact: true }, ]; <Router routes={routes} /> Consumers don’t do any wiring up as it’s all handled by Caterpie — including bootstrapping the React app itself — so we have a lot of leverage to improve this for everyone over time.

ALT Screenshot of the UI layer.