18 | {children}
19 |
20 | );
21 |
--------------------------------------------------------------------------------
/packages/validate/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod/v4";
2 |
3 | export const CPU_PROFILE_FILENAME = "tsc.cpuprofile";
4 |
5 | export const typeId = z.number().int().positive().or(z.literal(-1));
6 |
7 | export type TypeId = z.infer
3 | 
4 |
7 | a tool for diagnosing and fixing TypeScript performance problems 8 |
9 | 10 | ## Quickstart 11 | 12 | run: 13 | 14 | ```bash 15 | npx typeslayer 16 | ``` 17 | 18 | in the root package you want to inspect (i.e. colocated to your package.json). The tool will: 19 | 20 | 1. start a local web UI, 21 | 2. run TypeScript tooling to produce traces and CPU profiles 22 | 3. provide interactive visualizations (treemaps, force graphs, speedscope/perfetto views) that you can use to identify problems 23 | 24 | ## Frequently Asked Questions 25 | 26 | - will this ever get CI support for analysis file generation? 27 | - yeah prolly eventually. 28 | - will this support monorepos? 29 | - that's the hope. one step at a time. 30 | - why isn't this just a CLI tool? 31 | - a goal of the project is show intuitive/beautiful interactive visualizations like treemaps and force graphs, inherently not something a terminal can provide. 32 | - I don't like CLI tools. I view them as a last resort, at this point in engineering history. if you're someone that stays up late into the night staring at your dotfiles from neovim... I'm happy for you. be happy for me too? 33 | - will this work with ts-go? 34 | - that's the hope but it ain't ready yet on the ts-go side 35 | 36 | # Who needs this stupid thing, anyway? 37 | 38 | TypeSlayer is one of those things that most developers don't need. others might just find it lulzy to play around with. 39 | 40 | but then there's the power users. the library authors. the people attending SquiggleConf. you know the kind. 41 | 42 | for the people pushing the boundaries of TypeScript (or at companies doing so intentionally or not), a tool like this is something we haven't seen before. there were ways to trash _hours_ messing with multi-hundred-megabyte JSON files. and that's not even counting the time required to learn how the TypeScript compiler works so you can understand the problem... it's a lot. 43 | 44 | consider the fact that this can sometimes feel like an impossible task for a library author because the code that actually exercises the library isn't directly accessible - it's in the _library user_'s code (which is usually private). 45 | 46 | I made TypeSlayer because I learned delulu-levels-of-detail about TypeScript performance tuning [while getting Doom to run in TypeScript types](https://youtu.be/0mCsluv5FXA), yet many of those techniques are still opaque to most people. 47 | 48 | I wanted to make it easy for others to put up PRs at their companies all like "I increased type-checking perf on this file by 380,000x and shaved 23 seconds off every CI run" (real story btw lol). I took what I learned about how to debug type performance and wrapped it all up into this tool. 49 | 50 | ## Data / Security 51 | 52 | TypeSlayer supports Linux x64 (glibc 2.39+), macOS ARM64 (Apple Silicon), and Windows x64. Please note that next year is the year of the Linux desktop. 53 | 54 | TypeSlayer currently does not collect any analytics - although it probably will try to collect "someone somewhere ran it at XYZ timestamp" data in the future. all data is stored: 55 | 56 | - Linux: `~/.local/share/typeslayer/` 57 | - macOS: `~/Library/Application Support/typeslayer/` 58 | - Windows: `%APPDATA%\typeslayer\` 59 | 60 | TypeSlayer can read any file the running user can read and it can run package.json scripts (so treat it as you would your terminal). 61 | 62 | ## Contributing 63 | 64 | 1. all commits (and therefor PR merges) must be the next bar from "My Name Is" by Eminem, until further notice 65 | 2. no further requirements 66 | 67 | ## Thank You 68 | 69 | this app is built with Tauri, TanStack, Vite, Biome, React, MUI, Rust, and of course, TypeScript. 70 | -------------------------------------------------------------------------------- /npm/typeslayer/README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 | 
4 |
7 | a tool for diagnosing and fixing TypeScript performance problems 8 |
9 | 10 | ## Quickstart 11 | 12 | run: 13 | 14 | ```bash 15 | npx typeslayer 16 | ``` 17 | 18 | in the root package you want to inspect (i.e. colocated to your package.json). The tool will: 19 | 20 | 1. start a local web UI, 21 | 2. run TypeScript tooling to produce traces and CPU profiles 22 | 3. provide interactive visualizations (treemaps, force graphs, speedscope/perfetto views) that you can use to identify problems 23 | 24 | ## Frequently Asked Questions 25 | 26 | - will this ever get CI support for analysis file generation? 27 | - yeah prolly eventually. 28 | - will this support monorepos? 29 | - that's the hope. one step at a time. 30 | - why isn't this just a CLI tool? 31 | - a goal of the project is show intuitive/beautiful interactive visualizations like treemaps and force graphs, inherently not something a terminal can provide. 32 | - I don't like CLI tools. I view them as a last resort, at this point in engineering history. if you're someone that stays up late into the night staring at your dotfiles from neovim... I'm happy for you. be happy for me too? 33 | - will this work with ts-go? 34 | - that's the hope but it ain't ready yet on the ts-go side 35 | 36 | # Who needs this stupid thing, anyway? 37 | 38 | TypeSlayer is one of those things that most developers don't need. others might just find it lulzy to play around with. 39 | 40 | but then there's the power users. the library authors. the people attending SquiggleConf. you know the kind. 41 | 42 | for the people pushing the boundaries of TypeScript (or at companies doing so intentionally or not), a tool like this is something we haven't seen before. there were ways to trash _hours_ messing with multi-hundred-megabyte JSON files. and that's not even counting the time required to learn how the TypeScript compiler works so you can understand the problem... it's a lot. 43 | 44 | consider the fact that this can sometimes feel like an impossible task for a library author because the code that actually exercises the library isn't directly accessible - it's in the _library user_'s code (which is usually private). 45 | 46 | I made TypeSlayer because I learned delulu-levels-of-detail about TypeScript performance tuning [while getting Doom to run in TypeScript types](https://youtu.be/0mCsluv5FXA), yet many of those techniques are still opaque to most people. 47 | 48 | I wanted to make it easy for others to put up PRs at their companies all like "I increased type-checking perf on this file by 380,000x and shaved 23 seconds off every CI run" (real story btw lol). I took what I learned about how to debug type performance and wrapped it all up into this tool. 49 | 50 | ## Data / Security 51 | 52 | TypeSlayer supports Linux x64 (glibc 2.39+), macOS ARM64 (Apple Silicon), and Windows x64. Please note that next year is the year of the Linux desktop. 53 | 54 | TypeSlayer currently does not collect any analytics - although it probably will try to collect "someone somewhere ran it at XYZ timestamp" data in the future. all data is stored: 55 | 56 | - Linux: `~/.local/share/typeslayer/` 57 | - macOS: `~/Library/Application Support/typeslayer/` 58 | - Windows: `%APPDATA%\typeslayer\` 59 | 60 | TypeSlayer can read any file the running user can read and it can run package.json scripts (so treat it as you would your terminal). 61 | 62 | ## Contributing 63 | 64 | 1. all commits (and therefor PR merges) must be the next bar from "My Name Is" by Eminem, until further notice 65 | 2. no further requirements 66 | 67 | ## Thank You 68 | 69 | this app is built with Tauri, TanStack, Vite, Biome, React, MUI, Rust, and of course, TypeScript. 70 | -------------------------------------------------------------------------------- /packages/analyze-trace/src/spans.ts: -------------------------------------------------------------------------------- 1 | import { 2 | eventPhase, 3 | type TraceEvent, 4 | type TraceJsonSchema, 5 | } from "@typeslayer/validate"; 6 | import type { 7 | AnalyzeTraceOptions, 8 | EventSpan, 9 | Microseconds, 10 | ParseResult, 11 | } from "./utils"; 12 | 13 | /* 14 | * This function takes an array of trace events and converts them into spans. 15 | */ 16 | export function createSpans(traceFile: TraceJsonSchema): ParseResult { 17 | // Sorted in increasing order of start time (even when below timestamp resolution) 18 | const unclosedStack: TraceEvent[] = []; 19 | 20 | // Sorted in increasing order of end time, then increasing order of start time (even when below timestamp resolution) 21 | const spans: EventSpan[] = []; 22 | 23 | traceFile.forEach((event: TraceEvent) => { 24 | switch (event.ph) { 25 | case eventPhase.begin: 26 | unclosedStack.push(event); 27 | return; 28 | 29 | case eventPhase.end: { 30 | const beginEvent = unclosedStack.pop(); 31 | if (!beginEvent) { 32 | throw new Error("Unmatched end event"); 33 | } 34 | spans.push({ 35 | event: beginEvent, 36 | start: beginEvent.ts, 37 | end: event.ts, 38 | duration: event.ts - beginEvent.ts, 39 | children: [], 40 | }); 41 | break; 42 | } 43 | 44 | case eventPhase.complete: { 45 | const start = event.ts; 46 | const duration = event.dur ?? 0; 47 | spans.push({ 48 | event, 49 | start, 50 | end: start + duration, 51 | duration, 52 | children: [], 53 | }); 54 | break; 55 | } 56 | 57 | case eventPhase.instantGlobal: 58 | case eventPhase.metadata: 59 | return; 60 | 61 | default: 62 | event satisfies never; 63 | } 64 | }); 65 | 66 | const parseResult: ParseResult = { 67 | firstSpanStart: Math.min(...spans.map(span => span.start)), 68 | lastSpanEnd: Math.max(...spans.map(span => span.end)), 69 | spans, 70 | unclosedStack, 71 | }; 72 | return parseResult; 73 | } 74 | 75 | export function createSpanTree( 76 | parseResult: ParseResult, 77 | options: AnalyzeTraceOptions, 78 | ): EventSpan { 79 | const { firstSpanStart, lastSpanEnd, spans, unclosedStack } = parseResult; 80 | 81 | // Add unclosed events to the spans 82 | for (let i = unclosedStack.length - 1; i >= 0; i--) { 83 | const event = unclosedStack[i]; 84 | const start = event.ts; 85 | const end = lastSpanEnd; 86 | spans.push({ 87 | event, 88 | start, 89 | end, 90 | duration: end - start, 91 | children: [], 92 | }); 93 | } 94 | 95 | spans.sort((a, b) => a.start - b.start); 96 | 97 | const root: EventSpan = { 98 | event: { 99 | name: "root", 100 | cat: "program", 101 | }, 102 | start: firstSpanStart, 103 | end: lastSpanEnd, 104 | duration: lastSpanEnd - firstSpanStart, 105 | children: [], 106 | }; 107 | const stack = [root]; 108 | 109 | for (const span of spans) { 110 | let i = stack.length - 1; 111 | for (; i > 0; i--) { 112 | // No need to check root at stack[0] 113 | const curr = stack[i]; 114 | if (curr.end > span.start) { 115 | // Pop down to parent 116 | stack.length = i + 1; 117 | break; 118 | } 119 | } 120 | 121 | /** Microseconds */ 122 | const thresholdDuration: Microseconds = options.forceMillis * 1000; 123 | const isAboveThresholdDuration = span.duration >= thresholdDuration; 124 | 125 | const parent = stack[i]; 126 | const parentDuration = parent.end - parent.start; 127 | const isSignificantPortionOfParent = 128 | span.duration >= parentDuration * options.minSpanParentPercentage; 129 | 130 | if (isAboveThresholdDuration || isSignificantPortionOfParent) { 131 | parent.children.push(span); 132 | stack.push(span); 133 | } 134 | } 135 | 136 | return root; 137 | } 138 | -------------------------------------------------------------------------------- /packages/typeslayer/src/components/auth-gate.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Container, TextField, Typography } from "@mui/material"; 2 | import { invoke } from "@tauri-apps/api/core"; 3 | import { type FC, useCallback, useEffect, useState } from "react"; 4 | import typeslayerLogo from "../assets/typeslayer.png"; 5 | import { useToast } from "../contexts/toast-context"; 6 | 7 | interface AuthGateProps { 8 | onAuthorized: () => void; 9 | } 10 | 11 | export const AuthGate: FC-
108 |
-
57 | {hotSpots.map(({ path, timeMs }) => {
58 | const relativeTime = timeMs / firstHotSpot.timeMs;
59 | const fileName = path?.split("/").slice(-1)[0] ?? "