From e76a5f847e78fee4e62f6eb37d468557a1504c55 Mon Sep 17 00:00:00 2001 From: 简律纯 Date: Wed, 3 May 2023 01:22:45 +0800 Subject: --- .../pages/TRPG-home/DocsBenchmarkStat.tsx | 53 ++++ .../pages/TRPG-home/DocsBenchmarksGraph.tsx | 31 ++ .../pages/TRPG-home/PackBenchmarkTabs.tsx | 149 +++++++++ docs/components/pages/TRPG-home/PackBenchmarks.tsx | 97 ++++++ .../pages/TRPG-home/PackBenchmarksGraph.tsx | 333 +++++++++++++++++++++ .../pages/TRPG-home/PackBenchmarksPicker.tsx | 20 ++ docs/components/pages/TRPG-home/PackDropdown.tsx | 117 ++++++++ docs/components/pages/TRPG-home/PackFeatures.tsx | 12 + docs/components/pages/TRPG-home/PackHero.tsx | 115 +++++++ docs/components/pages/TRPG-home/PackLetter.tsx | 114 +++++++ .../pages/TRPG-home/benchmark-data/README.md | 7 + .../pages/TRPG-home/benchmark-data/data.json | 54 ++++ docs/components/pages/TRPG-home/index.tsx | 24 ++ .../pages/pack-home/DocsBenchmarkStat.tsx | 53 ---- .../pages/pack-home/DocsBenchmarksGraph.tsx | 31 -- .../pages/pack-home/PackBenchmarkTabs.tsx | 149 --------- docs/components/pages/pack-home/PackBenchmarks.tsx | 97 ------ .../pages/pack-home/PackBenchmarksGraph.tsx | 333 --------------------- .../pages/pack-home/PackBenchmarksPicker.tsx | 20 -- docs/components/pages/pack-home/PackDropdown.tsx | 117 -------- docs/components/pages/pack-home/PackFeatures.tsx | 12 - docs/components/pages/pack-home/PackHero.tsx | 115 ------- docs/components/pages/pack-home/PackLetter.tsx | 114 ------- .../pages/pack-home/benchmark-data/README.md | 7 - .../pages/pack-home/benchmark-data/data.json | 54 ---- docs/components/pages/pack-home/index.tsx | 24 -- 26 files changed, 1126 insertions(+), 1126 deletions(-) create mode 100644 docs/components/pages/TRPG-home/DocsBenchmarkStat.tsx create mode 100644 docs/components/pages/TRPG-home/DocsBenchmarksGraph.tsx create mode 100644 docs/components/pages/TRPG-home/PackBenchmarkTabs.tsx create mode 100644 docs/components/pages/TRPG-home/PackBenchmarks.tsx create mode 100644 docs/components/pages/TRPG-home/PackBenchmarksGraph.tsx create mode 100644 docs/components/pages/TRPG-home/PackBenchmarksPicker.tsx create mode 100644 docs/components/pages/TRPG-home/PackDropdown.tsx create mode 100644 docs/components/pages/TRPG-home/PackFeatures.tsx create mode 100644 docs/components/pages/TRPG-home/PackHero.tsx create mode 100644 docs/components/pages/TRPG-home/PackLetter.tsx create mode 100644 docs/components/pages/TRPG-home/benchmark-data/README.md create mode 100644 docs/components/pages/TRPG-home/benchmark-data/data.json create mode 100644 docs/components/pages/TRPG-home/index.tsx delete mode 100644 docs/components/pages/pack-home/DocsBenchmarkStat.tsx delete mode 100644 docs/components/pages/pack-home/DocsBenchmarksGraph.tsx delete mode 100644 docs/components/pages/pack-home/PackBenchmarkTabs.tsx delete mode 100644 docs/components/pages/pack-home/PackBenchmarks.tsx delete mode 100644 docs/components/pages/pack-home/PackBenchmarksGraph.tsx delete mode 100644 docs/components/pages/pack-home/PackBenchmarksPicker.tsx delete mode 100644 docs/components/pages/pack-home/PackDropdown.tsx delete mode 100644 docs/components/pages/pack-home/PackFeatures.tsx delete mode 100644 docs/components/pages/pack-home/PackHero.tsx delete mode 100644 docs/components/pages/pack-home/PackLetter.tsx delete mode 100644 docs/components/pages/pack-home/benchmark-data/README.md delete mode 100644 docs/components/pages/pack-home/benchmark-data/data.json delete mode 100644 docs/components/pages/pack-home/index.tsx (limited to 'docs') diff --git a/docs/components/pages/TRPG-home/DocsBenchmarkStat.tsx b/docs/components/pages/TRPG-home/DocsBenchmarkStat.tsx new file mode 100644 index 0000000..5b8dcf6 --- /dev/null +++ b/docs/components/pages/TRPG-home/DocsBenchmarkStat.tsx @@ -0,0 +1,53 @@ +import benchmarkData from "./benchmark-data/data.json"; + +type StatFunc = (data: typeof benchmarkData) => string; + +/** + * Replace with satisfies keyword when TS 4.9 drops + */ +const satisfies = + () => + (t: U) => + t; + +const formatToSeconds = (seconds: number) => `${seconds.toFixed(1)}s`; +const formatPercentage = (percentage: number) => `${percentage.toFixed(1)}x`; + +const stats = satisfies>()({ + "next12-cold-1000": (data) => formatToSeconds(data.cold[1000].next12), + "turbopack-cold-1000": (data) => formatToSeconds(data.cold[1000].next13), + "turbopack-cold-vs-next12": (data) => + formatPercentage(data.cold[1000].next12 / data.cold[1000].next13), + "turbopack-cold-vs-next12-30000": (data) => + formatPercentage(data.cold[30000].next12 / data.cold[30000].next13), + "turbopack-update-vs-next12": (data) => + formatPercentage( + data.file_change[1000].next12 / data.file_change[1000].next13 + ), + "turbopack-update-vs-next12-30000": (data) => + formatPercentage( + data.file_change[30000].next12 / data.file_change[30000].next13 + ), + "vite-cold-1000": (data) => formatToSeconds(data.cold[1000].vite), + "turbopack-cold-vs-vite": (data) => + formatPercentage(data.cold[1000].vite / data.cold[1000].next13), + "turbopack-cold-vs-vite-30000": (data) => + formatPercentage(data.cold[30000].vite / data.cold[30000].next13), + "turbopack-update-vs-vite": (data) => + formatPercentage( + data.file_change[1000].vite / data.file_change[1000].next13 + ), + "turbopack-update-vs-vite-30000": (data) => + formatPercentage( + data.file_change[30000].vite / data.file_change[30000].next13 + ), +}); + +type Stat = keyof typeof stats; + +export function DocsBenchmarkStat(props: { stat: Stat }) { + if (!stats[props.stat]) { + throw new Error(`Invalid stat: ${props.stat}`); + } + return stats[props.stat](benchmarkData); +} diff --git a/docs/components/pages/TRPG-home/DocsBenchmarksGraph.tsx b/docs/components/pages/TRPG-home/DocsBenchmarksGraph.tsx new file mode 100644 index 0000000..7fb9d55 --- /dev/null +++ b/docs/components/pages/TRPG-home/DocsBenchmarksGraph.tsx @@ -0,0 +1,31 @@ +import { useState } from "react"; +import { + BenchmarkBar, + BenchmarkCategory, + BenchmarkNumberOfModules, +} from "./PackBenchmarks"; +import { BenchmarksGraph } from "./PackBenchmarksGraph"; +import { PackBenchmarksPicker } from "./PackBenchmarksPicker"; + +export function DocsBenchmarksGraph(props: { + bars: BenchmarkBar[]; + category: BenchmarkCategory; +}) { + const [numberOfModules, setNumberOfModules] = + useState("1000"); + return ( +
+ +
+ +
+
+ ); +} diff --git a/docs/components/pages/TRPG-home/PackBenchmarkTabs.tsx b/docs/components/pages/TRPG-home/PackBenchmarkTabs.tsx new file mode 100644 index 0000000..f771fb1 --- /dev/null +++ b/docs/components/pages/TRPG-home/PackBenchmarkTabs.tsx @@ -0,0 +1,149 @@ +import { useRef, useState } from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { BenchmarkCategory } from "./PackBenchmarks"; +import classNames from "classnames"; +import gradients from "../home-shared/gradients.module.css"; + +const TABS: { + id: BenchmarkCategory; + title: string; + soon: boolean; + tooltip: string; +}[] = [ + { + id: "cold", + title: "Cold Start", + soon: false, + tooltip: "First run", + }, + { + id: "file_change", + title: "File Change", + soon: false, + tooltip: "Hot Reload (HMR)", + }, + { + id: "code_build", + title: "Code Build", + soon: true, + tooltip: "First Build", + }, + { + id: "build_from_cache", + title: "Build from Cache", + soon: true, + tooltip: "Second Build", + }, +]; + +const TRANSITION = { + duration: 0.3, + ease: [0.59, 0.15, 0.18, 0.93], +}; + +function SoonBadge() { + return ( + + Soon + + ); +} + +export function PackBenchmarkTabs({ + onTabChange, +}: { + onTabChange: (tab: BenchmarkCategory) => void; +}) { + const [activeTab, setActiveTab] = useState(0); + + const onTabClick = (index: number) => { + if (TABS[index].soon) return; + setActiveTab(index); + onTabChange(TABS[index].id); + }; + + return ( +
+
+ +
+ {TABS.map((tab, index) => ( + + ))} +
+ +
+
+ ); +} + +function ToolTip({ text, children }: { text; children: React.ReactNode }) { + const [show, setShow] = useState(false); + const timeout = useRef(); + + const onMouseEnter = () => { + timeout.current = setTimeout(() => { + setShow(true); + }, 800); + }; + + const onMouseLeave = () => { + clearTimeout(timeout.current); + setShow(false); + }; + + return ( +
+ +
+
+

{text}

+
+ +
{children}
+
+ ); +} diff --git a/docs/components/pages/TRPG-home/PackBenchmarks.tsx b/docs/components/pages/TRPG-home/PackBenchmarks.tsx new file mode 100644 index 0000000..9bd1db8 --- /dev/null +++ b/docs/components/pages/TRPG-home/PackBenchmarks.tsx @@ -0,0 +1,97 @@ +import { useState } from "react"; +import { FadeIn } from "../home-shared/FadeIn"; +import { SectionHeader, SectionSubtext } from "../home-shared/Headings"; +import { BenchmarksGraph } from "./PackBenchmarksGraph"; +import { PackBenchmarksPicker } from "./PackBenchmarksPicker"; +import { PackBenchmarkTabs } from "./PackBenchmarkTabs"; + +export type BenchmarkNumberOfModules = "1000" | "5000" | "10000" | "30000"; +export type BenchmarkCategory = + | "cold" + | "from_cache" + | "file_change" + | "code_build" + | "build_from_cache"; +export interface BenchmarkData { + next13: number; + next12: number; + vite: number; + next11: number; +} + +export interface BenchmarkBar { + label: string; + key: keyof BenchmarkData; + turbo?: true; + swc?: true; +} + +export const DEFAULT_BARS: BenchmarkBar[] = [ + { + key: "next13", + label: "Next.js 13", + turbo: true, + }, + { + key: "next12", + label: "Next.js 12", + }, + { + key: "vite", + label: "Vite", + swc: true, + }, + { + key: "next11", + label: "Next.js 11", + }, +]; +export const HMR_BARS: BenchmarkBar[] = [ + { + key: "next13", + label: "Next.js 13", + turbo: true, + }, + { + key: "vite", + label: "Vite", + swc: true, + }, + { + key: "next12", + label: "Next.js 12", + }, + { + key: "next11", + label: "Next.js 11", + }, +]; + +export function PackBenchmarks() { + const [numberOfModules, setNumberOfModules] = + useState("1000"); + const [category, setCategory] = useState("cold"); + + return ( + +
+ Faster Than Fast + + Crafted by the creators of Webpack, Turbopack delivers unparalleled + performance at scale. + +
+
+ + +
+ + + ); +} diff --git a/docs/components/pages/TRPG-home/PackBenchmarksGraph.tsx b/docs/components/pages/TRPG-home/PackBenchmarksGraph.tsx new file mode 100644 index 0000000..f3107b0 --- /dev/null +++ b/docs/components/pages/TRPG-home/PackBenchmarksGraph.tsx @@ -0,0 +1,333 @@ +import cn from "classnames"; +import { + animate, + motion, + useInView, + useAnimation, + AnimationPlaybackControls, +} from "framer-motion"; +import Image from "next/image"; +import { useEffect, useRef, useState } from "react"; +import benchmarkData from "./benchmark-data/data.json"; +import { Gradient } from "../home-shared/Gradient"; +import gradients from "../home-shared/gradients.module.css"; +import { + BenchmarkBar, + BenchmarkCategory, + BenchmarkData, + BenchmarkNumberOfModules, +} from "./PackBenchmarks"; + +interface BenchmarksGraphProps { + category: BenchmarkCategory; + numberOfModules: BenchmarkNumberOfModules; + bars: BenchmarkBar[]; + pinTime?: true; +} + +export function BenchmarksGraph({ + category, + numberOfModules, + bars, + pinTime, +}: BenchmarksGraphProps) { + const data: BenchmarkData = benchmarkData[category][numberOfModules]; + const keys = bars.map((bar) => bar.key); + const longestTime = Math.max(...keys.map((key) => data[key])) * 1000; + const longestTimeWithPadding = longestTime * 1.15; + const graphRef = useRef(null); + const graphInView = useInView(graphRef, { once: true, margin: "-128px" }); + + return ( +
+
+ +
+
+ {bars.map((bar) => { + return ( + + } + duration={data[bar.key] * 1000} + longestTime={longestTimeWithPadding} + inView={graphInView} + pinTime={pinTime} + > + ); + })} +
+
+ ); +} + +const START_DELAY = 0.0; + +const graphBarVariants = { + initial: { + width: 0, + }, + progress: { + width: "100%", + }, +}; + +const graphBarWrapperVariants = { + hidden: { + opacity: 0, + }, + show: { + opacity: 1, + }, +}; + +function GraphBar({ + turbo, + duration, + longestTime, + inView, + Label, + pinTime, +}: { + turbo?: boolean; + duration: number; + longestTime: number; + Label: JSX.Element; + inView?: boolean; + // Pin the time + pinTime?: true; +}) { + const controls = useAnimation(); + const [timer, setTimer] = useState(0); + const [timerAnimation, setTimerAnimation] = + useState(); + const [barWidth, setBarWidth] = useState(0); + const [, setFinished] = useState(false); + + async function stopAnimation() { + timerAnimation && timerAnimation.stop(); + controls.stop(); + } + + async function resetAnimation() { + setTimer(0); + setFinished(false); + await controls.start("initial"); + } + + async function startAnimation() { + const transition = { + duration: duration / 1000, + delay: START_DELAY, + }; + setBarWidth((duration / longestTime) * 100); + await controls.start("show"); + controls + .start("progress", { + ...transition, + ease: "linear", + }) + .then(() => { + setFinished(true); + }); + const timerAnimationRef = animate(0, duration, { + ...transition, + ease: "linear", + onUpdate(value) { + setTimer(value); + }, + }); + setTimerAnimation(timerAnimationRef); + } + + async function playFullAnimation() { + await stopAnimation(); + await controls.start("hidden"); + await resetAnimation(); + await startAnimation(); + } + + useEffect(() => { + if (inView) { + void startAnimation(); + } else { + void stopAnimation(); + void resetAnimation(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [inView]); + + useEffect(() => { + if (!inView) return; + void playFullAnimation(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [duration, longestTime]); + + return ( +
+
{Label}
+
+ + + + + + +
+
+ ); +} + +const GraphTimer = ({ + turbo, + timer, + duration, +}: { + turbo: boolean; + timer: number; + duration: number; +}) => { + return ( +
+ {turbo && ( +
+ HydroRollTRPG + HydroRollTRPG + +
+ )} +

+

+
+ ); +}; + +function roundTo(num: number, decimals: number) { + const factor = Math.pow(10, decimals); + return Math.round(num * factor) / factor; +} + +const Time = ({ + value, + maxValue, +}: { + value: number; + maxValue: number; +}): JSX.Element => { + let unitValue: string; + let unit: string; + if (maxValue < 1000) { + unitValue = Math.round(value).toFixed(0); + unit = "ms"; + } else { + const roundedValue = roundTo(value / 1000, 1); + unitValue = roundedValue.toFixed(1); + unit = "s"; + } + + return ( + <> + {unitValue} + {unit} + + ); +}; + +function GraphLabel({ + label, + turbo, + swc, + mobileOnly, + esbuild, +}: { + label: string; + turbo?: boolean; + swc?: boolean; + mobileOnly?: boolean; + esbuild?: boolean; +}) { + return ( +
+

{label}

+ {turbo && ( +

+ turbo +

+ )} + {swc && ( +

+ with SWC +

+ )} + {esbuild && ( +

esbuild

+ )} +
+ ); +} diff --git a/docs/components/pages/TRPG-home/PackBenchmarksPicker.tsx b/docs/components/pages/TRPG-home/PackBenchmarksPicker.tsx new file mode 100644 index 0000000..33e5bfd --- /dev/null +++ b/docs/components/pages/TRPG-home/PackBenchmarksPicker.tsx @@ -0,0 +1,20 @@ +import { BenchmarkNumberOfModules } from "./PackBenchmarks"; +import { PackDropdown } from "./PackDropdown"; + +export function PackBenchmarksPicker(props: { + setNumberOfModules: (num: BenchmarkNumberOfModules) => void; +}) { + return ( +
+ + React Components + + props.setNumberOfModules(value)} + /> +
+ ); +} diff --git a/docs/components/pages/TRPG-home/PackDropdown.tsx b/docs/components/pages/TRPG-home/PackDropdown.tsx new file mode 100644 index 0000000..7ff5d76 --- /dev/null +++ b/docs/components/pages/TRPG-home/PackDropdown.tsx @@ -0,0 +1,117 @@ +import { useState, Fragment } from "react"; +import { Listbox, Transition } from "@headlessui/react"; +import { BenchmarkNumberOfModules } from "./PackBenchmarks"; + +export function PackDropdown({ + onOptionSelected, +}: { + onOptionSelected: (option: BenchmarkNumberOfModules) => void; +}) { + const [selectedOption, setSelectedOption] = + useState("1000"); + + const onSelect = (option: BenchmarkNumberOfModules) => { + onOptionSelected(option); + setSelectedOption(option); + }; + + return ( +
+ + + {Number(selectedOption).toLocaleString()} + + + + + + + `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ + active ? "bg-gray-800 text-gray-100" : "text-gray-900" + }` + } + > + 1000 + + + `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ + active ? "bg-gray-800 text-gray-100" : "text-gray-900" + }` + } + value="5000" + > + 5000 + + + `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ + active ? "bg-gray-800 text-gray-100" : "text-gray-900" + }` + } + value="10000" + > + 10000 + + + `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ + active ? "bg-gray-800 text-gray-100" : "text-gray-900" + }` + } + value="30000" + > + 30000 + + + + +
+ ); +} + +function BenchmarkOption({ + value, + onSelect, +}: { + value: BenchmarkNumberOfModules; + onSelect: (value: string) => void; +}) { + return ( +
onSelect(value)} + > +

+ {Number(value).toLocaleString()} +

+
+ ); +} + +function Arrow() { + return ( + + + + ); +} diff --git a/docs/components/pages/TRPG-home/PackFeatures.tsx b/docs/components/pages/TRPG-home/PackFeatures.tsx new file mode 100644 index 0000000..40fda95 --- /dev/null +++ b/docs/components/pages/TRPG-home/PackFeatures.tsx @@ -0,0 +1,12 @@ +import { PACK_HOME_FEATURES } from "../../../content/features"; +import { FeaturesBento } from "../home-shared/FeaturesBento"; + +export function PackFeatures() { + return ( + + ); +} diff --git a/docs/components/pages/TRPG-home/PackHero.tsx b/docs/components/pages/TRPG-home/PackHero.tsx new file mode 100644 index 0000000..9def8df --- /dev/null +++ b/docs/components/pages/TRPG-home/PackHero.tsx @@ -0,0 +1,115 @@ +import cn from "classnames"; +import Image from "next/image"; +import Link from "next/link"; +// import { Marquee } from "../../clients/Marquee"; +// import { Clients } from "../../clients/Clients"; +import gradients from "../home-shared/gradients.module.css"; +import { HeroText, SectionSubtext } from "../home-shared/Headings"; +import { Gradient } from "../home-shared/Gradient"; +import { FadeIn } from "../home-shared/FadeIn"; +import { CTAButton } from "../home-shared/CTAButton"; +import PackLogo from "../../logos/PackLogo"; + +export function PackHero() { + return ( + <> + + +
+ HydroRollTRPG + HydroRollTRPG +
+
+ +
+ +
+ + +
+ + +
+ + + The Rust-powered successor to Webpack + + Turbopack is an incremental bundler optimized for JavaScript and + TypeScript, written in Rust. + + + +
+ + + Get Started + + + + + GitHub + + +
+

