diff --git a/packages/bun-landing/index.css b/packages/bun-landing/index.css index bd1b41e961df2c..9bc802de0d9bdf 100644 --- a/packages/bun-landing/index.css +++ b/packages/bun-landing/index.css @@ -302,7 +302,6 @@ header { align-items: center; width: min-content; white-space: nowrap; - gap: 2rem; } .Tab { @@ -312,6 +311,7 @@ header { padding-bottom: 8px; border-bottom: 1px solid #ccc; cursor: pointer; + padding: 16px 16px; } .Tab[data-tab="react"]:hover, @@ -321,6 +321,7 @@ header { .Tab[data-tab="ffi"]:hover, .Graphs--active-ffi .Tab[data-tab="ffi"] { border-bottom-color: aquamarine; + background-color: rgba(130, 216, 247, 0.1); border-right-color: aquamarine; border-left-color: aquamarine; } @@ -630,6 +631,11 @@ li { } } +#explain { + max-width: 650px; + margin: 0 auto; +} + @media (max-width: 930px) { header { padding: 24px 16px; @@ -872,3 +878,47 @@ li { border-top: 1px solid rgba(200, 200, 200, 0.1); } } + +#explain p > code { + white-space: pre; + padding: 1px 2px; +} + +.Group { + display: block; +} + +.Tag--Command { + display: block; + width: fit-content; + margin-bottom: 0.5rem; + padding: 8px 12px; +} + +.Label-replace { + font-weight: 500; +} + +.Label-text { + margin-top: 0.5rem; + margin-bottom: 1rem; +} + +#batteries { + padding-left: 0; +} + +.Group { + margin-bottom: 2rem; +} + +.Group strong { + display: block; +} + +.Built { + text-align: center; + margin-top: 4rem; + margin-bottom: 2rem; + color: #333; +} diff --git a/packages/bun-landing/page.tsx b/packages/bun-landing/page.tsx index dba64517e0961a..66590de7974cf6 100644 --- a/packages/bun-landing/page.tsx +++ b/packages/bun-landing/page.tsx @@ -48,6 +48,18 @@ const Bun = ({ children, href, Tag = href ? "a" : "span" }) => ( const fmt = new Intl.NumberFormat(); +const Label = ({ children, replace }) => { + if (replace) { + return ( +
+
{replace}
+
{children}
+
+ ); + } + return
{children}
; +}; + const BarGraphItem = ({ type, amount = 0, label, max = 0 }) => (
(
); +const Group = ({ children, ...props }) => ( +
+ {children} +
+); + export default () => ( + + @@ -239,6 +259,7 @@ export default () => ( +
@@ -412,42 +433,39 @@ export default () => (
-

🐚 All the tools

+

Tell me more about Bun

+

+ Bun is a modern JavaScript runtime like Node or Deno. It was built + from scratch to focus on three main things: +

    -
  • - bun run start   - package.json "scripts"{" "} - - 30x faster than npm run - -
  • - -
  • - bun install installs npm packages 2x - 100x - faster than npm, yarn or pnpm -
  • +
  • Extremely lightweight (it has the edge in mind).
  • - bun dev bun's frontend dev server{" "} - - boots 30x faster than Create React App - -
  • - -
  • - bun bun bundle node_modules into a single file + New levels of performance (extending JavaScriptCore, the engine).
  • -
  • - bun wiptest{" "} - - you've never seen a JavaScript test runner this fast - {" "} - (or incomplete) + Being a great and complete tool (bundler, transpiler, package + manager).
- -

🔋 Batteries included

-
    +

    + Bun is designed as a drop-in replacement for your current JavaScript + & TypeScript apps or scripts — on your local computer, server or + on the edge. Bun natively implements hundreds of Node.js and Web + APIs, including 90% of Node-API functions (native modules), fs, + path, Buffer and more. The goal of Bun is to run most of the worlds + JavaScript outside of browsers, bringing performance and complexity + enhancements to your future infrastructure, as well as developer + productivity through better, simpler tooling. +

    +

    + The goal of Bun is to run most of the worlds JavaScript outside of + browsers, bringing performance and complexity enhancements to your + future infrastructure, as well as developer productivity through + better, simpler tooling. +

    +

    Batteries included

    +
    • Web APIs like{" "} @@ -469,36 +487,43 @@ export default () => ( and CommonJS are supported, but Bun internally uses ESM.
    • - JSX TypeScript in bun.js, - every file is transpiled. TypeScript & JSX just work. + In bun.js, every file is transpiled.{" "} + TypeScript & JSX just + work.
    • - tsconfig.json bun supports{" "} - "paths", "jsxImportSource" - and more from tsconfig.json + bun supports "paths",{" "} + "jsxImportSource" + and more from tsconfig.json files
    • Bun.Transpiler bun's JSX & TypeScript transpiler is available as an API in Bun.js
    • - Bun.write use the fastest system calls available to - write, copy, pipe, send and clone files. + use the fastest system calls available with Bun.write{" "} + to write, copy, pipe, send and clone files.
    • - .env bun.js automatically loads environment variables - from .env files. No more{" "} + bun.js automatically loads environment variables from{" "} + .env files. No more{" "} require("dotenv").load()
    • - bun:sqlite fast SQLite3 client built-in + bun ships with a fast SQLite3 client builtin bun:sqlite
    • Node-API {" "} - bun.js implements most of Node-API (NAPI). Many Node.js native - modules just work. + bun.js implements most of Node.js'{" "} + + native addons API + + , Node-API (NAPI). Many Node.js native modules just work.
    • bun:ffi call native code from JavaScript with bun's @@ -511,8 +536,46 @@ export default () => (
    +

    How does Bun work?

    +

    + Bun.js uses the{" "} + + JavaScriptCore + {" "} + engine, which tends{" "} + + to start + {" "} + and perform a little faster than more traditional choices like V8. + Bun is written in{" "} + + + + , a low-level programming language with manual memory management. +
    +
    + Most of Bun is written from scratch including the JSX/TypeScript + transpiler, npm client, bundler, SQLite client, HTTP client, + WebSocket client and more. +

    +

    Why is Bun fast?

    +

    + An enourmous amount of time spent profiling, benchmarking and + optimizing things. The answer is different for every part of Bun, + but one general theme:{" "} + + + {" "} + 's low-level control over memory and lack of hidden control flow + makes it much simpler to write fast software.{" "} + + Sponsor the Zig Software Foundation + +

    Getting started

    -

    To install bun, run this{" "} @@ -520,11 +583,9 @@ export default () => ( {" "} in your terminal. It downloads Bun from GitHub.

    - {` curl https://bun.sh/install | bash `} -

    {" "} Bun's HTTP server is built on web standards like{" "} @@ -542,7 +603,6 @@ curl https://bun.sh/install | bash Response

    - {` // http.js export default { @@ -552,11 +612,8 @@ export default { }, }; `} -

    Run it with bun:

    - {`bun run http.js`} -

    Then open{" "} @@ -574,53 +631,61 @@ export default { Bun's Discord

    -

    How does Bun work?

    - -

    - Bun.js uses the{" "} - - JavaScriptCore - {" "} - engine, which tends{" "} - - to start - {" "} - and perform a little faster than more traditional choices like V8. - Bun is written in{" "} - - - - , a low-level programming language with manual memory management. +

    Bun CLI

    + + bun run +

    + The same command for running JavaScript & TypeScript files + with bun's JavaScript runtime also runs package.json{" "} + "scripts". +

    + + Replace npm run with{" "} + bun run and save 160ms on every run. +
    +
    + bun runs package.json scripts{" "} + + 30x faster than npm run + +
    {" "} +
    + + + bun install +

    + bun install is an npm-compatible package manager. You probably + will be surprised by how much faster copying files can get. +

    + + Replace yarn with{" "} + bun install and get 20x faster + package installs. +
    - Most of Bun is written from scratch including the JSX/TypeScript - transpiler, npm client, bundler, SQLite client, HTTP client, - WebSocket client and more. -

    - -

    Why is Bun fast?

    -

    - An enourmous amount of time spent profiling, benchmarking and - optimizing things. The answer is different for every part of Bun, - but one general theme:{" "} - - - {" "} - 's low-level control over memory and lack of hidden control flow - makes it much simpler to write fast software.{" "} - - Sponsor the Zig Software Foundation - -

    +
    + bun install uses the fastest system calls available to copy files. +
    +
    + + bun wiptest +

    + A Jest-like test runner for JavaScript & TypeScript projects + builtin to bun +

    + +

    What is the license?

    MIT License, excluding dependencies which have various licenses.

    -

    How do I see the source code?

    Bun is on GitHub @@ -646,6 +711,7 @@ document.querySelector("#code-box-copy").addEventListener("click", async e => { `, }} /> +

    Built with Bun {process.version}
    ); diff --git a/packages/bun-landing/public/index.css b/packages/bun-landing/public/index.css index bd1b41e961df2c..9bc802de0d9bdf 100644 --- a/packages/bun-landing/public/index.css +++ b/packages/bun-landing/public/index.css @@ -302,7 +302,6 @@ header { align-items: center; width: min-content; white-space: nowrap; - gap: 2rem; } .Tab { @@ -312,6 +311,7 @@ header { padding-bottom: 8px; border-bottom: 1px solid #ccc; cursor: pointer; + padding: 16px 16px; } .Tab[data-tab="react"]:hover, @@ -321,6 +321,7 @@ header { .Tab[data-tab="ffi"]:hover, .Graphs--active-ffi .Tab[data-tab="ffi"] { border-bottom-color: aquamarine; + background-color: rgba(130, 216, 247, 0.1); border-right-color: aquamarine; border-left-color: aquamarine; } @@ -630,6 +631,11 @@ li { } } +#explain { + max-width: 650px; + margin: 0 auto; +} + @media (max-width: 930px) { header { padding: 24px 16px; @@ -872,3 +878,47 @@ li { border-top: 1px solid rgba(200, 200, 200, 0.1); } } + +#explain p > code { + white-space: pre; + padding: 1px 2px; +} + +.Group { + display: block; +} + +.Tag--Command { + display: block; + width: fit-content; + margin-bottom: 0.5rem; + padding: 8px 12px; +} + +.Label-replace { + font-weight: 500; +} + +.Label-text { + margin-top: 0.5rem; + margin-bottom: 1rem; +} + +#batteries { + padding-left: 0; +} + +.Group { + margin-bottom: 2rem; +} + +.Group strong { + display: block; +} + +.Built { + text-align: center; + margin-top: 4rem; + margin-bottom: 2rem; + color: #333; +} diff --git a/packages/bun-landing/public/index.html b/packages/bun-landing/public/index.html index 5c2a8104b6cb44..487b951879e790 100644 --- a/packages/bun-landing/public/index.html +++ b/packages/bun-landing/public/index.html @@ -1,16 +1,21 @@ -

    Bun is a fast all-in-one JavaScript runtime

    Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.

    Install Bun CLI v0.1.0 (beta)
    macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux
    curl https://bun.sh/install | bash
    copy
    Show script source
    Bun.serve
    bun:sqlite
    bun:ffi
    Server-side rendering React
    HTTP requests per second (Linux AMD64)
    48,936
    16,288
    12,289
    Average queries per second
    SELECT * from "Orders" (Northwind Traders)
    60.24
    23.28
    9.55
    Operations per second
    Call add(1,2,3) from JavaScript
    115,473,441
    43,478,261
    2,891,761
    Install Bun CLI v0.1.0 (beta)
    macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux
    curl https://bun.sh/install | bash
    copy
    Show script source

    🐚 All the tools

    🔋 Batteries included

    • Web APIs like fetch, WebSocket, and ReadableStream are builtin
    • node_modules bun implements Node.js' module resolution algorithm, so you can use npm packages in bun.js. ESM and CommonJS are supported, but Bun internally uses ESM.
    • JSX TypeScript in bun.js, every file is transpiled. TypeScript & JSX just work.
    • tsconfig.json bun supports "paths", "jsxImportSource"and more from tsconfig.json
    • Bun.Transpiler bun's JSX & TypeScript transpiler is available as an API in Bun.js
    • Bun.write use the fastest system calls available to write, copy, pipe, send and clone files.
    • .env bun.js automatically loads environment variables from .env files. No more require("dotenv").load()
    • bun:sqlite fast SQLite3 client built-in
    • Node-API bun.js implements most of Node-API (NAPI). Many Node.js native modules just work.
    • bun:ffi call native code from JavaScript with bun's low-overhead foreign function interface
    • node:fs node:path bun.js natively supports a growing list of Node.js core modules along with globals like Buffer and process.

    Getting started

    To install bun, run this install script in your terminal. It downloads Bun from GitHub.

    curl https://bun.sh/install | bash

    Bun's HTTP server is built on web standards like Request and Response

    // http.js
    +

    Bun is a fast all-in-one JavaScript runtime

    Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.

    Install Bun CLI v0.1.0 (beta)
    macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux
    curl https://bun.sh/install | bash
    copy
    Show script source
    Bun.serve
    bun:sqlite
    bun:ffi
    Server-side rendering React
    HTTP requests per second (Linux AMD64)
    48,936
    16,288
    12,289
    Average queries per second
    SELECT * from "Orders" (Northwind Traders)
    60.24
    23.28
    9.55
    Operations per second
    Call add(1,2,3) from JavaScript
    115,473,441
    43,478,261
    2,891,761
    Install Bun CLI v0.1.0 (beta)
    macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux
    curl https://bun.sh/install | bash
    copy
    Show script source

    Tell me more about Bun

    Bun is a modern JavaScript runtime like Node or Deno. It was built from scratch to focus on three main things:

    • Extremely lightweight (it has the edge in mind).
    • New levels of performance (extending JavaScriptCore, the engine).
    • Being a great and complete tool (bundler, transpiler, package manager).

    Bun is designed as a drop-in replacement for your current JavaScript & TypeScript apps or scripts — on your local computer, server or on the edge. Bun natively implements hundreds of Node.js and Web APIs, including 90% of Node-API functions (native modules), fs, path, Buffer and more. The goal of Bun is to run most of the worlds JavaScript outside of browsers, bringing performance and complexity enhancements to your future infrastructure, as well as developer productivity through better, simpler tooling.

    The goal of Bun is to run most of the worlds JavaScript outside of browsers, bringing performance and complexity enhancements to your future infrastructure, as well as developer productivity through better, simpler tooling.

    Batteries included

    • Web APIs like fetch, WebSocket, and ReadableStream are builtin
    • node_modules bun implements Node.js' module resolution algorithm, so you can use npm packages in bun.js. ESM and CommonJS are supported, but Bun internally uses ESM.
    • In bun.js, every file is transpiled. TypeScript & JSX just work.
    • bun supports "paths", "jsxImportSource"and more from tsconfig.json files
    • Bun.Transpiler bun's JSX & TypeScript transpiler is available as an API in Bun.js
    • use the fastest system calls available with Bun.write to write, copy, pipe, send and clone files.
    • bun.js automatically loads environment variables from .env files. No more require("dotenv").load()
    • bun ships with a fast SQLite3 client builtin bun:sqlite
    • Node-API bun.js implements most of Node.jÀ' native addons API, Node-API (NAPI). Many Node.js native modules just work.
    • bun:ffi call native code from JavaScript with bun's low-overhead foreign function interface
    • node:fs node:path bun.js natively supports a growing list of Node.js core modules along with globals like Buffer and process.

    How does Bun work?

    Bun.js uses the JavaScriptCore engine, which tends to start and perform a little faster than more traditional choices like V8. Bun is written in , a low-level programming language with manual memory management.

    Most of Bun is written from scratch including the JSX/TypeScript transpiler, npm client, bundler, SQLite client, HTTP client, WebSocket client and more.

    Why is Bun fast?

    An enourmous amount of time spent profiling, benchmarking and optimizing things. The answer is different for every part of Bun, but one general theme: 's low-level control over memory and lack of hidden control flow makes it much simpler to write fast software. Sponsor the Zig Software Foundation

    Getting started

    To install bun, run this install script in your terminal. It downloads Bun from GitHub.

    curl https://bun.sh/install | bash

    Bun's HTTP server is built on web standards like Request and Response

    // http.js
     export default {
       port: 3000,
       fetch(request) {
         return new Response("Welcome to Bun!");
       },
    -};

    Run it with bun:

    bun run http.js

    Then open http://localhost:3000 in your browser

    See more examples and check out the docs. If you have any questions or want help, join Bun's Discord

    How does Bun work?

    Bun.js uses the JavaScriptCore engine, which tends to start and perform a little faster than more traditional choices like V8. Bun is written in , a low-level programming language with manual memory management.

    Most of Bun is written from scratch including the JSX/TypeScript transpiler, npm client, bundler, SQLite client, HTTP client, WebSocket client and more.

    Why is Bun fast?

    An enourmous amount of time spent profiling, benchmarking and optimizing things. The answer is different for every part of Bun, but one general theme: 's low-level control over memory and lack of hidden control flow makes it much simpler to write fast software. Sponsor the Zig Software Foundation

    What is the license?

    MIT License, excluding dependencies which have various licenses.

    How do I see the source code?

    Bun is on GitHub

    \ No newline at end of file + +document.querySelector("#code-box-copy").addEventListener("click", async e => { + var el = document.querySelector("#code-box"); + await navigator.clipboard.writeText("curl https://bun.sh/install | bash"); +}); +
    Built with Bun v0.1.0
    \ No newline at end of file diff --git a/packages/bun-landing/ssr.tsx b/packages/bun-landing/ssr.tsx index a608f968e86609..3ff8adac981109 100644 --- a/packages/bun-landing/ssr.tsx +++ b/packages/bun-landing/ssr.tsx @@ -10,6 +10,10 @@ async function fetch(req: Request) { return new Response("", { status: 404 }); } + if (req.url.endsWith(".css")) { + return new Response(file(join(import.meta.dir + "/", "index.css"))); + } + if (!req.url.includes(".")) { const { default: Page } = await import("./page.tsx"); return new Response(await renderToReadableStream(), {