- Tweets 1,750
- Following 2,171
- Followers 491
- Likes 10,564
ALT Screenshot of code sample: $ parcel server.tsx // server.tsx import express from 'express'; import {renderRequest} from '@parcel/rsc/node'; import {Page} from './Page'; const app = express(); app.get('/', async (req, res) => { await renderRequest(req, res, <Page />); }); app.listen(3000); // Page.tsx "use server-entry"; export function Page() { return ( <html> <body> <h1>Hello world!</h1> <Client /> </body> </html> ); }
ALT Screenshot of a benchmark comparing swc and oxc. For a 100 line file, oxc compiles in 0.14 ms, swc in 0.7 ms (5x). For a 1000 line file oxc compiles in 0.9 ms, swc in 5.7 ms (6.3x). For a 10000 line file oxc compiles in 14.9 ms, swc in 35.9 ms (2.4x).
ALT Screenshot of a terminal showing several error messages including conditional require, non-static access of imported object, and non-static access of commonjs exports object.
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.
![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.](https://venexa.site/media/GJql5MlbwAAjhn7.jpg)
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.
ALT Screenshot of the Parcel REPL
ALT Code example importing the regexgen library, calling the function with a list of strings, and storing the returned regex in a constant. Then console.logging it. The compiled bundle shows a console.log with a pre-compiled regex, and the import of regexgen completely removed. See the linked blog post for the full code.