License: MPL-2.0

+ + +
+ + + + ); +} diff --git a/docs/components/pages/TRPG-home/PackLetter.tsx b/docs/components/pages/TRPG-home/PackLetter.tsx new file mode 100644 index 0000000..46477d7 --- /dev/null +++ b/docs/components/pages/TRPG-home/PackLetter.tsx @@ -0,0 +1,114 @@ +import { HeroText } from "../home-shared/Headings"; +import Image from "next/image"; +import cn from "classnames"; +import gradients from "../home-shared/gradients.module.css"; +import { FadeIn } from "../home-shared/FadeIn"; +import { CTAButton } from "../home-shared/CTAButton"; +import Link from "next/link"; +import { Gradient } from "../home-shared/Gradient"; + +export function PackLetter() { + return ( +
+ + + Let's move +
+ the web forward + + +
+ +

+ It's time for a new beginning in compiler infrastructure for + the entire web ecosystem. Webpack has been downloaded over 3 billion + times. It's become an integral part of building for the web. + But just like Babel and Terser, it's time to go all-in on + native. I joined Vercel and assembled a team of world class + engineers to build the web's next generation bundler. +

+
+

+ This team has taken lessons from 10 years of Webpack, combined with + the innovations in incremental computation from Turborepo and + Google's Bazel, and invented an architecture ready to withstand + the next 10 years. +

+
+

+ With that, we're excited to introduce Turbopack, our + Rust-powered successor to Webpack. It will harness the power of our + build system, Turborepo, for massive performance improvements. + Turbopack is the new foundation of high-performance bare-metal + tooling and is now open source—we're excited to share it with + you. +

+ + + + + +
+ Image of Tobias Koopers +
+
+ Tobias Koppers hand written signature + Tobias Koppers hand written signature +
+

Tobias Koppers

+

Creator of Webpack

+
+
+ +
+ +
+ + + Start Building + + +
+ + +
+ ); +} diff --git a/docs/components/pages/TRPG-home/benchmark-data/README.md b/docs/components/pages/TRPG-home/benchmark-data/README.md new file mode 100644 index 0000000..9b53481 --- /dev/null +++ b/docs/components/pages/TRPG-home/benchmark-data/README.md @@ -0,0 +1,7 @@ +# `turbopack` Benchmark Data + +- `bench_startup`: Time from cold start of the bundler to the browser successfully retrieving bundled scripts. This does not include react hydration time. +- `bench_hydration`: Time from cold start of the bundler to the browser successfully retrieving bundled scripts. This does wait until react hydration has completed. +- `bench_restart`: Before measuring: warms up any available persistent cache (we don’t have one yet) by performing the equivalent of the bench_hydration benchmark, shuts down the server. Then, times another bench_hydration. +- `bench_hmr_to_eval`: Measures the time it takes from an incremental change to be made, bundled, sent over hmr, and evaluated by the browser. +- `bench_hmr_to_commit`: Measures the time it takes from an incremental change to be made, bundled, sent over hmr, evaluated by the browser, and committed by React (runs a useEffect). diff --git a/docs/components/pages/TRPG-home/benchmark-data/data.json b/docs/components/pages/TRPG-home/benchmark-data/data.json new file mode 100644 index 0000000..f88ae6f --- /dev/null +++ b/docs/components/pages/TRPG-home/benchmark-data/data.json @@ -0,0 +1,54 @@ +{ + "cold": { + "1000": { + "next13": 1.38187759, + "vite": 4.19890847, + "next12": 3.64327949, + "next11": 9.19035540 + }, + "5000": { + "next13": 3.99792562, + "vite": 16.59615430, + "next12": 12.14057345, + "next11": 32.89712268 + }, + "10000": { + "next13": 7.34248178, + "vite": 32.25177941, + "next12": 23.27525035, + "next11": 71.80680350 + }, + "30000": { + "next13": 21.97034306, + "vite": 97.74466099, + "next12": 89.07274544, + "next11": 237.61188540 + } + }, + "file_change": { + "1000": { + "next13": 0.01890358, + "vite": 0.10476515, + "next12": 0.14617346, + "next11": 0.21155549 + }, + "5000": { + "next13": 0.02379283, + "vite": 0.10963156, + "next12": 0.49470051, + "next11": 0.86600602 + }, + "10000": { + "next13": 0.02302405, + "vite": 0.11295908, + "next12": 1.15193035, + "next11": 2.35675312 + }, + "30000": { + "next13": 0.02246753, + "vite": 0.13328557, + "next12": 6.40370549, + "next11": 9.50431942 + } + } +} diff --git a/docs/components/pages/TRPG-home/index.tsx b/docs/components/pages/TRPG-home/index.tsx new file mode 100644 index 0000000..d08443b --- /dev/null +++ b/docs/components/pages/TRPG-home/index.tsx @@ -0,0 +1,24 @@ +import { PackBenchmarks } from "./PackBenchmarks"; +import { PackHero } from "./PackHero"; +import { PackLetter } from "./PackLetter"; +import { PackFeatures } from "./PackFeatures"; +import { GradientSectionBorder } from "../home-shared/GradientSectionBorder"; +import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles"; + +export default function HydroRollTRPGHome() { + return ( + <> + +
+ + + + + + + + +
+ + ); +} diff --git a/docs/components/pages/pack-home/DocsBenchmarkStat.tsx b/docs/components/pages/pack-home/DocsBenchmarkStat.tsx deleted file mode 100644 index 5b8dcf6..0000000 --- a/docs/components/pages/pack-home/DocsBenchmarkStat.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import benchmarkData from "./benchmark-data/data.json"; - -type StatFunc = (data: typeof benchmarkData) => string; - -/** - * Replace with satisfies keyword when TS 4.9 drops - */ -const satisfies = - () => - (t: U) => - t; - -const formatToSeconds = (seconds: number) => `${seconds.toFixed(1)}s`; -const formatPercentage = (percentage: number) => `${percentage.toFixed(1)}x`; - -const stats = satisfies>()({ - "next12-cold-1000": (data) => formatToSeconds(data.cold[1000].next12), - "turbopack-cold-1000": (data) => formatToSeconds(data.cold[1000].next13), - "turbopack-cold-vs-next12": (data) => - formatPercentage(data.cold[1000].next12 / data.cold[1000].next13), - "turbopack-cold-vs-next12-30000": (data) => - formatPercentage(data.cold[30000].next12 / data.cold[30000].next13), - "turbopack-update-vs-next12": (data) => - formatPercentage( - data.file_change[1000].next12 / data.file_change[1000].next13 - ), - "turbopack-update-vs-next12-30000": (data) => - formatPercentage( - data.file_change[30000].next12 / data.file_change[30000].next13 - ), - "vite-cold-1000": (data) => formatToSeconds(data.cold[1000].vite), - "turbopack-cold-vs-vite": (data) => - formatPercentage(data.cold[1000].vite / data.cold[1000].next13), - "turbopack-cold-vs-vite-30000": (data) => - formatPercentage(data.cold[30000].vite / data.cold[30000].next13), - "turbopack-update-vs-vite": (data) => - formatPercentage( - data.file_change[1000].vite / data.file_change[1000].next13 - ), - "turbopack-update-vs-vite-30000": (data) => - formatPercentage( - data.file_change[30000].vite / data.file_change[30000].next13 - ), -}); - -type Stat = keyof typeof stats; - -export function DocsBenchmarkStat(props: { stat: Stat }) { - if (!stats[props.stat]) { - throw new Error(`Invalid stat: ${props.stat}`); - } - return stats[props.stat](benchmarkData); -} diff --git a/docs/components/pages/pack-home/DocsBenchmarksGraph.tsx b/docs/components/pages/pack-home/DocsBenchmarksGraph.tsx deleted file mode 100644 index 7fb9d55..0000000 --- a/docs/components/pages/pack-home/DocsBenchmarksGraph.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useState } from "react"; -import { - BenchmarkBar, - BenchmarkCategory, - BenchmarkNumberOfModules, -} from "./PackBenchmarks"; -import { BenchmarksGraph } from "./PackBenchmarksGraph"; -import { PackBenchmarksPicker } from "./PackBenchmarksPicker"; - -export function DocsBenchmarksGraph(props: { - bars: BenchmarkBar[]; - category: BenchmarkCategory; -}) { - const [numberOfModules, setNumberOfModules] = - useState("1000"); - return ( -
- -
- -
-
- ); -} diff --git a/docs/components/pages/pack-home/PackBenchmarkTabs.tsx b/docs/components/pages/pack-home/PackBenchmarkTabs.tsx deleted file mode 100644 index f771fb1..0000000 --- a/docs/components/pages/pack-home/PackBenchmarkTabs.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { useRef, useState } from "react"; -import { AnimatePresence, motion } from "framer-motion"; -import { BenchmarkCategory } from "./PackBenchmarks"; -import classNames from "classnames"; -import gradients from "../home-shared/gradients.module.css"; - -const TABS: { - id: BenchmarkCategory; - title: string; - soon: boolean; - tooltip: string; -}[] = [ - { - id: "cold", - title: "Cold Start", - soon: false, - tooltip: "First run", - }, - { - id: "file_change", - title: "File Change", - soon: false, - tooltip: "Hot Reload (HMR)", - }, - { - id: "code_build", - title: "Code Build", - soon: true, - tooltip: "First Build", - }, - { - id: "build_from_cache", - title: "Build from Cache", - soon: true, - tooltip: "Second Build", - }, -]; - -const TRANSITION = { - duration: 0.3, - ease: [0.59, 0.15, 0.18, 0.93], -}; - -function SoonBadge() { - return ( - - Soon - - ); -} - -export function PackBenchmarkTabs({ - onTabChange, -}: { - onTabChange: (tab: BenchmarkCategory) => void; -}) { - const [activeTab, setActiveTab] = useState(0); - - const onTabClick = (index: number) => { - if (TABS[index].soon) return; - setActiveTab(index); - onTabChange(TABS[index].id); - }; - - return ( -
-
- -
- {TABS.map((tab, index) => ( - - ))} -
- -
-
- ); -} - -function ToolTip({ text, children }: { text; children: React.ReactNode }) { - const [show, setShow] = useState(false); - const timeout = useRef(); - - const onMouseEnter = () => { - timeout.current = setTimeout(() => { - setShow(true); - }, 800); - }; - - const onMouseLeave = () => { - clearTimeout(timeout.current); - setShow(false); - }; - - return ( -
- -
-
-

{text}

-
- -
{children}
-
- ); -} diff --git a/docs/components/pages/pack-home/PackBenchmarks.tsx b/docs/components/pages/pack-home/PackBenchmarks.tsx deleted file mode 100644 index 9bd1db8..0000000 --- a/docs/components/pages/pack-home/PackBenchmarks.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { useState } from "react"; -import { FadeIn } from "../home-shared/FadeIn"; -import { SectionHeader, SectionSubtext } from "../home-shared/Headings"; -import { BenchmarksGraph } from "./PackBenchmarksGraph"; -import { PackBenchmarksPicker } from "./PackBenchmarksPicker"; -import { PackBenchmarkTabs } from "./PackBenchmarkTabs"; - -export type BenchmarkNumberOfModules = "1000" | "5000" | "10000" | "30000"; -export type BenchmarkCategory = - | "cold" - | "from_cache" - | "file_change" - | "code_build" - | "build_from_cache"; -export interface BenchmarkData { - next13: number; - next12: number; - vite: number; - next11: number; -} - -export interface BenchmarkBar { - label: string; - key: keyof BenchmarkData; - turbo?: true; - swc?: true; -} - -export const DEFAULT_BARS: BenchmarkBar[] = [ - { - key: "next13", - label: "Next.js 13", - turbo: true, - }, - { - key: "next12", - label: "Next.js 12", - }, - { - key: "vite", - label: "Vite", - swc: true, - }, - { - key: "next11", - label: "Next.js 11", - }, -]; -export const HMR_BARS: BenchmarkBar[] = [ - { - key: "next13", - label: "Next.js 13", - turbo: true, - }, - { - key: "vite", - label: "Vite", - swc: true, - }, - { - key: "next12", - label: "Next.js 12", - }, - { - key: "next11", - label: "Next.js 11", - }, -]; - -export function PackBenchmarks() { - const [numberOfModules, setNumberOfModules] = - useState("1000"); - const [category, setCategory] = useState("cold"); - - return ( - -
- Faster Than Fast - - Crafted by the creators of Webpack, Turbopack delivers unparalleled - performance at scale. - -
-
- - -
- - - ); -} diff --git a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx b/docs/components/pages/pack-home/PackBenchmarksGraph.tsx deleted file mode 100644 index f3107b0..0000000 --- a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx +++ /dev/null @@ -1,333 +0,0 @@ -import cn from "classnames"; -import { - animate, - motion, - useInView, - useAnimation, - AnimationPlaybackControls, -} from "framer-motion"; -import Image from "next/image"; -import { useEffect, useRef, useState } from "react"; -import benchmarkData from "./benchmark-data/data.json"; -import { Gradient } from "../home-shared/Gradient"; -import gradients from "../home-shared/gradients.module.css"; -import { - BenchmarkBar, - BenchmarkCategory, - BenchmarkData, - BenchmarkNumberOfModules, -} from "./PackBenchmarks"; - -interface BenchmarksGraphProps { - category: BenchmarkCategory; - numberOfModules: BenchmarkNumberOfModules; - bars: BenchmarkBar[]; - pinTime?: true; -} - -export function BenchmarksGraph({ - category, - numberOfModules, - bars, - pinTime, -}: BenchmarksGraphProps) { - const data: BenchmarkData = benchmarkData[category][numberOfModules]; - const keys = bars.map((bar) => bar.key); - const longestTime = Math.max(...keys.map((key) => data[key])) * 1000; - const longestTimeWithPadding = longestTime * 1.15; - const graphRef = useRef(null); - const graphInView = useInView(graphRef, { once: true, margin: "-128px" }); - - return ( -
-
- -
-
- {bars.map((bar) => { - return ( - - } - duration={data[bar.key] * 1000} - longestTime={longestTimeWithPadding} - inView={graphInView} - pinTime={pinTime} - > - ); - })} -
-
- ); -} - -const START_DELAY = 0.0; - -const graphBarVariants = { - initial: { - width: 0, - }, - progress: { - width: "100%", - }, -}; - -const graphBarWrapperVariants = { - hidden: { - opacity: 0, - }, - show: { - opacity: 1, - }, -}; - -function GraphBar({ - turbo, - duration, - longestTime, - inView, - Label, - pinTime, -}: { - turbo?: boolean; - duration: number; - longestTime: number; - Label: JSX.Element; - inView?: boolean; - // Pin the time - pinTime?: true; -}) { - const controls = useAnimation(); - const [timer, setTimer] = useState(0); - const [timerAnimation, setTimerAnimation] = - useState(); - const [barWidth, setBarWidth] = useState(0); - const [, setFinished] = useState(false); - - async function stopAnimation() { - timerAnimation && timerAnimation.stop(); - controls.stop(); - } - - async function resetAnimation() { - setTimer(0); - setFinished(false); - await controls.start("initial"); - } - - async function startAnimation() { - const transition = { - duration: duration / 1000, - delay: START_DELAY, - }; - setBarWidth((duration / longestTime) * 100); - await controls.start("show"); - controls - .start("progress", { - ...transition, - ease: "linear", - }) - .then(() => { - setFinished(true); - }); - const timerAnimationRef = animate(0, duration, { - ...transition, - ease: "linear", - onUpdate(value) { - setTimer(value); - }, - }); - setTimerAnimation(timerAnimationRef); - } - - async function playFullAnimation() { - await stopAnimation(); - await controls.start("hidden"); - await resetAnimation(); - await startAnimation(); - } - - useEffect(() => { - if (inView) { - void startAnimation(); - } else { - void stopAnimation(); - void resetAnimation(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [inView]); - - useEffect(() => { - if (!inView) return; - void playFullAnimation(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [duration, longestTime]); - - return ( -
-
{Label}
-
- - - - - - -
-
- ); -} - -const GraphTimer = ({ - turbo, - timer, - duration, -}: { - turbo: boolean; - timer: number; - duration: number; -}) => { - return ( -
- {turbo && ( -
- HydroRollTRPG - HydroRollTRPG - -
- )} -

-

-
- ); -}; - -function roundTo(num: number, decimals: number) { - const factor = Math.pow(10, decimals); - return Math.round(num * factor) / factor; -} - -const Time = ({ - value, - maxValue, -}: { - value: number; - maxValue: number; -}): JSX.Element => { - let unitValue: string; - let unit: string; - if (maxValue < 1000) { - unitValue = Math.round(value).toFixed(0); - unit = "ms"; - } else { - const roundedValue = roundTo(value / 1000, 1); - unitValue = roundedValue.toFixed(1); - unit = "s"; - } - - return ( - <> - {unitValue} - {unit} - - ); -}; - -function GraphLabel({ - label, - turbo, - swc, - mobileOnly, - esbuild, -}: { - label: string; - turbo?: boolean; - swc?: boolean; - mobileOnly?: boolean; - esbuild?: boolean; -}) { - return ( -
-

{label}

- {turbo && ( -

- turbo -

- )} - {swc && ( -

- with SWC -

- )} - {esbuild && ( -

esbuild

- )} -
- ); -} diff --git a/docs/components/pages/pack-home/PackBenchmarksPicker.tsx b/docs/components/pages/pack-home/PackBenchmarksPicker.tsx deleted file mode 100644 index 33e5bfd..0000000 --- a/docs/components/pages/pack-home/PackBenchmarksPicker.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { BenchmarkNumberOfModules } from "./PackBenchmarks"; -import { PackDropdown } from "./PackDropdown"; - -export function PackBenchmarksPicker(props: { - setNumberOfModules: (num: BenchmarkNumberOfModules) => void; -}) { - return ( -
- - React Components - - props.setNumberOfModules(value)} - /> -
- ); -} diff --git a/docs/components/pages/pack-home/PackDropdown.tsx b/docs/components/pages/pack-home/PackDropdown.tsx deleted file mode 100644 index 7ff5d76..0000000 --- a/docs/components/pages/pack-home/PackDropdown.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import { useState, Fragment } from "react"; -import { Listbox, Transition } from "@headlessui/react"; -import { BenchmarkNumberOfModules } from "./PackBenchmarks"; - -export function PackDropdown({ - onOptionSelected, -}: { - onOptionSelected: (option: BenchmarkNumberOfModules) => void; -}) { - const [selectedOption, setSelectedOption] = - useState("1000"); - - const onSelect = (option: BenchmarkNumberOfModules) => { - onOptionSelected(option); - setSelectedOption(option); - }; - - return ( -
- - - {Number(selectedOption).toLocaleString()} - - - - - - - `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ - active ? "bg-gray-800 text-gray-100" : "text-gray-900" - }` - } - > - 1000 - - - `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ - active ? "bg-gray-800 text-gray-100" : "text-gray-900" - }` - } - value="5000" - > - 5000 - - - `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ - active ? "bg-gray-800 text-gray-100" : "text-gray-900" - }` - } - value="10000" - > - 10000 - - - `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ - active ? "bg-gray-800 text-gray-100" : "text-gray-900" - }` - } - value="30000" - > - 30000 - - - - -
- ); -} - -function BenchmarkOption({ - value, - onSelect, -}: { - value: BenchmarkNumberOfModules; - onSelect: (value: string) => void; -}) { - return ( -
onSelect(value)} - > -

- {Number(value).toLocaleString()} -

-
- ); -} - -function Arrow() { - return ( - - - - ); -} diff --git a/docs/components/pages/pack-home/PackFeatures.tsx b/docs/components/pages/pack-home/PackFeatures.tsx deleted file mode 100644 index 40fda95..0000000 --- a/docs/components/pages/pack-home/PackFeatures.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { PACK_HOME_FEATURES } from "../../../content/features"; -import { FeaturesBento } from "../home-shared/FeaturesBento"; - -export function PackFeatures() { - return ( - - ); -} diff --git a/docs/components/pages/pack-home/PackHero.tsx b/docs/components/pages/pack-home/PackHero.tsx deleted file mode 100644 index 9def8df..0000000 --- a/docs/components/pages/pack-home/PackHero.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import cn from "classnames"; -import Image from "next/image"; -import Link from "next/link"; -// import { Marquee } from "../../clients/Marquee"; -// import { Clients } from "../../clients/Clients"; -import gradients from "../home-shared/gradients.module.css"; -import { HeroText, SectionSubtext } from "../home-shared/Headings"; -import { Gradient } from "../home-shared/Gradient"; -import { FadeIn } from "../home-shared/FadeIn"; -import { CTAButton } from "../home-shared/CTAButton"; -import PackLogo from "../../logos/PackLogo"; - -export function PackHero() { - return ( - <> - - -
- HydroRollTRPG - HydroRollTRPG -
-
- -
- -
- - -
- - -
- - - The Rust-powered successor to Webpack - - Turbopack is an incremental bundler optimized for JavaScript and - TypeScript, written in Rust. - - - -
- - - Get Started - - - - - GitHub - - -
-

