-
-
Notifications
You must be signed in to change notification settings - Fork 72
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b227e45
commit ff6c075
Showing
3 changed files
with
61 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,104 +1,71 @@ | ||
| import { cn } from "fumadocs-ui/components/api" | ||
| import React from "react" | ||
|
|
||
| const barStyles: React.CSSProperties = { | ||
| height: "30px", | ||
| borderRadius: "5px", | ||
| borderRadius: "8px", | ||
| display: "flex", | ||
| alignItems: "baseline", | ||
| marginRight: "1rem", | ||
| marginRight: "0.5rem", | ||
| marginBottom: "0.5rem", | ||
| color: "black" | ||
| } | ||
|
|
||
| const arkBarStyles = { | ||
| ...barStyles, | ||
| background: | ||
| "repeating-linear-gradient(135deg, #40decc, #40decc 10px, #34c8b9 10px, #34c8b9 20px)" | ||
| "repeating-linear-gradient(135deg, #00ffd5, #00ffd5 12px, #00e6bf 12px, #00e6bf 24px)" | ||
| } | ||
|
|
||
| const zodBarStyles = { | ||
| ...barStyles, | ||
| background: | ||
| "repeating-linear-gradient(135deg, #b084f6, #b084f6 10px, #9a6fe3 10px, #9a6fe3 20px)" | ||
| "repeating-linear-gradient(135deg, rgba(140, 205, 255, 0.6), rgba(140, 205, 255, 0.6) 12px, rgba(124, 189, 237, 0.6) 12px, rgba(124, 189, 237, 0.6) 24px)" | ||
| } | ||
|
|
||
| const yupBarStyles = { | ||
| ...barStyles, | ||
| background: | ||
| "repeating-linear-gradient(135deg, rgba(144, 175, 224, 0.7), rgba(144, 175, 224, 0.7) 12px, rgba(133, 157, 199, 0.7) 12px, rgba(133, 157, 199, 0.7) 24px)" | ||
| } | ||
|
|
||
| export const RuntimeBenchmarksGraph: React.FC<{ className?: string }> = ({ | ||
| className | ||
| }) => ( | ||
| <div | ||
| style={{ fontSize: 14, fontWeight: 500 }} | ||
| style={{ | ||
| fontSize: 16.8, | ||
| fontWeight: 500, | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| flexGrow: 1 | ||
| }} | ||
| className={cn("font-semibold text-white", className)} | ||
| > | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| flexDirection: "row" | ||
| }} | ||
| > | ||
| <h6 className="text-lg mb-2"> | ||
| Object Validation, Node v22.2.0 ( | ||
| <a | ||
| target="_blank" | ||
| href="https://moltar.github.io/typescript-runtime-type-benchmarks/" | ||
| > | ||
| source | ||
| </a> | ||
| ) | ||
| </h6> | ||
| </div> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| alignItems: "center" | ||
| }} | ||
| > | ||
| <div style={{ ...arkBarStyles, width: "1.06%" }}></div> | ||
| ArkType (15 nanoseconds) | ||
| </div> | ||
| <div style={{ ...zodBarStyles, width: "100%" }}> | ||
| Zod (1374 nanoseconds) | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| export const TypeBenchmarksGraph = () => ( | ||
| <div style={{ fontSize: 14, fontWeight: 500 }}> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| flexDirection: "row" | ||
| }} | ||
| > | ||
| <h6 style={{ fontSize: 15 }}> | ||
| Union Type Instantiations, TypeScript 5.5.3 ( | ||
| <a | ||
| target="_blank" | ||
| href="https://github.com/arktypeio/arktype/blob/468da965d9a2bbb16fe38d37e82c3b35e5158334/ark/repo/scratch/discriminatedComparison.ts" | ||
| > | ||
| source | ||
| </a> | ||
| ) | ||
| </h6> | ||
| </div> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| alignItems: "center" | ||
| }} | ||
| > | ||
| <div style={{ ...arkBarStyles, width: "10.94%" }}></div> | ||
| ArkType Auto-Discriminated (7,801) | ||
| </div> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| alignItems: "center" | ||
| }} | ||
| > | ||
| <div style={{ ...zodBarStyles, width: "34.98%" }}></div> | ||
| Zod Raw (24,944) | ||
| <div style={{ display: "flex", flexDirection: "row" }}> | ||
| <h6 className="text-xl mb-2">Object Validation, Node v23.6.1</h6>{" "} | ||
| <a | ||
| className="underline ml-2" | ||
| target="_blank" | ||
| href="https://moltar.github.io/typescript-runtime-type-benchmarks/" | ||
| style={{ textDecoration: "underline", color: "#1e90ff" }} | ||
| > | ||
| (source) | ||
| </a> | ||
| </div> | ||
| <div style={{ ...zodBarStyles, width: "100%", justifyContent: "end" }}> | ||
| Zod Discriminated (71,312) | ||
| <div style={{ display: "flex", flexDirection: "column", flexGrow: 1 }}> | ||
| <div style={{ display: "flex", alignItems: "center" }}> | ||
| <div style={{ ...arkBarStyles, width: "0.5%" }}></div> | ||
| ArkType ⚡ 14 nanoseconds | ||
| </div> | ||
| <div style={{ ...zodBarStyles, width: "50%" }}> | ||
| Zod 👍 1397 nanoseconds | ||
| </div> | ||
| <div style={{ ...yupBarStyles, width: "100%" }}> | ||
| Yup 🐌 40755 nanoseconds* | ||
| </div> | ||
| <div className="text-xs mt-auto self-end"> | ||
| *scaling generously logarithmized | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) |