mirrors/bun.sh
1
0
Fork 0
mirror of https://github.com/oven-sh/bun synced 2026-02-09 10:28:47 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
dylan/python
bun.sh/test/cli/create/__snapshots__/create-jsx.test.ts.snap

259 lines
31 KiB
Plaintext
Raw Permalink Blame History

// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
exports[`development: true react spa (no tailwind) dev server 1`] = `
"<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index | Powered by Bun</title>
<link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico">
<link rel="stylesheet" href="/_bun/asset/[ASSET_HASH].css"><link rel="stylesheet" href="/_bun/asset/[ASSET_HASH].css"></head>
<body>
<div id="root"><div class="app"><main class="container"><div class="hero"><div class="logo animate-bounce">🥟</div><h1>Welcome to <span class="gradient-text">Bun</span></h1><p class="description">The all-in-one JavaScript runtime &amp; toolkit designed for speed</p><div class="cta-buttons"><a href="https://bun.sh" class="button primary" target="_blank" rel="noopener noreferrer">Get Started</a><a href="https://github.com/oven-sh/bun" class="button secondary" target="_blank" rel="noopener noreferrer">View on GitHub</a></div><div class="stats"><div class="stat"><span class="stat-value">3x</span><span class="stat-label">Bun Bun Bun</span></div><div class="stat"><span class="stat-value">0.5s</span><span class="stat-label">Average Install Time</span></div><div class="stat"><span class="stat-value">Extremely</span><span class="stat-label">Node.js Compatible</span></div></div></div><section class="features-section"><h2>Why Choose Bun?</h2><div class="features"><div class="feature hover:scale-105"><div class="feature-icon">⚡️</div><h3>Lightning Fast</h3><p>Built from scratch in <span class="highlight">Zig</span>, Bun is focused on performance and developer experience</p></div><div class="feature hover:scale-105"><div class="feature-icon">🎯</div><h3>All-in-One</h3><p>Bundler, test runner, and npm-compatible package manager in a single tool</p></div><div class="feature hover:scale-105"><div class="feature-icon">🚀</div><h3>JavaScript Runtime</h3><p>Drop-in replacement for Node.js with <span class="highlight">3x faster</span> startup time</p></div><div class="feature hover:scale-105"><div class="feature-icon">📦</div><h3>Package Management</h3><p>Native package manager that can install dependencies up to <span class="highlight">30x faster</span> than npm</p></div><div class="feature hover:scale-105"><div class="feature-icon">🧪</div><h3>Testing Made Simple</h3><p>Built-in test runner with Jest-compatible API and snapshot testing</p></div><div class="feature hover:scale-105"><div class="feature-icon">🔥</div><h3>Hot Reloading</h3><p>Lightning-fast hot module replacement (HMR) for rapid development</p></div></div></section></main><footer class="footer"><div class="footer-content"><div class="footer-logo"><span class="logo-small">🥟</span><span class="footer-text">Built with Bun</span></div><nav class="footer-links"><a href="https://bun.sh/docs" class="footer-link hover:text-accent" target="_blank" rel="noopener noreferrer">Documentation</a><a href="https://github.com/oven-sh/bun" class="footer-link hover:text-accent" target="_blank" rel="noopener noreferrer">GitHub</a><a href="https://bun.sh/discord" class="footer-link hover:text-accent" target="_blank" rel="noopener noreferrer">Discord</a><a href="https://bun.sh/blog" class="footer-link hover:text-accent" target="_blank" rel="noopener noreferrer">Blog</a></nav></div></footer></div></div>
<script type="module" crossorigin="" async="" src="/_bun/client/index-00000000[NONDETERMINISTIC].js"></script>
</body></html>"
`;
exports[`development: true react spa (no tailwind) dev server 2`] = `
"create index.build.ts build
create index.css css
create index.html html
create index.client.tsx bun
create package.json npm
📦 Auto-installing 3 detected dependencies
$ bun --only-missing install classnames react-dom@19 react@19
bun add *.*.*
installed classnames@*.*.*
installed react-dom@*.*.*
installed react@*.*.*
4 packages installed [*ms]
--------------------------------
✨ React project configured
Development - frontend dev server with hot reload
bun dev
Production - build optimized assets
bun run build
Happy bunning! 🐇
Bun v*.*.* dev server ready in *.** ms
url: http://[SERVER_URL]/"
`;
exports[`development: true react spa (tailwind) dev server 1`] = `
"<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index | Powered by Bun</title>
<link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico">
<link rel="stylesheet" href="/_bun/asset/[ASSET_HASH].css"></head>
<body>
<div id="root"><div class="min-h-screen bg-gradient-to-b from-gray-900 to-black text-white"><div class="max-w-6xl mx-auto px-4 py-20"><div class="text-center mb-16"><h1 class="text-6xl font-bold mb-6"><span class="text-purple-400">bun create</span> for React</h1><p class="text-xl text-gray-300 mb-8">Start a React dev server instantly from a single component file</p><div class="bg-gray-800 p-4 rounded-lg flex items-center justify-between max-w-lg mx-auto mb-8"><code class="text-purple-400">bun create ./MyComponent.tsx</code><button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded transition">Copy</button></div></div><div class="grid md:grid-cols-3 gap-8 mb-20"><div class="bg-gray-800 p-6 rounded-lg"><h3 class="text-xl font-semibold mb-4">Zero Config</h3><p class="text-gray-300">Just write your React component and run. No setup needed.</p></div><div class="bg-gray-800 p-6 rounded-lg"><h3 class="text-xl font-semibold mb-4">Auto Dependencies</h3><p class="text-gray-300">Automatically detects and installs required npm packages.</p></div><div class="bg-gray-800 p-6 rounded-lg"><h3 class="text-xl font-semibold mb-4">Tool Detection</h3><p class="text-gray-300">Recognizes Tailwind, animations, and UI libraries automatically.</p></div></div><div class="bg-gray-800 rounded-lg p-8 mb-20"><h2 class="text-3xl font-bold mb-6">How it Works</h2><div class="space-y-4"><div class="flex items-start gap-4"><div class="bg-purple-600 rounded-full p-2 mt-1">1</div><div><h3 class="font-semibold mb-2">Create Component</h3><p class="text-gray-300">Write your React component in a .tsx file</p></div></div><div class="flex items-start gap-4"><div class="bg-purple-600 rounded-full p-2 mt-1">2</div><div><h3 class="font-semibold mb-2">Run Command</h3><p class="text-gray-300">Execute bun create with your file path</p></div></div><div class="flex items-start gap-4"><div class="bg-purple-600 rounded-full p-2 mt-1">3</div><div><h3 class="font-semibold mb-2">Start Developing</h3><p class="text-gray-300">Dev server starts instantly with hot reload</p></div></div></div></div><div class="text-center"><h2 class="text-3xl font-bold mb-6">Ready to Try?</h2><div class="space-x-4"><a href="https://bun.sh/docs" class="inline-block bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg transition">Read Docs</a><a href="https://github.com/oven-sh/bun" class="inline-block bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-lg transition">GitHub →</a></div></div></div></div></div>
<script type="module" crossorigin="" async="" src="/_bun/client/index-00000000[NONDETERMINISTIC].js"></script>
</body></html>"
`;
exports[`development: true react spa (tailwind) dev server 2`] = `
"create index.build.ts build
create index.css css
create index.html html
create index.client.tsx bun
create bunfig.toml bun
create package.json npm
📦 Auto-installing 4 detected dependencies
$ bun --only-missing install tailwindcss bun-plugin-tailwind react-dom@19 react@19
bun add *.*.*
installed tailwindcss@*.*.*
installed bun-plugin-tailwind@*.*.*
installed react-dom@*.*.*
installed react@*.*.*
7 packages installed [*ms]
--------------------------------
✨ React + Tailwind project configured
Development - frontend dev server with hot reload
bun dev
Production - build optimized assets
bun run build
Happy bunning! 🐇
Bun *.*.* dev server ready in *.** ms
url: http://[SERVER_URL]/"
`;
exports[`development: true shadcn/ui dev server 1`] = `
"create lib/utils.ts shadcn
create index.css shadcn
create index.build.ts bun
create index.client.tsx bun
create index.css css
create index.html html
create styles/globals.css shadcn
create bunfig.toml bun
create package.json npm
create tsconfig.json tsc
create components.json shadcn
📦 Auto-installing 9 detected dependencies
$ bun --only-missing install lucide-react tailwindcss bun-plugin-tailwind tailwindcss-animate class-variance-authority clsx tailwind-merge react-dom@19 react@19
bun add *.*.*
installed lucide-react@*.*.*
installed tailwindcss@*.*.*
installed bun-plugin-tailwind@*.*.*
installed tailwindcss-animate@*.*.*
installed class-variance-authority@*.*.*
installed clsx@*.*.*
installed tailwind-merge@*.*.*
installed react-dom@*.*.*
installed react@*.*.*
12 packages installed [*ms]
😎 Setting up shadcn/ui components
$ bun x shadcn@canary add -y button badge card
- components/ui/button.tsx
- components/ui/badge.tsx
- components/ui/card.tsx
--------------------------------
✨ React + shadcn/ui + Tailwind project configured
Development - frontend dev server with hot reload
bun dev
Production - build optimized assets
bun run build
Happy bunning! 🐇
Bun *.*.* dev server ready in *.** ms
url: http://[SERVER_URL]/"
`;
exports[`development: true shadcn/ui dev server 2`] = `
"<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index | Powered by Bun</title>
<link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico">
<link rel="stylesheet" href="/_bun/asset/[ASSET_HASH].css"></head>
<body>
<div id="root"><div class="min-h-screen bg-gradient-to-b from-background to-slate-900"><div class="container mx-auto px-4 py-16"><section class="text-center mb-16 space-y-6"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&amp;>svg]:size-3 gap-1 [&amp;>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-auto border-transparent bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 mb-2">New in Bun*.*.*</span><h1 class="text-4xl md:text-6xl font-bold tracking-tight">From Component to App in<span class="text-primary"> Seconds</span></h1><p class="text-xl text-muted-foreground max-w-2xl mx-auto">Start a complete dev server from a single React component. No config needed.</p><div class="flex flex-wrap justify-center gap-4 pt-4"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-10 rounded-md px-6 has-[>svg]:px-4 min-w-[140px]">Get Started</button><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground h-10 rounded-md px-6 has-[>svg]:px-4 min-w-[140px]">Documentation</button></div></section><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm bg-slate-900 p-6 mb-16"><div class="overflow-x-auto"><pre class="text-green-400 text-sm md:text-base"><code>$ bun create ./MyComponent.tsx<br>📦 Installing dependencies...<br>🔍 Detected Tailwind CSS<br>🎨 Detected shadcn/ui<br>✨ Dev server running at http://localhost:3000</code></pre></div></div><section class="grid md:grid-cols-3 gap-8 mb-16"><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm p-6 hover:shadow-lg transition-shadow duration-200"><div class="flex items-center gap-2 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-primary shrink-0"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg><h3 class="font-semibold text-lg">Auto Dependencies</h3></div><p class="text-muted-foreground">Automatically detects and installs required dependencies for your component</p></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm p-6 hover:shadow-lg transition-shadow duration-200"><div class="flex items-center gap-2 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-primary shrink-0"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg><h3 class="font-semibold text-lg">Tool Detection</h3></div><p class="text-muted-foreground">Seamlessly integrates with Tailwind CSS, shadcn/ui, and other popular tools</p></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm p-6 hover:shadow-lg transition-shadow duration-200"><div class="flex items-center gap-2 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-primary shrink-0"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg><h3 class="font-semibold text-lg">Zero Config</h3></div><p class="text-muted-foreground">No setup required. Start developing instantly with hot reload enabled</p></div></section><section class="text-center"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm p-8 bg-primary/5 border-primary/10"><h2 class="text-2xl md:text-3xl font-bold mb-4">Ready to streamline your React development?</h2><p class="text-muted-foreground mb-6">Get started with Bun's powerful component development workflow today.</p><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-10 rounded-md px-6 has-[>svg]:px-4 min-w-[160px]">Install Bun</button></div></section></div></div></div>
<script type="module" crossorigin="" async="" src="/_bun/client/index-00000000[NONDETERMINISTIC].js"></script>
</body></html>"
`;
exports[`development: false react spa (no tailwind) dev server 1`] = `
"<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index | Powered by Bun</title>
<link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico">
<link rel="stylesheet" crossorigin="" href="/chunk-[HASH].css"><script type="module" crossorigin="" src="/chunk-[HASH].js"></script></head>
<body>
<div id="root"><div class="app"><main class="container"><div class="hero"><div class="logo animate-bounce">🥟</div><h1>Welcome to <span class="gradient-text">Bun</span></h1><p class="description">The all-in-one JavaScript runtime &amp; toolkit designed for speed</p><div class="cta-buttons"><a href="https://bun.sh" class="button primary" target="_blank" rel="noopener noreferrer">Get Started</a><a href="https://github.com/oven-sh/bun" class="button secondary" target="_blank" rel="noopener noreferrer">View on GitHub</a></div><div class="stats"><div class="stat"><span class="stat-value">3x</span><span class="stat-label">Bun Bun Bun</span></div><div class="stat"><span class="stat-value">0.5s</span><span class="stat-label">Average Install Time</span></div><div class="stat"><span class="stat-value">Extremely</span><span class="stat-label">Node.js Compatible</span></div></div></div><section class="features-section"><h2>Why Choose Bun?</h2><div class="features"><div class="feature hover:scale-105"><div class="feature-icon">⚡️</div><h3>Lightning Fast</h3><p>Built from scratch in <span class="highlight">Zig</span>, Bun is focused on performance and developer experience</p></div><div class="feature hover:scale-105"><div class="feature-icon">🎯</div><h3>All-in-One</h3><p>Bundler, test runner, and npm-compatible package manager in a single tool</p></div><div class="feature hover:scale-105"><div class="feature-icon">🚀</div><h3>JavaScript Runtime</h3><p>Drop-in replacement for Node.js with <span class="highlight">3x faster</span> startup time</p></div><div class="feature hover:scale-105"><div class="feature-icon">📦</div><h3>Package Management</h3><p>Native package manager that can install dependencies up to <span class="highlight">30x faster</span> than npm</p></div><div class="feature hover:scale-105"><div class="feature-icon">🧪</div><h3>Testing Made Simple</h3><p>Built-in test runner with Jest-compatible API and snapshot testing</p></div><div class="feature hover:scale-105"><div class="feature-icon">🔥</div><h3>Hot Reloading</h3><p>Lightning-fast hot module replacement (HMR) for rapid development</p></div></div></section></main><footer class="footer"><div class="footer-content"><div class="footer-logo"><span class="logo-small">🥟</span><span class="footer-text">Built with Bun</span></div><nav class="footer-links"><a href="https://bun.sh/docs" class="footer-link hover:text-accent" target="_blank" rel="noopener noreferrer">Documentation</a><a href="https://github.com/oven-sh/bun" class="footer-link hover:text-accent" target="_blank" rel="noopener noreferrer">GitHub</a><a href="https://bun.sh/discord" class="footer-link hover:text-accent" target="_blank" rel="noopener noreferrer">Discord</a><a href="https://bun.sh/blog" class="footer-link hover:text-accent" target="_blank" rel="noopener noreferrer">Blog</a></nav></div></footer></div></div>
</body></html>"
`;
exports[`development: false react spa (no tailwind) dev server 2`] = `
"create index.build.ts build
create index.css css
create index.html html
create index.client.tsx bun
create package.json npm
📦 Auto-installing 3 detected dependencies
$ bun --only-missing install classnames react-dom@19 react@19
bun add *.*.*
installed classnames@*.*.*
installed react-dom@*.*.*
installed react@*.*.*
4 packages installed [*ms]
--------------------------------
✨ React project configured
Development - frontend dev server with hot reload
bun dev
Production - build optimized assets
bun run build
Happy bunning! 🐇
Bun v*.*.* ready in *.** ms
url: http://[SERVER_URL]/"
`;
exports[`development: false react spa (tailwind) dev server 1`] = `
"<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index | Powered by Bun</title>
<link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico">
<link rel="stylesheet" crossorigin="" href="/chunk-[HASH].css"><script type="module" crossorigin="" src="/chunk-[HASH].js"></script></head>
<body>
<div id="root"><div class="min-h-screen bg-gradient-to-b from-gray-900 to-black text-white"><div class="max-w-6xl mx-auto px-4 py-20"><div class="text-center mb-16"><h1 class="text-6xl font-bold mb-6"><span class="text-purple-400">bun create</span> for React</h1><p class="text-xl text-gray-300 mb-8">Start a React dev server instantly from a single component file</p><div class="bg-gray-800 p-4 rounded-lg flex items-center justify-between max-w-lg mx-auto mb-8"><code class="text-purple-400">bun create ./MyComponent.tsx</code><button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded transition">Copy</button></div></div><div class="grid md:grid-cols-3 gap-8 mb-20"><div class="bg-gray-800 p-6 rounded-lg"><h3 class="text-xl font-semibold mb-4">Zero Config</h3><p class="text-gray-300">Just write your React component and run. No setup needed.</p></div><div class="bg-gray-800 p-6 rounded-lg"><h3 class="text-xl font-semibold mb-4">Auto Dependencies</h3><p class="text-gray-300">Automatically detects and installs required npm packages.</p></div><div class="bg-gray-800 p-6 rounded-lg"><h3 class="text-xl font-semibold mb-4">Tool Detection</h3><p class="text-gray-300">Recognizes Tailwind, animations, and UI libraries automatically.</p></div></div><div class="bg-gray-800 rounded-lg p-8 mb-20"><h2 class="text-3xl font-bold mb-6">How it Works</h2><div class="space-y-4"><div class="flex items-start gap-4"><div class="bg-purple-600 rounded-full p-2 mt-1">1</div><div><h3 class="font-semibold mb-2">Create Component</h3><p class="text-gray-300">Write your React component in a .tsx file</p></div></div><div class="flex items-start gap-4"><div class="bg-purple-600 rounded-full p-2 mt-1">2</div><div><h3 class="font-semibold mb-2">Run Command</h3><p class="text-gray-300">Execute bun create with your file path</p></div></div><div class="flex items-start gap-4"><div class="bg-purple-600 rounded-full p-2 mt-1">3</div><div><h3 class="font-semibold mb-2">Start Developing</h3><p class="text-gray-300">Dev server starts instantly with hot reload</p></div></div></div></div><div class="text-center"><h2 class="text-3xl font-bold mb-6">Ready to Try?</h2><div class="space-x-4"><a href="https://bun.sh/docs" class="inline-block bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg transition">Read Docs</a><a href="https://github.com/oven-sh/bun" class="inline-block bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-lg transition">GitHub →</a></div></div></div></div></div>
</body></html>"
`;
exports[`development: false react spa (tailwind) dev server 2`] = `
"create index.build.ts build
create index.css css
create index.html html
create index.client.tsx bun
create bunfig.toml bun
create package.json npm
📦 Auto-installing 4 detected dependencies
$ bun --only-missing install tailwindcss bun-plugin-tailwind react-dom@19 react@19
bun add *.*.*
installed tailwindcss@*.*.*
installed bun-plugin-tailwind@*.*.*
installed react-dom@*.*.*
installed react@*.*.*
7 packages installed [*ms]
--------------------------------
✨ React + Tailwind project configured
Development - frontend dev server with hot reload
bun dev
Production - build optimized assets
bun run build
Happy bunning! 🐇
Bun *.*.* ready in *.** ms
url: http://[SERVER_URL]/"
`;
exports[`development: false shadcn/ui dev server 1`] = `
"create lib/utils.ts shadcn
create index.css shadcn
create index.build.ts bun
create index.client.tsx bun
create index.css css
create index.html html
create styles/globals.css shadcn
create bunfig.toml bun
create package.json npm
create tsconfig.json tsc
create components.json shadcn
📦 Auto-installing 9 detected dependencies
$ bun --only-missing install lucide-react tailwindcss bun-plugin-tailwind tailwindcss-animate class-variance-authority clsx tailwind-merge react-dom@19 react@19
bun add *.*.*
installed lucide-react@*.*.*
installed tailwindcss@*.*.*
installed bun-plugin-tailwind@*.*.*
installed tailwindcss-animate@*.*.*
installed class-variance-authority@*.*.*
installed clsx@*.*.*
installed tailwind-merge@*.*.*
installed react-dom@*.*.*
installed react@*.*.*
12 packages installed [*ms]
😎 Setting up shadcn/ui components
$ bun x shadcn@canary add -y button badge card
- components/ui/button.tsx
- components/ui/badge.tsx
- components/ui/card.tsx
--------------------------------
✨ React + shadcn/ui + Tailwind project configured
Development - frontend dev server with hot reload
bun dev
Production - build optimized assets
bun run build
Happy bunning! 🐇
Bun *.*.* ready in *.** ms
url: http://[SERVER_URL]/"
`;
exports[`development: false shadcn/ui dev server 2`] = `
"<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index | Powered by Bun</title>
<link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico">
<link rel="stylesheet" crossorigin="" href="/chunk-[HASH].css"><script type="module" crossorigin="" src="/chunk-[HASH].js"></script></head>
<body>
<div id="root"><div class="min-h-screen bg-gradient-to-b from-background to-slate-900"><div class="container mx-auto px-4 py-16"><section class="text-center mb-16 space-y-6"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&amp;>svg]:size-3 gap-1 [&amp;>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-auto border-transparent bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90 mb-2">New in Bun*.*.*</span><h1 class="text-4xl md:text-6xl font-bold tracking-tight">From Component to App in<span class="text-primary"> Seconds</span></h1><p class="text-xl text-muted-foreground max-w-2xl mx-auto">Start a complete dev server from a single React component. No config needed.</p><div class="flex flex-wrap justify-center gap-4 pt-4"><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-10 rounded-md px-6 has-[>svg]:px-4 min-w-[140px]">Get Started</button><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground h-10 rounded-md px-6 has-[>svg]:px-4 min-w-[140px]">Documentation</button></div></section><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm bg-slate-900 p-6 mb-16"><div class="overflow-x-auto"><pre class="text-green-400 text-sm md:text-base"><code>$ bun create ./MyComponent.tsx<br>📦 Installing dependencies...<br>🔍 Detected Tailwind CSS<br>🎨 Detected shadcn/ui<br>✨ Dev server running at http://localhost:3000</code></pre></div></div><section class="grid md:grid-cols-3 gap-8 mb-16"><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm p-6 hover:shadow-lg transition-shadow duration-200"><div class="flex items-center gap-2 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-primary shrink-0"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg><h3 class="font-semibold text-lg">Auto Dependencies</h3></div><p class="text-muted-foreground">Automatically detects and installs required dependencies for your component</p></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm p-6 hover:shadow-lg transition-shadow duration-200"><div class="flex items-center gap-2 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-primary shrink-0"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg><h3 class="font-semibold text-lg">Tool Detection</h3></div><p class="text-muted-foreground">Seamlessly integrates with Tailwind CSS, shadcn/ui, and other popular tools</p></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm p-6 hover:shadow-lg transition-shadow duration-200"><div class="flex items-center gap-2 mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-primary shrink-0"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg><h3 class="font-semibold text-lg">Zero Config</h3></div><p class="text-muted-foreground">No setup required. Start developing instantly with hot reload enabled</p></div></section><section class="text-center"><div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm p-8 bg-primary/5 border-primary/10"><h2 class="text-2xl md:text-3xl font-bold mb-4">Ready to streamline your React development?</h2><p class="text-muted-foreground mb-6">Get started with Bun's powerful component development workflow today.</p><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-10 rounded-md px-6 has-[>svg]:px-4 min-w-[160px]">Install Bun</button></div></section></div></div></div>
</body></html>"
`;
Reference in New Issue View Git Blame Copy Permalink