License: MPL-2.0

- - -
- - - - ); -} diff --git a/docs/components/pages/pack-home/PackLetter.tsx b/docs/components/pages/pack-home/PackLetter.tsx deleted file mode 100644 index 46477d7..0000000 --- a/docs/components/pages/pack-home/PackLetter.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { HeroText } from "../home-shared/Headings"; -import Image from "next/image"; -import cn from "classnames"; -import gradients from "../home-shared/gradients.module.css"; -import { FadeIn } from "../home-shared/FadeIn"; -import { CTAButton } from "../home-shared/CTAButton"; -import Link from "next/link"; -import { Gradient } from "../home-shared/Gradient"; - -export function PackLetter() { - return ( -
- - - Let's move -
- the web forward - - -
- -

- It's time for a new beginning in compiler infrastructure for - the entire web ecosystem. Webpack has been downloaded over 3 billion - times. It's become an integral part of building for the web. - But just like Babel and Terser, it's time to go all-in on - native. I joined Vercel and assembled a team of world class - engineers to build the web's next generation bundler. -

-
-

- This team has taken lessons from 10 years of Webpack, combined with - the innovations in incremental computation from Turborepo and - Google's Bazel, and invented an architecture ready to withstand - the next 10 years. -

-
-

- With that, we're excited to introduce Turbopack, our - Rust-powered successor to Webpack. It will harness the power of our - build system, Turborepo, for massive performance improvements. - Turbopack is the new foundation of high-performance bare-metal - tooling and is now open source—we're excited to share it with - you. -

- - - - - -
- Image of Tobias Koopers -
-
- Tobias Koppers hand written signature - Tobias Koppers hand written signature -
-

Tobias Koppers

-

Creator of Webpack

-
-
- -
- -
- - - Start Building - - -
- - -
- ); -} diff --git a/docs/components/pages/pack-home/benchmark-data/README.md b/docs/components/pages/pack-home/benchmark-data/README.md deleted file mode 100644 index 9b53481..0000000 --- a/docs/components/pages/pack-home/benchmark-data/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# `turbopack` Benchmark Data - -- `bench_startup`: Time from cold start of the bundler to the browser successfully retrieving bundled scripts. This does not include react hydration time. -- `bench_hydration`: Time from cold start of the bundler to the browser successfully retrieving bundled scripts. This does wait until react hydration has completed. -- `bench_restart`: Before measuring: warms up any available persistent cache (we don’t have one yet) by performing the equivalent of the bench_hydration benchmark, shuts down the server. Then, times another bench_hydration. -- `bench_hmr_to_eval`: Measures the time it takes from an incremental change to be made, bundled, sent over hmr, and evaluated by the browser. -- `bench_hmr_to_commit`: Measures the time it takes from an incremental change to be made, bundled, sent over hmr, evaluated by the browser, and committed by React (runs a useEffect). diff --git a/docs/components/pages/pack-home/benchmark-data/data.json b/docs/components/pages/pack-home/benchmark-data/data.json deleted file mode 100644 index f88ae6f..0000000 --- a/docs/components/pages/pack-home/benchmark-data/data.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "cold": { - "1000": { - "next13": 1.38187759, - "vite": 4.19890847, - "next12": 3.64327949, - "next11": 9.19035540 - }, - "5000": { - "next13": 3.99792562, - "vite": 16.59615430, - "next12": 12.14057345, - "next11": 32.89712268 - }, - "10000": { - "next13": 7.34248178, - "vite": 32.25177941, - "next12": 23.27525035, - "next11": 71.80680350 - }, - "30000": { - "next13": 21.97034306, - "vite": 97.74466099, - "next12": 89.07274544, - "next11": 237.61188540 - } - }, - "file_change": { - "1000": { - "next13": 0.01890358, - "vite": 0.10476515, - "next12": 0.14617346, - "next11": 0.21155549 - }, - "5000": { - "next13": 0.02379283, - "vite": 0.10963156, - "next12": 0.49470051, - "next11": 0.86600602 - }, - "10000": { - "next13": 0.02302405, - "vite": 0.11295908, - "next12": 1.15193035, - "next11": 2.35675312 - }, - "30000": { - "next13": 0.02246753, - "vite": 0.13328557, - "next12": 6.40370549, - "next11": 9.50431942 - } - } -} diff --git a/docs/components/pages/pack-home/index.tsx b/docs/components/pages/pack-home/index.tsx deleted file mode 100644 index d08443b..0000000 --- a/docs/components/pages/pack-home/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { PackBenchmarks } from "./PackBenchmarks"; -import { PackHero } from "./PackHero"; -import { PackLetter } from "./PackLetter"; -import { PackFeatures } from "./PackFeatures"; -import { GradientSectionBorder } from "../home-shared/GradientSectionBorder"; -import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles"; - -export default function HydroRollTRPGHome() { - return ( - <> - -
- - - - - - - - -
- - ); -} -- cgit v1.2.3-70-g09d2