📦🚀 Blazing fast, zero configuration web application bundler
- Tweets 272
- Following 0
- Followers 7,045
- Likes 1
ALT React Server Components example
ALT Screenshot of two chrome windows showing a Parcel Deno React Server App, and a Parcel Bun React Server App.
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 terminal log. Ejecting jest config... Updating dependencies... $ npm rm react-scripts $ npm install parcel Updating package.json scripts... Updating public/index.html... Migrating SVG imports... Detected SVG component imports. Added @parcel/transformer-svg-react to .parcelrc Migrating CSS... Detected @import-normalize. Added postcss-normalize to .postcssrc Migrating JS... Detected babel macros. Added babel.config.json Adding Parcel files to .gitignore ✨ Successfully migrated from Create React App to Parcel! Run npm start to start the dev server. Parcel may install additional plugins as needed when building your app for the first time.
ALT Code example: index.ts imports a css macro, and calls it with a CSS string. The result is placed into the className prop of a div element. The css macro hashes the passed in code, generates a class name, and calls this.addAsset to generate a new asset from it, returning the class name. The bundled output shows a div with a static string in the className prop, and a corresponding CSS file with the generated CSS. See the documentation linked in the previous tweet for the full code.
![Input:
import {twMerge} from 'tailwind-merge' with {type: 'macro'}
const buttonBase = 'px-2 py-1 bg-red hover:bg-dark-red';
const ctaButton = twMerge(buttonBase, 'p-3 bg-[#B91C1C]');
console.log(ctaButton);
Bundled output:
console.log("hover:bg-dark-red p-3 bg-[#B91C1C]");](https://venexa.site/media/GHcZwCmWMAA0KWI.jpg)
ALT Input: import {twMerge} from 'tailwind-merge' with {type: 'macro'} const buttonBase = 'px-2 py-1 bg-red hover:bg-dark-red'; const ctaButton = twMerge(buttonBase, 'p-3 bg-[#B91C1C]'); console.log(ctaButton); Bundled output: console.log("hover:bg-dark-red p-3 bg-[#B91C1C]");
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.
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.
![html {
color-scheme: light dark;
}
html[data-theme=light] {
color-scheme: light;
}
html[data-theme=dark] {
color-scheme: dark;
}
button {
background: light-dark(#aaa, #444);
}](https://venexa.site/media/GG-8VqRWgAAuiYu.png)
ALT html { color-scheme: light dark; } html[data-theme=light] { color-scheme: light; } html[data-theme=dark] { color-scheme: dark; } button { background: light-dark(#aaa, #444); }